@charset "UTF-8";

:root {
	--tool-name: bold 1.5625rem/1em 'metropolis', sans-serif;
	--page-title: bold 2rem/1em 'metropolis', sans-serif;
}

.mobileOnly, #mobilenav {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}


/* HEADER ------------------------------*/
body>header {
	background: #fff;
	border-bottom: 1px solid #fff;
	position: sticky;
	top: 0;
	z-index: 2;
}

body>header .header-top {
	padding: 0 1rem;
	display: flex;
	justify-content: space-between;
	align-content: center;
	align-items: center;
}

body>header .header-top .logo {
      align-content: center;
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: 0 1em;
      padding: 1.1875rem;
  }

body>header .header-top .logo:is(:hover, :foucs-visible) {
  opacity: .5;
}

body>header .header-top .logo img {
	width: auto
}

body>header .header-top .logo .tool-name {
	display: block;
	font: var(--tool-name);
	color: var(--dark-purple)
}

body>header .header-top .account-links {
	flex-shrink: 0;
}

body>header .header-top .account-links a {
	display: inline-block;
	background: none;
	color: var(--dark-purple);
	font-size: 1rem;
}

body>header .header-top .account-links a:is(:hover, :foucs-visible) {
	color: var(--bright-purple)
}

body>header nav ul,
body>header nav ul li {
	margin: 0;
	padding: 0;
	position: relative
}

body>header nav>ul>li>a {
	font-size: 1rem;
	color: var(--dark-purple);
}

body>header nav {
	margin: 0;
	padding: 0 1rem;
	background: var(--light-grey)
}

body>header nav ul {
	overflow: visible;
	margin: 0;
	padding: 0;
}

body>header nav li {
	display: inline-block;
	position: relative
}

body>header nav li a {
	line-height: 3.25rem;
	padding: 0 1em;
	display: inline-block;
	color: #fff;
	text-decoration: none;
}

body>header nav>ul>li:hover>a,
body>header nav>ul>li:active>a,
body>header nav>ul>li.on>a {
	background: #fff;
	color: var(--dark-purple)
}

/* Accessible dropdowns */
#mainnav>ul>li>button {
	display: none;
}


/* drop-down menu */
body>header nav li ul {
	z-index: 1;
	width: 200px;
	padding: 1em 0;
	background: var(--dark-purple);
	position: absolute;
	overflow: auto;
	height: auto;
	top: -200vh;
	opacity: 0;
	z-index: -1;
	visibility: hidden;
	transition: ease 200ms opacity 0.35s;
}

body>header nav li:hover ul,
body>header nav>ul>li>a.tapped+ul,
body>header nav>ul>li>a:focus+ul,
body>header nav>ul>li>ul:focus-within {
	opacity: 1;
	top: auto;
	visibility: visible;
	z-index: 1;
}

body>header nav>ul>li:last-child:not(:nth-child(2), :nth-child(3), :nth-child(4)) ul {
	right: 0
}

body>header nav li ul li {
	width: 100%;
	display: block;
	float: left;
	padding: 0 2px
}

body>header nav ul li ul li a {
	background: none;
	color: #fff
}

body>header nav li ul li a {
	font-size: .9em;
	border-radius: 3px;
	line-height: 1.1em;
	padding: .3em .5em;
	display: block;
	width: 100%;
	text-align: left;
	float: left
}

body>header nav li ul li a:hover,
.t1 li ul li a:active {
	color: var(--dark-purple);
	background: #fff
}

body>header nav li ul ul {
	display: none
}

body > main:not(:first-child) {
	padding: 0 var(--gutter) 12.5rem;
}

a:hover,
a:active,
a:hover *,
a:active * {
	color: var(--bright-purple)
}

main :is(
	input[type="text"], 
	input[type="password"], 
	input[type="tel"], 
	input[type="date"],input[type="number"], 
	input[type="email"], 
	input[type="url"], 
	input[type="search"], 
	textarea, 
	select):is(:hover, :focus-visible) {
	border-color: var(--bright-purple)
}

main :is(
	.greyBtn,
	button,
	.button.hover,
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	.button,
	.button,
	input[type="button"],
	input[type="submit"],
	input[type="reset"]):is(:hover, :focus-visible) {
	background-color: var(--dark-blue);
	color: #fff
}

main input[value="Clear"]:is(:hover, :focus-visible){
	color: var(--bright-purple)
}

main :is(button, .button).secondary:is(:hover, :focus-visible) {
	background: var(--dark-purple);
	color: #fff;
}

main :is(button, .button).secondary:is(:hover, :focus-visible) i {
	color: #fff;
}

.greyBtn:is(:hover, :focus-visible){
	background: #262262;
	color: #fff
}

table.listTable a:is(:hover, :focus-visible){
	color: var(--bright-purple)
}

table.alternate>tbody>tr:is(:hover, :focus-visible){
	background-color: var(--light-yellow)
}

.manageLinks a:is(:hover, :focus-visible){
	color: var(--bright-purple)
}

.tabs a:is(:hover, :focus-visible){
	background-color: #ebebf0;
	margin-top: 0;
	padding-bottom: 8px;
	color: #363262
}

.requisitionTabs a.on:is(:hover, :focus-visible){
	border-bottom: 1px solid #fff;
	background-color: #fff;
	margin-top: 0;
	padding-bottom: 8px;
	color: #363262
}

body>footer nav a:is(:hover, :focus-visible){
	color: var(--bright-purple);
}

.highlight .clear:is(:hover, :focus-visible){
	color: #666
}
.shareIcons a:is(:hover, :focus-visible){
	background-color: #F03C5E
}
.textIcon:is(:hover, :focus-visible){
	background: #666;
	background-color: rgba(0, 0, 0, .4);
	color: #fff
}




/* Form flex ----- */
.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 */
}



/* FLEX ------------------------------ */

/* direction and wrapping */
.flex.flex-column {flex-direction: column;}
.flex-wrap { flex-wrap: wrap;}
.flex.no-wrap { flex-wrap: nowrap;}
.flex.space-between { justify-content: space-between;}
.flex.space-around { justify-content: space-around;}
.flex.space-evenly { justify-content: space-evenly;}
.flex.column-reverse { flex-direction: column-reverse;}
.flex.row-reverse { flex-direction: row-reverse;}
.flex:is(.same-height, .same-width) { align-content: stretch; align-items: stretch;}

/* alignment */
.flex.justify-content-start {justify-content: flex-start;}
.flex.justify-content-center {justify-content: center;}
.flex.justify-content-end {justify-content: flex-end;}
.flex.centered {align-content: center; align-items: center; justify-content: center;}
.flex.align-items-top {align-items: flex-start;}
.flex.align-items-center {align-items: center;}
.flex.align-items-bottom {align-items: flex-end;}

/* widths */
.flex.flex-fill,
.flex .flex-fill {
    flex: 1 1 auto
}
.flex-shrink-0 {flex-shrink: 0;}
.flex .full-width {width: 100%;}
.flex .quarter {width: calc(25% - 0.75em);}
.flex .third {width: calc(33.333% - 0.6875em);}
.flex .half {width: calc(50% - 0.5em);}
.flex .two-thirds {width: calc(66.666% - 0.3125em);}
.flex .three-quarters {width: calc(75% - 0.25em);}

/* gap */
.gap-5 {gap: 0.3125em;}
.gap-5 > .quarter {width: calc(25% - 0.25em);}
.gap-5 > .third {width: calc(33.333% - 0.25em);}
.gap-5 > .half {width: calc(50% - 0.1875em);}
.gap-5 > .two-thirds {width: calc(66.666% - 0.0625em);}
.gap-5 > .three-quarters {width: calc(75% - 0.0625em);}

.gap-10 {gap: 0.625em;}
.gap-10 > .quarter {width: calc(25% - 0.5em);}
.gap-10 > .third {width: calc(33.333% - 0.4375em);}
.gap-10 > .half {width: calc(50% - 0.3125em);}
.gap-10 > .two-thirds {width: calc(66.666% - 0.1875em);}
.gap-10 > .three-quarters {width: calc(75% - 0.125em);}

.gap-15 {gap: 0.9375em;}
.gap-15 > .quarter {width: calc(25% - 0.75em);}
.gap-15 > .third {width: calc(33.333% - 0.625em);}
.gap-15 > .half {width: calc(50% - 0.5em);}
.gap-15 > .two-thirds {width: calc(66.666% - 0.3125em);}
.gap-15 > .three-quarters {width: calc(75% - 0.1875em);}

.gap-20 {gap: 1.43em;}
.gap-20 > .quarter {width: calc(25% - 1.125em);}
.gap-20 > .third {width: calc(33.333% - 1em);}
.gap-20 > .half {width: calc(50% - 0.75em);}
.gap-20 > .two-thirds {width: calc(66.666% - 0.4375em);}
.gap-20 > .three-quarters {width: calc(75% - 0.3125em);}

.gap-30 {gap: 1.875em;}
.gap-30 > .quarter {width: calc(25% - 1.4375em);}
.gap-30 > .third {width: calc(33.333% - 1.25em);}
.gap-30 > .half {width: calc(50% - 0.9375em);}
.gap-30 > .two-thirds {width: calc(66.666% - 0.625em);}
.gap-30 > .three-quarters {width: calc(75% - 0.4375em);}

.gap-40 {gap: 2.5em;}
.gap-40 > .quarter {width: calc(25% - 1.875em);}
.gap-40 > .third {width: calc(33.333% - 1.6875em);}
.gap-40 > .half {width: calc(50% - 1.25em);}
.gap-40 > .two-thirds {width: calc(66.666% - 0.8125em);}
.gap-40 > .three-quarters {width: calc(75% - 0.625em);}

.gap-50 {gap: 3.125em;}
.gap-50 > .quarter {width: calc(25% - 2.375em);}
.gap-50 > .third {width: calc(33.333% - 2.125em);}
.gap-50 > .half {width: calc(50% - 1.5625em);}
.gap-50 > .two-thirds {width: calc(66.666% - 1em);}
.gap-50 > .three-quarters {width: calc(75% - 0.75em);}




/* 1240px */
@media screen and (max-width: 77.5em) {
	#filters {
		flex-wrap: wrap;
	}
	#filters > :not(.quarter) {
		justify-content: center;
		width: 100%;
	}
	#filters > .quarter {
		width: calc(50% - 0.5em);
	}
	#filters > .quarter input {
		min-width: 100% !important;
	}
}