@import url(../lib/material-design/css/mdc.button.min.css);
@import url(../lib/material-design/css/mdc.checkbox.min.css);
@import url(../lib/material-design/css/mdc.form-field.min.css);

a {
	color: #394889;
}

body {
	margin-top: 0px;
	--mdc-theme-primary: #394889;
	--mdc-theme-secondary: #394889;
	background-image: url("../images/login-background-optimised.svg");
	background-repeat: no-repeat;
	background-position-x: center;
	background-position-y: center;
	background-attachment: fixed;
	background-size: cover;
	background-color: #ffffff;
}

@font-face {
	font-family: "Roboto";
	src: url(../fonts/Roboto-Regular.ttf) format('truetype');
	font-weight: normal;
	font-style: normal;
}

/*** MDC Components Styles (IE compatability) ***/
:not(:disabled).mdc-button--raised, :not(:disabled).mdc-button--unelevated {
	background-color: #394889;
	background-color: var(--mdc-theme-primary);
	text-transform: none;
}

:enabled:checked.mdc-checkbox__native-control ~ .mdc-checkbox__background, :enabled:indeterminate.mdc-checkbox__native-control ~ .mdc-checkbox__background {
	background-color: #394889;
	background-color: var(--mdc-theme-secondary);
	border-color: #394889;
	border-color: var(--mdc-theme-secondary);
}

.bookmark-modal {
	display: flex;
	align-items: center;
}

.change-password {
	padding-bottom: 20px;
	float: right;
	color: #394889;
}

	.change-password a:hover, .change-password a:visited:hover {
		cursor: pointer;
	}

.checkbox-remember-me {
	margin-top: 32px;
}

.grid-login-button {
	margin: auto 0px;
}

.mdc-checkbox {
	margin: -5px 0 0 -11px;
}

.mdc-form-field {
	font-size: unset;
}

	.mdc-form-field > label {
		line-height: 1.4;
	}
/** End MDC Components Styles **/

.login-containers {
	margin-left: initial;
}

.login-centered {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding: 40px 0;
}

.login-container {
	display: flex;
	flex-flow: column nowrap;
	width: 550px;
	background-color: white;
	z-index: 1;
	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
	padding: 40px;
}

.login-product-logo {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
}

	.login-product-logo img {
		width: 250px;
	}

.signin-text {
	text-align: center;
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13pt;
	color: #4F4F4F;
	letter-spacing: 0.09rem;
	padding: 20px 0;
}

.login-status-error {
	color: white;
	background-color: #98141F;
	border-radius: 5px;
	margin-top: 20px;
	width: 100%;
	text-align: center;
}

.signin-credentials {
	display: flex;
	flex-flow: column nowrap;
}

	.signin-credentials .login-field-container {
		display: flex;
		position: relative;
		flex-flow: column nowrap;
		margin-top: 20px;
	}

		.signin-credentials .login-field-container label {
			color: #757575;
			font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size: 10pt;
			letter-spacing: 0.09rem;
			font-weight: normal;
		}

		.signin-credentials .login-field-container .login-field {
			width: 100%;
			height: 40px;
			border-radius: 2px;
			background-color: #f2f2f2;
			border: 1px solid #e1e1e1;
			padding: 10px;
		}

			.signin-credentials .login-field-container .login-field:disabled {
				border: 1px solid #B0B0B0;
				background-color: #D6D6D6;
				color: #000;
			}

			.signin-credentials .login-field-container .login-field:focus {
				outline: none;
				border-color: #394889;
				border-color: var(--mdc-theme-primary);
			}

			.signin-credentials .login-field-container .login-field.input-validation-error {
				border-color: #98141F;
			}

.login-items {
	margin-top: 34px;
	display: flex;
	flex-flow: row wrap;
}

	.login-items label {
		font-weight: normal;
	}

.checkbox-integrated-auth,
.checkbox-remember-me,
.grid-login-button,
.grid-login-button .login-button {
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 11pt;
	letter-spacing: 0.16rem;
	text-transform: initial;
}

.login-field-required {
	position: absolute;
	right: 14px;
	top: calc(50% + .1em);
	color: #98141F;
	font-weight: 700;
	user-select: none;
}

.login-button {
	width: 100%;
	height: 40px;
}

.login-footer {
	text-align: center;
	color: #757575;
	font-weight: 700;
	font-size: 10px;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #ffffff;
}

p {
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 6px 0;
}

/*** Larger than Mobile Device (Desktop/Tablet) Styles ***/
@media only screen and (min-width: 769px) {
	.login-container {
		padding: 40px 20px;
	}

	.signin-text {
		padding: 12px 12px 0px;
	}

	.checkbox-remember-me {
		flex-basis: 50%;
	}

	.grid-login-button {
		flex-basis: 50%;
	}
}

/*** Mobile Device Styles ***/
@media only screen and (max-width: 768px) and (min-width: 601px) {
	.login-centered {
		padding: 20px;
	}

		.login-centered > form.login-container {
			padding: 40px 20px;
		}

	.signin-text {
		padding: 12px 8px 0px;
	}

	.login-items .checkbox-remember-me {
		flex-basis: 50%;
	}

	.login-items .grid-login-button {
		flex-basis: 50%;
	}
}

@media only screen and (min-width: 480px) and (max-width: 600px) {
	.login-status-error {
		margin-top: 0px;
	}

	.login-items .checkbox-remember-me {
		flex-basis: 50%;
	}

	.login-items .grid-login-button {
		flex-basis: 50%;
	}

	.login-centered > form.login-container {
		padding: 40px 20px;
	}
}

/*** Really Small Mobile Device Styles ***/
@media only screen and (max-width: 479px) and (min-width: 321px) {
	.login-centered {
		padding: 12px;
	}

		.login-centered > form.login-container {
			padding: 20px 12px;
		}

	.signin-text {
		font-size: 10pt;
		padding: 12px 0px 0px;
	}

	.login-status-error {
		font-size: 10pt;
		margin-top: 16px;
	}

	.signin-credentials .login-field-container {
		margin: 16px 0px 0px;
	}

	.login-items {
		margin-top: 16px;
	}

		.login-items .checkbox-remember-me {
			flex-basis: 100%;
		}

		.login-items .grid-login-button {
			flex-basis: 100%;
			padding-top: 4px;
		}
}

/*** For tablets in landscape orientation that do not fall under other queries ***/
@media only screen and (max-height: 600px) and (min-height: 501px) {
	.login-centered {
		padding: 12px;
	}

		.login-centered > form.login-container {
			padding: 20px;
		}
}

/*** Accounting for devices that will not fit the sign-in button without scrolling ***/
@media only screen and (max-height: 500px) and (min-height: 341px) {
	.login-centered {
		padding: 12px;
	}

		.login-centered > form.login-container {
			padding: 12px;
		}

	.login-product-logo img {
		width: 150px;
	}

	.signin-text {
		font-size: 10pt;
		padding-top: 4px;
	}

	.login-status-error {
		font-size: 10pt;
		margin-top: 4px;
	}

	.signin-credentials {
		margin-top: 0px;
	}

		.signin-credentials .login-field-container {
			margin-top: 4px;
		}

			.signin-credentials .login-field-container .login-field {
				padding: 4px;
			}

			.signin-credentials .login-field-container label {
				font-size: 10pt;
				margin-bottom: 2px;
			}

	.login-items {
		margin-top: 12px;
	}

		.login-items .checkbox-remember-me {
			flex-basis: 50%;
		}

		.login-items .grid-login-button {
			flex-basis: 50%;
		}

	p {
		margin: 2px 0px;
	}
}

/*** For devices that are extra small when in landscape orientation ***/
@media only screen and (max-height: 340px) {
	.login-centered {
		padding-top: 4px;
		padding-bottom: 8px;
	}

		.login-centered > form.login-container {
			padding: 12px 8px;
		}

	.login-product-logo img {
		width: 150px;
	}

	.signin-text {
		display: none;
	}

	.login-status-error {
		font-size: 10pt;
		margin-top: 4px;
	}

	.signin-credentials {
		margin-top: 0px;
	}

		.signin-credentials .login-field-container {
			margin-top: 4px;
			margin-bottom: 0px;
		}

			.signin-credentials .login-field-container label {
				font-size: 8pt;
				margin-bottom: 2px;
			}

			.signin-credentials .login-field-container .login-field {
				padding: 2px;
				height: 36px;
			}

	.login-items {
		margin-top: 12px;
	}

	p {
		margin: 0;
	}
}

/*** For extra skinny devices ***/
@media only screen and (max-width: 320px) {
	.login-containers {
		padding: 0px;
	}

	.login-centered {
		padding: 12px;
	}

		.login-centered > form.login-container {
			padding: 20px 8px;
		}

	.login-product-logo img {
		width: 200px;
	}

	.signin-text {
		padding: 10px 0px 0px;
		font-size: 9pt;
	}

	.login-status-error {
		font-size: 9pt;
		margin-top: 20px;
	}

	.login-items {
		margin-top: 16px;
	}

		.login-items .checkbox-remember-me {
			flex-basis: 100%;
		}

		.login-items .grid-login-button {
			flex-basis: 100%;
		}
}