/* #region Colors */

:root {
    --teal: #0B4D4F;;
    --teal-lighten-2: hsl(183, 70%, 23%);
    --teal-darken-1: hsl(182, 75%, 12%);
    --teal-darken-2: hsl(182, 95%, 7%);
    --teal-fade-85: hsl(182, 76%, 18%, 0.85);
    --teal-fade-80: hsl(182, 76%, 18%, 0.85);
    --teal-fade-60: hsl(182, 76%, 18%, 0.60);
    --teal-fade-50: hsl(182, 76%, 18%, 0.50);
    --teal-fade-35: hsl(182, 76%, 18%, 0.35);
    --teal-fade-25: hsl(182, 76%, 18%, 0.25);
    --teal-fade-20: hsl(182, 76%, 18%, 0.20);
    --teal-fade-15: hsl(182, 76%, 18%, 0.15);

    --gold: #A98855;
    --gold-darken-2: hsl(36, 33%, 43%);
    --gold-darken-3: hsl(36, 40%, 35%);

    --chalk: #FBF6F0;
    --chalk-fade-60: hsla(33, 58%, 96%, 0.60);
    --chalk-fade-70: hsla(33, 58%, 96%, 0.70);
    --chalk-fade-10: hsla(33, 58%, 96%, 0.10);
    --chalk-fade-0: hsla(33, 58%, 96%, 0.01);

    --spritz: #D9D9BC;
    --spritz-fade-60: hsla(60, 28%, 79%, 0.50);
    --spritz-darken-3: hsl(60, 10%, 50%);
    --spritz-darken-fade-50: hsla(60, 18%, 45%, 0.45);

    --oak: #C3AD91;
    --oak-darken-1: hsl(34, 32%, 67%);
    --oak-darken-2: hsl(34, 30%, 56%);
    --oak-darken-3: hsl(34, 25%, 50%);
    --oak-lighten-1: #cdb798;
    --oak-lighten-2: hsl(34, 32%, 75%);
    --oak-fade-75: rgba(195, 173, 145, 0.50);
    --oak-fade-50: rgba(195, 173, 145, 0.50);
    --oak-fade-40: rgba(195, 173, 145, 0.40);
    --oak-fade-35: rgba(195, 173, 145, 0.35);
    --oak-fade-32: rgba(195, 173, 145, 0.32);
    --oak-fade-25: rgba(195, 173, 145, 0.25);
    --oak-fade-20: rgba(195, 173, 145, 0.20);
    --oak-fade-18: hsla(34, 32%, 67%, 0.18);
    --oak-fade-15: rgba(195, 173, 145, 0.15);
    --oak-fade-10: rgba(195, 173, 145, 0.10);
    --oak-fade-8: rgba(195, 173, 145, 0.08);

    --oak-shadow: hsla(34, 25%, 30%, 0.08);
    --oak-shadow-fade-50: hsla(34, 25%, 30%, 0.04);
    --oak-shadow-fade-75: hsla(34, 25%, 30%, 0.06);
    --oak-shadow-fade-85: hsla(34, 25%, 30%, 0.07);

    --ink: #10120D;
    --ink-fade-85: rgba(16, 18, 13, 0.85);
    --ink-fade-60: rgba(16, 18, 13, 0.60);
    --ink-fade-50: rgba(16, 18, 13, 0.50);
    --ink-fade-30: rgba(16, 18, 13, 0.30);
    --ink-fade-20: rgba(16, 18, 13, 0.20);
    --ink-fade-7: rgba(16, 18, 13, 0.07);
    --ink-fade-5: rgba(16, 18, 13, 0.05);
    --ink-fade-3: rgba(16, 18, 13, 0.03);

    --shadow-ink: hsl(84, 16%, 6%);
    --shadow-ink-fade-10: hsla(84, 16%, 6%, 0.10);
    --shadow-ink-fade-60: hsla(84, 16%, 6%, 0.65);
    --shadow-ink-fade-65: hsla(84, 16%, 6%, 0.65);
    --shadow-ink-fade-70: hsla(84, 16%, 6%, 0.70);

    --white: #fff;

    --green: #67bf1f;

    --orange: #ff9633;

    --yellow: #eee21e;

    --red: #eb514c;
    --portal-surface: #fffdfa;
    --portal-surface-strong: #f5ede3;
    --portal-line: #d9cdbc;
    --portal-muted: rgba(16, 18, 13, 0.66);
    --portal-chalk-background: var(--chalk);
    --portal-chalk-background-fade-0: var(--chalk-fade-0);
    --portal-sectionedge-border-color: var(--oak);
    --portal-sectionedge-hover-border-color: var(--oak-lighten-2);
    --portal-sectiondivider-border-color: var(--oak-fade-25);
    --portal-listitem-border-color: var(--oak-lighten-2);
    --portal-headeraction-color: var(--teal-fade-60);
    --portal-headeraction-hover-color: var(--teal-fade-80);
    --portal-headeraction-divider-color: var(--teal-fade-15);
    --portal-headerbrandtoggle-color: var(--oak);
    --portal-headerbrandtoggle-hover-color: var(--oak-lighten-2);
    --portal-headertoggle-color: var(--teal);
    --portal-headertoggle-hover-color: var(--teal-darken-1);
    --portal-authheader-content-color: var(--oak);
    --portal-authheader-content-muted-color: var(--oak-fade-50);
    --portal-authheader-edge-color: var(--oak);
    --portal-authheader-edge-hover-color: var(--oak-lighten-2);
    --portal-panelborder-color: var(--oak);
    --portal-panelbordersoft-color: var(--oak-fade-75);
    --portal-panelborder-hover-color: var(--oak);
    --portal-authaccent-color: var(--teal);
    --portal-authaccent-hover-color: var(--teal-darken-1);
    --portal-authspinner-color: var(--teal);
    --portal-burgermenu-background-color: var(--spritz);
    --portal-burgermenu-text-color: var(--teal);
    --portal-burgermenu-admin-text-color: var(--portal-burgermenu-text-color);
    --portal-burgermenu-text-hover-color: var(--teal-darken-1);
    --portal-burgermenu-overlay-color: var(--teal-fade-35);
    --portal-burgermenu-light-overlay-color: var(--spritz-darken-fade-50);
    --portal-burgermenu-toggle-open-color: var(--spritz-darken-3);
    --portal-footer-content-color: var(--ink);
    --portal-footer-logo-color: var(--oak);
    --portal-mydetails-confirmation-circle-color: var(--oak-fade-50);
    --portal-mydetails-confirmation-icon-color: var(--teal);
    --portal-dashboard-mobile-welcome-color: var(--oak);
    --portal-dashboard-mobile-muted-color: var(--ink-fade-60);
    --portal-dashboard-mobile-button-edge-color: var(--ink-fade-30);
    --portal-usage-metric-color: var(--teal);
    --portal-usage-metric-zero-color: var(--teal-fade-15);
    --portal-usage-chart-baseline-color: var(--oak-fade-25);
    --portal-usage-chart-focus-outline-color: var(--spritz);
    --portal-usage-chart-bar-color: var(--spritz);
    --portal-usage-chart-bar-hover-color: var(--spritz);
    --portal-usage-chart-bar-zero-color: var(--oak-fade-25);
    --portal-usage-table-divider-color: var(--oak-fade-25);
    --portal-usage-action-color: var(--teal);
    --portal-usage-action-hover-color: var(--teal-darken-1);
    --portal-debugsessionaccount-emphasis-background-color: var(--portal-surface-strong);
    --portal-welcomecard-button-edge-color: var(--teal);
    --portal-welcomecard-button-edge-hover-color: var(--teal-darken-1);
    --portal-welcomecard-button-text-color: var(--teal);
    --portal-welcomecard-button-text-hover-color: var(--teal-darken-1);
    --portal-companionbutton-edge-color: var(--gold);
    --portal-companionbutton-edge-hover-color: var(--gold-darken-2);
    --portal-companionbutton-text-color: var(--teal);
    --portal-companionbutton-text-hover-color: var(--teal-darken-1);
    --portal-primarybutton-background-color: var(--teal);
    --portal-primarybutton-hover-background-color: var(--teal-lighten-2);
    --portal-primarybutton-disabled-color: var(--oak-darken-3);
    --portal-tealbutton-disabled-background-color: transparent;
    --portal-tealbutton-disabled-color: var(--oak-darken-3);
    --portal-tealbutton-disabled-border-color: var(--oak-darken-3);
    --portal-primarybutton-text-color: var(--oak);
    --portal-formfield-background-color: var(--ink-fade-7);
    --portal-formfield-focus-outline-color: var(--oak);
}

/* #endregion */

/* #region Backgrounds and borders */

.backgroundborder--teal {
    background-color: var(--teal);
    border-color: var(--teal);
}

.backgroundborder--primarybutton {
    background-color: var(--portal-primarybutton-background-color, var(--teal));
    border-color: var(--portal-primarybutton-background-color, var(--teal));
}

.backgroundborder--brandheader {
    background-color: var(--portal-brandheader-background-color, var(--teal));
    border-color: var(--portal-brandheader-background-color, var(--teal));
}

.backgroundborder--tealfade15 {
    background-color: var(--teal-fade-15);
    border-color: var(--teal-fade-15);
}

.backgroundborder--headeractiondivider {
    background-color: var(--portal-headeraction-divider-color, var(--teal-fade-15));
    border-color: var(--portal-headeraction-divider-color, var(--teal-fade-15));
}

.backgroundborder--tealedge {
    background-color: transparent;
    border-color: var(--teal);
}

.backgroundborder--welcomecardbuttonedge {
    background-color: transparent;
    border-color: var(--portal-welcomecard-button-edge-color, var(--teal));
}

.backgroundborder--teal-darken-1 {
    background-color: var(--teal-darken-1);
    border-color: var(--teal-darken-1);
}

.backgroundborder--brandheaderstrong {
    background-color: var(--portal-brandheader-strong-background-color, var(--teal-darken-1));
    border-color: var(--portal-brandheader-strong-background-color, var(--teal-darken-1));
}

.button.backgroundborder--teal[disabled],
.button.backgroundborder--teal[disabled]:hover {
    background-color: var(--portal-tealbutton-disabled-background-color, transparent);
    color: var(--portal-tealbutton-disabled-color, var(--oak-darken-3));
    border-color: var(--portal-tealbutton-disabled-border-color, var(--oak-darken-3));
}

.button.backgroundborder--primarybutton[disabled],
.button.backgroundborder--primarybutton[disabled]:hover {
    background-color: transparent;
    color: var(--portal-primarybutton-disabled-color, var(--oak-darken-3));
    border-color: var(--portal-primarybutton-disabled-color, var(--oak-darken-3));
}

.button.backgroundborder--teal:hover {
    background-color: var(--teal-lighten-2);
    border-color: var(--teal-lighten-2);
}

.button.backgroundborder--primarybutton:hover {
    background-color: var(--portal-primarybutton-hover-background-color, var(--teal-lighten-2));
    border-color: var(--portal-primarybutton-hover-background-color, var(--teal-lighten-2));
}

.button.backgroundborder--tealedge:hover {
    border-color: var(--teal-darken-1);
}

.button.backgroundborder--welcomecardbuttonedge:hover {
    border-color: var(--portal-welcomecard-button-edge-hover-color, var(--teal-darken-1));
}

.backgroundborder--gold {
    background-color: var(--gold);
    border-color: var(--gold);
}

.backgroundborder--chalk {
    background-color: var(--chalk);
    border-color: var(--chalk);
}

.backgroundborder--chalkbackground {
    background-color: var(--portal-chalk-background, var(--chalk));
    border-color: var(--portal-chalk-background, var(--chalk));
}

.backgroundborder--chalkfade60 {
    background-color: var(--chalk-fade-60);
    border-color: var(--chalk-fade-60);
}

.backgroundborder--chalkfade60edge {
    background-color: transparent;
    border-color: var(--chalk-fade-60);
}

.backgroundborder--spritz {
    background-color: var(--spritz);
    border-color: var(--spritz);
}

.backgroundborder--welcomecard {
    background-color: var(--portal-welcomecard-background-color, var(--spritz));
    border-color: var(--portal-welcomecard-background-color, var(--spritz));
}

.backgroundborder--burgermenu {
    background-color: var(--portal-burgermenu-background-color, var(--spritz));
    border-color: var(--portal-burgermenu-background-color, var(--spritz));
}

.backgroundborder--oak {
    background-color: var(--oak);
    border-color: var(--oak);
}

.backgroundborder--transparentoak {
    background-color: transparent;
    border-color: var(--oak);
}

.backgroundborder--transparentoakfade50 {
    background-color: transparent;
    border-color: var(--oak-fade-50);
}

.backgroundborder--transparentoakfade25 {
    background-color: transparent;
    border-color: var(--oak-fade-25);
}

.backgroundborder--sectiondivider {
    background-color: transparent;
    border-color: var(--portal-sectiondivider-border-color, var(--oak-fade-25));
}

.backgroundborder--oakfade25 {
    background-color: var(--oak-fade-25);
    border-color: var(--oak-fade-25);
}

.backgroundborder--oakfade20 {
    background-color: var(--oak-fade-20);
    border-color: var(--oak-fade-20);
}

.backgroundborder--oakfade18 {
    background-color: var(--oak-fade-18);
    border-color: var(--oak-fade-18);
}

.backgroundborder--lightpanel {
    background-color: var(--portal-lightpanel-backgroundborder-color, var(--oak-fade-18));
    border-color: var(--portal-lightpanel-backgroundborder-color, var(--oak-fade-18));
}

.backgroundborder--emptymessage {
    background-color: var(--portal-emptymessage-backgroundborder-color, var(--oak-fade-18));
    border-color: var(--portal-emptymessage-backgroundborder-color, var(--oak-fade-18));
}

.backgroundborder--oakfade15 {
    background-color: var(--oak-fade-15);
    border-color: var(--oak-fade-15);
}

.backgroundborder--oakedge {
    background-color: transparent;
    border-color: var(--oak);
}

.backgroundborder--sectionedge {
    background-color: transparent;
    border-color: var(--portal-sectionedge-border-color, var(--oak));
}

.backgroundborder--authheaderedge {
    background-color: transparent;
    border-color: var(--portal-authheader-edge-color, var(--oak));
}

.backgroundborder--goldedge {
    background-color: transparent;
    border-color: var(--gold);
}

.backgroundborder--companionbuttonedge {
    background-color: transparent;
    border-color: var(--portal-companionbutton-edge-color, var(--gold));
}

.button.backgroundborder--goldedge:hover {
    border-color: var(--gold-darken-2);
}

.button.backgroundborder--companionbuttonedge:hover {
    border-color: var(--portal-companionbutton-edge-hover-color, var(--gold-darken-2));
}

.button.backgroundborder--chalkfade60edge:hover {
    border-color: var(--chalk-fade-70);
}

.button.backgroundborder--oakedge:hover {
    border-color: var(--oak-lighten-2);
}

.button.backgroundborder--sectionedge:hover {
    border-color: var(--portal-sectionedge-hover-border-color, var(--oak-lighten-2));
}

.button.backgroundborder--authheaderedge:hover {
    border-color: var(--portal-authheader-edge-hover-color, var(--oak-lighten-2));
}

.backgroundborder--oaklighten1 {
    background-color: var(--oak-lighten-1);
    border-color: var(--oak-lighten-1);
}

.backgroundborder--ink {
    background-color: var(--ink);
    border-color: var(--ink);
}

.backgroundborder--green {
    background-color: var(--green);
    border-color: var(--green);
}

.backgroundborder--orange {
    background-color: var(--orange);
    border-color: var(--orange);
}

.backgroundborder--yellow {
    background-color: var(--yellow);
    border-color: var(--yellow);
}

.backgroundborder--red {
    background-color: var(--red);
    border-color: var(--red);
}

/* #endregion */

/* #region Text and icon colors */

.color--teal {
    color: var(--teal);
}

.color--companionbutton {
    color: var(--portal-companionbutton-text-color, var(--teal));
}

.color--welcomecardbutton {
    color: var(--portal-welcomecard-button-text-color, var(--teal));
}

.color--welcomecard {
    color: var(--portal-welcomecard-color, var(--teal));
}

.color--burgermenu {
    color: var(--portal-burgermenu-text-color, var(--teal));
}

.color--burgermenuadmin {
    color: var(--portal-burgermenu-admin-text-color, var(--teal));
}

.color--authheadercontent {
    color: var(--portal-authheader-content-color, var(--oak));
}

.color--authheadercontentmuted {
    color: var(--portal-authheader-content-muted-color, var(--oak-fade-50));
}

.color--dashboardmobilewelcome {
    color: var(--portal-dashboard-mobile-welcome-color, var(--oak));
}

.color--headerbrandtoggle {
    color: var(--portal-headerbrandtoggle-color, var(--oak));
}

.color--headertoggle {
    color: var(--portal-headertoggle-color, var(--teal));
}

.color--authaccent {
    color: var(--portal-authaccent-color, var(--teal));
}

.color--usageaction {
    color: var(--portal-usage-action-color, var(--teal));
}

.color--tealfade60 {
    color: var(--teal-fade-60);
}

.button.color--tealfade60.button--hovertealfade80:hover {
    color: var(--teal-fade-80);
}

.color--headeraction {
    color: var(--portal-headeraction-color, var(--teal-fade-60));
}

.button.color--headeraction:hover {
    color: var(--portal-headeraction-hover-color, var(--teal-fade-80));
}

.color--tealfade15 {
    color: var(--teal-fade-15);
}

.button.color--teal:hover {
    color: var(--teal-darken-1);
}

.button.color--welcomecardbutton:hover {
    color: var(--portal-welcomecard-button-text-hover-color, var(--teal-darken-1));
}

.button.color--burgermenu:hover {
    color: var(--portal-burgermenu-text-hover-color, var(--teal-darken-1));
}

.button.color--burgermenuadmin:hover {
    color: var(--portal-burgermenu-text-hover-color, var(--teal-darken-1));
}

.button.color--companionbutton:hover {
    color: var(--portal-companionbutton-text-hover-color, var(--teal-darken-1));
}

.button.color--authaccent:hover {
    color: var(--portal-authaccent-hover-color, var(--teal-darken-1));
}

.button.color--usageaction:hover {
    color: var(--portal-usage-action-hover-color, var(--teal-darken-1));
}

.button.color--headerbrandtoggle:hover {
    color: var(--portal-headerbrandtoggle-hover-color, var(--oak-lighten-2));
}

.button.color--headertoggle:hover {
    color: var(--portal-headertoggle-hover-color, var(--teal-darken-1));
}

.color--gold {
    color: var(--gold);
}

.color--chalk {
    color: var(--chalk);
}

.color--chalkfade60 {
    color: var(--chalk-fade-60);
}

.color--spritz {
    color: var(--spritz);
}

.color--brandheadercontent {
    color: var(--portal-brandheader-content-color, var(--spritz));
}

.color--spritzfade60 {
    color: var(--spritz-fade-60);
}

.color--brandheadercontentfade60 {
    color: var(--portal-brandheader-content-muted-color, var(--spritz-fade-60));
}

.color--accounthandlertilecontent {
    color: var(--portal-accounthandlertile-content-color, var(--spritz));
}

.color--oak {
    color: var(--oak);
}

.color--primarybutton {
    color: var(--portal-primarybutton-text-color, var(--oak));
}

.color--oakdarken1 {
    color: var(--oak-darken-1);
}

.color--oakdarken2 {
    color: var(--oak-darken-2);
}

.color--emptymessage {
    color: var(--portal-emptymessage-color, var(--oak-darken-2));
}

.button.color--oak:hover {
    color: var(--oak-lighten-2);
}

.button.color--chalkfade60:hover {
    color: var(--chalk-fade-70);
}

.color--ink {
    color: var(--ink);
}

.color--footercontent {
    color: var(--portal-footer-content-color, var(--ink));
}

.color--inkfade50 {
    color: var(--ink-fade-50);
}

.color--green {
    color: var(--green);
}

.color--orange {
    color: var(--orange);
}

.color--yellow {
    color: var(--yellow);
}

.color--red {
    color: var(--red);
}

/* #endregion */