html {
	overflow-x: auto;
}

body,html {
	height: 100%;
	min-height: 100%;
}

#page-login {
	height: 100%;
	display: flex;
	flex-wrap: nowrap;
}

#cont-login {
	position: relative;
	width: 100%;
	max-width: 775px;
	flex-basis: 100%;
	height: 100%;
	background-color: var(--color-light-bg);
	box-shadow: 0 22px 194px 0 var(--shadow-elevation-3);
	text-align: center;
}

#login-img {
	flex-basis: 0;
	flex-grow: 1;
	background-image: url('../images/login_bg.jpg');
	background-position: 0 0;
	background-size: cover;
}

#cont-login:before { /* for vertical centering */
	display: inline-block;
	vertical-align: middle;
	height: 100%;
	content: '';
}

#login-form {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	max-width: 455px;
	margin: 0 auto;
	text-align: left;
}

#login-form h1.login-logo {
	width: 265px;
	margin-left: -8px;
	margin-bottom: 72px;
}

#login-form h1.login-logo > img {
	max-width: 100%;
}

#login-form .form-field.float-label {
	position: relative;
}

#login-form .form-field > input {
	width: 100%;
	height: 80px;
	color: var(--color-dark-accent);
	font-size: var(--fsize-normal);
	line-height: 1.2;
	padding: 8px;
	padding-top: 27px;
	background-color: var(--color-white);
	border: solid 1px var(--color-border);
	border-radius: 2px;
	filter: none;
}

#login-form .form-field + .form-field > input {
	border-top: none;
}

#login-form .form-field > input:focus {
	border-left: solid 2px var(--color-primary);
	padding-left: 7px;
}

#login-form .form-field.float-label > label {
	position: absolute;
	font-size: var(--fsize-normal);
	font-weight: bold;
	color: var(--color-body-secondary);
	z-index: 1;
	cursor: text;
	left: 24px;
	top: 30px;
	pointer-events: none;
	transition: all 0.2s ease-in-out;
}

#login-form .form-field.float-label > input:not(:placeholder-shown) + label,
#login-form .form-field.float-label > input:focus + label,
#login-form .form-field.float-label > input:active + label {
	font-size: var(--fsize-small);
	font-weight: normal;
	left: 8px;
	top: 16px;
}

#login-form .form-field.float-label > input:-webkit-autofill + label {
	font-size: var(--fsize-small);
	font-weight: normal;
	left: 8px;
	top: 16px;
}

#login-form .form-errors {
	margin-top: 16px;
	margin-bottom: -8px;
}
#login-form .form-errors ul {
	list-style: none;
	color: var(--color-primary);
}

#login-form .form-row,
#login-form .form-buttons {
	margin-top: 32px;
	color: var(--color-body-secondary);
	font-size: var(--fsize-small);
}

#login-form .form-buttons.distributed {
	display: flex;
	justify-content: space-between;
}

#login-form .form-row.flex {
	display: flex;
	justify-content: space-between;
	line-height: 1.43;
}

#login-form .form-row > .right {
	text-align: right;
}

a {
	font-size: var(--fsize-small);
	color: var(--color-body-secondary);
	font-weight: normal;
	line-height: 1.43;
	text-decoration: none;
}

#login-footer {
	position: absolute;
	left: 0;
	bottom: 56px;
	width: 100%;
	text-align: left;
}

#login-footer > div {
	width: 100%;
	max-width: 455px;
	margin: 0 auto;
}

#login-footer > div > a {
	display: inline-block;
	margin-left: 24px;
}

#login-footer > div > a:first-child {
	margin-left: 0;
}

button, a.button {
	display: inline-block;
	background-color: var(--color-body-secondary);
	padding: 12px 56px;
	color: var(--color-white);
	font-size: var(--fsize-normal);
	font-weight: bold;
	text-align: center;
	line-height: 1.2;
	border-radius: 30px;
	border: none;
	cursor: pointer;
	text-decoration: none;
}

button.active, a.button.active {
	background-color: var(--color-primary);
}

button.secondary, .button.secondary {
	background-color: transparent;
	color: var(--color-body-secondary);
	border: 2px solid var(--color-border);
}

button.secondary:hover, .button.secondary:hover {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

button.secondary:active, .button.secondary:active {
	color: var(--color-primary-active);
	border-color: var(--color-primary-active);
}

button:disabled {
	cursor: default;
}

#login-form .form-buttons.distributed button, #login-form .form-buttons.distributed .button {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	min-width: 12rem;
}

@media screen and (max-width: 460px) {
	#cont-login:before {
		display: none;
	}

	#login-form {
		margin: 120px auto;
		padding: 16px;
	}
}