:root {
	--bkg-start-elixir: #24749f;
	--bkg-end-elixir: #64c9ff;
	--bkg-autofill: #d3e3ec;
	--hover-elixir: #1d5d7f;
	--hover-elixir-2: #669ebc;
}

#main-container .branded-login .background {
	background: linear-gradient(135deg, var(--bkg-start-elixir, #444) 5%, var(--bkg-end-elixir, #777) 95%);
}

#main-container .branded-login .logo-brand {
	content: url("/bootstrap/integration/support/logo/to-424.svg");
}

#main-container .branded-login .ilustration-line {
 	background-image: url('/bootstrap/img/brand/ilustrations/fct.svg');
}

#login-box input:focus {
	border-color: var(--hover-elixir-2);
}

#login-box .float-input-box input:not(:placeholder-shown) ~ label,
#login-box .float-input-box input:focus ~ label,
#login-box .float-input-box input:-webkit-autofill ~ label,
#login-box .float-input-box input:-webkit-autofill:hover ~ label,
#login-box .float-input-box input:-webkit-autofill:focus ~ label,
#login-box .float-input-box input:autofill ~ label {
	color: var(--hover-elixir-2);
}

#login-box input:-webkit-autofill,
#login-box input:autofill,
#login-box input:-webkit-autofill,
#login-box input:autofill {
	-webkit-box-shadow: 0 0 0px 1000px var(--bkg-autofill) inset;
}

#main-container .branded-login .login-btn {
	color: var(--bkg-start-elixir);
	border-color: var(--bkg-start-elixir);
	transition: 0.2s ease;
	transition-property: color, border-color, background-color;
}

#main-container .branded-login .login-btn:hover {
	color: #fff;
	background-color: var(--hover-elixir);
	border-color: var(--hover-elixir);
	text-shadow: none;
}

#main-container .branded-login .login-link {
	transition: color 0.2s ease;
}

#main-container .branded-login .login-link:hover {
	color: var(--hover-elixir);
}