/* Login page in the style of naveindustries.com (fonts, colours, cards).
   Scoped to the login page only. */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap");

body[data-path="login"] {
	font-family: "DM Sans", Arial, sans-serif !important;
	/* Colour only: keep any background image (the login cartoon) set from Website Settings / Theme. */
	background-color: #f7f6f3 !important;
	min-height: 100vh;
}

body[data-path="login"] .for-login .page-card,
body[data-path="login"] .page-card {
	background: #ffffff !important;
	border: 1px solid #e5e2df !important;
	border-top: 4px solid #ed1c24 !important;
	border-radius: 0 !important;
	box-shadow: 0 20px 50px rgba(10, 7, 70, 0.09) !important;
	padding: 36px 32px !important;
}

body[data-path="login"] .page-card::before {
	content: "NAVE INDUSTRIES \00B7 ERP";
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.6px;
	color: #15104f;
}

body[data-path="login"] .page-card-head .app-logo {
	height: 52px !important;
	width: auto !important;
	max-width: 220px;
}

body[data-path="login"] .page-card-head h4 {
	font-family: Manrope, sans-serif !important;
	font-weight: 800 !important;
	color: #15104f !important;
}

body[data-path="login"] .page-card-subtitle,
body[data-path="login"] label {
	color: #696a79 !important;
}

body[data-path="login"] .form-control {
	border-radius: 0 !important;
	border: 1px solid #e5e2df !important;
	background: #ffffff !important;
	min-height: 42px;
}

body[data-path="login"] .form-control:focus {
	border-color: #15104f !important;
	box-shadow: 0 0 0 2px rgba(21, 16, 79, 0.12) !important;
}

body[data-path="login"] .es-button[data-variant="solid"],
body[data-path="login"] .btn-primary {
	background: #ed1c24 !important;
	border-color: #ed1c24 !important;
	color: #ffffff !important;
	border-radius: 0 !important;
	font: 700 14px "DM Sans", Arial, sans-serif !important;
	min-height: 44px;
}

body[data-path="login"] .es-button[data-variant="solid"]:hover,
body[data-path="login"] .btn-primary:hover {
	background: #c8141b !important;
	border-color: #c8141b !important;
}

body[data-path="login"] a {
	color: #15104f;
}

/* The Website Theme puts the Nave cartoon on the right of the page
   (background-position: right 7%, 520px wide, hidden below 768px).
   On wide screens move the login box to the left so the cartoon is not covered. */
@media (min-width: 1100px) {
	body[data-path="login"] .page-card {
		margin-left: 4vw !important;
		margin-right: auto !important;
	}
}

/* Phone: the Website Theme hides the cartoon below 768px.
   Show it smaller, centred above the login box. */
@media (max-width: 768px) {
	body[data-path="login"] {
		background-image: url("/files/Untitled%20%28200%20x%20200%20px%29%20%283%29.png") !important;
		background-repeat: no-repeat !important;
		background-position: center top 12px !important;
		background-size: 170px auto !important;
		background-attachment: scroll !important;
	}
	body[data-path="login"] .page_content {
		padding-top: 170px !important;
	}
}