/*--------------------------------------------------------------
My Conning Client Portal Styles
----------------------------------------------------------------
1. Reset
2. Theme
3. Global
4. Layout
5. Components
6. Animations
7. Utilities
8. Charts
--------------------------------------------------------------*/

/* Define cascade */
@layer reset, theme, global, layout, components, animation, utilities;

/*--------------------------------------------------------------
1. Reset
--------------------------------------------------------------*/
@layer reset {
    /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

    /* Document
        1. Correct the line height in all browsers.
        2. Prevent adjustments of font size after orientation changes in iOS.
        3. Set default box model to border-box
        4. Set font size to 10px for easy px-to-rem/em conversion
    ========================================================================== */

    html {
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        box-sizing: border-box;
        font-size: 62.5%;
    }

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

    /* Sections
    ========================================================================== */

    /* Remove the margin in all browsers. */
    body {
        margin: 0;
    }

    /* Correct the font size and margin on `h1` elements within `section` and article` contexts in Chrome, Firefox, and Safari. */
    h1 {
        font-size: 2em;
        margin: 0;
    }

    /* Reset margins on type elements */
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        margin: 0;
    }

    /* Grouping content
    ========================================================================== */

    /*
        1. Add the correct box sizing in Firefox.
        2. Show the overflow in Edge and IE.
    */
    hr {
        box-sizing: content-box;
        height: 0;
        overflow: visible;
    }

    /*
        1. Correct the inheritance and scaling of font size in all browsers.
        2. Correct the odd `em` font sizing in all browsers.
    */
    pre {
        font-family: monospace, monospace;
        font-size: 1em;
    }

    /* Text-level semantics
    ========================================================================== */

    /*
        1. Remove the bottom border in Chrome 57-
        2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
    */
    abbr[title] {
        border-bottom: none;
        text-decoration: underline;
        text-decoration: underline dotted;
    }

    /* Add the correct font weight in Chrome, Edge, and Safari. */
    b,
    strong {
        font-weight: bolder;
    }

    /*
        1. Correct the inheritance and scaling of font size in all browsers.
        2. Correct the odd `em` font sizing in all browsers.
    */
    code,
    kbd,
    samp {
        font-family: monospace, monospace;
        font-size: 1em;
    }

    /* Add the correct font size in all browsers. */
    small {
        font-size: 80%;
    }

    /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sub {
        bottom: -0.25em;
    }

    sup {
        top: -0.5em;
    }

    /* Forms
    ========================================================================== */

    /*
        1. Change the font styles in all browsers.
        2. Remove the margin in Firefox and Safari.
    */
    button,
    input,
    optgroup,
    select,
    textarea {
        font-family: inherit;
        font-size: 100%;
        line-height: 1.15;
        margin: 0;
    }

    /* Show the overflow in Edge. */
    button,
    input {
        overflow: visible;
    }

    /*
        1. Remove the inheritance of text transform in Edge, Firefox, and IE.
        2. Remove the inheritance of text transform in Firefox.
    */
    button,
    select {
        text-transform: none;
    }

    select {
        appearance: none; /* Reset default styles, including removing the default dropdown arrow */
        background-color: transparent;
        border: none;
        padding: 0 1em 0 .5em;
        width: 100%;
        cursor: inherit;
    }

    /* Correct the inability to style clickable types in iOS and Safari. */
    button,
    [type="button"],
    [type="reset"],
    [type="submit"] {
        -webkit-appearance: button;
    }

        /* Remove the inner border and padding in Firefox. */
        button::-moz-focus-inner,
        [type="button"]::-moz-focus-inner,
        [type="reset"]::-moz-focus-inner,
        [type="submit"]::-moz-focus-inner {
            border-style: none;
            padding: 0;
        }

        /* Restore the focus styles unset by the previous rule. */
        button:-moz-focusring,
        [type="button"]:-moz-focusring,
        [type="reset"]:-moz-focusring,
        [type="submit"]:-moz-focusring {
            outline: 1px dotted ButtonText;
        }

    /* Correct the padding in Firefox. */
    fieldset {
        padding: 0;
        border: none;
    }

    /*
        1. Correct the text wrapping in Edge.
        2. Correct the color inheritance from fieldset`elements in IE.
        3. Remove the padding so developers are not caught out when they zero out fieldset` elements in all browsers.
    */
    legend {
        box-sizing: border-box;
        color: inherit;
        display: table;
        max-width: 100%;
        padding: 10px 0 0 0;
        white-space: normal;
    }

    /* Add the correct vertical alignment in Chrome, Firefox, and Opera. */
    progress {
        vertical-align: baseline;
    }

    /* Correct the cursor style of increment and decrement buttons in Chrome. */
    [type="number"]::-webkit-inner-spin-button,
    [type="number"]::-webkit-outer-spin-button {
        height: auto;
    }

    /*
        1. Correct the odd appearance in Chrome and Safari.
        2. Correct the outline style in Safari.
    */
    [type="search"] {
        -webkit-appearance: textfield;
        outline-offset: -2px;
    }

        /* Remove the inner padding in Chrome and Safari on macOS. */
        [type="search"]::-webkit-search-decoration {
            -webkit-appearance: none;
        }

    /*
        1. Correct the inability to style clickable types in iOS and Safari.
        2. Change font properties to `inherit` in Safari.
    */
    ::-webkit-file-upload-button {
        -webkit-appearance: button;
        font: inherit;
    }

    /* Graphics
    ========================================================================== */

    /* Prevents icons from getting cropped */
    svg {
        overflow: visible;
    }

    /* Removes added margin applied by browsers */
    figure {
        margin: 0;
    }

    /* Interactive
    ========================================================================== */

    /* Add the correct display in Edge, IE 10+, and Firefox. */
    details {
        display: block;
    }

    /* Add the correct display in all browsers. */
    summary {
        display: list-item;
    }

    /* Default focus outline */
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="tabpanel"],
    .a11y-modal,
    .btn {
        --outline-size: max(2px, 0.15em);
        --outline-style: solid;
        --outline-color: currentColor;
        &:focus-visible

{
    outline: var(--outline-size) var(--outline-style) var(--outline-color);
    outline-offset: var(--outline-offset, var(--outline-size));
}

}

/* Removes gray background when button or link is tapped in iOS */
a,
button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Baseline for default links, relatively sized thickness and offset */
a {
    text-decoration-thickness: max(0.08em, 1px);
    text-underline-offset: 0.15em;
}

button {
    border: none;
    cursor: pointer;
}

/* Scroll padding allowance above anchor links */
:target {
    scroll-padding-block-start: 2rem;
}

/* Scroll padding allowance below focused elements to ensure they are clearly in view */
:focus {
    scroll-padding-block-end: 6vh;
}
    .tc-button-container {
        display: flex;
        justify-content: center; 
        gap: 10px; 
        margin-top: 20px; 
    }
    .tc-text-format {
        color: var(--color-accent-secondary);
    }
}

/*--------------------------------------------------------------
2. Theme
----------------------------------------------------------------
I. CSS Variables
II. Typesetting
III. Global
IV. Utilities
--------------------------------------------------------------*/
@layer theme {
    /* I. CSS Variables - Global theme variables
    ==========================================================================*/

    :root {
        /* Typography - Type scale & settings
        ========================================================================== */
        /*--------------------------------------------------------------
        Type Scale
            > Variables for fonts
            > Variable for base font-size
            > Variable for scaling ratio
            > Type scale based on font-size and scaling ratio
            > Variables for line-heights
            > Breakpoints to adjust typesetting
        --------------------------------------------------------------*/
        /* Open Sans, embedded in head through Google Fonts */
        --font-primary: "Open Sans", sans-serif; /* ADD FALLBACK SYSTEM FONT */
        /* Base font size for site on mobile, 16px */
        --text-base-size: 1.6rem;
        /* Base scaling ratio */
        --text-scale-ratio: 1.125;
        /* Type scale, these are the mobile font-sizes */
        --text-xxxs: calc((var(--text-base-size) / var(--text-scale-ratio)) / var(--text-scale-ratio) * var(--text-scale-ratio)); /* 14.22px */
        --text-xxs: calc(var(--text-xxxs) * var(--text-scale-ratio)); /* 16px */
        --text-xs: calc(var(--text-xxs) * var(--text-scale-ratio) * var(--text-scale-ratio)); /* 20.25px */
        --text-sm: calc(var(--text-xs) * var(--text-scale-ratio)); /* 22.78px */
        --text-md: calc(var(--text-sm) * var(--text-scale-ratio)); /* 25.63px */
        --text-lg: calc(var(--text-md) * var(--text-scale-ratio)); /* 28.83px */
        --text-xl: calc(var(--text-lg) * var(--text-scale-ratio)); /* 32.44px */
        --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio)); /* 36.49px */
        --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio)); /* 41.05px */
        /* Line-heights */
        --heading-line-height: calc(4px + 2ex + 4px);
        --base-line-height: 1.7;
        /* Letter spacing */
        --letter-space-xxl: 0.15em;
        --letter-space-xl: 0.11em;
        --letter-space-lg: 0.078em;
        --letter-space-md: 0.063em;
        --letter-space-sm: 0.054em;
        --letter-space-xs: 0.036em;
        --letter-space-xxs: 0.018em;
        /* Font weights */
        --wght-light: 300;
        --wght-regular: 400;
        --wght-semibold: 560;
        --wght-bold: 650;
        /* Helpers */
        --text-label: clamp(calc(var(--text-xxxs) + var(--text-xxxs)), 1.25vw, var(--text-xs));
        --card-title: clamp(var(--text-md), 2.15vw, var(--text-lg));
        --module-title-minor: clamp(var(--text-sm), 6vw, var(--text-md));
        --modal-title: clamp(var(--text-sm), 1.5vw, var(--text-md));
        --mini-text: clamp(calc(var(--text-xxxs) * 1), 0.5vw, calc(var(--text-xxxs) * 1.05));
        --article-teaser: clamp(calc(var(--text-base-size) * 1.1), 1.15vw, calc(var(--text-base-size) * 1.14));
        /* Spacing
        ========================================================================== */
        /*--------------------------------------------------------------
        Textual spacing
            > Set in ems
            > Use for spacing with elements such as paragraphs, headings or blockquotes
        --------------------------------------------------------------*/
        --em-space-unit: 1em;
        --em-space-xxxs: calc(0.25 * var(--em-space-unit));
        --em-space-xxs: calc(0.375 * var(--em-space-unit));
        --em-space-xs: calc(0.5 * var(--em-space-unit));
        --em-space-sm: calc(0.75 * var(--em-space-unit));
        --em-space-md: calc(1.25 * var(--em-space-unit));
        --em-space-lg: calc(2 * var(--em-space-unit));
        --em-space-xl: calc(3.25 * var(--em-space-unit));
        --em-space-xxl: calc(5.25 * var(--em-space-unit));
        --em-space-xxxl: calc(8.5 * var(--em-space-unit));
        /*--------------------------------------------------------------
        Block Spacing
            > Set in rems
            > Use for spacing with block elements such as divs, sections or headers
        --------------------------------------------------------------*/
        --rem-space-unit: 1rem;
        --rem-space-xxxs: calc(0.25 * var(--rem-space-unit));
        --rem-space-xxs: calc(0.375 * var(--rem-space-unit));
        --rem-space-xs: calc(0.5 * var(--rem-space-unit));
        --rem-space-sm: calc(0.75 * var(--rem-space-unit));
        --rem-space-md: calc(1.25 * var(--rem-space-unit));
        --rem-space-lg: calc(2 * var(--rem-space-unit));
        --rem-space-xl: calc(3.25 * var(--rem-space-unit));
        --rem-space-xxl: calc(5.25 * var(--rem-space-unit));
        --rem-space-xxxl: calc(8.5 * var(--rem-space-unit));
        /* Spacing helpers */
        --btn-padding: var(--em-space-sm) clamp(calc(var(--em-space-sm) + var(--em-space-xxxs)), 3.2vw, var(--em-space-lg));
        --card-padding-vert: calc(var(--rem-space-lg) + var(--rem-space-sm));
        --card-padding-inline: var(--rem-space-xl);
        /* Border Settings
        ========================================================================== */
        /* Border Widths - No rem/em units for these */
        --brdr-xxs: max(1px, 0.07em);
        --brdr-xs: max(2px, 0.12em);
        --brdr-sm: max(3px, 0.15em);
        --brdr-md: max(4px, 0.17em);
        --brdr-lg: max(5px, 0.19em);
        --brdr-xl: max(8px, 0.21em);
        --brdr-xxl: max(12px, 0.23em);
        /* Border style */
        --brdr-style: solid;
        /* Border color */
        --brdr-color: currentColor;
        /* Border Radius */
        --brdr-radius-pill: 6.25em; /* Creates pill shape element */
        --brdr-radius-round: 100%; /* Creates circle shape element */
        /* Border, detault style followed by helpers */
        --brdr: var(--brdr-xs) var(--brdr-style) var(--brdr-color);
        --brdr-lite-gray: var(--brdr-xs) var(--brdr-style) var(--color-base-light);
        /* Box Shadow Settings
        ========================================================================== */
        --shadow-x-offset: 0px;
        --shadow-y-offset: 2px;
        --shadow-blur: 2px;
        --shadow-spread: 0px;
        --shadow-color: rgba(115, 115, 115, 0.25);
        --shadow: var(--shadow-x-offset) var(--shadow-y-offset) var(--shadow-blur) var(--shadow-spread) var(--shadow-color);
        /* Pseudo Elements - base settings
        ========================================================================== */
        --pseudo-content: "";
        --pseudo-position: relative;
        --pseudo-display: block;
        --pseudo-img: url(../images/ico-menu.svg);
        --pseudo-img-size: 100%;
        --pseudo-img-repeat: no-repeat;
        --pseudo-width: 1em;
        --pseudo-height: 1em;
        --pseudo-bg-color: var(--color-primary);
        /* Form Inputs
        ========================================================================== */
        --input-brdr: var(--input-brdr-size, var(--brdr-xs)) var(--brdr-style) var(--input-color, currentColor);
        /* Animation - base settings
        ========================================================================== */
        --timing: 0.3s;
        --easing: ease-in-out;
        /* Layout Grid - base settings for grid and flexbox !REVIEW & MODIFY!
        ========================================================================== */
        --layout-col-min: 30ch;
        --layout-col-num: 12;
        --layout-col-width: 1fr;
        --gutter-static: clamp(calc(var(--rem-space-md) + var(--rem-space-xxs)), 5vw, var(--rem-space-xl));
        --gutter-static-large: 44rem;
        --max-content-width: min(var(--content-max, 140ch), 100% - 4rem);
        --max-container-width: 160rem;
        /* Breakpoints
        ========================================================================== */
        --brkpnt-xxs: 40em; /* 640px */
        /* Colors
        ========================================================================== */
        /* Blue */
        --color-primary-lightest: #eff2f7;
        --color-primary-lighter: #61a3d7;
        --color-primary-light: #227dae;
        --color-primary: #0071c2; /* Color contrast compliant variation of #007FCF */
        --color-primary-dark: #00659a;
        --color-primary-darker: #07344b;
        /* Lower saturation blue */
        --color-primary-desat: #709ec1;
        /* Teal */
        --color-secondary-light: #7cced3;
        --color-secondary: #3d9da4;
        --color-secondary-dark: #227dae;
        /* Green */
        --color-accent-primary-light: #c2efda;
        --color-accent-primary: #22a76a;
        --color-accent-primary-dark: #0c7244;
        /* Red */
        --color-accent-secondary-light: #f8e9e9;
        --color-accent-secondary: #a21414;
        /* Blue Gray */
        --color-base-lighter: #eeeeee;
        --color-base-light: #dfdfdf;
        --color-base: #63778c;
        --color-base-dark: #54677b;
        --color-base-darkest: #010f30;
        /* Neutral Gray */
        --color-grayscale-lightest: #ffffff;
        --color-grayscale-lighter: #aaaaaa;
        --color-grayscale-light: #707070;
        --color-grayscale: #3f3f3f;
        --color-grayscale-dark: #424242;
        /* No color */
        --color-none: transparent;
    }

    /* II. Typesetting
    ========================================================================== 
        > Generic Type Styles
        > Heading Styles
        > Base body styles
    */

    /*--------------------------------------------------------------
    Adjust text scale ratio @688px+:
        > text-xxxs = 13.43px
        > text-xxs = 16px
        > text-xs = 22.70px
        > text-sm = 27.03px
        > text-md = 32.19px
        > text-lg = 38.34px
        > text-xl = 45.67px
        > text-xxl = 54.39px
        > text-xxxl = 64.78px
  --------------------------------------------------------------*/
    @media (width >= 56em) {
        :root {
            --text-scale-ratio: 1.195;
        }
    }

    h1,
    .h1,
    h2,
    .h2,
    h3,
    .h3,
    h4,
    .h4 {
        line-height: var(--heading-line-height);
    }

    h1,
    .h1,
    h2,
    .h2 {
        font-weight: var(--wght-light);
    }

    h1,
    .h1 {
        font-size: var(--text-xxxl);
    }

    h2,
    .h2 {
        font-size: var(--text-lg);
    }

    h3,
    .h3 {
        font-weight: var(--wght-semibold);
        &:where(:has(+ p))

{
    margin-bottom: clamp(var(--em-space-xxxs), 0.4vw, var(--em-space-xxs));
}

}

.h4,
h4 {
    font-size: var(--text-xs);
    font-weight: var(--wght-semibold);
}

p {
    &:where(:has(+ ul))

{
    margin-bottom: clamp(var(--em-space-sm), 6vw, var(--em-space-md));
}

&:where(:has(+ .btn)) {
    margin-bottom: clamp(var(--em-space-xs), 1vw, var(--em-space-sm));
}

}

.hero__title,
.hero__txt {
    color: var(--color-grayscale-lightest);
    text-align: center;
    margin-bottom: clamp(var(--em-space-xs), 5.8vh, calc(var(--em-space-sm) + var(--em-space-xxxs)));
}

.hero__title--sm {
    display: block;
    font-size: var(--text-lg);
    line-height: 1;
    margin-bottom: var(--em-space-xxxs);
}

}

/*--------------------------------------------------------------
3. Global
--------------------------------------------------------------*/
@layer global {
    /* Stop animations if user specifies. The very short durations below mean JavaScript that relies on events still works */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.001ms;
            animation-iteration-count: 1;
            transition-duration: 0.001ms;
        }
    }

    html {
        color-scheme: light;
        accent-color: var(--color-primary);
    }

    body {
        font-family: var(--font-primary);
        font-size: var(--text-xxs);
        font-weight: var(--wght-regular);
        line-height: var(--base-line-height);
        color: var(--color-grayscale-dark);
        background-color: var(--color-base-lighter);
    }

    img {
        width: 100%;
    }

    /* Default color for svg graphics */
    svg path {
        fill: currentColor;
    }

    /* Make text in form inputs italic */
    input,
    select,
    textarea {
        font-style: italic;
    }

    input,
    select,
    textarea,
    button {
        &:disabled

{
    opacity: 0.5;
    cursor: not-allowed;
}

}

select {
    cursor: pointer;
}

/* Generates pseudo element */
.pseudo-el-pre::before,
.pseudo-el-post::after {
    content: var(--el-content, var(--pseudo-content));
    position: var(--el-position, absolute);
    display: var(--el-display, var(--pseudo-display));
    background-color: var(--el-bg-color, currentColor);
    width: var(--el-width, var(--pseudo-width));
    height: var(--el-height, var(--pseudo-height));
}

/* Base pseudo leading icon styling */
:where(:is(.text--with-ico-lead)),
:where(:is(.btn--with-ico-lead)),
:where(:is(.link--with-ico-lead)) {
    text-decoration: none;
    align-items: center;
    &:before

{
    content: var(--ico-lead-content, var(--pseudo-content));
    position: var(--ico-lead-position, var(--pseudo-position));
    display: var(--ico-lead-display, var(--pseudo-display));
    background-image: var(--ico-lead-img, var(--pseudo-img));
    background-size: var(--ico-lead-img-size, var(--pseudo-img-size));
    background-repeat: var(--ico-lead-img-repeat, var(--pseudo-img-repeat));
    width: var(--ico-lead-img-width, var(--pseudo-width));
    height: var(--ico-lead-img-height, var(--pseudo-height));
    left: 0;
}

}

/* Base pseudo trailing icon styling */
:where(:is(.text--with-ico-trail)),
:where(.btn--with-ico-trail:has(:not(> .btn__ico))),
:where(:is(.link--with-ico-trail)) {
    text-decoration: none;
    align-items: center;
    &:after

{
    content: var(--ico-trail-content, var(--pseudo-content));
    position: var(--ico-trail-position, var(--pseudo-position));
    display: var(--ico-trail-display, var(--pseudo-display));
    background-image: var(--ico-trail-img, var(--pseudo-img));
    background-size: var(--ico-trail-img-size, var(--pseudo-img-size));
    background-repeat: var(--ico-trail-img-repeat, var(--pseudo-img-repeat));
    width: var(--ico-trail-img-width, var(--pseudo-width));
    height: var(--ico-trail-img-height, var(--pseudo-height));
    right: 0;
}

}

/* Don't show pseudo icons if .btn__ico element is present in button */
.btn--with-ico-lead:has(.btn__ico)::before {
    display: none;
}

}

/*--------------------------------------------------------------
4. Layout
--------------------------------------------------------------*/
@layer layout {
    /* CSS Grid layout */
    .layout-grid {
        --layout-grid-min: 30ch;
        --layout-grid-gap: 1.6vmax;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--layout-grid-min)), 1fr));
        gap: var(--layout-grid-gap);
    }

    /* Flexbox layout */
    .flex-layout-grid {
        --flex-grid-min: 20rem;
        --flex-grid-gap: 1.6vmax;
        display: flex;
        flex-wrap: wrap;
        gap: var(--flex-grid-gap);
        > *

{
    flex: 1 1 var(--flex-grid-min);
}

}

/* Default container query setting */
:is(.layout-grid, .flex-layout-grid) > * {
    container: var(--grid-item-container, grid-item) / inline-size;
}

/* CLEAN UP! Outer gutter for main content area */
.main {
    .section

{
    padding: 0 var(--rem-space-xl);
    margin-bottom: clamp(var(--rem-space-xl), 14.5vw, var(--rem-space-xxl));
}

}

/* Content wrapper */
.section__inner {
    width: var(--max-content-width);
    margin-inline: auto;
}

}

/*--------------------------------------------------------------
5. Components
--------------------------------------------------------------*/
@layer components {
    /* Lists 
    ========================================================================== */
    ul,
    ol {
        display: grid;
        --layout-grid-gap: var(--rem-space-md);
        margin: 0 0 0 calc(var(--em-space-md) + var(--em-space-xxs));
        padding: 0;
        gap: var(--layout-grid-gap);
        li

{
    padding-left: var(--em-space-xxxs);
}

/* Any ul, ol that does not have .list class does not get list styling */
&:where(:is(:not(.list))) {
    list-style: none;
    margin: 0;
}

}

ul {
    li

{
    text-align: left;
    &::marker

{
    font-size: 104%;
    color: var(--color-primary-light);
}

}
}

ol {
    li

{
    &::marker

{
    color: var(--color-primary-light);
    font-weight: var(--wght-bold);
}

}
}

/* Form inputs 
    ========================================================================== */
.form__element {
    display: grid;
    grid-template-columns: 1.5em auto;
    gap: var(--em-space-sm);
    align-items: start;
    line-height: 1.4;
    color: var(--color-base);
    &:has(+ *)

{
    margin-bottom: calc(var(--rem-space-md) + var(--rem-space-xxxs));
}

&.element--reverse {
    color: var(--color-grayscale-lightest);
    input [type="checkbox"]

{
    &:checked

{
    background-color: currentColor;
    border-color: currentColor;
    &::before

{
    box-shadow: inset 1em 1em var(--color-primary-dark);
}

}
}
}

&.element--search {
    grid-template-columns: 1fr;
    gap: var(--em-space-xxxs);
    .searchbox

{
    display: grid;
    grid-template-columns: 1fr;
    border-bottom: var(--brdr);
    margin-top: calc(var(--em-space-sm) * -1);
}

&:has(+ fieldset, + .fieldset) {
    margin-bottom: calc(var(--card-padding-vert) + var(--rem-space-xxs));
}

}

/* Layout for textarea blocks */
&:has(.input--textarea) {
    display: flex;
    flex-direction: column;
    gap: var(--em-space-xs);
    margin-bottom: 0;
}

&.indent {
    margin-left: calc(var(--rem-space-xl) + var(--rem-space-xxxs));
    margin-bottom: calc(var(--rem-space-lg) + var(--rem-space-xxxs));
}

}

.form__label {
    display: block;
    margin-bottom: clamp(var(--em-space-xxxs), 0.75vw, var(--em-space-xxs));
    color: var(--color-base);
    /* If input is invalid, change label to red */
    &:has(+ input[aria-invalid="true"]), &:has(+ .selectbox select[aria-invalid="true"]), &:has(+ textarea[aria-invalid="true"])

{
    color: var(--color-accent-secondary-light);
}

/* If input is required, append asterisk to label */
&:has(+ input[aria-required="true"]),
&:has(+ .selectbox select[aria-required="true"]),
&:has(+ textarea[aria-required="true"]) {
    &:after

{
    content: "*";
    color: var(--color-accent-secondary-light);
    margin-left: var(--em-space-xxxs);
}

}
}

.label--reverse,
.input--reverse {
    color: var(--color-grayscale-lightest);
}

/* Text Inputs */
input[type="text"],
input[type="email"],
input[type="tel"] {
    border: none;
    border-bottom: var(--input-brdr);
    border-bottom-color: var(--color-primary);
    width: 100%;
    max-width: 65ch;
    padding-block: var(--em-space-xxs);
    &[aria-invalid="true"]

{
    border-color: var(--color-accent-secondary-light);
}

}

input[type="tel"] {
    max-width: 30ch;
}

input[type="email"] {
    max-width: 60ch;
}

/* Checkboxes & radios */
input[type="checkbox"],
input[type="radio"] {
    cursor: pointer;
    width: 1.5em;
    aspect-ratio: 1/1;
    appearance: none;
    background-color: transparent;
    font: inherit;
    color: currentColor;
    border: var(--input-brdr);
    &:disabled

{
    opacity: 0.6;
    cursor: not-allowed;
    + label

{
    opacity: 0.6;
    cursor: not-allowed;
}

}

& + label {
    margin-bottom: 0;
    cursor: pointer;
    top: calc(var(--em-space-xxxs) * 0.1);
    position: relative;
}

}

input[type="checkbox"] {
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    transition: background-color 0.2s var(--easing);
    &::before

{
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    box-shadow: inset 1em 1em var(--color-grayscale-lightest);
    background-color: CanvasText; /* For Windows High Contrast Mode */
    transition: transform 0.3s var(--easing);
}

&:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    &::before

{
    transform: scale(1);
}

}
}

input[type="radio"] {
    border-radius: 50%;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    cursor: pointer;
    &:before

{
    content: "";
    width: 0.88889em;
    height: 0.88889em;
    border-radius: 50%;
    transform: scale(0);
    box-shadow: inset 1em 1em currentColor;
    background-color: CanvasText;
    transition: 120ms transform var(--easing);
}

&:checked {
    color: var(--color-primary);
    border-color: var(--color-primary);
    &::before

{
    transform: scale(1);
}

}

&.input--reverse {
    color: var(--color-grayscale-lightest);
    border-color: var(--color-grayscale-lightest);
}

}

textarea {
    width: 100%;
    height: 30ch;
    color: var(--color-base-darkest);
    border: var(--input-brdr);
    border-color: var(--color-base);
    padding: var(--rem-space-md);
    transition: border-color var(--timing) var(--easing);
    &:focus-visible

{
    border-color: var(--color-base-darkest);
}

&[aria-invalid="true"] {
    border-color: var(--color-accent-secondary-light);
}

}

/* Select inputs */
.selectbox {
    display: grid;
    grid-template-areas: "select";
    color: var(--color-primary);
    border-bottom: var(--brdr);
    cursor: pointer;
    align-items: center;
    padding: var(--em-space-xs) 8px var(--em-space-xs);
    font-style: italic;
    max-width: 60ch;
    &::after

{
    content: var(--pseudo-content);
    background-color: currentColor;
    width: 16px;
    height: 8px;
    clip-path: polygon(85% 0, 100% 0, 50% 100%, 0 0, 15% 0, 50% 70%);
    justify-self: end;
}

&:has(.input--reverse) {
    color: var(--color-grayscale-lightest);
}

&:has(select[aria-invalid="true"]) {
    border-bottom-color: var(--color-accent-secondary-light);
}

+ .form__label {
    margin-top: clamp(var(--rem-space-lg), 2.1vw, var(--rem-space-xxl));
}

}

select,
.selectbox:after {
    grid-area: select;
}

select {
    option

{
    color: var(--color-base-darkest);
}

}

/* Date range picker */
input[type="date"] {
    width: 100%;
    border: none;
    border-bottom: var(--brdr-xs) var(--brdr-style) var(--color-primary);
    position: relative;
    padding: var(--em-space-xs) 0 var(--em-space-xs) var(--em-space-xxs);
    &::after

{
    --el-bg-color: var(--color-grayscale-lightest);
    --el-width: 1.25em;
    --el-height: 1.35em;
    top: var(--em-space-xs);
    right: 0;
    background-image: url(../images/ico-calendar.svg);
    background-size: 94%;
    background-repeat: no-repeat;
    pointer-events: none;
}

}

/* Input spacing */
input:is(:not([type="checkbox"], [type="radio"])),
.selectbox,
.form__element:is(:not(.element--checkbox, .element--radio)),
.form__mssg {
    + .form__label, + .form__element

{
    --dash-scale-val: 2.6vw;
    --dash-space-max: var(--rem-space-xxl);
    --dash-space-min: var(--rem-space-xl);
    margin-top: clamp(var(--dash-space-min), var(--dash-scale-val), var(--dash-space-max));
}

}

.legend__title {
    font-size: var(--article-teaser);
    margin-bottom: calc(var(--rem-space-md) + var(--rem-space-xs));
    &:has(.form__required)

{
    &::after

{
    content: "*";
    color: var(--color-accent-secondary-light);
    margin-left: calc(var(--em-space-xxxs) * 0.5);
}

}
}

.form__note {
    font-weight: var(--wght-regular);
    font-style: italic;
    .note__title

{
    font-size: var(--article-teaser);
}

}

.form__mssg {
    .mssg--error

{
    display: block;
    color: var(--color-accent-secondary);
    background-color: var(--color-accent-secondary-lightest);
    border-left: var(--brdr-lg) var(--brdr-style) var(--color-accent-secondary);
    margin-top: var(--em-space-sm);
    padding-block: var(--em-space-xs);
    padding-inline: var(--em-space-sm);
    width: fit-content;
    /* If no text in mssg, remove padding so mssg block isn't visible */
    &:empty

{
    padding: 0;
}

}
}

.modal__section {
    border: none;
    &:is(:not(:last-of-type))

{
    --dash-scale-val: 6vw;
    margin-bottom: clamp(var(--dash-space-min), calc(var(--dash-scale-val) * 1.25), var(--dash-space-max));
    padding-bottom: clamp(var(--dash-space-min), var(--dash-scale-val), var(--dash-space-max));
    border-bottom: var(--brdr-lite-gray);
}

&:has(.selectbox, input[type="date"]) {
    padding-bottom: clamp(var(--dash-space-min), var(--dash-scale-val), calc(var(--dash-space-max) * 1.5));
}

&:is(:last-of-type) {
    &:has(.selectbox, input[type="date"])

{
    padding-bottom: clamp(var(--dash-space-min), var(--dash-scale-val), calc(var(--dash-space-max) * 0.25));
}

}

&:has(.selectbox + .form__aside) {
    padding-bottom: clamp(var(--dash-space-min), var(--dash-scale-val), calc(var(--dash-space-max) * 1.25));
}

.selectbox {
    + .form__label

{
    margin-top: clamp(var(--rem-space-lg), 2.2vw, var(--rem-space-xxl));
}

&:has(+ .form__aside) {
    margin-bottom: clamp(var(--dash-space-min), var(--dash-scale-val), calc(var(--dash-space-max) * 0.75));
}

}

input[type="text"],
input[type="email"] {
    + .form__label

{
    margin-top: clamp(var(--dash-space-min), var(--dash-scale-val), calc(var(--dash-space-max) * 0.25));
}

}

.form__note {
    border: var(--brdr-xs) var(--brdr-style) var(--color-primary);
    font-style: normal;
    .note__title

{
    color: var(--color-grayscale-lightest);
    background-color: var(--color-primary);
    padding: var(--em-space-xs) var(--em-space-sm);
}

.note__body {
    padding: var(--em-space-md);
}

}

*:has(+ .form__note) {
    margin-bottom: clamp(var(--dash-space-min), calc(var(--dash-scale-val) * 2.25), calc(var(--dash-space-max) * 1.5));
}

}

/* Search */
input[type="search"] {
    background-color: transparent;
    grid-row: 1;
    border: none;
    align-self: end;
    margin-bottom: var(--em-space-xxs);
    padding: var(--em-space-xxs);
    + .form__btn

{
    grid-row: 1;
    border: none;
    border-radius: 0;
    padding: var(--rem-space-sm) calc(var(--rem-space-xs) + var(--rem-space-xxs)) calc(var(--rem-space-xs) + var(--rem-space-xxs)) var(--rem-space-md);
    color: var(--color-grayscale-lightest);
    .ico--search

{
    width: 1.5em;
    aspect-ratio: 1 / 1;
}

&:hover,
&:focus {
    background-color: transparent;
}

}

&.input--reverse {
    color: var(--color-grayscale-lightest);
}

}

.section__search {
    container: search-block / inline-size;
    .form__fieldset

{
    display: flex;
    flex-wrap: wrap;
    column-gap: clamp(var(--em-space-lg), 1.2vw, var(--em-space-xl));
    row-gap: var(--em-space-sm);
}

.element--radio {
    flex-basis: 35%;
    &:nth-last-of-type(-n + 2)

{
    margin-bottom: 0;
}

}
}

@container search-block (inline-size >= 60ch) {
    .section__search {
        .element--radio

{
    margin-bottom: 0;
    flex-basis: unset;
    &:nth-last-of-type(-n + 2)

{
    margin-bottom: unset;
}

}
}
}

/* Links
    ========================================================================== */
a {
    color: var(--link-color, var(--color-grayscale-dark));
    text-decoration-color: var(--underline-color, var(--color-primary-light));
    transition: color var(--timing) var(--easing), text-decoration-color var(--timing) var(--easing);
    &:hover, &:focus-visible

{
    --link-color: var(--color-primary-light);
    --underline-color: transparent;
}

}

.link--reverse {
    color: var(--color-grayscale-lightest);
    --underline-color: var(--color-grayscale-lightest);
    &:hover, &:focus

{
    color: var(--color-primary);
    background-color: var(--color-grayscale-lightest);
}

}

/* Links & buttons w/icons */
.link--with-ico-lead,
.btn--with-ico-lead {
    color: var(--color-primary);
    &::before

{
    --pseudo-img: url(../images/ico-carat.svg);
    --pseudo-img-size: 28%;
    --pseudo-width: 1.4em;
    --pseudo-height: 1.4em;
    background-position: center;
    background-color: var(--color-primary);
    border-radius: 100%;
    left: calc(var(--em-space-sm) * -0.75);
}

}

.link--with-ico-trail,
.btn--with-ico-trail {
    color: var(--color-primary);
    &::after

{
    --pseudo-img: url(../images/ico-carat.svg);
    --pseudo-img-size: 28%;
    --pseudo-width: 1.4em;
    --pseudo-height: 1.4em;
    background-position: center;
    background-color: var(--color-primary);
    border-radius: 100%;
}

}

.link--with-ico-lead,
.link--with-ico-trail {
    display: flex;
    align-items: center;
}

.link--skip {
    position: absolute;
    height: 0;
    transition: heigth var(--timing) var(--easing);
    &:focus

{
    display: flex;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 6rem;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 0 var(--space-md);
    border: 0;
    margin: 0;
    font-size: var(--text-xxs);
    line-height: var(--base-line-height);
    text-decoration: none;
    color: var(--color-grayscale-lightest);
    background-color: var(--color-primary);
    letter-spacing: 0.0125em;
    font-weight: var(--wght-semibold);
    clip: auto;
    clip-path: none;
    transition: heigth var(--timing) var(--easing);
}

}

/* Buttons
    ========================================================================== */
button,
.btn {
    position: relative;
    display: block;
    width: var(--button-width, fit-content);
    font-weight: var(--button-wght, var(--wght-semibold));
    line-height: 1.4;
    color: var(--button-color, var(--color-primary));
    background-color: var(--button-bg, var(--color-none));
    border: var(--button-brdr, var(--brdr));
    border-radius: var(--button-radius, var(--brdr-radius-pill));
    padding: var(--btn-padding);
    text-decoration: none; /* Removes underline from button-styled links */
    min-width: 14ch;
    transition: color var(--timing) var(--easing), background-color var(--timing) var(--easing);
    &:where(:not(:has(.btn__ico)))

{
    text-align: center;
}

&:hover,
&:focus-visible {
    --button-color: var(--color-grayscale-lightest);
    --button-bg: var(--color-primary);
    &:disabled

{
    --button-color: inherit;
    --button-bg: inherit;
}

}

&:focus-visible {
    --outline-offset: -0.35em;
}

/* Buttons with icons - Default */
&:where(:has(.text--with-ico-lead)),
&:where(:is(.btn--with-ico-lead)) {
    display: flex;
    gap: calc(var(--em-space-xxxs) + var(--em-space-xxxs));
    align-items: center;
}

&:where(:has(.text--with-ico-lead)) {
    --button-brdr: none;
    &:hover, &:focus-visible

{
    --button-color: unset;
    --button-bg: unset;
}

}
}

.btn--float--left {
    float: left;
}

.btn--float--right {
    float: right;
}

.btn--reverse {
    color: var(--color-grayscale-lightest);
    border-color: var(--color-grayscale-lightest);
    &:hover, &:focus

{
    color: var(--color-primary);
    background-color: var(--color-grayscale-lightest);
}

}

:is(.btn--no-brdr) {
    border: none;
    border-radius: 0;
    &:is(.btn--faux-link)

{
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-color: var(--underline-color, var(--color-primary-light));
    transition: color var(--timing) var(--easing), text-decoration-color var(--timing) var(--easing);
}

&:hover,
&:focus {
    color: var(--color-primary);
    background-color: transparent;
}

}

/* Tables 
    ========================================================================== */
.card__container:has(table) {
    overflow-x: auto;
    flex-basis: 100%;
}

table,
.table {
    width: 100%;
    border-collapse: collapse;
    /* If there are 6+ table cells, increase table width to enable horizontal scroll */
    &:has(.table__data:nth-child(6))

{
    min-width: 57vw;
    .table__data

{
    min-width: 5vw;
    max-width: 8vw;
    overflow-wrap: break-word;
}

}

.table__data__detail {
    min-width: 3vw;
}

}

table,
.table thead th {
    text-decoration: none;
    text-decoration-color: transparent;
    .sortable

{
    cursor: pointer;
}

}

table,
.table theader th span {
    .sort-icon

{
    color: var(--color-primary)
}

}

thead,
.table__header {
    border-bottom: var(--brdr-xs) solid var(--color-base-darkest);
}

th,
.table__head {
    font-weight: var(--wght-bold);
    color: var(--color-base-darkest);
    text-align: left;
    padding-bottom: var(--rem-space-sm);
    vertical-align: bottom;
    &.text-right

{
    text-align: right;
}

}

td,
.table__data {
    text-align: left;
    &.text-right

{
    text-align: right;
}

}

tbody,
.table__body {
    tr, .table__row

{
    border-bottom: var(--brdr-xxs) solid var(--color-base-light);
    &:nth-child(even)

{
    background-color: var(--color-primary-lightest);
}

td,
.table__data {
    padding-block: var(--rem-space-lg);
    padding-inline: var(--rem-space-md);
    vertical-align: top;
    max-width: 172ch;
    &.table__data--num:not(:last-child)

{
    padding-right: 0;
}

}
}
}

tr,
.table__row {
    th, td, .table__head, .table__data

{
    font-size: var(--table-text);
    line-height: 1.55;
    padding-left: var(--rem-space-md);
    &:last-of-type

{
    padding-right: var(--rem-space-md);
}

}
}

.table__head--num,
.table__data--num {
    text-align: right;
    &.text-center

{
    text-align: center;
}

}

.scrolling__container {
    max-height: 400px;
    overflow-y: auto;
}

.scrolling__table {
    width: 100%;
    border-collapse: collapse;
}

.scrolling__table thead,
.scrolling__table .table__header {
    border-bottom: none !important;
}

.scrolling__table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--color-grayscale-lightest);
    border-bottom: var(--brdr-xs) solid var(--color-base-darkest);
}


.bold {
    font-weight: var(--wght-bold);
}

/* Site header
    ========================================================================== */
.header--primary {
    position: relative;
    background-color: var(--color-grayscale-lightest);
    box-shadow: var(--shadow);
    z-index: 5;
}

/* Site Nav & Menu
    ========================================================================== */

/* Nav */
.header__nav {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    max-width: var(--max-content-width);
    margin-inline: auto;
    position: relative;
    z-index: 100;
    background-color: white;
    container: nav / inline-size;
}

body {
    .header__overlay

{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: rgb(1 15 48 / 70%);
    opacity: 0;
    transition: all var(--timing) ease-in-out;
    visibility: hidden;
    z-index: 1;
}

&.modal-open .header__overlay {
    opacity: 1;
    visibility: visible;
}

}

/* Menu */
.menu {
    container: menu / inline-size;
    position: relative;
    .menu__btn

{
    --button-radius: 0;
    --button-brdr: none;
    --button-color: var(--color-base-dark);
    margin-top: calc(var(--rem-space-xs) + var(--rem-space-xxs));
    margin-bottom: calc(var(--rem-space-xs) + var(--rem-space-xxs));
    margin-bottom: 0;
    margin-left: auto;
    padding-right: 0;
    border-bottom: var(--brdr-lg) var(--brdr-style) var(--color-grayscale-lightest);
    transition: border-color 0.2s var(--easing);
    svg path

{
    fill: var(--color-primary);
}

&:hover,
&:focus {
    background-color: transparent;
}

&[aria-expanded="true"] {
    border-bottom-color: var(--color-primary);
}

}

.menu__main {
    margin-left: 2rem;
    margin-right: auto;
}

.menu__inner {
    position: absolute;
    right: 0;
    /*top: calc(var(--rem-space-xxxl) * -4);*/
    top: 6rem;
    background-color: var(--color-grayscale-lightest);
    padding: calc(var(--rem-space-lg) + var(--rem-space-sm)) 0 0;
    visibility: hidden;
    max-height: 0;
    transition: max-height 0.6s var(--easing);
}

.menu__list {
    margin-bottom: calc(var(--rem-space-lg) + var(--rem-space-sm));
    padding-inline: calc(var(--rem-space-lg) + var(--rem-space-sm));
}

.menu__link {
    --link-color: var(--color-base-dark);
    font-weight: var(--wght-semibold);
    text-decoration: none;
    display: block;
    position: relative;
    padding: calc(var(--rem-space-lg) + var(--rem-space-sm)) 0;
    &::after

{
    --el-bg-color: var(--color-primary-light);
    --el-width: var(--brdr-lg);
    --el-height: 100%;
    bottom: calc(var(--rem-space-xs) - var(--rem-space-xxs));
    left: 0;
    opacity: 0;
}

}

@media (width >= 61em) {
    .active__menu__link {
        padding: 1px;
        text-decoration: none;
        border-bottom: 4px solid rgb(0, 113, 194)
    }
}

@media (width < 61em) {
    .active__menu__link {
        padding: 1px;
        text-decoration: none;
        border-left: 4px solid rgb(0, 113, 194)
    }
}

.menu__login {
    background-color: var(--color-base-lighter);
    .btn--login

{
    border-radius: 0;
    display: flex;
    width: 100%;
    padding: var(--rem-space-lg);
    &:before

{
    --pseudo-img: url(../images/ico-avatar.svg);
    --pseudo-width: 0.9em;
    --pseudo-height: 1em;
}

.btn__text {
    display: grid;
    text-align: left;
    &:before

{
    display: none;
}

}

.btn__action {
    color: var(--color-base-dark);
    font-size: var(--text-xxs);
}

}
}

&:has(.menu__inner[aria-hidden]) {
    .menu__inner

{
    .menu__main, .menu__utility

{
    opacity: 0;
    transition: opacity var(--timing) var(--easing) 0.4s;
}

.menu__utility {
    transition: opacity var(--timing) var(--easing) 0.8s;
}

&[aria-hidden="false"] {
    visibility: visible;
    max-height: 120rem;
    transition: max-height 0.6s var(--easing);
    .menu__main, .menu__utility

{
    opacity: 1;
}

}
}

.menu__list {
    padding-inline: 0;
    gap: var(--em-space-xs);
}

.menu__item {
    padding-left: calc(var(--em-space-xxxs) * 0.5);
}

.menu__link {
    padding-block: var(--em-space-xxxs);
    padding-inline: var(--em-space-md) var(--em-space-xl);
}

}
}

.interior--port-monitor #port-monitor,
.interior--fin-report #fin-report,
.interior--library #library,
.interior--team #ins-team {
    color: var(--color-base-darkest);
    &:after

{
    opacity: 1;
}

}

/* Tablet+ menu layout */
@container menu (inline-size >= 82ch) {
    .menu {
        .menu__btn

{
    display: none;
}

.menu__inner,
.menu__list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    max-height: unset;
}

.menu__list {
    margin-bottom: 0;
    padding-inline: 0;
    gap: clamp(var(--rem-space-lg), 2vw, var(--rem-space-xl));
}

.menu__inner {
    gap: var(--rem-space-lg);
    position: relative;
    right: unset;
    top: unset;
    background-color: transparent;
    padding: 0;
    visibility: visible;
}

.menu__link {
    &::after

{
    --el-width: 100%;
    --el-height: var(--brdr-lg);
    opacity: 0;
}

}

.menu__login {
    background-color: transparent;
    padding: 0;
    .btn--login

{
    border-left: var(--brdr);
    border-left-color: var(--color-base-light);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--rem-space-lg);
    width: unset;
}

}
}
}

/* Hero
    ========================================================================== */
.hero {
    --hero-vert-spacing: clamp( var(--hero-space-min, var(--rem-space-xxl)), var(--hero-scale-val, 6.2vh), var(--hero-space-min, var(--rem-space-xxxl)) );
    position: relative;
    background-color: var(--color-primary-darker);
    background-image: url(../images/hero-img-homepage.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding-inline: var(--gutter-static);
    padding-top: var(--hero-vert-spacing);
    padding-bottom: clamp(var(--rem-space-xxxl), 16vh, calc(var(--rem-space-xxxl) + var(--rem-space-xxxl)));
    &.pseudo-el-pre::before

{
    --pseudo-width: 100%;
    --pseudo-height: 100%;
    background: linear-gradient(0deg, rgba(1, 15, 48, 0.8) 0%, rgba(1, 15, 48, 0) 100%);
    top: 0;
    left: 0;
}

.hero__main {
    --layout-grid-gap: 1.5vw;
    --layout-grid-min: 23ch;
    align-items: flex-start;
}

.hero__select {
    min-width: 40ch;
    max-width: 59%;
    margin-inline: auto;
}

.hero__inner {
    position: relative;
    display: grid;
    gap: var(--hero-vert-spacing);
    margin-inline: auto;
    &:not(:has(.hero__select))

{
    .hero__title

{
    margin-bottom: 0;
}

}

&:has(.hero__txt) {
    .hero__title

{
    margin-bottom: clamp(var(--em-space-xxs), 3vh, calc(var(--em-space-xs) + var(--em-space-xxxs)));
}

}
}

/* Homepage - Strategic Asset Allocation & Primary Contact blocks */
.hero__aside {
    color: var(--color-grayscale-lightest);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(var(--rem-space-xl), 9vw, var(--rem-space-xxl)) clamp(var(--rem-space-md), 1.6vw, var(--rem-space-xl));
    align-items: start;
    container: hero-aside / inline-size;
    .aside__articles

{
    grid-column: 1 / 7;
}

.aside__list {
    --layout-grid-gap: clamp(var(--rem-space-md), 2.4vw, var(--rem-space-xl));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--layout-grid-min)), 1fr));
}

.aside__title {
    font-size: var(--module-title-minor);
    font-weight: var(--wght-light);
    border-bottom: var(--brdr-xxs) var(--brdr-style) var(--color-primary-lighter);
    margin-bottom: calc(var(--em-space-sm) + var(--em-space-sm));
    padding-bottom: var(--em-space-xxxs);
}

.card--contact {
    grid-row: 2;
    grid-column: 2 / 6;
}

}
}

@container hero-aside (inline-size >= 96ch) {
    .hero {
        .hero__aside

{
    .aside__articles

{
    grid-column: 1/5;
}

.card--contact {
    grid-row: 1;
    grid-column: 5/7;
}

}
}
}

@media (width >= 65em) {
    .hero {
        --hero-scale-val: 9.2vh;
        padding-top: var(--hero-vert-spacing);
        padding-bottom: clamp(var(--rem-space-xxxl), 24vh, calc(var(--rem-space-xxxl) + var(--rem-space-xxxl)));
        .hero__aside

{
    gap: 1.5vw;
}

.layout-grid {
    --layout-grid-min: 30ch;
}

.hero__inner {
    width: var(--max-content-width);
}

}
}

/* Article
    ========================================================================== */
.article {
    &.article--reverse

{
    .article__link

{
    color: var(--color-grayscale-lightest);
    text-decoration: none;
    &::before

{
    background-color: var(--color-secondary);
}

}
}

.article__link {
    display: grid;
    grid-template-columns: 0 1fr;
    column-gap: clamp(var(--em-space-lg), 2vw, var(--em-space-xl));
    &::before

{
    align-self: start;
    top: var(--em-space-xxxs);
    left: calc(var(--em-space-xxxs) * -1);
}

}

.article__title {
    font-size: var(--article-teaser);
    font-weight: var(--wght-semibold);
    grid-row: 2;
    grid-column: 2;
}

.article__meta {
    display: block;
    font-size: var(--mini-text);
    font-weight: var(--wght-light);
    grid-row: 1;
    grid-column: 2;
    &:first-child

{
    margin-bottom: var(--em-space-xs);
}

&:last-child {
    padding-top: var(--em-space-xxs);
}

}
}

/* Cards
    ========================================================================== */
.grid--cards {
    --layout-grid-min: 34ch;
    margin-inline: auto;
    &:not(:has(> .card--contact:nth-of-type(2)))

{
    place-items: center;
    .card--contact

{
    width: 100%;
}

}
}

.card {
    background-color: var(--card-bg, var(--color-grayscale-lightest));
    box-shadow: var(--shadow);
    padding: var(--card-padding-vert) var(--card-padding-inline);
    text-align: center;
    &.card--reverse

{
    color: var(--color-grayscale-lightest);
}

.card__figure {
    aspect-ratio: 1/1;
    width: var(--shadow-ico-width, clamp(1.8em, 7vw, 2.25em));
    background-color: var(--shadow-ico-bg, var(--color-primary-light));
    border-radius: var(--shadow-ico-radius, var(--brdr-radius-round));
    margin-inline: auto;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.card__img {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    + span

{
    display: none;
}

&.noimage + span {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: var(--shadow-ico-width, clamp(1.8em, 7vw, 2.25em));
    height: 100%;
    font-size: var(--text-lg);
    font-weight: var(--wght-bold);
    color: var(--color-grayscale-lightest);
}

}

.card__img img + span {
    display: none;
}

.card__aside {
    margin-bottom: var(--em-space-sm);
}

.card__header {
    text-align: left;
    align-items: center;
    border-bottom: var(--brdr-xs) var(--brdr-style) var(--color-base-light);
    padding-bottom: var(--card-padding-vert);
}

.card__body {
    margin-bottom: var(--em-space-md);
}

.card__title {
    font-size: var(--card-title);
    font-weight: var(--wght-light);
    color: var(--color-base-darkest);
    margin: 0;
    text-align: left;
}

.team__container {
    display: inline-block;
    gap: var(--rem-space-md);
    margin-bottom: var(--em-space-lg);
    width: 100%;
    height: 100%;
}

.card__body {
    p

{
    margin: 0;
}

}

.card__link {
    font-weight: var(--wght-semibold);
    padding-left: calc(var(--em-space-sm) * 0.75);
}

/* CTA Cards */
&.card--cta,
&.card--contact {
    padding-block: calc(var(--card-padding-inline) * 1.2);
    padding-inline: calc(var(--card-padding-vert) * 0.5);
    height: 100%;
    .card__figure

{
    --shadow-ico-width: clamp(5.4em, 6.2vw, 6.8em);
}

.card__header {
    text-align: center;
    border-bottom: none;
    padding-bottom: 0;
}

.card__title {
    text-align: center;
}

.card__cta {
    margin-inline: auto;
}

}

/* Contact Card */
&.card--contact {
    padding-block: calc(var(--card-padding-inline) * 2) calc(var(--card-padding-inline) * 1.8);
    .card__aside

{
    margin-bottom: 0;
}

.card__tag {
    position: absolute;
    top: calc(var(--em-space-xxxs) * 0.5);
    left: calc(var(--em-space-xxxs) * 0.5);
    padding: var(--rem-space-sm) var(--rem-space-md);
    color: var(--color-grayscale-lightest);
    background-color: var(--color-primary);
}

.card__figure {
    --shadow-ico-width: clamp(7.8em, 10vw, 9em);
}

.card__name {
    font-size: var(--text-xs);
}

.card__inner {
    display: grid;
    gap: var(--rem-space-lg);
}

.card__actions {
    display: grid;
    gap: var(--rem-space-md);
}

.card__body {
    margin-bottom: 0;
}

.card__cta {
    font-weight: var(--wght-semibold);
}

.card__link {
    color: var(--color-primary);
}

}

&.aside__card.card--contact {
    box-shadow: none;
    padding-block: calc(var(--card-padding-inline) * 1.2);
    .card__inner

{
    gap: 0;
}

.card__title {
    font-size: var(--module-title-minor);
}

.card__figure {
    margin-bottom: var(--em-space-md);
    width: 12.2rem;
    height: 12.2rem;
    margin-inline: auto;
}

.card__body {
    display: grid;
    margin-bottom: var(--em-space-lg);
}

.card__actions {
    gap: 0;
}

/* Contact Card - Reverse treatment */
&.card--reverse {
    background-color: rgba(1, 15, 48, 0.7);
    .card__title

{
    color: var(--color-grayscale-lightest);
    position: relative;
    padding-bottom: var(--em-space-xxxs);
    margin-bottom: calc(var(--em-space-sm) + var(--em-space-sm));
    &.pseudo-el-post::after

{
    --el-width: 6ch;
    --el-height: var(--brdr-xxs);
    --el-bg-color: var(--color-base-dark);
    left: 0;
    right: 0;
    bottom: 0;
    margin-inline: auto;
}

}

.card__link {
    color: var(--color-grayscale-lightest);
}

.card__cta:has(+ .card__cta) {
    margin-bottom: var(--em-space-md);
}

.card__link {
    --underline-color: var(--color-grayscale-lightest);
}

}

/* .card__form */
.card__form {
    text-align: left;
    max-width: 120ch;
    margin-inline: auto;
    padding-top: clamp(var(--rem-space-sm), 1.25vw, var(--rem-space-lg));
    .card__section

{
    --dash-scale-val: 10vw;
    display: grid;
    gap: calc(var(--rem-space-lg) + var(--rem-space-xs));
    gap: clamp(calc(var(--dash-space-min) * 0.25), var(--dash-scale-val), calc(var(--dash-space-max) * 0.45));
    padding-inline: 0;
    padding-block: 0 clamp(calc(var(--dash-space-min) * 0.3), var(--dash-scale-val), calc(var(--dash-space-max) * 0.55));
    border-bottom: var(--brdr-lite-gray);
    margin-bottom: clamp(calc(var(--dash-space-min) * 0.25), var(--dash-scale-val), calc(var(--dash-space-max) * 0.4));
    &:has(textarea)

{
    padding-bottom: clamp(calc(var(--dash-space-min) * 0.9), var(--dash-scale-val), calc(var(--dash-space-max) * 0.45));
}

&:not(:has(.form__fieldset)) {
    gap: clamp(calc(var(--dash-space-min) * 0.25), var(--dash-scale-val), calc(var(--dash-space-max) * 0.32));
}

}

.form__inner {
    display: grid;
    gap: calc(var(--rem-space-lg) + var(--rem-space-xs));
    &:not(:has(.form__legend))

{
    gap: 0;
}

&:has(.form__fieldset + .form__element) {
    display: flex;
    flex-direction: column;
    gap: var(--em-space-sm);
}

}

/* Radio group - Adjust layout and spacing if only 2 inputs */
.form__fieldset {
    &:has(.element--radio)

{
    .form__title

{
    font-size: var(--text-base-size);
}

}
}
}
}

/* .card__form */
.card__form {
    text-align: left;
    max-width: 120ch;
    margin-inline: auto;
    padding-top: clamp(var(--rem-space-sm), 1.25vw, var(--rem-space-lg));
    .card__section

{
    --dash-scale-val: 10vw;
    display: grid;
    gap: calc(var(--rem-space-lg) + var(--rem-space-xs));
    gap: clamp(calc(var(--dash-space-min) * 0.25), var(--dash-scale-val), calc(var(--dash-space-max) * 0.45));
    padding-inline: 0;
    padding-block: 0 clamp(calc(var(--dash-space-min) * 0.3), var(--dash-scale-val), calc(var(--dash-space-max) * 0.55));
    border-bottom: var(--brdr-lite-gray);
    margin-bottom: clamp(calc(var(--dash-space-min) * 0.25), var(--dash-scale-val), calc(var(--dash-space-max) * 0.4));
    &:has(textarea)

{
    padding-bottom: clamp(calc(var(--dash-space-min) * 0.9), var(--dash-scale-val), calc(var(--dash-space-max) * 0.45));
}

&:not(:has(.form__fieldset)) {
    gap: clamp(calc(var(--dash-space-min) * 0.25), var(--dash-scale-val), calc(var(--dash-space-max) * 0.32));
}

}

.form__inner {
    display: grid;
    gap: calc(var(--rem-space-lg) + var(--rem-space-xs));
    &:not(:has(.form__legend))

{
    gap: 0;
    grid-template-columns: 1fr;
}

&:has(.form__fieldset + .form__element) {
    display: flex;
    flex-direction: column;
    gap: var(--em-space-sm);
}

}

/* Radio group - Adjust layout and spacing if only 2 inputs */
.form__fieldset {
    &:has(.element--radio)

{
    .form__title

{
    font-size: var(--text-base-size);
}

}
}
}

.card__status {
    &[role="status"]

{
    color: var(--color-accent-primary-dark);
    background-color: var(--color-accent-primary-light);
    padding: var(--em-space-sm);
    max-width: 120ch;
    margin-inline: auto;
    margin-block: var(--rem-space-lg);
    text-align: left;
}

}
}

@media (width >= 40em) {
    .grid--cards {
        &:not(:has(> .card--contact:nth-of-type(2)))

{
    .card--contact

{
    width: 76%;
    max-width: 47rem;
}

}
}
}

@media (width >= 57em) {
    .card {
        .card__form

{
    display: grid;
    .card__section

{
    --dash-scale-val: 3vw;
    grid-template-columns: 1fr 1.5fr;
    column-gap: calc(var(--rem-space-lg) + var(--rem-space-xs));
    padding-block: 0 clamp(var(--dash-space-min), var(--dash-scale-val), var(--dash-space-max));
    margin-bottom: clamp(calc(var(--dash-space-min) * 0.4), var(--dash-scale-val), calc(var(--dash-space-max) * 0.5));
}

.form__fieldset {
    grid-column: 1 / 3;
    margin-bottom: 0;
    &:has(input[type="checkbox"]), &:has(input[type="radio"])

{
    grid-column: 2 / 3;
}

}

.form__inner {
    grid-template-columns: 1fr 1.5fr;
}

.section__title,
.form__legend {
    flex-basis: unset;
}

.section__inputs {
    --flex-grid-min: 36ch;
}

button[type="submit"] {
    justify-self: end;
}

}

.card__status {
    &[role="status"]

{
    text-align: center;
}

}
}
}

@media (width >= 70em) {
    .grid--cards {
        &:not(:has(> .card--contact:nth-of-type(3)))

{
    width: 80%;
}

}
}

/* Tabs
    ========================================================================== */
.tabs {
    display: grid;
    gap: 1.5vmax;
    &:has(.tabs__subnav)

{
    gap: 0;
    .tabs__subnav

{
    margin-bottom: 1.5vmax;
    background-color: var(--color-grayscale-lightest);
    box-shadow: var(--shadow);
}

.tabs__head {
    box-shadow: none;
}

}

.tabs__section:not(:has(.tabs__subnav, .tabs__sidenav)) {
    margin-top: 1.5vmax;
}

.tabs__head,
.tabs__list {
    flex-basis: 100%;
}

.tabs__head {
    gap: 0;
    padding: 0;
    container: tabs-head / inline-size;
    &:has(.tabs__title)

{
    gap: var(--rem-space-md);
    padding: calc(var(--rem-space-md) + var(--rem-space-xxxs)) 0 0;
}

}

.tabs__body {
    grid-template-columns: 1fr;
}

.tabs__aside:has(.tabs__subnav) {
    height: unset;
    position: relative;
    top: 0;
    overflow: unset;
    container: tabs-subnav / inline-size;
    .subnav__list

{
    --dash-space-min: var(--rem-space-sm);
    --dash-space-max: var(--rem-space-md);
    --dash-scale-val: 2.1vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.8vmax;
    padding-block: var(--dash-space-min);
}

.subnav__item {
    text-align: center;
    font-weight: var(--wght-semibold);
    position: relative;
    flex-basis: 100%;
    padding-left: 0;
    .subnav__link::before

{
    content: var(--pseudo-content);
    position: absolute;
    display: var(--pseudo-display);
    background-color: var(--color-primary);
    width: var(--brdr-lg);
    height: 100%;
    left: 0;
    opacity: 0;
}

&::after {
    --el-width: 100%;
    --el-height: var(--brdr-xs);
    --el-bg-color: var(--color-base-light);
    bottom: calc(calc(2vmax / 2) * -1);
    opacity: 1;
}

&:last-child::after {
    display: none;
}

.subnav__link.is-active:before {
    opacity: 1;
}

}

.subnav__link {
    display: flex;
    align-items: center;
    color: var(--color-primary);
    text-decoration: none;
    padding-block: clamp(var(--dash-space-min), var(--dash-scale-val), var(--dash-space-max));
    padding-inline: clamp(calc(var(--dash-space-min) * 2), var(--dash-scale-val), calc(var(--dash-space-max) * 2.25));
}

}

.tabs__title {
    font-size: var(--text-xxs);
    text-transform: uppercase;
    font-weight: var(--wght-bold);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    padding-inline: clamp(calc(var(--dash-space-min) * 0.5), var(--dash-scale-val), calc(var(--dash-space-max) * 0.4));
    justify-content: center;
    &:has(+ .tabs__hint)

{
    justify-content: flex-start;
    flex-basis: 42%;
    text-align: left;
    padding-right: 0;
}

}

.tabs__hint {
    flex-grow: 0;
    padding: var(--rem-space-xs) var(--rem-space-xl) var(--rem-space-xs) 0;
    margin-left: clamp(calc(var(--dash-space-min) * 0.5), var(--dash-scale-val), calc(var(--dash-space-max) * 0.4));
    flex-basis: 100%;
    justify-content: flex-start;
    &::before

{
    --pseudo-img: url(../images/ico-info.svg);
    --pseudo-img-size: 31%;
    border-radius: 100%;
    border: var(--brdr-xs) solid var(--color-primary);
    background-color: transparent;
    left: 0;
}

&:hover,
&:focus {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: transparent;
}

}

.tabs__item {
    display: flex;
    justify-content: center;
}

.tabs__inner {
    display: grid;
    &:has(.tabs__subnav)

{
    grid-template-columns: 1fr;
}

}

.tabs__section {
    grid-row: 1;
    grid-column: 1;
    visibility: visible;
    opacity: 1;
    container: tabs-section / inline-size;
    &[aria-hidden="true"]

{
    visibility: hidden;
    opacity: 0;
    width: 0;
    height: 0;
    font-size: 0;
    overflow: hidden;
}

}

/* Styles for pages that don't have a nav sidebar */
.tabs__body {
    &:not(:has(.tabs__aside))

{
    grid-template-columns: 1fr;
    .tabs__main

{
    & .card__section

{
    &:last-of-type

{
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

}

& .section--secondary {
    container: inputs-block / inline-size;
}

}
}
}

/* Styles for pages with a nav sidebar */
.tabs__aside {
    padding: 0;
    top: calc(var(--rem-space-md) + var(--rem-space-xxxs));
    align-self: self-start;
}

.tabs__filters {
    --dash-space-max: var(--rem-space-xl);
    --dash-space-min: var(--rem-space-lg);
    flex-basis: 100%;
    padding-block: clamp( calc(var(--dash-space-min) + var(--rem-space-xs)), var(--dash-scale-val), calc(var(--dash-space-max) + var(--rem-space-sm)) );
    padding-inline: var(--gutter-static);
    border-bottom: var(--brdr-xs) solid var(--color-base-light);
    container: tab-filters / inline-size;
    &:not(:first-child)

{
    border-top: var(--brdr-xs) solid var(--color-base-light);
    border-bottom: none;
}

}

.tabs__list {
    --layout-grid-min: 100%;
    max-width: 104ch;
    margin-inline: auto;
    &:has(+ .filter-tags)

{
    margin-bottom: clamp( calc(var(--dash-space-min) + var(--rem-space-xs)), var(--dash-scale-val), calc(var(--dash-space-max) + var(--rem-space-sm)) );
}

}

.classification__tab {
    /* Inverts the colors */
    background: #00659a;
    color: #eff2f7;
    /* Adds an underline so we're not relying on color alone to signify change */
    text-decoration: underline;
    /* This is okay to remove, ONLY because of the changes we made above. */
    outline: none;
}

.tabs__btn {
    width: 100%;
    border-radius: 0;
    padding-inline: clamp(calc(var(--em-space-sm) + var(--em-space-xxxs)), 1.2vw, var(--em-space-lg));
    &[aria-selected="true"], &:hover, &:focus

{
    color: var(--color-grayscale-lightest);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

}

.tabs__main {
    padding-inline: 0;
    padding-top: var(--card-padding-vert);
    padding-bottom: clamp(var(--dash-space-min), calc(var(--dash-scale-val) * 0.75), var(--dash-space-max));
}

.card__header {
    padding-bottom: var(--card-padding-vert);
    padding-inline: var(--gutter-static);
    margin-bottom: clamp(calc(var(--dash-space-min) * 0.5), var(--dash-scale-val), calc(var(--dash-space-max) * 0.6));
    &:has(+ .section--secondary)

{
    border-bottom: none;
    margin-bottom: 0;
}

/* If the dash title area has more than just heading text, display flex */
&:has(.card__title + *) {
    display: flex;
    justify-content: space-between;
}

.card__title__buttons {
    display: flex;
    align-items: center;
    gap: var(--rem-space-md);
}

}

.card__section {
    --flex-grid-gap: calc(var(--rem-space-lg) + var(--rem-space-sm));
    text-align: left;
    border-bottom: var(--brdr-lite-gray);
    padding: 0 0 clamp(calc(var(--dash-space-min) * 0.9), calc(var(--dash-scale-val) * 1.2), calc(var(--dash-space-max) * 0.75));
    margin-inline: clamp(calc(var(--dash-space-min) * 0.5), var(--dash-scale-val), calc(var(--dash-space-max) * 0.4));
    margin-bottom: clamp(calc(var(--dash-space-min) * 0.5), var(--dash-scale-val), calc(var(--dash-space-max) * 0.5));
    .section__title

{
    --flex-grid-min: 100%;
}

.section__separator {
    display: flex;
    align-items: center;
    padding-left: calc(var(--em-space-md) + var(--em-space-xs));
    text-transform: uppercase;
    margin: 0 0 clamp(var(--rem-space-md), 1vw, var(--rem-space-lg)) 0;
    font-size: var(--mini-text);
    &::before

{
    --el-height: var(--brdr-xxs);
    left: 0;
}

&::after {
    --el-height: var(--brdr-xxs);
    left: calc(var(--em-space-xl) + var(--em-space-sm));
}

}

.card__section__buttons button {
    display: inline-block;
}

}

.section--secondary {
    --dash-space-max: var(--rem-space-xxl);
    --dash-space-min: var(--rem-space-xl);
    color: var(--color-grayscale-lightest);
    background-color: var(--color-primary-dark);
    border-bottom: none;
    margin-inline: 0;
    margin-bottom: clamp(var(--dash-space-min), var(--dash-scale-val), var(--dash-space-max));
    padding-inline: var(--gutter-static);
    padding-top: calc(var(--card-padding-vert) * 1.3);
    padding-bottom: calc(var(--card-padding-vert) * 1.5);
    container: secondary-section / inline-size;
    .section__title

{
    flex-basis: 100%;
}

.section__inputs {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: calc(var(--card-padding-vert) * 1.4);
    align-items: center;
    grid-template-columns: 1fr fit-content(8ch) 1fr;
    max-width: 100%;
    /* Add space between multiple input blocks in secondary section */
    &:has(.section__separator)

{
    grid-template-columns: 1fr;
    gap: var(--rem-space-sm);
    .form__element:not(> .modal)

{
    &:has(+ *)

{
    margin-bottom: 0;
}

}
}

/* Adjust alignments for variation that has search, select, and button elements */
&:has(.section__select + .section__search, .section__search + .section__select) {
    align-items: start;
    grid-template-columns: minmax(auto, 1fr);
    .section__actions

{
    align-self: center;
}

}
}

.section__separator {
    padding: 0 0 0 calc(var(--em-space-md) + var(--em-space-xs));
    display: flex;
    &::before

{
    --el-bg-color: var(--color-grayscale-lightest);
}

&::after {
    --el-width: var(--pseudo-width);
    --el-bg-color: var(--color-grayscale-lightest);
}

}
}

.card__footer {
    margin-inline: var(--rem-space-xl);
    display: grid;
    container: tabs-card-footer / inline-size;
    padding: 10px 0 15px 0;
    .card__btn

{
    justify-self: end;
    &:has(+ .cta--save-param)

{
    margin-bottom: clamp(var(--rem-space-xl), 2.4vw, var(--rem-space-xxl));
}

}

.cta--save-param {
    --layout-grid-gap: 1.9vmax;
    --dash-space-min: var(--rem-space-xl);
    --dash-space-max: var(--rem-space-xxl);
    background-color: var(--color-primary-lightest);
    text-align: left;
    grid-template-columns: 1fr;
    padding: clamp(var(--dash-space-min), var(--dash-scale-val), var(--dash-space-max));
    .card__main

{
    text-align: center;
}

.figure--ico {
    --shadow-ico-bg: var(--color-primary-desat);
    --shadow-ico-width: 100%;
    max-width: 6em;
    margin-inline: auto;
    .card__img

{
    max-width: 7.6em;
}

}

.cta__list {
    display: inline-grid;
    grid-template-columns: 1fr;
    gap: 2vmax;
    width: 100%;
    .list__item

{
    text-align: center;
}

.btn {
    width: 100%;
}

.list__step {
    font-weight: var(--wght-bold);
}

}
}
}
}


@container tabs-section (inline-size < 75ch) {
    .tabs__body {
        .tabs__main

{
    .card__header

{
    &:has(.card__title__buttons)

{
    display: grid;
    justify-content: center;
}

.card__title {
    text-align: center;
    padding-bottom: calc(var(--dash-space-max) * 0.25);
}

}

.card__section {
    text-align: center;
    margin-inline: clamp(calc(var(--dash-space-min) * 0.1), var(--dash-scale-val), calc(var(--dash-space-max) * 0.1));
}

}
}
}


@container tabs-card-footer (inline-size >= 62ch) {
    .tabs {
        .card__footer

{
    .cta--save-param

{
    grid-template-columns: minmax(8ch, 6vw) 3fr;
    .card__main

{
    text-align: unset;
}

.figure--ico {
    max-width: unset;
    margin: unset;
}

.cta__list {
    grid-template-columns: auto auto;
    gap: 1.2vmax;
    width: unset;
    .list__item

{
    text-align: unset;
}

.btn {
    width: unset;
}

}
}
}
}
}

/* Tabpanels - Subnav tablet+ styles */
@container tabs-subnav (inline-size >= 75ch) {
    .tabs {
        .tabs__aside:has(.tabs__subnav)

{
    .subnav__list

{
    padding-block: clamp(calc(var(--dash-space-min) * 1.5), var(--dash-scale-val), calc(var(--dash-space-max) * 1.5));
}

.subnav__item {
    flex-basis: auto;
    .subnav__link::before

{
    background-color: var(--color-base-light);
    width: var(--brdr-xs);
    inset-block-start: 0;
    inset-inline-start: calc(calc(1.8vmax / 2) * -1);
    opacity: 1;
}

&:first-child .subnav__link::before {
    display: none;
}

&::after {
    --el-width: 100%;
    --el-height: var(--brdr-lg);
    --el-bg-color: var(--color-primary);
    bottom: calc(var(--rem-space-lg) * -0.85);
    opacity: 0;
}

&:last-child::after {
    display: block;
}

&:has(.subnav__link.is-active):after {
    opacity: 1;
}

.subnav__link {
    --dash-scale-val: 0.5vw;
    padding-inline: clamp(calc(var(--dash-space-min) * 0.5), var(--dash-scale-val), calc(var(--dash-space-max) * 0.5));
}

}
}
}
}

/* Tabpanels - Mobile-desktop styles */
@container tabs-head (inline-size >= 30ch) {
    .tabs {
        .tabs__hint

{
    justify-content: flex-end;
    flex-basis: 20ch;
    margin-left: 0;
}

.tabs__filters {
    --dash-space-min: var(--rem-space-md);
    --dash-space-max: calc(var(--rem-space-lg) + var(--rem-space-xs));
    padding-bottom: clamp( calc(var(--dash-space-min) + var(--rem-space-xxxs)), var(--dash-scale-val), calc(var(--dash-space-max) + var(--rem-space-xxs)) );
}

}
}

@container tab-filters (inline-size >= 70ch) {
    .tabs {
        .tabs__list

{
    --layout-grid-min: 14ch;
}

.card__section {
    text-align: left;
}

}
}

@container tabs-section (inline-size >= 86ch) {
    .tabs {
        .card__section

{
    .section__title

{
    --flex-grid-min: 6rem;
}

.section__inputs {
    max-width: unset;
    &:has(.section__separator)

{
    gap: calc(var(--card-padding-vert) * 1.4);
}

}

.section__separator {
    &::before

{
    --el-width: 1rem;
    --el-height: var(--brdr-xxs);
}

&::after {
    --el-width: 1rem;
    --el-height: var(--brdr-xxs);
}

}

&.section--secondary {
    .section__separator

{
    justify-content: center;
    padding-left: 0;
}

.section__separator {
    padding-left: 0;
    margin-bottom: 0;
    &::before

{
    --el-width: var(--brdr-xxs);
    --el-height: 21%;
    top: 0;
    left: unset;
}

&::after {
    --el-width: var(--brdr-xxs);
    --el-height: 21%;
    bottom: 0;
    right: unset;
    left: unset;
}

}
}

&.section--acts {
    .section__inputs

{
    grid-template-columns: fit-content(37%) fit-content(8ch) fit-content(54%);
}

}
}
}
}

@container tabs-section (78ch <= inline-size <= 86ch) {
    .tabs {
        .card__section

{
    .section__inputs

{
    &:has(.section__separator)

{
    grid-template-columns: 1fr fit-content(8ch) 1fr;
    display: grid;
    max-width: 100%;
    align-items: center;
    gap: var(--rem-space-xl);
    .section__separator

{
    padding: var(--em-space-sm) 0;
    display: flex;
    justify-content: center;
    margin: 0;
    &:before

{
    --el-width: var(--brdr-xxs);
    height: 21%;
    top: 0;
    left: unset;
}

&::after {
    --el-width: var(--brdr-xxs);
    height: 21%;
    bottom: 0;
    right: unset;
    left: unset;
}

+ .btn,
+ .form__element {
    justify-self: end;
}

}

.btn {
    justify-self: end;
}

}
}
}
}
}

@container tabs-section (inline-size >= 96ch) {
    .tabs {
        .tabs__body

{
    --layout-grid-min: 29ch;
    grid-template-columns: minmax(var(--layout-grid-min), 30%) 1fr;
}

.tabs__aside {
    padding: 0;
    position: sticky;
    height: 95vh;
    overflow-y: auto;
    top: calc(var(--rem-space-md) + var(--rem-space-xxxs));
    align-self: self-start;
}

}
}

/* Tabpanels - Secondary block w/inputs */
@container inputs-block (inline-size >= 96ch) {
    /* Adjust alignments for variation that has search, select, and button elements */
    .tabs {
        .section--secondary

{
    .section__inputs

{
    gap: 2vmax;
    &:has(.section__select + .section__search, .section__search + .section__select)

{
    grid-template-columns: .5fr 2fr .5fr;
}

/* Add separators on left between each even block item */
> :nth-child(even) {
    border-left: var(--brdr-xxs) var(--brdr-style) var(--color-primary-lighter);
    border-right: var(--brdr-xxs) var(--brdr-style) var(--color-primary-lighter);
    padding-inline: 2vmax;
    &:is(:last-child)

{
    border-right: none;
    padding-right: 0;
}

}
}
}
}
}

/* Accordions
    ========================================================================== */
.accordion {
    .accordion__section

{
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    transition: visibility var(--timing) var(--easing), opacity var(--timing) var(--easing);
}

.accordion__item {
    display: grid;
    grid-template-rows: min-content 0fr;
    padding-bottom: calc(var(--rem-space-lg) + var(--rem-space-xs));
    transition: grid-template-rows 0.5s var(--easing);
    &.is-active

{
    grid-template-rows: min-content 1fr;
    .accordion__section

{
    visibility: visible;
    opacity: 1;
}

}
}

.accordion__btn {
    text-align: left;
    padding-inline: 0;
    border-top: var(--brdr-lite-gray);
    width: 100%;
    &::before

{
    --pseudo-img: none;
    --pseudo-width: 16px;
    --pseudo-height: 8px;
    background-color: var(--color-primary);
    top: var(--em-space-xxs);
    left: 0;
    clip-path: polygon(85% 0, 100% 0, 50% 100%, 0 0, 15% 0, 50% 70%);
    transform: rotate(0deg);
    transition: transform var(--timing) var(--easing);
}

&[aria-expanded="true"]::before {
    transform: rotate(180deg);
}

}
}

/* Sidenav
    ========================================================================== */
.sidenav {
    border-bottom: var(--brdr-lite-gray);
    .sidenav__title

{
    font-size: var(--text-xs);
    padding: var(--rem-space-lg) var(--rem-space-xl) calc(var(--rem-space-lg) + var(--rem-space-xxs));
}

.sidenav__accordion {
    .accordion__btn, .accordion__list

{
    padding: var(--rem-space-sm) var(--rem-space-xl);
}

.accordion__list {
    padding-top: calc(var(--rem-space-md) + var(--rem-space-xxxs));
    padding-bottom: 0;
    padding-inline: clamp(var(--rem-space-lg), 1.8vw, var(--rem-space-xl));
    gap: 0;
}

.accordion__btn {
    font-size: clamp(var(--text-xxs), 1.7vw, calc(var(--text-xxs) * 1.15));
    padding-top: calc(var(--rem-space-lg) + var(--rem-space-xs));
    padding-bottom: 0;
    padding-inline: clamp(var(--rem-space-lg), 1.8vw, var(--rem-space-xl));
    align-items: flex-start;
}

.list__item {
    font-size: clamp(calc(var(--text-xxxs) * 1.1), 1.7vw, var(--text-xxs));
    color: var(--color-base);
    padding: var(--rem-space-md) 1ch var(--rem-space-md) 2ch;
    line-height: 1.5;
    position: relative;
    &:not(:last-child)

{
    border-bottom: var(--brdr-lite-gray);
}

a {
    color: var(--color-base);
    text-decoration: none;
}

button {
    padding: unset;
    border: none;
    font-weight: unset;
    &:not(:is(.accordion__btn))

{
    color: var(--color-base);
}

}

&:not(.item--current) {
    a, button:not(.accordion__btn)

{
    position: relative;
    left: 0;
    transition: left var(--timing) var(--easing);
    &:hover, &:focus

{
    color: var(--color-primary-light);
    background-color: transparent;
    left: 1ch;
}

}
}

&:hover,
&:focus {
    /*padding-left: 3ch;*/
}

&:has(.accordion__item) {
    padding-left: 0;
    padding-bottom: 0;
    border-bottom: none;
    .accordion__item

{
    padding-bottom: 0;
}

.accordion__list {
    padding-right: 0;
    &:last-child

{
    padding-bottom: 0;
}

}

.list__item:first-child {
    padding-top: var(--rem-space-md);
}

+ .list__item {
    border-top: var(--brdr-lite-gray);
    margin-top: var(--rem-space-lg);
}

.accordion__btn {
    border-top: none;
    padding-top: var(--rem-space-sm);
    padding-bottom: calc(var(--rem-space-sm) + var(--rem-space-xxs));
    padding-left: 0;
    font-size: var(--text-base-size);
    &:last-of-type

{
    padding-bottom: 0;
}

}
}

&:is(.item--current) {
    color: var(--color-base-darkest);
    font-weight: var(--wght-semibold);
    &::before

{
    content: var(--pseudo-content);
    position: absolute;
    display: var(--pseudo-display);
    width: var(--brdr-lg);
    height: 90%;
    left: 0;
    top: 5%;
    background-color: var(--pseudo-bg-color);
}

a,
button {
    color: var(--color-base-darkest);
    font-weight: var(--wght-semibold);
}

}
}
}
}

/* Homepage - Dashboard data blocks
    ========================================================================== */
.dash {
    --dash-space-min: var(--rem-space-xxl);
    --dash-scale-val: 2vw;
    --dash-space-max: var(--rem-space-xxxl);
    margin-top: clamp(calc(var(--dash-space-min) * -2), var(--dash-scale-val), calc(var(--dash-space-max) * -1));
    .dash__inner

{
    --flex-grid-gap: 1.5vmax;
    --dash-scale-val: 14vw;
    width: var(--max-content-width);
    margin-inline: auto;
    margin-bottom: clamp(var(--dash-space-min), var(--dash-scale-val), var(--dash-space-max));
    position: relative;
}

.dash__card {
    container: dash-card / inline-size;
    &:first-child, &:last-child

{
    flex-basis: 100%;
}

.card__header {
    .card__title

{
    display: flex;
    gap: calc(var(--em-space-xxs) + var(--em-space-xxxs));
    align-items: center;
    .figure--ico

{
    --shadow-ico-width: clamp(1.8em, 7vw, 2.25em);
    margin: 0;
}

}
}

.card__body {
    padding: clamp(var(--card-padding-vert), 6.4vw, calc(var(--card-padding-vert) * 3)) 0;
    margin-bottom: 0;
}

.card__data {
    padding-top: calc(var(--rem-space-xl) + var(--rem-space-md));
    padding-bottom: calc(var(--rem-space-xl) + var(--rem-space-md));
}

.card__footer {
    --flex-grid-gap: 3vmax;
    border-top: var(--brdr-xs) var(--brdr-style) var(--color-base-light);
    padding-top: var(--card-padding-vert);
}

&.card--performance {
    .card__body

{
    padding-top: 0;
}

.card__data {
    --flex-grid-gap: clamp(var(--rem-space-xs), 1vw, var(--rem-space-xl));
    padding-top: calc(var(--rem-space-xl) + var(--rem-space-xs));
    .data--details

{
    flex-basis: 100%;
}

}

.card__footer {
    /* Data points in footer of Performance area */
    .data--contrib

{
    display: grid;
    .data__title

{
    margin-bottom: var(--em-space-xs);
}

.data__value {
    font-size: var(--text-sm);
    font-weight: var(--wght-semibold);
}

.data__date {
    font-size: var(--mini-text);
    margin-bottom: var(--rem-space-xl);
}

.data__chart {
    align-self: end;
}

&::before {
    display: none;
}

}
}
}
}
}

@container dash-card (inline-size >= 70ch) {
    .dash {
        .dash__card

{
    .card__header .card__link

{
    justify-content: end;
}

&.card--performance {
    .card__body

{
    padding-top: 0;
}

.card__data {
    border-bottom: none;
    margin-bottom: 0;
    padding-top: calc(var(--rem-space-xl) + var(--rem-space-xs));
    padding-bottom: calc(var(--rem-space-xl) + var(--rem-space-xs));
    .data--returns

{
    flex-basis: 40%;
    border-right: var(--brdr-xs) var(--brdr-style) var(--color-base-light);
}

.data--details {
    flex-basis: var(--flex-grid-min);
}

}

.card__footer {
    .data--contrib

{
    &::before

{
    --el-width: var(--brdr-xs);
    --el-bg-color: var(--color-base-light);
    --el-height: 100%;
    display: block;
    inset-block-start: 0;
    inset-inline-start: calc(calc(3vmax / 2) * -1);
}

}
}
}
}
}
}

/* Data
    ========================================================================== */
.data {
    text-align: left;
    /* Intro data points in homepage Performance area */
    .data__item

{
    --flex-grid-gap: var(--rem-space-xxxs);
}

.data__title {
    font-weight: var(--wght-regular);
    margin-bottom: var(--em-space-xxxs);
}

.data__value {
    font-size: var(--text-xl);
    line-height: 1.4;
    color: var(--color-base-darkest);
    display: flex;
    align-items: center;
}

.data__rate {
    position: relative;
    top: 0;
    font-size: var(--mini-text);
    font-weight: var(--wght-semibold);
    color: var(--color-accent-primary-dark);
    background-color: var(--color-accent-primary-light);
    padding: var(--rem-space-xxs) calc(var(--rem-space-sm) + var(--rem-space-xxs)) var(--rem-space-xxs) calc(var(--rem-space-lg) + var(--rem-space-xs));
    margin-left: var(--em-space-sm);
    &::before

{
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    --pseudo-width: 0.6em;
    --pseudo-height: 0.5em;
    top: calc(var(--em-space-xxs) + var(--em-space-xxxs));
    left: calc(var(--em-space-xxxs) + var(--em-space-xxs));
}

&.negative {
    color: var(--color-accent-secondary);
    background-color: var(--color-accent-secondary-light);
    &::before

{
    transform: rotate(-180deg);
}

}
}

.data__date {
    font-style: italic;
    color: var(--color-base);
}

&.data--details {
    align-self: center;
    container: data-details / inline-size;
    .data__list

{
    display: grid;
    gap: var(--rem-space-lg);
}

.data__title,
.data__value {
    font-size: var(--text-xxs);
    flex-basis: 100%;
}

.data__value {
    font-weight: var(--wght-bold);
    justify-content: flex-start;
}

}
}

@container data-details (inline-size >= 38ch) {
    .data {
        &.data--details

{
    .data__list

{
    gap: var(--rem-space-md);
}

.data__title,
.data__value {
    flex-basis: fit-content;
}

.data__value {
    justify-content: flex-end;
}

}
}
}

/* Footer
    ========================================================================== */
.footer {
    --footer-space-min: var(--rem-space-xl);
    --footer-scale-val: 10vw;
    --footer-space-max: var(--rem-space-xxl);
    color: var(--color-grayscale-lighter);
    background-color: var(--color-grayscale);
    .footer__secondary, .footer__nav

{
    padding-inline: var(--gutter-static);
}

.footer__secondary {
    --footer-space-max: var(--rem-space-xxxl);
    --footer-scale-val: 9vw;
    background-color: var(--color-primary-darker);
    color: var(--color-grayscale-lightest);
    padding-top: clamp(var(--footer-space-min), var(--footer-scale-val), var(--footer-space-max));
    padding-bottom: clamp(var(--footer-space-min), calc(var(--footer-scale-val) * 1.5), calc(var(--footer-space-max) + var(--rem-space-sm)));
    padding-inline: 0;
    position: relative;
    container: secondary-footer / inline-size;
    .footer__inner

{
    --flex-grid-gap: clamp(var(--rem-space-md), 3.2vw, var(--rem-space-xxl));
    --footer-scale-val: 6vw;
    row-gap: clamp(var(--footer-space-min), var(--footer-scale-val), var(--footer-space-max));
}

.news-insights__group {
    flex-basis: 100%;
    margin-bottom: var(--rem-space-md);
    &:last-child

{
    margin-bottom: 0;
}

}
}

.footer__primary {
    padding-top: clamp(var(--footer-space-min), var(--footer-scale-val), var(--footer-space-max));
    padding-bottom: clamp(calc(var(--footer-space-min) * 0.4), var(--footer-scale-val), calc(var(--footer-space-max) * 0.7));
    container: primary-footer / inline-size;
}

.footer__logo {
    display: block;
    .img--logo

{
    max-width: 24.5ch;
}

}

.footer__main {
    grid-template-columns: 1fr;
    padding-top: clamp(var(--footer-space-min), var(--footer-scale-val), var(--footer-space-max));
    margin-bottom: clamp(var(--footer-space-min), var(--footer-scale-val), calc(var(--footer-space-max) + var(--rem-space-xs)));
    gap: clamp(var(--footer-space-min), var(--footer-scale-val), var(--footer-space-max));
}

.footer__nav {
    --flex-grid-gap: 4vmax;
    padding-inline: 0;
    container: footer-nav / inline-size;
    .nav__section

{
    flex-basis: 100%;
}

.nav__list {
    --layout-grid-gap: clamp(var(--rem-space-xxs), 1vw, var(--rem-space-xs));
}

.nav__item {
    padding-left: 0;
}

.nav__link {
    color: var(--color-grayscale-lighter);
    text-decoration: none;
}

&.pseudo-el-pre::before {
    display: none;
}

}

.footer__supplemental {
    flex-basis: 100%;
}

.aside__text,
.aside__title,
.nav__title,
.nav__list {
    font-size: var(--mini-text);
}

.aside__title,
.nav__title {
    font-weight: var(--wght-bold);
}

.footer__info {
    font-size: var(--text-xxxs);
}

.nav__item,
.nav__title,
.aside__title {
    margin-bottom: var(--em-space-xs);
    &:last-child

{
    margin-bottom: 0;
}

}
}

@media (width >= 60em) {
    .footer {
        .footer__secondary

{
    --footer-scale-val: 5vw;
}

}
}

@container secondary-footer (inline-size >= 70ch) {
    .footer {
        .footer__secondary

{
    --footer-scale-val: 9vw;
    .footer__inner

{
    --footer-scale-val: 4.2vw;
}

.news-insights__group {
    flex-basis: unset;
    margin-bottom: 0;
}

}
}
}

@container primary-footer (inline-size >= 117ch) {
    .footer {
        .footer__primary

{
    .footer__nav

{
    padding-inline: var(--gutter-static);
}

}

.footer__main {
    --footer-scale-val: 10vw;
    grid-template-columns: 10% repeat(5, 1fr);
    gap: var(--layout-grid-gap);
}

.footer__aside {
    grid-column: 1 / 3;
}

.footer__nav {
    grid-column: 3 / 7;
    &.pseudo-el-pre::before

{
    --pseudo-width: var(--brdr-xxs);
    --pseudo-bg-color: var(--color-grayscale-light);
    --pseudo-height: 100%;
    display: block;
    inset-block-start: 0;
    inset-inline-start: calc(calc(1vmax / 4) * -1);
}

}
}
}

@container footer-nav (inline-size >= 54ch) {
    .footer {
        .footer__nav

{
    .nav__section

{
    flex-basis: unset;
}

}
}
}

/* News & Insights block */
.news-insights {
    background-image: url(../images/news-insights-bg-img.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    &.pseudo-el-pre::before

{
    --pseudo-width: 100%;
    --pseudo-height: 100%;
    --el-bg-color:;
    background: linear-gradient(0deg, rgba(1, 15, 48, 0.3) 0%, rgba(1, 15, 48, 0) 100%);
    top: 0;
    left: 0;
}

.news-insights__title {
    flex-basis: 100%;
    text-align: center;
}

.group__heading {
    border-bottom: var(--brdr-xs) var(--brdr-style) var(--color-primary-lighter);
    margin-bottom: calc(var(--em-space-md) + var(--em-space-sm));
    padding-bottom: var(--em-space-xxxs);
}

.group__list {
    display: grid;
    gap: clamp(var(--em-space-md), 2vw, var(--em-space-lg));
    margin-bottom: clamp(var(--em-space-lg), 2.8vw, var(--em-space-xl));
}

.article__link {
    .article__title

{
    grid-row: 1;
}

.article__meta {
    grid-row: 2;
}

}
}

/* Filter Tags block
    ========================================================================== */
.filter-tags {
    .filter-tags__inner

{
    --dash-space-min: var(--rem-space-md);
    --dash-space-max: var(--rem-space-lg);
    --dash-scale-val: 4vw;
    background-color: var(--color-primary-lightest);
    padding-bottom: 0;
}

.filter-tags__head {
    display: flex;
    justify-content: space-between;
    padding-block: var(--rem-space-md);
    padding-inline: clamp(var(--dash-space-min), var(--dash-scale-val), var(--dash-space-max));
}

.filter-tags__title {
    font-size: var(--text-xxs);
    font-weight: var(--wght-semibold);
    text-align: left;
}

.filter-tags__body {
    border-top: var(--brdr-lite-gray);
}

.accordion__btn {
    padding-inline: 0;
    border: none;
    &:before

{
    top: 0;
    background-color: var(--color-base-darkest);
}

.btn__inner {
    color: var(--color-base-darkest);
}

}

.filter-tags__clear {
    padding-right: 0;
    border-left: var(--brdr-lite-gray);
}

.accordion__btn,
.filter-tags__clear {
    padding-top: clamp(var(--em-space-xxs), 1vw, var(--em-space-xs));
    padding-bottom: var(--em-space-xxxs);
}

.filter-tags__group {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(var(--rem-space-xs), 2.8vw, calc(var(--rem-space-md) + var(--rem-space-xs)));
    padding-block: clamp( calc(var(--dash-space-min) + var(--rem-space-md)), var(--dash-scale-val), calc(var(--dash-space-max) + var(--rem-space-md)) );
    padding-inline: clamp(var(--dash-space-min), var(--dash-scale-val), var(--dash-space-max));
}

.filter-tags__btn {
    font-size: var(--mini-text);
    color: var(--color-base-dark);
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.8ch;
    padding-block: calc(var(--em-space-xxs) + var(--em-space-xxxs));
    padding-inline: clamp(calc(var(--em-space-sm) + var(--em-space-xxxs)), 4vw, calc(var(--em-space-sm) + var(--em-space-xs)));
    &::before

{
    --el-content: "\00d7";
    --el-position: relative;
    --el-bg-color: transparent;
    --el-width: auto;
    --el-height: auto;
    font-size: var(--text-xs);
    font-weight: var(--wght-light);
    line-height: 0;
}

&:hover,
&:focus {
    color: white;
    background-color: var(--color-base);
    border-color: var(--color-base);
}

}
}

/* Modals
    ========================================================================== */

/* Prevent page scroll when .modal--mega is active */
html:has(.modal--mega[open]) {
    overflow: hidden;
}

.modal {
    --dash-space-max: var(--rem-space-xl);
    --dash-space-min: var(--rem-space-lg);
    --dash-scale-val: 2vw;
    text-align: left;
    border: none;
    width: min(93vw, 57rem);
    max-width: 100%;
    min-height: 100vh;
    margin-right: 0;
    padding: 0;
    overscroll-behavior: contain;
    transform: translate(0);
    opacity: 1;
    animation: fade-out 0.2s ease-out;
    &:not([open])

{
    pointer-events: none;
}

&[open] {
    animation: fade-in 0.5s ease-out;
    &::backdrop

{
    animation: backdrop-fade-in 0.5s ease-out forwards;
}

}

.modal__body {
    padding-block: calc(clamp(calc(var(--dash-space-min) * 1.85), var(--dash-scale-val), calc(var(--dash-space-max) * 3)) - var(--em-space-md));
    padding-inline: clamp(var(--dash-space-min), var(--dash-scale-val), var(--dash-space-max));
}

.modal__form {
    margin-bottom: 0;
}

.modal__head {
    --dash-scale-val: 3.2vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: var(--brdr-lite-gray);
    padding-block: clamp(calc(var(--dash-space-min) * 0.25), var(--dash-scale-val), calc(var(--dash-space-max) * 0.4));
    padding-inline: clamp(var(--dash-space-min), var(--dash-scale-val), var(--dash-space-max)) 0;
    height: fit-content;
}

.modal__close {
    --dash-space-min: var(--rem-space-md);
    --dash-scale-val: 1.7vw;
    --dash-space-max: var(--rem-space-lg);
    padding-block: clamp(var(--dash-space-min), var(--dash-scale-val), var(--dash-space-max));
    line-height: 0;
    border: none;
    border-left: var(--brdr-lite-gray);
    border-radius: 0;
    flex-basis: 15.6%;
    color: var(--color-primary);
    min-width: unset;
    .btn__ico

{
    display: block;
    svg

{
    width: 1.19em;
    aspect-ratio: 1 / 1;
}

}

&:focus {
    outline: var(--outline-size) var(--outline-style) var(--outline-color);
}

&:hover,
&:focus {
    background-color: transparent;
}

}

.modal__title {
    font-size: var(--modal-title);
    font-weight: var(--wght-light);
}

.modal__filters {
    padding-inline: clamp(var(--dash-space-min), var(--dash-scale-val), var(--dash-space-max));
    padding-block: clamp(calc(var(--dash-space-min) * 1.85), var(--dash-scale-val), calc(var(--dash-space-max) * 3));
}

.modal__footer {
    background-color: var(--color-primary-lightest);
    padding-block: clamp(var(--dash-space-min), calc(var(--dash-scale-val) * 2.8), var(--dash-space-max));
}

.modal__actions {
    display: flex;
    justify-content: space-between;
    padding-inline: clamp(var(--dash-space-min), var(--dash-scale-val), var(--dash-space-max));
    margin-block: 0;
}

.modal__list {
    gap: 0;
    .list__item

{
    border-bottom: var(--brdr-lite-gray);
    padding-left: var(--em-space-sm);
}

.list__link {
    padding-block: var(--em-space-md);
}

}
}

.modal__legend {
    display: flex;
    align-items: center;
    gap: var(--rem-space-xs);
}

    .modal__legend .legend__title {
        margin-bottom: clamp(var(--em-space-xxxs), 0.75vw, var(--em-space-xxs));
    }

    .modal__legend input[type="checkbox"] {
        flex-shrink: 0;
    }


.modal__filters summary:has(> input[type="checkbox"]) {
    cursor: pointer;
}

    .modal__filters summary:has(> input[type="checkbox"]) > input[type="checkbox"] {
        display: inline-grid;
        margin-right: var(--rem-space-xs);
        vertical-align: middle;
    }

    .modal__filters summary:has(> input[type="checkbox"]) h3 {
        display: inline-block;
        margin: 0;
        vertical-align: middle;
    }


/* Pagination
    ========================================================================== */
.pagination {
    flex-basis: 100%;
    display: grid;
    justify-content: center;
    --grid-item-container: pagination;
    .pagination__list

{
    display: flex;
    border: var(--brdr-lite-gray);
    width: fit-content;
    align-items: stretch;
    gap: 0;
}


    /* Prev & Next item icons */
    /* Ensure pagination labels are visible */
    .pagination__nav .pagination__label {
        display: inline-block; /* Ensure the label is displayed */
        visibility: visible; /* Ensure the label is visible */
        font-size: 14px; /* Adjust font size for readability */
        margin-left: 5px; /* Add spacing between the icon and label */
        color: var(--color-primary-dark); /* Use a color that matches the theme */
    }

    /* Style for disabled buttons */
    .pagination__nav.is-disabled .pagination__label {
        color: var(--color-grayscale-light); /* Use a lighter color for disabled state */
        opacity: 0.6; /* Reduce opacity for disabled state */
    }

    /* Ensure icons and labels are aligned */
.nav--prev::before {
    content: ''; /* Ensure no unwanted content is added before the label */
    display: inline-block; /* Align icons with labels */
    margin-right: 5px; /* Add spacing between the icon and label */
    /*clip-path: polygon(85% 0, 100% 0, 50% 100%, 0 0, 15% 0, 50% 70%);*/
    transform: rotate(180deg);
}

.nav--next::after {
    content: ''; /* Ensure no unwanted content is added before the label */
    display: inline-block; /* Align icons with labels */
    margin-right: 5px; /* Add spacing between the icon and label */
    /*clip-path: polygon(85% 0, 100% 0, 50% 100%, 0 0, 15% 0, 50% 70%);*/
    transform: rotate(1deg);
}
    /* Adjust hover and focus styles */
    .pagination__nav:hover .pagination__label,
    .pagination__nav:focus .pagination__label {
        color: var(--color-primary); /* Highlight the label on hover or focus */
    }
/*.pagination__nav {
    .pagination__label

{
    height: 1px;
    overflow: hidden;
    position: absolute;
    clip-path: inset(50%);
}

&.nav--prev::before,
&.nav--next::after {
    --pseudo-img: none;
    --pseudo-width: 16px;
    --pseudo-height: 8px;
    background-color: var(--color-primary);
    left: 0;
    clip-path: polygon(85% 0, 100% 0, 50% 100%, 0 0, 15% 0, 50% 70%);
    transform: rotate(90deg);
}

&.nav--next::after {
    transform: rotate(-90deg);
}

}*/

/* Page items */
.pagination__item {
    display: inline-block;
    padding-left: 0;
    /* Page item 1 customizations */
    &:nth-of-type(2)

{
    /* Hide second page item's right border when ellipsis is present */
    &:has(+ .pagination__item > .pagination__ellipsis)

{
    .pagination__link

{
    border-right: none;
}

}

/* Remove second page item's left border when it is the active/current item */
&:has(.pagination__link[aria-current]) {
    .pagination__link

{
    border-left: none;
}

}
}

&:nth-last-child(2) .pagination__link {
    border-right: var(--brdr-lite-gray);
}

/* Previous btn customizations */
&:first-of-type {
    .pagination__nav

{
    border-left: none;
}

/* If first page is current, hide prev link */
&:has(+ .pagination__item > .pagination__link[aria-current]) {
    .pagination__nav

{
    display: none;
}

}
}

/* If the last page is current, hide next link */
&:nth-last-child(2):has(> .pagination__link[aria-current]) {
    .pagination__link

{
    border-right: none;
}

+ .pagination__item .pagination__nav {
    display: none;
}

}
}

.pagination__link,
.pagination__nav {
    text-decoration: none;
    padding: var(--em-space-sm) var(--em-space-md);
    transition: background-color var(--timing) var(--easing), box-shadow var(--timing) var(--easing);
    &:hover, &:focus

{
    background-color: var(--color-primary-lightest);
    box-shadow: inset var(--brdr-xxs) var(--brdr-xxs) var(--color-primary-dark), inset calc(var(--brdr-xxs) * -1) calc(var(--brdr-xxs) * -1) var(--color-primary-dark);
}

&[aria-current] {
    color: var(--color-grayscale-lightest);
    background-color: var(--color-primary);
    &:hover, &:focus

{
    color: var(--color-grayscale-lightest);
    background-color: var(--color-primary);
}

}
}

.pagination__nav {
    border-left: none;
    gap: var(--em-space-xxxs);
}

.pagination__link {
    display: block;
    border-left: var(--brdr-lite-gray);
}

.pagination__item:has(.pagination__ellipsis) {
    display: none;
}

.pagination__ellipsis {
    padding-inline: var(--em-space-md);
    margin-block: auto;
}

/* When pagination has 7+ items
            > Show ellipsis
            > Adjust layout to show prev, next, first page, and last page
        */
&:has(.pagination__item:nth-child(15)) {
    .pagination__item

{
    display: none;
    &:nth-of-type(2), &:nth-last-child(2), &:has(.pagination__nav)

{
    display: flex;
}

&:has(.pagination__ellipsis) {
    display: flex;
    align-self: stretch;
    border-left: var(--brdr-lite-gray);
}

}
}
}

/* 
        > Adjustments to pagination presentation based on screen size and content density 
    */
@media (min-width: 30em) {
    @container pagination (min-width: 89ch) {
        .pagination {
            &:has(.pagination__item:nth-child(8))

{
    .pagination__item

{
    display: inline-block;
    &:has(.pagination__ellipsis)

{
    display: none;
}

}
}

&:has(.pagination__item:nth-child(17)) {
    .pagination__item

{
    display: none;
    &:has(.pagination__ellipsis)

{
    display: flex;
}

}
}
}
}
}

@media (min-width: 69em) {
    @container pagination (min-width: 120ch) {
        .pagination {
            .pagination__nav

{
    .pagination__label

{
    height: unset;
    overflow: unset;
    position: unset;
    clip-path: unset;
}

}

&:has(.pagination__item:nth-child(17)) {
    .pagination__item

{
    display: inline-block;
    &:has(.pagination__ellipsis)

{
    display: none;
}

}
}

&:has(.pagination__item:nth-child(19)) {
    .pagination__item

{
    display: none;
    &:has(.pagination__ellipsis)

{
    display: flex;
}

}
}
}
}
}
}

/*--------------------------------------------------------------
6. Animations
--------------------------------------------------------------*/
@layer animation {
    /* Side in, fade in */
    @keyframes fade-in {
        0% {
            opacity: 0;
            transform: translate(100%);
            display: none;
        }

        100% {
            opacity: 1;
            transform: translate(0);
            display: block;
        }
    }

    /* Fade out */

    @keyframes fade-out {
        0% {
            opacity: 1;
            transform: translate(0);
            display: block;
        }

        100% {
            opacity: 0;
            transform: translate(100);
            display: none;
        }
    }

    @keyframes backdrop-fade-in {
        0% {
            background-color: rgb(0 0 0 / 0%);
        }

        100% {
            background-color: rgb(0 0 0 / 25%);
        }
    }
}

/*--------------------------------------------------------------
7. Utilities
--------------------------------------------------------------*/
@layer utilities {
    /* Text meant only for screen readers. */
    .screen-reader-text,
    .scrn-rdr-txt,
    .sr-only {
        border: 0;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        word-wrap: normal;
    }
}

/*--------------------------------------------------------------
8. Charts
--------------------------------------------------------------*/
.highlinechart,
.highbarchart {
    width: 100%;
    height: 66.67%;
    aspect-ratio: 3 / 2;
    font-family: "Open Sans", sans-serif;
    .highcharts-graph, .highcharts-tracker-line, .highcharts-area:not(.positive, .negative)

{
    fill: none;
}

.highcharts-graph {
    stroke-width: 3;
}

.highcharts-label .highcharts-label-box {
    fill: white !important;
}

.highcharts-title,
.highcharts-credits {
    display: none;
}

}

.highlinechart {
    .highcharts-point.positive

{
    fill: var(--color-accent-primary);
}

.highcharts-area.positive {
    fill: var(--color-accent-primary-light);
}

.highcharts-point.negative {
    fill: var(--color-accent-secondary);
}

.highcharts-area.negative {
    fill: var(--color-accent-secondary-light);
}

path.highcharts-graph.negative {
    stroke: var(--color-accent-secondary);
}

path.highcharts-graph.positive {
    stroke: var(--color-accent-primary);
}

}

.highbarchart {
    .highcharts-point

{
    stroke: #3d9da4;
    fill: var(--color-primary);
}

.highcharts-series-1 {
    .highcharts-point

{
    fill: #61a3d7;
}

}
}

.messages {
    width: 100%;
    height: auto;
    position: relative;
    & .messagesContainer

{
    background-color: var(--color-base-lighter);
    width: 1100px;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    & .innerMessagesContainer

{
    position: relative;
    width: 810px;
    height: auto;
    margin: 0px auto;
    & .loginMessages

{
    overflow: auto;
    border-left: 2px dotted var(--color-primary-dark);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: var(--color-primary-dark);
    padding: 20px 0 0 25px;
    & .loginMessagesRow

{
    padding-bottom: 10px;
    & .loginMessagesRowHeader

{
    color: var(--color-primary-dark);
    font-weight: bold;
}

& .loginMessagesRowContent {
    color: var(--color-accent-primary);
    font-size: 1em;
}

}
}
}
}
}

.swal__fire__font-size {
    font-size: 15px;
    text-align: justify;
}

    .swal__fire__font-size p {
        text-align: justify;
    }


#dashboard .dash .dash__card {
    flex-basis: 100%;
    .card__body

{
    padding-bottom: 0;
}

}

.hierarchy-table {
    width: 100%;
    border-collapse: collapse;
}

.hierarchy-row {
    display: table-row;
}

.hierarchy-child-row {
    display: table-row;
}

.dash__pref__msg {
    color: var(--color-accent-secondary);
    font-weight: var(--wght-semibold);
}

.node-cell {
    padding-left: 10px;
    border-bottom: 1px solid #eee;
}

.level-0-cell {
    padding-left: 0;
}

.expander {
    cursor: pointer;
    margin-right: 5px;
    user-select: none;
    font-weight: bold;
}

.collapsed::before {
    content: "+";
}

.expanded::before {
    content: "-";
}

.children-table {
    display: none;
    width: 100%;
}

    .children-table.show {
        display: table;
    }

.parent-item {
    font-weight: bold;
}

.parent-item-content {
    width: 3px;
}

.hierarchy-table th:first-child,
.hierarchy-table td:first-child {
    width: 150px;
}

@container menu (inline-size >= 82ch) {
    /* Prevents username from wrapping */
    .menu__login .btn__username {
        white-space: nowrap;
    }
    /* Prevents nav menu items from wrapping */
    #portalMenuList .menu__link {
        white-space: nowrap;
    }
}

footer.card__footer .card__footer-text {
    font-size: var(--text-xxxs);
    &.text-right {
        text-align: right;
    }
}