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

:root {
    --gutter: 1rem;
    --ws-grid: minmax(.5em, 1fr) [wrap-start] repeat(2, minmax(0, var(--ws-column-width))) [wrap-end] minmax(.5em, 1fr);
}

.desktopOnly {
    display: none;
}

body {
    background: #FFF;
}

body.slideNav {
    overflow: hidden;
}

/* HEADINGS ------------------------------ */
main h1 {
    font-size: 1.5em;
}

main h2 {
    font-size: 1.45em;
}

main h3 {
    font-size: 1.3em;
}

main h4,
th {
    font-size: 1.2em;
}

main h5 {
    font-size: 1.1em;
}

main h6 {
    font-size: 1.0em;
}

main .intro {
    font-size: 1.25em;
}

/* HEADER ------------------------------ */
body>header {
    background: #FFF;
    display: contents;
    position: relative;
    z-index: 1;
}

body>header .header-top {
    border-bottom: 1px solid var(--hr);
    flex-direction: column;
    padding: 0;
}

body>header:before {
    background-color: #000;
    content: '';
    display: block;
    height: 100vh;
    left: 100vw;
    opacity: 0;
    position: fixed;
    top: 0;
    transition: left 0ms ease 200ms, opacity 200ms ease;
    width: 100vw;
    z-index: 3;
}

body.slideNav>header:before {
    left: 0;
    opacity: .5;
    transition: left 0ms ease 0ms, opacity 200ms ease;
}

body>header .header-top #brand {
    display: block;
    margin: 0;
    padding: 1em 0;
}

body>header .header-top #brand img {
    display: block;
    height: auto;
    margin: 0 auto 0.3125rem;
    max-width: 100%;
}

body>header .header-top #brand .tool-name {
    font-size: 0.875rem;
}

body>header .header-links {
    display: grid;
	grid-template-columns: repeat(3, auto);
	justify-items: center;
	overflow: hidden;
	padding: 0 0.5em;
    width: 100%;
}

body>header .header-links .account-links {
    display: contents;
}

body>header .header-links .account-links > * {
    flex:  1 1 auto;
	padding-inline: 0.5em;
	white-space: nowrap;
}

body>header #searchWrapper {
	border-top: 1px solid var(--hr);
	margin: 0;
	padding: 1em;
}

body>header .google-translate-wrapper {
	width: auto;
}

body>header .google-translate-wrapper .goog-te-gadget-simple {
	padding-inline: 0.5em;
}

body>header .google-translate-wrapper .goog-te-gadget-simple a span {
    display: flex;
    justify-content: flex-end;
    max-width: 76px;
    min-height: 16px;
    overflow: hidden;
}

#navContainer {
    -webkit-overflow-scrolling: touch;
    background-color: var(--dark-purple);
    bottom: 0;
    left: 100%;
    max-height: 100vh;
    overflow: auto;
    position: fixed;
    top: 0;
    transition: left 200ms ease;
    width: 75%;
    z-index: 3;
}

#navContainer nav {
    background: none;
}

body>header nav>ul>li:hover>a,
body>header nav>ul>li:active>a {
    background: inherit;
    color: inherit;
}

body>header nav>ul>li>a.on {

    background: rgba(0, 0, 0, 0.25)
}

body.slideNav #navContainer {
    left: 25%;
}

#navContainer nav {
    display: inline;
    margin: 0;
}

#navContainer ul {
    display: block;
    margin: 0;
    padding-left: 0;
    width: 100%;
}

#navContainer li {
    border-top: 1px solid rgba(255, 255, 255, 0.125);
    display: block;
    position: relative;
    width: 100%;
}

#navContainer li li {
    border: 0;
}

#navContainer :is(a, .menu) {
    color: #CCC;
    display: block;
    font-size: 1rem;
    line-height: 2.75em;
    padding: 0 1rem;
    width: 100%;
}

#navContainer li.on a {
    background-color: #f03c5e;
    color: #FFF;
}

#navContainer li.open {
    background-color: #000;
}

#navContainer li>span {
    background: rgba(255, 255, 255, 0.5);
    display: block;
    height: 2.75em;
    position: absolute;
    right: 0;
    top: 0;
    width: 2.75em;
}

#navContainer ul ul {
    font-size: .8em;
    height: 0;
    overflow: hidden;
    transition: var(--ws-transition);
}

#navContainer ul ul a {
    padding-left: 2rem;
}

#navContainer ul ul li.on a {
    background-color: darkred;
}

#navContainer li>span::before,
#navContainer li>span::after {
    background-color: #000;
    content: '';
    display: block;
    height: 0.0625rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform-origin: center center;
    transition: transform .2s ease;
    width: 50%;
}

#navContainer li>span::before {
    transform: translate(-50%, -50%) rotate(90deg);
}

#navContainer li>span::after,
#navContainer li.open>span:before {
    transform: translate(-50%, -50%) rotate(0deg);
}

/* ANCILLARY ------------------------------ */
#ancillary {
    display: block;
}

#ancillary .search {
    border-top: 1px solid rgba(255, 255, 255, 0.125);
    display: block;
    overflow: auto;
    padding: 1rem;
}

#ancillary .search input[type="text"] {
    width: calc(100% - 7rem);
}

#ancillary .search input[type="submit"] {
    padding-inline: .5em;
    width: 6.5rem;
}

/* MOBILE NAV ------------------------------ */
#mobilenav {
    align-items: center;
    background: var(--dark-purple);
	border-bottom: 1px solid rgba(255,255,255,0.125);
    display: flex;
    justify-content: center;
	margin: 0;
    position: sticky;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 1;
}

#mobilenav :is(a, button) {
	background: none;
    color: #FFF;
    flex: 1 1 auto;
    line-height: 2.25;
}

#mobilenav :is(a, button):is(:hover, :focus-visible) {
    background: var(--bright-purple);
}

#mobilenav a {
    border-right: 1px solid rgba(255,255,255,0.125);
}

#mobilenav button svg {
    fill: #FFF;
    margin-left: 0.25em;
    pointer-events: none;
    position: relative;
    top: .25em;
    width: 1em;
}



/* MAIN ------------------------------ */
main {
    padding: 0 var(--gutter) 3em;
}

.twoCol,
.threeCol,
.resCol {
    column-rule: 1px outset rgba(0, 0, 0, .15);
    column-width: 13em;
    columns: auto;
}

.content ul li {
    padding-left: 1.5em;
}

:is(.formTable, .simpleTable),
:is(.formTable, .simpleTable) table {
    display: block;
    width: 100%;
}

:is(.formTable, .simpleTable) tbody {
    display: block;
}

:is(.formTable, .simpleTable) tr {
    display: block;
}

:is(.formTable, .simpleTable) td {
    display: block;
    padding: 0;
    width: 100%;
}

:is(.formTable, .simpleTable) :is([type="text"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"], textarea, select) {
    margin-bottom: 1em;
}

:is(.formTable, .simpleTable) table td+td {
    padding-left: 0 !important;
}

.photoright {
    margin: 0 0 .75em 1em;
}

.photoleft {
    margin: 0 1em .75em 0;
}

.white-box {
    padding: 1em;
    width: 100%;
}

.white-box>table td {
    padding: 0.5em 0;
}

.white-box>table td+td {
    padding-top: 0;
}

.white-box>table td td {
    padding-left: 0;
    padding-right: 0;
}

main .dashboardList li {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    margin: 0;
    padding: 0;
}

main .dashboardList li+li {
    margin-top: 1em;
    padding-top: 1em;
}

.white-box+.dashboardOptions {
    margin-top: -2em;
}

.dashboardOptions a {
    display: block;
    display: block;
    padding: 0.25em 0;
    width: 100%;
}

.requisitionDesc {
    margin: 1em 0;
}

.sigPad {
    overflow: auto;
    width: 100% !important;
}

/* Flex */
.flex {
    display: flex;
    flex-wrap: wrap;
}

.flex.space-between {
    justify-content: space-between;
}

/* Gap */
.gap-4 {
    gap: 4px;
}

.gap-8 {
    gap: 8px;
}

.gap-10 {
    gap: 10px;
}

.gap-14 {
    gap: 14px;
}

.gap-2em {
    gap: 2em;
}

.flex .mobile-width-auto {
    width: auto;
}

.flex.mobile-row {
    flex-direction: row;
}

.flex.mobile-column {
    flex-direction: column;
}

.flex.mobile-column-reverse {
    flex-direction: column-reverse;
}

div.tab {
    overflow: auto;
    width: 100%;
}

main a+ul.tabs {
    clear: both;
    float: left;
    margin-top: 1em;
}

main ul.tabs {
    clear: both;
    overflow: auto;
    white-space: nowrap;
}

main ul.tabs li a {
    font-size: 0.75rem;
    line-height: 2.5rem;
}

table.listTable th {
    white-space: nowrap;
}

.mobileMarginBottom {
    margin-bottom: 1em;
}

.repeater {
    margin-bottom: 1em;
}

.repeater label {
    width: 100%;
}

main :is(.overflowTable, div.tab) {
    background: #fff;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    overflow: auto;
    padding: 0;
    width: calc(100% + (var(--gutter) * 2));
}

main :is(.overflowTable, div.tab)>table th {
    position: sticky;
    top: 0;
}

main :is(.overflowTable, div.tab)>table th:first-child,
main :is(.overflowTable, div.tab)>table td:first-child {
    padding-left: var(--gutter);
}

main :is(.overflowTable, div.tab)>table td:first-child td {
    padding-left: 0;
}

main :is(.overflowTable, div.tab)>table th:last-child,
main :is(.overflowTable, div.tab)>table td:last-child {
    padding-right: var(--gutter);
}

main :is(.overflowTable, div.tab)>table td:last-child td {
    padding-right: 0;
}

main :is(.overflowTable, div.tab)>.listTable td:first-child {
    min-width: 200px;
}

label {
    display: block;
    width: 100%;
	padding: 0 !important;
}

.table-overflow {
	overflow: auto;
}

.table-overflow table {
	white-space: nowrap;
}


/* LOGIN PAGE ------------------------------ */
#loginPage {
    background: #F3F5F8;
}

main .loginTable .formTable td {
    text-align: center !important;
}

/* content */
#content table {
    border-bottom: solid 1px #ccc;
    width: 100%;
}

#content table th,
#content table td {
    padding: 5px;
    text-align: center;
    vertical-align: top;
}

#content table th.left,
#content table td.left {
    text-align: left;
}

#content table th:last-child,
#content table td:last-child {
    text-align: right;
}

#content table th:first-child,
#content table td:first-child {
    text-align: left;
}

#content table tr:first-child td {
    border-top: solid 1px #ccc;
}

#content table tr th {
    border-bottom: solid 1px #ccc;
}

#content table tr:nth-child(even) {
    background-color: #eee;
}

#content Table em {
    color: #999;
    display: block;
    font-size: .9em;
}

img[alt="del"] {
    height: 35px;
    opacity: .2;
    padding: 5px;
    width: 35px;
}

.prevNext .formButton {
    float: right;
    margin-bottom: 20px;
}

.prevNext .formButton+.formButton {
    float: left;
}

.grayBox {
    background-color: #e5e5e5;
    border: 2px solid #d8d8d8;
    border-radius: 10px;
    margin: 0 0 20px;
    overflow: auto;
    padding: 20px;
}

.grayBox input,
.grayBox textarea {
    width: 100%;
}

.divTable {
    display: table;
    width: 100%;
}

.divTable div {
    display: table-row;
}

.divTable div div {
    display: table-cell;
	padding: 0 10px 10px 0;
}

.divTable div div:first-child {
    text-align: right;
}

.status {
    color: #900;
}

/* Table of Contents */
#table-of-contents {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin-inline: calc(var(--gutter) * -1);
    max-height: 50vh;
    overflow: auto;
    padding: 1em;
    position: sticky;
    top: 0;
}

#table-of-contents .toc-toggle {
    text-align: center;
    width: 100%;
}

dialog .toc-wrapper>ul>li.on>.section-header {
    position: sticky;
    top: 1.75em;
    z-index: 1;
}

/* Policy */
#policy {
    gap: 0;
}

#policy .policy-meta {
    background: var(--light-purple);
    gap: 0.25em;
    margin-inline: calc(var(--gutter) * -1);
    padding: 1em 1em 0;
}

#policy .policy-meta .manageLinks {
    gap: 0 1em;
    justify-content: flex-start;
    margin: 0;
    width: 100%;
}

#policy h1 {
    margin-bottom: 0;
    padding: 0.5rem 1rem 1rem;
}

#policy .policy.white-box.content {
    border-bottom: 1px solid var(--hr);
    border-radius: 0;
    box-shadow: none;
    margin: 0 calc(var(--gutter) * -1) -3em;
    padding: 1.5em var(--gutter) 3em;
    width: calc(100% + var(--gutter) * 2);
}

.policy-table {
	background:#fff;
    border-bottom: 1px solid var(--hr);
    border-radius: 0;
    box-shadow: none;
    margin: 0 calc(var(--gutter) * -1) -3em;
    padding: 1.5em var(--gutter) 3em;
    width: calc(100% + var(--gutter) * 2);
}

.policy-table .tableOfContents-wrap {
    border-radius: 0;
    box-shadow: none;
	overflow: auto;
}

.policy-table .tableOfContents-wrap td {
    max-width: 75vw;
}

nav.breadcrumb ol {
	flex-direction: column;
	gap: 0.5em;
}

nav.breadcrumb ol li {
	align-items: flex-start;
	display: flex;
	line-height: 1.25em;
}



/* FOOTER ------------------------------ */
body>footer .wrap {
    align-content: stretch;
    align-items: stretch;
    display: flex;
    flex-direction: column;
}

#web-solutions {
    order: 1;
}

body>footer .wrap nav a+span:before {
    content: "|";
    margin: 0 0.5em;
}