:root {
    --gray-100: #F7FAFC;
    --gray-200: #EDF2F7;
    --gray-300: #E2E8F0;
    --gray-400: #CBD5E0;
    --gray-500: #A0AEC0;
    --gray-600: #718096;
    --gray-700: #4A5568;
    --gray-800: #2D3748;
    --gray-900: #1A202C;

    --blue-100: #EBF8FF;
    --blue-200: #BEE3F8;
    --blue-300: #90CDF4;
    --blue-400: #63B3ED;
    --blue-500: #4299E1;
    --blue-600: #3182CE;
    --blue-700: #2B6CB0;
    --blue-800: #2C5282;
    --blue-900: #2A4365;

    --red-100: #FFF5F5;
    --red-200: #FED7D7;
    --red-300: #FEB2B2;
    --red-400: #FC8181;
    --red-500: #F56565;
    --red-600: #E53E3E;
    --red-700: #C53030;
    --red-800: #9B2C2C;
    --red-900: #742A2A;

    --orange-100: #FFFAF0;
    --orange-200: #FEEBC8;
    --orange-300: #FBD38D;
    --orange-400: #F6AD55;
    --orange-500: #ED8936;
    --orange-600: #DD6B20;
    --orange-700: #C05621;
    --orange-800: #9C4221;
    --orange-900: #7B341E;

    --yellow-100: #FFFFF0;
    --yellow-200: #FEFCBF;
    --yellow-300: #FAF089;
    --yellow-400: #F6E05E;
    --yellow-500: #ECC94B;
    --yellow-600: #D69E2E;
    --yellow-700: #B7791F;
    --yellow-800: #975A16;
    --yellow-900: #744210;

    --green-100: #F0FFF4;
    --green-200: #C6F6D5;
    --green-300: #9AE6B4;
    --green-400: #68D391;
    --green-500: #48BB78;
    --green-600: #38A169;
    --green-700: #2F855A;
    --green-800: #276749;
    --green-900: #22543D;

    --teal-100: #E6FFFA;
    --teal-200: #B2F5EA;
    --teal-300: #81E6D9;
    --teal-400: #4FD1C5;
    --teal-500: #38B2AC;
    --teal-600: #319795;
    --teal-700: #2C7A7B;
    --teal-800: #285E61;
    --teal-900: #234E52;

    --indigo-100: #EBF4FF;
    --indigo-200: #C3DAFE;
    --indigo-300: #A3BFFA;
    --indigo-400: #7F9CF5;
    --indigo-500: #667EEA;
    --indigo-600: #5A67D8;
    --indigo-700: #4C51BF;
    --indigo-800: #434190;
    --indigo-900: #3C366B;

    --purple-100: #FAF5FF;
    --purple-200: #E9D8FD;
    --purple-300: #D6BCFA;
    --purple-400: #B794F4;
    --purple-500: #9F7AEA;
    --purple-600: #805AD5;
    --purple-700: #6B46C1;
    --purple-800: #553C9A;
    --purple-900: #44337A;

    --pink-100: #FFF5F7;
    --pink-200: #FED7E2;
    --pink-300: #FBB6CE;
    --pink-400: #F687B3;
    --pink-500: #ED64A6;
    --pink-600: #D53F8C;
    --pink-700: #B83280;
    --pink-800: #97266D;
    --pink-900: #702459;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-xl: 1.25rem;

    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

body {
    font-family: system-ui;
    line-height: 1.5;
}

.ClientHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--blue-800);
}

.ClientHeader-appName {
    font-size: var(--text-xl);
    color: var(--gray-100);
    margin: 0.5rem;
    flex-grow: 0;
}

.ClientHeader-menuItems {
    display: flex;
    /* align-self: flex-end; */
}

.ClientHeader-menuItem {
    margin-left: 10px;
    display: inline-block;
    color: white;
    text-decoration: none;
    padding: 5px 10px 5px 10px;
    border-radius: 0.25rem;
}

.ClientHeader-menuItem.active {
    background-color: var(--blue-600);
    /* color: var(--gary-800); */
}

.ClientHeader-menuItem:hover {
    background-color: var(--blue-500);
}

.ClientHeader-mobileMenuButton {
    margin-left: 10px;
    display: inline-block;
    background-color: var(--blue-900);
    color: white;
    text-decoration: none;
    padding: 5px 10px 5px 10px;
    border-radius: 0.25rem;
}

.ClientHeader-mobileMenuButton.active {
    background-color: var(--blue-600);
}

.ClientHeader-mobileMenu {
    display: none;
    background-color: var(--blue-800);
}

.ClientHeader-mobileMenu.active {
    display: block;
}

.ClientHeader-mobileMenuItem {
    margin-left: 10px;
    display: block;
    color: white;
    text-decoration: none;
    padding: 5px 10px 5px 10px;
    border-radius: 0.25rem;
}

@media (min-width: 0px) {
    .ClientHeader-menuItem {
        display: none;
    }

    .ClientHeader-mobileMenuButton {
        display: block;
    }
}

@media (min-width: 1024px) {
    .ClientHeader-menuItem {
        display: block;
    }

    .ClientHeader-mobileMenuButton {
        display: none;
    }

    .ClientHeader-mobileMenu.active {
        display: none;
    }
}

.Client {
    position: relative;
}

.ClientError {
    display: none;
}

.ClientError-active {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
}

.ClientError-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: white;
    opacity: 0.5;
}

.ClientError-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
}

.ClientError-modal {
    margin-top: 6rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    background-color: var(--red-500);
    padding: 1.25rem;
    color: white;
    border-style: solid;
    border-width: 1px;
    border-color: var(--red-800);
    box-shadow: var(--shadow-md);
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .ClientError-modal {
        width: 50%;
    }
}

.ClientError-alertText {
    margin-bottom: 1.25rem;
}

.ClientError-dismissButton {
    background-color: var(--red-200);
    color: var(--red-900);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0.25rem;
    border: 0;
    width: 100%;
    font-size: 16px;
    line-height: 24px;
    box-sizing: border-box;
    font-family: system-ui;
    cursor: pointer;
}

@media (min-width: 1024px) {
    .Row-root {
        display: flex;
        align-items: flex-end;
    }
}

.ScreenHeader-root {
    position: sticky;
    top: 0;
    z-index: 49;
}

.ScreenHeader-fieldsHaveChangedIndicator.active {
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: var(--red-500);
    z-index: 50;
}

.ScreenHeader-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--gray-200);
    box-shadow: var(--shadow-md);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: var(--gray-500);
    height: 3.5rem;
}

.ScreenHeader-iconAndTitle {
    display: flex;
}

.ScreenHeader-iconContainer {
    color: var(--gray-700);
    margin-left: 0.5rem;
}

@media (min-width: 1024px) {
    .ScreenHeader-iconContainer {
        font-size: 1.5rem;
    }
}

.ScreenHeader-title {
    color: var(--gray-700);
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

@media (min-width: 1024px) {
    .ScreenHeader-title {
        font-size: 1.5rem;
    }
}

.ScreenHeader-primaryButtonContainer {
    padding: 0 0.5rem;
}

.ScreenHeader-primaryButton {
    width: 100%;
    color: var(--gray-800);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: var(--text-xs);
    flex-grow: 0;
    background-color: var(--gray-100);
    border-width: 1px;
    border-color: var(--gray-700);
    border-radius: 0.25rem;
    cursor: pointer;
    font-family: system-ui;
    line-height: inherit;
}

.ScreenHeader-primaryButton:hover {
    background-color: var(--gray-400);
}

.ScreenHeader-primaryButton:disabled {
    opacity: 0.5;
}

@media (min-width: 1024px) {
    .ScreenHeader-primaryButton {
        font-size: 1rem;
    }
}

.Section-collapsed {
    display: none;
    margin-bottom: 0.5rem;
}

.Section-collapsedCollapsedMobile {
    display: block;
    margin-bottom: 0.5rem;
}

@media (min-width: 1024px) {
    .Section-collapsedCollapsedMobile {
        display: none;
    }
}

.Section-expand {
    cursor: pointer;
    display: flex;
    background-color: var(--gray-200);
    padding: 0.5rem;
    box-shadow: var(--shadow);
}

.Section-chevronRight {
    color: var(--gray-800);
    margin-right: 0.5rem;
}

.Section-collapsed-title {
    color: var(--gray-800);
}

.Section-expanded {
    margin-bottom: 1.25rem;
}

.Section-expandedCollapsedMobile {
    margin-bottom: 1.25rem;
    display: none;
}

@media (min-width: 1024px) {
    .Section-expandedCollapsedMobile {
        display: block;
    }
}

.Section-collapse {
    cursor: pointer;
    display: flex;
    background-color: var(--gray-200);
    padding: 0.5rem;
    box-shadow: var(--shadow);
}

.Section-chevronDown {
    color: var(--gray-800);
    margin-right: 0.5rem;
}

.Section-expanded-title {
    color: var(--gray-800);
}

.TextField-root {
    margin: 0.5rem;
    flex: 1 1 0%;
}

.TextField-label {
    font-size: var(--text-sm);
    padding-left: 0.5rem;
    margin-bottom: 0.25rem;
}

.TextField-labelInvalid {
    font-size: var(--text-sm);
    padding-left: 0.5rem;
    margin-bottom: 0.25rem;
    color: var(--red-600);
}

.TextField-input {
    border-width: 1px;
    border-color: var(--gray-400);
    border-radius: 0.25rem;
    padding: 0.5rem;
    min-width: 100%;
    line-height: 1.25;
    box-sizing: border-box;
    font-family: system-ui;
    font-size: 16px;
    line-height: 1.25;
    border-style: solid;
}

.TextField-inputInvalid {
    border-width: 1px;
    border-color: var(--red-400);
    color: var(--red-600);
    border-radius: 0.25rem;
    padding: 0.5rem;
    min-width: 100%;
    line-height: 1.25;
    box-sizing: border-box;
    font-family: system-ui;
    font-size: 16px;
    line-height: 1.25;
    border-style: solid;
}

.SelectField-root {
    margin: 0.5rem;
    flex: 1 1 0%;
}

.SelectField-label {
    font-size: var(--text-sm);
    padding-left: 0.5rem;
    margin-bottom: 0.25rem;
}

.SelectField-labelInvalid {
    font-size: var(--text-sm);
    padding-left: 0.5rem;
    margin-bottom: 0.25rem;
    color: var(--red-600);
}

.SelectField-select {
    background-color: white;
    border-width: 1px;
    border-color: var(--gray-400);
    border-radius: 0.25rem;
    padding: 0.5rem;
    min-width: 100%;
    line-height: 1.25;
    box-sizing: border-box;
    font-family: system-ui;
    font-size: 16px;
}

.SelectField-selectInvalid {
    border-width: 1px;
    border-color: var(--red-400);
    color: var(--red-600);
    border-radius: 0.25rem;
    padding: 0.5rem;
    min-width: 100%;
    line-height: 1.25;
    box-sizing: border-box;
    font-family: system-ui;
    font-size: 16px;
}

.BooleanField-root {
    margin: 0.5rem;
    flex: 1 1 0%;
}

.BooleanField-inner {
    padding: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-width: 1px;
    border-style: solid;
    border-color: var(--gray-400);
    border-radius: 0.25rem;
    width: 100%;
    line-height: 1.25;
    box-sizing: border-box;
}

.BooleanField-innerInvalid {
    padding: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-width: 1px;
    border-style: solid;
    border-color: var(--red-400);
    border-radius: 0.25rem;
    color: var(--red-600);
    width: 100%;
    line-height: 1.25;
    box-sizing: border-box;
}

.BooleanField-labelContainer {
    cursor: pointer;
}

.BooleanField-input {
    cursor: pointer;
    margin: 0;
}

.UploadField-root {
    margin: 0.5rem;
    flex: 1 1 0%;
}

.UploadField-label {
    font-size: var(--text-sm);
    padding-left: 0.5rem;
    margin-bottom: 0.25rem;
}

.UploadField-labelInvalid {
    font-size: var(--text-sm);
    padding-left: 0.5rem;
    margin-bottom: 0.25rem;
    color: var(--red-600);
}

.UploadField-input {
    border-width: 1px;
    border-color: var(--gray-400);
    border-radius: 0.25rem;
    padding: 0.5rem;
    min-width: 100%;
    line-height: 1.25;
    box-sizing: border-box;
    border-style: solid;
    font-family: system-ui;
    font-size: 13px;
}

.UploadField-inputInvalid {
    border-width: 1px;
    border-color: var(--red-400);
    color: var(--red-600);
    border-radius: 0.25rem;
    padding: 0.5rem;
    min-width: 100%;
    line-height: 1.25;
    box-sizing: border-box;
    border-style: solid;
    font-family: system-ui;
    font-size: 13px;
}

.DateField-root {
    margin: 0.5rem;
    flex: 1 1 0%;
}

.DateField-label {
    font-size: var(--text-sm);
    padding-left: 0.5rem;
    margin-bottom: 0.25rem;
}

.DateField-labelInvalid {
    font-size: var(--text-sm);
    padding-left: 0.5rem;
    margin-bottom: 0.25rem;
    color: var(--red-600);
}

.DateField-input {
    border-width: 1px;
    border-color: var(--gray-400);
    border-radius: 0.25rem;
    padding: 0.5rem;
    min-width: 100%;
    line-height: 1.25;
    box-sizing: border-box;
    font-family: system-ui;
    font-size: 16px;
    line-height: 1.25;
    border-style: solid;
}

.DateField-inputInvalid {
    border-width: 1px;
    border-color: var(--red-400);
    color: var(--red-600);
    border-radius: 0.25rem;
    padding: 0.5rem;
    min-width: 100%;
    line-height: 1.25;
    box-sizing: border-box;
    font-family: system-ui;
    font-size: 16px;
    line-height: 1.25;
    border-style: solid;
}

.LookupField-root {
    margin: 0.5rem;
    flex: 1 1 0%;
}

.LookupField-label {
    font-size: var(--text-sm);
    padding-left: 0.5rem;
    margin-bottom: 0.25rem;
}

.LookupField-labelInvalid {
    font-size: var(--text-sm);
    padding-left: 0.5rem;
    margin-bottom: 0.25rem;
    color: var(--red-600);
}

.LookupField-value {
    border-width: 1px;
    border-color: var(--gray-400);
    border-radius: 0.25rem;
    padding: 0.5rem;
    min-width: 100%;
    line-height: 1.25;
    box-sizing: border-box;
    font-family: system-ui;
    font-size: 16px;
    line-height: 1.25;
    border-style: solid;
    display: inline-block;
    cursor: pointer;
}

.LookupField-valueInvalid {
    border-width: 1px;
    border-color: var(--red-400);
    color: var(--red-600);
    border-radius: 0.25rem;
    padding: 0.5rem;
    min-width: 100%;
    line-height: 1.25;
    box-sizing: border-box;
    font-family: system-ui;
    font-size: 16px;
    line-height: 1.25;
    border-style: solid;
}

.LookupField-chooser {
    display: none;
}

.LookupField-chooserActive {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
}

.LookupField-backdrop {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    opacity: 0.5;
}

.LookupField-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
}

.LookupField-modal {
    margin-top: 6rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    padding: 1.25rem;
    border-style: solid;
    border-width: 1px;
    box-shadow: var(--shadow-md);
    width: 100%;
    box-sizing: border-box;
    background-color: white;
}

@media (min-width: 1024px) {
    .LookupField-modal {
        width: 50%;
    }
}

.LookupField-labelContainer {
    display: flex;
    align-items: flex-end;
    width: 100%;
    justify-content: space-between;
}

.LookupField-modalCloseButton {
    background-color: white;
    color: var(--gray-800);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    line-height: 1.25;
    border-style: none;
    font-family: system-ui;
    font-size: 16px;
    line-height: 1.25;
    cursor: pointer;
}

.LookupField-modalLabel {
    font-size: var(--text-sm);
    padding-left: 0.5rem;
    margin-bottom: 0.25rem;
}

.LookupField-modalInput {
    border-width: 1px;
    border-color: var(--gray-400);
    border-radius: 0.25rem;
    padding: 0.5rem;
    min-width: 100%;
    line-height: 1.25;
    box-sizing: border-box;
    font-family: system-ui;
    font-size: 16px;
    line-height: 1.25;
    border-style: solid;
}

.LookupField-modalOptionContainer {
    margin-top: 0.25rem;
}

.LookupField-modalOption {
    padding: 0.5rem;
    cursor: pointer;
}

.LookupField-modalOptionActive {
    padding: 0.5rem;
    cursor: pointer;
    background-color: var(--gray-200);
}

.Spacer-root {
    margin: 0.5rem;
    flex: 1 1 0%;
}

.Spacer-inside {
    padding-left: 0.5rem;
}

.Button-root {
    display: inline-block;
    margin: 0.5rem;
}

.Button-button {
    background-color: white;
    color: var(--gray-800);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-width: 1px;
    border-color: var(--gray-700);
    border-radius: 0.25rem;
    line-height: 1.25;
    border-style: solid;
    font-family: system-ui;
    font-size: 16px;
    line-height: 1.25;
    cursor: pointer;
}

.Button-button:disabled {
    opacity: 0.5;
}

.Button-label {
    margin-left: 0.5rem;
}

.Button-label:first-child {
    margin-left: 0;
}

.Button-primary {
    background-color: var(--blue-500);
    border-color: var(--blue-500);
    color: white;
}

.Button-danger {
    background-color: var(--red-500);
    border-color: var(--red-500);
    color: white;
}

.Text-root {
    margin: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: var(--text-sm);
}

.Table-root {
    margin: 0.5rem;
    flex-grow: 1;
    overflow-x: scroll;
}

.Table-root table {
    width: 100%;
}

.Table-headerColumn {
    text-align: left;
    white-space: nowrap;
    font-weight: normal;
    text-decoration: underline;
}

@media (min-width: 1024px) {
    .Table-headerColumn {
        padding: 0.25rem;
    }
}

.Table-bodyRow:nth-child(odd) {
    background-color: var(--gray-200);
}

.Table-bodyRow:hover {
    background-color: var(--teal-100);
}

.Table-bodyColumn {
    white-space: nowrap;
}

@media (min-width: 1024px) {
    .Table-bodyColumn {
        padding: 0.25rem;
    }
}

.Table-emptyBodyRow {
    background-color: var(--gray-200);
}

.Table-emptyBodyColumn {
    white-space: nowrap;
    font-style: italic;
    color: var(--gray-500);
}

@media (min-width: 1024px) {
    .Table-emptyBodyColumn {
        padding: 0.25rem;
    }
}

.LinkTableCell-root {
    color: var(--blue-600);
    text-decoration: none;
}

.LinkTableCell-root:hover {
    color: var(--blue-400);
}

.Image-root {
    margin: 0.5rem;
    flex: 1 1 0%;
    align-self: center;
}

.Image-img {
    width: 100%;
    object-fit: contain;
}

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

.ImageGrid-img {
    padding: 0.5rem;
    width: 50%;
    object-fit: contain;
}

@media (min-width: 1024px) {
    .ImageGrid-img {
        width: 16.666667%;
    }
}

.Login-container {
    width: 100vw;
    height: 100vh;
}

@media (min-width: 1024px) {
    .Login-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.Login-box {
    padding: 2.5rem;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .Login-box {
        border-style: solid;
        border-width: 1px;
        border-color: var(--gray-400);
        width: 50%;
        box-shadow: var(--shadow-md);
    }
}

.Login-title {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 1.25rem 0.5rem 0.5rem 0.5rem;
}

.Login-success {
    margin: 0.5rem;
    color: var(--green-600);
}

.Login-error {
    margin: 0.5rem;
    color: var(--red-600);
}

@media (min-width: 1024px) {
    .Login-fields {
        display: flex;
        align-items: flex-end;
    }
}

.Login-field {
    margin: 0.5rem;
    flex-grow: 1;
}

.Login-fieldLabel {
    font-size: 0.875rem;
    padding-left: 0.5rem;
    margin-bottom: 0.25rem;
}

.Login-input {
    border-width: 1px;
    border-color: var(--gray-400);
    border-radius: 0.25rem;
    border-style: solid;
    padding: 0.5rem;
    min-width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 24px;
    font-family: system-ui;
}

@media (min-width: 1024px) {
    .Login-buttons {
        display: flex;
        align-items: center;
    }
}

.Login-button {
    margin: 0.5rem;
    background-color: var(--blue-500);
    color: white;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-width: 1px;
    border-radius: 0.25rem;
    font-family: system-ui;
    border-style: solid;
    border-color: var(--blue-500);
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
}

.Login-forgotDiv {
    margin: 0.5rem;
}

.Login-forgotLink {
    font-style: italic;
    color: var(--blue-400);
    cursor: pointer;
    text-decoration: none;
}

.Login-forgotLink:hover {
    text-decoration: underline;
}