@import url(https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap);

:root {
    --border-radius: 6px;

    /* Fonts */
    --header-font: 'Rubik', Arial, sans-serif;
    --body-font: 'Rubik', Arial, sans-serif;

    /* Base */
    --base-black: black;
    --base-white: white;

    /* Gray scale */
    --gray-50: #F8FBFC;
    --gray-100: #F2F6F8;
    --gray-200: #E1EBEF;
    --gray-300: #CBDAE1;
    --gray-400: #94ACB8;
    --gray-500: #657F8B;
    --gray-600: #485F6A;
    --gray-700: #344B56;
    --gray-800: #1D313A;
    --gray-900: #0F2129;
    --gray-950: #021117;

    /* Primary */
    --primary-700: #004463;
    --primary-400: #4D7C92;

    /* Clickable */
    --clickable-900: #1E3A8A;
    --clickable-700: #1D4ED8;
    --clickable-500: #3B82F6;
    --clickable-300: #93C5FD;
    --clickable-100: #DBEAFE;

    /* Shadows */
    --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
    --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
    --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.06), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.04), 0px 4px 6px -2px rgba(16, 24, 40, 0.04);
    --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.10);
    --shadow-menu: 0px 8px 48px -8px rgba(16, 24, 40, 0.2);

    /* Accent */
    --blue: #2577f4;

    /* Semantic - Content */
    --content-dark: var(--gray-900);
    --content-light: var(--base-white);

    /* Semantic - Clickable */
    --clickable-dark-100: var(--clickable-900);
    --clickable-dark-200: var(--clickable-700);
    --clickable-light-100: var(--clickable-100);
    --clickable-light-200: var(--clickable-300);

    /* Semantic - Error */
    --error-dark: #C20A0A;
    --error-dark-200: #910808;
    --error-light: #FEECEC;
    --error-light-200: #88D8BD;

    /* Semantic - Attention */
    --attention-dark: #9B6C00;
    --attention-dark-200: #684100;
    --attention-light: #FDFAE7;
    --attention-light-200: #F7E89A;

    /* Semantic - Success */
    --success-dark: #25745A;
    --success-dark-200: #1A513F;
    --success-light: #D5F1E8;

    /* Semantic - Background/Surface */
    --background: var(--base-white);
    --surface: var(--base-white);
    --surface-200: var(--gray-50);
    --surface-300: var(--gray-100);

    /* Semantic - UI Gray */
    --ui-gray-100: var(--gray-900);
    --ui-gray-200: var(--gray-500);
    --ui-gray-300: var(--gray-400);
    --ui-gray-400: var(--gray-200);
    --ui-gray-500: var(--gray-50);
}

/* 
To-do
- Additional palette colors (commented out now)
- content colors, per-color (?)
- spacing variables (?)
- sizing in rems (?)
 */

body, th, td, input, select, textarea, button {
    color: var(--content-dark);
    font-size: 12px;
    font-family: var(--body-font);
}

* {
    -webkit-tap-highlight-color: transparent;
}

/*These two rules allow for the scrolling headers to work correctly and also allow the left menu to stretch to the browser's full height on pages which would otherwise be too short.*/
html {
    height: 100%;
}

body {
    min-height: 100%;
}

body {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--clickable-dark-100);
}

a:not([href]) {
    cursor: pointer;
    user-select: none;
}

h1, h2, h3, h4 {
    font-family: var(--header-font);
    font-weight: 400;
    padding: 0;
    margin: 0;
}

h1 {
    font-size: 24px;
    padding-bottom: 5px;
    font-size: 20px;
    letter-spacing: .1px;
}

h2, .h2 {
    font-size: 20px;
    margin-top: 1px;
    margin-bottom: 1px;
}

h3, .h3 {
    font-size: 16px !important;
}

h4, .h4 {
    font-size: 14px;
}

h1, h2, h3, h4, .h2:not(button):not(input[type=button]):not(a.button), .h3:not(button):not(input[type=button]):not(a.button) {
    line-height: 150%;
}

.contentOuterOuter {
    flex: 1 0 auto;
    display: flex;
}

.contentOuter {
    flex: 1 1 auto;
}

.h2Row {
    display: flex;
    align-items: center;
}

.h2Row {
    margin-bottom: 10px;
}

.h2Row, .contentOuter > h2, .borderBottom {
    border-bottom: 1px solid #0000000a;
}

.h2Row > h2, .contentOuter > h2 {
    font-size: 22px;
    font-weight: 300;
    letter-spacing: .2px;
    padding: 4px 12px 4px 0;
}

.h2Row > h2 {
    flex: 1 1 auto;
    max-width: 100%;
}

.h2Row > .right > a.button:not(:last-child) {
    margin-right: 5px;
}

.h2Row > .right > .popupMenu {
    width: 150px;
}

table {
    border-collapse: collapse;
}

table.widthAuto {
    width: auto;
}

th, td {
    padding: 0;
}

th {
    text-align: left;
}

table.grid, ul.table.grid {
    width: 100%;
}

ul.table.grid, ul.undecoratedList, li.undecoratedList {
    list-style: none;
    padding: 0;
    margin: 0;
}

table.grid > tbody, ul.table.grid > tbody {
    background-color: white; /*needed for when a grid expands beyond the width of a divBox2.*/
}

/*header, data, and footer cells*/
table.grid > * > tr > *, ul.table.grid > li > div {
    padding: 6px;
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: var(--gray-300);
    vertical-align: middle;
}

table.grid, ul.table.grid {
    border-collapse: separate;
    border-spacing: 0;
}

:is(table.grid:first-child, :not(.resultsAndPaging) + table.grid) > *:first-child > tr:first-child > *:first-child, :is(ul.table.grid:first-child, :not(.resultsAndPaging) + ul.table.grid) > li:first-child > div:first-child {
    border-start-start-radius: var(--border-radius);
}

:is(table.grid:first-child, :not(.resultsAndPaging) + table.grid) > *:first-child > tr:first-child > *:last-child, :is(ul.table.grid:first-child, :not(.resultsAndPaging) + ul.table.grid) > li:first-child > div:last-child {
    border-start-end-radius: var(--border-radius);
}

:is(table.grid:first-child, :not(.resultsAndPaging) + table.grid) > *:last-child > tr:last-child > *:first-child, :is(ul.table.grid:first-child, :not(.resultsAndPaging) + ul.table.grid) > li:last-child > div:first-child {
    border-end-start-radius: var(--border-radius);
}

:is(table.grid:first-child, :not(.resultsAndPaging) + table.grid) > *:last-child > tr:last-child > *:last-child, :is(ul.table.grid:first-child, :not(.resultsAndPaging) + ul.table.grid) > li:last-child > div:last-child {
    border-end-end-radius: var(--border-radius);
}

table.grid > * > tr > *:first-child, ul.table.grid > li > div:first-child {
    border-left-width: 1px;
}

table.grid > * > tr > *:last-child, ul.table.grid > li > div:last-child {
    border-right-width: 1px;
}

table.grid > *:last-child > tr:last-child > *, ul.table.grid > li:last-child > div {
    border-bottom-width: 1px;
}

/*header and footer cells*/
table.grid > thead > tr > *, table.grid > tbody > tr > th, table.grid > tfoot > tr > *, ul.table.grid > li.header > div {
    background-color: var(--ui-gray-400);
    font-weight: 500;
}

td.shaded {
    background-color: var(--ui-gray-400);
}

/*links within header cells*/
table.grid > thead > tr > th a, table.grid > tbody > tr > th a, ul.table.grid > li.header > div a {
    color: black;
    text-decoration: none;
    display: block;
}

.quantity, table.grid > thead > tr > th.quantity, table.grid > tbody > tr > th.quantity, table.grid > tfoot > tr > td.quantity {
    text-align: right;
}

table.grid > tbody > tr.clickable {
    cursor: pointer;
}

/*table.grid>thead>tr:first-child>th:first-child, table.grid>tbody>tr:first-child>th:first-child, table.grid>thead>tr:first-child>td:first-child, table.grid>tbody>tr:first-child>td:first-child, ul.table.grid>li:first-child>div:first-child {
border-top-left-radius:5px;
}

table.grid>thead>tr:first-child>th:last-child, table.grid>tbody>tr:first-child>th:last-child, table.grid>thead>tr:first-child>td:last-child, table.grid>tbody>tr:first-child>td:last-child, ul.table.grid>li:first-child>div:last-child {
border-top-right-radius:5px;
}

table.grid>tbody:last-child>tr:last-child>th:first-child, table.grid>tbody:last-child>tr:last-child>td:first-child, table.grid>tfoot>tr:first-child>th:first-child, table.grid>tfoot>tr:first-child>td:first-child, ul.table.grid>li:last-child>div:first-child {
border-bottom-left-radius:5px;
}

table.grid>tbody:last-child>tr:last-child>th:last-child, table.grid>tbody:last-child>tr:last-child>td:last-child, table.grid>tfoot>tr:first-child>th:last-child, table.grid>tfoot>tr:first-child>td:last-child, ul.table.grid>li:last-child>div:last-child {
border-bottom-right-radius:5px;
}
*/

table.grid.widthAuto {
    width: auto;
}

table.padded > thead > tr > th, table.padded > tbody > tr > td {
    padding: 5px;
}

.formInner input:not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="image"]):not([type="submit"]):not([type="file"]), .formInner textarea {
    width: 100%;
    box-sizing: border-box;
}

a {
    color: var(--clickable-dark-100);
}

a:hover {
    transition: 150ms;
}

ul.table {
    display: table;
    border-collapse: collapse;
}

ul.table > li {
    display: table-row;
}

ul.table > li > div {
    display: table-cell;
}

/*var(--ui-gray-200)*/
.divBox1 {
    background-color: var(--ui-gray-200);
    color: var(--surface);
    border-radius: 5px 5px 0 0;
    margin-top: 24px;
    margin-bottom: 8px;
    padding: 8px;
}

.divBox2 {
    border-color: var(--ui-gray-200);
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-radius: 0 0 5px 5px;
    margin-bottom: 20px;
}

.divBox2, .divBox1 {
    border-radius: 0px;
    border-width: 0px;
    border-color: var(--ui-gray-300);
}

.divBox2 .divBox1, .divBox2 .divBox2 {
    border-color: var(--ui-gray-200);
}

.divBox2 > .divBox1:first-child, .divBox2 > div:first-child > .divBox1:first-child, .divBox2 > p:first-child {
    margin-top: 0;
}

.divBox1.important, .important > div > .divBox1 {
    border-width: 3px;
}

.divBox2 .divBox1, .divBox1, div.divBox1 {
    color: var(--content-dark);
    background-color: rgba(255,255,255,0);
    border: none;
    padding: 0px;
    padding-bottom: 4px;
    margin-bottom: 16px
}

.divBox1 > h2 {
    margin: 0;
}

.divBox {
    border: 1px solid var(--gray-200);
    border-radius: 6px;
}

.divBox.bg {
    background-color: var(--gray-100);
}

.divBox > .divBox1, .divBox > .divBox1.normal {
    margin-top: 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--gray-200);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.divBox > .divBox2 {
    padding: 8px;
    margin-bottom: 0;
}

.divBox h3.divBox1, .divBox .divBox1 h3 {
    color: var(--gray-700);
    font-weight: 400;
    border-bottom: 1px solid var(--gray-100);
}

.margin12 > .divBox1 {
    margin-top: 0;
}

.divBox1.normal {
    background-color: var(--primary-700);
    color: var(--base-white);
    border-radius: 6px;
    padding: 4px 8px;
}

div.divBox1.normal {
    background-color: var(--primary-700);
    border-radius: 6px;
    color: var(--base-white);
    padding: 4px 8px;
}

.divBoxComplete {
    border: 1px solid var(--ui-gray-200);
    border-radius: 5px;
    padding: 5px;
}

input[type=submit], input[type=button], button, a.button, .buttons a, ul.radios > li > label, .popupMenu {
    background-color: var(--surface-200);
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    color: var(--content-dark);
    font-size: 13px;
}

input[type=submit], input[type=button], button, a.button, .buttons a, ul.radios > li > label {
    background-image: none;
    background-size: contain;
    cursor: pointer;
    font-weight: 450;
    padding: 8px 12px;
    min-height: 32px; /*Allow to expand higher if text needs to wrap within a button, for example.*/
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    box-shadow: var(--shadow-xs);
}

a.fa-solid:hover {
    text-decoration: none;
}

a.button.fa-solid.fontWeightOverride, input.fa-solid.fontWeightOverride { /*Only needed for some Font Awesome icons while used on <a> (not <button>) with an abnormal font-weight*/
    font-weight: 600;
}

button.small {
    font-size: 12px;
}

a.button, .buttons a, a.button:hover, .buttons a:hover {
    text-decoration: none;
}

button.primary, input[type=submit].primary, a.button.primary {
    color: var(--clickable-dark-100);
    background-color: var(--clickable-light-100);
    border-color: var(--clickable-light-200);
}

button.primary:hover, input[type=submit].primary:hover, a.button.primary:hover {
    background-color: var(--clickable-light-200);
}

button.delete, input[type=submit].delete {
    color: var(--error-dark);
    background-color: var(--error-light);
}

button.delete:hover, input[type=submit].delete:hover {
    color: var(--error-dark);
}

button.trans, input[type=button].trans, input[type=submit].trans, .button.trans {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}

input[type=submit]:hover, input[type=button]:hover, button:hover, a.button:hover, .buttons a:hover,
.actionsAvailableToYou button:hover,
.actionsAvailableToYou input[type=submit]:hover,
ul.radios > li > label:hover {
    background-color: var(--gray-100);
    border-color: var(--gray-400);
    transition: 150ms;
}

button > span.fa-solid, a.button > span.fa-solid, .buttons a > span.fa-solid, ul.radios > li > label > span.fa-solid {
    color: var(--gray-400);
}

input[type=submit]:hover > span.fa-solid, input[type=button]:hover > span.fa-solid, button:hover > span.fa-solid, a.button:hover > span.fa-solid, .buttons a:hover > span.fa-solid, ul.radios > li > label:hover > span.fa-solid {
    color: var(--gray-500);
}

input[type=submit][disabled], input[type=button][disabled], button[disabled], button[disabled]:hover {
    color: var(--ui-gray-200);
    background-color: var(--ui-gray-400);
    border-color: var(--ui-gray-300);
    cursor: default
}

ul.radios {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul.radios > li {
    float: left;
    position: relative;
    margin-right: 5px
}

ul.radios > li:last-child {
    margin-right: 0
}

ul.radios > li > label {
    display: block;
    position: relative;
    /*z-index: 2;*/ /*Why was this necessary?*/
    font-size: 125%;
    text-align: center;
    border-radius: 25px;
    cursor: pointer
}

ul.radios > li > input[type="radio"] {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    margin: 0;
    /*z-index: 1;*/ /*Why was this necessary?*/
    -webkit-appearance: none; /*Safari renders this incorrectly.*/
}

ul.radios > li > input[type="radio"]:checked + label {
    color: white;
    background-color: var(--gray-500);
}

.menuParent > * {
    margin: 5px 5px 5px 0;
}

input, select, textarea {
    padding: 2px 8px 2px 8px;
}

/*#e0e0e0*/
input[type="submit"], input[type="button"] {
    -webkit-appearance: none;
}

table.alternatingBGs0 > tbody > tr, table.alternatingBGs1 > tbody > tr, .resultsAndPaging, :not(.pagingAndResults) > .paging, ul.alternatingBGs0 > li > div {
    background-color: var(--ui-gray-500);
}

table.alternatingBGs0 > tbody > tr:nth-child(2n), table.alternatingBGs1 > tbody > tr:nth-child(2n+1), ul.alternatingBGs0 > li:nth-child(2n) > div {
    background-color: var(--background);
}

.lightGrayBG {
    background-color: var(--ui-gray-400);
}

.lightGrayColor {
    color: var(--ui-gray-200);
}

/*#e1f4ff*/
table.grid > tbody > tr.clickable:hover {
    background-color: #e1f4ff;
}

table.grid > tbody > tr.clickable.active {
    background-color: var(--clickable-light-200);
}

.headerCellInner > img.headerFull {
    width: 100%;
    display: block;
}

.headerCellInner > img.headerSmall {
    width: 100%;
    display: none;
}

@media (max-width:740px) {
    .headerCellInner > img.headerFull {
        display: none;
    }

    .headerCellInner > img.headerSmall {
        display: block;
    }
}

.copyright {
    font-size: 8px;
    padding: 10px;
    text-align: center;
}

a.plain, a.plain:hover {
    color: inherit;
    text-decoration: none;
    cursor: text
}

.errorMessageGood {
    color: #007000;
    font-weight: bold;
}

.errorMessageBad, a.plain.errorMessageBad {
    color: red;
    font-weight: bold;
}

input:not([type=button]):not([type=checkbox]):not([type=radio]):not([type=image]):not([type=submit]):not([type=file]):not(.ag-input-field-input), select, textarea {
    border: 1px solid var(--gray-300);
    box-sizing: border-box;
    padding: 4px 8px;
    border-radius: 6px;
    min-height: 28px;
    background-color: var(--gray-50);
    font-size: 13px;
    font-weight: 450;
    box-shadow: var(--shadow-xs);
}

input:not([type=button]):not([type=checkbox]):not([type=radio]):not([type=image]):not([type=submit]):not([type=file]):not(.ag-input-field-input):hover, select:hover, textarea:hover {
    transition: 150ms;
    background-color: var(--gray-200);
    border: 1px solid var(--gray-400);
}

input:not([type=button]):not([type=checkbox]):not([type=radio]):not([type=image]):not([type=submit]):not([type=file]).jobEditableFieldField {
    min-height: 0px;
}

input:hover, textarea:hover, select:hover {
    background-color: var(--ui-gray-500);
}

select {
    cursor: pointer;
}

input[type="date"]:hover {
    cursor: text;
}

input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

@media only screen and (max-width : 640px) {
    input, select, textarea {
        font-size: 16px;
        font-weight: 300;
    }
}

table.searchGrid input:not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="image"]):not([type="submit"]):not([type="file"]), table.searchGrid select {
    width: 100%;
    box-sizing: border-box;
}

.actionsAvailableToYou button, .actionsAvailableToYou input[type=submit] {
    font-weight: 500;
    width: fit-content;
}

.important input[type="submit"], .actionsAvailableToYou button, .actionsAvailableToYou input[type="submit"] {
    font-size: 16px;
}

.important > div > .divBox2 {
    border-width: 0 3px 3px 3px;
}

.autoFloatLeft, .autoFloatRight {
    float: left;
    width: 50%;
}

.autoFloatLeft {
    box-sizing: border-box;
    padding-right: 5px;
}

.search.small input:not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="image"]):not([type="submit"]):not([type="file"]) {
    display: inline-block;
    margin-right: 2px;
    width: 198px;
    height: 20px;
    box-sizing: border-box;
}

.pagerRow {
    background-color: transparent !important;
}

.pagerRow table {
    margin: 0 auto;
}

.pagerRow td {
    padding: 0 1px;
}

.borderRadius {
    border-radius: 5px;
}

iframe {
    display: block;
}

textarea {
    width: 100%;
    box-sizing: border-box;
    display: block;
    resize: none;
    min-height: 56px;
}

textarea.comments {
    max-width: 550px;
}

.passwordOrUserNamePage {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
}

.passwordOrUserNamePage div.formInner {
    width: 300px;
    margin: 0 auto;
}

.passwordOrUserNamePage p {
    margin: 0;
}

.passwordOrUserNamePage .formInner p {
    margin: 5px 0;
}

.passwordOrUserNamePage form div.row label {
    float: none;
    font-weight: bold;
}

.passwordOrUserNamePage form div.row div {
    padding: 0;
}

.passwordOrUserNamePage form div.row {
    margin-bottom: 5px;
}

.h1AndJobSearch {
    display: flex;
    align-items: center;
    padding-top: 4px;
    padding-bottom: 4px;
}

.h1AndJobSearch.margin12 {
    margin-top: 5px;
    margin-bottom: 5px;
}

.h1AndJobSearch > h1 {
    padding-bottom: 0
}

#jobSearchQuery {
    width: 130px;
    height: 28px;
    padding-right: 14px;
    margin: 0 -14px 0 0;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--content-dark);
}

#jobSearchQuery::placeholder {
    color: black;
    font-style: italic;
}

#jobSearchQuery:-ms-input-placeholder {
    color: black;
    font-style: italic;
}

#jobSearchQuery::-ms-clear {
    display: none;
}

#jobSearchQuery::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

#jobSearchButton {
    display: block;
    height: 26px;
    width: 26px;
    padding: 0;
    position: relative;
    z-index: 1;
}

input.noSpinButton::-webkit-outer-spin-button, input.noSpinButton::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input.noSpinButton[type="number"] {
    -moz-appearance: textfield;
}

input.noClearButton::-ms-clear {
    display: none;
}

.padding {
    padding: 5px;
}

.padding10 {
    padding: 10px;
}

.padding0 {
    padding: 0 !important;
}

.paddingTop {
    padding-top: 5px;
}

.paddingRight {
    padding-right: 5px;
}

.paddingBottom {
    padding-bottom: 5px;
}

.paddingLeft {
    padding-left: 5px;
}

.margin {
    margin: 5px;
}

.margin12 {
    margin: 12px;
}

.marginTop {
    margin-top: 5px;
}

.marginBottom {
    margin-bottom: 5px;
}

.marginTopBottom {
    margin-top: 5px;
    margin-bottom: 5px;
}

.marginLeft {
    margin-left: 5px;
}

.marginRight {
    margin-right: 5px;
}

.overflowAuto {
    overflow: auto;
}

/*.maxWidth900 {
max-width:900px;
}
*/

dialog {
    border-width: 0;
    padding: 0;

    & > .dialogFlexParent {
        height: 100%;
        display: flex;
        flex-direction: column;

        & > .dialogTitle {
            flex: 0 1 auto;
            display: flex;
            background-color: white;
            border-bottom: 1px solid var(--gray-200);
            box-shadow: var(--shadow-md);
            color: var(--gray-900);
            align-items: center;
        }

        & button.back {
            margin-right: 10px;
        }

        & .dialogContent, & .dialogBottom {
            padding: 10px;
        }

        & > .dialogContent, & > form {
            flex: 1 0 auto;
            overflow: auto;
        }

        & .dialogContent.small {
            padding: 10px 65px;
        }

        & .dialogBottom {
            flex: 0 1 auto;
            border-top: 1px solid var(--ui-gray-300);
            background-color: var(--ui-gray-500);
            box-shadow: rgba(0, 0, 0, 0.15) 0 -5px 5px -5px;
        }
    }
}

dialog.rightDialog {
    margin-right: 0;
    margin-top: 0;
    height: 100%;
    max-height: 100%;
    animation: showDialogFromRight .3s ease normal;
}

dialog.rightDialog form {
    & input[type=text], & select {width:100%}
}

.workflowArrows {
    font-size: 0;
    overflow: auto;
    white-space: nowrap;
    margin: 10px 0;
}

/*
.workflowArrows>div {
height:64px;
display:inline-block;
}

.workflowArrows>div>img, .workflowArrows>div>div {
height:100%;
display:inline-block;
vertical-align:top;
}

.workflowArrows>div>div>div {
font-size:14px;
padding-top:25px;
}

.workflowArrows>div>div>div>div {
font-size:11px;
}

*/
.workflowArrows > div, .workflowArrows > div > div {
    display: inline-block;
}

.workflowArrows > div {
    margin-right: -26px;
}

.workflowArrows > div:last-child {
    margin-right: 0;
}

.workflowArrows > div > div.left > div.top, .workflowArrows > div > div.left > div.bottom, .workflowArrows > div > div.right {
    border-style: solid;
    border-color: transparent;
    color: transparent;
}

.workflowArrows > div > div.left > div.top {
    border-width: 32px 0 0 32px;
}

.workflowArrows > div > div.left > div.bottom {
    border-width: 32px 32px 0 0;
}

.workflowArrows > div > div.middle {
    height: 64px;
    font-size: 14px;
    vertical-align: top;
    padding-left: 5px;
}

.workflowArrows > div > div.middle > div {
    padding-top: 24px;
}

.workflowArrows > div > div.middle > div > div {
    font-size: 11px;
}

.workflowArrows > div > div.middle.pastOrFuture > div {
    color: #474747;
}

.workflowArrows > div > div.middle.pastOrFuture > div > div.status {
    color: #8a8a8a;
}

.workflowArrows > div > div.right {
    border-width: 32px 0 32px 32px;
}

.topMenuTopLevelItem {
    padding: 5px;
}

.topSubMenuItem {
    padding: 2px;
}

.dashboardFilters select {
    width: 100%;
    box-sizing: border-box;
}

.dashboardFilters > div {
    display: inline-block;
    vertical-align: top;
    width: 280px;
    padding: 0 20px 5px 0;
}

.dashboardFilters input[type="checkbox"] {
    margin-left: 0;
}

.dashboardFilters input[type="checkbox"] + label {
    position: relative;
    top: -2px;
    left: -3px;
}

.actionsAvailableToYou .divBox2 {
    overflow: hidden;
}

.actionsAvailableToYou button, .actionsAvailableToYou input[type="submit"] {
    display: block;
    width: 285px;
    margin-bottom: 5px;
}

.actionsAvailableToYou img {
    padding: 6px 0 0 6px;
}

table.itemProperties {
    width: 100%;
    max-width: 550px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

table.itemProperties > thead > tr > th, table.itemProperties > tbody > tr > th {
    width: 150px;
}

/*table.itemProperties > tbody > tr > td > span {
    display: block;
    padding: 2px;
}*/

table.itemProperties > tbody > tr > td > input:not([type="button"]):not([type="submit"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), table.itemProperties > tbody > tr > td > select {
    width: 100%;
}

table.itemProperties input[type="text"], table.itemProperties input[type="date"], table.itemProperties textarea, table.itemProperties select {
    width: 100%;
    box-sizing: border-box;
}

table.itemProperties > thead > tr > th, table.itemProperties > tbody > tr > th {
    width: 120px;
}

table.itemProperties > thead > tr > th, table.itemProperties > tbody > tr > th {
    max-width: 120px;
}

table.itemProperties > tbody > tr > td > div.Ball_in_Court, table.itemProperties > tbody > tr > td > div.Status {
    display: block;
    text-align: left;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    margin-inline-start: 0;
}

.expandCollapse.collapsed .expandedContainer, .expandCollapse.expanded .collapsedContainer {
    display: none;
}

.statuses li {
    display: inline-block;
    margin-right: 5px;
}

.statuses li input[type="radio"] {
    margin-top: 1px;
}

.statuses li label {
    font-size: 14px;
    vertical-align: top;
}

.rfv {
    color: red;
    font-weight: bold;
}

.calendarExpansion ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.stepsRadioButtonList span {
    display: block;
    overflow: hidden;
}

.stepsRadioButtonList input, .stepsRadioButtonList label {
    float: left;
}

.stepsRadioButtonList label {
    padding: 3px 4px 0;
}

.fileUploader {
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    box-shadow: 0px 1px 2px 0px #1018280f;
}

/* *:not(td.Replace) > .fileUploader {
    display: inline-block;
}*/

.fileUploader label {
    padding: 5px 5px 5px 20px;
}

.fileUploader label:before {
    color: var(--gray-500);
    content: '\f07b';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    margin-left: -15px;
}

.fileUploader .status {
    padding: 0 5px 5px 5px;
}

.fileUploader .status a:hover {
    color: red;
}

.fileUploader label.draggingOver span, a.draggingOver, li.draggingOver div.name a {
    color: var(--gray-400);
}

.RadUpload .ruInputs {
    width: auto;
}

form div.row, .normalFormDiv div.row {
    clear: both;
    overflow: hidden;
}

form div.row > label, .normalFormDiv div.row > label {
    float: left;
    width: 110px;
    padding-top: 4px;
}

form div.row > label, form.readOnly div.row > div, form div.row.noFormElement > div, .normalFormDiv div.row > label, .normalFormDiv.readOnly div.row > div, .normalFormDiv div.row.noFormElement > div {
    padding: 5px 3px 3px 0px;
}

form div.row > div, .normalFormDiv div.row > div {
    padding: 2px 0px;
}

form div.row > div.floatLeft, .normalFormDiv div.row > div.floatLeft {
    float: left;
}

form div.row.fullWidth, .normalFormDiv div.row.fullWidth {
    width: auto;
}

form div.row.fullWidth > label, .normalFormDiv div.row.fullWidth > label {
    float: none;
}

form div.row div.belowLabel, .normalFormDiv div.row div.belowLabel {
    float: left;
    clear: left;
}

form div.row.noFormElement > div, .normalFormDiv div.row.noFormElement > div {
    padding-top: 4px;
}

.popupMenu {
    position: absolute;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 1; /*Above <th>*/
    box-shadow: var(--shadow-menu);
    outline: none;
}

.popupMenu > li > a {
    color: var(--gray-800);
    display: block;
    padding: 5px;
    text-decoration: none;
    border-radius: 6px;
}

.popupMenu > li > a:hover, .popupMenu > li > a:focus {
    color: white;
    background-color: var(--primary-700);
}

.popupMenu > li > a.active {
    color: white;
    background-color: var(--primary-700);
}

.notPrintDisplayNone {
    display: none;
}

@media (max-width:800px) {
    @-ms-viewport {
        width: device-width;
    }

    .liteDisplayNone {
        display: none;
    }

    .liteFloatNone {
        float: none !important;
    }

    .liteWidthAuto {
        width: auto !important;
    }

    .liteWidth100Percent {
        width: 100% !important;
    }

    .litePaddingTop0 {
        padding-top: 0 !important;
    }

    .liteMarginLeft0 {
        margin-left: 0 !important;
    }

    .liteMarginLeftRight0 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .h1AndJobSearch {
        display: block;
    }
}

@media (max-width:500px) {
    th {
        white-space: normal;
    }

    .lite500DisplayNone {
        display: none;
    }

    .lite500DisplayBlock {
        display: block !important;
    }

    .lite500DisplayInline {
        display: inline !important;
    }

    .lite500DisplayInlineBlock {
        display: inline-block;
    }

    .lite500FloatNone {
        float: none !important;
    }

    .lite500ClearBoth {
        clear: both;
    }

    .lite500WidthAuto {
        width: auto !important;
    }

    .lite500Width100Percent {
        width: 100% !important;
    }

    .autoFloatLeft, .autoFloatRight {
        width: auto !important;
        float: none !important;
    }

    .autoFloatLeft {
        padding-right: 0;
    }

    .lite500HeightAuto {
        height: auto !important;
    }

    .lite500MaxHeightNone {
        max-height: none !important;
    }

    .lite500Padding0 {
        padding: 0 !important;
    }

    .lite500PaddingRight0 {
        padding-right: 0 !important;
    }

    .lite500PaddingLeftRight10 {
        padding-left: 10px;
        padding-right: 10px;
    }

    .lite500Margin10 {
        margin: 10px;
    }

    .lite500MarginLeft0 {
        margin-left: 0 !important;
    }

    .lite500MarginRight0 {
        margin-right: 0 !important;
    }

    .lite500MarginLeftRight0 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .lite500MarginTop0 {
        margin-top: 0 !important;
    }

    .lite500MarginTop5 {
        margin-top: 5px;
    }

    .lite500MarginBottom5 {
        margin-bottom: 5px;
    }

    .lite500OverflowVisible {
        overflow: visible !important;
    }

    .lite500TextAlignCenter {
        text-align: center;
    }
}

@media print {
    .printDisplayNone {
        display: none !important;
    }

    .notPrintDisplayNone {
        display: block;
    }

    .headerCellInner img {
        display: none;
    }

    .headerCellInner {
        height: auto !important;
        min-height: 0 !important;
    }

    .currentJobDiv {
        float: none;
        position: static !important;
    }

    .currentJobPanel {
        padding-left: 5px !important;
    }

    .printMaxWidthNone, .maxWidth900 {
        max-width: none !important;
    }

    .printMaxHeightNone {
        max-height: none !important;
    }
}

/* Added for Sprint 1 */

.attention {
    background-color: #F4F7A7;
    padding: 10px;
    border: dashed 1px black;
}

a {
    color: var(--clickable-dark-100);
    text-decoration: none;
}

a:hover:not(.button) {
    color: var(--clickable-dark-200);
}

a:hover {
    text-decoration: underline;
}

select[multiple="multiple"] {
    border-radius: 0;
}

th {
    font-weight: 600;
}

#searchAndExportControls {
    border-color: var(--ui-gray-300);
    padding: 4px
}

#searchExpandCollapse {
    padding: 0px;
}

/* td.printDisplayNone, a::after {
    white-space: pre;
} */

.clickable:hover {
    transition: .3s;
}

.divBoxComplete {
    border: 0px;
    padding: 0px;
}

#itemFiltersOuter {
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
}

.dashboardFilters {
    flex: 1 1 auto;
}

/* .dashboardFilters>div {
    width: inherit;
} */
/*td.Ball_in_Court {
    width: 160px;
    border: 0px solid rgb(0,0,0) !important;
    -webkit-box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.3);
    box-shadow: inset 0px 0px 0px .5px rgba(0,0,0,0.15);
}*/

.topMenuItemHeader {
    font-weight: 500;
}

#searchAndExportControls {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    flex-wrap: wrap;
}

#searchOuterDiv {
    flex-grow: 2;
    flex-shrink: 3;
}

.searchAndMisc a {
    color: var(--clickable-dark-100);
    font-weight: 500;
    display: block;
}

#searchExpandCollapse span {
    color: var(--clickable-dark-100);
    font-weight: 500;
}

td {
    overflow-wrap: break-word;
}

input[type="submit"] {
    max-width: none;
}

#loginAsideBottom {
    display: flex;
}

.dialogTitle {
    background-color: var(--surface);
    padding: 8px;
}

.dialogTitle > h2 {
    display: inline-block;
}

.csiCodeFilterEditablePanel td {
    padding-bottom: 0px;
}

.csiCodeFilterEditablePanel input[type="search"] {
    max-width: 280px;
}

.actionsAvailableToYouButtons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.actionsAvailableToYouButtons, .workflowArrows {
    margin-bottom: 20px;
}

.attachmentList div.attachment:first-child, table.itemList div.Related_Items:first-child {
    padding-top: 0;
}

.attachmentList div.attachment, table.itemList div.Related_Items {
    padding-top: 5px;
}

.attachmentList div.attachment {
    display: flex;
}

.attachmentList div.attachment > span {
    padding-right: 5px;
}

.attachmentList div.attachment > div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.attachmentThumbnailOuter {
    display: inline-flex;
}

.attachmentThumbnailOuter > input {
    align-self: center;
}

.attachmentThumbnail {
    width: 40px;
    height: 40px;
    background-size: cover;
    background-position: center center;
    border-radius: 10%;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.notice {
    color: #25745a;
    background-color: #eaf9f4;
    padding: 5px;
    margin-bottom: 5px;
}

.notice a {
    text-decoration: underline;
}

.inputTextWithFilterResultsOuter {
    position: absolute;
    background-color: white;
    border: 1px solid black;
    display: none;
    max-height: 200px;
    overflow-y: auto;
}

dialog .inputTextWithFilterResultsOuter {
    position: fixed;
}

.inputTextWithFilterResultsInner {
    min-width: 100%;
    box-sizing: border-box;
    user-select: none;
}

.inputTextWithFilterResultsInner tr {
    cursor: default;
}

.inputTextWithFilterResultsInner td, .inputTextWithFilterNoResults {
    padding: 2px;
}

.filterResultPaneHighlighted {
    background-color: lightgray;
}

.filterableChipListMessage {
    margin-top: 5px;
}

.selectFilterablePaneResultsPane {
    position: absolute;
    z-index: 1; /*above position:relative checkboxes on dashboard*/
    box-sizing: border-box;
    max-height: 200px;
    overflow: auto;
    border: 1px solid var(--gray-300);
    padding: 5px;
    background-color: white;
}

dialog .selectFilterablePaneResultsPane {
    position: fixed;
}

ul.filterableChipList {
    list-style: none;
    padding: 0;
    margin: 5px 0;
}

ul.filterableChipList > li {
    display: inline-block;
    background-color: var(--ui-gray-300);
    padding: 5px;
    border-radius: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}

ul.filterableChipList > li > input[type=button] {
    color: var(--ui-gray-200);
    text-decoration: none;
    font-size: 100%;
    font-weight: normal;
    padding: 0 2px;
    margin-left: 5px;
}

@media print {
    .attachmentThumbnail {
        -webkit-print-color-adjust: exact !important; /*Chrome, Safari*/
        print-color-adjust: exact !important; /*Firefox*/
    }
}

.expandCollapse2 > div {
    display: inline
}

.expandCollapse2 > div.initiallyHidden {
    display: none
}

.expandCollapse2.expanded > div.initiallyHidden {
    display: inline
}

.expandCollapse2 > .expandCollapseLink {
    display: block
}

.scrollingTHead > thead > tr > th {
    position: sticky;
}

table > tbody > tr > td > div.chip {
    padding: 4px 6px 4px 6px;
    border-radius: 4px;
    border: 1px solid #0000001A;
    font-weight: 450;
    letter-spacing: -0.01em;
    color: var(--gray-950);
    text-shadow: 0 0 2px #FFFFFF4D;
    text-align: center;
}

.itemColumnCustomizerHandle {
    background-color: var(--gray-200);
    padding: 3px 5px;
    position: relative;
    top: -3px;
    cursor: move;
}

.convertedCheckboxList > input[type=search] {
    width: 100%;
}