/**
 *
 * Provost Theme
 * For adminsitration and management interfaces
 * © Queen's University
 *
 */
:not(:defined):not(que-dynamic) {
    visibility: hidden !important;
}

html:has(que-header) {
    padding: 0px;
    margin: 0px;
    height: 100%;
}

body:has(que-header) {
    padding: 0px;
    margin: 0px;
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: "Open Sans Variable", sans-serif;
}

*:focus-visible {
    outline: var(--que__pad-xs) solid var(--que__color-blue);
    outline-offset: 0px;
    z-index: 1;
}



/*
 *
 * Default / Light Theme Palette
 *
 */
:root,
.que__light-mode {
    --que__primary-blue: #002452;
    --que__primary-gold: #fabd0f;
    --que__primary-red: #b90e31;
    --que__primary-green: #779221;
    --que__primary-purple: #614f87;
    --que__primary-brown: #876140;
    --que__primary-teal: #1d7196;
    --que__primary-black: #212121;

    --que__primary-blue--alt: #021a39;



    --que__bg-page: #fff;
    --que__bg-chrome: #f1f2f2;
    --que__bg-title: #fff;
    --que__bg-nav: #f1f2f2;
    --que__bg-nav--hover: #58595b;
    --que__bg-nav--active: #e6e7e8;
    --que__bg-header: #343a40;







    --que__input-bg: #021a39;










    /* --que__primary-blue-alt: #021a39; */
    --que__primary-blue-alt2: #063571;
    --que__primary-blue-alt3: #34629f;
    --que__primary-blue-alt4: #6195d7;
    
    --que__primary-red-alt: #cc1037;
    
    --que__chrome-title: #fff;
    --que__chrome-1: #fafafa;
    --que__chrome-2: #f5f5f5;
    --que__chrome-view: #fff;
    --que__chrome-group: #eee;
    --que__chrome-sidebar: #f6f6f6;
    --que__chrome-bg: #eee;
    --que__chrome-hover-bg: #d5e7ff;

    --que__text-title: #212121;
    --que__text-1: #272727;
    --que__text-2: #494949;
    --que__text-3: rgba(0,0,0,.5);

    --que__link: #006ef8;
    --que__link-hover: #2b89ff;
    --que__link-visited: #143866;
    --que__link-el-hover-bg: #c4deff;
    --que__link-el-hover-fg: var(--que__link);
    
    --que__dynamic-orange: #f60;
    
    --que__color-green: #2bb90e;
    --que__color-red: #b90e31;
    --que__color-orange: #fabd0f;
    --que__color-teal: #04aed9;
    --que__color-blue: #006ef8;
    --que__color-purple: #b200f8;
    
    --que__color-contrast: #000;
    --que__color-compliment: #fff;
    
    --que__popup-shadow: 0px 2px 8px rgba(0,0,0,.45);
    --que__raised-shadow: 0px 1px 4px rgba(0,0,0,.3);
    --que__card-shadow: rgba(9, 9, 9, 0.075) 0px 2px 4px 1px;


    --que__backdrop-filter: contrast(250%) blur(8px);

    --que__border-popup: 1px solid rgba(0,0,0,0.05);
    --que__border-light: 1px solid rgba(0,0,0,0.05);
    --que__border-medium: 1px solid rgba(0,0,0,0.10);
    --que__border-bold: 1px solid rgba(0,0,0,0.15);
    --que__card-border: 1px solid rgba(0,0,0,.1);
    
    --que__card-radii: 4px;
}
 
 
 /*
  *
  * Dark Theme Palette
  *
  */
@media (prefers-color-scheme: dark) {
    :root{
        --que__chrome-title: #222222;
        --que__chrome-1: #282828;
        --que__chrome-2: #333;
        --que__chrome-view: #1e1e1e;
        --que__chrome-group: #2b2b2b;
        --que__chrome-sidebar: #383838;
        --que__chrome-bg: #3a3a3a;
        --que__chrome-hover-bg: #174681;
    
        --que__text-title: #e9e9e9;
        --que__text-1: #ebebeb;
        --que__text-2: #dfdfdf;
        --que__text-3: rgba(255,255,255,.6);
    
        --que__link: #3690ff;
        --que__link-hover: #60a8ff;
        --que__link-visited: #8c36ff;
        --que__link-el-hover-bg: #00429b;
        --que__link-el-hover-fg: #fff;
        
        --que__color-red: #b90e31;
        --que__color-orange: #fabd0f;
        --que__color-teal: #04aed9;
        --que__color-blue: #006ef8;
        --que__color-purple: #b200f8;
        
        --que__color-contrast: #fff;
        --que__color-compliment: #000;

        --que__border-popup: 1px solid rgba(255,255,255,0.02);
        --que__border-light: 1px solid rgba(255,255,255,0.05);
        --que__border-medium: 1px solid rgba(255,255,255,0.085);
        --que__border-bold: 1px solid rgba(255,255,255,0.12);
    }
}

 /*
  *
  * Common Units
  *
  */
:root {
    --que__max-width: calc(100vw - var(--que__pad-xl) * 2);
    --que__gutter: calc((100vw - (var(--que__max-width) - 30px)) / 2);
    --gutter: var(--que__gutter);

    --que__pad-xs: 2px;
    --que__pad-s: 4px;
    --que__pad-m: 8px;
    --que__pad-l: 16px;
    --que__pad-xl: 24px;
    --que__pad-2xl: 32px;
    --que__pad-3xl: 64px;
    --que__pad-4xl: 80px;

    --que__pad-xxl: var(--que__pad-2xl);
    --que__pad-xxxl: var(--que__pad-3xl);
    --que__pad-gutter: max((calc((100vw - 1140px) / 2) + var(--que__pad-2xl)), var(--que__pad-2xl));

    --que__chrono-fast: 0.125s;
    --que__chrono-medium: 0.25s;
    --que__chrono-slow: 0.4s;
    --que__chrono-bounce: 1.2s;

    --que__curve-bounce-rise: cubic-bezier(0.22, 0.95, 0.42, 1);
    --que__curve-bounce-fall: cubic-bezier(0.55, 0, 0.78, 0.2);
    --que__curve-bounce-settle: cubic-bezier(0.24, 0.9, 0.3, 1);
    --que__bounce-value: 0;

    --que__reduced-stimulus-filter__active: contrast(0.6) saturate(0.4);
    --que__reduced-stimulus-filter__hover: contrast(1) saturate(1);
    --que__chronos__stimulus-transition: filter 2s 1.5s;
}

@property --que__bounce-value {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

@keyframes que__bounce-decay {
    0% {
        --que__bounce-value: 0;
        animation-timing-function: var(--que__curve-bounce-rise);
    }

    18% {
        --que__bounce-value: 4;
        animation-timing-function: var(--que__curve-bounce-fall);
    }

    34% {
        --que__bounce-value: 1;
        animation-timing-function: var(--que__curve-bounce-rise);
    }

    52% {
        --que__bounce-value: 2;
        animation-timing-function: var(--que__curve-bounce-fall);
    }

    68% {
        --que__bounce-value: 1;
        animation-timing-function: var(--que__curve-bounce-rise);
    }

    82% {
        --que__bounce-value: 1.5;
        animation-timing-function: var(--que__curve-bounce-fall);
    }

    92% {
        --que__bounce-value: 1;
        animation-timing-function: var(--que__curve-bounce-rise);
    }

    97% {
        --que__bounce-value: 1.2;
        animation-timing-function: var(--que__curve-bounce-settle);
    }

    100% {
        --que__bounce-value: 1;
    }
}

/* .que__bounce-motion {
    --que__bounce-distance: 42%;
    transform-origin: center bottom;
    transform: translateY(calc(var(--que__bounce-value) * -1 * var(--que__bounce-distance)));
    animation: que__bounce-decay var(--que__chrono-bounce) both;
}

.que__bounce-outline-width {
    --que__bounce-outline-max: 6px;
    outline-style: solid;
    outline-width: calc(var(--que__bounce-value) * var(--que__bounce-outline-max));
    animation: que__bounce-decay var(--que__chrono-bounce) both;
} */


@media (min-width: 576px) {
    :root {
        --que__max-width: 540px;
        --que__gutter: calc((100vw - (var(--que__max-width) - 30px)) / 2);
        /* --que__gutter: calc((100vw - (var(--que__max-width) - 30px)) / 2); */
    }
}

@media (min-width: 768px) {
    :root {
        --que__max-width: 720px;
        /* --que__gutter: calc((100vw - (var(--que__max-width) - 30px)) / 2); */
    }
}

@media (min-width: 992px) {
    :root {
        --que__max-width: 960px;
        /* --que__gutter: calc((100vw - (var(--que__max-width) - 30px)) / 2); */
    }
}

@media (min-width: 1200px) {
    :root {
        --que__max-width: 1140px;
        /* --que__gutter: calc((100vw - (var(--que__max-width) - 30px)) / 2); */
    }
}

.que__reduce-motion {
    --que__chrono-fast: 0s;
    --que__chrono-medium: 0s;
    --que__chrono-slow: 0s;
    --que__chrono-bounce: 0s;
}


/*
 *
 * Fonts
 *
 */
@font-face {
    font-family: 'Open Sans Variable';
    src: url('fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype-variations');
    font-weight: 1 999;
    font-stretch: 1% 200%;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons Round'), 
         local('MaterialIconsRound-Regular'),
         /* url('fonts/MaterialSymbolsSharp-VariableFont_FILL,GRAD,opsz,wght.ttf') format('truetype-variations'); */
         url('fonts/MaterialSymbolsSharp_Filled-Light.ttf') format('truetype-variations');
         /* url('fonts/MaterialSymbolsSharp-ExtraLight.ttf') format('truetype-variations'); */
}

@font-face {
    font-family: 'Volkhov';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/Volkhov-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Metropolis';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/Metropolis-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Metropolis';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/Metropolis-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Open Dyslexic';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/OpenDyslexic-Regular.otf') format('opentype');
}

/*
 *
 * Font Definitions
 *
 */
:root {
    --que__font__size-fp: 11px; /* fine print */
    --que__font__size-xs: 13px;
    --que__font__size-s: 14px;
    --que__font__size-m: 16px;
    --que__font__size-l: 18px;
    --que__font__size-xl: 20px;
    --que__font__size-2xl: 24px;
    --que__font__size-3xl: 32px;
    --que__font__size-4xl: 40px;
    --que__font__size-5xl: 54px;
    
    --que__font__weight-light: 300;
    --que__font__weight-normal: 400;
    --que__font__weight-bold: 700;
    --que__font__weight-xbold: 900;
    
    --que__font__family-text: 'Open Sans Variable', 'Open Sans', sans-serif;
    --que__font__family-header: 'Metropolis', serif;
    --que__font__family-title: 'Volkhov', serif;
    --que__font__family-glyph: 'Material Icons';
    --que__font__family-monospace: 'Open Sans Monospace', monospace;
    
    --que__font-title: normal var(--que__font__weight-light) var(--que__font__size-xxl)/1 ;
    
    --que__glyph__size-s: 18px;
    --que__glyph__size-m: 24px;
    --que__glyph__size-l: 32px;
    --que__glyph__size-xl: 48px;
    
    --que__glyph-s: normal 300 var(--que__glyph__size-s)/1 var(--que__font__family-glyph);
    --que__glyph-m: normal 300 var(--que__glyph__size-m)/1 var(--que__font__family-glyph);
    --que__glyph-l: normal 300 var(--que__glyph__size-l)/1 var(--que__font__family-glyph);
}

/* Small device, 1 column, adaptive */
@media (max-width: 768px) 
{
    :root {
        --que__font__size-fp: 9px;
        --que__font__size-xs: 11px;
        --que__font__size-s: 12px;
        --que__font__size-m: 14px;
        --que__font__size-l: 16px;
        --que__font__size-xl: 18px;
        --que__font__size-2xl: 22px;
        --que__font__size-3xl: 26px;
        --que__font__size-4xl: 30px;
        --que__font__size-5xl: 34px;
    }
}


/*
 *
 * Glyph/Icon Definitions
 *
 */
.que__dyslexia-font {
    --que__font__family-text: 'Open Dyslexic', serif;
    --que__font__family-header: 'Open Dyslexic', serif;
    --que__font__family-title: 'Open Dyslexic', serif;
}

.que__larger-fonts {
    --que__font__size-xs: 14px;
    --que__font__size-s: 16px;
    --que__font__size-m: 18px;
    --que__font__size-l: 20px;
    --que__font__size-xl: 22px;
    --que__font__size-2xl: 28px;
    --que__font__size-3xl: 32px;
    --que__font__size-4xl: 40px;
    --que__font__size-5xl: 54px;
}

@media reader, speech, aural {
    [que-icon]::before,
    [que-icon-s]::before,
    [que-icon-m]::before,
    [que-icon-l]::before,
    [que-icon-only]::before,
    [que-icon-only-s]::before,
    [que-icon-only-m]::before,
    [que-icon-only-l]::before {
        display: none !important;
    }
}

[que-icon]::before {
    display: inline-block;
    text-align: center;
    font-family: var(--que__font__family-glyph);
    font-weight: 400;
    font-size: var(--que__glyph__size-m);
    /* line-height: 1px; */
    vertical-align: sub;
    position: relative;
    width: 1em;
    text-transform: none;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

.que__button[que-icon]::before,
button[que-icon]::before {
    margin-right: var(--que__pad-m);
}

[que-icon-only] {
    position: relative;
    text-indent: -9999px;
    text-align: left;
    min-width: 1em;
}

[que-icon-only]::before {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0px;
    text-indent: 0px;
}

[que-icon]::before{
    content: attr(que-icon) / "";
    font-size: var(--que__glyph__size-s);
    font-weight: 100 !important;
}

[que-icon-only]::before{
    content: attr(que-icon-only) / "";
    font-size: var(--que__glyph__size-s);
}



:root {
    --que__form-label-width: 120px;
}

:host(que-input) {
    display: block;

    .container {
        display: grid;
        grid-template-columns: var(--que__form-label-width) 1fr;
        /* grid-template-columns: calc(fit-content + 50px) 1fr; */
        grid-template-rows: auto auto;
        align-items: center;

        input {
            grid-column: 2 / 3;
            grid-row: 1 / 2;
            
            padding: var(--que__pad-m);
            border-radius: 0px;
            border: solid 1px var(--que__text-3);
            background-color: var(--que__chrome-view);
            color: var(--que__text-1);
            outline: none !important;
            flex-grow: 1;
            font-size: var(--que__font__size-s);

            transition: 
                background-color 0.2s ease-in-out,
                border-color 0.2s ease-in-out, 
                color 0.2s ease-in-out;
        }

        input:disabled {
            background-color: var(--que__chrome-view);
            color: var(--que__text-3);
            border: solid 1px color-mix(in oklab, var(--que__text-3), transparent 80%);
        }

        input:focus {
            outline: solid var(--que__pad-xs) var(--que__color-blue) !important;
            /* outline-style: solid !important;
            outline-color: var(--que__color-blue) !important;
            outline-width: calc(var(--que__pad-xs) * var(--que__bounce-value, 0)) !important;
            animation: que__bounce-decay var(--que__chrono-bounce) both; */

            &.que__programatic-focus {
                outline-width: calc(var(--que__pad-xs) * var(--que__bounce-value, 0)) !important;
                animation: que__bounce-decay var(--que__chrono-bounce) both;
            }
        }

        input, select {
            max-width: 400px;
        }

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

        label {
            grid-column: 1 / 2;
            grid-row: 1 / 2;
            display: block;
            font-size: var(--que__font__size-xs);
            color: var(--que__text-1);
            text-align: right;
            padding-right: var(--que__pad-m);
            box-sizing: border-box;
        }
        
        #validation-container,
        /* ::slotted([slot=validation]), */
        small {
            grid-column: 2 / 3;
            /* grid-row: 2 / 3; */
            /* color: var(--que__primary-red);
            margin: 0px;
            font-size: var(--que__font__size-xs); */
        }

        #input-container {
            display: flex;
        }
        
        ::slotted([slot=validation]) {
            color: var(--que__primary-red);
            margin: 0px;
            font-size: var(--que__font__size-xs);
        }

        small {
            color: var(--que__text-3);
            padding: var(--que__pad-xs) 0px 0px 0px;
        }
        
        ::slotted([slot=validation]) {
            color: var(--que__primary-red);
            padding: var(--que__pad-xs) 0px 0px var(--que__pad-l);
        }


    }

}

[slot=validation] li {
    display: inline-block;
    overflow-wrap: break-word;
    max-width: 200px;
}

/**
 *
 * Fabs & Fab Container
 *
 */

que-fab-container {
    --button-size: 56px;
    --fab-color: var(--que__primary-gold);

    position: fixed;
    bottom: calc(var(--que__pad-2xl) + var(--que__pad-m));
    right: var(--que__pad-2xl);
    /* right: calc(var(--que__gutter) - (var(--button-size) / 2)); */
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: var(--que__pad-m);
    z-index: 99900;

    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

@media (max-width: 1350px) {
    que-fab-container {
        right: calc(var(--que__gutter) - (var(--button-size) / 2));
    }
}

que-fab {
    position: relative;
    
    &::before {
        content: none !important;
    }
}

:host(que-fab) {
    button {
        width: var(--button-size);
        height: var(--button-size);
        transition: width 0.1s ease;
        padding: 0px;
        border: none;
        overflow: hidden;
        cursor: pointer;

        /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
        background-color: var(--fab-color);

        &:hover, &:focus {
            width: max(var(--button-size), var(--content-width));
        }
    }

    #content {
        /* --content-width */
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        height: var(--button-size);
        padding: 0px var(--que__pad-l) 0px var(--button-size);
        white-space: nowrap;
        width: fit-content;


        &::before {
            position: absolute;
            font-size: 28px;
            top: 0px;
            left: 0px;
            width: var(--button-size);
            height: var(--button-size);
            display: flex;
            align-items: center;
            justify-content: center;
            color: inherit;
        }
    }
}

/**
 *
 * Fabs & Fab Container
 *
 */

que-sidecar {
    position: fixed;
    top: 0px;
    bottom: 0px;
    right: 0px;
    height: 100%;
}


:host(que-sidecar) {
    dialog {
        height: 100%;
        width: 100px;
        background-color: #FC0;
        z-index: 99900;
    }
    /* button {
        width: var(--button-size);
        height: var(--button-size);
        transition: width 0.1s ease;
        padding: 0px;
        border: none;
        overflow: hidden;
        cursor: pointer;

        background-color: var(--fab-bg-color);

        &:hover, &:focus {
            width: max(var(--button-size), var(--content-width));
        }
    }

    #content {
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        height: var(--button-size);
        padding: 0px var(--que__pad-l) 0px var(--button-size);
        white-space: nowrap;
        width: fit-content;


        &::before {
            position: absolute;
            font-size: 28px;
            top: 0px;
            left: 0px;
            width: var(--button-size);
            height: var(--button-size);
            display: flex;
            align-items: center;
            justify-content: center;
            color: inherit;
        }
    } */
}


/**
 *
 * Header
 *
 */

que-app {
    visibility: visible !important;
    background-color: var(--que__chrome-bg) !important;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    color: var(--que__text-1);

    a {
        color: var(--que__link);
        /* text-decoration: none; */
        /* transition: color 0.2s ease-in-out; */

        &:hover {
            color: var(--que__link-hover);
            /* text-decoration: underline; */
        }

        &:visited {
            color: var(--que__link-visited);
        }
    }

    .que__skip-link {
        position: fixed;
        top: var(--que__pad-xl);
        left: -9999px;
        display: flex;
        flex-direction: row;
        background-color: var(--que__primary-gold);
        color: #000 !important;
        font-size: 24px;
        padding: var(--que__pad-2xl) var(--que__pad-3xl);
        z-index: 999000;
        line-height: 24px;
        column-gap: var(--que__pad-xl);
        text-decoration: none;
        box-shadow: var(--que__popup-shadow);

        &::before {
            top: 0px;
            position: static;
            line-height: 24px;
            font-size: 24px;
        }

        &:focus {
            left: 0px;
        }
    }
}

body:has(que-app) {
    margin: 0px;
    height: 100%;
    background-color: var(--que__chrome-bg);
}

que-app:not(.que__ready) {
    * {
        display: none !important;
        opacity: 0;
    }

    ::before {
        display: block;
    }
}

/**
 *
 * Header
 *
 */

:host(que-main) {
    flex-grow: 1;
}

que-main {
    flex-grow: 1;
}

/**
 *
 * Header
 *
 */


 
que-header {
    --que__avatar: url(/media/avatar.svg);
    a {
        text-decoration: none;
    }
}

:host(que-header) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    scrollbar-color: var(--que__primary-blue-alt3) var(--que__primary-blue-alt);
    font-size: var(--que__font__size-fp);
    a {
        text-decoration: none;
    }

    section {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    section.primary {
        min-height: 70px;
        padding: 0px var(--que__gutter);
        background-color: var(--que__primary-blue);
        color: #fff !important;

        .logo {
            display: block;
            background-image: url(/media/queens-logo-reversed.svg);
            text-indent: -9999px;
            min-width: 130px;
            min-height: 33px;
            background-size: contain;
            padding: 0px;
            background-repeat: no-repeat;
            background-position: left center;
            margin: 0px;
        }

        #heading {
            position: relative;
            top: 4px;
            font-family: var(--que__font__family-header);
            font-size: var(--que__font__size-xl);
            font-weight: 500;
            margin: 0px auto 0.2em 0px;
            color: var(--que__primary-gold) !important;
            text-wrap: balance;
            padding: 0px var(--que__pad-xl);
        }


        a#heading[href] {
            padding-left: calc((var(--que__pad-xl) * 2) + 1.0em);
            position: relative;

            &::before {
                content: "home";
                font-family: var(--que__font__family-glyph);
                position: absolute;
                left: var(--que__pad-xl);
                top: 50%;
                line-height: 0px;
            }

            &:hover {
                color: color-mix(in oklab, var(--que__primary-gold), white 40%) !important;
            }
        }

        #heading small {
            display: block;
            font-size: var(--que__font__size-xs);
            text-transform: uppercase;
            color: #fff !important;
            font-weight: 500;
        }

        nav {
            flex-grow: 1;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
        }
    }

    section.secondary {
        padding: 0px var(--que__gutter);
        display: flex;
        flex-direction: row;
        background-color: var(--que__primary-blue);
    }

    section.header-title {
        background-color: var(--que__chrome-title);
        color: var(--que__text-title) !important;
        padding: 0px var(--que__gutter);
        height: 60px;

        h1, a {
            font-size: 24px;
            font-weight: inherit;
            font-weight: 600;
            color: var(--que__text-title);
            margin: 0px;
            padding: 0px;
        }
    }

    nav.launchers {
        position: relative;
        display: flex;
        flex-direction: row;
        align-self: stretch;
        margin-right: calc(0px - var(--que__pad-l));

        & > *:not(aside) {
            position: relative;
            border: none;
            display: flex;
            flex-direction: row;
            align-items: center;
            background-color: transparent;
            padding: 4px var(--que__pad-l) 0px;
            color: #fff !important;
            font-size: var(--que__font__size-m);
            margin-left: var(--que__pad-xs);
            white-space: nowrap;
            user-select: none;
        }

        & > button:hover,
        & > a:hover {
            text-decoration: underline;
            cursor: pointer;
        }

        & > button:hover::before,
        & > a:hover::before {
            text-decoration: none !important;
        }

        /* & > button:hover::after {
            content: "";
            position: absolute;
            top: calc(100% - var(--que__pad-xs));
            left: var(--que__pad-l);
            right: var(--que__pad-l);
            border-bottom: solid 2px var(--que__primary-gold);
        } */

        & > button.active::after, 
        & > a.active::after {
            content: "";
            position: absolute;
            bottom: var(--que__pad-xs);
            left: var(--que__pad-l);
            right: var(--que__pad-l);
            border-bottom: solid 2px var(--que__primary-gold);
        }

        & > button::before,
        & > a::before {
            position: absolute;
            display: inline-block;
            top: 0px;
            font-weight: 600 !important;
            font-size: 16px;
            text-decoration: none !important;
        }

        & > *:last-child {
            padding-right: 0px;
        }

        #launch-search::before {
            margin-right: var(--que__pad-m);
        }

        #launch-account,
        #launch-logout {
            text-transform: uppercase;
            font-size: var(--que__font__size-xs);
            font-weight: 600;
            font-size: 12px;
            letter-spacing: 1.5px;

            &::before {
                top: calc(50% + 2px);
                width: 1.5em;
                line-height: 0px;
                text-align: center;
            }
        }

        /* #launch-account {
            padding-right: calc(var(--que__pad-l) + var(--que__pad-m) + 1.5em);

            &::before {
                right: var(--que__pad-l);
                content: "arrow_forward_ios";
                transform: rotate(90deg);
            }
        } */


        #launch-logout {
            padding-left: calc(var(--que__pad-l) + var(--que__pad-m) + 1.5em);

            &::before {
                left: var(--que__pad-l);
            }
        }

        #launch-search {
            text-decoration: none !important;
            &::before {
                position: static;
                color: var(--que__primary-gold);
                font-size: 24px;
                text-decoration: none !important;
            }
            &::after {
                right: var(--que__pad-m);
            }
        }

        /* #launch-account::before {
            content: "arrow_forward_ios";
            display: inline-block;
            transform: rotate(90deg);
            font-family: var(--que__font__family-glyph);
            line-height: 0px;
        } */

        

        /* #launch-logout::before {
            
        } */
    }


    que-header > h1[slot="header-title"] {
        position: relative;
        top: 3px;
        font-family: var(--que__font__family-header);
        font-size: var(--que__font__size-xl);
        margin: 0px;

        small {
            display: block;
            font-size: var(--que__font__size-xs);
            text-transform: uppercase;
            color: #ddd !important;
            font-weight: 500;
        }
    }

    .popout.open {
        pointer-events: all;
        opacity: 1;
    }


    #popout-account {

        section {
            align-items: center;
            justify-content: center;
            padding-bottom: 0px;
        }

        h3 {
            display: block;
            text-align: center;
            align-self: center;
            font-size: var(--que__font__size-xl);
            font-weight: 300;
            text-transform: uppercase;
            font-family: var(--que__font__family-header);
            margin: 0px;
        }

        h3::before {
            content: "";
            display: block;
            background-image: var(--que__avatar);
            background-size: cover;
            background-position: center;
            background-origin: border-box;
            box-sizing: content-box;
            width: 120px;
            height: 120px;
            border-radius: 100%;
            border: solid 1px rgba(255,255,255,0.05);
            margin: 0px auto var(--que__pad-xl);
            flex-shrink: 0;
        }
    }

}

:host(que-header) .popout,
[slot^="popout="] {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    top: calc(100% + var(--que__pad-m));
    right: 0px;
    width: min(400px, calc(100vw - var(--que__gutter)));
    max-height: max(100px, calc(100vh - 80px));
    overflow-y: auto;
    background-color: #fc0;
    pointer-events: none;
    opacity: 0;
    z-index: 99999;
    background-color: var(--que__primary-blue);

    box-shadow: var(--que__popup-shadow);

    ::after {
        position: absolute;
        content: "";
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        pointer-events: none;
        border: var(--que__border-popup);
    }

    section {
        flex-grow: 1;
        padding: var(--que__pad-xl);
        margin: 0px;
    }

    footer {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: var(--que__pad-xl);
        margin: 0px;
        border-top: solid var(--que__pad-s) var(--que__primary-blue-alt);
    }

    footer a {
        display: block;
        padding: var(--que__pad-m) var(--que__pad-l);
        margin: 0px;
        background-color: var(--que__primary-blue);
        font-size: var(--que__font__size-s);
        color: #fff !important;
    }

    footer a:hover {
        background-color: var(--que__primary-blue-alt2);
    }
    
    footer a::before {
        margin-right: var(--que__pad-m);
    }

    footer a + a {
        margin-top: var(--que__pad-xs);
    }
}



que-header [slot="nav-primary"] {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: fit-content !important;
    max-height: fit-content !important;

    hr {
        display: block;
        border: none;
        padding: 0px;
        margin: 0px;
        background-color: transparent;
        flex-grow: 1;
    }

    a {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: var(--que__pad-s) var(--que__pad-l) var(--que__pad-m);
        align-items: center;
        color: #fff !important;
        font-size: var(--que__font__size-xs);
        line-height: 100%;
        text-align: center;
        font-family: var(--que__font__family-header);
        text-decoration: none;
        height: fit-content !important;
        max-height: fit-content !important;
        --lpad: var(--que__pad-l);
        --rpad: var(--que__pad-l);

        &:first-child {
            padding-left: 0px;
            --lpad: 0px;
        }

        &:last-child {
            padding-right: 0px;
            --rpad: 0px;
        }
    }

    a + a{
        margin-left: var(--que__pad-xs);
    }

    a::before {
        display: block;
        margin: 0px 0px var(--que__pad-s) 0px;
        line-height: 100%;
        font-size: 18px;
    }

    a:not([data-search-url],[que-icon="search"]):hover::after {
        content: "";
        position: absolute;
        bottom: var(--que__pad-xs);
        left: var(--lpad);
        right: var(--rpad);
        border-bottom: solid 2px var(--que__primary-gold);
    }

    a:hover::after {
        color: var(--que__primary-gold) !important;
    }

    a.active {
        background-color: var(--que__primary-blue);
        color: #fff !important;
    }

    a.active:not([data-search-url],[que-icon="search"])::after {
        content:  "";
        position: absolute;
        bottom: var(--que__pad-xs);
        left: var(--lpad);
        right: var(--rpad);
        border-bottom: solid 2px var(--que__primary-gold);
    }
}

/**
 *
 * Footer
 *
 */

que-footer {
    color: #fff; 
    background-color: var(--que__primary-blue);

    a {
        text-decoration: none;
    }
}

:host(que-footer) {
    margin-top: auto;

    a {
        text-decoration: none;
    }

    footer {
        display: flex;
        flex-direction: column;
        
        margin-top: 0px;

        

        & > small,
        & > section {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: var(--que__pad-l) var(--que__gutter);

            &:empty {
                display: none;
            }
        }

        & > small {
            font-size: var(--que__font__size-fp);
        }
    }
}

/**
 *
 * Header
 *
 */

:host(que-section) {
    section {
        display: flex;
        flex-direction: column;
        padding: 0px var(--que__gutter);
    }

    header {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        color: var(--que__text-1);
        margin: var(--que__pad-l) 0px var(--que__pad-s);

        h2 {
            font-size: var(--que__font__size-s);
            padding: 0px 0px 0px var(--que__pad-l);
            margin: 0px auto var(--que__pad-s) 0px;
        }

        h2::before {
            /* font-size: var(--que__font__size-s); */
            padding-right: var(--que__pad-l);
        }

        .filter-input {
            padding: 0px;
            display: flex;
            flex-direction: row;
            align-items: stretch;
            position: relative;
            border-radius: 0px;
            border: solid 1px var(--que__text-3);
            background-color: var(--que__chrome-view);
            outline: none !important;
            width: 300px;

            input {
                padding: var(--que__pad-m) var(--que__pad-m) var(--que__pad-m) calc((var(--que__pad-m)* 2) + 16px);
                display: block !important;
                border-radius: 0px;
                border: none;
                color: var(--que__text-1);
                background-color: transparent;
                outline: none !important;
                flex-grow: 1;
            }

            .clearbutton {
                position: relative;
                text-indent: -9999px;
                border: none;
                background: transparent;
                color: var(--que__text-2);
                cursor: pointer;
                width: 16px;
                padding: 0px var(--que__pad-m);
                box-sizing: content-box;
            }

            .clearbutton::before {
                position: absolute;
                /* top: calc(50% ); */
                left: var(--que__pad-m);
                pointer-events: none;
                font-size: 16px;
                margin: 0px;
                text-indent: 0px;
            }
        }

        .filter-input::before {
            position: absolute;
            top: calc(50% - 0.05em);
            line-height: 0px;
            left: var(--que__pad-m);
            pointer-events: none;
            font-size: 16px;
            margin: 0px;
            text-indent: 0px;
        }
    }
}

que-section::before {
    display: none !important;
}

:host(que-reassure-banner) {

        display: block;
        background-image: url("data:image/svg+xml,%3Csvg width='170' height='320' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke-width='10'%3E%3Cpath d='m65.1 268-65.1 27.3-3.69e-6 25.2h103z' fill='%237a2e15'/%3E%3Cpath d='m18.7 225-18.7 28.1-8.54e-6 51.9a203 203 0 00.898.898c5.09 4.89 10.4 9.45 16 13.7h11.2l35.4-36.8z' fill='%23b54927'/%3E%3Cpath d='m1.64e-6 214 1.91e-6 48.4 20.3-21.1z' fill='%23f0790f'/%3E%3Cpath d='m144 286-14.1 5.72-30.8 26.5 2.17 2.09 61.9 1e-5c-6.3-12.8-9.81-34.4-19.2-34.3z' fill='%23952d6b'/%3E%3C/g%3E%3Cg stroke-width='10'%3E%3Cpath d='m106 222-42.8 61.1 38.2 36.8 9.71 1e-5 33-34.3s-11.4-3.12-18.6 4.32c-8.38 8.7-17.8 5.04-19.6-.332-1.87-5.37 3.77-12.4 10.6-10.7 6.96 1.74 25.2-5.49 14.8-15.4-10.3-9.94-15.1 5.31-25.2 5.49-10.1.165-6.31-23.9 3.81-24.1z' fill='%23a51d2d'/%3E%3Cpath d='m110 245s24.2 5.92 55.1-26.2l-20.7-19.9-19.8 20.6c-14.9 15.4-35.3 5.66-35.3 5.66l20.7 19.9z' fill='%23cb3112'/%3E%3Cpath d='m105 240 19.8-20.6c4.95-5.14 15.3 4.81 25.4 4.63 5.07-.0756 10.1-.165 15.1-5.31 4.38-4.55 4.74-15.3-.429-20.2-10.3-9.95-18.3-1.72-32.7-15.6l-28.8-27.7-41.6 43.2z' fill='%23f24f12'/%3E%3Cpath d='m27.3 1.74e-6 28.4 51.9 13-33.6 4.84-5.02c4.79-4.98 12.2-9.47 20.4-13.3z' fill='%2362a0ea'/%3E%3Cpath d='m2.48e-6 5.28e-6-4.46e-6 55.6 17 16.4 29.1-11.8 12.5-31.5-29.9-28.7z' fill='%2399c1f1'/%3E%3C/g%3E%3Cg stroke-width='10'%3E%3Cpath d='m26.5 41.4c-6.48.11-17 4.42-26.5 4.9l-6.04e-6 56.7 29.2-14.4 2.68-32.1c9.9-10.3 1.78-15.2-5.39-15.1z' fill='%2362cdea'/%3E%3Cpath d='m48 7.2e-6a10 10 43.9 003.09 7.62 10 10 43.9 0014.2-.234 10 10 43.9 002.77-7.38z' fill='%2399c1f1'/%3E%3Cpath d='m63.5 283 41.6-43.2-25.8-24.9c-10.3-9.95-5.39-15.1-.429-20.2 4.96-5.15 18-8.41 23-13.6 4.95-5.14 6.82-21.2 1.66-26.2l-53.4 31.9-29.8 54.6z' fill='%23f47300'/%3E%3Cpath d='m18.5 135-18.5 28.9 9.14e-6 58 20.3 19.5 41.6-43.2z' fill='%23ffa200'/%3E%3Cpath d='m-5.69e-7 134-4.21e-7 42.3 18.6-19.4z' fill='%239fd718'/%3E%3C/g%3E%3Cg stroke-width='10'%3E%3Cpath d='m61.9 198-43.2-41.6 41-57.3 43.8 55.7z' fill='%23f7e385'/%3E%3Cpath d='m17 72-13.9 14.4c-1.05 1.1-2.1 1.75-3.14 2.07l4.11e-7 50.4 18.6 17.9 41.6-43.2z' fill='%2333d17a'/%3E%3Cpath d='m47.7 151c5.17 4.97 15.3 4.81 15.1-5.32-.214-10.1 9.69-20.4 20-10.5l20.7 19.9s-10.6-20.1-.651-30.4c9.91-10.3 34.9 6.85 36.7-12.9 1.8-19.7-19.5-37.7-34.7-44.7l-36.9 8.44-7.64 37.9-4.95 5.14c-4.95 5.14-12.8 27.4-7.6 32.3z' fill='%23ecfde3'/%3E%3C/g%3E%3Cg%3E%3Cpath d='m60.2 114 44.6-46.3c-16.7-6.83-48.2-36.5-33.3-51.9l-54.5 56.6z' fill='%238ff0d3' stroke-width='10'/%3E%3Cellipse transform='rotate(224)' cx='-141' cy='-3.04' rx='7.17' ry='10.7' fill='%23ffa92d' stroke-width='10'/%3E%3Cellipse transform='matrix(-.0271 -1 .999 -.0345 0 0)' cx='-160' cy='125' rx='7.17' ry='9.49' fill='%23f24f12' stroke-width='9.41'/%3E%3Cellipse transform='rotate(224)' cx='-159' cy='-142' rx='10.8' ry='7.14' fill='%239fd718' stroke-width='10'/%3E%3C/g%3E%3C/svg%3E");
        background-position: top left;
        background-size: contain;
        background-repeat: no-repeat;
        padding: var(--que__pad-3xl) var(--que__pad-2xl) var(--que__pad-3xl) calc( var(--que__pad-2xl) + 120px);
        background-color: var(--que__primary-blue);
        background-origin: border-box;
        border: solid 1px color-mix(in oklab, var(--que__color-contrast), transparent 90%);
        color: #fff;

        h4 {
            font-size: var(--que__font__size-l);
            font-family: var(--que__font__family-header);
            margin-bottom: var(--que__pad-m);
            text-transform: uppercase;
            margin: 0px;
            padding: 0px;
        }

        p {
            font-size: var(--que__font__size-s);
            padding: 0px;
            margin: var(--que__pad-l) 0px;
        }

        button {
            display: inline-block;
            color: #000;
            background-color: #fff;
            border: none;
            padding: var(--que__pad-m);
            cursor: pointer;
            font-size: var(--que__font__size-s);
        }
}


@property --sinusoidal-animation {
    syntax: '<number>';
    initial-value: 0.5;
    inherits: false;
}

@keyframes que__progress-bar-indeterminate {
    0% {
        background-position: 200% 0%;
    }
    100% {
        background-position: 0% 0%;
    }
}

@keyframes sinusoidal-animation {
    0% {
        --sinusoidal-animation: 0.0;
    }
    50% {
        --sinusoidal-animation: 1;
    }
    100% {
        --sinusoidal-animation: 0.0;
    }
}

:root {
    --sinusoidal-animation: 0.5;
}

#que__toast-container {
    position: fixed;
    z-index: 9999999;
    bottom: var(--que__pad-xl);
    right: calc(var(--que__pad-gutter) + var(--que__pad-2xl));
    left: calc(var(--que__pad-gutter) + var(--que__pad-2xl));
    animation: sinusoidal-animation 2s infinite ease-in-out;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    /* filter: drop-shadow(var(--que__popup-shadow)); */

    --toast-bg: var(--que__primary-blue);
    --toast-fg: #fff;

    .que__toast-notification-info {
        --toast-bg: var(--que__primary-teal);
        --toast-fg: #fff;
    }

    .que__toast-notification-success {
        --toast-bg: var(--que__primary-green);
        --toast-fg: #fff;
    }

    .que__toast-notification-warning {
        --toast-bg: var(--que__primary-gold);
        --toast-fg: #fff;
    }

    .que__toast-notification-error {
        --toast-bg: var(--que__primary-red);
        --toast-fg: #fff;
    }

    .que__toast-notification-progress {
        --toast-bg: var(--que__chrome-title);
        --toast-fg: var(--que__text-1);
        --progress: 50%;

        .que__progress-container {
            flex-grow: 1;
            margin: 0px var(--que__pad-m);
            contain: paint;
        }

        .que__progress-bar {
            background-color: var(--que__chrome-view);
            background-image: linear-gradient(90deg, var(--que__primary-teal) var(--progress), transparent var(--progress));
            height: 0.25em;
            margin-top: var(--que__pad-s);
            position: relative;
        }

        .que__progress-bar::before {
            position: absolute;
            content: "";
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            border: var(--que__border-light);
        }

        .que__progress-bar.que__indeterminate {
            background-image: linear-gradient(90deg, var(--que__primary-teal) calc(var(--sinusoidal-animation) * 100%), transparent calc(var(--sinusoidal-animation) * 100%));
            background-size: 200% 100%;
            animation: que__progress-bar-indeterminate 3s infinite;
            animation-timing-function: linear;
        }

        .que__progress-message {
            font-size: var(--que__font__size-xs);
            color: var(--que__text-3);
            display: block;
            max-width: 100%;
            height: 1.8em;
            overflow: hidden;
        }

        h5 {
            margin: 0px;
        }

        .que__toast-close::before {
            color: var(--que__text-1) !important;
        }

        .que__toast-close:hover::before {
            color: #fff !important;
        }
    }

    .que__toast-notification.que__toast-notification-progress.active .que__toast-close::before {
        content: "dangerous";
    }



    

    .que__toast-notification + .que__toast-notification {
        margin-top: var(--que__pad-m);
    }

    .que__toast-notification {
        --progress: 0.0;

        --button-size: 32px;
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;

        overflow-y: hidden;

        /* background-color: color-mix(in oklab, var(--toast-bg), transparent 10%);
        backdrop-filter: var(--que__backdrop-filter); */
        background-color: var(--toast-bg);
        color: var(--toast-fg);

        padding: var(--que__pad-l);
        margin: 0px;
        box-shadow: var(--que__raised-shadow);

        p {
            flex-grow: 1;
            margin: 0px;
        }

        &.error {
            .que__progress-bar {
                background-color: var(--que__color-red) !important;
                background-image: none !important;
            }

            .que__progress-message {
                color: var(--que__color-red);
            }
        }

        &.success {
            .que__progress-bar {
                background-color: var(--que__primary-green) !important;
                background-image: none !important;
            }
        }

        .que__toast-close {
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            text-indent: -9999px;
            border-radius: 100%;

            cursor: pointer;
            background-color: transparent;
            border: none;

            width: var(--button-size);
            height: var(--button-size);
            padding: var(--que__pad-m);
            box-sizing: border-box;
        }

        .que__toast-close:hover {
            background-color: var(--que__primary-red);
        }

        .que__toast-close::before,
        .que__toast-close::after {
            font-size: 22px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            position: absolute;
            color: #fff;
            margin: 0px;
            padding: 0px;
            text-indent: 0px;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            width: 100%;
            box-sizing: border-box;
        }

        .que__toast-close:note([que-icon])::before {
            content: "close";
        }

        .que__toast-close::after {
            content: "";
            border: none;
            border-radius: 100%;
            background-size: cover;
            background-origin: border-box;
            background-repeat: no-repeat;
            background: conic-gradient(
                from 0deg,
                #fff calc(var(--progress) * 360deg), 
                transparent calc(var(--progress) * 360deg)
            );
            mask: radial-gradient(circle, transparent 14.5px, #000 15px);
            mask-composite: exclude;
        }
    }



    .que__toast-notification::after {
        position: absolute;
        content: "";
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        pointer-events: none;
        border: var(--que__border-popup);
    }

    .que__toast-notification::before {
        font-size: var(--que__glyph__size-m);
        margin-right: var(--que__pad-m);
        line-height: var(--que__glyph__size-m);
        top: 0.05em;
        /* position: absolute;
        left: var(--que__pad-m); */
    }
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.que__placeholder-text {
    background: linear-gradient(270deg, transparent, color-mix(in oklab, var(--que__color-contrast), transparent 80%), transparent);
    background-color: transparent;
    background-size: 400% 400%;
    /* background-attachment: fixed; */
    white-space: pre-wrap;
    animation: gradientAnimation 3s ease infinite;
    border-radius: 3px;
    display: inline-block;
    cursor: default;
    pointer-events: none;
    user-select: none;
    line-height: calc(100% - 1px);
    position: relative;
}
.que__placeholder-text::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: solid 1px color-mix(in oklab, var(--que__color-contrast), transparent 97%);
    border-radius: 3px;
}

.que__placeholder-error {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--que__primary-red);
    font-weight: normal;
}

.que__placeholder-error-td {
    text-align: center;
    vertical-align: middle;
    color: var(--que__primary-red);
    font-weight: normal;
}