body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;

	/* Taken from the design system */
	--primaryColor: #001E60;
	--accentColor: #9a6b3b;
	--hoverColor: #b47f4b;
	--radius: 8px;
	--radiusLarge: 40px;
	--padding: .5em;
	--primaryGray: #E4E4E4;
	--secondaryGray: #F2F2F2;
	--colorScrollBar: var(--accentColor);
	--fontColor: #3C4354;
	--fontColorInversed: #FFF;
	--fontFamily: 'Montserrat', 'Open sans', 'Arial', 'Sans serif', 'sans-serif';
	--warningColor: #FF8B10;
	--errorColor: #FF0000;
	--successColor: #00A10F;
	--colorBg: #ffffff;
	--animationTime: 0.4s;

	color: var(--fontColor);
	font-family: var(--fontFamily);
}

#container {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	width: 800px;
}

/* Layout */
.rows-spacing-m > * ~ * { margin: 12px 0 0; }
.rows-spacing-l > * ~ * { margin: 24px 0 0; }
.rows-spacing-xl > * ~ * { margin: 36px 0 0; }
.center { display: flex; align-items: center; justify-content: center; width: 100%; }
/* / Layout */

/* Text input */
.input-label {
	font-size: 16px;
	margin-top: 2em;
	margin-bottom: 1em;
}

.text-input {
	display: block;
	width: 100%;
	outline: none;
	border-radius: var(--radius);
	border: 1px solid var(--primaryGray);
	padding: 9px 20px;
	box-sizing: border-box;
	min-height: 39px;
	font-size: 14px;
	font-weight: 400;
	color: var(--fontColor);
	background-color: #fff;
	line-height: 18px;

	&::placeholder {
		color: #797676;
		opacity: 1; /* Firefox */
	}
}
/* /Text input */


/* Button */
.button {
	width: 100%;
	border-radius: var(--radiusLarge);
	padding: 8px 20px;
	font-size: 16px;
	font-weight: 500;
	border-style: solid;
	border-width: 3px;
	outline: none;
	cursor: pointer;
	transition: color var(--animationTime), transform var(--animationTime);
}
.button:hover {
	border-width: 3px;
	padding: 8px 20px;
}
.button:focus {
	border-width: 3px;
	padding: 8px 16px;
}

/* Orange button */
.button.primary {
	background: var(--accentColor);
	color: var(--fontColorInversed);
	border-color: var(--accentColor);
}
.button.primary:hover {
	background: var(--hoverColor);
	border-color: var(--hoverColor);
}
.button.primary:focus {
	border-color: var(--fontColorInversed);
}
.button.primary:hover:focus {
	border-color: var(--accentColor);
}

/* Inverted button */
.button.inverted {
	background: var(--fontColorInversed);
	border: 3px solid var(--accentColor);
	color: var(--accentColor);
	text-decoration: none;
	text-align: center;
	font-size: 16px;

	&:hover {
		border: 3px solid var(--hoverColor);
		color: var(--hoverColor);
	}
}

/* Grey button */
.button.secondary {
	background: var(--primaryGray);
	color: var(--fontColor);
}
.button.secondary:hover {
	background: transparent;
}
.button.secondary:focus {
	border-color: var(--fontColor);
}
.button.secondary:hover:focus {
	border-color: var(--primaryGray);
}
/* /Button */

/* Blocks */
/*   Login */
#login-container {
	width: 600px;
}

.login-actions {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

#login-buttons { }
/*   /Login */

/*   SSO */
#sso-container {
	display: flex;
	flex-direction: column;
	width: 600px;
	align-items: flex-start;
}

@media (max-width: 600px) {
	#ly-logo {
		width: 300px;
	}

	#sso-container {
		width: unset;
	}
}


.sso-title {
	font-size: 2em;
	font-weight: 600;
}

#sso-picker-container {
	display: flex;
	flex-direction: column;
}

#sso-sign-in {
	margin-top: 20px;
	margin-bottom: 14px;
}

#sso-email-error {
	height: 30px;
	margin-top: 10px;
	color: red;
	font-weight: 500;
}

#sso-picker {
	display: flex;
	flex-direction: row;
	gap: 8px;
	margin-bottom: 40px;
}

.sso-provider {
	display: flex;
	flex-direction: row;
	padding: 8px 16px;
	width: 102px;
	height: 40px;
	align-items: center;

	border: 2px solid var(--primaryColor);
	border-radius: var(--radius);
	cursor: pointer;
	transition: color var(--animationTime), transform var(--animationTime);

	svg {
		margin-right: 8px;
	}

	&:hover {
		border-color: white;
		color: white;
		background: var(--primaryColor);
		transform: scale(1.1);
	}
}
/*   /SSO */

/*   GENERIC*/
.full-width {
	width: 100%;
}

.hidden {
	display: none !important;
}
/*  /GENERIC */

/*   ERROR */
#error-container {
	display: flex;
	width: 600px;
	align-items: center;
	flex-direction: column;
}

#sso-error {
	display: flex;
	margin: 64px 0;
	color: red;
	font-weight: 600;
}
/*   /ERROR */
/* /Blocks */