@charset "UTF-8";
/* Web Solutions 4.0 Compatible */

:root {
	--background-image: url(/images/backgrounds/sirens-desktop.jpg) no-repeat center / cover;
	--header-height: 5.375rem; 
}

body.firefighterapp {
	--background-image: url(/images/backgrounds/firefighter-desktop.jpg) no-repeat center / cover;
}

body.employmentapp {
	--background-image: url(/images/backgrounds/employmentapp-desktop.jpg) no-repeat center / cover;
}

/* mobile */
#mobilenav,
.menu,
.mobileOnly {
	content-visibility: hidden;
	display: none !important;
}


/* HEADINGS ------------------------------ */
h1, .heading-1 {
	font-size: 2.125em;
}

h2, .heading-2 {
	font-size: 1.5625rem;
}

h3, .heading-3 {
	font-size: 1.375rem;
}

h4, .heading-4, th {
	font-size: 1.25rem;
}

.intro {
	font-size: 1.125em;
}



/* HEADER ------------------------------*/
body>header .header-wrap {
	align-items: center;
}

body.management>header {
	top: 35px;
}

#brand {
	padding: 1.3125em 1.875em;
}

#brand img {
	height: 2.5625rem;
	width: auto;
}

#navContainer {
    display: flex;
}

nav ul {
	margin: 0;
}

#navContainer nav {
	overflow: visible;
}

#navContainer nav + nav {
	margin-left: 1em;
}

#navContainer nav ul {
	margin: 0;
	padding: 0;
	text-align: center;
}

#navContainer nav li {
	display: inline-block;
	margin-left: 1px;
	position: relative;
}

#navContainer nav a {
	color: #FFF;
	display: block;
	line-height: 5.3125em;
	padding: 0 1em;
	position: relative;
	text-decoration: none;
}

#navContainer nav>ul>li:hover>a,
#navContainer nav>ul>li.on>a {
	background: var(--brand-color);
	color: #fff;
}


#navContainer nav>ul>li.account>a {
	clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
	padding: 0 2.25rem 0 3.25rem;
	margin-left: -0.25rem;
}

#navContainer nav li.account:is(:hover, :focus-within)>a,
#navContainer nav>ul>li.account.tapped>a,
#navContainer nav>ul>li.account>a:focus,
#navContainer nav>ul>li.account.expand>a {
    color: var(--accent-color);
}

#navContainer nav>ul>li.account>a:before,
#navContainer nav>ul>li.account>a:after {
	display: block;
	content: "";
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
    height: 100%;
    left:0;
    position: absolute;
    top:0;
    width: 100%;
}

#navContainer nav>ul>li.account>a:before {
	background: var(--accent-color);
}

#navContainer nav>ul>li.account>a:after {
	background: #000;
	left:0.125rem;
}

#navContainer nav>ul>li.account>a span {
	display: flex;
	gap: 0.3125rem;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 1;
}

#navContainer nav>ul>li.account>a:is(:hover, :focus) span {
	color:var(--accent-color);
}

#navContainer nav>ul>li.account>a span:before {
    background: var(--brand-light);
    content:"";
    height: 1em;
    mask-image: var(--user);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 1em auto;
    transition: var(--transition);
    width: 1em;
}

#navContainer nav li.account:hover>a span:before,
#navContainer nav>ul>li.account.tapped>a span:before,
#navContainer nav>ul>li.account>a:focus span:before,
#navContainer nav>ul>li.account.expand>a span:before {
    background: var(--accent-color);
}

/* Accessible dropdowns */
#navContainer nav>ul>li>button {
	background: transparent;
	bottom: 0;
	border: 0;
	height: .5rem;
	opacity: 0;
	padding: 0;
	pointer-events: none;
	position: absolute;
	right: 50%;
	transform: translate(50%, -50%);
	width: 1.25rem;
}

#navContainer nav>ul>li>button:focus {
	opacity: 1;
}

#navContainer nav>ul>li>button:before {
	background: url('/templates/PoliceApp-2024/images/icons/misc/chevron-down.svg') no-repeat center / contain;
	content: '';
	height: .75rem;
	left: 0;
	position: absolute;
	right: 0;
	top: calc(50% - 6px);
}

/* Drop-down menu */
#navContainer nav li ul {
    background: #000;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    box-shadow: -1px 10px 20px 0 rgba(255,255,255,0.5);
    left: 0;
    opacity: 0;
    padding: 1em;
    position: absolute;
    top: -200vh;
    width: 250px;
    z-index: -1;
}

#navContainer nav li:not(.expand) ul {
	transition:
		opacity .2s ease-out 0.5s,
		z-index 0s linear 0.7s,
		top 0s linear 0.7s;
}

#navContainer nav li:is(:hover, :focus-within) ul,
#navContainer nav>ul>li.tapped>ul,
#navContainer nav>ul>li>a:focus+ul,
#navContainer nav>ul>li.expand>ul {
	opacity: 1;
	top: 100%;
	z-index: 1;
}

#navContainer nav>ul>li:not(.expand):is(:hover, :focus-within)>ul {
	transition:
		opacity .2s ease-in .5s,
		z-index 0s linear .5s,
		top 0s linear .5s;
}

#navContainer nav>ul>li:last-child ul {
	left:auto;
	right: 0;
}

#navContainer nav li ul li {
	display: block;
	width: 100%;
}

#navContainer nav ul li ul li a {
	background: none;
	color: #FFF;
}

#navContainer nav li ul li a {
    align-items: center;
    border-radius: var(--border-radius);
    display: flex;
    font-size: 0.875em;
    gap: 0.75em;
    line-height: 1.1em;
    padding: .75em 1em;
    text-align: left;
    width: 100%;
}

#navContainer nav ul ul a:is(:hover, :focus) {
	background: rgba(255,255,255,0.125);
}

#navContainer #ancillary ul ul a:before {
    background: #fff;
    content: "";
    display: block;
    height: 1.25em;
    mask-position: center;
    mask-repeat: no-repeat;
    opacity: 0.5;
    transition: var(--transition);
    width: 1.25em;
}

#navContainer #ancillary ul ul a:is(:hover, :focus):before {
	background:var(--accent-color);
	opacity: 1;
}

#navContainer li.account > a span:before {
    mask-image: var(--user-outline);
}

#navContainer li.messages > a:before {
    mask-image: var(--dashboard-messages);
    mask-size: 1.25em auto;
}

#navContainer li.messages > a span {
    aspect-ratio: 1/1;
    background:#000;
    border: 2px solid red;
    border-radius: var(--border-radius);
    color: #fff;
    display: block;
    font-size: 0.875em;
    font-weight: 700;
    line-height: 1.625rem;
    min-width: 2rem;
    position: absolute;
    right: 0.25em;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}

#navContainer li.jobs > a:before {
    mask-image: var(--dashboard-jobs);
    mask-size: 1.25em auto;
}

#navContainer li.applications > a:before {
    mask-image: var(--dashboard-applications);
    mask-size: 0.875em auto;
}

#navContainer li.scores > a:before {
    mask-image: var(--dashboard-scores);
    mask-size: 1.125em auto;
}

#navContainer li.exams > a:before {
    mask-image: var(--dashboard-calendar);
    mask-size: 0.875em auto;
}

#navContainer li.user > a:before {
    mask-image: var(--lock);
    mask-size: 0.875em auto;
}

#navContainer nav li ul ul {
	display: none;
}






/* MAIN ------------------------------ */
.page-header {
	background: var(--background-image);
}

.interior #content {
	padding: 2.875em 1em 5em;
	min-height: 37.5em;
}

body.fullWidth main>div>#content {
	float: none;
	margin: 0 auto;
	width: 100%;
}

.content .job-description a:not(.button):is(:hover, :focus) {
    color:var(--brand-dark);
    text-decoration-color: var(--accent-color);
}

.content .white-block ul li a:not(.button) {
    text-decoration: underline;
    text-decoration-color: transparent;
}

.content .white-block ul li a:not(.button):is(:hover, :focus) {
    text-decoration-color: var(--accent-color);
}

.content :is(.photoright, .photoleft) {
	height: auto;
	max-width: min(50%, 21.875em);
}

.photoright {
	margin: 0 0 3em 4em;
}

.photoright figcaption {
	text-align: right;
}

.photoleft {
	margin: 0 4em 3em 0;
}

.wsManagementLogin td:first-child {
	text-align: right;
	width: 40%;
}

a:is(:hover, :focus), a:is(:hover, :focus) * {
	color: var(--brand-dark);
}

:is(button, .button, input:is([type="button"], [type="submit"], [type="reset"])):not(.select, .use-my-location, .clear):is(:hover, :focus, :focus) {
	background-color: var(--brand-dark);
	box-shadow: none;
	color: #FFF;
}

:is(button, .button).hollow:is(:hover, :focus) {
	color: #fff;
}

:is(button, .button).white.icon:is(:hover, :focus, :focus):before,
:is(button, .button).white.icon:is(:hover, :focus, :focus):after,
:is(button, .button).hollow.icon:is(:hover, :focus, :focus):before,
:is(button, .button).hollow.icon:is(:hover, :focus, :focus):after,
:is(button, .button).simple.plus:is(:hover, :focus, :focus):before,
:is(button, .button).simple.info.after:is(:hover, :focus, :focus):after {
	background: var(--accent-color);
	opacity: 1;
}

:is(button, .button).clear-all:is(:hover, :focus),
.page-header :is(button, .button).clear-all:is(:hover, :focus),
:is(button, .button).simple.info.after:is(:hover, :focus, :focus) {
	background: none;
}

:is(button, .button).icon.remove.after:is(:hover, :focus, :focus) {
	background: none;
}

:is(button, .button).icon.remove.after:is(:hover, :focus, :focus):after {
	background: var(--red);

}

.page-header :is(button, .button).clear-all:is(:hover, :focus) {
	text-decoration-color: var(--accent-color);
}

.popover .center .close:is(:hover, :focus, :focus) {
	background: none;
	opacity: 0.5;
}

.shareIcons a:is(:hover, :focus) {
	background-color: var(--link-color-hover);
}

.twoCol,
.threeCol,
.resCol {
	column-rule: none;
}

.twoCol {
	columns: 2;
}

.threeCol {
	columns: 3;
}

.resCol {
	columns: auto;
	column-width: 13em;
}

.formTable td {
	width: 50%
}

.formTable td {
	padding: 0 0 .5em .5em
}

.formTable td:first-child {
	padding: 0 .5em .5em 0
}

.formTable td[colspan="2"] {
	padding-right: 0
}

.formTable.formLoose,
.formTable.formLoose td {
	width: auto
}

.form-field .use-my-location {
	color: #fff;
	left: 5.5em;
	right: auto;
	padding: 0 0.5em;
}

.form-field .use-my-location:is(:hover, :focus, :focus) {
    background: none;
}

.form-field .use-my-location:is(:hover, :focus, :focus) span {
	text-decoration-color: var(--accent-color);
}

.form-field .use-my-location:before {
    background: var(--accent-color);
	opacity: 1;
}

.attach-files [for=file-input]:is(:hover, :focus-visible) {
	background: var(--light-grey-focus);
}

.attach-files [for=file-input]:is(:hover, :focus-visible):before {
	opacity: 1;
}

blockquote:not(.full-width-quote) {
	float: right;
	margin: 1em 0 1em 3em;
	max-width: 50%;
	text-align: right;
	width: 19.4375em;
}

blockquote:not(.full-width-quote) p:before {
	display: inline-block;
	transform: translate(-0.25em, -0.5em);
}

blockquote.full-width-quote {
	text-align: center;
}

blockquote.full-width-quote p:before {
	display: block;
  	margin: 0 auto 1em;
}

.accordion .accordion-content li a {
	border-radius: var(--border-radius);
}

.accordion .accordion-content li a:is(:hover, :focus) {
	background: var(--light-grey-focus);
}

.content .arrow-links a:is(:hover, :focus) {
	background: var(--brand-color);
	border-color: var(--brand-color);
	color: #fff;
}

.content .arrow-links a:is(:hover, :focus):after {
	background: var(--accent-color);
}

.desktop-align-items-center {
	align-items: center;
}

.desktop-align-items-start {
	align-items: flex-start;
}

.desktop-align-items-end {
	align-items: flex-end;
}

.text-align-center-desktop {
	text-align: center;
}

.content-block {
    margin: 2rem 0;
}

:where(.content-block, .simpleTable) a:not(.button) {
	text-decoration: 1px solid transparent;
}

:where(.content-block, .simpleTable) a:not(.button):is(:hover, :focus),
:where(.content-block, .simpleTable) a:not(.button):is(:hover, :focus) * {
    color: var(--brand-dark);
	text-decoration-color: var(--accent-color);
}

.content-block.exam-block {
	padding: clamp(1rem, 0.818rem + 0.91vw, 1.5rem); /* 16 - 24px */
	transition: var(--transition);
}

.content-block.exam-block form {
    display: grid;
    gap:0.625rem;
}

.content-block.exam-block form.four-column {
    grid-template-columns: repeat(4, auto);
}

.content-block.exam-block form.five-column {
    grid-template-columns: repeat(5, auto);
}

.content-block.exam-block .row {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.content-block.exam-block .row:first-child,
.content-block.exam-block .row:last-child,
.content-block.exam-block .row:nth-last-child(2) {
    grid-column: 1/-1;
}

.content-block.exam-block .row:nth-last-child(2) {
    border-top: 1px dashed var(--brand-light);
	padding-top: 1.25em;
	margin-top: 0.75em;
}

.content-block.exam-block :is(label, span:first-child) {
    color: var(--grey);
    font-size: 0.875rem;
}

.content-block.exam-block select {
    width: auto;
}

.content-block.exam-block:has(select) span:nth-child(2) {
	line-height: 2.8125rem;
}

.content .content-block.social-block a:is(:hover, :focus) {
    background: var(--accent-color);
}

.content .content-block.social-block a:is(:hover, :focus):before {
    background: #fff;
}

.white-section .documents-block .accordion .accordion-content a.downloadFile:before {
    background: var(--brand-color);
    content: "";
    display: block;
    height: 1em;
    mask-image: var(--download);
    mask-position: center;
    mask-repeat: no-repeat;
    position: relative;
    top: 2px;
    width: 1em;
}



/* Contact Form - table removed ----- */
.form-flex .three-quarters {
	width: calc(75% - .5em); /* Full on mobile */
}

.form-flex .two-thirds {
	width: calc(66% - .5em); /* Full on mobile */
}

.form-flex .half {
	width: calc(50% - .5em); /* Full on mobile */
}

.form-flex .third {
	width: calc(33.33% - .5em); /* Full on mobile */
}

.form-flex .quarter {
	width: calc(25% - .5em); /* Half on mobile */
}







/* HOMERPAGE ------------------------------ */
#hero {
    background: var(--background-image);
    padding: 5.9375em 1em 7.3125em;
}

#hero form:not(.form-flex) {
	align-items: flex-end;
	gap: 1.25em;
	max-width: 53em;
	margin: 0 auto;
}

#hero .form-flex {
	max-width: 44rem;
	margin: 0 auto;
}

#hero .login-assistance a:is(:hover, :focus) {
	text-decoration-color: var(--accent-color);
}

#hero p {
    font-size: 1.125em;
	margin: 0.5em 0 2.625em;
}

#hero .wrap > p:last-child {
    margin-bottom: 0;
}

#hero .job-type {
    min-width: 180px;
}

#hero .search {
    justify-content: center;
    line-height: 3.3125rem;
}

.home main > section h2 {
	font-size: 2em;
	margin-bottom: 2.25rem;
}

.home #news .wrap {
	max-width: 59rem;
}

.home #news h2 {
	font-size: 2em;
	margin-bottom: 2.25rem;
}

#news .news-feed li {
	width: 33%;
}

#news .news-feed li .story-title {
	text-decoration: underline;
	text-decoration-color: transparent;
}

#news .news-feed li a:is(:hover, :focus) .story-image {
	border-color: var(--brand-color);
}

#news .news-feed li a:is(:hover, :focus) .story-title {
	color: var(--brand-dark);
	text-decoration-color: var(--brand-color);
}






/* JOBS ------------------------------ */
.page-header .back:is(:hover, :focus-visible) {
    text-decoration: underline;
}

.jobs main .wrap {
	max-width: 80em;
}

.jobs .page-header {
	text-align: left;
	padding-bottom: 3em;
	padding-right: 2em;
	padding-left: 2em;
}

.jobs .page-header:before {
    background: linear-gradient(180deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.00) 50%), linear-gradient(0deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.00) 79%);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.jobs .page-header .wrap {
	position: relative;
	z-index: 2;
}

.jobs .page-header .job-filters {
	margin-top: 0.75em;
}

.jobs .page-header .job-filters [type=submit] {
	line-height: 2.8125rem;
	padding: 0 2em;
}

.jobs .page-header .job-filters .clear-all {
	line-height: 2.8125rem;
}

.jobs .page-header .back:is(:hover, :focus) {
	text-decoration: underline;
}

.jobs #content {
	background: #fff;
	padding: 2.25em 2em 5em;
}

:is(.jobs-list, .styled-list) .table-header,
:is(.jobs-list, .styled-list) li a {
    display: grid;
    font-size: 0.875em;
    gap: 1.5em;
    grid-template-columns: 1.25fr 1.25fr 0.75fr 6.25rem;
    line-height: 1.25em;
    padding: 0.5rem 0.625rem;
}

.jobs-list li a {
	align-items: start;
}

:is(.jobs-list, .styled-list) .table-header {
    align-items: end;
    background: #fff;
    position: sticky;
    top: var(--header-height);
    z-index: 1;
}

:is(.jobs-list, .styled-list) .table-header h2 {
	font-size: 1.5em;
	margin: 0;
}

:is(.jobs-list, .styled-list) .table-header > *:not(h2, .button) {
	font-size: 0.75em;
	font-style: italic;
}

#content :is(.jobs-list, .styled-list) ul {
	border-top: 1px dashed #CBCBCB;
}

#content :is(.jobs-list, .styled-list) li {
	border-bottom: 1px dashed #CBCBCB;
	margin: 0;
	padding: 1px 0;
}

:is(.jobs-list, .styled-list) li a {
	color: #000;
}

:is(.jobs-list, .styled-list) li a:is(:hover, :focus) {
	background: var(--light-grey-focus);
}

:is(.jobs-list, .styled-list) li a:is(:hover, :focus) > * {
	color: #000;
}

:is(.jobs-list, .styled-list) li a span {
	display: block;
}

:is(.jobs-list, .styled-list) li a .apply {
    align-items: center;
    color: var(--brand-color);
    display: flex;
    font-weight: 700;
    gap: 0.25em;
    justify-content: flex-end;
    text-transform: lowercase;
    white-space: nowrap;
}

:is(.jobs-list, .styled-list) li a .apply:after {
    background: var(--brand-color);
    content: "";
    display: block;
    height: 1em;
    mask-image: var(--arrow-right);
    mask-position: center;
    mask-repeat: no-repeat;
    width: 1em;
}

.no-jobs-found {
	margin: 2em 0;
}

:is(.jobs-list, .styled-list):first-child .no-jobs-found:only-child {
	margin-top: 0;
}

/* By Region */
.jobs-landing h1 {
	margin-bottom: 2.25rem;
}

.jobs-landing #content .wrap,
.jobs-by-region .wrap {
	max-width: 75em;
}

.jobs-landing #content .flex,
.jobs-by-region .flex {
	gap: 1.25em;
}

.jobs-landing #content .flex > *,
.jobs-by-region .flex > * {
	width: calc(25% - 1em);
}

.accordion.desktopOpen button {
	pointer-events: none;
}

.accordion.desktopOpen button span {
	display: none;
}

.accordion.desktopOpen .accordion-content {
	height: auto !important;
}

.extra-content {
	background: var(--brand-light);
	border-radius: 1.25em;
	margin-top: 4.0625em;
	padding: 3em;
}

body.departments .extra-content {
	background: #fff;
}

.extra-content p > a:not(.button):is(:hover, :focus) {
    color: var(--brand-dark);
}

.jobs-landing .extra-content {
	background: #fff;
}

#job-alerts-cta {
	text-align: center;
	color: #fff;
	margin-top: 4.0625em;
	background: url(/templates/PoliceApp-2024/images/backgrounds/cta-desktop.jpg) no-repeat center / cover;
	border-radius: 1.25em;
	padding: clamp(3rem, 2.341rem + 3.3vw, 4.813rem) 1em clamp(4.688rem, 3.869rem + 4.09vw, 6.938rem);
}

#job-alerts-cta h2 {
	font-size: 2em;
	margin-bottom: 0.5rem;
}

#job-alerts-cta form .flex-fill {
	width: 100%;
}

#job-alerts-cta .form-field {
	align-self: center;
}

#job-alerts-cta fieldset label {
	font-size: 1rem;
}

#job-alerts-cta button {
	line-height: 2.9375rem;
}

#job-alerts-cta .checkbox-left a:is(:hover, :focus) {
	text-decoration-color: var(--accent-color);
}



/* Job View */
.job-view {

    gap:clamp(1.563rem, 0.994rem + 2.84vw, 3.125rem)
}

.job-view :is(h2, h3) {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.job-view .job-description {
    max-width: 49.375rem;
    order: 1;
}

.content-block {
    margin: 2rem 0;
}

.content .content-block.social-block a:is(:hover, :focus) {
    background: var(--accent-color);
}

.content .content-block.social-block a:is(:hover, :focus):before {
    background: #fff;
}


.job-view .job-apply {
    flex-shrink: 0;
    max-width: 22.0625rem;
    order: 2;
    position: sticky;
    top: 6.5em;
    width: 100%;
    max-height: calc(100vh - 114px);
    overflow: auto; 
}

.job-view .job-apply .important-details {
    background: var(--brand-light);
    border-radius: 0.5rem;
    margin-bottom: 1.8125rem;
    padding: 1.875rem 1.25rem;
}

.job-view .job-apply .important-details .button {
    justify-content: center;
    margin-bottom: 1.6875rem;
    width: 100%;
}

.job-view .job-apply .important-details .grid-row a:is(:hover, :focus) {
    color: var(--brand-dark);
	text-decoration: underline;
}

.content .prerequisites ul {
	max-height: calc(100vh - 30rem);
	overflow: auto;	
}

.content .prerequisites li a:is(:hover, :focus) {
    background: var(--brand-color);
    border-color: var(--brand-color);
    color: #fff;
}

.content .prerequisites li a:is(:hover, :focus) span {
    color: #fff;
}

.content .prerequisites li a:is(:hover, :focus) span:after {
    background: var(--accent-color);
}






/* DEPARTMENTS ------------------------------ */
body.departments #hero {
	padding: 2.938em 1em 4.313em;
}

body.departments #hero p {
	margin-bottom: 1.625em;
}

body.departments #content .wrap {
	max-width: 75em;
}

body.departments #content .header-flex :is(h1, h2):not(.heading-1) {
	margin: 0;
}

body.departments #content :is(h1, h2):not(.heading-1) {
	font-size: 2.125em;
	margin-bottom: 0.5rem;
}

body.departments #content .desktopOpen h2 {
	margin-bottom: 0;
}

body.departments #content .states-list {
	gap:1.25em;
	margin-top: 2em;
}

body.departments #content .states-list > * {
	width: calc(25% - 1em);
}

.sales-table tbody tr:nth-child(even) {
	background: var(--light-grey-focus);
}

.sales-table tbody tr:is(:hover, :focus) {
	background: var(--light-yellow);
}

.sales-table {
	border: 1px solid #ccc;
	margin: 2em 0;
}

.sales-table :is(th, td) {
	line-height: 1.25em;
	padding: 0.75rem 1rem;
	vertical-align: middle;
}

.sales-table thead {
	position: sticky;
	top: 5.375rem;
	z-index: 1;
}

.sales-table th {
	background: var(--brand-darkest);
	color:#fff;
	font-weight: 700;
	font-size: 1rem;
	text-align: center;
	white-space: nowrap;
}

.sales-table .title {
	color: var(--brand-color);
	display: block;
	font-weight:700;
}

.sales-table :is(.yes, .no) {
    margin: 0 auto;
    text-align: center;
}

.sales-table :is(.yes, .no):before {
    content:"";
    mask-position: center;
    mask-repeat: no-repeat;
}

.sales-table .yes:before {
    background: green;
    mask-image: url(/images/icons/check.svg);
    mask-size: 1em auto;
    padding-left: 1em;
}

.sales-table .no:before {
    background: var(--dark-red);
    mask-image: url(/images/icons/x.svg);
    mask-size: 100% auto;
    padding-left: 0.65em;
}

.departments.single-department .page-header {
	text-align: left;
	padding-bottom: 3em;
	padding-right: 2em;
	padding-left: 2em;
}

.departments.single-department .page-header:before {
    background: linear-gradient(180deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.00) 50%), linear-gradient(0deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.00) 79%);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.departments.single-department .page-header .wrap {
	position: relative;
	z-index: 2;
}

.departments.single-department .page-header .back:is(:hover, :focus) {
	text-decoration: underline;
}

.departments.single-department #content {
	background: #fff;
	padding: 2.25em 2em 5em;
}

.departments.single-department main .wrap,
.departments.single-department #content .wrap {
	max-width: 80em;
}

.departments.single-department .department-view {
	gap:clamp(1.563rem, 0.994rem + 2.84vw, 3.125rem);
}

.departments.single-department .department-view .important-info {
	flex-shrink: 0;
	max-width: 22.0625rem;
	order: 2;
	position: sticky;
	top: 6.5em;
	width: 100%;
	max-height: calc(100vh - 114px);
	overflow: auto;
}

.departments.single-department .department-view .important-details {
    background: var(--brand-light);
    border-radius: 0.5rem;
    margin-bottom: 1.8125rem;
    padding: 1.875rem 1.25rem;
}

.departments.single-department .department-description {
	max-width: 49.375rem;
	width: 100%;
	order: 1;
}

.departments.single-department #content .department-description :is(h2, h3):not(.heading-1) {
	font-size: 1.25rem;
	margin-bottom: 0.75rem;
}

:is(.departmen, .styled-list)ts.single-department .jobs-list {
    margin-bottom: 3rem;
}




/* SALES CTA / LANDING PAGES ------------------------------ */
#sales-cta > * {
	width: 50%;
}

#sales-cta.light-bg .ribbon-content {
	padding: 5vw;
}

#sales-cta h2 {
	font-size: 2em;
	margin-bottom: 0.3125rem;
}

#sales-cta .ribbon-image {
	background: url(/images/sales-cta-policeapp.jpg) no-repeat center / cover;
	position: relative;
}

	.firefighterapp #sales-cta .ribbon-image {background: url(/images/sales-cta-firefighterapp.jpg) no-repeat center / cover;}
	.employmentapp #sales-cta .ribbon-image {background: url(/images/sales-cta-employmentapp.jpg) no-repeat center / cover;}

#additional-links .wrap {
	max-width: 70.375em;
}

.icon-links {
	gap: clamp(1rem, 0.227rem + 3.86vw, 3.125rem);
}

.icon-links a:is(:hover, :focus):before{
    background: var(--accent-color);
	opacity: 1;
}

.icon-links a:is(button, .button).arrow.after:is(:hover, :focus):after {
    background: #fff;
}

.logo-list img {
	max-height: 1.875rem;
}

.logo-list a:is(:hover, :focus) {
	transform: scale(1.1);
}

.landing-page #content {
	padding: 3em;
}

.stacked-form {
	max-width: 21.25rem;
	margin: 0 auto;
}

/* Styled Tables */
.table-wrapper .styled-table thead th {
	background: var(--brand-darkest);
  	color: #fff;
  	font-weight: 700;
  	font-size: 1.125rem;
	padding: 0.3125rem 0.625rem;
}

.table-wrapper .styled-table tbody tr {
	border-bottom: 1px dashed #CBCBCB;
}

.table-wrapper .styled-table tbody tr:is(:hover, :focus-visible) {
	background: var(--light-yellow);
}

.table-wrapper .styled-table td {
	padding: 0.3125rem 0.625rem;
	vertical-align: middle;
}




/* APPLICATION ------------------------------ */

progress,
progress[value]::-webkit-progress-bar {
    border-radius: 0.5rem;
    height: 0.5rem;
}

.job-application main .wrap {
	max-width: 75rem;
}

.job-application #content {
	min-height: 27.25em;
	padding: 2.25em 2em 5em;
}





/* LOGIN / CANDIDATE SECTION ------------------------------ */
.login #hero form {
    align-items: flex-start;
	margin-top: 2.625em;
}

.login #hero form > *:last-child {
    padding-top: 1.375rem;
}

.login #hero form a:not(.button) {
	margin-top: 0.625rem;
    font-size: 0.8125rem;
    text-align: center;
    text-decoration: underline;
}

.login #hero form a:is(:hover, :focus):not(.button) {
    color: #fff;
    text-decoration-color: var(--accent-color);
}

#hero .text-link:is(:hover, :focus) {
	color:#fff;
	text-decoration: underline;
	text-decoration-color: var(--accent-color);
}

#hero .dashboard-links {
	flex-wrap:wrap;
	max-width: 48.75rem;
	margin: 2.875rem auto 0;
}

#hero .dashboard-links > * {
	max-width: 21.375rem;
}

#hero .important-links li:is(:hover, :focus-within):before {
	background: var(--accent-color);
	opacity: 1;
}

#hero .important-links a:is(:hover, :focus) {
	background: var(--brand-color);
	color:#fff;
}

#hero .important-links a:is(:hover, :focus):after {
	background: var(--accent-color);
}

#hero .account-links {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.blue-section:not(#callouts) h2 {
    font-size: 2em;
}

.blue-section form a:is(:hover, :focus) {
    color: var(--brand-color);
    text-decoration-color: var(--accent-color);
}

.blue-section form .tel-options {
    padding-top: 1.3125rem;
}

.candidate #content {
	background: #fff;
	padding: 2.25em 2em 5em;
}

.candidate .styled-list .table-header,
.candidate .styled-list li a {
    grid-template-columns: 1fr auto auto;
}

#content .styled-list .applications.styled-table {
    margin-bottom: 3em;
}

#content .styled-list .applications.styled-table li {
    padding: 0.5rem 0.625rem;
}

#content .styled-list .applications.styled-table li:is(:hover, :focus-visible) {
    background: var(--light-grey-focus);
}

#content .styled-list .applications.styled-table .title span {
    padding: 0.5rem 0 0;
}

#content .styled-list .applications.styled-table .title em {
	padding-bottom: 0.5rem;
}

#content .styled-list .applications.styled-table li:is(:hover, :focus-visible) .manage-links a {
	background: var(--brand-color);
	color: #fff;
}

#content .styled-list .applications.styled-table li:is(:hover, :focus-visible) .manage-links a.delete {
	background: var(--red-accessible);
}

#content .styled-list .applications.styled-table li:is(:hover, :focus-visible) a:is(:hover, :focus-visible) {
	background: var(--brand-dark);
}







/* FOOTER ------------------------------ */
body>footer .wrap {
	max-width: 58.75em;
}

body>footer .wrap > * {
	font-size: 0.875em;
}

body>footer .footer-top > *:nth-child(2) {
    flex: 1 1 auto;
}

body>footer .social-links ul {
	gap:10%;
}

body > footer .social-links a:is(:hover, :focus) {
	opacity: 0.5;
}

.fatFooter>nav {
	display: flex;
	width: 80%;
}

.fatFooter>nav>ul {
	width: 25%;
}

#web-solutions {
	float: right;
	margin-left: 11px;
}

body>footer div:not(.social-links) a:is(:hover, :focus) {
	color: #FFF;
	text-decoration: underline;
}






/* 1024px */
@media screen and (max-width: 64em) {
	
	h1,
	.home main > section h2 {
		font-size: 1.75em;
	}

	.jobs .page-header {
		padding: 2em 1em;
	}

	.jobs .job-filters {
		flex-wrap: wrap;
		justify-content: center;
	}

	.jobs .job-filters > .form-field:first-child {
		min-width: calc(100% - 24em);
	}

	.jobs-landing #content .flex > *, 
	.jobs-by-region .flex > * {
		width: calc(33% - 1em);
	}
}






/* 900px */
@media screen and (max-width: 56.25em) {
	:root {
		--header-height: 3.8125rem; 
	}

	#brand {
		padding: 0.5em 0 0.5em 1em;
	}

	#brand img {
		width: 9.75rem;
		height: auto;
	}
	#navContainer nav a {
		font-size: 0.875em;
		line-height: 4.313em;
	}
	#news .news-feed ul {
		flex-direction: column;
	}
	#news .news-feed ul li {
		width: 100%;
	}

	:is(.jobs-list, .styled-list) .table-header {
		top: 3.75rem;
	}

	.job-view .job-apply,
	.job-application .form-actions {
		max-width: 17rem;
		top: 5.5em;
	}

	.job-application .page-header .progress {
		min-width: 17rem;
	}

	.job-view .job-apply .important-details .button {
		padding-left: 1em;
		padding-right: 1em;
	}

	.job-view .job-apply .grid-row {
		display: block;
	}

	.job-view .job-apply .grid-row span {
		display: block;
	}

	.job-application .flexible-row {
		grid-template-columns: 1fr 12.5rem;
	}

	body.departments #content .states-list > * {
		width: calc(33% - 0.6875rem);
	}

}