.loading-iCuAj {
    background: var(--background-primary, var(--white));
    position: relative;
    width: 100%
}

.loading-iCuAj .loader-Kso6C {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        inset: 0;
        min-height: 100px
    }

.loading-iCuAj .loader-Kso6C .outerLoader-Xn1Yh {
            border: 3px solid var(--border-primary, var(--footerGrey));
            border-block-start-color: var(--accent, var(--blue20));
            border-radius: 50%;
            position: absolute;
            width: 4vw;
            height: 4vw;
            animation: spin-PAY97 1.5s linear infinite
        }

@media (min-width: 0em) and (max-width: 37.499em) {

.loading-iCuAj .loader-Kso6C .outerLoader-Xn1Yh {
                width: 25vw;
                height: 25vw
        }
            }

@keyframes spin-PAY97 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes innerSpin-ezWtA {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* TODO: I hate this theme system and our colors.
    We need to designers to pick better colors for each theme. */

.night {
    --accent: #ffb81c;
    --accent-dark: #be5f00;
    --accent-focus: #f68d2e;
    --background-primary: #212225;
    --background-secondary: #242528;
    --background-secondary-accent: #323335;
    --background-disabled: #323335;
    --background-active-verse: #908801;
    --border-primary: #676768;
    --icon: #999a9b;
    --icon-link: #6ba5ae;
    --scrollbar-thumb-primary: #a8aaac;
    --scrollbar-thumb-secondary: #dee1e1;
    --text-primary: #dee1e1;
    --text-secondary: #a8aaac;
    --text-link: #6ba5ae;

    /* Variables for tags: */
    --tag-accent: var(--accent);
    --tag-accent-hover: var(--accent-focus);
    --tag-accent-focus: var(--accent-dark);
    --tag-text: #000000;
    --tag-text-hover: var(--tag-text);
    --tag-text-focus: var(--text-primary);

    /* Variables for buttons */
    --button-background-disabled: #53575b;
    --button-color-disabled: #212225;
    --button-secondary-accent-gradient-active: linear-gradient(
        138.53deg,
        #ffb81c21 -6.58%,
        rgba(255, 255, 255, 0) 87.32%
    );
    --button-secondary-accent-gradient: linear-gradient(
        138.17deg,
        rgba(255, 255, 255, 0) 12.7%,
        #ffb81c21 106.8%
    );
    --ghost-background-hover: #53575b99;
    --ghost-background-active: #53575b;
    --icon-background-hover: #53575b99;
    --icon-background-active: #53575b;
    --icon-color-disabled: #a9adad;
}

.sepia {
    --accent: #d35211;
    --accent-dark: #9b2000;
    --accent-focus: #fc7473;
    --background-primary: #fbf4e6;
    --background-secondary: #fbf4e6;
    --background-secondary-accent: var(--white);
    --background-active-verse: #eaea95;
    --border-primary: #6e4e33;
    --icon: #8a8782;
    --icon-link: #61a6bb;
    --scrollbar-thumb-primary: #6e4e33;
    --scrollbar-thumb-secondary: #2f1c08;
    --text-primary: #2f1c08;
    --text-secondary: #6e4e33;
    --text-link: #6ba5ae;

    /* Variables for tags: */
    --tag-accent: var(--accent);
    --tag-accent-hover: var(--accent-focus);
    --tag-accent-focus: var(--accent-dark);
    --tag-text: #ffffff;
    --tag-text-hover: var(--tag-text);
    --tag-text-focus: var(--tag-text);

    /* Variables for buttons */
    --button-color-disabled: #878a8c;
    --button-secondary-accent-gradient-active: linear-gradient(
        138.53deg,
        #d3521121 -6.58%,
        rgba(255, 255, 255, 0) 87.32%
    );
    --button-secondary-accent-gradient: linear-gradient(
        138.17deg,
        rgba(255, 255, 255, 0) 12.7%,
        #d3521121 186.8%
    );
    --ghost-background-hover: #e1dbcf99;
    --ghost-background-active: #e1dbcf;
    --icon-background-hover: #e1dbcf99;
    --icon-background-active: #e1dbcf;
    --icon-color-disabled: #a9adad;
}

platform-footer {
    --footerThemeBackground: var(--background-primary);
    --footerThemeText: var(--text-primary);
    --footerThemeLogo: var(--text-primary);
    --footerThemeCopyright: var(--text-secondary);
}

:root {
    /* Variables for tags: */
    --tag-accent-focus: var(--blue30);
    --tag-text-focus: #dee1e1;

    /* Variables for buttons */
    --button-secondary-accent-gradient-active: linear-gradient(
        138.53deg,
        #00618421 -6.58%,
        rgba(255, 255, 255, 0) 87.32%
    );
    --button-secondary-accent-gradient: linear-gradient(
        138.17deg,
        rgba(255, 255, 255, 0) 12.7%,
        #00618421 106.8%
    );
    --button-color-disabled: #878a8c;
    --ghost-background-hover: #eff0f099;
    --ghost-background-active: #eff0f0;
    --icon-background-hover: #eff0f099;
    --icon-background-active: #eff0f0;
    --icon-color-disabled: #a9adad;

    --input-slider-primary: #d0d3d3;
    --input-slider-secondary: #899090;

    --customGrey1: #e6e6e6;
    --customGrey2: #bbbbbb;
    --customGrey3: #a2aaad;
    --customGrey4: #97999b;
    --customGrey5: #53565a;
    --footerGrey: #f1f1f3;

    --sans: 'Ensign:Sans', Arial, 'noto sans', sans-serif;
    --serif: 'Ensign:Serif', 'Georgia', 'Times New Roman', serif;
    --monospace: 'Courier New', Courier, monospace;

    --fontSize10: 0.625rem;
    --fontSize12: 0.75rem;
    --fontSize22: 1.375rem;
    --fontSize26: 1.625rem;
    --fontSize30: 1.875rem;
    --fontSize36: 2.25rem;
    --fontSize52: 3.25rem;
    --fontSize54: 3.375rem;

    --spacing10: 0.625rem;
    --spacing20: 1.25rem;
    --spacing40: 2.5rem;
    --spacing60: 3.75rem;

    @custom-media --mq-50-only (min-width: 0em) and (max-width: 24.999em);
    @custom-media --mq-reader (min-width: 80em);
    @custom-media --mq-mobile (min-width: 46em);

    @custom-media --xs-min (min-width: 320px);
    @custom-media --xs-max (max-width: 319px);
    @custom-media --xs-only (min-width: 320px) and (max-width: 499px);

    @custom-media --s-min (min-width: 500px);
    @custom-media --s-max (max-width: 499px);
    @custom-media --s-only (min-width: 500) and (max-width: 639.999);

    @custom-media --m-min (min-width: 640px);
    @custom-media --m-max (max-width: 639px);
    @custom-media --m-only (min-width: 640) and (max-width: 899.999);

    @custom-media --l-min (min-width: 900px);
    @custom-media --l-max (max-width: 899px);
    @custom-media --l-only (min-width: 900px) and (max-width: 1199px);

    @custom-media --xl-min (min-width: 1200px);
    @custom-media --xl-max (max-width: 1199px);
    @custom-media --xl-only (min-width: 1200px) and (max-width: 1499px);

    @custom-media --xxl-min (min-width: 1500px);
    @custom-media --xxl-max (max-width: 1499px);
}

body {
    padding: 0 !important;
    font-size: var(--fontSize18);
    font-family: var(--sans);
    line-height: var(--lineHeight);
    background-color: var(--background-primary, var(--white));
}

.app-oo7_W {
    flex: 1 1;
    display: flex;
    flex-direction: column
}

.app-oo7_W > main {
        display: flex;
        flex-direction: column;
    }

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* additional reset rules*/

*, *:before, *:after {
  box-sizing: border-box;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font: normal normal var(--fontWeightNormal) var(--fontSize16)/var(--lineHeightLoose) var(--sans);
  font-weight: var(--fontWeightNormal);
}

body {
  font-weight: var(--fontWeightNormal);
  font-size: var(--fontSize18);
}

strong, b {
    font-weight: var(--fontWeightBold)
}

i, cite, em, var, address, dfn {
    font-style: italic;
}

button, input, optgroup, select, textarea {
    font-size: 100%;
}

body {
    color: var(--text-primary, var(--black));
}

a {
    color: var(--text-link, var(--info40));
    text-decoration: none
}

a:hover {
        text-decoration: none;
        color: var(--text-link, var(--blue20));
    }

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--sans);
    /*margin: 0 0 var(--spacing16);*/
}

h1 {
    font: normal normal var(--fontWeightLight) var(--fontSize52) /
        var(--lineHeightTight) var(--sans);
    font-weight: var(--fontWeightLight);
}

h2 {
    font-size: var(--fontSize28);
    line-height: 1.2;
    font-weight: var(--fontWeightLight);
}

h3,
h4,
h5,
h6 {
    font-size: var(--fontSize18);
    font-weight: var(--fontWeightBold);
}

h3 {
    line-height: 1.278;
    letter-spacing: 0.00278em;
    /*text-transform: uppercase;*/
}

h4,
h5,
h6 {
    line-height: 1.222;
}

dt {
    font-size: var(--fontSize18);
    font-style: italic;
    font-weight: var(--fontWeightNormal);
    line-height: var(--lineHeightTight);
}

dd {
    margin: 0;
}

code {
    font-family: var(--monospace);
    white-space: pre-wrap;
}

.toaster-RYVLT[class] {
    bottom: var(--spacing16);
    left: 50%;
    right: auto;
    display: flex;
    position: fixed;
    align-items: center;
    transition: 250ms ease-in-out;
    transform: translate3d(-50%, calc(100% + var(--spacing16)), 0)
}

.toaster-RYVLT[class].show-SudTV, .toaster-RYVLT[class]:focus-within {
        transform: translate3d(-50%, 0, 0);
    }

/* This isn't used but, I figured I'd leave it in here for the future. */

.toaster-RYVLT.right-L9jRq[class] {
    left: auto;
    right: var(--spacing16);
    transform: translate3d(0, calc(100% + var(--spacing16)), 0)

}

.toaster-RYVLT.right-L9jRq[class].show-SudTV, .toaster-RYVLT.right-L9jRq[class]:focus-within {
        transform: translate3d(0, 0, 0);
    }
.alert-fJklh[class] {
    background-color: var(--background-primary, var(--white));
    color: var(--text-primary, var(--black))
}

.night .alert-fJklh[class] {
        border: 1px solid var(--border-primary)
}

.alert-fJklh[class] > div > div:not(:first-child) {
        background-color: var(--background-primary, var(--white));
        border-color: var(--background-primary, var(--white));
    }

.alert-fJklh[class] button {
        background-color: transparent;
        color: var(--text-primary, var(--black))
    }

.alert-fJklh[class] button:hover {
            color: var(--text-secondary, var(--grey30));
            background-color: var(--background-secondary-accent, var(--grey2));
        }

.alert-fJklh[class] button[disabled] {
            filter: grayscale(70%);
        }

.alert-fJklh[class] button[disabled], [disabled] .alert-fJklh[class] button {
            color: var(--text-secondary, var(--grey10))
    }

.alert-fJklh[class] button[disabled]:hover, [disabled] .alert-fJklh[class] button:hover {
                color: var(--text-secondary, var(--grey10));
            }

.basic-ul3ED[class] > div > div:first-of-type {
        background-color: var(--accent, var(--blue20));
    }

@media print {
    .alert-fJklh[class] {
        display: none;
    }
}

.login-qllBI {
    display: block;
    margin: var(--spacing16);
    text-align: center;
    font-family: var(--sans)
}
.login-qllBI > * {
        display: block;
        margin: 0 auto 0;
        max-width: 75%;
    }
.login-qllBI a {
        font-size: var(--fontSize12);
        margin-block-start: var(--spacing16)
    }
.login-qllBI a:last-of-type {
            margin-block-end: var(--spacing16);
        }
.login-qllBI .outOfService-sxJuP {
        color: var(--danger40);
    }

button.iconButton-NNPV2 {
    background-color: transparent;
    color: var(--text-primary, var(--black))
}

button.iconButton-NNPV2:hover {
        color: var(--text-secondary, var(--grey30));
        background-color: var(
            --background-secondary-accent,
            var(--grey2)
        );
    }

button.iconButton-NNPV2[disabled] {
        filter: grayscale(70%);
    }

button.iconButton-NNPV2[disabled], [disabled] button.iconButton-NNPV2 {
        color: var(--text-secondary, var(--grey10))
}

button.iconButton-NNPV2[disabled]:hover, [disabled] button.iconButton-NNPV2:hover {
            color: var(--text-secondary, var(--grey10));
        }

[dir="rtl"] .iconButton-NNPV2 svg {
    transform: scaleX(-1);
}

.hiddenTitleText-EGKnN {
    position: fixed;
    inset-block-start: -9999px;
}

.ghost-z1ycr[class] {
    background: none;
    color: var(--accent, var(--blue30));
    cursor: pointer;
    font-size: var(--fontSize14)
}

.ghost-z1ycr[class]:hover {
        background-color: var(--ghost-background-hover, var(--grey3));
        color: var(--accent, var(--blue30));
    }

.ghost-z1ycr[class]:active {
        background-color: var(--ghost-background-active, var(--grey3));
        color: var(--accent, var(--blue30));
    }

.ghost-z1ycr[class]:disabled {
        background: var(--button-background-disabled, transparent);
        color: var(--button-color-disabled, var(--grey20))
    }

.ghost-z1ycr[class]:disabled:hover {
            background: var(--button-background-disabled, transparent);
            color: var(--button-color-disabled, var(--grey20));
        }

.icon-RXkDY[class] {
    color: var(--icon, var(--grey20))
}

.icon-RXkDY[class]:hover {
        background-color: var(--icon-background-hover, var(--grey3));
        color: var(--icon, var(--grey30));
    }

.icon-RXkDY[class]:active {
        background-color: var(--icon-background-active, var(--grey3));
    }

.icon-RXkDY[class]:disabled {
        background: transparent;
        color: var(--icon-color-disabled, var(--grey20))
    }

.icon-RXkDY[class]:disabled:hover {
            background: transparent;
            color: var(--icon-color-disabled, var(--grey20));
        }

.icon-RXkDY[class] {

    /* TODO: need to extract from other areas... not all icon buttons have been extracted */
}

.primary-WjGqN[class] {
}

.secondary-KsueD[class] {
    border-color: var(--accent, var(--blue30));
    color: var(--accent, var(--blue30));
    background: var(--button-secondary-accent-gradient)
}

.secondary-KsueD[class]:hover {
        background: transparent;
        color: var(--accent, var(--blue30));
    }

.secondary-KsueD[class]:active {
        background: var(--button-secondary-accent-gradient-active);
        color: var(--accent, var(--blue30));
    }

.secondary-KsueD[class]:disabled {
        background: var(--button-background-disabled, transparent);
        color: var(--button-color-disabled, var(--grey20))
    }

.secondary-KsueD[class]:disabled:hover {
            background: var(--button-background-disabled, transparent);
            color: var(--button-color-disabled, var(--grey20));
        }

.text-xr7T4[class] {
    color: var(--text-primary, var(--black));
}

.lowServiceBanner-cmFJR {
    position: fixed;
    z-index: var(--zIndexHigherThanPlatform);
    inset-block-end: 0;
}

.banner-o5VpE[class] {
    background-color: var(--background-primary, var(--grey2))
}

.night .banner-o5VpE[class] {
        border-block-start: 1px solid var(--border-primary)
}

.banner-o5VpE[class] div {
        color: var(--text-primary, var(--black));
    }

.banner-o5VpE[class] > button {
        /* from theming/components/eden-buttons/eden-buttons.css */
        /* css modules supports composing, but not when deeply nested like this and we don't have a class to latch onto */
        color: var(--icon, var(--grey20))
    }

.banner-o5VpE[class] > button:hover {
            background-color: var(
                --icon-background-hover,
                var(--grey3)
            );
            color: var(--icon, var(--grey30));
        }

.banner-o5VpE[class] > button:active {
            background-color: var(
                --icon-background-active,
                var(--grey3)
            );
        }

.banner-o5VpE[class] > button:disabled {
            background: transparent;
            color: var(--icon-color-disabled, var(--grey20))
        }

.banner-o5VpE[class] > button:disabled:hover {
                background: transparent;
                color: var(--icon-color-disabled, var(--grey20));
            }

.basic-TWZ29[class] {
    border-block-end-color: var(--accent, var(--blue20))
}

.basic-TWZ29[class] > div path {
        fill: var(--accent, var(--blue20));
    }

@media print {
    .banner-o5VpE[class] {
        display: none;
    }
}

/*# sourceMappingURL=app.032afd3602083792832f.css.map*/