@charset "UTF-8";

/* Web Solutions 4.0 Compatible */

/* MOBILE VARIABLES AND BASE ELEMENTS ---------------------------------- */

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

html {
    scroll-padding-top: 3rem;
}

.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:before {
    background-color: #000;
    content: '';
    display: block;
    height: 100vh;
    height: 100dvh;
    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 {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem;
}

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

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

body > header .header-top #brand .tool-name {
    color: var(--dark-purple);
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0;
}

body > header .header-top .account-links {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 50%;
    min-width: 0;
    text-align: right;
}

body > header .header-top .account-links a {
    font-size: 0.875em;
    overflow-wrap: anywhere;
}




/* SLIDE-OUT NAVIGATION AND SUBMENUS ----------------------------------- */

#navContainer {
    -webkit-overflow-scrolling: touch;
    background-color: var(--dark-purple);
    bottom: 0;
    left: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: left 200ms ease, visibility 0ms linear 200ms;
    visibility: hidden;
    width: 75%;
    z-index: 3;
}

body.slideNav #navContainer {
    left: 25%;
    pointer-events: auto;
    transition: left 200ms ease;
    visibility: visible;
}

#navContainer nav {
    background: none;
    display: block;
    margin: 0;
}

#navContainer ul {
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

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

#navContainer li li {
    border: 0;
}

#navContainer :is(a, .toggleNav) {
    color: #CCC;
    display: block;
    float: none;
    font-size: 1rem;
    line-height: 1.4;
    min-height: 2.75rem;
    padding: 0.675rem 1rem;
    width: 100%;
}

#navContainer .toggleNav {
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    padding-top: max(0.675rem, env(safe-area-inset-top));
    text-align: left;
    text-transform: none;
}

#navContainer .menu-item-has-children > a {
    padding-right: 3.75rem;
}

#navContainer li.on > a {
    background-color: var(--bright-purple);
    color: #FFF;
}

#navContainer li.open {
    background-color: rgba(0,0,0,0.25);
}

#navContainer li > button {
    background: rgba(255,255,255,0.5);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    display: block;
    height: 2.75rem;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 2.75rem;
}

#navContainer .menu-item-has-children > div {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 200ms ease;
}

#navContainer .menu-item-has-children.open > div {
    grid-template-rows: 1fr;
}

#navContainer ul ul {
    font-size: 0.8em;
    min-height: 0;
    overflow: hidden;
}

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

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

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

#navContainer li > button::after,
#navContainer li.open > button::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: stretch;
    background-color: var(--dark-purple);
    display: flex;
    justify-content: center;
    padding: 0;
    position: sticky;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 1;
}

#mobilenav > ul {
    display: flex;
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
    padding: 0;
}

#mobilenav > ul > li {
    display: flex;
    flex: 1 1 auto;
    float: none;
    min-width: 0;
}

#mobilenav :is(a, button) {
    align-items: center;
    color: #FFF;
    display: flex;
    float: none;
    font-size: 0.875em;
    justify-content: center;
    line-height: 1.25;
    min-height: 2.75rem;
    padding: 0.625rem 0.375rem;
}

#mobilenav a {
    border-right: 1px solid rgba(255,255,255,0.25);
    flex: 1 1 auto;
    width: 100%;
}

#mobilenav button {
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    flex: 0 0 auto;
    gap: 0.375rem;
    padding-inline: 0.75rem;
}

#mobilenav button svg {
    fill: #FFF;
    height: 1em;
    pointer-events: none;
    width: 1em;
}




/* MAIN ---------------------------------------------------------------- */

main {
    padding-bottom: 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;
}




/* STACKED FORM TABLES ------------------------------------------------- */

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

:is(.formTable, .simpleTable) tbody,
: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;
}




/* CONTENT PANELS AND DASHBOARD LISTS ---------------------------------- */

.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 1em;
}

.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;
    padding: 0.25em 0;
    width: 100%;
}

.requisitionDesc {
    margin: 1em 0;
}

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




/* FLEX LAYOUT UTILITIES ----------------------------------------------- */

.flex {
    display: flex;
    flex-wrap: wrap;
}

.flex > * {
    min-width: 0;
}

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

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

.justify-content-center {
    justify-content: center;
}

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




/* SPACING UTILITIES --------------------------------------------------- */

.gap-4 {
    gap: 4px;
}

.gap-8 {
    gap: 8px;
}

.gap-10 {
    gap: 10px;
}

.gap-14 {
    gap: 14px;
}

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

.gap-30 {
    gap: 1.875em;
}

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




/* TABS AND REPEATERS -------------------------------------------------- */

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%;
}




/* FORM COLUMN WIDTHS -------------------------------------------------- */

.form-flex :where(.half, .third) {
    width: 100%;
}

.form-flex .quarter {
    width: calc(50% - .5em);
}

.form-flex > :where(.half, .third, .quarter, .full) {
    float: none;
    margin-inline: 0;
    min-width: 0;
}

:is(.formTable, .simpleTable) :is(input, select, textarea) {
    max-width: 100%;
}




/* RESPONSIVE TABLES --------------------------------------------------- */

.table-wrap {
    margin-inline: calc(-1 * var(--ws-gutter, var(--gutter)));
}

.table-wrap::before {
    left: var(--ws-gutter, var(--gutter));
}

.table-wrap::after {
    right: var(--ws-gutter, var(--gutter));
}

.table-wrap table {
    margin-inline: var(--ws-gutter, var(--gutter));
    width: calc(100% - var(--ws-gutter, var(--gutter)) - var(--ws-gutter, var(--gutter)));
}




/* REDUCED MOTION ------------------------------------------------------ */

@media (prefers-reduced-motion:reduce) {

    body > header::before,
    #navContainer,
    #navContainer .menu-item-has-children > div {
        transition: none;
    }
}




/* LEGACY CONTENT COMPONENTS ------------------------------------------- */

#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;
}




/* STUDENT TEST TAKING ------------------------------------------------- */
.test-navigation {
    align-items: center;
    flex-direction: column;
}

.test-taking .test-review .button {
    max-width: 100%;
    text-align: center;
    width: 100%;
}

/* 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;
}




/* SITE ADAPTATIONS ---------------------------------------------------- */

/* Shortcut bar: up to three shortcuts plus Menu on one row at 320px. */
#mobilenav {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: flex-end;
}

#mobilenav > ul {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    padding: 0;
}

#mobilenav > ul > li {
    flex: 1 1 auto;
}

#mobilenav > ul > li[hidden] {
    display: none !important;
}

#mobilenav a,
#mobilenav > .toggleNav {
    white-space: nowrap;
}

#mobilenav a {
    padding-inline: 0.625rem;
}

#mobilenav > .toggleNav {
    flex: 0 0 auto;
    margin-left: auto;
    min-height: 44px;
    min-width: 44px;
}

#mobilenav > .toggleNav img {
    filter: invert(1);
    height: 1rem;
    width: 1rem;
}

#mobilenav li.on > a {
    background-color: var(--bright-purple);
}

/* Active-state colors apply to the active item's own link only. */
#navContainer li.on > a {
    background-color: var(--bright-purple);
    color: #FFF;
}

#navContainer li:not(.on) > div li:not(.on) > a {
    background: none;
    color: #CCC;
}

#navContainer .toggleNav {
    color: #FFF;
    font-weight: 700;
}

#navContainer li > button:focus-visible,
#navContainer :is(a, .toggleNav):focus-visible {
    outline: 2px solid #FFF;
    outline-offset: -4px;
}

#navContainer li.nav-notice > a {
    font-style: italic;
}

/* Brand and account links. */
body > header .header-top #brand .tool-name {
    color: var(--dark-purple);
    font-weight: 700;
}

body > header .header-top .account-links a {
    color: var(--dark-purple);
    white-space: normal;
}

/* Layout utilities. */
#login-blocks > .half {
    max-width: none;
    width: 100%;
}

.form-flex :is(.half, .third) {
    width: 100%;
}

.form-flex .quarter {
    width: calc(50% - .5em);
}

.referral-columns {
    flex-direction: column;
}

.referral-columns > .referral,
.referral-columns > .referralNotes {
    flex: 1 1 auto;
    width: 100%;
}

.manageLinks.flex {
    align-items: stretch;
}

.manageLinks.flex > a {
    align-self: flex-start;
}

#mobilenav > ul > li > a {
    flex: 1 1 auto;
    width: auto;
}

/* Button-style tabs: keep the action button above the tabs, on the right. */
.tab-toolbar > .manageLinks {
    align-self: flex-end;
    order: -1;
}

/* Homepage: full-width sections and compact status lists. */
.home-dashboard {
    align-items: stretch;
}

.home-dashboard > * {
    width: 100%;
}

main .dashboardList li {
    align-items: stretch;
    gap: 0;
}

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

/* Header: hide the Log Out and Change Password icons on small screens. */
body > header .account-links :is(.fa-sign-out, .fa-key) {
    display: none;
}