/* Al Arabi branding for the login page.
 *
 * The shared theme app (datavalue_theme_15) hard-codes its own hero image and
 * stacks a small logo above it. Both are overridden from here rather than in the
 * theme, so the change stays on this site and every other site on the bench keeps
 * the theme's own artwork.
 *
 * This file is emitted before the theme's dv-login.css (app order), so the
 * overrides carry !important. Everything is scoped to #page-login.
 */

#page-login .page-card .login-content-bg {
	background-color: #fdf6ec !important;
	background-image: url("/files/al-arabi-login-hero.png") !important;
	background-repeat: no-repeat !important;
	background-position: center 48% !important;
	background-size: 84% auto !important;
}

/* the hero is the only brand mark on the panel now, so drop the theme's pair */
#page-login .page-card .login-content-bg img.app-login-bg,
#page-login .page-card .login-content-bg .app-logo {
	display: none !important;
}

#page-login .page-card .login-content-form .btn-login,
#page-login .page-card .login-content-form .btn-signup,
#page-login .page-card .login-content-form .btn-forgot {
	background: #f8931f !important;
	background: linear-gradient(-90deg, #f8931f 0%, #e07d0c 100%) !important;
}

#page-login .page-card .login-content-form a,
#page-login .page-card .login-content-form .forgot-password-message > *:hover {
	color: #d97e0a !important;
}

#page-login h2 {
	color: #202020 !important;
}

/* the theme's own focus rule is !important and loads later, so out-specify it */
body #page-login .form-control:focus,
body #page-login .form-control:focus.is-valid {
	border-color: #f8931f !important;
	box-shadow: 0 3px 10px 0 rgba(248, 147, 31, .25) !important;
}