/* Breakpoints - for reference:
	sm: 640px
	md: 768px
	lg: 1248px
	xs: 320px
	xl: 1440px
*/

/* Paragraph
   ========================================================================== */

.Paragraph___sm {
	font-family: var(--font-primary);
	font-weight: var(--font-weight--normal);
	font-size: var(--font-size--sm);
	line-height: var(--line-height--4xl);
}

.Paragraph___md {
	font-family: var(--font-primary);
	font-weight: var(--font-weight--normal);
	font-size: var(--font-size--md);
	line-height: var(--line-height--2xl);
}

/* Button
   ========================================================================== */
.Button {
	position: relative;
	display: inline-block;
	padding: var(--spacing--xs) var(--spacing--lg);
	text-decoration: none;
	line-height: var(--line-height--lg);
	border-radius: var(--corner-size--sm);
	border: var(--border--md) solid transparent;
	text-align: center;
	min-width: 110px;
	font-weight: var(--font-weight--medium);
	white-space: nowrap;
}

.Button__primary {
	color: var(--color-white);
	background: var(--color-cta-primary);
	font-size: var(--font-size--sm);
	border: 1px solid var(--color-cta-primary);
	padding: var(--spacing--sm) var(--spacing--lg);
	transition: all var(--trans-time--shorter);
}

.Button__primary:hover,
.Button__primary:focus {
	color: var(--color-cta-primary);
	border: 1px solid var(--color-cta-primary);
	background: var(--color-white);
	text-decoration: none;
}

/* Form
   ========================================================================== */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.FormfieldString {
	position: relative;
	display: flex;
	flex-flow: column;
	color: var(--color-primary-gray-90);
}

.FormfieldString.isDisabled {
	color: var(--color-primary-gray-5);
}

.FormfieldString_input {
	background-color: var(--color-white);
	padding: var(--spacing--sm) var(--spacing--base);
	border: none;
	border-radius: 4px;
	width: 100%;
	color: var(--color-primary-gray-60);
	outline: 1px solid var(--color-primary-gray-40);
	font-family: var(--font-primary);
	font-weight: var(--font-weight--normal);
	font-size: var(--font-size--md);
	line-height: var(--line-height--2xl);
}

.Formfield.hasError .FormfieldString_input,
.FormfieldString_input.hasError {
	color: var(--color-error);
	background-color: var(--color-bg--error);
	outline: 2px solid var(--color-error);
}

.FormfieldString_input:hover {
	background-color: var(--color-supporting-sky-blue-10);
}

.FormfieldString_input:focus {
	color: var(--color-primary-gray-90);
	background-color: var(--color-supporting-sky-blue-10);
	outline: 2px solid var(--color-supporting-sky-blue-100);
}

.FormfieldString_input::placeholder {
	color: currentColor;
}

.FormfieldString_label {
	font-size: var(--font-size--sm);
	font-weight: var(--font-weight--semibold);
	color: currentColor;
	width: 100%;
	cursor: pointer;
	margin-bottom: var(--spacing--sm);
}

.Formfield.hasError .FormLabel,
.FormfieldString_label.hasError {
	color: var(--color-error);
}

.ErrorMessage,
.AllErrorsMessage {
	color: var(--color-error);
	margin-top: var(--spacing--xs);
}

.ErrorMessage:empty {
	display: none;
}

.FormResetPasswordLink {
	position: relative;	
	font-size: var(--font-size--sm);
	z-index: 2;
}

/* Logo
   ========================================================================== */
.Logo {
	text-decoration: none;
	color: currentColor;
}

.Logo_heading {
	position: absolute;
	left: -99999px;
}

.Logo_asset {
	display: block;
	width: auto;
	height: auto;
}

/* LoginPage
   ========================================================================== */
.LoginPage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: var(--spacing--lg);
	background-color: var(--color-primary-dark-blue);
}

@media (min-width: 768px) {
	.LoginPage {
		padding: var(--spacing--2xl);
	}
}

.LoginPage_graphicContainer {
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	height: 969px;
	max-height: 95vh;
}

/* LoginBox
   ========================================================================== */
.LoginBox {
	width: 100%;
	max-width: 470px;
	padding: var(--spacing--xl);
	border-radius: 4px;
	background: var(--color-white);
	box-shadow: 0px 2px 4px rgba(33, 33, 33, 0.18);
}

@media (min-width: 1248px) {
	.LoginBox {
		padding: var(--spacing--2xl);
	}
}

.LoginBox button {
	width: 100%;
}

.LoginBox_logo {
	display: block;
	width: 145px;
	margin-bottom: var(--spacing--2xl);
}

.LoginBox_heading {
	margin-bottom: var(--spacing--lg);
	color: var(--color-primary-dark-blue);
	font-weight: 700;
}

/* ResetPassword page
   ========================================================================== */
.ResetPassword_requestConfirmation {
	color: var(--color-green);
}