/* $Id: f5e769e708f1b7210ce38f64ea02da6a85075c63 $ */

P { /* overwrites boostrap set at 10 */
	margin-bottom: 15px;
}
/* Alerts converged on the design system's .ds-alert (RE-1130 Phase 3). Ours were
   stock Bootstrap, so this drives Bootstrap's own --bs-alert-* variables rather
   than overriding the rendered properties.

   Two deliberate departures from Bootstrap's defaults:
     - the 12px corner (r-md), where Bootstrap would inherit the 8px base;
     - ink body text on every variant instead of Bootstrap's per-variant
       "text-emphasis" tint, so an alert reads as normal copy on a soft wash.
       The design system does this with a rule marked !important; setting
       --bs-alert-color reaches the same result through the cascade, so none is
       needed here.

   Note info is NEUTRAL, not blue - the DS uses a plain grey wash for it, keeping
   colour meaningful for success / warning / danger. The border tints have no
   token counterparts; they are one-use values the DS itself specifies literally. */
.alert {
	--bs-alert-border-radius: var(--hej-r-md);
	--bs-alert-padding-x: 16px;
	--bs-alert-padding-y: 14px;
	--bs-alert-color: var(--hej-ink);
	font-size: var(--hej-fs-body-s);
	line-height: 1.5;
}
.alert-info {
	--bs-alert-bg: var(--hej-surface-3);
	--bs-alert-border-color: #dcdfe4;
	--bs-alert-color: var(--hej-ink);
}
.alert-success {
	--bs-alert-bg: var(--hej-success-soft);
	--bs-alert-border-color: #c8e6c9;
	--bs-alert-color: var(--hej-ink);
}
.alert-warning {
	--bs-alert-bg: var(--hej-warning-soft);
	--bs-alert-border-color: #f5deac;
	--bs-alert-color: var(--hej-ink);
}
.alert-danger {
	--bs-alert-bg: var(--hej-danger-soft);
	--bs-alert-border-color: #f2c4c4;
	--bs-alert-color: var(--hej-ink);
}
.alert P:last-child {
	margin-bottom: 0;
}
FORM {
	margin: 0;
	padding: 0;
}
SMALL {
	color: #737373;  /* bootstap form .help-block class */
	font-weight: normal;
}
/** START HEADERS **/
H1, H2, H3, H4, H5, H6 {
	font-family: var(--hej-font-heading);
	font-weight: 700;
	color: #4c4e52;
	margin-top: 30px;
	margin-bottom: 30px;
}
H1.underline,
H2.underline,
H3.underline,
H4.underline,
h5.underline,
p.underline {
	padding-bottom: 20px;
	border-bottom: 1px solid #cccccc;
}
H1.overline,
H2.overline,
H3.overline,
H4.overline,
h5.overline {
	padding-top: 30px;
	border-top: 1px solid #cccccc;
}
H1.uppercase,
H2.uppercase,
H3.uppercase,
H4.uppercase,
a.uppercase {
	text-transform: uppercase;
}
H1.background,
H2.background,
H3.background,
H4.background,
h5.background {
	padding: 10px 15px !important;
	background-color: #F0F0F0;
	border: 0  !important;
}
H1 {
	font-size: var(--hej-fs-h1);
	letter-spacing: var(--hej-ls-h1);
}
H1:not(:first-child) {
	margin-top: 50px;
}
H2 {
	font-size: var(--hej-fs-h2);
	letter-spacing: var(--hej-ls-h2);
}
H3 {
	font-size: var(--hej-fs-h3);
}
H4 {
	font-size: var(--hej-fs-h4);
}

/* a11y (EX-3847 B9): use the correct heading LEVEL for document structure while
   keeping the size the heading had before. Mirrors the H1-H4 sizes above, so a
   demoted heading is pixel-identical. "Style via classes, not level choice." */
.as-h1 { font-size: 26px; }
.as-h2 { font-size: 20px; }
.as-h3 { font-size: 18px; }
.as-h4 { font-size: 16px; }
/* H1:not(:first-child) adds this; keep it for a demoted section heading */
H2.as-h1:not(:first-child),
H3.as-h1:not(:first-child) { margin-top: 50px; }
H5 {
	margin: 5px 0 2px 0;
	font-size: var(--hej-fs-h5);
	text-transform: uppercase;
}
/** END HEADERS **/


/** START FONT SPECIFIC **/
.font-light {
 	font-family: 'Figtree Light', Helvetica, Arial, sans-serif;
}
.font-heavy {
	font-family: var(--hej-font);
	font-weight: 700;
}
.font-large {
	font-size: var(--hej-fs-lg);
}
.font-yellow {
	color: #f0ab00;
}
/* RE-1130 G8: was the retired --hej-blue. --hej-link is the only blue DS v0.2
   keeps for text, and this utility only ever paints text or an icon glyph. */
.font-blue {
	color: var(--hej-link);
}
.font-red {
	color: var(--hej-danger);
}
.badge-yellow {
	background-color: #f0ab00;
	color: #4c4e52;
}
.font-white,
.has-error .font-white {
	color: #ffffff;
}
.badge-yellow A,
.badge-yellow A:hover,
.badge-yellow A:active,
.badge-yellow A:focus {
	color: #4c4e52;
	text-decoration: none;
}

/* Status pill -- net-new from the design system (RE-1130 Phase 3). A compact
   label carrying a coloured dot for state.

   Nothing renders this yet, and that is worth being explicit about: the design
   system's own states (active / review / interview / closed) describe
   application tracking, which lives in the employer portal and the jobseeker
   account - surfaces this pass does not cover. It is defined here so the
   vocabulary exists for whoever converges those, not because it changes a page
   today. The dot colours read from tokens, so it will inherit any later palette
   change for free. */
.status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--hej-r-pill);
	background-color: var(--hej-surface-3);
	color: var(--hej-ink);
	font-size: var(--hej-fs-xs);
	font-weight: 600;
	white-space: nowrap;
}
.status-pill:before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--hej-ink-3);
}
.status-pill.active:before {
	background-color: var(--hej-success);
}
.status-pill.review:before {
	background-color: var(--hej-link);
}
.status-pill.interview:before {
	background-color: var(--hej-gold);
}
.status-pill.closed:before {
	background-color: var(--hej-danger);
}
/** END FONT SPECIFIC **/


/** START LINKS **/
A {
	color: #0062a7;
	text-decoration: none;
}
A:visited,
A:active,
A:focus {
	color: #0062a7;
}
A:not(.btn):hover {
	color: #0062a7;
	text-decoration: underline;
}
.main A {
	font-weight: bold;
}
.command {
	text-transform: uppercase;
}
/** END LINKS **/


/** START GENERIC CLASS **/
.warning {
	color: var(--hej-danger) !important;
}
.centered {
	text-align: center;
}
.display-none {
	display: none;
}
.rounded-corner {
	border-radius: var(--hej-r-xs);
}
.full-height {
	height: 100%;
}
.disabled {
	opacity: 0.45;
	color: #000;
	cursor: not-allowed;
}
.action-buttons {
	margin-top: 30px;
}
.action-buttons .btn {
	margin-top: 10px;
	margin-right: 15px;
}
.sampleDocument {
	background-color: #f0f0f0;
	margin: 30px 20px 30px 0;
	padding: 50px;
	box-shadow: 10px 20px 30px #333;
}
.sampleDocument UL {
	list-style: disc;
}
.no-float-wrap {
	overflow: auto;
}
.overflow-ellipsis {
	overflow-x: hidden;
	text-overflow: ellipsis;
}
.wrap-text A,
.wrap-text .linkProxy {
	-ms-word-break		:	break-all;
	 word-break			:	break-all;

	 /*Non standard for webkit*/
	 word-break			:	break-word;

	-webkit-hyphens		:	auto;
	   -moz-hyphens		:	auto;
			hyphens		:	auto;
}
.inline-block {
	display: inline-block;
}
/** END GENERIC CLASS **/


/** START IMAGE CLASS - classes found in database only (account images) **/
.leftAlign {
	float: left;
	clear: left;
	margin-right: 15px;
	margin-bottom: 10px;
}
.rightAlign {
	float: right;
	clear: right;
	margin-left: 15px;
	margin-bottom: 10px;
}
.centerAlign {
	clear: both;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	text-align: center;
}

/* make sure images don't exceed container and also if class is forgotten, make sure the image doesn't stretch the job description */
.centerAlign IMG,
.rightAlign IMG,
.leftAlign IMG,
#jobDesc IMG {
	max-width: 100%;
	height: auto;
}
img.centerAlign {
	display: block;
	clear: both;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	text-align: center;
}
@media (max-width: 767px) {/* stop floating at XS */
	.leftAlign,
	.rightAlign {
		float: none;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
}

img.fit-contain {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

/** END IMAGE CLASS **/


/** START BOOTSTRAP MIMIC CLASS **/
.text-lg-right,
.text-md-right,
.text-sm-right,
.text-xs-right {
	text-align: right;
}
.text-lg-center,
.text-md-center,
.text-sm-center,
.text-xs-center {
	text-align: center;
}
/** END BOOTSTRAP MIMIC CLASS **/


/** START POPOVER CUSTOM -  coming from bootstrap **/
.popover {
	background-color: #f6f6f6;
	max-width: 350px;
}
/** END POPOVER CUSTOM **/


/** START LISTS **/
UL {
	padding-left: 1rem;
	list-style: url(/assets/hej/img/elements/yellow-list-bullet.gif);
}
UL.nav.nav-tabs LI.active a  {
	border-bottom-color: white;
}

DL DT {
	margin-top: 15px;
}
DL DD {
	margin-bottom: 15px;
}
UL.links {
	font-size: 15px;
	padding-left: 0px;
	list-style: none;
	font-family: var(--hej-font);
	font-weight: 700;
}
UL.small {
	font-size: 14px !important;
	list-style: none;
	margin-bottom: 0;
}
/* Was `font-weight: normal`, which under the old single-face 'Figtree Heavy'
   alias still drew Figtree-Bold. Now that UL.links carries a real 700, `inherit`
   is what keeps these anchors looking the way they always have. */
UL.links A {
	font-weight: inherit;
}
UL.links.light {
 	font-family: 'Figtree Light', Helvetica, Arial, sans-serif;
}
UL.striped LI {
	padding-bottom: 0;
	border-top: 1px solid #cdcdcd;
}
UL.striped LI:last-child {
	border-bottom: 1px solid #cdcdcd;
}
UL.striped LI:hover,
UL.striped LI:hover A,
UL.striped LI A:hover,
ul.striped LI:nth-child(odd):hover,
ul.striped LI:nth-child(odd) A:hover,
ul.striped LI A.hovered {
	background-color: #f1aa00;
	color: #404143;
	text-decoration: none;
}
UL.links LI .glyphicon {
	display: none;
}
UL.links LI:hover .glyphicon,
UL.links LI A.hovered .glyphicon {
	display: block;
	float: right;
}

UL.links LI {
	padding: 0;
	margin: 0;
}

UL.links:not(.light) LI A {
	display: block;
	height: 100%;
	width: 100%;
	font-size: 16px;
}
ul.striped LI A {
	padding: 5px 10px;
}
ul.striped LI:nth-child(odd) {
	background-color: #f7f7f7;
}

.search-categories {
	margin-bottom: 10px;
	font-size: 15px;
}
.search-categories ul {
	margin-bottom: 0;
}
.search-categories LI {
	padding-bottom: 10px;
}
.content .search-categories A:visited,
.content #js-results A:visited,
.content .article A.artTitle:visited,
.content .article .title A:visited,
.content .overview-records .command A:not(.btn):visited,
.content #job A:not(.btn):visited,
.sidebar .widget #instProfile A:visited {
	color: #336;/* 5485a7 */
}
.widget#widget-ResumeService {
	position: relative;
	padding-right: 0;
}
.widget#widget-ResumeService #btn-div {
	padding-right: 25px;
}
.widget#widget-ResumeService #TopResumeLogo {
	/* In normal flow at the end of the intro paragraph -- see resumeService.bs5.cfm.
	   Previously absolute at top:130px/left:75px, which assumed the heading and
	   copy occupied an exact height and broke when the type scale changed. */
	vertical-align: middle;
	margin-left: 4px;
}

.tag-header {
	margin-bottom: 10px;
}

ul.tag-list {
	margin: 10px 0 30px 0;
	padding-left: 0;
}
ul.tag-list:after { /* clears LI floating */
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

ul.tag-list LI {
	position: relative;
	float: left;
	margin: 5px 20px 0 0;
	padding: 3px 0 3px 22px;
	list-style: none;
}
ul.tag-list LI:after {
	position: absolute;
	left: 0;
	top: 3px;
	background: url('https://images.higheredjobs.com/assets/hej/img/icons/tag.png') no-repeat;
	content: " ";
	height: 20px;
	width: 20px;
}

.list-more UL {
	margin-bottom: 0;
}
.list-more A {
	font-weight: normal;
}
/** END LISTS **/


/** START GRIDS **/
.divided-cols .divided-col {
	border-right: 1px solid #cccccc;
	min-height: 145px;
}
.divided-cols .divided-col:last-child {
	border-right: none;
}
/** END GRIDS **/


/** START TABLES **/ /* SKIP */
TABLE > TBODY > TR > TD { /* SKIP */
	border-bottom: 1px solid #ccc; /* SKIP */
	padding: 8px 15px; /* SKIP */
} /* SKIP */
TABLE > TBODY > TR > TH { /* SKIP */
	padding: 4px 15px; /* SKIP */
} /* SKIP */
TABLE > TBODY > TR:first-child > TH {  /* these two statements do the same job of providing the top border */ /* SKIP */
	border-bottom: 1px solid #444; /* SKIP */
} /* SKIP */
TABLE > TBODY > TR:first-child > TD {  /* ...depending on how the table is coded */ /* SKIP */
	border-top: 1px solid #444; /* SKIP */
}/* SKIP */
TABLE > TBODY > TR:nth-child(even) > TD { /* SKIP */
	background-color: #f7f7f7; /* SKIP */
}/* SKIP */

/* Remove default table styles for job description tables */
#jobDesc UL,
#tinymce UL {
	list-style: disc;
}
#jobDesc UL,
#jobDesc OL,
#tinymce UL,
#tinymce OL {
	padding-left: 20px;
	margin-top: 15px;
}
#jobDesc A,
#tinymce A {
	font-weight: normal;
}
#jobDesc {
	margin-top: 30px;
}
#jobDesc TABLE > TBODY > TR > TD,
#tinymce TABLE > TBODY > TR > TD {
	border-bottom: none;
	padding: 5px 15px 0 0;
}
#jobDesc TABLE > TBODY > TR:first-child > TH,
#tinymce TABLE > TBODY > TR:first-child > TH {
	border-bottom: none;
}
#jobDesc TABLE > TBODY > TR:first-child > TD,
#tinymce TABLE > TBODY > TR:first-child > TD {
	border-top: none;
}
#jobDesc TABLE > TBODY > TR:nth-child(even) > TD,
#tinymce TABLE > TBODY > TR:nth-child(even) > TD {
	background-color: #fff;
}
/** END TABLES **/


/** START CART **/
.cart-table {
	margin-top: 50px;
	margin-bottom: 0 !important;
}
.cart-table TH {
	font-weight: normal;
	text-transform: uppercase;
	border-bottom: 1px solid #333 !important;
}
.cart-table TR:last-of-type TD {
	border-bottom: 1px solid #333 !important;
}
.cart-footer {
	margin: 3px 15px 50px 15px;
}
.cart-footer .row:first-child .cart-col {
	border-top: 1px solid #333;
}
.cart-footer .cart-col {
	padding: 10px 0 5px 0;
	text-align: right;
}
.cart-footer .cart-col:first-of-type {
	text-align: left;
	padding-left: 0;
}
.cart-footer hr {
	margin: 0 -15px;
}
.cart-footer .cart-action .btn {
	margin-right: 15px;
}
.cart-footer .cart-price {
	padding-right: 8px;
	color: #58a518;
	font-weight: bold;
	font-size: 19px;
}
.cart-footer .sub-total {
	padding-right: 8px;
	color: #333;
	font-weight: normal;
	font-size: 14px;
}

.product-group .product-description {
	padding-left: 25px;
	padding-right: 45px;
}
.product-group .product-pricing {
	padding-right: 25px;
}
.product-description {
}
.product-pricing {
	text-align: right;
	border-left: 1px solid #DDD;
}

.product-pricing .pricing {
	margin-bottom: 5px;
	font-size: 24px;
	color: #58a618;
}

.product-pricing .use-inventory {
	margin-bottom: 5px;
}
.product-pricing .use-inventory .small {
	margin-top: 5px;
}

.item-added-msg {
	margin-top: 10px;
}
/** END CART **/


/** START FORMS **/
.form {
	margin-top: 40px;
	margin-bottom: 20px;
}
.form.bg-inverse {
	background-color: #f7f7f7;
}
.form.bordered {
	border: 1px solid #ddd;
}

/*.form.bg-inverse h3 {
	margin: 0 0 20px 0;
	padding: 15px;
	border-bottom: 1px solid #eee;
	background-color: #0076cf;
	color: #fff;
}*/

FORM h2 {
	margin-top: 50px;
}

FORM h2.vertical-header {
	margin-top:30px;
}
.vertical-action {
	text-align: right;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	padding: 10px 20px;
	background-color: #f6f6f6;
}

.form h3 {
	margin-top: 40px;
	padding: 15px 0;
	border-bottom: 1px solid #ccc;
}

.form-group {
	margin-bottom: 1.5rem;
}

.form.form-row-striped .form-horizontal .form-group {
	border: 1px solid #eee;
}
.form.form-row-striped .form-horizontal .form-group:nth-child(odd) {
	background-color: #fff;
}
.form.form-row-striped .form-horizontal .form-group:nth-child(even) {
	background-color: #f7f7f7;
}
FORM .form-actions,
.form .form-actions {
	margin-top: 30px;
}
.form .form-actions .btn {
	margin-top: 10px;
	margin-right: 15px;
}
.form .form-actions a.btn:not(.collapse) {
	display: inline-block;
}
/* form wizard steps */
.form .form-actions.wizard-formactions {
	padding-top: 20px;
}

.form LABEL {
	font-size: 15px;
}
/* Form controls converged on the design system's .ds-input / .ds-select /
   .ds-textarea and .ds-field label (RE-1130 Phase 3).

   Geometry and type here; the error colour comes from --hej-danger, which every
   red in the bundle now reads from.

   Two hazards avoided:
     - .form-select keeps Bootstrap's wide right padding, which is what makes
       room for the caret background-image. Setting a flat padding would put the
       text under the arrow.
     - border-radius is set on the element, not through a variable, so
       Bootstrap's own `.input-group > :not(:first-child)` corner-zeroing still
       out-specifies it and grouped inputs stay visually joined. */
.form-control,
.form-select,
textarea.form-control {
	padding: 12px 14px;
	border: 1.5px solid var(--hej-line-2);
	border-radius: var(--hej-r-sm);
	font-size: var(--hej-fs-control);
	color: var(--hej-ink);
}
.form-select {
	padding-right: 2.25rem;
}
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
	border-color: var(--hej-ink);
	box-shadow: 0 0 0 3px rgba(17, 18, 20, .08);
}
/* The DS checks a box in ink rather than Bootstrap's blue. This only reaches a
   control that has adopted .form-check-input, because it works by repainting the
   box Bootstrap draws itself under appearance:none. */
.form-check-input:checked {
	background-color: var(--hej-ink);
	border-color: var(--hej-ink);
}
/* ...and almost nothing has adopted it. Across the public templates there are 233
   bare <input type="checkbox|radio"> against 13 carrying .form-check-input, so the
   rule above was reaching about 5% of the site's checkboxes and Marketing kept
   seeing browser blue (RE-1130 G10).

   accent-color is the fix rather than re-classing 233 inputs: it recolours the
   browser's OWN control, so a native checkbox takes the DS ink with no markup
   change, no appearance:none, and no loss of the platform's focus and disabled
   rendering. It is inert on .form-check-input controls -- those set
   appearance:none, which takes accent-color out of play -- so the two coexist and
   the rule above still governs anything that has been converted. */
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--hej-ink);
}
.form-check-input:focus {
	border-color: var(--hej-ink);
	box-shadow: 0 0 0 3px rgba(17, 18, 20, .08);
}
.form-label {
	font-size: var(--hej-fs-sm);
	font-weight: 600;
	line-height: 1.4;
	color: var(--hej-ink-2);
	margin-bottom: 6px;
}
.form-horizontal.labels-left LABEL {
	text-align: left;
}

FORM LABEL.label-required:before {
	content: '* ';
	color: var(--hej-danger);
}

@media (min-width: 992px) {
	FORM.labels-left .form-group > LABEL {
		position: relative;
		padding-left: 25px;
	}
	FORM.labels-left .form-group > LABEL.label-required:before {
		position: absolute;
		left: 15px;
	}
}

.has-error .form-control {
	border-color: var(--hej-danger);
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.control-label {
	font-weight: bold;
}

.form-horizontal .control-label {
	margin-bottom: 0;
	padding-top: 7px;
}

.form-group .input-inline {
	display: inline-block;
	width: auto !important;
}

.form-group.has-error .help-block-error {
	color: var(--hej-danger);
}
/* Rows within one checkbox or radio group sit 8px apart rather than 16px
   (RE-1130 P13 — Marketing asked for tighter rows on Position Type and
   Institution Type; the wrapper is shared, so every group follows).

   The 1rem bottom margin has to come OFF to achieve that, not just be paired with
   a smaller top margin on the follower: adjacent vertical margins collapse to the
   larger of the two, so a 1rem bottom would keep winning against a 0.5rem top and
   the gap would not move at all. The :last-child rule then puts the group's outer
   bottom spacing back, so only the space BETWEEN rows changes. */
.radio,
.checkbox {
	margin-top: 1rem;
	margin-bottom: 0;
}
.radio + .radio,
.checkbox + .checkbox {
	margin-top: 0.5rem;
}
.radio:last-child,
.checkbox:last-child {
	margin-bottom: 1rem;
}

.radio-list .radio-inline {
	margin-right: 2rem;
}
.radio-inline input[type="radio"] {
	margin-right: .25rem;
}
/* RE-1130 P28: inside a .radio / .checkbox wrapper the input sits immediately
   against its label text -- the markup is <label><input>Text</label>, with no
   space of any kind. Marketing asked for "a little padding between the circle
   select and the text" on the sidebar survey; the same wrapper is used for the
   survey's server-rendered rows and the ones its JS injects, so one rule covers
   both. Matches the .radio-inline gap directly above. */
.radio LABEL > input[type="radio"],
.checkbox LABEL > input[type="checkbox"] {
	margin-right: .4rem;
}

.has-error .form-control.jqvIgnore {
	border-color: #ccc;
}
.form-group.has-error .help-block:not(.help-block-error),
.form-group.has-error small {
	color: inherit;
}
.form-group.has-error .form-control.no-err-highlight {
	border-color: #ccc;
}
.form-group.has-error .control-label.no-err-highlight {
	color: inherit;
}
.form .control-desc {
		padding-top: 6px;
}
.form .label-desc:first-child {
		margin-top: 6px;
}
/* RE-1130 P96: this used to be
       INPUT[type="text"].search { background-color: #f0f0f0; border: 1px solid #ccc; }
   -- the last of the legacy grey search chrome, and the field-level twin of the
   #search-container bands G12 removed. It painted the autocomplete keyword field on
   /search/ and the searchJobs sidebar widget grey, and its 1px border undercut the
   design system's 1.5px, so those two fields did not match any other control on the
   site. Removed outright rather than recoloured: .form-control already supplies both
   the white ground and the correct border.

   The `.white` class in templates/widgets/searchJobs*.cfm was the opt-out from this
   rule. It has no definition left anywhere in the BS5 stylesheets, so it was already
   doing nothing; harmless to leave in the markup. */


.input-help {
	margin-top: 10px;
}
.input-help DIV.checkbox {
	margin-top: 0px;
	padding-top: 0px;
}
.checkbox-offset {
	padding-top: 10px;
}
TD.checkbox-offset {
	padding-top: 20px !important;
}
SELECT.location-select {
}

SELECT.category-select {
}

/* bootstrap select overflow on filter options */
.bs-select-catlist-hdr {
	cursor: pointer;
	display:inline-block;
	margin-top: 10px;
}
.bs-select-catlist {
	cursor: pointer;
	max-height: 100px;
	border: 1px solid #eee;
	border-width: 1px 1px 1px 1px;
	padding: 10px 5px 5px 10px;
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow-y: scroll;
}
.bs-select-catlist ul,
.bs-select-catlist ul li,
.bs-select-catlist ol,
.bs-select-catlist ol li {
	margin-left: 5px;
	padding-left: 10px;
	margin-bottom: 0;
}
.bs-select-catlist ul li,
.bs-select-catlist ol li {
	padding-bottom: 0px;
}
.bootstrap-select .filter-option {
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bootstrap-select LI {
	padding-bottom: 0px;
}

/* Open-select */
/* A BS3-era fake-select: strips the native appearance and paints a caret from a
   remote GIF, on 2px padding and a 1px #ccc border. `.open-select SELECT` is
   (0,1,1), so it also beat `.form-select` (0,1,0) and held those selects at 28px.
   :not(.form-select) makes the two coexist -- a select that opts into the design
   system gets the DS caret and geometry, everything else is untouched. That
   matters here: of the 28 call sites, several are in employer Accounts, which is
   out of scope for RE-1130. */
.open-select SELECT:not(.form-select) {
	color: #0062a7;
	-webkit-appearance: none;	/* Removes default chrome and safari style */
	-moz-appearance: none;	/* Removes Default Firefox style */
	appearance: none;
	background: url('https://images.higheredjobs.com/assets/hej/img/elements/open-select-offset.gif') no-repeat right; /* Adds background-image arrow */
	text-indent: 0.01px;		/* Removes default arrow from firefox */
	text-overflow: "";		/* Removes default arrow from firefox */
	padding: 2px;
	padding-right: 15px;
	border: 1px solid #ccc;
	border-radius: 4px;
}
.open-select SELECT:not(.form-select)::-ms-expand {
	display: none;
}
.open-select OPTION {
}
.open-select SELECT OPTION:hover , .open-select SELECT OPTION:active  {
	cursor: pointer !important;
}
/* remove the custom arrow for IE 9
  (since we can't hide the default arrow) */
.ie9 .open-select SELECT:not(.form-select) {
	background: none;
	padding-right: 5px;
}

.form-progress {
	margin-bottom: 20px;
	position: relative;
}
/* RE-1130 G6. The pinned 35px could not hold its own label: these carry .btn, so
   the content is 13.5px padding + a 15px line box + 13.5px = 42px in a 35px box,
   and the text was cropped. Marketing offered "increase the height of the
   chevrons or center the text, or both" -- dropping the height does both at once,
   because .btn's own padding then sizes the button to 44px AND centres the label
   in it. That also puts these on the same 44px as every other control (G1). The
   three arrow border-widths below follow, at half the new height plus the ~1px
   overhang the 35px version had. */
.form-progress BUTTON {
	text-align: left;
	padding-left: 20px;
	border-radius: 0;
	/* BS5 dropped position:relative from grid columns (the buttons carry
	   col-md-*), so the chevron :before/:after arrows lost their per-button
	   anchor and painted at the edges of .form-progress instead */
	position: relative;
}
.form-progress BUTTON IMG {
	background-color: white;
	border: 1px solid white;
	padding: 4px;
	border-radius: 25px;
	margin: -4px 5px 0 -5px;
}
/* Remove hover from buttons */
.form-progress BUTTON:hover, .form-progress BUTTON:active, .form-progress BUTTON:focus {
	text-decoration: none;
	border-top: inherit;
	border-right: 1px solid white;
	border-bottom: inherit;
	border-left: 3px solid white;
	outline: 0;
}
/* a11y (EX-3847 B10): the rule above zeroes the outline on :focus too, which left
   keyboard users with no visible focus on the form-progress steps. Restore a ring.
   Inset offset because the chevron :before/:after would clip an outside outline. */
.form-progress BUTTON:focus-visible {
	outline: 2px solid #0076cf;
	outline-offset: -2px;
}

/* a11y (EX-3847, WCAG 2.1.1): the save-job control in search results is now a real
   <button> so it is keyboard operable. Strip the UA button chrome it would otherwise
   inherit. Deliberately scoped to BUTTON: the job DETAIL page uses
   <a class="btn btn-yellow ... save-job-btn"> and must keep its button styling. */
BUTTON.save-job-btn {
	padding: 0;
	border: 0;
	background: none;
	line-height: 1;
	color: inherit;
	cursor: pointer;
}
BUTTON.save-job-btn:focus-visible {
	outline: 2px solid #0076cf;
	outline-offset: 2px;
}
/* White "spacer" arrow BEFORE button */
.form-progress BUTTON {
	border-left: 3px solid white;
}
.form-progress BUTTON:before {
	z-index: 998;
	left: 0;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-left-color: #FFF;
	border-width: 23px 0 23px 6px;
	margin-top: -23px;
}
/* Grey arrow AFTER grey button */
.form-progress BUTTON.btn-grey {
	background-color: #f0f0f0;
}
.form-progress BUTTON.btn-grey:after {
	z-index: 999;
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-left-color: #f0f0f0;
	border-width: 23px 0 23px 6px;
	margin-top: -23px;
}
/* Gold arrow AFTER a gold button. One rule now covers all three variant names:
   .btn-blue and .btn-green are gold aliases, so their chevrons are gold too. */
.form-progress BUTTON.btn-yellow:after,
.form-progress BUTTON.btn-brand:after,
.form-progress BUTTON.btn-green:after,
.form-progress BUTTON.btn-blue:after {
	z-index: 999;
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-left-color: var(--hej-gold);
	border-width: 23px 0 23px 6px;
	margin-top: -23px;
}
/* Clean Before first step */
.form-progress BUTTON:nth-of-type(1) {
	border-left: 0;
}
.form-progress BUTTON:nth-of-type(1):before {
	border: 0;
}

/* checkbox dropdown select */
.checkbox-select-container {
	position: relative;
}
.checkbox-select-container .input-group-addon {
	padding: 0px 2px;
}
.checkbox-select-container .checkbox-select {
	position: absolute;
	top: 100%;
	width: 200px;
	z-index: 99;
	background-color: white;
	border: 1px solid #ddd;
	padding-bottom: 10px;
}
.checkbox-select-container .checkbox-select .checkbox .checkbox-only {
	float: right;
	font-weight: normal;
	text-transform: uppercase;
	font-size: 11px;
	padding-top: 4px;
}

#inst-review {
	margin-bottom: 30px;
}
#inst-review label {
	color: #4C4E52;
}

/* color the placeholder text a light gray */
::-webkit-input-placeholder { color: #AAA !important; }
::-moz-placeholder { color: #AAA !important; }
:-ms-input-placeholder { color: #AAA !important; }
input:-moz-placeholder { color: #AAA !important; }

.remote-overview .row {
	margin-top: 20px;
}

.remote-overview .row:nth-of-type(1) {
	margin-top: 0;
}

.expand-group H1.expand-header,
.expand-group H2.expand-header,
.expand-group H3.expand-header,
.expand-group H4.expand-header,
.expand-group H5.expand-header {
	color: #333;
	background-color: #f0f0f0;
	padding: 10px 15px;
	border-radius: 3px;
	margin-top: 7px;
	margin-bottom: 7px;
	cursor: pointer;
}
.expand-group H1.expand-header.expanded,
.expand-group H2.expand-header.expanded,
.expand-group H3.expand-header.expanded,
.expand-group H4.expand-header.expanded,
.expand-group H5.expand-header.expanded {
	color: white;
	background-color: #666;
}
.expand-group.filters H1.expand-header,
.expand-group.filters H2.expand-header,
.expand-group.filters H3.expand-header,
.expand-group.filters H4.expand-header,
.expand-group.filters H5.expand-header {
	padding: 7px 10px;
	color: white;
	text-transform: uppercase;
	background-color: #666;
	margin-bottom: 0;
}

.expand-content {
	padding: 25px;
}
.expand-group.filters .expand-content {
	padding: 0 5px;
	font-size: small;
	white-space: nowrap;
}
.expand-group.filters .expand-content .checkbox {
	margin-top: 5px;
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}
/* nested headers */
.expand-group .expand-group H1.expand-header,
.expand-group .expand-group H2.expand-header,
.expand-group .expand-group H3.expand-header,
.expand-group .expand-group H4.expand-header,
.expand-group .expand-group H5.expand-header {
	color: #eee;
	background-color: #999999;
	border: 1px solid #999999;
}
/* mid-bar nested header */
.expand-group .widget-mid-bar .expand-group H1.expand-header,
.expand-group .widget-mid-bar .expand-group H2.expand-header,
.expand-group .widget-mid-bar .expand-group H3.expand-header,
.expand-group .widget-mid-bar .expand-group H4.expand-header,
.expand-group .widget-mid-bar .expand-group H5.expand-header {
	color: #eee;
	background-color: #999999;
	border: 1px solid #999999;
}


.filter-subsection  {
	margin-left: 10px;
}
h6.filter-subheader {
	color: #515151;
	background-color: #ddd;
	border: 1px solid #ddd;
	margin: 5px 0;
	padding: 5px;
	border-radius: 3px;
	width: 105%; /* to fully cover the "..." */
}

.expand-group.inverse .expand-content {
	padding	:	0px;
}
.expand-group.inverse .expand-header {
	background-color	:	#ddd !important;
	padding-top			:	7px;
	padding-bottom		:	7px;
}
.expand-group.inverse .expanded {
	color 				:	#4C4E52	!important;
	background-color	:	#FFF	!important;
	margin-bottom		:	2px		!important;
}
.expand-group.inverse H2.expanded A {
	color	:	#000 !important;
}
/* .btn-green is a gold alias now, so this override has to carry ink, not white
   -- it beats the variant rule on !important and would otherwise put white text
   on gold. */
.expand-group.inverse H2.expand-header A.btn-green {
	color	:	var(--hej-ink) !important;
}
.expand-group.inverse .overview-records {
	margin-top	: 0;
}

/* job results overview pagination */
#page-selection .pagination {
	margin-top: 0;
	flex-wrap: wrap;
}
#page-selection .pagination > li > a, #page-selection .pagination > li > span {
	border-top: 0;
	border-bottom: 0;
}
#page-selection .pagination .prev > a {
	border-left: 0;
}
#page-selection .pagination .next > a {
	border-right: 0;
}

/* start sidebar section info */

/* start region tip */
.region-tip {
	position: relative;
	background-color: #f6f6f6;
	border: 1px solid #b3b3b3;
	border-radius: 5px;
	margin-top: 30px;
	width: 250px;
	padding: 25px 25px;
	display: none;
}
.region-tip h3 {
	padding-top: 5px;
	margin-top: 0;
	margin-bottom: 10px;
	border-bottom: 0;
}
.region-tip .arrow-header {
	margin: -25px -25px 30px -25px;
}
.region-tip:after, .region-tip:before {
	right: 100%;
	top: 82px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.region-tip:after {
	border-color: rgba(246, 246, 246, 0);
	border-right-color: #f6f6f6;
	border-width: 10px;
	margin-top: -10px;
}
.region-tip:before {
	border-color: rgba(179, 179, 179, 0);
	border-right-color: #b3b3b3;
	border-width: 11px;
	margin-top: -11px;
}
/* end section info */


/* start section info */
.form .section-info-anchor {
	position: relative;
}
.form .section-info {
	position: absolute;
	background-color: #f6f6f6;
	border: 1px solid #b3b3b3;
	border-radius: 5px;
	width: 250px;
	padding: 25px 25px;
	right: -280px;
	top: -40px;

	display: none;
}
.form .section-info.header-shifted {
	top: 10px;
}
.form .section-info-anchor.row .section-info {
	right: -265px;
}
.form .section-info h3 {
	padding-top: 5px;
	margin-top: 0;
	margin-bottom: 0;
	border-bottom: 0;
}
.form .section-info .arrow-header {
	margin: -25px -25px 30px -25px;
}
.form .section-info:after, .form .section-info:before {
	right: 100%;
	top: 82px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.form .section-info:after {
	border-color: rgba(246, 246, 246, 0);
	border-right-color: #f6f6f6;
	border-width: 10px;
	margin-top: -10px;
}
.form .section-info:before {
	border-color: rgba(179, 179, 179, 0);
	border-right-color: #b3b3b3;
	border-width: 11px;
	margin-top: -11px;
}
@media (min-width: 1200px) {
	.form .section-info {
		display: block;
	}
}
/* end section info */

/** END FORMS **/


/** START BUTTONS **/
/* Design-system button (RE-1130 Phase 3).
   Geometry and typography come from Bootstrap's own --bs-btn-* variables so
   that BS's :hover / :active / :disabled / :focus-visible rules all derive from
   the same source rather than being fought with overrides.

   Sentence case: the site-wide `text-transform: uppercase` is GONE. That makes
   .btn-nocaps a no-op; it is kept below as a harmless alias so the markup that
   uses it needs no edit. */
/* Padding-y is 13.5px, not 12px, to land the default button on a 44px box:
   15px line-height + 27px padding + 2px rendered border. Marketing asked for 44px
   sitewide for accessibility (RE-1130 G1) on the assumption that buttons were
   already there; measured, they were 41px. Setting it here rather than as a
   min-height keeps <a>, <button> and <input type=submit> identical and survives
   .btn-block's display:block, which a flex-centred min-height would not.
   .btn-sm / .btn-xs deliberately keep their own smaller padding. */
.btn {
	--bs-btn-padding-x: 20px;
	--bs-btn-padding-y: 13.5px;
	--bs-btn-font-size: var(--hej-fs-control);
	--bs-btn-font-weight: 600;
	--bs-btn-line-height: 1;
	--bs-btn-border-width: 1.5px;
	--bs-btn-border-radius: var(--hej-r-sm);

	/* Flat, quiet disabled state -- replaces a grayscale() filter that had to be
	   propped up by a per-variant colour re-assertion for every variant.

	   RE-1130 D5: the border is now --hej-line-2 rather than matching the fill, so
	   a disabled button still reads as a button. That was Tyler's report on Ask the
	   Expert -- a submit that is disabled until the form validates looked broken
	   next to the live site, because a #f0f2f5 border on a #f0f2f5 fill has no edge
	   at all.

	   Marketing specified this as `border-color: var(--ds-line-2) !important`. Two
	   translations, both deliberate:
	     - --ds-line-2 -> --hej-line-2. The design-system file names tokens --ds-*;
	       this bundle names them --hej-*, and --ds-line-2 does not exist here. Left
	       verbatim it would be an invalid custom property, and border-color would
	       fall back to currentColor -- a disabled button outlined in its own text
	       grey. Same precedent as the --ds-ink-3 note on .btn-outline-ink below.
	     - No !important, and no separate border-color declaration. Setting the
	       variable is enough: this is the only place that defines the disabled
	       palette, no variant re-asserts it, and the .btn:disabled:hover rule below
	       already reads border-color from this same variable. !important belongs in
	       Marketing's override layer, not in the file being overridden. */
	--bs-btn-disabled-color: #9aa0a6;
	--bs-btn-disabled-bg: #f0f2f5;
	--bs-btn-disabled-border-color: var(--hej-line-2);
	--bs-btn-disabled-opacity: 1;

	/* THE LIFT IS NOT TRANSITIONED, on purpose.
	   Animating a 1px translate makes the label look like it is moving separately
	   from the button. Measured at DPR 1 with the transition slowed to 2000ms so
	   individual frames could be sampled: the button's top edge crosses its pixel
	   boundary at about translateY(-0.65px), the text at about (-0.88px). Both are
	   antialiased sub-pixel throughout -- neither is "stuck" -- but they cross at
	   different points in the animation, so for roughly a quarter of it the box has
	   visibly moved and the text has not. Over 60ms that is the whole effect.

	   FIREFOX IS WORSE, AND IN THE OPPOSITE DIRECTION. It antialiases neither: both
	   the edge and the glyphs hard-snap whole pixels, and they snap at different
	   thresholds -- the TEXT jumps first, at about (-0.16px), then holds while the
	   box catches up at about (-0.5px). So on Firefox the label visibly moves before
	   its button does. Any transitioned 1px lift is therefore browser-dependent by
	   construction, which is the strongest reason not to have one.

	   It is inherent to a one-pixel translate, not to anything here: the design
	   system's own .btn-ds, tested verbatim side by side at the same duration,
	   behaves identically. will-change / layer promotion makes no difference either.
	   Untransitioned, box and text move together in a single frame and there is no
	   intermediate state to desync. Colour and elevation still ease -- they are
	   continuous, so they have nothing to cross. */
	transition: box-shadow .15s ease, background-color .15s ease,
	            color .15s ease, border-color .15s ease;
}
/* A one-pixel lift plus the smallest elevation token. Replaces a blanket
   `border: 1px solid #4d4f53` on hover, which outlined even gold and green
   buttons in dark grey. */
.btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--hej-shadow-1);
}
/* Press feedback is now the lift settling back, not a colour change. The old
   rule repainted every button dark grey with `color: #fff !important` on
   :active, which fought each variant's own palette. */
.btn:active {
	transform: translateY(0);
}
.btn.disabled,
.btn:disabled {
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}
/* Only re-enable pointer-events on real <button>s (so the not-allowed cursor
   shows) — a disabled <button> is inert via its disabled attribute regardless.
   Anchors keep BS5's pointer-events:none, otherwise a disabled <a class="btn">
   stays clickable/navigable (it has no disabled attribute to fall back on). */
button.btn:disabled {
	pointer-events: all;
}
/* Because the rule above keeps disabled buttons hoverable (so the not-allowed
   cursor shows), a variant's own :hover rule -- .btn-green:hover and friends, at
   the same specificity as .btn:disabled but later in the file -- would otherwise
   repaint a disabled button in its live colour. Re-assert the disabled palette
   at a higher specificity. */
.btn:disabled:hover,
.btn.disabled:hover {
	background-color: var(--bs-btn-disabled-bg);
	color: var(--bs-btn-disabled-color);
	border-color: var(--bs-btn-disabled-border-color);
	transform: none;
	box-shadow: none;
}

/* RE-1130 D3: an upgrade that is already in the cart. It has to read as done
   rather than actionable, because a second click genuinely does nothing --
   addToCart() will not raise the quantity past the product's qtymax of 1 -- so
   the cursor says so too.

   Written against .btn rather than by swapping .btn-ink for .btn-outline-ink,
   because these buttons are not all one variant: most are ink, one is brand.
   The colours are the outline pair the design system already uses, so no new
   colour is introduced -- which matters while the disabled/state palette is
   still an open question with Marketing (D5). */
.btn.is-in-cart,
.btn.is-in-cart:hover,
.btn.is-in-cart:focus,
.btn.is-in-cart:active {
	background-color: var(--hej-surface);
	border-color: var(--hej-ink);
	color: var(--hej-ink);
	box-shadow: none;
	transform: none;
	cursor: default;
}
.btn.is-in-cart .fa-check {
	color: var(--hej-green);
}

/* ---------------------------------------------------------------------------
   RE-1130 round-2 page items: type specs Marketing gave as explicit numbers.
   Grouped here rather than scattered per page, because several are the SAME
   spec asked for on two surfaces and Marketing wants them to match.
   --------------------------------------------------------------------------- */

/* P30 + P32 -- the Insider subscribe surfaces. The same three changes were asked
   for on the modal and on the standalone page, so they are one rule: the title
   takes the h2 step, "Also Subscribe to:" the h3 step, and the three option
   labels Body S. The h1/h2 TAGS are left alone -- the ask was about size, and the
   document outline is a separate question. */
#NewsletterSignupModal .modal-title,
.signup-card h1 {
	font-size: var(--hej-fs-h2);
	line-height: 1.25;
	font-weight: 700;
}
#NewsletterSignupModal h2,
.signup-card h2 {
	font-size: var(--hej-fs-h3);
	line-height: 1.3;
	font-weight: 700;
}
#NewsletterSignupModal label[for^="Subscribe"],
.signup-card label[for^="Subscribe"] {
	font-size: var(--hej-fs-body-s);
	line-height: 1.5;
	font-weight: 400;
}

/* P9 -- sub-categories on the browse-by-X listing pages. A category's children sit
   in a NESTED ul.links, and .links carries its own 15px/700 -- so a child rendered
   at exactly the parent's weight and the hierarchy read flat. Only nested lists are
   touched: a standalone .links rail (Jobs By Region and friends) is a peer-level
   list and keeps 700. */
LI > UL.links A {
	font-weight: 400;
}

/* P3 / P99 -- REMOVED. Both tried to hide a caption by shrinking the NEXT tile.

   The ad tile and the P74 VIP tile each carry a caption below their bordered frame
   and inside their widget box, so frame-edge to frame-edge the gap after them read
   55px where the rest of the rail read 30px. P3 absorbed the ad caption by cutting
   the following widget to `margin-top: 5px`; P99 did the same for the VIP.

   Frame to frame that measures even. Box to box it is 5px, and box to box is what a
   reader sees -- the VIP caption is a "VIP Position" LINK and the ad caption is a
   line of text, so both read as part of their tile, not as air after it. The result
   was a rail of tiles crammed 5px apart. Marketing asked for even spacing under the
   first VIP; even at 30px is the answer, not even at 5px.

   Every widget now keeps the 30px top margin `.widget` already gives it. That also
   retires the side-by-side bug the compensation carried: from 576px to 1199px the
   homepage rail sits in a row (`col-12 col-sm-auto` in a full-width sidebar), where a
   25px difference in top margin is not a gap but two tiles whose tops do not line up.
   With one uniform margin the tops line up at every width.

   If the ad-only trim is ever wanted back, it was:
   [class*="col"]:has(> .widget.banner-ad-widget) + [class*="col"] > .widget { margin-top: 5px }
   bounded to (max-width: 575.98px), (min-width: 1200px). */

/* P63 -- the "Advertising Agencies" CTA on the order form (also included by
   job-pack.cfm). It is the last element in its container, so its 15px bottom
   margin was the entire gap to the wizard chevrons underneath. */
P.agency-cta {
	margin-bottom: 32px;
}

/* P34 -- /career/ "More Resources". Each item is a link-title over a
   description, so with no separation between them a title reads as running into
   the previous item's description -- Marketing's "all of the content runs
   together". Space goes ABOVE each item except the first, which is what was
   asked for, rather than below every item. */
.more-resources > LI + LI {
	margin-top: 16px;
}

/* P20 -- the six password-requirement lines on createprofile.cfm to Body S. */
#Requirements {
	font-size: var(--hej-fs-body-s);
	line-height: 1.5;
	font-weight: 400;
}

/* P31 -- "View Full Bio" and "More by This Author" in the About the Author
   sidebar. Measured 16px. NOT a G2 item despite looking like one: these are
   sidebar links, not text under a button, so .btn-subtext never reached them. */
.widget.author-widget A {
	font-size: var(--hej-fs-sm);
}

/* Sizes set the same --bs-btn-* variables as the base so they compose rather
   than override, and both now take the 8px corner instead of a hardcoded 3px. */
.btn-sm {
	--bs-btn-padding-x: 14px;
	--bs-btn-padding-y: 8px;
	--bs-btn-font-size: var(--hej-fs-sm);
	--bs-btn-border-radius: var(--hej-r-sm);
}
/* Bootstrap ships a .btn-lg, but it never reached the page: Phase 3a set the
   geometry on .btn itself, in a stylesheet that loads after Bootstrap at the same
   specificity, so a .btn.btn-lg rendered identically to a plain button. Five
   public pages ask for one. Sized to the design system's .btn-ds.lg, which the
   Word doc and the design-system file agree on. 17px is not a step on our scale
   -- it is the size the DS specifies here, so it stays literal rather than
   borrowing a token that means something else. */
.btn-lg {
	--bs-btn-padding-x: 26px;
	--bs-btn-padding-y: 16px;
	--bs-btn-font-size: 17px;
	--bs-btn-border-radius: var(--hej-r-sm);
}
/* The DS has no size below `sm`; xs stays tighter than btn-sm but shares its
   type size so the two read as one family. */
.btn-xs {
	--bs-btn-padding-x: 10px;
	--bs-btn-padding-y: 5px;
	--bs-btn-font-size: var(--hej-fs-sm);
	--bs-btn-border-radius: var(--hej-r-sm);
}
.btn-block {
	display: block;
	width: 100%;
	margin: 10px 0;
}
/* BS3 .checkbox-inline shim — BS5 dropped this class in favor of form-check-inline */
.checkbox-inline {
	display: inline-block;
	margin-bottom: 0;
	vertical-align: middle;
	cursor: pointer;
}
.btn-wide {
	min-width: 110px;
	padding-right: 30px;
	padding-left: 30px;
}
.btn-xwide {
	min-width: 200px;
	padding-right: 30px;
	padding-left: 30px;
}

/* Buttons carry the design system's 600 whatever element they are built from.
   This rule used to force `normal`, so <a class="btn"> rendered at 400 while
   <button class="btn"> took the 600 from --bs-btn-font-weight -- two weights for
   one component, decided by which element the markup happened to use.

   It cannot simply be deleted, and `inherit` does not work either. `.main a` sets
   bold at (0,1,1), which out-specifies Bootstrap's own `.btn` at (0,1,0), so an
   anchor button left to itself renders 700; and `inherit` on the button resolves
   against its PARENT (a <p>, so 400), not against the button variable. Naming the
   variable at matching specificity is what makes the two elements agree.

   A link nested INSIDE a button keeps `inherit`, which there does mean the
   button's own weight. */
.btn A {
	font-weight: inherit;
}
A.btn {
	font-weight: var(--bs-btn-font-weight);
}

/* TWO CTA COLOURS: gold primary, charcoal secondary.
   DS v0.2 contracted the palette to gold alone and Phase 3a acted on that, which
   left every button on a page the same colour. Marketing's 2026-09-01 feedback
   reverses that one step: gold stays the primary CTA and charcoal joins it as the
   secondary, "to help reduce the number of yellow buttons on a single page".

   Geometry, type and the press behaviour all still come from the .btn base above;
   these rules set nothing but colour, and they set it through Bootstrap's own
   --bs-btn-* variables so that BS's hover / active / focus-visible / disabled
   rules keep deriving from one source.

   HOVER BRIGHTENS EVENLY, NOT AS A RAMP -- a deliberate departure from the design
   system, which specifies `linear-gradient(180deg, <lighter> 0%, <base> 100%)`.
   Rendered at our button size that ramp puts a visibly lighter band across the top
   HALF of the button, which drags its optical centre downward: the label, sitting
   dead centre, reads as though it has slipped low, and against the 1px lift it
   looks like the text is sliding around inside its own button. Two things make it
   worse -- background-image cannot be transitioned (it is a discrete property), so
   the ramp snaps on while the lift glides; and the lighter hover BORDER draws a
   visible rim that reads as the box growing. A flat fill fixes all three: the
   light is distributed evenly, a plain background-color transitions properly, and
   with border == fill there is no rim. Reverting means putting the two
   background-image rules back and restoring the -light border colours.

   .btn-blue and .btn-green stay aliased onto gold until the markup sweep lands.
   Keeping them also keeps script-injected buttons correct: several .js files write
   `btn btn-blue` into the DOM, and they render gold today because of this rule. */
.btn-brand,
.btn-yellow,
.btn-blue,
.btn-green {
	--bs-btn-color: #111;
	--bs-btn-bg: var(--hej-gold);
	--bs-btn-border-color: var(--hej-gold);
	--bs-btn-hover-color: #111;
	--bs-btn-hover-bg: var(--hej-gold-hover);
	--bs-btn-hover-border-color: var(--hej-gold-hover);
	--bs-btn-active-color: #111;
	--bs-btn-active-bg: var(--hej-gold-hover);
	--bs-btn-active-border-color: var(--hej-gold-hover);
}

/* Charcoal, filled. The design system's .btn-primary-ink. Ink is a dark hue, so
   here the ramp's own top stop works as the flat hover -- it reads as a clear
   lift where its average would have been almost invisible. */
.btn-ink {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--hej-ink);
	--bs-btn-border-color: var(--hej-ink);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--hej-ink-light);
	--bs-btn-hover-border-color: var(--hej-ink-light);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--hej-ink-light);
	--bs-btn-active-border-color: var(--hej-ink-light);
}
/* Charcoal, outlined -- white until you touch it, then it fills with the same
   gradient as the filled variant so the two read as one family.
   The border is --hej-ink-2, per Marketing's note that the design-system file's
   own use of --ds-ink-3 on this rule contradicts the v0.2 spec. */
.btn-outline-ink {
	--bs-btn-color: var(--hej-ink);
	--bs-btn-bg: var(--hej-surface);
	--bs-btn-border-color: var(--hej-ink-2);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--hej-ink-light);
	--bs-btn-hover-border-color: var(--hej-ink-light);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--hej-ink-light);
	--bs-btn-active-border-color: var(--hej-ink-light);
}

/* Anchors styled as buttons have to lock every link state to the button's own
   text colour, or the browser's visited / active colour leaks through after a tap
   -- the design system calls this out explicitly. Covers the rest state; the
   hover states above already carry --bs-btn-hover-color. */
.btn-brand A,
.btn-yellow A,
.btn-blue A,
.btn-green A,
A.btn-brand,
A.btn-yellow,
A.btn-blue,
A.btn-green,
A.btn-brand:visited,
A.btn-yellow:visited,
A.btn-blue:visited,
A.btn-green:visited {
	color: #111;
	text-decoration: none;
}
.btn-ink A,
A.btn-ink,
A.btn-ink:visited {
	color: #fff;
	text-decoration: none;
}
.btn-outline-ink A,
A.btn-outline-ink,
A.btn-outline-ink:visited {
	color: var(--hej-ink);
	text-decoration: none;
}
A.btn-outline-ink:hover {
	color: #fff;
}
.btn-yellow-inverse,
.btn-yellow-inverse:hover {
	background-color: var(--hej-ink);
	color: var(--hej-gold);
}
.btn-yellow-inverse A,
A.btn-yellow-inverse {
	color: var(--hej-gold);
}

/* The one outline variant (employers/UpgradePosition.cfm). Gold-on-white is
   illegible, so the outline keeps ink text inside a gold rule. */
.btn-outline-blue,
.btn-outline-blue:hover {
	background-color: #fff !important;
	color: var(--hej-ink);
	border: 1px solid var(--hej-gold);
}
.btn-outline-blue A,
A.btn-outline-blue {
	color: var(--hej-ink);
}

.btn-ltgrey {
	background-color: #eee;
	color: var(--hej-ink);
	border: 1px solid #ccc;
}
.btn-ltgrey:hover {
	background-color: #ddd;
	border-color: #ccc;
}
.btn-ltgrey A,
A.btn-ltgrey {
	color: var(--hej-ink);
}
/* BS3 core .btn-default shim (BS5 dropped it). Retained markup/JS still toggle
   btn-default <-> btn-green on the advanced-search category-type buttons. */
.btn-default {
	background-color: #fff;
	color: var(--hej-ink);
	border: 1px solid #ccc;
}
.btn-default:hover {
	background-color: #e6e6e6;
	border-color: #adadad;
	color: var(--hej-ink);
}
.btn-default A,
A.btn-default {
	color: var(--hej-ink);
}
/* BS3 .hide shim (BS5 dropped it in favor of .d-none). Retained markup and JS
   that toggle .hide via add/removeClass('hide') keep working without rewrites. */
.hide {
	display: none !important;
}
.btn-invert {
	background-color: #323232;
	color: var(--hej-gold);
	border-color: #656565;
}
.btn-invert:hover {
	background-color: var(--hej-gold);
	color: #000;
	border-color: #000;
}
.btn-invert A,
A.btn-invert {
	color: var(--hej-gold);
}
.btn.btn-nocaps {
	text-transform: none;
}
/** END BUTTONS **/

/** BEGIN BANNER AD **/
.banner-ad {
	width: 300px;
	overflow: hidden;
}
.banner-ad-banner {
	margin-top: 30px;
	text-align: center;
}
.banner-ad-banner .banner-ad {
	margin-left: auto;
	margin-right: auto;
	width: auto;
}
/** END BANNER AD **/

/** BEGIN WIDGET **/
/* Sidebar card. Converged on the design system's ds-cta-card (RE-1130 Phase 3):
   a white surface with a hairline border and a 12px corner, replacing the flat
   grey fill. Width is unchanged at 300px, which is what ds-cta-card specifies.

   `overflow: hidden` is load-bearing: it clips a full-bleed child - the gold
   .arrow-header on a .widget.noPad - to the rounded corner, the same way the
   design system's own sidebar module does. */
.widget {
	background-color: var(--hej-surface);
	border: 1px solid var(--hej-line-2);
	border-radius: var(--hej-r-md);
	overflow: hidden;
	margin-top: 30px;
	width: 300px;
	padding: 24px;
}
/* The ad slot is the bordered object here, not the wrapper. The design system's
   sidebar-ad frames the creative and drops its caption underneath, outside the
   frame -- so this variant gives back the border, corner and clipping it would
   otherwise inherit from .widget, and hands them to .banner-ad. Without that the
   card's border enclosed the "Advertisement" indicator along with the ad. */
.widget.banner-ad-widget {
	padding: 0;
	background-color: inherit;
	border: 0;
	border-radius: 0;
	overflow: visible;
	text-align: center;
}
.widget.banner-ad-widget .banner-ad {
	border: 1px solid var(--hej-line-2);
	border-radius: var(--hej-r-md);
	overflow: hidden;
}
/* Caption sits below the frame, quiet. Styled globally so the wide
   .banner-ad-banner placement matches the sidebar one.
   (The js- prefix implies a script hook, but nothing in our JS touches this
   class -- it appears vestigial.) */
.js-ad-indicator {
	display: block;
	margin-top: 6px;
	font-size: var(--hej-fs-xs);
	color: var(--hej-ink-3);
	text-align: center;
}
@media (min-width: 560px) {
	.widget-picture {
		background-color: #f0f0f0;
		background-repeat: no-repeat;
		background-size: auto 100%;
		padding-left: 148px;
		min-height: 325px;
		max-width: 430px;
	}
	.widget-picture .widget {
		max-height: 325px;
		width: auto;
		padding-top: 15px;
		padding-left: 20px;
		overflow-y: hidden;
	}

	#jobseeker_promo {
		background-image: url(https://images.higheredjobs.com/assets/hej/img/banners/jobseeker_promo.png);
	}
	#employer_promo {
		background-image: url(https://images.higheredjobs.com/assets/hej/img/banners/employer_promo.png);
	}
}
/* The design system has no dark card, so `inverse` keeps its own surface and
   simply inherits the new border radius from the base. Its border is darkened to
   match rather than left as a light hairline on a dark fill. */
.widget.inverse {
	background-color: var(--hej-ink-2);
	border-color: var(--hej-ink-2);
	color: #f7f7f7;
}
.widget.inverse A {
	color: #f7f7f7;
}
/* `clear` predates the base being white: it existed to opt OUT of the grey fill,
   using top/bottom rules instead of a box. Now that the base IS a white bordered
   card, it drops the box entirely and keeps only its two rules, so the two
   variants stay visually distinct. */
.widget.clear {
	background-color: var(--hej-surface);
	border-width: 1px 0;
	border-radius: 0;
	border-color: var(--hej-line-2);
}
.widget.noPad {
	padding: 0;
}
.widget P:nth-of-type(1) {
	margin-top: 20px;
}
.widget P:last-child {
	margin-top: 0;
	margin-bottom: 0;
}
/* ds-cta-card's heading: 18px/800. --hej-font-heading would do just as well now
   that it is the same ladder, but this stays spelled out because 800 is a
   deliberate step above the 700 the heading rule sets. */
.widget h3 {
	font-family: var(--hej-font);
	color: var(--hej-ink);
	font-weight: 800;
	font-size: var(--hej-fs-h4);
	line-height: 1.25;
	margin-top: 0;
	margin-bottom: 12px;
}
/* The rest of ds-cta-card, from Marketing's 2026-09-01 sidebar spec. They asked
   for it on the Create Account module and added "it should be useful for many of
   the sidebar elements. After you implement this, we can review for exceptions",
   so it goes on .widget lists generally rather than on that one card.

   Three list flavours are excluded because they are separate components with
   their own markers, not CTA bullets:
     .links      already list-style:none with its own 15px/700 type (Jobs By
                 Region, and the other link rails)
     .striped    draws its own top/bottom rules and deliberately zeroes padding
     .step-list  the employer post wizard, which marks state with list-style
                 images and a current/finished pair

   The heading keeps line-height 1.25. Marketing's document says 1.35, but the
   design-system file itself says 1.25 in the .ds-cta-card rule -- the same
   document-versus-file conflict as the .btn-sm padding, settled the same way. */
.widget UL:not(.links):not(.striped):not(.step-list) {
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
}
.widget UL:not(.links):not(.striped):not(.step-list) > LI {
	position: relative;
	padding: 4px 0 4px 20px;
	font-size: var(--hej-fs-body-s);
	line-height: 1.5;
	font-weight: 400;
	color: var(--hej-ink);
}
/* An 8px gold square rather than a disc. `top` is a literal, as the design system
   has it: 4px of padding plus half a 21px line box, less half the square. */
.widget UL:not(.links):not(.striped):not(.step-list) > LI::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background-color: var(--hej-gold);
}
/* The "Have an account? Sign in" line under the CTA. Qualified as P.signin, not
   just .signin: `.widget P:last-child` zeroes the top margin and out-specifies a
   bare two-class selector, so the element has to be named to match it and win on
   source order. */
/* "Text under a button" -- the helper line that sits directly beneath a CTA.
   "Have an account? Sign in", "Advanced Search", "Forgot your password?",
   "No Thanks", "Don't have a Job Seeker account? Sign Up". Marketing asked for
   every one of them at the DS Label step, 13px, sitewide (RE-1130 G2):
   "This goes for all text under buttons sitewide."

   .signin was round 1's name for the single instance of this on the Create
   Account card (S2), kept as an alias so that markup needed no edit. As of the
   include-drift sweep it has NO call sites left -- the last one was in
   hejJoinNow.bs5.cfm, reconciled to .btn-subtext so the fork and its pre-BS5
   sibling stopped disagreeing. The alias stays because it costs nothing and
   any stray markup still works, but nothing depends on it. */
.btn-subtext,
.widget P.signin {
	font-size: var(--hej-fs-sm);
	line-height: 1.5;
	color: var(--hej-ink-2);
}
.btn-subtext A,
.widget P.signin A {
	color: var(--hej-link);
}
/* Inside a widget the spacing has to be named to land: `.widget P:last-child`
   zeroes both margins at (0,2,1), which a bare class cannot beat, so these match
   at the same specificity and win on source order. */
.widget P.signin,
.widget P.btn-subtext {
	margin-top: 12px;
	margin-bottom: 0;
}

/* Converged on the design system's .ds-sidebar-vip .vip-header: a flat gold bar,
   uppercase with wide tracking, 34px tall. The downward-pointing chevron that
   used to hang off the bottom (a 300px-wide CSS triangle in :after) is gone --
   the DS header is a plain bar, and the arrow also assumed the widget was
   exactly 300px wide.

   This also resolves the drift that had the bar at #efab00 and its arrow at
   #f0ab00, two spellings of the same gold inside one component. */
.widget .arrow-header,
.section-info .arrow-header {
	background-color: var(--hej-gold);
	color: #111;
	font-family: var(--hej-font);
	font-size: var(--hej-fs-sm);
	font-weight: 700;
	letter-spacing: var(--hej-ls-eyebrow-strong);
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 34px;
	margin: 0;
	padding: 0 14px;
}

.widget.instProfile P {
	padding: 10px;
	background-color: #4d4e52;
	color: #fbfcff;
}
/* RE-1130 P74 -- the design system's VIP Featured tile (v0.2, 2026-09-11 export).
   The gold `VIP Position` header rail above the frame is replaced by a small dark
   chip overlaid inside the frame's top-left, and a quiet `VIP Position` link caption
   centred below it.

   Built on the same shape as .widget.banner-ad-widget above: the FRAME is the
   bordered object, not the card, so the caption can sit outside it. Without that the
   card's border would enclose the caption, which is the exact problem that variant's
   comment describes.

   overflow/max-height stay as a spill guard. Every live VIP hides its own
   #vipTitle/#vipLoc/#clickForInfo through its CSSLandingBlock, but a record without
   one would render them, and clipping is what has always absorbed that. 250px frame +
   6px + caption fits inside 300px with room to spare. */
.widget.VIP {
	padding: 0;
	background-color: inherit;
	border: 0;
	border-radius: 0;
	overflow: hidden;
	max-height: 300px;
}
.widget.VIP .vip-frame {
	position: relative;
	border: 1px solid var(--hej-line-2);
	border-radius: var(--hej-r-md);
	overflow: hidden;
	/* drawVIPImageByID emits a <br> after each image, and the frame's only content is
	   those images -- so without this the frame stood 27px taller than the creative
	   inside it. The chip sets its own line-height and is unaffected. */
	line-height: 0;
}
.widget.VIP .vip-chip {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 9px;
	border-radius: var(--hej-r-pill);
	background-color: #111;
	color: #fff;
	font-family: var(--hej-font);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .18em;
	line-height: 1;
	text-transform: uppercase;
}
.widget.VIP .vip-chip i {
	color: var(--hej-gold);
	font-size: 10px;
}
/* Same register as the ad caption below .banner-ad -- these two sit side by side in
   the sidebar and should read as one family. */
.widget.VIP .vip-caption {
	margin-top: 6px;
	font-size: var(--hej-fs-xs);
	text-align: center;
}
/* RE-1130 P97: `.main a { font-weight: bold }` applies here, so the caption rendered
   at 700 while the "Advertisement" caption beside it -- a <small>, not a link -- sat at
   400. Marketing asked the two to match, so the weight is stated rather than inherited.
   Everything else about the two captions is already identical: 12px, --hej-ink-3,
   centred, 6px above. */
.widget.VIP .vip-caption a {
	color: var(--hej-ink-3);
	font-weight: 400;
	text-decoration: none;
}
.widget.VIP .vip-caption a:hover {
	color: var(--hej-ink-2);
	text-decoration: underline;
}
.widget.VIP img {
	max-width: 300px;
	display: block;
}

/* RE-1130 G9 -- HOLD, not a fix. Marketing asked for "all testimonial styling
   back to how it was before", scoped by D2 to the popup pages and the sidebar
   widgets; the employer homepage is out of scope and keeps its own resize (P55).

   Nothing here was ever restyled: this whole block is byte-identical to master.
   The testimonial drifted entirely through what it INHERITS, because Phase 1
   flipped the base from 14px/1.42857143 to 16px/1.55 and the quote is sized with
   `font-size: larger` -- a relative keyword, so it rode along. Measured, the
   quote went 16.8px -> 19.2px (Chrome resolves `larger` as 1.2x the parent).

   So the revert is to pin the base back on this component alone. `larger` then
   resolves against 14px and reproduces 16.8px on its own -- which is why the
   rule below it is left untouched rather than given a literal size. Scoping to
   .widget.testimonial also honours D2 for free: the employer homepage
   testimonial is #section_Quote and never matches this.

   To lift the hold when the redesign lands, delete the two declarations marked
   below and the component goes back to inheriting the design system. */
.widget.testimonial {
	background-color: inherit;
	border-top: 1px solid #CCC;
	/* G9 hold -- delete these two to rejoin the design system's type scale. */
	font-size: 14px;
	line-height: 1.42857143;
}
.widget.testimonial.image-testimonial {
	border-top: none !important;
}
.widget.testimonial P {
	margin: 0;
	padding: 25px 25px;
}
.widget.testimonial P.test_quote,
.widget.testimonial P.full_quote {
	color: #666;
	font-size: larger;
	border-bottom: 1px solid #CCC;
}

.widget.testimonial P.test_quote.image-testimonial {
	border-bottom : none;
	padding: 0 !important;
}
.widget.testimonial .test_arrow {
	position: relative;
	margin-left: 25px;
	width: 30px;
	height: 5px;
	background-color: #f0ab00;
}
.widget.testimonial .test_arrow:after {
	top: 100%;
	left: 0;
	content: " ";
	position: absolute;
	pointer-events: none;
	width: 0%;
	height: 0;
	border-style: solid;
	border-width: 3px 15px 0 15px;
	border-color: #f0ab00 transparent transparent transparent;
	z-index: 99;
}

/* This used to be a BS3-era block that hard-set height:30px, an 8px left pad, a
   1px #cdcdcd border and a 3px radius on every sidebar input -- carrying its own
   "TODO - get rid of this, it isn't needed". It was not harmless. `.widget
   INPUT[type=text]` scores (0,2,1) against `.form-control`'s (0,1,0), so it beat
   the design-system control treatment on every widget that had correctly adopted
   .form-control: the field kept the DS's 12px vertical padding and 15px/22.5px
   type inside a 30px border-box, leaving a 3px content slot. That is RE-1130 G1
   in the sidebars, and Tyler's "the search icon button is no longer aligning
   properly with the search box" on the editorial pages.

   Only the geometry is gone. Layout that the widgets genuinely rely on -- full
   width and the stacked margin -- stays, scoped to inputs that are NOT already
   design-system controls, so .form-control fields now size themselves. */
.widget INPUT[type="text"]:not(.form-control),
.widget INPUT[type="password"]:not(.form-control) {
	display: block;
	margin: 10px 0;
	width: 100%;
}
/* BS5 input-group: input has no .input-group-btn wrapper, btn is a direct sibling.
   Override the widget input's width:100% to width:1% so the btn fits beside it
   instead of wrapping, and drop its stacked margin so the two sit on one line.

   The button no longer gets a pinned 30px height. It used to, to match the
   sidebar input's old hard 30px (retired above); now both sides take their height
   from the design system and the group self-aligns at 44px. `align-items:
   stretch` is what keeps them equal if the two ever compute differently again --
   a fixed height on one child was the fragile way to say that. */
.widget .input-group {
	flex-wrap: nowrap;
	align-items: stretch;
}
.widget .input-group .form-control {
	width: 1%;
	min-width: 0;
	margin: 0;
}
.widget.widget-filters INPUT[type="text"] {
	margin: 0;
}
.widget .form-group.close-group {
	margin-bottom: 10px;
}

.widget LI {
	padding-bottom: 10px;
}
.widget .widget-mid-bar {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background-color: #e6e6e6;
	margin: 0 -25px 15px -25px;
	padding: 10px 25px;

	font-size: small;
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.widget .widget-mid-bar i {
}

.widget.mini-dash .stat_container {
	clear			:	both;
	font-size		:	15px;
}
.widget.mini-dash .stat_container:not(:first-child) {
	padding-top		:	6px;
}
.widget.mini-dash .stat_container A {
	display			:	block;
	padding-top		:	6px;
}

.widget.mini-dash .stats {
	float			:	left;
	position		:	relative;
	margin-right	:	15px;
	width			:	33px;
	height			:	34px;
	background-color:	#58A618;
	padding			:	7px 5px;
	color			:	#fff;
	text-align		:	center;
	overflow		:	visible;
}
.widget.mini-dash .stats:after {
	left: 100%;
	top: 0;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-left-color: #58A618;
	border-width: 17px 0 17px 5px;
}

.widget.mini-dash .stats.smaller {
	padding: 8px 4px;
	font-size: 13px;
}

.widget.mini-dash.employer .stats {
	background-color	:	#0076cf;
}
.widget.mini-dash.employer .stats:after {
	border-left-color	:	#0076cf;
}

.widget.action-items:not(.wide),
.widget.action-items.inverse {
	padding-top: 15px;
	padding-bottom: 15px;
}
/* This widget was authored against BS3 where .row used floats. Under BS5
   .row is display:flex with .row > * { width:100% }, which clobbers the
   .action-icon float and stacks the icon and label on separate lines.
   Force the inner .row to behave like the BS3 block container so the
   .action-icon { float:left } + .no-float-wrap { overflow:auto } BFC
   pattern works as originally intended. */
.widget.action-items .row {
	display: block;
}
.widget.action-items .row > .action-icon,
.widget.action-items .row > .no-float-wrap {
	width: auto;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}
.widget.action-items .action-icon {
	float: left;
	width: 20px;
	text-align: center;
	margin-right: 5px;
}
.widget.action-items A {
	font-weight: normal !important;
}
.widget.action-items.wide DIV.row {
	margin-left: -5px;
	margin-right: -5px;
}
.widget.action-items DIV.row:not(:last-child) {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #ddd;
}
.widget.action-items.inverse DIV.row:not(:last-child) {
	border-bottom-color: #666;
}
.widget.inverse .action-icon {
	float: left;
	position: relative;
	margin-right: 15px;
	width: 28px;
	height: 30px;
	background-color: #f0ab00;
	padding: 5px;
	font-size: 18px;
	line-height: 20px;
	color: #333;
	text-align: center;
	overflow: visible;
}
.widget.inverse .action-icon:after {
	left: 100%;
	top: 0;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-left-color: #f0ab00;
	border-width: 15px 0 15px 5px;
}
.widget.inverse .no-float-wrap {
	padding-top: 5px;
}

.widget UL.step-list li {
	font-weight: normal;
	padding: 5px 5px 5px 5px;
	list-style: none;
}
.widget UL.step-list li.current {
	font-weight: bold;
	list-style: url(/assets/hej/img/elements/yellow-arrow.gif);
	background-color: #f0ab00;
}
.widget UL.step-list li.finished {
	list-style: url(/assets/hej/img/elements/gray-check.gif);
	/*background-color: #0076cf;*/
}
/* RE-1130 P75: the testimonial is a .widget.noPad, so the component's 24px padding is
   off and every paragraph inside it carries its own `padding: 25px` instead. This
   wrapper is a <div>, not a <p>, so it got none -- it floated flush against the
   widget's inner edge and the "next" chevron was sliced in half by .widget's
   overflow: hidden. That is the overlap Marketing reported. The horizontal inset now
   matches the paragraphs around it.

   The float itself stays. It is what makes the attribution text wrap around the arrows
   instead of running under them, and the arrows land on the attribution's first line,
   which is the intended look. */
.widget .test_nav_wrapper {
	margin-top: 25px;
	margin-right: 25px;
	float: right;
}
.widget .test_nav_wrapper i {
	cursor: pointer;
	color: #777;
	margin-right: 10px;
}
.widget .test_nav_wrapper i:last-child {
	margin-right: 0px;
}
.widget_pre_header {
	position: relative;
	top: -30px;
	margin-bottom: -20px;
}
.widget_pre_header h3 {
	font-size: 18px;
	margin-top: 0px;
	margin-left: 25px;
	margin-bottom: 0;
}

/** END WIDGET **/

/** START LARGE DASHBOARD **/
.dashboard {
	margin-bottom: 20px;
	background-color: #f0f0f0;
	padding: 20px 35px;
	text-align: center;
}
.dashboard .stats {
	font-family: var(--hej-font);
	font-weight: 700;
	position: relative;
	background-color: #f0ab00;
	margin-left: auto;
	margin-right: auto;
	width: 165px;
	height: 70px;
	font-size: 56px;
	color: #fff;
	overflow: visible;
}
.dashboard .stats.smaller {
	padding-top: 5px;
	font-size: 48px;
}
.dashboard .stats:after {
	top: 100%;
	left: 0;
	content: " ";
	position: absolute;
	pointer-events: none;
	width: 0%;
	height: 0;
	border-style: solid;
	border-width: 15px 82px 0 82px;
	border-color: #f0ab00 transparent transparent transparent;
	z-index: 99;
}
.dashboard h5 {
	margin-top: 35px !important;
	margin-bottom: 10px !important;
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
}

.dashboard-green .stats {
	background-color: #58A618;
}
.dashboard-green .stats:after {
	border-top-color: #58A618;
}

.dashboard-blue .stats {
	background-color: #0076cf;
}
.dashboard-blue .stats:after {
	border-top-color: #0076cf;
}
/** END LARGE DASHBOARD **/

/** START RESOURCES **/
#hej-resources .section-icon {
	margin-right: 5px;
	width: 42px;
	color: #f0ab00;
	font-size: 28px;
	text-align: center;
}

#hej-resources .section-icon A,
#hej-resources .section-icon A:hover,
#hej-resources .section-icon A:active,
#hej-resources .section-icon A:focus {
	color: #f0ab00;
	text-decoration: none;
}

@media (max-width: 767px) {
	#hej-resources .left-col {
		padding-right: 8px;
	}
	#hej-resources .right-col {
		padding-left: 8px;
	}
	
	/* RE-1130 P4: the boxes measured 115px or 140px depending on whether the
	   label wrapped to two lines, so a row with one of each sat ragged. height
	   100% makes each fill its column, and the columns are already equal height
	   because the .row is a flex container -- so the pair in a row match whatever
	   the taller one needs. Type is centred, which was the second half. */
	#hej-resources .resource-item {
		margin-bottom: 15px;
		border: 1px solid #f0ab00;
		border-radius: .5rem;
		padding: 20px 15px;
		height: 100%;
		text-align: center;
	}
	#hej-resources > [class*="col-"] {
		margin-bottom: 15px;
	}
}
/** END RESOURCES **/

/** START ARTICLES **/
.article .date {
	/*background: pink;*/
	position: relative;
	float: left;
	padding-right: 5px;
}
/* RE-1130 G5. The three parts of this chip were all keyed to 32px, which the
   type scale outgrew: measured, .year held 33x23 of text in a 32x20 box and
   .month 32x23, so both clipped. Because .year and .month are rotated -90deg,
   their WIDTH is what reads as height on screen -- "more height" here means a
   wider pre-rotation box. All three parts move together so the strip stays
   flush: 32 -> 42 on screen, and the day block's :after chevron takes half of
   the new height. */
.article .date .month {
	padding: 2px;
	background-color: #333;
	color: #fff;
	text-transform: uppercase;
	font-size: smaller;

	position: relative;
	left: -8px;
	top: 8px;
	float: left;
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	width: 42px;
	height: 24px;
	text-align: center;
}
.article .date .day {
	display: block;
	background-color: #f0ab00;
	color: #4c4e52;
	padding: 10px 5px 5px 5px;
	position: relative;
	left: -16px;
	float: left;
	width: 32px;
	height: 42px;
	text-align: center;
}
.article .date .day:after {
	left: 100%;
	top: 0;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-left-color: #f0ab00;
	border-width: 21px 0 21px 5px;
}
.article .date .year {
	padding: 2px;
	background-color: #ccc;
	color: #000;
	font-size: smaller;

	position: absolute;
	left: -32px;
	top: 8px;
	float: left;
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	width: 42px;
	height: 24px;
	text-align: center;
}
#article-intro {
	margin-top: 40px;
	margin-bottom: 40px;
	font-size: small;
}
.share-icons {
	margin-top: 20px;
}
.share-icons > a {
	display: inline-block;
	margin-right: 14px;
	font-size: 24px;
	color: #f0ab00;
}
/* keep the icon color on hover -- the generic A:not(.btn):hover rule
   outranks ".share-icons > a", so restore the orange explicitly */
.share-icons > a:hover {
	color: #f0ab00;
}
#article-content {
	margin-top: 40px;
}
/* RE-1130 G3 -- the design system's "Reading" step, 17/1.65/400, on the two
   long-form surfaces: the job description and article body copy.

   Both used to be 16px with an 18px bump under a max-width media query. That
   pair is gone on purpose. Marketing confirmed the Reading spec is deliberately
   the SAME on desktop and mobile (D6), so a single declaration is the whole of
   it -- no breakpoint, nothing to keep in sync.

   #jobDesc is named here rather than in JobDetail.css so both surfaces read from
   one place. Its old mobile rule was `.main #jobDesc`, at (1,1,0), which would
   have out-specified this; it has been removed from JobDetail.css. */
#jobDesc,
#article-content {
	font-size: var(--hej-fs-reading);
	line-height: var(--hej-lh-reading);
	font-weight: 400;
}
#article-content UL {
	list-style: disc;
}
#article-content #MainImg {
	margin: 0 0 10px 0;
	max-width: 350px;
}
@media (min-width: 576px) {/* stop floating at XS */
	#article-content #MainImg {
		float: left;
		margin-right: 20px;
	}
}
#article-content #MainImg IMG {
	width: 100%;
	max-height: 250px;
}
#article-content #MainImg .ArticleCaption {
	padding: 2px 4px;
	font-size: 10px;
	color: #d2b6ab;
}
.article-footer {
	margin-top: 40px;
}
#article-typedesc {
	margin: 40px 0;
	padding: 40px 0;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
}
.main .article {
	margin-top: 30px;
}
.article small.articleHeadline {
	display: block;
	font-weight: bold;
	color: #444;
}
.article .artTitle {
	font-size: 15px;
}
.article .separator {
	color: #f0ab00;
}
.article small.textdate {
	display: block;
	color: #444;
}

.article .articleTextContent {
	margin-top: 10px;
}
.article .articleTextContent.short {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.articleTextContent A {
	font-weight: normal;
}

#feature .article { margin-top: 10px; }
#feature .article .date { display: none; }
#feature .article .artTitle {
	font-size: 18px;
}

#promoted {
	margin-bottom: 40px;
}
#promoted .article {
	position: relative;
}
#promoted .article .date {
	position: absolute;
	top: 20px;
}
#promoted .article .displayImg {
	margin-bottom: 15px;
}
#promoted .article .artTitle {
	display: block;
}

IMG.displayImg.grey {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}
.ie9 IMG.displayImg.grey {
	filter: gray; /* IE6-9 */
}
/* control image sizing responsively */
#feature IMG.displayImg {
	max-width: 100%;
}
#promoted IMG.displayImg {
	max-width: 100%;
}
@media (min-width: 767px) {
	#feature IMG.displayImg {
		width: 100%;
	}
	#promoted IMG.displayImg {
		width: 100%;
	}
}

small.sponsor {
	display: block;
	margin-bottom: 10px;
	color: #f0ab00;
	text-transform: uppercase;
	font-weight: bold;
}

/* removes the "Share with a Friend" option from AddThis */
LI.at3winsvc_email {
	display:none !important;
}

.PreviewWarning {
	margin-top		:	50px;
	position		:	absolute;
	top				:	1;
	left			:	1;
	min-height		:	60px;
	width			:	90%;
	z-index			:	100;
	color			:	white;
	box-shadow		:	10px 10px 5px #888888;
	border-radius	:	15px;
	opacity			:	.8;
	border			:	1px solid #A94442;
}
.PreviewWarning H1 {
	margin-top		:	10px;
	margin-bottom	:	10px;
}
/** END ARTICLES **/

/** START OVERVIEW **/

.overview-actions {
	margin: 25px 0 15px 0;
}
.overview-actions .btn {
	margin-right: 15px;
	margin-bottom: 10px;
}

.overview-records {
	margin: 15px 0;
}
.overview-records.disabled {
	cursor: wait;
}
.overview-records .record {
	margin-left: 0;
	margin-right: 0;
	padding: 15px 0 15px 0;
}
.overview-records .record .command {
	padding-top: 20px;
	text-align: center;
}

.overview-records.striped {
	color: #4c4c4c;
}
.overview-records.striped .record {
	border-bottom: 1px solid #ccc;
}
.overview-records.striped .record:first-of-type {
	border-top: 1px solid #ccc;
}
.overview-records.striped .record:nth-of-type(odd) {
	background: #f7f7f7;
}
/* nested expand record groups */
.overview-records.striped .record-group  .record-group.record {
	border: 0;
}
.overview-records .row.record.record-group{
	padding-top: 20px;
	padding-bottom: 20px;
}
.overview-records.striped .record:nth-of-type(odd) .record-group.record:nth-of-type(odd) {
	background: white;
}
.overview-records.striped .record.parent {
	border-top: 1px solid #333333;
	border-bottom: 0;
	background: #f7f7f7;
}
.overview-records.striped .record.child {
	border-top: 1px solid #ccc;
	border-bottom: 0;
	background-color: #fff;
}
.overview-records .record.header {
	padding: 0;
	background-color: #fff !important;
	border-top: 0 !important;
}
.overview-records .record.header H2,
.overview-records .record.header H3,
.overview-records .record.header H4,
.overview-records .record.header H5 {
	margin: 0;
	padding: 20px 0 5px 15px;
}
.overview-records .record:first-of-type H2,
.overview-records .record:first-of-type H3,
.overview-records .record:first-of-type H4,
.overview-records .record:first-of-type H5 {
	padding-top: 0;
}

.overview-records i.fa-plus,
.overview-records i.fa-minus,
.overview-records i.fa-chevron-up,
.overview-records i.fa-chevron-down {
	cursor: pointer;
	display: inline-block;
	margin-right: 5px;
	padding: 3px 5px;
	background-color: #666;
	color: white;
	border-radius:  2px;
}
.overview-records i.fa-check-square,
.overview-records i.fa-square {
	cursor: pointer;
	display: inline-block;
	margin-right: 12px;
	color: #4a96f1;
	border-radius:  2px;
	font-size: 16px;
}
.overview-records i.fa-check-square {
	margin-right: 11px;
}
.overview-records .inner-record {
	padding-left: 28px;
}


.overview-records .inner-field {
	font-weight: bold;
}

.overview-records .row-actions {
	margin-top: 20px;
}
.overview-records .row-actions A {
	display: inline-block;
	text-transform: uppercase;
	border-right: 1px solid #ccc;
	padding-right: 12px;
	margin-right: 10px;
}
.overview-records .row-actions A:last-of-type {
	border-right: 0;
}
.overview-records .loading-msg {
	padding-top: 20px;
}
.overview-records .no-overview-results {
	padding-bottom: 15px;
}
.overview-nav A,
.overview-nav img,
.overview-nav A:hover,
.overview-nav A:active,
.overview-nav A img,
.overview-nav A:hover img,
.overview-nav A:active img {
	text-decoration: none;
	margin-left: 5px;
}
.overview-pagenav A {
	display: inline-block;
	border-right: 1px solid #999999;
	padding: 0 10px;
}
.overview-pagenav A:first-child {
	padding-left: 0;
}
.overview-pagenav A:last-child {
	border-right: 0;
}
.overview-pagenav A.disabled {
	color: black;
	cursor: default;
}
.overview-pagenav A.disabled:hover {
	text-decoration: none;
}
/** END OVERVIEW **/


/** START RECORDS  **/

.record-display {
	margin-bottom: 30px;
}
.record-header {
	margin-top: 30px;
	margin-bottom: 10px;
}
.record-header H2,
.record-header H3,
.record-header H4 {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 9px;
}
.record-actions {
}
.record-display {
}
.record-display .field {
	margin-left: 0;
	margin-right: 0;
	padding: 7px 0;
}
.record-display .field-label {
	font-weight: bold;
}

.record-display.striped {
	color: #4c4c4c;
}
.record-display.striped .field {
	border-bottom: 1px solid #ccc;
}
.record-display.striped .field:nth-of-type(1) {
	border-top: 1px solid #666;
}
.record-display.striped .field:nth-of-type(odd) {
	background: #f7f7f7;
}

/** END RECORDS **/


/** BEGIN JOB RESULTS **/
#job-currentfilters A {
	text-decoration: none;
	font-weight: normal;
	color: #333;
}
#job-currentfilters A i {
	color: #0062a7;
}

#js-results .record {
	font-size: 15px;
}

.record .job-salary {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.record .addon-marker {
	padding-top: 3px;
}
.addon-marker {
	display: inline-block;
	margin-right: 10px;
	text-transform: uppercase;
	font-size: 85%;
}
.addon-marker img {
	margin-right: 2px;
	width: 16px;
	vertical-align: text-bottom;
}

/* Converged on the design system's .ds-tag (RE-1130 Phase 3): a pill rather than
   the old left-pointing pennant. The arrow was drawn with a CSS triangle in
   :after, which is why the base carried `position: relative` and a 10px left
   margin to make room for it - all three go away with it.

   The default is now neutral rather than gold: the DS reserves colour for
   emphasis (.tag-yellow / .tag-green) and leaves a plain tag quiet. Sentence
   case too - the old blanket uppercase is gone. */
.tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border: 1px solid transparent;
	border-radius: var(--hej-r-pill);
	background-color: var(--hej-surface-3);
	color: var(--hej-ink);
	font-size: var(--hej-fs-xs);
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
}
.tag i {
	font-size: 10px;
}
.tag-yellow {
	background-color: var(--hej-gold);
	color: #111;
}
/* The DS has no green tag; green is retained by decision. Tokenising it settles
   #55a800 -- the one drift value visibly different from canonical #58a618 rather
   than imperceptibly so. Its other user was the .form-progress chevron, also
   tokenised below: that one had become an actual mismatch once Phase 3a moved
   .btn-green onto the token, leaving a chevron a shade off the button it
   extends. */
.tag-green {
	background-color: var(--hej-green);
	color: #fff;
}
#google-container {
	margin-bottom: 15px;
	position: relative;
	width: 100%;
	height: 350px;
	background-color: #e7eaf0;
}
#map-zoomin, #map-zoomout {
	height: 18px;
	width: 18px;
	cursor: pointer;
	margin-right: 3px;
	background-color: white;
	background-repeat: no-repeat;
	background-size: 18px 36px;
	background-image: url("/assets/hej/img/elements/map-zoom.png");
}
#map-zoomout {
	margin-bottom: 3px;
	background-position: 50% -18px;
}
/** END JOB RESULTS **/

/** SCROLL TO TOP **/
.scroll-to-top {
	display: inline-block;
	padding: 1px;
	text-align: center;
	position: fixed;
	bottom: 10px;
	z-index: 10001;
	display: none;
	right: 10px;
}
.scroll-to-top > i {
	display: inline-block;
	color: #687991;
	font-size: 30px;
	opacity: 0.6;
	filter: alpha(opacity=60);
	}
.scroll-to-top:hover {
	cursor: pointer;
}
.scroll-to-top:hover > i {
	opacity: 1;
	filter: alpha(opacity=100);
}
@media (min-width: 992px) {
	.scroll-to-top {
		right: 20px;
	}
}
@media (max-width: 991px) {
	.scroll-to-top {
		bottom: 10px;
		right: 10px;
	}
	.scroll-to-top > i {
		font-size: 28px;
	}
}
/** END SCROLL TO TOP **/

.modal-title {
	margin-top: 0;
}

.modal-footer {
	justify-content: flex-start;
}

/** BOOTBOX DIALOG **/
.modal-footer .btn:first-child {
	margin-right: 15px;
}

#suggestedBrowsers A {
	display: block;
	width: 110px;
	margin: 0 auto;
	text-align: center;
	text-decoration: none;
}
#suggestedBrowsers A SPAN {
	display: block;
}
#suggestedBrowsers A .bro {
	text-decoration: underline;
	font-size: 19px;
}
#suggestedBrowsers A .vendor {
	color: #aaa;
	font-size: 10px;
}
/** END BOOTBOX DIALOG **/

A.disabled-link {
	color			: 	#999;
	pointer-events	:	none;
}
A.disabled-link:hover {
	pointer-events	:	auto;
	cursor	: not-allowed;
}

.striped .yellow {
	background-color:#faf9dc !important;
}


@media (max-width: 1199px) {/* ipad size - down to 768 */
	.text-lg-right,
	.text-lg-center {
		text-align: left;
	}
}

@media (max-width: 991px) {/* ipad size - down to 768 */
	.text-md-right,
	.text-md-center {
		text-align: left;
	}

	.dashboard .row div:nth-child(3) .stats,
	.dashboard .row div:nth-child(4) .stats{
		margin-top: 20px;
	}

	.margin-sm-bottom {
		margin-bottom: 10px;
	}
}

@media (min-width: 992px) {/* small pad size - down to 560 */
	.border-md-left {
		border-left: 1px solid #ddd;
	}
	.border-md-right {
		border-right: 1px solid #ddd;
	}
}
@media (max-width: 767px) {/* small pad size - down to 560 */
	.text-sm-right,
	.text-sm-center {
		text-align: left;
	}

	/* so the style will show at XS, but can be reversed (no important!) */
	.temp-hidden-xs {
		display: none;
	}

	.dashboard .row div:nth-child(2) .stats{
		margin-top: 20px;
	}

	.margin-xs-bottom {
		margin-bottom: 10px;
	}

	.overview-records .record .command {
		padding-top: 5px;
	}
}
@media (min-width: 560px) {
	.pull-right-sm {
		float: right;
	}
}
@media (max-width: 559px) {/* mobile phone size - down to 320 or lower */
	.pull-left-xs {
		float: left;
	}
	.col-xs-margin {
		margin-bottom: 10px;
	}
}

@media (max-width: 350px) {/* definitely mobile phone size */
}

@media print {
}




/*** START floating nav bar ***/

/* Style the navbar */
#StickyNav {
	overflow: hidden;
	background-color: #333;
	z-index: 9999;
}

/* Navbar links 
#StickyNav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px;
	text-decoration: none;
}*/

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
#StickyNav.sticky {
	position: fixed;
	top: 0;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
#StickyNav.sticky + .StickyNav-content {
	padding-top: 45px;
}


#StickyNav {
	background-color: #666666;
	padding: 10px;
	color: #eeeeee;
}
#StickyNav .btn {
	margin-right: 10px;

}
#StickyNav #clear-selected {
	color: #eeeeee;

}

.bg-black {
	background : #000 !important;
}
.p-0 {
	padding:0 !important;
}
.pt-0 {
	padding-top:0 !important;
}
.pt-2 {
	padding-top: .5rem !important;
}
.pl-2 {
	padding-left: .5rem !important;
}
.pb-2 {
	padding-bottom: .5rem !important;
}

.emp-nav-login {
	padding-bottom:14px;
}


/* jquery.validate.defaults.js still flags errors with the BS3 class names
   (.has-error on the form-group, .help-block.help-block-error on the message
   span). BS5 dropped both in favor of .is-invalid + .invalid-feedback, so
   without these overrides the page shows no red border, no red text, and the
   user can't see which field failed. Reproduce the BS3 red treatment, now in
   --hej-danger rather than Bootstrap's own red. */
.has-error > .form-control,
.has-error > .form-select,
.has-error > .form-check-input,
.has-error .form-control,
.has-error .form-select,
.has-error .form-check-input {
	border-color: var(--hej-danger);
}
.has-error .form-control:focus,
.has-error .form-select:focus,
.has-error .form-check-input:focus {
	border-color: var(--hej-danger);
	box-shadow: 0 0 0 0.25rem rgba(var(--hej-danger-rgb), .25);
}
.has-error .form-label,
.has-error > label,
.has-error .control-label,
.has-error .help-block,
.has-error .help-block-error {
	color: var(--hej-danger);
}
.help-block-error {
	color: var(--hej-danger);
	display: block;
	margin-top: 0.25rem;
	font-size: 0.875em;
}


/* bootbox.min.js v4-era inserts <button class="bootbox-close-button close">&times;</button>
   on every modal it creates and relies on BS3's .close styles (float:right + opacity)
   for positioning. BS5 dropped .close, so the X drifts to the left and loses its styling.
   Reproduce the BS3 positioning here so site-wide bootbox dialogs keep their close X
   in the upper-right corner. Same rule catches ekko-lightbox and any other BS3-era
   plugin that emits class="close" inside a .modal-header. */
.bootbox-close-button,
.modal-header .close:not(.btn-close) {
	/* These plugins emit close button BEFORE the title in DOM. order:1 visually
	   moves it to the end of the flex row, then margin-left:auto pushes it
	   flush right past the title. float:right is the fallback when the close
	   button sits outside a flex container (e.g. bootbox titleless dialogs
	   prepend it into .modal-body). */
	order: 1;
	float: right;
	margin-left: auto;
	padding: 0;
	background: transparent;
	border: 0;
	font-size: 1.5rem;
	line-height: 1;
	color: inherit;
	opacity: 0.5;
}
.bootbox-close-button:hover,
.bootbox-close-button:focus,
.modal-header .close:not(.btn-close):hover,
.modal-header .close:not(.btn-close):focus {
	opacity: 0.75;
	cursor: pointer;
}
/*** END floating nav bar ***/

/* ---------------------------------------------------------------------------
   PASSWORD FIELD (RE-1130 G14)

   Marketing counted three show/hide treatments across the site and asked for the
   design system's one: the eye INSIDE the field, not in a box or a button beside
   it. The two that were beside it were an .input-group-text panel (login.cfm,
   employers/login.cfm, CreateEmpAccount.cfm, UpgradePosition.cfm) and a solid
   .btn-outline-ink (createprofile.cfm, resetpassword.cfm, VerifyMyInfo.cfm).

   This is the design system's sign-in modal spec, verbatim: relative wrapper,
   46px of right padding on the input to clear the glyph, and a 34x34 transparent
   hit area pinned at right:8px in the link blue.

   The wrapper is NOT .input-group. That matters: an .input-group makes the field
   and the toggle flex siblings, which is exactly the attached look being retired.
   --------------------------------------------------------------------------- */
.password-field {
	position: relative;
}
.password-field > .form-control {
	padding-right: 46px;
}
.password-field > .js-view-pw,
.password-field > .js-show-password {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: var(--hej-r-sm);
	background: transparent;
	color: var(--hej-link);
	text-decoration: none;
	cursor: pointer;
}
.password-field > .js-view-pw:hover,
.password-field > .js-show-password:hover,
.password-field > .js-view-pw:focus,
.password-field > .js-show-password:focus {
	color: var(--hej-link-hover);
	background-color: rgba(0, 0, 0, .04);
	text-decoration: none;
}
/* A .form-control-lg field is taller, so the glyph needs more room to its right
   and the hit area can grow with it. */
.password-field > .form-control-lg {
	padding-right: 52px;
}

/* ---------------------------------------------------------------------------
   LIST CONTROLS -- the "Sort by / Display" row (RE-1130 D11)

   Translated from `.list-controls` in `Prototype - Job Listing v0.4 -
   Responsive.dc.html` (design-system export of 2026-09-11). Marketing's round-3
   note asks /HigherEdCareers/ and /institution/ to match "the job listing page",
   meaning the PROTOTYPE of it, not the page as it stands -- the job-listing
   redesign is the next ticket, and this is the shape it is going to take. Naming
   the component after the prototype's own class means that redesign inherits it
   rather than re-deriving it.

   *** THIS IS A DELIBERATE EXCEPTION TO G1's 44px MINIMUM. ***
   These selects compute to roughly 36px (14px x 1.2 + 16px padding + 3px border)
   and Marketing intends them smaller: they are a secondary, always-visible list
   control sitting above the results, not a form field someone fills in. G1 came
   from Brad asking that fields and menus match the buttons' height; this row has
   no buttons in it. Do not "fix" these back to 44px -- if the height ever looks
   wrong, it is a spec question for Marketing, not a G1 regression.

   The border, radius, type and caret are the prototype's verbatim; only the
   colours are swapped for our equivalents per the project's locked decision to
   converge onto existing token names (--ds-line-2 #c2c7cf -> --hej-line-2
   #cccccc, --ds-ink-2/-3 map exactly). The caret is the prototype's inline SVG;
   its %23333333 stroke is --hej-ink, which a data URI cannot reference. */
.list-controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin: 20px 0 8px;
	padding: 14px 0;
	font-size: var(--hej-fs-body-s);
	color: var(--hej-ink-2);
}
.list-controls .grp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
/* The prototype pushes its sort group right with margin-left:auto because it has
   a Create Job Alert button on the left. Neither of these pages has a left-hand
   action, so the auto margin moves to the results/pager instead and the two
   groups stay left -- which is how Marketing's screenshots show them. */
.list-controls .results {
	margin-left: auto;
	color: var(--hej-ink-3);
}
.list-controls .results strong {
	color: var(--hej-ink);
}
/* These labels sit inline beside their control, so they drop the stacked-form
   bottom margin and the .control-label weight. */
.list-controls label {
	margin: 0;
	font-weight: inherit;
}
.list-controls select {
	appearance: none;
	-webkit-appearance: none;
	padding: 8px 30px 8px 12px;
	border: 1.5px solid var(--hej-line-2);
	border-radius: var(--hej-r-sm);
	background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23333333' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1 5 5 9 1'/></svg>") no-repeat right 12px center;
	background-size: 10px 6px;
	font-family: inherit;
	font-size: var(--hej-fs-body-s);
	line-height: 1.2;
	color: var(--hej-ink);
	cursor: pointer;
}
.list-controls select:focus {
	outline: none;
	border-color: var(--hej-ink-2);
	box-shadow: 0 0 0 3px rgba(76, 78, 82, .18);
}