/* Log-in page */

.loginContainer
{
	display: flex;
	flex-direction: column;
	align-items: center;

	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 80%;
}

.loginContainer h1
{
	text-shadow: white 1px 1px 1px;
	-webkit-font-smoothing: antialiased;
}

.loginContainer h2
{
	color: red;
	-webkit-font-smoothing: antialiased;
}

.loginControls
{
	display: grid;

	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-row-gap: 0.5em;
	grid-column-gap: 0.5em;
	justify-items: stretch;
	align-items: center;

	grid-template-areas:
		"header header header header"
		"header header header header"
		"label1 input1 input1 side1"
		"label2 input2 input2 side2"
		"label3 token token side10"
		"side3 timer timer side4"
		"side5 login login side6"
		"side7 request request side8"
		"footer footer footer footer"
		"error error error error"
		"licence licence licence licence";
}

.loginControls label
{
	font-weight: bold;
}

#loginDescription
{
	grid-area: header;
}

#fErrorMsg
{
	grid-area: error;
	text-align: center;
	color: red;
}

#fLicenseWarning
{
	grid-area: licence;
	text-align: center;
	color: red;
}


#usernameLabel
{
	grid-area: label1;
	text-align: right;
}

#passwordLabel
{
	grid-area: label2;
	text-align: right;
}

#fUsername
{
	grid-area: input1;
}

#fPassword
{
	grid-area: input2;
}

#divTimer
{
	grid-area: timer;
}

#divCountdown
{
	height: 15px;
	border-radius: 5px;
	background-color: var(--theme-dialog-progressbar);
	overflow: hidden;
	width: 100%;
}

#btnLogin
{
	grid-area: login;
	text-align: center;
}

#btnLogin input
{
	width: 100%;
}

#PassReset
{
	grid-area: footer;
	text-align: center;
}

#securityTokenLabel, #verificationCodeLabel
{
	grid-area: label3;
	text-align: right;
}

#fTokenPassword
{
	grid-area: token;
}

#token2fa
{
	grid-area: token;
}

#token2fa label
{
	grid-area: label3;
}

#request2fa
{
	grid-area: request;
	display: flex;
	justify-content: space-between;
}

.box
{
	display: grid;
	padding: 1em;
	z-index: 100;
	border-width: 2px;
	border-style: solid;
	border-color: var(--theme-colour-border);
	border-radius: 10px;
	border-collapse: collapse;
	box-sizing: border-box;
	background-color: rgba(255, 255, 255, 0.75);
}

.LinkLogin
{
	color: var(--theme-colour-link);
	text-decoration: none;
	outline: none;
	cursor: pointer;
}

.LinkLogin:hover
{
	color: var(--theme-colour-linkhighlight);
}

/* End log-in page */

/* Logged out page */

.applicationEnd
{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.applicationEndLogo
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 332px;
	width: 80%;
}

.loggedOutText
{
	font-size: 20px;
	text-align: center;
	text-shadow: white 1px 1px 1px;
	-webkit-font-smoothing: antialiased;
}

/* End of logged out page */