/* $Id: 816f0ed3cc9b8c991bdc273bbfcda06c6fb23d48 $ */

BODY {
	background-color: #CCC;
	font-family: var(--hej-font);
	font-size: var(--hej-fs-base);
	line-height: var(--hej-lh-base);
}
.container {
	background-color: white;
	padding-left: 0;
	padding-right: 0;
}

@media (min-width: 576px) {
	.container {
		max-width: 100%;
	}
}
@media (min-width: 768px) {
	.container {
		max-width: 760px;
	}
}
@media (min-width: 992px) {
	.container {
		max-width: 992px;
	}
}
@media (min-width: 1200px) {
	.container {
		max-width: 1200px;
	}
}

#employer-section-warning {
	padding: 10px 20px;
	background-color: #0076cf;
	color: #fff;
}
#employer-section-warning A {
	color: #fff;
	font-weight: bold;
}

#notification-bar {
	padding: 10px 20px;
	background-color: #58A618;
	background-image: linear-gradient(#58A618, #368404);
	color: #fff;
	font-weight: bold;
}
#notification-bar .notification-text a,
#notification-bar .notification-text a:hover,
#notification-bar .notification-text a:visited,
#notification-bar .notification-text a:active {
	color:#fff;
}
#notification-bar .hide-notification,
#notification-bar .hide-notification:hover {
	padding-left: 20px;
	color:#DDD;
}

HEADER,
.main,
#footer_divider,
FOOTER {
	padding-left: 50px;
	padding-right: 50px;
}

HEADER A,
FOOTER A {
	text-decoration: none;
}
HEADER A:hover,
FOOTER A:hover {
	text-decoration: underline;
}

#footer_divider SUP {
	font-size:small;	
}


/* BEGIN PROXY BAR - defitions for a static div at the top of the page indicating that you are proxied */
.header-padding {
	height: 40px;
}
.proxy-header {
	position: fixed;
	left: 0;
	top: 0;
	background-color: #809F67;  /* F2784B */
	color: #FFF;
	padding: 10px;
	width: 100%;
	text-align: center;
	line-height: 20px;
	z-index: 999999;
	opacity: 100%;
}
.proxy-header .btn {
	margin: 0 10px;
}
.proxy-header.employer {
	background-color: #67809F;
}
.proxy-header.regemp {
	background-color: #8c6e9f;
}
.proxy-header.shifted {
	top: 40px;
}
/* END PROXY BAR */


/** BEGIN HEADER **/
HEADER {
	padding-top: 8px;
	padding-bottom: 10px;
	border-bottom: 6px solid #e7e7e7;
}

HEADER #header-logo {
	margin-top: 35px;
	margin-bottom: 15px;
}
HEADER #header-logo img {
	max-width: 300px;
}

HEADER #header-login {
	margin-top: 20px;
	font-size: 16px;
	text-align: right;
}
HEADER #header-login span.separator {
	margin-left: 10px;
	margin-right: 10px;
	color: #CCC;
}

HEADER #employer-banner {
	padding: 0;
	width: 105px;
	height: 105px;
	overflow: hidden;
	position: absolute;
	top: 0px;
	left: 0;
}
HEADER #employer-banner .ribbon {
	font-size: 15px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	text-shadow: rgba(0,0,0,0.5) 0px 1px 0px;
	-webkit-transform: rotate(-45deg);
	-moz-transform:    rotate(-45deg);
	-ms-transform:     rotate(-45deg);
	-o-transform:      rotate(-45deg);
	position: relative;
	padding: 7px 0;
	left: -40px;
	top: 20px;
	width: 150px;
	background-color: #0076CF;/*#f0ab00, #c98f00*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(#0076CF), to(#0393ff)); 
	background-image: -webkit-linear-gradient(top, #0076CF, #0393ff); 
	background-image:    -moz-linear-gradient(top, #0076CF, #0393ff); 
	background-image:     -ms-linear-gradient(top, #0076CF, #0393ff); 
	background-image:      -o-linear-gradient(top, #0076CF, #0393ff); 
	-webkit-box-shadow: 5px 8px 3px rgba(0,0,0,0.3);
	-moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
	box-shadow:         3px 3px 3px rgba(0,0,0,0.3);
}
/** END HEADER **/

/** BEGIN MAIN CONTENT **/
.main {
	position: relative;
	padding-bottom: 50px;
}
.main .banner {
	margin-left: -50px;
	margin-right: -50px;
	overflow: hidden;
}
.main > .banner:first-child {
	display: none;
	position: relative;
	height: 145px;
}
.main .bannerSlogan {
	position: absolute;
	right: 50px;
	/* vertically center in its container */
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.main .bannerSlogan H1 {
	margin: 0;
	font-weight: normal;
	color: white;
	font-size: 35px;
}

.main > .section {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.main > .full-width {
	margin-left: -50px;
	margin-right: -50px;
	padding-left: 50px;
	padding-right: 50px;
}

.main .brandbg {
	background-color: #f0ab00;
}
.main .brightbg {
	background-color: #fff;
}
.main .greybg {
	background-color: #eee;
}
.main .darkbg {
	background-color: #333;
	color: #fff;
}

.main .content {
	position: relative;
	padding-top: 15px;
}
.main .content .modal-only {
	display: none;
}

.main .sidebar {
	position: relative;
	padding-top: 15px;
}
.main .sidebar > A[data-type="image"],
.main .sidebar > IMG {
	display: block;
	margin-top: 30px;
}
/* The first module keeps the same 30px as every module below it, so there is
   always air between the breadcrumb band and the top of the rail. This used to
   zero it, which made the gap depend on what the page happened to put first:
   /admin/ leads with the widget itself and lost the margin, while
   /admin/search.cfm leads with two hidden <input>s -- so DIV:first-child missed
   the widget and it kept its 30px. Two pages, two different insets.
   The 992-1199 and <=991 blocks below already re-assert 30px; this brings the
   base breakpoint in line with them. */
.main .sidebar > DIV:first-child,
.main .sidebar > A[data-type="image"]:first-child,
.main .sidebar > IMG:first-child {
	margin-top: 30px;
}

/* Converged on the design system's .ds-breadcrumbs (RE-1130 Phase 3).
   Three things change beyond the type and colour:
     - flex instead of floated LIs, which lets the clearfix on UL:after go;
     - the separator is the text character "›" rather than
       gray-raquo-bullet.gif, so it inherits colour and scales with the type;
     - the last crumb (the current page) is ink and semibold.

   Now emitted by pageBegin as its own full-bleed band between the header and
   #mainContent, rather than as the first thing inside each page's .container.
   It follows the layout.fullwidth convention: the band carries the background
   and an inner .container re-centres the crumbs on the shared grid. The margin
   that used to space it away from the content above is gone -- the band's own
   padding does that job now. */
#breadcrumbs {
	background-color: var(--hej-surface-2);
	padding: 12px 0 8px;
	font-size: var(--hej-fs-body-s);
	color: var(--hej-ink-3);
}
/* The band's own bottom rule is gone (Marketing, 2026-09-01). Against the white
   page it was drawing a line where there is already an edge; it earns its keep
   only where a SHADED block butts straight up against the band, which on this
   site means the page banner -- the one full-bleed shaded section that can sit
   directly beneath it. So the divider moves to that block's top edge.

   The adjacent-sibling selector is what keeps it honest: pages that set
   HideBreadcrumbs emit no #breadcrumbs at all, so their banner meets the header
   and correctly gets no rule. Below md the band is d-none rather than absent,
   which the selector cannot see -- hence the md+ scope. */
@media (min-width: 768px) {
	#breadcrumbs + .main > .banner:first-child {
		border-top: 1px solid #d6dae1;
	}
}
/* The page .container paints itself white in the base layout, which would knock
   a white hole in the band; layout.fullwidth already makes it transparent, but
   this has to hold in both modes. */
#breadcrumbs .container {
	background-color: transparent;
}
#breadcrumbs UL {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
#breadcrumbs UL LI {
	margin: 0;
	padding: 0;
}
#breadcrumbs UL LI:not(:first-child):before {
	content: "\203A";
	color: var(--hej-ink-3);
	padding-right: 6px;
}
#breadcrumbs UL LI:last-child {
	color: var(--hej-ink);
	font-weight: 600;
}
/* Pre-existing: keeps crumb links from inheriting a bold weight. Left as-is --
   the last crumb is normally plain text, so it is not in conflict. */
#breadcrumbs A {
	font-weight: normal !important;
}
/** END MAIN CONTENT **/

/** BEGIN FOOTER **/
FOOTER,
FOOTER A,
FOOTER A:hover,
FOOTER A:visited,
FOOTER A:active {
	color: white;
}
/* Keep footer links white with an underline on hover (matching the homepage
   hero browse-by links). Needs :not(.btn) to out-specify components.bs5.css's
   A:not(.btn):hover, which otherwise turns them blue. */
FOOTER A:not(.btn):hover {
	color: white;
	text-decoration: underline;
}
#footer_divider {
	background-color: var(--hej-gold);
	height: 10px;
	color: #444;
}
/* The footer runs one step below body copy -- Body S, per Marketing's 2026-09-01
   feedback ("nav links and privacy links should be 14px"). Setting it on FOOTER
   rather than on each list also lands the copyright line: it carries Bootstrap's
   .small (.875em), so 14px x .875 = the 12.25px asked for, without a magic
   number. Buttons are unaffected -- .btn sizes itself from --bs-btn-font-size. */
FOOTER  {
	padding-top: 15px; /* rest made up in child margins */
	padding-bottom: 35px;
	background-color: #333333; /* darkened to match the homepage hero */
	font-size: var(--hej-fs-body-s);
}
/* 15px is not a step on the scale; it is the size Marketing specified, so it
   stays literal rather than borrowing --hej-fs-control (the button step).

   The family and weight follow the prototype's own footer override
   (`footer h5{font-family:'Figtree',sans-serif;font-weight:500}`), which fixes a
   real defect: 'Figtree Medium' is a single-weight alias, so the 700 these
   headings inherited from the H1-H6 rule was SYNTHESIZED off a 500 face rather
   than drawn. Naming the ladder and asking for 500 renders the same face for
   real. It is a visible weight change; the prototype is the reference. */
FOOTER H5 {
	color: var(--hej-gold);
	font-family: var(--hej-font);
	font-weight: 500;
	font-size: 15px;
	margin-top: 20px;
	margin-bottom: 0;
}
FOOTER .logo {
	padding-top: 20px;
	width: 200px;
}

@media (min-width: 768px) {
	FOOTER .footer-cols {
		margin-top: 20px;
	}
	FOOTER H5 {
		margin-top: 0;
	}
	FOOTER .footer-section:not(:first-child) {
		border-left: 1px solid #888;
	}
}

FOOTER UL {
	padding-left: 0;
	margin-bottom: 0;
}
FOOTER UL LI {
	list-style: none;
	padding-bottom: 2px;
}

/* Browse Jobs Accordion */
#footer-accordion {
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
}

#footer-accordion .card {
	background-color: transparent;
	border-color: #888;
	border-width: 0 0 1px 0;
	border-radius: 0;
}
#footer-accordion .card:first-child {
	border-width: 1px 0 1px 0;
}

#footer-accordion .card-header {
	padding: .25rem 0;
	background-color: inherit;
	border-bottom: 0;
}

FOOTER #footer-accordion .card-header h5 {
	margin-top: 0;
	margin-bottom: 0;
}

#footer-accordion .card-header .btn {
	width: 100%;
	white-space: normal;
	text-align: left;
	padding-left: .25rem;
	padding-right: .25rem;
}

/* These toggles are <button class="btn btn-link">, so they inherit the design
   system's button press behaviour: a 1px lift plus a shadow on hover, released
   on :active. On a row of accordion headings that reads as the whole row
   twitching when tapped, which is what Marketing reported. They are rows here,
   not buttons, so the lift comes off -- transition included, or the shadow
   would still fade in and out. */
#footer-accordion .card-header .btn,
#footer-accordion .card-header .btn:hover,
#footer-accordion .card-header .btn:active,
#footer-accordion .card-header .btn:focus {
	transform: none;
	box-shadow: none;
	transition: color .15s ease;
}

#footer-accordion .card-header .btn-link,
#footer-accordion .card-header .btn-link:hover {
	border: 0;
	color: #f0ab00;
	text-transform: uppercase;
	text-decoration: none;
}

#footer-accordion .more-less {
	float: right;
	color: #fff;
}
#footer-accordion .fas {
	margin-top: .3rem;
}

#footer-accordion .card-body {
	padding-top: 0;
	padding-left: 4px;
}

#footer-accordion .card-body ul:last-child,
#footer-accordion .card-body p:last-child {
	margin-bottom: 0;
}

FOOTER .footer-links {
	margin-top: 20px;
	margin-bottom: 5px;
}

FOOTER .icons {
	margin-top: 20px;
}
FOOTER .icons a {
	display: inline-block;
}
FOOTER .icons img {
	width: 35px;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

FOOTER .icons .icon-container {
	white-space: nowrap;
}
@media (min-width: 992px) {
	FOOTER .icons .icon-container {
		float: right;
	}
}

#footer-padding {
	height: 80px;
}
#cookie-banner {
	position: fixed;
	z-index: 10000;
	left: 0;
	bottom: 0;
	border-top: solid 1px #CCC;
	background-color: #EEE;
	padding: 20px;
	width: 100%;
}
#cookie-banner .container {
	background-color: transparent;
}
/** END FOOTER **/

/* Custom grid specifications */
.grid-inverted {
	margin-left: -50px;
	margin-right: -50px;
	padding-left: 50px;
	padding-right: 50px;
	padding-bottom: 30px;
	background-color: #EFEFF0;
}
/* End grid specifications */


@media (min-width: 992px) and (max-width: 1199px) {
	.main .sidebar:not(.col-md-4) > DIV,
	.main .sidebar:not(.col-md-4) > A[data-type="image"],
	.main .sidebar:not(.col-md-4) > IMG {
		float: left !important;
		margin-left: 30px;
	}
	.main .sidebar:not(.col-md-4) > DIV:first-child,
	.main .sidebar:not(.col-md-4) > A[data-type="image"]:first-child,
	.main .sidebar:not(.col-md-4) > IMG:first-child {
		margin-top: 30px;
	}
}

@media (max-width: 991px) {/* ipad size - down to 768 */
	/* repeat these styles since the above no longer applies */
	.main .sidebar > DIV,
	.main .sidebar > A[data-type="image"],
	.main .sidebar > IMG {
		float: left !important;
		margin-left: 30px;
	}
	.main .sidebar > DIV:first-child,
	.main .sidebar > A[data-type="image"]:first-child,
	.main .sidebar > IMG:first-child {
		margin-top: 30px;
		margin-left: 30px;
	}
}

@media (max-width: 767px) {/* small pad size - down to 560 */
	HEADER {
		border-bottom: 2px solid #bbb;
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (max-width: 559px) {/* mobile phone size - down to 320 or lower */
	#employer-section-warning {
		display: none;
	}
	.main,
	#footer_divider,
	FOOTER {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	HEADER #header-logo {
		margin-top: 10px;
	}
	HEADER #header-logo img {
		width: 200px;
	}
	
	HEADER #employer-banner {
		width: 75px;
		height: 75px;
	}
	HEADER #employer-banner .ribbon {
		padding: 0;
		font-size: 9px;
		font-weight: normal;
		text-shadow: none;
		left: -20px;
		top: 15px;
		width: 75px;
	}
	
	.main .banner {
		margin-left: -20px;
		margin-right: -20px;
	}
	.main > .banner:first-child {
		height: 95px;
	}
	.main .bannerSlogan {
		left: 20px;
		right: auto;
	}
	/* RE-1130 P77: the 35px base has no mobile step, so "Post jobs and find the best
	   talent." ran to two lines on a phone. 24px is the size Marketing asked for, and
	   the rule is inside the phone block so desktop is untouched by construction. */
	.main .bannerSlogan H1 {
		font-size: 24px;
	}

	.main > .full-width {
		margin-left: -20px;
		margin-right: -20px;
		padding-left: 20px;
		padding-right: 20px;
	}
	
	FOOTER  {
		padding-top: 15px;
		padding-bottom: 15px;
	}
	/*FOOTER .icons a {
		float: left;
	}*/
}

@media (max-width: 350px) {/* definitely mobile phone size */
	.main .sidebar > DIV,
	.main .sidebar > A[data-type="image"],
	.main .sidebar > IMG {
		margin-left: 13px !important;
	}
	.main .sidebar > DIV:first-child,
	.main .sidebar > A[data-type="image"]:first-child,
	.main .sidebar > IMG:first-child {
		margin-top: 0;
	}
}

@media print {
	/* force chrome to scale the page the way we want */
	.container {
		min-width: 800px;
	}
	
	/* turn off unnecessary sections when printing */
	#employer-section-warning,
	HEADER #header-login,
	NAV,
	.main > .banner:first-child,
	.main .sidebar,
	.scroll-to-top,
	.modal-dialog,
	#footer_divider,
	FOOTER {
		display: none !important;
	}
	
	/* shrink the logo */
	HEADER #header-logo img {
		width: 200px;
	}
	
	/* shut off bootstrap's link display */
	a[href]:after {
		content: "" !important;
	}
}
.editable-jobcategory .dropdown.bootstrap-select {
	display:block !important;
}

/* Modal chrome converged on the design system's .ds-modal (RE-1130 Phase 3):
   a dark header with a white title, a 12px corner and a deep shadow. Driven
   through Bootstrap's own --bs-modal-* variables so every modal picks it up,
   rather than only the one that had been styled by hand.

   Deliberately NOT using `overflow: hidden` to clip the dark header to the
   corner: Bootstrap already rounds the header and footer via
   --bs-modal-inner-border-radius, and clipping would cut off any dropdown,
   select menu or tooltip opened inside a modal. */
.modal {
	--bs-modal-border-radius: var(--hej-r-md);
	--bs-modal-border-color: var(--hej-line-2);
	--bs-modal-padding: 22px;
	--bs-modal-header-padding: 18px 22px;
	--bs-modal-header-border-color: transparent;
	--bs-modal-footer-border-color: var(--hej-line);
	--bs-modal-footer-gap: 8px;
	--bs-modal-footer-bg: var(--hej-surface);
}
/* Bootstrap 5.3 declares --bs-modal-box-shadow but never consumes it on
   .modal-content, so the design system's lift has to be applied directly. It is
   deeper than any of our elevation tokens (which top out at shadow-hover) and is
   used only here, so it stays a literal. */
.modal-content {
	box-shadow: 0 30px 60px rgba(15, 20, 25, .35);
}
.modal-header {
	background-color: var(--hej-ink);
	color: #fff;
}
.modal-header .modal-title,
.modal-header H2,
.modal-header H5 {
	color: #fff;
	font-family: var(--hej-font);
	font-size: var(--hej-fs-h4);
	font-weight: 700;
	text-transform: none;
	margin: 0;
}
/* Bootstrap's close glyph is a dark SVG; its own variable flips it for use on a
   dark ground, which is what .btn-close-white does. */
.modal-header .btn-close {
	--bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}

/* My Account Login Modal -- keeps its gold top accent, which is particular to
   this modal and has no design-system counterpart. The duplicate .modal-header
   and .close rules this block used to carry (a later #4d4f52 silently winning
   over an earlier #555) are consolidated, and the gold now reads from the token,
   settling one more spelling of the brand colour. */
#MyAccountLogInModal .modal-content {
	border-top: 0px !important;
}
#MyAccountLogInModal .modal-header {
	border-top: 5px solid var(--hej-gold);
}
#MyAccountLogInModal .modal-body {
	background-color: #f6f6f6;
}
#MyAccountLogInModal .modal-header .close {
	color: #fff;
	opacity: 1;
	line-height: inherit;
}
#MyAccountLogInModal .modal-action {
	margin-top: 30px;
}
#MyAccountLogInModal #MyAccountLogInModal_TogglePassword_Container {
	position: relative;
}
#MyAccountLogInModal #MyAccountLogInModal_TogglePassword {
	cursor: pointer;
	color: #0062a7;
	position: absolute;
	right: 10px;
	top:50%;
	transform: translateY(-50%);
}