/*
    This file is used to hold all CSS variable assignments for our AmplifyUI components and generic elements. 
    These are basically baseline styles for our UI that can then be overridden by client files / configs.
*/

/* ==================== [[[ Section: :root ]]] ==================== */

:root /* anchor */ 
{
    --a-color: var(--color-1-dark);
}
:root /* aside */ 
{
    --aside-background: white;
    --aside-display: flex;
    --aside-flex-direction: column;
    --aside-height: min-content;
    --aside-justify-content: flex-start;
    --aside-align-items: flex-start;
}
:root /* body */ 
{
    --body-background: var(--color-3-lightest);
    --body-display: flex;
    --body-flex: 1;
    --body-flex-direction: column;
    --body-font-family: proxima-nova, sans-serif;
    --body-font-weight: 400;
    --body-height: 100%;
}
:root /* button */ 
{
    --button-background: var(--isp-css-button-bgcolor);
    --button-border-radius: 3px;
    --button-color: var(--isp-css-button-text-color);
    --button-display: flex;
    --button-flex: 1;
    --button-hover-color: var(--isp-css-button-hover-text-color);
    --button-hover-background: var(--isp-css-button-hover-bgcolor);
    --button-justify-content: center;
    --button-padding: 0.75em 1.5em;

    --button-disabled-background: lightgray;
    --button-disabled-border-color: lightgray;
    --button-disabled-color: gray;
}
:root /* branding */ 
{
    --branding__margin: 0 0 1em 0;
    --branding__padding: 0;
    --branding__max-width: 150px;
    --branding__max-height: 100px;
}
:root /* ui-calendar */ 
{
    --calendar-border-radius: 0.1em;
    --calendar-box-shadow: 0.25em 0.25em 0.5em rgba(0, 0, 0, 0.25);
    --calendar-height: 26.25em;
    --calendar-width: 25em;
    --calendar-right: unset;
}
:root /* ui-calendar-aside */ 
{
    --calendar-aside-background: #eaeaea;
    --calendar-aside-color: rgb(77, 77, 77);
    --calendar-aside-font-weight: bold;
    --calendar-aside-hover-background: rgb(151, 151, 151);
    --calendar-aside-hover-color: white;
    --calendar-aside-selected-background: rgb(77, 77, 77);
    --calendar-aside-selected-color: white;
    --calendar-aside-selected-hover-background: var( --calendar-aside-selected-background );
    --calendar-aside-selected-hover-color: var( --calendar-aside-selected-color );
}
:root /* ui-calendar-body */ 
{
    --calendar-body-heading-background: rgb(77, 77, 77);
    --calendar-body-heading-color: white;
    --calendar-body-heading-font-weight: bold;
    --calendar-body-background: white;
    --calendar-body-color: #333;
    --calendar-body-inactive-days-background: lightgray;
    --calendar-body-inactive-days-color: black;
    --calendar-body-inactive-days-border: unset;
    --calendar-body-valid-days-border: 1px solid lightgray;
    --calendar-body-font-weight: normal;
    --calendar-body-hover-background: rgb(151, 151, 151);
    --calendar-body-hover-color: white;
    --calendar-body-selected-background: rgb(77, 77, 77);
    --calendar-body-selected-color: white;
    --calendar-body-selected-hover-background: var( --calendar-body-selected-background );
    --calendar-body-selected-hover-color: var( --calendar-body-selected-color );
}
:root /* ui-calendar-header */ 
{
    --calendar-masthead-background: rgb(77, 77, 77);
    --calendar-masthead-color: white;
    --calendar-prevnext-background: transparent;
    --calendar-prevnext-color: white;
    --calendar-prevnext-hover-background: rgba(255, 255, 255, 0.25);
    --calendar-prevnext-hover-color: white;
}
:root /* compose */ 
{
    --compose-align-items: flex-start;
    --compose-display: flex;
    --compose-flex-direction: column;
    --compose-height: 100%;
}
:root /* context-menu-menu */ {
    --context-menu-item__active__color: var(--isp-css-navigation-color);
    --secondary-context-menu-item__active__color: var(--isp-css-navigation-secondary-color);
}

:root /* ui-data-grid */ {
    --datagrid-rem-size: var(--component-scale);
    --datagrid-padding: inherit;
    --datagrid-margin: inherit;
    --datagrid-font-size: inherit;
    --datagrid-font-weight: inherit;
    --datagrid-font-variant: inherit;
    --datagrid-line-height: inherit;
    --datagrid-color: inherit;
    /* ui-data-grid:before */
    --datagrid-before-background: transparent;
    --datagrid-before-display: display;
    --datagrid-before-width: 100%;
    --datagrid-before-height: 50px;
    --datagrid-before-position: absolute;
    --datagrid-before-pointer-events: none;
    --datagrid-before-top: 6.1em;
    --datagrid-before-z-index: 99;
    --datagrid-before-overflow: hidden;
    --datagrid-body-border-color: var(--isp-css-accent-color-1) #eaeaea #eaeaea;
    /*ui-data-grid-filter-submit*/
    --datagrid-filter-submit-background: var(--isp-css-accent-color-1);
}
ui-datagrid {
    --menu-item-display: block;
}
:root /* ui-data-grid-row */ 
{
    --datagrid-row-background: #fff;
    --datagrid-row-hover-background: #d3dce3;
    /* ui-datagrid-row odd */
    --datagrid-row-odd-background: var( --datagrid-row-background );
    --datagrid-row-odd-hover-background: var( --datagrid-row-hover-background );
    --datagrid-row-odd-color: var(--datagrid-row-hover-color);
    /* ui-datagrid-row header */
    --datagrid-row-header-background: white;
    --datagrid-row-header-color: #474e58;
    --datagrid-row-header-margin: inherit;
    --datagrid-row-header-padding: 2.5em 1.5em;
    --datagrid-row-header-font-size: inherit;
    --datagrid-row-header-font-weight: bold;
    --datagrid-row-header-font-variant: inherit;
    --datagrid-row-header-line-height: inherit;
}
:root /* ui-datagrid-cell */ {
    --datagrid-cell-background: initial;
    --datagrid-cell-border-color: #ebeff2;
    --datagrid-cell-border-style: solid;
    --datagrid-cell-border-width: 1px 0 0 0;
    --datagrid-cell-hover-color: black;
    --datagrid-cell-padding: 1em 1.5em;
    --datagrid-cell-margin: inherit;
    --datagrid-cell-font-size: inherit;
    --datagrid-cell-font-weight: normal;
    --datagrid-cell-font-variant: inherit;
    --datagrid-cell-line-height: inherit;
    --datagrid-cell-color: inherit;
    --datagrid-cell-white-space: nowrap;
}
:root /* ui-datagrid-caption */ 
{
    --datagrid-caption-cell-background: var( --datagrid-row-hover-background );
    --datagrid-caption-cell-position: absolute;
    --datagrid-caption-cell-width: 100%;
    --datagrid-caption-cell-padding: 1em 0;
    --datagrid-caption-cell-text-indent: 1.5em;
}
:root /* amp-data-item */ 
{
    --data-item-display: inline-block;
    --data-item-background: #fff;
    --data-item-border: 1px solid #e7eaed;
    --data-item-padding: 1em 0;
    --data-item-margin: 0.5em;
    --data-item-operation-background-color: var(--isp-css-accent-color-1);
    --data-item-operation-color: #fff;
    --data-item-operation-padding: 1em;
    --data-item-operation-font-weight: bold;
    --data-item-name-padding: 1em;
    --data-item-value-padding: 1em;
    --data-item-processor-padding: 1em;
    --data-item-processor-cursor: pointer;
    --data-item-processor-font-weight: bold;
    --data-item-float: right;
}
:root { /* amp-datalist */
    --datalist__background: white;
    --datalist__border-color: #ccc;
    --datalist__border-style: solid;
    --datalist__box-shadow: 1px 1px 38px rgba(0,0,0,0.1), 1px 1px 13px rgba(0,0,0,0.2);
    --datalist__border-width: 1px;
    --datalist__background: white;
    --datalist__color: #767676;
    --datalist__datalist-item__a__color: #767676;
    --datalist__datalist-item__a__color--hover: #323232;
    --datalist__datalist-item__a__text-decoration: none;
    --datalist__datalist-item__background--hover: #aaa;
    --datalist__datalist-item__color--hover: #323232;
    --datalist__datalist-item__padding: 0.75em 1.5em;
    --datalist__scrollbar-thumb__background: #767676;
    --datalist__scrollbar__background: #ddd;
}
:root /* ui-datefilter */ {
    --datefilter-background: var(--isp-css-accent-color-1);
    --datefilter-color: white;
    --datefilter-padding: 0.75em 1.5em;
    --datefilter-margin: -1em -1.5em;
    --datefilter-display: flex;
    --datefilter-font-weight: bold;
    --datefilter-flex-direction: column;
    --datefilter-width: 100%;
    --datefilter-menu-background: #ebeff2;
    --datefilter-menu-display: flex;
    --datefilter-menu-inactive-display: none;
    --datefilter-menu-flex-direction: column;
    --datefilter-menu-list-style: none;
    --datefilter-menu-margin: 1em -1.5em;
    --datefilter-menu-item-background: #ebeff2;
    --datefilter-menu-item-display: flex;
    --datefilter-menu-item-flex: 1;
    --datefilter-menu-item-padding: 1em 1.5em;
    --datefilter-menu-item-selected-background: #474e58;
    --datefilter-menu-item-selected-color: #fff;
    /* datefilter range */
    --daterange-background: #fff;
    --daterange-color: black;
    --daterange-display: flex;
    --daterange-flex-direction: column;
    --daterange-margin: 1em -1.5em;
    --daterange-padding: 1em 1.5em;
    --daterange-inactive-display: none;
}
:root /* amp-datepicker */ {
    --datepicker-font-family: inherit;
    --datepicker-icon-calendar: 'calendar_today';
    --datepicker-icon-before: 'chevron_left';
    --datepicker-icon-next: 'chevron_right';
}
:root /* amp-form-control */ {
    --form-control-margin: 0 0 2rem;
}
:root /* hb-button*/ 
{
    --hb-button-width: 1em;
    --hb-button-height: 1em;
    --hb-button-position: relative;
    --hb-button-top: -0.25em;
    --hb-button-left: 0.5em;
    --hb-button-before-width: 1em;
    --hb-button-before-height: 1em;
    --hb-button-before-border-color: #899098;
    --hb-button-before-border-radius: 3px;
    --hb-button-before-border-style: solid;
    --hb-button-before-border-width: 0 0 4px 0;
    --hb-button-before-position: absolute;
    --hb-button-before-transform: rotate(-45deg) scale(0.75);
    --hb-button-after-width: 1em;
    --hb-button-after-height: 1em;
    --hb-button-after-border-color: #899098;
    --hb-button-after-border-radius: 3px;
    --hb-button-after-border-style: solid;
    --hb-button-after-border-width: 0 0 4px 0;
    --hb-button-after-position: absolute;
    --hb-button-after-left: 2px;
    --hb-button-after-transform: rotate(45deg) scale(0.75);
}
:root /* header */ 
{   
    --header-align-items: center;
    --header__background: var(--isp-css-header-bgcolor);
    --header__background-image: var(--isp-css-header-background-image);
    --header-display: flex;
    --header-flex-direction: row;
    --header-justify-content: space-between;
    --header-padding: 0 2em;
    --header__padding: 1.5em;
}
:root /* h1 */
{
    --h1-color: var(--color-2);
    --h1-font-size: 2.25em;
    --h1-font-weight: 900;
    --h1-letter-spacing: -0.05em;
}
:root /* amp-icons */ {
    --icon-font-size: 0.9999em;
    --input-icon-top: calc(50% - 0.7em);
    --input-icon-transform: translate(-0.25em);
    --input-icon-password-transform: translate(-2em);
    --icon-font-family: 'Material Icons';
    --icon-background: transparent;
    --icon-border-color: transparent;
    --icon-border-radius: 50%;
    --icon-border-style: none;
    --icon-border-width: 0;
    --icon-box-shadow: none;
    --icon-color: amplify-dark-90 #313337;
    --icon-content: '';
    --icon-font-size: 1.5em;
    --icon-margin: 0;
    --icon-padding: 0;
    /* icons - https://material.io/resources/icons/?style=baseline */
    --icon__avatar: 'person';
    --icon__close: 'close';
    --icon__expand: 'expand_more';
    --icon__collapse: 'expand_less';
    --icon__menu-toggle: 'notes';
    --icon__settings: 'settings';
    --icon__switch: 'swap_horiz';
    --icon__users: 'supervisor_account';
}
:root /* amp-input */ {
    --input-display: flex;
    --input-flex-direction: column;
    --input-margin: 0em;
    --input-border: 1px solid #ccc;
    --input-border-radius: 0.25em;
    --input-font-size: inherit;
    --input-padding: 0.5em;
    --input-label-color: rgba(0, 0, 0, 0.6);
    --input-label-font-weight: bold;
    --input-label-margin: 0em;
    --input-label-white-space: nowrap;
    --input-icon-eye: 'visibility';
    --input-icon-eye-slash: 'visibility_off';
    --input-container-border-radius: 0.25em;
}

:root { /* amp-input-alt */
    --input-alt-background: var(--amplify-white);
    --input-alt-background__disabled: var(--amplify-light-5);
    --input-alt-color: var(--amplify-dark-90);
    --input-alt-color__disabled: var(--amplify-dark-60);
    --input-alt-color__invalid: var(--amplify-crimson-50);
    --input-alt-font-family: var(--typeface-regular-font-family);
    --input-alt-font-size: var(--typeface-regular-font-size);
    --input-alt-height: 3rem;
    --input-alt-line-height: var(--typeface-regular-line-height);
    --input-alt-letter-spacing: var(--typeface-regular-letter-spacing);
    --input-alt-margin: 0;
    --input-alt-padding: 0 1.5rem;
    --input-alt-border-color: var(--amplify-light-30);
    --input-alt-border-color__focus: var(--amplify-blue-60);
    --input-alt-border-color__invalid: var(--amplify-crimson-50);
    --input-alt-border-radius: 0.25rem;
    --input-alt-border-style: solid;
    --input-alt-border-width: thin;
    --input-alt-box-shadow: 0 0 0 0 transparent;
    --input-alt-box-shadow__focus: 0 0 0 4px var(--amplify-blue-10);
    --input-alt-transition: box-shadow 0.2s;
    --input-alt-placeholder-color: var(--amplify-dark-50);
    --input-alt-conceal-font-family: 'text-security';
    --input-alt-conceal-font-size: 0.75rem;
    --input-alt-conceal-letter-spacing: 0.1em;
    --input-alt-conceal-line-height: 1.7em;
    --input-alt-form-control-margin-top: 0.5rem;
    --input-alt-utility-color: var(--typeface-overline-color);
    --input-alt-utility-font-family: var(--typeface-overline-font-family);
    --input-alt-utility-font-size: var(--typeface-overline-font-size);
    --input-alt-utility-font-weight: var(--typeface-overline-font-weight);
    --input-alt-utility-letter-spacing: var(--typeface-overline-letter-spacing);
    --input-alt-utility-line-height: var(--typeface-overline-line-height);
}
:root { /* amp-label */
    --label-color: var(--amplify-dark-90);
    --label-font-family: var(--typeface-regular-font-family);
    --label-font-size: var(--typeface-regular-font-size);
    --label-line-height: var(--typeface-regular-line-height);
    --label-font-weight: bold;
    --label-margin: 0 0.25rem;
}
:root { /* amp-loader */
    --loader-background: rgba(255,255,255,0.925);
    --loader-color: var(--amplify-blue-60);
}
:root /* main */ 
{
    --main-padding: 0 2em;
    --main-width: 100%;
}
:root /* media */ 
{
    --media-align-items: stretch;
    --media-display: flex;
    --media-flex: 1 1 auto;
    --media-justify-content: space-between;
    --media-margin: 0;
    --media-padding: 0;
}
:root /* media-image */ 
{
    --media-image-align-items: flex-start;
    --media-image-display: flex;
    --media-image-flex: 0 0 auto;
    --media-image-margin: 0 1em 0 0;
    --media-image-padding: 0;
}
:root /* media-content */ 
{
    --media-content-align-items: flex-start;
    --media-content-display: flex;
    --media-content-flex-direction: column;
    --media-content-flex: 1 1 auto;
    --media-content-margin: 0;
    --media-content-padding: 0;
}
:root /* menu */ 
{
    --menu-align-items: center;
    --menu-height: 100%;  
}
:root /* menu-item */ 
{
    --menu-item-display: flex;
    --menu-item-align-items: center;
    --menu-item-height: 100%;
    --menu-item-padding: 0 1.618em;
    --menu-item-hover-background: var(--color-1-dark);
    --menu-item-active-background: var(--color-1-dark);
    --menu-item__padding: 1em 1.5em;
}

:root { /* amp-modal */
    --modal-background: var(--amplify-white);
    --modal-box-shadow: 0 0.54rem 0.275rem rgba(0, 0, 0, 0.01), 0 0.875rem 0.45rem rgba(0, 0, 0, 0.019), 0 1.415rem 0.725rem rgba(0, 0, 0, 0.030), 0 2.29rem 1.175rem rgba(0, 0, 0, 0.049), 0 3.71em 3.09rem rgba(0, 0, 0, 0.08), 0 6rem 5rem rgba(0, 0, 0, 0.13);
    --modal-overflow-y: visible;
    --modal-padding: 0.25rem;
    --modal-header-align-items: center;
    --modal-header-background: var(--amplify-white);
    --modal-header-border-color: var(--amplify-light-5);
    --modal-header-border-style: solid;
    --modal-header-border-width: 0 0 1px 0;
    --modal-header-justify-content: flex-start;
    --modal-header-margin: 0;
    --modal-header-min-height: 3.5rem;
    --modal-header-padding: 0 1.5rem;
    --modal-body-align-items: flex-start;
    --modal-body-background: var(--amplify-white);
    --modal-body-border-color: transparent;
    --modal-body-border-style: none;
    --modal-body-border-width: 0;
    --modal-body-justify-content: flex-start;
    --modal-body-margin: 0.75rem 0.5rem 0.75rem 0;
    --modal-body-overflow-y: auto;
    --modal-body-padding: 0.5rem 1.5rem;
    --modal-footer-align-items: flex-end;
    --modal-footer-background: var(--amplify-white);
    --modal-footer-border-color: var(--amplify-light-5);
    --modal-footer-border-style: solid;
    --modal-footer-border-width: 1px 0 0;
    --modal-footer-justify-content: flex-end;
    --modal-footer-margin: 0;
    --modal-footer-padding: 0 1.5rem;
    --modal-close-icon-content: 'close';
    --modal-overlay-background: rgba(0,0,0,0.15);
    /* TODO: More browser coverage is needed here
    --modal-scrollbar-width: 0.5rem;
    --modal-scrollbar-height: 0.5rem;
    --modal-scrollbar-track-background: rgba(0, 0, 0, 0.1);
    --modal-scrollbar-track-border-radius: 0.25rem;
    --modal-scrollbar-thumb-background: rgba(0, 0, 0, 0.5);
    --modal-scrollbar-thumb-border-radius: 0.25rem; */
    --modal-dialog-align-items: center;
    --modal-dialog-justify-content: center;
    --modal-dialog-min-width: 350px;
    --modal-dialog-width: 50vw;
    --modal-dialog-max-height: 80vh;
    --modal-dialog-height: auto;
    --modal-drawer-justify-content: flex-end; /* controls if drawer shows up left or right side */
    --modal-drawer-min-width: 350px;
    --modal-drawer-width: 30vw;
    --modal-drawer-separator-width: 0.25rem;
    --modal-drawer-separator-background: var(--amplify-white);
    --modal-drawer-separator-box-shadow: 1px 1px 13px rgba(0,0,0,0.1);
}

:root /* nav */ {
    --nav-background: var(--color-1);
    --nav__background: var(--isp-css-navigation-bgcolor);
    --nav-secondary__background: var(--isp-css-navigation-secondary-bgcolor);
    --nav-secondary__color: var(--isp-css-navigation-secondary-color);
    --nav-padding: 0;
    --nav-menu-item__color: var(--isp-css-navigation-color);
    --secondary-nav-menu-item__color: var(--isp-css-navigation-secondary-color);
}
:root /* nav-menu-item */ 
{
    --nav-menu-item__color: var(--isp-css-navigation-color);
    --secondary-nav-menu-item__color: var(--isp-css-navigation-secondary-color);
}
:root { /* amp-note */
    --note-background: transparent;
    --note-color: var(--amplify-dark-50);
    --note-font-family: var(--typeface-small-font-family);
    --note-font-size: var(--typeface-small-font-size);
    --note-font-weight: var(--typeface-small-font-weight);
    --note-line-height: var(--typeface-small-line-height);
    --note-margin: 0 0.25rem 0.5rem;
    --note-order: 0;
    --note-padding: 0;
}
:root /* page-ui */ 
{
    --page-display: flex;
    --page-flex-direction: column;
    --page-height: min-content;
    --page-width: 100%;
}
:root /* router-view */ 
{
    --router-align-items: flex-start;
    --router-display: flex;
    --router-flex: 1;
    --router-flex-direction: column;
    --router-width: 100%;
}
:root /* section */ 
{
    --section-background: white;
    --section-box-shadow: 5px 5px 21px rgba(0, 0, 0, 0.05);
    --section-display: flex;
    --section-flex: 1;
    --section-flex-direction: column;
    --section-padding: 1em 2em;
    --section-margin: 0;
}
:root /* sub-menu */ 
{
    --sub-menu__background: #fff;
    --sub-menu__box-shadow: 1px 1px 38px rgba(0,0,0,0.1), 1px 1px 13px rgba(0,0,0,0.2);
}
:root /* sub-menu-item */ 
{
    --sub-menu-item__color: #767676;
    --sub-menu-item__border-color: #eeeeee;
    --sub-menu-item__border-style: solid;
    --sub-menu-item__border-width: 1px 0 0;
    --sub-menu-item__active__background: #eee;
    --sub-menu-item__active__color: #555;
}
:root /* settings-menu-item */ 
{
    --settings-menu-item__font-weight: bold;
    --settings-menu-item__active__color: white;
}
:root /* settings-sub-menu-item */ {
    --settings-sub-menu-item__active__background: var(--isp-css-navigation-link-hover-font-color);
    --secondary-settings-sub-menu-item__active__background: var(--isp-css-navigation-secondary-link-hover-font-color);
    --settings-sub-menu-item__active__color: var(--isp-css-navigation-link-hover-bgcolor);
    --settings-sub-menu-item-secondary__active_background: var(--isp-css-navigation-secondary-link-hover-bgcolor);
    --settings-sub-menu-item-secondary__active__color: var(--isp-css-navigation-secondary-link-hover-color);
    --settings-sub-menu-item__font-weight: bold;
}
:root /* settings-menu-input */ 
{
    --settings-menu-input__padding: 0.5em 1.5em 0.5em;
    --settings-menu-input__margin: 0.5em 0em 0.5em;
    --settings-menu-input__background: rgba(0,0,0,0.1);
    --settings-menu-input__border-color: rgba(0, 0, 0, 0.25) rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.25);
    --settings-menu-input__border-radius: 3px;
    --settings-menu-input__border-style: solid;
    --settings-menu-input__border-width: 1px;
    --settings-menu-input__placeholder__color: rgba(255,255,255,0.7);
}
:root { /* amp-tabs */
    --tabs-flex-direction: row;
    --tabs-flex-wrap: wrap;
    --tabs-padding: 0.5rem 0 0;
    --tabs-header-border-color: #ddd;
    --tabs-header-border-style: solid;
    --tabs-header-border-width: 1px 0 0 1px;
    --tabs-label-background: #eee;
    --tabs-label-background__active: white;
    --tabs-label-border-color: transparent #ddd #ddd;
    --tabs-label-border-color__active: royalblue #ddd #fff;
    --tabs-label-border-radius: 0;
    --tabs-label-border-radius__active: 3px 3px 0 0;
    --tabs-label-border-style: solid;
    --tabs-label-border-width: 1px 1px 1px 0;
    --tabs-label-box-shadow: 0 0 0 0 white;
    --tabs-label-box-shadow__active: 0 -2px 0 0 royalblue;
    --tabs-label-cursor: pointer;
    --tabs-label-display: flex;
    --tabs-label-flex: 1 1 auto;
    --tabs-label-outline: none;
    --tabs-label-outline__focused: 1px dotted black;
    --tabs-label-padding: 1rem 1.5rem;
    --tabs-label-z-index: auto;
    --tabs-label-z-index__active: 1;
    --tabs-content-border-color: #ddd;
    --tabs-content-border-style: solid;
    --tabs-content-border-width: 0 1px 1px;
    --tabs-content-display: none;
    --tabs-content-display__active: flex;
    --tabs-content-outline: none;
    --tabs-content-outline__focused: 1px dotted black;
    --tabs-content-padding: 1rem 1.5rem;
    --tabs-content-z-index__active: 99;
    --tabs-icon-display: none;
    --accordion-border-color: #ddd;
    --accordion-border-style: solid;
    --accordion-border-width: 1px 0 0;
    --accordion-flex-direction: column;
    --accordion-padding: 0;
    --accordion-header-border-color: #ddd;
    --accordion-header-border-style: solid;
    --accordion-header-border-width: 1px 1px 0;
    --accordion-content-border-color: #ddd;
    --accordion-content-border-style: solid;
    --accordion-content-border-width: 0 1px 1px;
    --accordion-content-display: none;
    --accordion-content-display__active: flex;
    --accordion-content-padding: 1rem 1.5rem;
    --accordion-label-align-items: center;
    --accordion-label-background: #eee;
    --accordion-label-background__active: royalblue;
    --accordion-label-color__active: white;
    --accordion-label-border-color: #ddd;
    --accordion-label-border-radius: 0;
    --accordion-label-border-radius__active: 0;
    --accordion-label-border-style: solid;
    --accordion-label-border-width: 0 1px 1px;
    --accordion-label-box-shadow__active: 0 0 0 0 transparent;
    --accordion-label-cursor: pointer;
    --accordion-label-display: flex;
    --accordion-label-flex: 1 1 auto;
    --accordion-label-justify-content: space-between;
    --accordion-label-padding: 0.75rem 1.5rem;
    --accordion-icon-color__active: white;
    --accordion-icon-content: 'expand_more';
    --accordion-icon-content__active: 'expand_less';
    --accordion-icon-display: flex;
    --accordion-icon-margin: 0 0 0 1rem;
}
:root /* user-menu-item */ 
{
    --user-menu-item__border-radius: 3px 3px 0 0;
    --user-menu-item__color: var(--isp-css-header-text-color);
    --user-menu-item__padding: 0.75em 1.5em;
}
:root /* user-menu-icon */ 
{
    --user-menu-icon__active__background: var(--isp-css-accent-color-2);
    --user-menu-icon__active__color: hsla(0,0%,100%,.7);
    --user-menu-icon__background: var(--isp-css-header-text-color);
    --user-menu-icon__color: var(--isp-css-header-bgcolor);
}
:root /* theme colors */ 
{
    --color-1: #3BA3FB;
    --color-1-dark: #0377DB;
    --color-1-light: #81C4FC;
    --color-1-lighter: #CDE8FE;
    --color-1-lightest: #F5FAFF;

    --color-2: #484F59;
    --color-2-dark: #25282B;
    --color-2-light: #899098;
    --color-2-lighter: #D0D5DC;
    --color-2-lightest: #ECF1F6;

    --color-3: #FFC43A;
    --color-3-dark: #9D6E00;
    --color-3-light: #FBD885;
    --color-3-lighter: #F7EFD5;
    --color-3-lightest: #F6F8F7;

    --color-4: #35DC9B;
    --color-4-dark: #17875C;
    --color-4-light: #7DE7C1;
    --color-4-lighter: #CCF4EA;
    --color-4-lightest: #EBF9FA;

    --color-5: #F75B47;
    --color-5-dark: #EA1B00;
    --color-5-light: #FBB0A8;
    --color-5-lighter: #F7E1E1;
    --color-5-lightest: #F8F4F6;

    --teal-0: #F5FFFF;
    --teal-5: #E1FDFD;
    --teal-10: #C5FCFC;
    --teal-20: #96F6F7;
    --teal-30: #6CEEF0;
    --teal-40: #4AE1E5;
    --teal-50: #2FD0D7;
    --teal-60: #1CBAC5;
    --teal-70: #0FA0AE;
    --teal-80: #068292;
    --teal-90: #026272;
    --teal-100: #004452;

    --scroll-bar-color: rgba(0, 0, 0, .3);
}

/* ==================== [[[ Section: elements ]]] ==================== */

aside {
    --router-display: flex;
    --router-flex-direction: row;
    --router-flex-wrap: wrap;
    --h1-font-size: 1.35em;
    --h1-font-weight: 700;
    --h1-letter-spacing: -0.025em;
    --h1-box-shadow: 0 0.25em #EFF1F0;
    --h1-display: flex;
    --h1-flex: 1 1 auto;
    --aside-display: block;
    --h1-padding: 1em 1.5em;
}
aside amp-button[secondary] {
    --button-background: var(--color-1-lighter);
    --button-color: var(--color-1-dark);
}
amp-button + amp-button {
    --button-margin: 0 0 0 0.5em;
}
config-item {
    --p-color: var(--color-2-dark);
    --a-display: flex;
    --a-align-items: flex-end;
    --a-justify-content: space-between;
    --h4-color: var(--color-2-dark);
    --h4-font-weight: bold;
    --h4-padding: 0 0 .5em 0;
    --h4-display: block;
}
header { 
    background: var(--header__background);
    background-image: var(--header__background-image);
    min-height: var(--header__min-height);

    /* static */
    display: flex !important; /* normalize interference */
    flex-direction: column;
}
header > [ui-wrapper] {
    padding: var(--header__padding);

    /* static */
    align-items: center;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: space-between;
}
nav {
    background: var(--nav__background);

    /* static */
    display: flex;
}

[ui-donor] {
    background: var(--nav-secondary__background);
    /* static */
    display: flex;
}

nav [ui-wrapper] {
    /* static */
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    justify-content: center;
}
section {
    --h2-background: white;
    --h2-color: var(--color-2-light);
    --h2-display: flex;
    --h2-font-size: 1.25em;
    --h2-padding: 0.5em 0;
}
subcategory {
    display: block;
    width: 100%;
    --h3-color: var(--teal-90);
    --h3-font-size: 1.5em;
}


/* ==================== [[[ Section: attributes ]]] ==================== */

/* [[[ Section: Attributes: layout ]]] */
[layout="client"] nav ui-menu-item:last-child,
[layout="operations"] nav ui-menu-item:last-child {
    --menu-item-margin: 0 0 0 auto;
}
[layout="login"] {
    --header-background: white;
    --footer-background: white;
    --header-padding: 4em;
    --aside-padding: 4em;
    --aside-justify-content: center;
    --main-background: url('../images/login-image.svg') no-repeat;
    --main-background-size: cover;
}
[layout|="widget"] {
    --media-font-size: 2em;
    --media-flex-direction: row-reverse;
    --media-margin: 3em 0 0;
    --media-image-margin: 0 0 0 1em;
    --strong-color: var(--color-2);
    --strong-font-size: 2em;
    --strong-text-transform: uppercase;
    --menu-height: 2em;
    --menu-position: absolute;
    --menu-position-top: 1.25em;
    --menu-position-right: 1.25em;
    --menu-width: 2em;
    --menu-item-border-radius: 50%;
    --menu-item-color: var(--color-2);
    --menu-item-font-size: 1.5em;
    --menu-item-padding: 0 0.5em;
    --menu-item-hover-background: var(--color-2-lightest);
    --section-position: relative;
}
/* Form Layouts */
[layout="form-intro"] {
    --h2-font-size: 3em;
    --page-display: flex;
    --page-align-items: center;
    --strong-font-size: 1.2em;
    --ul-border-width: 1px;
    --ul-border-radius: 4px;
    --ul-border-style: solid;
    --ul-border-color: var(--color-1);
    --ul-display: block;
    --ul-list-style: disc;
    --ul-margin: 1em 0 0;
    --ul-padding: 1em 3em;
    --li-display: list-item;
}

/* [[[ Section: Attributes: ui-branding ]]] */
[ui-branding] {
    margin: var(--branding__margin);
    max-width: var(--branding__max-width);
    max-height: var(--branding__max-height);

    /* static */
    display: flex;
}
[ui-branding] img {
    /* static */
    width: 100%;
}
[ui-branding] [ui-wrapper] {
    padding: var(--branding__padding);

    /* static */
    display: flex;
}

/* [[[ Section: Attributes: ui-menu ]]] */
[ui-menu] {
    background: var(--menu__background);
}
[ui-menu][uid="userMenu"] {
    background: var(--user-menu__background, var(--menu__background));

    /* static */
    align-items: stretch;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
}
    [ui-menu][uid="settingsMenu-donor"],
    [ui-menu][uid="contextMenu-donor"],
    [ui-menu][uid="overflowMenu-donor"] {
        background: var(--secondary-menu__background, var(--menu__background));
    }
    [ui-menu][uid="settingsMenu"] {
        background: var(--settings-menu__background, var(--menu__background));
    }

[ui-menu][uid="contextMenu"] {
    background: var(--context-menu__background, var(--menu__background));
}

[ui-menu][uid="overflowMenu"] {
    background: var(--overflow-menu__background, var(--menu__background));
}

[ui-menu] > li {
    border-color: var(--menu-item__border-color);
    border-radius: var(--menu-item__border-radius);
    border-style: var(--menu-item__border-style);
    border-width: var(--menu-item__border-width);
}
[ui-menu][uid="userMenu"] > li {
    border-color: var(--user-menu-item__border-color, var(--menu-item__border-color));
    border-radius: var(--user-menu-item__border-radius, var(--menu-item__border-radius));
    border-style: var(--user-menu-item__border-style, var(--menu-item__border-style));
    border-width: var(--user-menu-item__border-width, var(--menu-item__border-width));
}
    [ui-menu][uid="settingsMenu-donor"] > li,
    [ui-menu][uid="contextMenu-donor"] > li,
    [ui-menu][uid="overflowMenu-donor"] > li {
        border-color: var(--secondary-menu-item__border-color, var(--nav-menu-item__border-color, var(--menu-item__border-color)));
        border-radius: var(--secondary-menu-item__border-radius, var(--nav-menu-item__border-radius, var(--menu-item__border-radius)));
        border-style: var(--secondary-menu-item__border-style, var(--nav-menu-item__border-style, var(--menu-item__border-style)));
        border-width: var(--secondary-menu-item__border-width, var(--nav-menu-item__border-width, var(--menu-item__border-width)));
    }
    [ui-menu][uid="settingsMenu"] > li {
        border-color: var(--settings-menu-item__border-color, var(--nav-menu-item__border-color, var(--menu-item__border-color)));
        border-radius: var(--settings-menu-item__border-radius, var(--nav-menu-item__border-radius, var(--menu-item__border-radius)));
        border-style: var(--settings-menu-item__border-style, var(--nav-menu-item__border-style, var(--menu-item__border-style)));
        border-width: var(--settings-menu-item__border-width, var(--nav-menu-item__border-width, var(--menu-item__border-width)));
    }

[ui-menu][uid="contextMenu"] > li {
    border-color: var(--context-menu-item__border-color, var(--nav-menu-item__border-color, var(--menu-item__border-color)));
    border-radius: var(--context-menu-item__border-radius, var(--nav-menu-item__border-radius, var(--menu-item__border-radius)));
    border-style: var(--context-menu-item__border-style, var(--nav-menu-item__border-style, var(--menu-item__border-style)));
    border-width: var(--context-menu-item__border-width, var(--nav-menu-item__border-width, var(--menu-item__border-width)));
    max-height:60px;
}
[ui-menu][uid="overflowMenu"] > li {
    border-color: var(--overflow-menu-item__border-color, var(--nav-menu-item__border-color, var(--menu-item__border-color)));
    border-radius: var(--overflow-menu-item__border-radius, var(--nav-menu-item__border-radius, var(--menu-item__border-radius)));
    border-style: var(--overflow-menu-item__border-style, var(--nav-menu-item__border-style, var(--menu-item__border-style)));
    border-width: var(--overflow-menu-item__border-width, var(--nav-menu-item__border-width, var(--menu-item__border-width)));
}
[ui-menu] > li:first-child {
    border-color: var(--menu-item__first__border-color, var(--menu-item__border-color));
    border-style: var(--menu-item__first__border-style, var(--menu-item__border-style));
    border-width: var(--menu-item__first__border-width, var(--menu-item__border-width));
}
[ui-menu][uid="userMenu"] > li:first-child {
    border-color: var(--user-menu-item__first__border-color, var(--user-menu-item__border-color, var(--menu-item__first__border-color, var(--menu-item__border-color))));
    border-style: var(--user-menu-item__first__border-style, var(--user-menu-item__border-style, var(--menu-item__first__border-style, var(--menu-item__border-style))));
    border-width: var(--user-menu-item__first__border-width, var(--user-menu-item__border-width, var(--menu-item__first__border-width, var(--menu-item__border-width))));
}
[ui-menu][uid="settingsMenu"] > li:first-child {
    border-color: var(--settings-menu-item__first__border-color, var(--settings-menu-item__border-color, var(--nav-menu-item__first__border-color, var(--nav-menu-item__border-color, var(--menu-item__first__border-color, var(--menu-item__border-color))))));
    border-style: var(--settings-menu-item__first__border-style, var(--settings-menu-item__border-style, var(--nav-menu-item__first__border-style, var(--nav-menu-item__border-style, var(--menu-item__first__border-style, var(--menu-item__border-style))))));
    border-width: var(--settings-menu-item__first__border-width, var(--settings-menu-item__border-width, var(--nav-menu-item__first__border-width, var(--nav-menu-item__border-width, var(--menu-item__first__border-width, var(--menu-item__border-width))))));
}
[ui-menu][uid="contextMenu"] > li:first-child {
    border-color: var(--context-menu-item__first__border-color, var(--context-menu-item__border-color, var(--nav-menu-item__first__border-color, var(--nav-menu-item__border-color, var(--menu-item__first__border-color, var(--menu-item__border-color))))));
    border-style: var(--context-menu-item__first__border-style, var(--context-menu-item__border-style, var(--nav-menu-item__first__border-style, var(--nav-menu-item__border-style, var(--menu-item__first__border-style, var(--menu-item__border-style))))));
    border-width: var(--context-menu-item__first__border-width, var(--context-menu-item__border-width, var(--nav-menu-item__first__border-width, var(--nav-menu-item__border-width, var(--menu-item__first__border-width, var(--menu-item__border-width))))));
}
[ui-menu][uid="overflowMenu"] > li:first-child {
    border-color: var(--overflow-menu-item__first__border-color, var(--overflow-menu-item__border-color, var(--nav-menu-item__first__border-color, var(--nav-menu-item__border-color, var(--menu-item__first__border-color, var(--menu-item__border-color))))));
    border-style: var(--overflow-menu-item__first__border-style, var(--overflow-menu-item__border-style, var(--nav-menu-item__first__border-style, var(--nav-menu-item__border-style, var(--menu-item__first__border-style, var(--menu-item__border-style))))));
    border-width: var(--overflow-menu-item__first__border-width, var(--overflow-menu-item__border-width, var(--nav-menu-item__first__border-width, var(--nav-menu-item__border-width, var(--menu-item__first__border-width, var(--menu-item__border-width))))));
}
[ui-menu] > li > *:not(ul) {
    color: var(--menu-item__color);
    font-weight: var(--menu-item__font-weight);
    padding: var(--menu-item__padding);
    text-transform: var(--menu-item__text-transform);
}
[ui-menu][uid="userMenu"] > li > *:not(ul) {
    color: var(--user-menu-item__color, var(--menu-item__color));
    font-weight: var(--user-menu-item__font-weight, var(--menu-item__font-weight));
    padding: var(--user-menu-item__padding, var(--menu-item__padding));
    text-transform: var(--user-menu-item__text-transform, var(--menu-item__text-transform));
}
    [ui-menu][uid="settingsMenu-donor"] > li > *:not(ul),
    [ui-menu][uid="contextMenu-donor"] > li > *:not(ul),
    [ui-menu][uid="overflowMenu-donor"] > li > *:not(ul) {
        color: var(--secondary-menu-item__color, var(--nav-menu-item__color, var(--menu-item__color)));
        font-weight: var(--secondary-menu-item__font-weight, var(--nav-menu-item__font-weight, var(--menu-item__font-weight)));
        padding: var(--secondary-menu-item__padding, var(--nav-menu-item__padding, var(--menu-item__padding)));
        text-transform: var(--secondary-menu-item__text-transform, var(--nav-menu-item__text-transform, var(--menu-item__text-transform)));
    }

[ui-menu][uid="settingsMenu"] > li > *:not(ul) {
    color: var(--settings-menu-item__color, var(--nav-menu-item__color, var(--menu-item__color)));
    font-weight: var(--settings-menu-item__font-weight, var(--nav-menu-item__font-weight, var(--menu-item__font-weight)));
    padding: var(--settings-menu-item__padding, var(--nav-menu-item__padding, var(--menu-item__padding)));
    text-transform: var(--settings-menu-item__text-transform, var(--nav-menu-item__text-transform, var(--menu-item__text-transform)));
}

[ui-menu][uid="contextMenu"] > li > *:not(ul) {
    color: var(--context-menu-item__color, var(--nav-menu-item__color, var(--menu-item__color)));
    font-weight: var(--context-menu-item__font-weight, var(--nav-menu-item__font-weight, var(--menu-item__font-weight)));
    padding: var(--context-menu-item__padding, var(--nav-menu-item__padding, var(--menu-item__padding)));
    text-transform: var(--context-menu-item__text-transform, var(--nav-menu-item__text-transform, var(--menu-item__text-transform)));
}
[ui-menu][uid="overflowMenu"] > li > *:not(ul) {
    color: var(--overflow-menu-item__color,var(--nav-menu-item__color, var(--menu-item__color)));
    font-weight: var(--overflow-menu-item__font-weight, var(--nav-menu-item__font-weight, var(--menu-item__font-weight)));
    padding: var(--overflow-menu-item__padding, var(--nav-menu-item__padding, var(--menu-item__padding)));
    text-transform: var(--overflow-menu-item__text-transform, var(--nav-menu-item__text-transform, var(--menu-item__text-transform)));
}

[ui-menu] > li[is-active] > *:not(ul),
[ui-menu] > li a.active {
    background: var(--menu-item__active__background);
    color: var(--menu-item__active__color);
    
    /* static */
    position: relative;
}
[ui-menu][uid="userMenu"] > li[is-active] > *:not(ul),
[ui-menu][uid="userMenu"] > li a.active {
    background: var(--user-menu-item__active__background, var(--menu-item__active__background, transparent));
    color: var(--user-menu-item__active__color, var(--menu-item__active__color));
    
    /* static */
    justify-content: center;
}
[ui-menu][uid="settingsMenu"] > li[is-active] > *:not(ul),
[ui-menu][uid="settingsMenu"] > li a.active {
    background: var(--settings-menu-item__active__background, var(--nav-menu-item__active__background, var(--menu-item__active__background, transparent)));
    color: var(--settings-menu-item__active__color, var(--nav-menu-item__active__color, var(--menu-item__active__color)));
    
    /* static */
    justify-content: flex-start;
}
[ui-menu][uid="settingsMenu-donor"] > li[is-active] > *:not(ul),
[ui-menu][uid="settingsMenu-donor"] > li a.active,
[ui-menu][uid="contextMenu-donor"] > li[is-active] > *:not(ul),
[ui-menu][uid="contextMenu-donor"] > li a.active,
[ui-menu][uid="overflowMenu-donor"] > li[is-active] > *:not(ul),
[ui-menu][uid="overflowMenu-donor"] > li a.active {
    background: var(--secondary-menu-item__active__background, var(--nav-menu-item__active__background, var(--menu-item__active__background, transparent)));
    color: var(--secondary-menu-item__active__color, var(--nav-menu-item__active__color, var(--menu-item__active__color)));
}

[ui-menu][uid="contextMenu"] > li[is-active] > *:not(ul),
[ui-menu][uid="contextMenu"] > li a.active {
    background: var(--context-menu-item__active__background, var(--nav-menu-item__active__background, var(--menu-item__active__background, transparent)));
    color: var(--context-menu-item__active__color, var(--nav-menu-item__active__color, var(--menu-item__active__color)));
}

[ui-menu][uid="overflowMenu"] > li[is-active] > *:not(ul),
[ui-menu][uid="overflowMenu"] > li a.active {
    background: var(--overflow-menu-item__active__background, var(--nav-menu-item__active__background, var(--menu-item__active__background, transparent)));
    color: var(--overflow-menu-item__active__color, var(--nav-menu-item__active__color, var(--menu-item__active__color)));
}

[ui-menu] > li:before {
    border-color: var(--menu-item__inner__border-color);
    border-style: var(--menu-item__inner__border-style);
    border-width: var(--menu-item__inner__border-width);
}
[ui-menu][uid="userMenu"] > li:before {
    border-color: var(--user-menu-item__inner__border-color, var(--menu-item__inner__border-color));
    border-style: var(--user-menu-item__inner__border-style, var(--menu-item__inner__border-style));
    border-width: var(--user-menu-item__inner__border-width, var(--menu-item__inner__border-width));
}
[ui-menu][uid="settingsMenu-donor"] > li:before,
[ui-menu][uid="contextMenu-donor"] > li:before,
[ui-menu][uid="overflowMenu-donor"] > li:before {
    border-color: var(--secondary-menu-item__inner__border-color, var(--nav-menu-item__inner__border-color, var(--menu-item__inner__border-color)));
    border-style: var(--secondary-menu-item__inner__border-style, var(--nav-menu-item__inner__border-style, var(--menu-item__inner__border-style)));
    border-width: var(--secondary-menu-item__inner__border-width, var(--nav-menu-item__inner__border-width, var(--menu-item__inner__border-width)));
}

[ui-menu][uid="settingsMenu"] > li:before {
    border-color: var(--settings-menu-item__inner__border-color, var(--nav-menu-item__inner__border-color, var(--menu-item__inner__border-color)));
    border-style: var(--settings-menu-item__inner__border-style, var(--nav-menu-item__inner__border-style, var(--menu-item__inner__border-style)));
    border-width: var(--settings-menu-item__inner__border-width, var(--nav-menu-item__inner__border-width, var(--menu-item__inner__border-width)));
}
[ui-menu][uid="contextMenu"] > li:before {
    border-color: var(--context-menu-item__inner__border-color, var(--nav-menu-item__inner__border-color, var(--menu-item__inner__border-color)));
    border-style: var(--context-menu-item__inner__border-style, var(--nav-menu-item__inner__border-style, var(--menu-item__inner__border-style)));
    border-width: var(--context-menu-item__inner__border-width, var(--nav-menu-item__inner__border-width, var(--menu-item__inner__border-width)));
}

[ui-menu][uid="overflowMenu"] > li:before {
    border-color: var(--overflow-menu-item__inner__border-color, var(--nav-menu-item__inner__border-color, var(--menu-item__inner__border-color)));
    border-style: var(--overflow-menu-item__inner__border-style, var(--nav-menu-item__inner__border-style, var(--menu-item__inner__border-style)));
    border-width: var(--overflow-menu-item__inner__border-width, var(--nav-menu-item__inner__border-width, var(--menu-item__inner__border-width)));
}
[ui-menu] > li[is-active] {
    background: var(--menu-item__active__background, var(--menu-item__background));
    border-color: var(--menu-item__active__border-color, var(--menu-item__border-color));
    border-style: var(--menu-item__active__border-style, var(--menu-item__border-style));
    border-width: var(--menu-item__active__border-width, var(--menu-item__border-width));
    box-shadow: var(--menu-item__active__box-shadow, var(--menu-item__box-shadow));
}
[ui-menu][uid="userMenu"] > li:hover:not([is-active]),
[ui-menu][uid="userMenu"] > li[is-active] {
    background: var(--user-menu-item__active__background, var(--menu-item__active__background, var(--menu-item__background)));
    border-color: var(--user-menu-item__active__border-color, var(--menu-item__active__border-color, var(--menu-item__border-color)));
    border-style: var(--user-menu-item__active__border-style, var(--menu-item__active__border-style, var(--menu-item__border-style)));
    border-width: var(--user-menu-item__active__border-width, var(--menu-item__active__border-width, var(--menu-item__border-width)));
    box-shadow: var(--user-menu-item__active__box-shadow, var(--menu-item__active__box-shadow, var(--menu-item__box-shadow)));
    
    /* static */
    z-index: 109;
}
[ui-menu][uid="settingsMenu"] > li[is-active] {
    background: var(--settings-menu-item__active__background, var(--nav-menu-item__active__background, var(--menu-item__active__background, var(--settings-menu-item__background, var(--nav-menu-item__background, var(--menu-item__background))))));
    border-color: var(--settings-menu-item__active__border-color, var(--nav-menu-item__active__border-color, var(--menu-item__active__border-color, var(--settings-menu-item__border-color, var(--nav-menu-item__border-color, var(--menu-item__border-color))))));
    border-style: var(--settings-menu-item__active__border-style, var(--nav-menu-item__active__border-style, var(--menu-item__active__border-style, var(--settings-menu-item__border-style, var(--nav-menu-item__border-style, var(--menu-item__border-style))))));
    border-width: var(--settings-menu-item__active__border-width, var(--nav-menu-item__active__border-width, var(--menu-item__active__border-width, var(--settings-menu-item__border-width, var(--nav-menu-item__border-width, var(--menu-item__border-width))))));
    box-shadow: var(--settings-menu-item__active__box-shadow, var(--nav-menu-item__active__box-shadow, var(--menu-item__active__box-shadow, var(--settings-menu-item__box-shadow, var(--nav-menu-item__box-shadow, var(--menu-item__box-shadow))))));
}
    [ui-menu][uid="settingsMenu-donor"] > li[is-active],
    [ui-menu][uid="contextMenu-donor"] > li[is-active],
    [ui-menu][uid="overflowMenu-donor"] > li[is-active] {
        background: var(--secondary-menu-item__active__background, var(--nav-menu-item__active__background, var(--menu-item__active__background, var(--settings-menu-item__background, var(--nav-menu-item__background, var(--menu-item__background))))));
        border-color: var(--secondary-menu-item__active__border-color, var(--nav-menu-item__active__border-color, var(--menu-item__active__border-color, var(--settings-menu-item__border-color, var(--nav-menu-item__border-color, var(--menu-item__border-color))))));
        border-style: var(--secondary-menu-item__active__border-style, var(--nav-menu-item__active__border-style, var(--menu-item__active__border-style, var(--settings-menu-item__border-style, var(--nav-menu-item__border-style, var(--menu-item__border-style))))));
        border-width: var(--secondary-menu-item__active__border-width, var(--nav-menu-item__active__border-width, var(--menu-item__active__border-width, var(--settings-menu-item__border-width, var(--nav-menu-item__border-width, var(--menu-item__border-width))))));
        box-shadow: var(--secondary-menu-item__active__box-shadow, var(--nav-menu-item__active__box-shadow, var(--menu-item__active__box-shadow, var(--settings-menu-item__box-shadow, var(--nav-menu-item__box-shadow, var(--menu-item__box-shadow))))));
    }
[ui-menu][uid="contextMenu"] > li[is-active] {
    background: var(--context-menu-item__active__background, var(--nav-menu-item__active__background, var(--menu-item__active__background, var(--context-menu-item__background, var(--nav-menu-item__background, var(--menu-item__background))))));
    border-color: var(--context-menu-item__active__border-color, var(--nav-menu-item__active__border-color, var(--menu-item__active__border-color, var(--context-menu-item__border-color, var(--nav-menu-item__border-color, var(--menu-item__border-color))))));
    border-style: var(--context-menu-item__active__border-style, var(--nav-menu-item__active__border-style, var(--menu-item__active__border-style, var(--context-menu-item__border-style, var(--nav-menu-item__border-style, var(--menu-item__border-style))))));
    border-width: var(--context-menu-item__active__border-width, var(--nav-menu-item__active__border-width, var(--menu-item__active__border-width, var(--context-menu-item__border-width, var(--nav-menu-item__border-width, var(--menu-item__border-width))))));
    box-shadow: var(--context-menu-item__active__box-shadow, var(--nav-menu-item__active__box-shadow, var(--menu-item__active__box-shadow, var(--context-menu-item__box-shadow, var(--nav-menu-item__box-shadow, var(--menu-item__box-shadow))))));
}

[ui-menu][uid="overflowMenu"] > li[is-active] {
    background: var(--overflow-menu-item__active__background, var(--nav-menu-item__active__background, var(--menu-item__active__background, var(--overflow-menu-item__background, var(--nav-menu-item__background, var(--menu-item__background))))));
    border-color: var(--overflow-menu-item__active__border-color, var(--nav-menu-item__active__border-color, var(--menu-item__active__border-color, var(--overflow-menu-item__border-color, var(--nav-menu-item__border-color, var(--menu-item__border-color))))));
    border-style: var(--overflow-menu-item__active__border-style, var(--nav-menu-item__active__border-style, var(--menu-item__active__border-style, var(--overflow-menu-item__border-style, var(--nav-menu-item__border-style, var(--menu-item__border-style))))));
    border-width: var(--overflow-menu-item__active__border-width, var(--nav-menu-item__active__border-width, var(--menu-item__active__border-width, var(--overflow-menu-item__border-width, var(--nav-menu-item__border-width, var(--menu-item__border-width))))));
    box-shadow: var(--overflow-menu-item__active__box-shadow, var(--nav-menu-item__active__box-shadow, var(--menu-item__active__box-shadow, var(--overflow-menu-item__box-shadow, var(--nav-menu-item__box-shadow, var(--menu-item__box-shadow))))));
}

[ui-menu] > li ul {
    background: var(--sub-menu__background);
    border-color: var(--sub-menu__border-color);
    border-style: var(--sub-menu__border-style);
    border-radius: var(--sub-menu__border-radius);
    border-width: var(--sub-menu__border-width);
    box-shadow:var(--sub-menu__box-shadow);
    margin: var(--sub-menu__margin);
    padding: var(--sub-menu__padding);
}
[ui-menu][uid="userMenu"] > li ul {
    background: var(--user-sub-menu__background, var(--sub-menu__background));
    border-color: var(--user-sub-menu__border-color, var(--sub-menu__border-color));
    border-radius: var(--user-sub-menu__border-radius, var(--sub-menu__border-radius));
    border-style: var(--user-sub-menu__border-style, var(--sub-menu__border-style));
    border-width: var(--user-sub-menu__border-width, var(--sub-menu__border-width));
    box-shadow: var(--user-sub-menu__box-shadow, var(--sub-menu__box-shadow));
    margin: var(--user-sub-menu__margin, var(--sub-menu__margin));
    padding: var(--user-sub-menu__padding, var(--sub-menu__padding));
}
[ui-menu][uid="settingsMenu-donor"] > li ul,
[ui-menu][uid="contextMenu-donor"] > li ul,
[ui-menu][uid="overflowMenu-donor"] > li ul {
    background: var(--secondary-sub-menu__background, var(--nav-sub-menu__background, var(--sub-menu__background)));
    border-color: var(--secondary-sub-menu__border-color, var(--nav-sub-menu__border-color, var(--sub-menu__border-color)));
    border-radius: var(--secondary-sub-menu__border-radius, var(--nav-sub-menu__border-radius, var(--sub-menu__border-radius)));
    border-style: var(--secondary-sub-menu__border-style, var(--nav-sub-menu__border-style, var(--sub-menu__border-style)));
    border-width: var(--secondary-sub-menu__border-width, var(--nav-sub-menu__border-width, var(--sub-menu__border-width)));
    box-shadow: var(--secondary-sub-menu__box-shadow, var(--nav-sub-menu__box-shadow, var(--sub-menu__box-shadow)));
    margin: var(--secondary-sub-menu__margin, var(--nav-sub-menu__margin, var(--sub-menu__margin)));
    padding: var(--secondary-sub-menu__padding, var(--nav-sub-menu__padding, var(--sub-menu__padding)));
}
[ui-menu][uid="settingsMenu"] > li ul {
    background: var(--settings-sub-menu__background, var(--nav-sub-menu__background, var(--sub-menu__background)));
    border-color: var(--settings-sub-menu__border-color, var(--nav-sub-menu__border-color, var(--sub-menu__border-color)));
    border-radius: var(--settings-sub-menu__border-radius, var(--nav-sub-menu__border-radius, var(--sub-menu__border-radius)));
    border-style: var(--settings-sub-menu__border-style, var(--nav-sub-menu__border-style, var(--sub-menu__border-style)));
    border-width: var(--settings-sub-menu__border-width, var(--nav-sub-menu__border-width, var(--sub-menu__border-width)));
    box-shadow: var(--settings-sub-menu__box-shadow, var(--nav-sub-menu__box-shadow, var(--sub-menu__box-shadow)));
    margin: var(--settings-sub-menu__margin, var(--nav-sub-menu__margin, var(--sub-menu__margin)));
    padding: var(--settings-sub-menu__padding, var(--nav-sub-menu__padding, var(--sub-menu__padding)));
}

[ui-menu][uid="contextMenu"] > li ul {
    background: var(--context-sub-menu__background, var(--nav-sub-menu__background, var(--sub-menu__background)));
    border-color: var(--context-sub-menu__border-color, var(--nav-sub-menu__border-color, var(--sub-menu__border-color)));
    border-radius: var(--context-sub-menu__border-radius, var(--nav-sub-menu__border-radius, var(--sub-menu__border-radius)));
    border-style: var(--context-sub-menu__border-style, var(--nav-sub-menu__border-style, var(--sub-menu__border-style)));
    border-width: var(--context-sub-menu__border-width, var(--nav-sub-menu__border-width, var(--sub-menu__border-width)));
    box-shadow: var(--context-sub-menu__box-shadow, var(--nav-sub-menu__box-shadow, var(--sub-menu__box-shadow)));
    margin: var(--context-sub-menu__margin, var(--nav-sub-menu__margin, var(--sub-menu__margin)));
    padding: var(--context-sub-menu__padding, var(--nav-sub-menu__padding, var(--sub-menu__padding)));
}

[ui-menu][uid="overflowMenu"] > li ul {
    background: var(--overflow-sub-menu__background, var(--nav-sub-menu__background, var(--sub-menu__background)));
    border-color: var(--overflow-sub-menu__border-color, var(--nav-sub-menu__border-color, var(--sub-menu__border-color)));
    border-radius: var(--overflow-sub-menu__border-radius, var(--nav-sub-menu__border-radius, var(--sub-menu__border-radius)));
    border-style: var(--overflow-sub-menu__border-style, var(--nav-sub-menu__border-style, var(--sub-menu__border-style)));
    border-width: var(--overflow-sub-menu__border-width, var(--nav-sub-menu__border-width, var(--sub-menu__border-width)));
    box-shadow: var(--overflow-sub-menu__box-shadow, var(--nav-sub-menu__box-shadow, var(--sub-menu__box-shadow)));
    margin: var(--overflow-sub-menu__margin, var(--nav-sub-menu__margin, var(--sub-menu__margin)));
    padding: var(--overflow-sub-menu__padding, var(--nav-sub-menu__padding, var(--sub-menu__padding)));
}

[ui-menu] > li ul li {
    border-color: var(--sub-menu-item__border-color);
    border-style: var(--sub-menu-item__border-style);
    border-width: var(--sub-menu-item__border-width);
}
[ui-menu][uid="userMenu"] > li ul li {
    border-color: var(--user-sub-menu-item__border-color, var(--sub-menu-item__border-color));
    border-style: var(--user-sub-menu-item__border-style, var(--sub-menu-item__border-style));
    border-width: var(--user-sub-menu-item__border-width, var(--sub-menu-item__border-width));
}
[ui-menu][uid="settingsMenu-donor"] > li ul li,
[ui-menu][uid="contextMenu-donor"] > li ul li,
[ui-menu][uid="overflowMenu-donor"] > li ul li {
    border-color: var(--secondary-sub-menu-item__border-color, var(--nav-sub-menu-item__border-color, var(--sub-menu-item__border-color)));
    border-style: var(--secondary-sub-menu-item__border-style, var(--nav-sub-menu-item__border-style, var(--sub-menu-item__border-style)));
    border-width: var(--secondary-sub-menu-item__border-width, var(--nav-sub-menu-item__border-width, var(--sub-menu-item__border-width)));
    flex-direction: var(--secondary-sub-menu-item__flex-direction, var(--nav-sub-menu-item__flex-direction, var(--sub-menu-item__flex-direction)));
}
[ui-menu][uid="settingsMenu"] > li ul li {
    border-color: var(--settings-sub-menu-item__border-color, var(--nav-sub-menu-item__border-color, var(--sub-menu-item__border-color)));
    border-style: var(--settings-sub-menu-item__border-style, var(--nav-sub-menu-item__border-style, var(--sub-menu-item__border-style)));
    border-width: var(--settings-sub-menu-item__border-width, var(--nav-sub-menu-item__border-width, var(--sub-menu-item__border-width)));
    /* static */
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

[ui-menu][uid="contextMenu"] > li ul li {
    border-color: var(--context-sub-menu-item__border-color, var(--nav-sub-menu-item__border-color, var(--sub-menu-item__border-color)));
    border-style: var(--context-sub-menu-item__border-style, var(--nav-sub-menu-item__border-style, var(--sub-menu-item__border-style)));
    border-width: var(--context-sub-menu-item__border-width, var(--nav-sub-menu-item__border-width, var(--sub-menu-item__border-width)));
    flex-direction: var(--context-sub-menu-item__flex-direction, var(--nav-sub-menu-item__flex-direction, var(--sub-menu-item__flex-direction)));
}

[ui-menu][uid="overflowMenu"] > li ul li {
    border-color: var(--overflow-sub-menu-item__border-color, var(--nav-sub-menu-item__border-color, var(--sub-menu-item__border-color)));
    border-style: var(--overflow-sub-menu-item__border-style, var(--nav-sub-menu-item__border-style, var(--sub-menu-item__border-style)));
    border-width: var(--overflow-sub-menu-item__border-width, var(--nav-sub-menu-item__border-width, var(--sub-menu-item__border-width)));
    flex-direction: var(--overflow-sub-menu-item__flex-direction, var(--nav-sub-menu-item__flex-direction, var(--sub-menu-item__flex-direction)));
}

[ui-menu] > li ul li:first-child {
    border-color: var(--sub-menu-item__first__border-color);
    border-style: var(--sub-menu-item__first__border-style);
    border-width: var(--sub-menu-item__first__border-width);
}
[ui-menu][uid="userMenu"] > li ul li:first-child {
    border-color: var(--user-sub-menu-item__first__border-color, var(--sub-menu-item__first__border-color, var(--sub-menu-item__border-color)));
    border-style: var(--user-sub-menu-item__first__border-style, var(--sub-menu-item__first__border-style, var(--sub-menu-item__border-style)));
    border-width: var(--user-sub-menu-item__first__border-width, var(--sub-menu-item__first__border-width, var(--sub-menu-item__border-width)));
}

[ui-menu][uid="settingsMenu"] > li ul li:first-child {
    border-color: var(--settings-sub-menu-item__first__border-color, var(--nav-sub-menu-item__first__border-color, var(--sub-menu-item__first__border-color)));
    border-style: var(--settings-sub-menu-item__first__border-style, var(--nav-sub-menu-item__first__border-style, var(--sub-menu-item__first__border-style)));
    border-width: var(--settings-sub-menu-item__first__border-width, var(--nav-sub-menu-item__first__border-width, var(--sub-menu-item__first__border-width)));
    /* static */
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

[ui-menu][uid="contextMenu"] > li ul li:first-child {
    border-color: var(--context-sub-menu-item__first__border-color, var(--nav-sub-menu-item__first__border-color, var(--sub-menu-item__first__border-color)));
    border-style: var(--context-sub-menu-item__first__border-style, var(--nav-sub-menu-item__first__border-style, var(--sub-menu-item__first__border-style)));
    border-width: var(--context-sub-menu-item__first__border-width, var(--nav-sub-menu-item__first__border-width, var(--sub-menu-item__first__border-width)));
}

[ui-menu][uid="overflowMenu"] > li ul li:first-child {
    border-color: var(--overflow-sub-menu-item__first__border-color, var(--nav-sub-menu-item__first__border-color, var(--sub-menu-item__first__border-color)));
    border-style: var(--overflow-sub-menu-item__first__border-style, var(--nav-sub-menu-item__first__border-style, var(--sub-menu-item__first__border-style)));
    border-width: var(--overflow-sub-menu-item__first__border-width, var(--nav-sub-menu-item__first__border-width, var(--sub-menu-item__first__border-width)));
}
[ui-menu] > li ul li > * {
    color: var(--sub-menu-item__color);
    font-size: var(--sub-menu-item__font-size);
    font-weight: var(--sub-menu-item__font-weight);
}
[ui-menu][uid="userMenu"] > li ul li > * {
    color: var(--user-sub-menu-item__color, var(--sub-menu-item__color));
    font-size: var(--user-sub-menu-item__font-size, var(--sub-menu-item__font-size));
    font-weight: var(--user-sub-menu-item__font-weight, var(--sub-menu-item__font-weight));
}
[ui-menu][uid="settingsMenu-donor"] > li ul li > *,
[ui-menu][uid="contextMenu-donor"] > li ul li > *,
[ui-menu][uid="overflowMenu-donor"] > li ul li > * {
    color: var(--secondary-sub-menu-item__color, var(--nav-sub-menu-item__color, var(--sub-menu-item__color)));
    font-size: var(--secondary-sub-menu-item__font-size, var(--nav-sub-menu-item__font-size, var(--sub-menu-item__font-size)));
    font-weight: var(--secondary-sub-menu-item__font-weight, var(--nav-sub-menu-item__font-weight, var(--sub-menu-item__font-weight)));
}
[ui-menu][uid="settingsMenu"] > li ul li > * {
    color: var(--settings-sub-menu-item__color, var(--nav-sub-menu-item__color, var(--sub-menu-item__color)));
    font-size: var(--settings-sub-menu-item__font-size, var(--nav-sub-menu-item__font-size, var(--sub-menu-item__font-size)));
    font-weight: var(--settings-sub-menu-item__font-weight, var(--nav-sub-menu-item__font-weight, var(--sub-menu-item__font-weight)));
}

[ui-menu][uid="contextMenu"] > li ul li > * {
    color: var(--context-sub-menu-item__color, var(--nav-sub-menu-item__color, var(--sub-menu-item__color)));
    font-size: var(--context-sub-menu-item__font-size, var(--nav-sub-menu-item__font-size, var(--sub-menu-item__font-size)));
    font-weight: var(--context-sub-menu-item__font-weight, var(--nav-sub-menu-item__font-weight, var(--sub-menu-item__font-weight)));
}

[ui-menu][uid="overflowMenu"] > li ul li > * {
    color: var(--overflow-sub-menu-item__color, var(--nav-sub-menu-item__color, var(--sub-menu-item__color)));
    font-size: var(--overflow-sub-menu-item__font-size, var(--nav-sub-menu-item__font-size, var(--sub-menu-item__font-size)));
    font-weight: var(--overflow-sub-menu-item__font-weight, var(--nav-sub-menu-item__font-weight, var(--sub-menu-item__font-weight)));
}

[ui-menu] > li ul li[is-active] {
    background: var(--sub-menu-item__active__background, var(--sub-menu__background));
}
[ui-menu][uid="userMenu"] > li ul li[is-active] {
    background: var(--user-sub-menu-item__active__background, var(--sub-menu-item__active__background));
}
[ui-menu][uid="settingsMenu"] > li ul li[is-active] {
    background: var(--settings-sub-menu-item__active__background, var(--nav-sub-menu-item__active__background, var(--sub-menu-item__active__background)));
}
[ui-menu][uid="settingsMenu-donor"] > li ul li[is-active],
[ui-menu][uid="contextMenu-donor"] > li ul li[is-active],
[ui-menu][uid="overflowMenu-donor"] > li ul li[is-active] {
    background: var(--secondary-sub-menu-item__active_background, var(--nav-sub-menu-item__active__background, var(--sub-menu-item__active__background)));
}
[ui-menu][uid="contextMenu"] > li ul li[is-active] {
    background: var(--context-sub-menu-item__active__background, var(--nav-sub-menu-item__active__background, var(--sub-menu-item__active__background)));
}
[ui-menu][uid="overflowMenu"] > li ul li[is-active] {
    background: var(--overflow-sub-menu-item__active__background, var(--nav-sub-menu-item__active__background, var(--sub-menu-item__active__background)));
}
[ui-menu] > li ul li[is-active] > * {
    color: var(--sub-menu-item__active__color, var(--sub-menu-item__color));
}
[ui-menu][uid="userMenu"] > li ul li[is-active] > * {
    color: var(--user-sub-menu-item__active__color, var(--user-sub-menu-item__color, var(--sub-menu-item__active__color, var(--sub-menu-item__color))));
}
[ui-menu][uid="settingsMenu"] > li ul li[is-active] > * {
    color: var(--settings-sub-menu-item__active__color, var(--settings-sub-menu-item__color, var(--nav-sub-menu-item__active__color, var(--nav-sub-menu-item__color, var(--sub-menu-item__active__color, var(--sub-menu-item__color))))));
}
    [ui-menu][uid="settingsMenu-donor"] > li ul li[is-active] > *
    [ui-menu][uid="contextMenu-donor"] > li ul li[is-active] > *,
    [ui-menu][uid="overflowMenu-donor"] > li ul li[is-active] > * {
        color: var(--secondary-sub-menu-item__active__color, var(--settings-sub-menu-item__color, var(--nav-sub-menu-item__active__color, var(--nav-sub-menu-item__color, var(--sub-menu-item__active__color, var(--sub-menu-item__color))))));
    }

[ui-menu][uid="contextMenu"] > li ul li[is-active] > * {
    color: var(--context-sub-menu-item__active__color, var(--context-sub-menu-item__color, var(--nav-sub-menu-item__active__color, var(--nav-sub-menu-item__color, var(--sub-menu-item__active__color, var(--sub-menu-item__color))))));
}

[ui-menu][uid="overflowMenu"] > li ul li[is-active] > * {
    color: var(--overflow-sub-menu-item__active__color, var(--overflow-sub-menu-item__color, var(--nav-sub-menu-item__active__color, var(--nav-sub-menu-item__color, var(--sub-menu-item__active__color, var(--sub-menu-item__color))))));
}

[ui-menu][uid="settingsMenu"] input {
    /* This should get replaced by or appended with amp-input default themes once in place */
    background: var(--settings-menu-input__background);
    border: var(--settings-menu-input__border);
    border-color: var(--settings-menu-input__border-color);
    border-radius: var(--settings-menu-input__border-radius);
    border-style: var(--settings-menu-input__border-style);
    border-width: var(--settings-menu-input__border-width);
    box-shadow: var(--settings-menu-input__box-shadow);
    color: var(--settings-menu-input__color);
    margin: var(--settings-menu-input__margin);
    padding: var(--settings-menu-input__padding);
    /* static */
    font-weight: normal;
    display: flex;
    flex: 1 0 auto;
    outline: 0;
    transition: all 0.2s;
    align-self: stretch;
    min-height: 2em;
    margin-right: -3.75em;
}

[ui-menu][uid="settingsMenu"] input:focus {
    background: var(--settings-menu-input__focus__background, var(--settings-menu-input__background));
    border: var(--settings-menu-input__focus__border, var(--settings-menu-input__border));
    border-color: var(--settings-menu-input__focus__border-color, var(--settings-menu-input__border-color));
    border-radius: var(--settings-menu-input__focus__border-radius, var(--settings-menu-input__border-radius));
    border-style: var(--settings-menu-input__focus__border-style, var(--settings-menu-input__border-style));
    border-width: var(--settings-menu-input__focus__border-width, var(--settings-menu-input__border-width));
    box-shadow: var(--settings-menu-input__focus__box-shadow, var(--settings-menu-input__box-shadow));
    color: var(--settings-menu-input__focus__color, var(--settings-menu-input__color));
    margin: var(--settings-menu-input__focus__margin, var(--settings-menu-input__margin));
    padding: var(--settings-menu-input__focus__padding, var(--settings-menu-input__padding));
    /* static */
    font-weight: normal;
    margin-left: 0;
    margin-right: -3.75em;
}
[ui-menu][uid="settingsMenu"] input::placeholder {
    color: var(--settings-menu-input__placeholder__color);
}
[ui-menu][uid="settingsMenu"] input::-webkit-inner-spin-button,
[ui-menu][uid="settingsMenu"] input::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}
[ui-menu][uid="settingsMenu-donor"] ul [ui-icon] {
    background: var(--secondary-sub-menu-icon__background);
    color: var(--secondary-sub-menu-icon__color);
}
    [ui-menu][uid="settingsMenu-donor"] ul li[is-active] [ui-icon] {
        background: var(--secondary-sub-menu-icon__active__background);
        color: var(--secondary-sub-menu-icon__active__color);
    }
    [ui-menu][uid="settingsMenu"] ul [ui-icon] {
        background: var(--settings-sub-menu-icon__background);
        color: var(--settings-sub-menu-icon__color);
    }
[ui-menu][uid="settingsMenu"] ul li[is-active] [ui-icon] {
    background: var(--settings-sub-menu-icon__active__background);
    color: var(--settings-sub-menu-icon__active__color);
}
[ui-menu][uid="settingsMenu"] > li[target="settings-menu"] {
    flex-wrap: wrap;
    flex: 1 1 auto;
    display:flex;
}
[ui-menu][uid="settingsMenu"] > li[target="settings-menu"] > a > span {
    max-width: 50vw;
}
[ui-menu][uid="settingsMenu-donor"] > li[target="settings-menu-donor"] > [trigger="toggle-menu"],
[ui-menu][uid="settingsMenu"] > li[target="settings-menu"] > [trigger="toggle-menu"] {
    padding-right: 0;
}
[ui-menu][uid="settingsMenu-donor"] > li[target="settings-menu-donor"] [ui-icon*="menu-toggle-donor"],
[ui-menu][uid="settingsMenu"] > li[target="settings-menu"] [ui-icon*="menu-toggle"] {
    animation-name: slideIconRight;
    animation-duration: 0.25s;
    margin-left: 0em;
    transform: translateX(0);
    transform-style: preserve-3d;
}
[ui-menu][uid="settingsMenu-donor"] > li[target="select-program"] [ui-icon*="menu-toggle-donor"],
[ui-menu][uid="settingsMenu"] > li[target="select-program"] [ui-icon*="menu-toggle"] {
    animation-name: slideIconLeft;
    animation-duration: 0.25s;
    margin-left: -1em;
    transform: translateX(-1.5em);
    transform-style: preserve-3d;
}
[target="settings-menu-donor"] ul li [trigger="toggle-menu-donor"],
[target="settings-menu"] ul li [trigger="toggle-menu"] {
    padding-left: 1.25em;
}
[ui-menu][uid="settingsMenu-donor"] > li[target="select-program"] div,
[ui-menu][uid="settingsMenu"] > li[target="select-program"] div {
    padding: 0 0 0 1.5em !important;
    flex: 1 0 auto;
    display: flex;
    flex-wrap: wrap;
}
[ui-menu][uid="settingsMenu"] > li[target="select-program"] div input {
    flex: 0 1 100%;
}
[ui-menu][uid="settingsMenu"] > li[target="select-program"] div amp-datalist {
    flex: 0 1 100%;
    background: white;
    z-index: 10;
}
[ui-menu][uid="settingsMenu"] > li[target="select-program"] > a {
    flex: 0 1 auto;
}
[ui-menu][uid="settingsMenu-donor"] > [is-hidden],
[ui-menu][uid="settingsMenu"] > [is-hidden] {
    display: none !important;
}
[ui-menu][uid="settingsMenu-donor"] li[is-active] > ul li[is-active] ul,
[ui-menu][uid="settingsMenu"] li[is-active] > ul li[is-active] ul {
    background: inherit;
    position: relative;
    left: 0;
    top: 0;
    box-shadow: none;
}
[ui-menu][uid="settingsMenu-donor"] ul ul li,
[ui-menu][uid="settingsMenu"] ul ul li {
    border: 0;
    padding-left: 3.25em;
}
[ui-menu][uid="settingsMenu-donor"] ul ul li a,
[ui-menu][uid="settingsMenu"] ul ul li a {
    font-weight: normal;
}
[ui-menu][uid="settingsMenu"] ul [ui-icon] {
    background: var(--settings-sub-menu-icon__background);
    color: var(--settings-sub-menu-icon__color);
}
[ui-menu][uid="settingsMenu"] ul li[is-active] [ui-icon] {
    background: var(--settings-sub-menu-icon__active__background);
    color: var(--settings-sub-menu-icon__active__color);
}
[ui-menu][uid="userMenu"] > li ul li#help-info,
[ui-menu][uid="userMenu"] > li ul li#pnlUserHelp {
    background: #eee;
    border-color: #ddd;
}
[ui-menu][uid="userMenu"] > li ul li#help-info > div,
[ui-menu][uid="userMenu"] > li ul li#pnlUserHelp > div {
    display: block;
    color: #666;
    font-size: 0.9em;
    margin: 0;
    line-height: 1.5em;
}
[ui-menu][uid="userMenu"] > li ul li#login-info {
    border-color: #ddd;
}
[ui-menu][uid="userMenu"] > li ul li#login-info p {
    color: #767676;
}
[ui-menu][uid="userMenu"] > li > a {
    height: auto;
}
[ui-menu][uid="userMenu"] li [ui-icon] {
    background: var(--user-menu-icon__background);
    color: var(--user-menu-icon__color);
}
[ui-menu][uid="userMenu"] li[is-active] [ui-icon] {
    background: var(--user-menu-icon__active__background);
    color: var(--user-menu-icon__active__color);
}
[ui-menu][uid="userMenu"] > li ul li#login-info {
    background: white;
}
[ui-menu][uid="userMenu"] > li ul li#login-info > * {
    color: black;
    font-size: 0.9em;
    margin: 0;
    line-height: 1.5em;
}
[ui-menu][uid="overflowMenu-donor"][is-empty],
[ui-menu][uid="overflowMenu"][is-empty] {
    display: none;
}
[ui-menu][uid="overflowMenu-donor"] [ui-icon],
[ui-menu][uid="overflowMenu"] [ui-icon] {
    background: none !important;
    margin-left: 0;
    margin-right: -0.5em;
}
[ui-menu] > li
[ui-icon] {
    justify-content: center;
    align-items: center;
    display: flex !important;
}
[trigger="toggle-menu"] [ui-icon*="expand-collapse"]:before {
    content: var(--icon__expand);
}
[is-active] [trigger="toggle-menu"] [ui-icon*="expand-collapse"]:before {
    content: var(--icon__collapse);
}

/* [[[ Section: Attributes: ui-icon ]]] */
[ui-icon*="framed"] {
    width: 1.75em;
    height: 1.75em;
}
[ui-icon*="avatar"]:before {
    content: var(--icon__avatar);
}
[ui-icon*="close"]:before {
    content: var(--icon__close);
}
[ui-icon*="expand"]:before {
    content: var(--icon__expand);
}
[ui-icon*="collapse"]:before {
    content: var(--icon__collapse);
}
[ui-icon*="menu-toggle-donor"]:before,
[ui-icon*="menu-toggle"]:before {
    content: var(--icon__menu-toggle);
}
[ui-icon*="settings"]:before {
    content: var(--icon__settings);
}
[ui-icon*="switch"]:before {
    content: var(--icon__switch);
}
[ui-icon*="users"]:before {
    content: var(--icon__users);
}

/* [[[ Section: Attributes: ui-type ]]] */
[ui-type="settings-categories"] {
    --a-display: block;
    --a-position: relative;
    --a-margin: .5em 0 0 0;
    --a-width: 20em;
    --a-padding: 2em;
    --h3-color: var(--color-2-dark);
    --h3-font-size: 1.5em;
    --h3-padding: 0 0 .5em 0;
    --h3-display: block;
    --p-display: block;
    --p-color: var(--color-2);
    overflow-y: auto;
    overflow-x: hidden;

    position: relative;
    display: block;
}
[ui-type="settings-categories"] a, [ui-type="settings-categories"] a:visited, [ui-type="settings-categories"] a:active {
    --h3-color: var(--color-2-dark);
    --p-color: var(--color-2);
    --a-color: var(--color2-dark);
}
[ui-type="settings-categories"] a.active {
    --a-background: var(--teal-5);
    --h3-color: var(--teal-90);
    --p-color: var(--teal-90);
}
[ui-type="settings-categories"]::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}
[ui-type="settings-categories"]::-webkit-scrollbar-thumb {
    height: 6px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: 7px;
    background-color: var(--scroll-bar-color);
    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
} 
[ui-type="settings-categories"]::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}
[ui-type="settings-categories"]::-webkit-scrollbar-corner {
    background-color: transparent;
}

[ui-type='dateRange'] {
    --input-display: flex;
    --input-flex-direction: column;
    --input-label-padding: 0.5em 0;
    --input-width: 100%;
}

/* [[[ Section: Attributes: uid ]]] */
[uid="programMenu-donor"],
[uid="programMenu"] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}
[uid="programMenu-donor"] > li,
[uid="programMenu"] > li {
    align-items: stretch;
    flex-direction: column;
}
[uid="programMenu-donor"] > li,
[uid="programMenu"] > li {
    display: none;
}
[uid="programMenu-donor"] > li[is-visible],
[uid="programMenu-donor"] > li:first-child,
[uid="programMenu"] > li[is-visible],
[uid="programMenu"] > li:first-child {
    display: flex;
}

/* ==================== [[[ Section: @media ]]] ==================== */
:root {
    --settings-menu-item__active__color: var(--isp-css-navigation-link-hover-font-color);
    --settings-menu-item__active__background: var(--isp-css-navigation-link-hover-bgcolor);
    --secondary-menu-item__color: var(--isp-css-navigation-secondary-color);
    --secondary-menu-item__background: var(--isp-css-navigation-secondary-bgcolor);
    --secondary-menu-item__active__background: var(--isp-css-navigation-secondary-link-hover-bgcolor);
    --secondary-menu-item__active__color: var(--isp-css-navigation-secondary-link-hover-color);
}

:root {
    /* Amplify Blue */
    --amplify-blue-0: #F8FCFF;
    --amplify-blue-5: #DDF0FE;
    --amplify-blue-10: #C2E4FC;
    --amplify-blue-20: #94CCF8;
    --amplify-blue-30: #72B6F1;
    --amplify-blue-40: #5AA2E8;
    --amplify-blue-50: #488CDB;
    --amplify-blue-60: #3A75CA;
    --amplify-blue-70: #305DB5;
    --amplify-blue-80: #26459B;
    --amplify-blue-90: #1E307F;
    --amplify-blue-100: #172061;
    /* Amplify Amber */
    --amplify-amber-0: #FFFCF2;
    --amplify-amber-5: #FFF6D5;
    --amplify-amber-10: #FEEFB9;
    --amplify-amber-20: #FCDE81;
    --amplify-amber-30: #F7CB4F;
    --amplify-amber-40: #F1B627;
    --amplify-amber-50: #E79D08;
    --amplify-amber-60: #DA8600;
    --amplify-amber-70: #CA6F00;
    --amplify-amber-80: #B65700;
    --amplify-amber-90: #A04100;
    --amplify-amber-100: #8A2E00;
    /* Amplify Teal */
    --amplify-teal-0: #FAFFFF;
    --amplify-teal-5: #E7FDFE;
    --amplify-teal-10: #D5FBFC;
    --amplify-teal-20: #AFF4F8;
    --amplify-teal-30: #8DEAF1;
    --amplify-teal-40: #71DCE8;
    --amplify-teal-50: #59CADB;
    --amplify-teal-60: #46B3CA;
    --amplify-teal-70: #3798B5;
    --amplify-teal-80: #2A7A9B;
    --amplify-teal-90: #1F5D7F;
    --amplify-teal-100: #174261;
    /* Amplify Green */
    --amplify-green-0: #F2FFF3;
    --amplify-green-5: #D1FED8;
    --amplify-green-10: #B1FCC1;
    --amplify-green-20: #7EF79F;
    --amplify-green-30: #50EF86;
    --amplify-green-40: #29E477;
    --amplify-green-50: #0AD570;
    --amplify-green-60: #08C162;
    --amplify-green-70: #08A756;
    --amplify-green-80: #0A8848;
    --amplify-green-90: #0B6638;
    --amplify-green-100: #0A4226;
    /* Amplify Crimson */
    --amplify-crimson-0: #FFF5F5;
    --amplify-crimson-5: #FEDDDD;
    --amplify-crimson-10: #FCC5C5;
    --amplify-crimson-20: #F89796;
    --amplify-crimson-30: #F16E6D;
    --amplify-crimson-40: #E84D4A;
    --amplify-crimson-50: #DB3430;
    --amplify-crimson-60: #CA231D;
    --amplify-crimson-70: #B5180F;
    --amplify-crimson-80: #9B1107;
    --amplify-crimson-90: #7F0D02;
    --amplify-crimson-100: #610A00;
    /* Amplify Light & Dark */
    --amplify-light-0: #FAFCFF;
    --amplify-light-5: #E8EDF2;
    --amplify-light-10: #D7DFE6;
    --amplify-light-20: #B9C4CD;
    --amplify-light-30: #9DA9B4;
    --amplify-light-40: #83909B;
    --amplify-dark-50: #6B7782;
    --amplify-dark-60: #545F69;
    --amplify-dark-70: #3F4850;
    --amplify-dark-80: #2A3137;
    --amplify-dark-90: #171A1E;
    --amplify-dark-100: #040405;
    /* Amplify White and Black */
    --amplify-white: #fff;
    --amplify-black: #000;
    --scroll-bar-color: rgba(0, 0, 0, .3);
}

@media screen and (min-width: 768px) { 
    :root {
        --branding__margin: 0;
    }
}
@media screen and (min-width: 992px) {

    :root {
        --nav-menu-item__active__color: var(--isp-css-navigation-link-hover-font-color);
        --nav-menu-item__active__background: var(--isp-css-navigation-link-hover-bgcolor);
        --nav-menu-item-secondary__active__background: var(--isp-css-navigation-secondary-link-hover-bgcolor);
        --nav-menu-item-secondary__active__color: var(--isp-css-navigation-secondary-link-hover-color);
        /* user menu */
        --settings-sub-menu-icon__background: var(--isp-css-navigation-link-hover-font-color);
        --settings-sub-menu-icon__color: var(--isp-css-navigation-link-hover-bgcolor);
        --settings-sub-menu-icon-secondary__color: var(--isp-css-navigation-secondary-link-hover-bgcolor);
        --settings-sub-menu-icon__active__background: var(--isp-css-navigation-link-hover-bgcolor);
        --settings-sub-menu-icon-secondary__active__background: var(--isp-css-navigation-secondary-link-hover-bgcolor);
        --settings-sub-menu-icon__active__color: var(--isp-css-navigation-link-hover-font-color);
        --settings-menu-item__border-color: rgba(0, 0, 0, 0.1);
        --settings-menu-item__border-style: solid;
        --settings-menu-item__border-width: 0 1px 0 0;
        --settings-menu-item__inner__border-color: rgba(255, 255, 255, 0.1);
        --settings-menu-item__inner__border-style: solid;
        --settings-menu-item__inner__border-width: 0 1px 0 0;
    }
}

/* tablet */
@media screen and (min-width: 768px) {
    header > [ui-wrapper] {
        flex-direction: row;
        justify-content: space-between;
    }
    [ui-menu][uid="userMenu"] li[is-active] > ul {
        position: absolute;
        min-width: 300px;
        top: 100%;
        z-index: 88;
    }
}

/* desktop */
@media screen and (min-width: 992px) {
    [uid="programMenu-donor"],
    [uid="programMenu"] {
        flex-direction: row;
    }
    [uid="programMenu-donor"] > li,
    [uid="programMenu"] > li {
        display: flex;
    }
    [uid="programMenu"] > li:first-child {
        width: 20vw;
        min-width: 350px;
    }
    [uid="programMenu-donor"] > li:first-child {
        display:none;
    }

    [ui-menu][uid="settingsMenu-donor"],
    [ui-menu][uid="settingsMenu-donor"] li,
    [ui-menu][uid="contextMenu-donor"],
    [ui-menu][uid="overflowMenu-donor"],
    [ui-menu][uid="settingsMenu"],
    [ui-menu][uid="settingsMenu"] li,
    [ui-menu][uid="contextMenu"],
    [ui-menu][uid="overflowMenu"] {
        flex: 1 1 auto; /* do not remove */
        flex-direction: row;
    }
    [ui-menu][uid="settingsMenu-donor"] li,
    [ui-menu][uid="settingsMenu"] li {
        flex: 1 0 auto;
    }
    [ui-menu][uid="settingsMenu-donor"] > li[target="settings-menu-donor"],
    [ui-menu][uid="settingsMenu"] > li[target="settings-menu"] {
        flex-wrap: nowrap;
    }
    [ui-menu][uid="contextMenu-donor"],
    [ui-menu][uid="contextMenu"] {
        padding: 0;
    }
    [ui-menu][uid="contextMenu-donor"] > li > a,
    [ui-menu][uid="contextMenu"] > li > a {
        white-space: nowrap;
    }
    [ui-menu][uid="contextMenu-donor"] > li > a:first-child,
    [ui-menu][uid="contextMenu"] > li > a:first-child {
        flex: 0 1 auto;
    }
}

@media (max-width: 48em) {
    :root {
        --component-scale: 1.1rem;
        --datagrid-display: block;
        --datagrid-row-display: block;
        --datagrid-row-header-display: none;
        --datagrid-row-default-padding: 1em;
        --datagrid-cell-display: block;
        --datagrid-cell-border-width: 0;
        --datagrid-cell-default-padding: 0.25em;
    }
}
@media (max-width: 34em) {
    :root {
        --component-scale: 0.8rem;
    }
}
/* ---------------------------------------------------------------------------
   Notification bell badge (PHNX-14324)
   Header chrome, so it lives here rather than in properties.css — that file is
   scoped to [aurelia-app='main'] and would not reach the DFX header. One rule set
   serves both headers, which render identical markup and are served by pages that
   load this sheet: _StylesAndScripts.cshtml:29 for MVC, Site.Master:26 for WebForms.

   Deliberately NOT a :before on the <li> — [ui-menu] > li already owns an
   absolutely positioned :before with pointer-events:none (see
   ui-menu/ui-menu.preliminary.css), and a second one would collide. The badge is
   its own <span> inside the anchor instead, where the existing
   "[ui-menu] li a span { pointer-events: none }" rule keeps it from swallowing the
   click that opens the Notification Center.

   RETARGETED to the redesign header, Figma node 160:139061 (Bell 3616:722), which
   brings this bell back into step with the two SPAs. PHNX-14324 shipped three
   deliberately identical bells — here, the Engagement Hub and the Notification
   Center — because a user moves between those headers and a bell that changes size
   between them reads as a different control. The two SPAs moved to the redesign
   header under PHNX-15253; this is the third.

     target   32px             ->  44px
     glyph    26px             ->  24px
     circle   #174261 @ 15%    ->  none, hover only
     badge    16px, no ring    ->  20px with a 2px white ring

   Colours did not move and still agree across all three: glyph #174261, badge
   #9b1107.

   THE RESTING CIRCLE IS GONE, and that is the change most likely to look like a
   mistake rather than a decision. Node 24:222 filled the 32px target with the brand
   navy at 15% so the bell read as a control rather than a loose icon; the redesign
   header carries no fill on its Bell frame at all — only the glyph, the badge and
   the pulse, on the header's own ground. The affordance moves to hover and focus.
   Note the bell still has to opt OUT of the user-menu's icon theming explicitly, and
   now in both directions: the menu rule paints every icon with the inverted header
   colours, so the bell says `background: none` to get the bare glyph and a fixed
   `color` to keep the navy — see the rule below.

   Historical note worth keeping: node 24:222 replaced node 5:6, a flattened raster
   whose values had to be pixel-sampled and which got two of them plainly wrong —
   #3c4247 sampled against #174261 actual (a warm grey for brand navy) and #b54a1c
   against #9b1107. Read vector nodes with bound variables; do not sample rasters.
   --------------------------------------------------------------------------- */

/* Gives the badge a containing block that hugs the circle. Without this the nearest
   positioned ancestor is the <li> — ui-menu/ui-menu.preliminary.css:177 already sets
   [ui-menu] li { position: relative } — and the badge would then be offset from the
   menu item's edge, past the anchor's --user-menu-item__padding (0.75em 1.5em, defined
   at line 652 and applied at line 973), instead of from the bell itself. */
.notification-bell__icon {
    position: relative;
    display: inline-flex;
}

/* The bell opts out of the user-menu icon theming. The rule above at
   [ui-menu][uid="userMenu"] li [ui-icon] paints EVERY icon in this menu with the
   inverted header colours — that is the avatar's treatment and it changes per ISP —
   whereas the design asks for a fixed glyph colour. Specificity here is (0,4,2)
   against that rule's (0,3,1), so this wins without touching the avatar.

   `background: none` is doing real work, not tidying: the menu rule paints a
   background on every icon, so the bell has to say NO fill explicitly to get the
   redesign's bare glyph rather than the avatar's inverted ground. */
[ui-menu][uid="userMenu"] li a.notification-bell [ui-icon] {
    background: none;
    color: #174261;
    /* 44px target around a 36px glyph. The 44 is read from the frame directly; the 36 is MEASURED,
       and is not the frame's "24" because the frame measures INK while font-size sizes an EM BOX.

       The frame's BellPivot is a 24x55 SVG at left 10 / top -17 whose ink fills y[24,55], so the
       drawn bell is x[10,34] of the 44px target: 24 wide, edge to edge. The Material Icons font is
       not edge to edge. Rendered at 240px and measured, notifications_none puts its ink at
       x[4,19.9], y[2.5,21.9] of the 24 em box - 16 x 19.5 - identical to the SVG the two SPAs use,
       so all three surfaces take the same correction. At font-size 24 the bell came out NARROWER
       THAN ITS OWN 20px BADGE, where the frame has it half again wider, leaving the badge nothing
       to overlap.

       24 / 16 = 1.5, so 36. Sized on WIDTH because width is what the badge overlaps. Height lands
       at 29.25 against the frame's 31: this is the sharp Material cut at aspect 1:1.219 and the
       frame's is NotificationsNoneRounded at 1:1.292, and the Material Icons font ships one cut.

       The badge does NOT move with this. It is positioned against .notification-bell__icon, which
       is the 44px box, so its top/right stay 0 - unlike the Engagement Hub, where MUI anchors the
       badge to the GLYPH and the same resize dragged it off target until its offsets were fixed.

       font-size/width/height/padding are the
       load-bearing declarations: they override [ui-menu] [ui-icon*="framed"]
       (preliminary.css:246-250, font-size 18px + padding .35em) and line 1557's
       1.75em, which together give the avatar its 31.5px.
       width/height are px, NOT em: em would couple the target to the glyph, so the two
       could not be sized independently the way the design treats them.
       The round shape is NOT set here — it comes from border-radius: 50% on that same
       preliminary.css rule, which now only shows on hover but still governs the shape,
       so dropping "framed" from ui-icon= would silently square off the hover state.
       Centring is likewise already applied by [ui-menu] > li [ui-icon] at
       line 1543; align-items/justify-content are repeated only so this block still
       centres correctly if that rule is ever narrowed. */
    font-size: 36px;
    width: 44px;
    height: 44px;
    box-sizing: border-box;
    padding: 0;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* The affordance the resting circle used to carry. Same navy at the same 15%, so hover
   cannot drift into a second colour, and expressed as rgba of #174261 rather than the
   flattened #dce3e7 composite so it stays correct on an ISP whose header is not white —
   this header is themed per program.

   TWO SEPARATE RULES, not one selector list, and that is not a style preference: an
   unsupported pseudo-class invalidates the WHOLE list it appears in. Written as one list
   with :focus-visible, a browser that does not know that selector would drop the :hover
   affordance along with it — turning an unproven selector into a regression for every
   pointer user rather than only for keyboard users.

   :focus rather than :focus-visible for the same reason: this is the only :focus-visible
   in RenaissanceWeb, so the app has no established floor for it, and the affordance now
   matters more than it did because the resting circle is gone. The usual objection to
   :focus — that it flashes on mouse click — does not apply here, because the affordance is
   identical to :hover and a click implies the pointer is already over the bell. */
[ui-menu][uid="userMenu"] li a.notification-bell:hover [ui-icon] {
    background: rgba(23, 66, 97, 0.15);
}

[ui-menu][uid="userMenu"] li a.notification-bell:focus [ui-icon] {
    background: rgba(23, 66, 97, 0.15);
}

.notification-bell__badge {
    position: absolute;
    /* Seated fully INSIDE the 44px target, flush to its top and right edges. The redesign
       frame puts the badge at left 24 / top 0 of a 44 x 44 bell at size 20, so nothing
       hangs outside the target any more — where node 24:222 had it 2px proud of a 32px
       circle. Flush is what the 2px white ring below needs: a ring only reads as a
       separator when the whole badge sits over the thing it is separating from. */
    top: 0;
    right: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    box-sizing: border-box;
    /* The ring is not decoration — it is what separates a dark red disc from the bell
       glyph it overlaps, and without it the two bleed into one shape at a glance, which
       is the whole thing a badge exists to avoid. box-sizing above keeps the badge 20px
       overall, so the ring grows inward rather than enlarging it. */
    border: 2px solid #fff;
    border-radius: 999px;
    /* #9b1107 — the frame's Alert/Error/Primary variable. Hardcoded because the --ren-*
       tokens are not defined anywhere in RenaissanceWeb.
       THIS CHANGED MEANING, not just value: it was #b65700, chosen to match the
       Notification Center's amber "Action Needed" chip on the reasoning that both say
       "this needs you". The design asks for an error red instead, and all three bells
       now carry it — the Notification Center and the Engagement Hub adopted it first. */
    background: #9b1107;
    color: #fff;
    /* M3 label/small, per the frame: 11px on 16px, weight 500, 0.5px tracking. The frame's
       font token resolves to Roboto because that is the Material kit's default; not applied
       here, because this header has its own type stack and one two-character label is not a
       reason to pull in another webfont. */
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.5px;
    text-align: center;
    white-space: nowrap;
}

/* The server renders the badge with [hidden]; the header script removes it only once a
   non-zero count arrives. Stated explicitly as defence, not because anything currently
   conflicts: the UA rule for [hidden] is only (0,1,0), so any future author rule setting
   display on this span would silently unhide an empty badge. */
.notification-bell__badge[hidden] {
    display: none;
}

/* ==========================================================================
   Login attention moment (PHNX-15253, AC2-AC6, AC40)

   Ported from ren-dfx-spa-engagement-hub, which ported it from the Notification
   Center. dfx was the surface it was missing from, and that mattered more than a
   missing animation usually would: AC2 asks for the moment "regardless of which
   page they land on", the session latch below is SHARED with both SPAs, and dfx
   is where a large share of users land first. Without it, landing on dfx left the
   latch unset and the moment ambushed the user later on whichever SPA they opened
   next - so its absence here mistimed it everywhere else too.

   Sequence, one-shot, never looping (AC40):
     0.00s  bloom      a ring expands out of the bell and fades
     0.20s  swing      the bell rocks and settles
     0.70s  badge pop  the count scales in
     0.90s  reveal     the CTA fades and lifts into place

   DRIVEN BY EXPLICIT CLASSES, not :has(). The SPAs key these off
   :has(.notification-bell-cta--reveal) because React owns the CTA's lifecycle and
   a wrapper class would need state. Here the script already applies the class, and
   :has() has no established floor in RenaissanceWeb - this is the app that still
   carries the only :focus-visible in the codebase - so keying on a class that is
   guaranteed to work beats a selector that degrades silently on an older browser.

   notification-bell-attention        the moment is showing (CTA visible)
   notification-bell-attention--motion  ...and motion is wanted

   The script omits --motion under prefers-reduced-motion, so motion never starts
   rather than being started and then suppressed. The media query at the end is a
   backstop for a preference that changes after the class is applied.
   ========================================================================== */

/* Step 1: the bloom. A pseudo-element so the ring costs no DOM and cannot be
   hit-tested - it must never sit between the pointer and the bell it is drawing
   attention to. .notification-bell__icon is already position: relative. */
.notification-bell-attention--motion .notification-bell__icon::after {
    content: "";
    position: absolute;
    inset: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border-radius: 50%;
    background: #9b1107;
    pointer-events: none;
    animation: notification-bell-bloom 600ms ease-out both;
}

@keyframes notification-bell-bloom {
    from {
        opacity: 0.35;
        transform: scale(0.6);
    }
    to {
        opacity: 0;
        transform: scale(2.4);
    }
}

/* Step 2: the swing. On the ICON rather than the anchor, which is what the SPAs
   rotate: the dfx anchor also carries a "Notifications" text label for mobile
   (hidden-for="tablet desktop"), and rotating the anchor would swing the words. */
.notification-bell-attention--motion .notification-bell__icon {
    transform-origin: top center;
    animation: notification-bell-swing 600ms ease-in-out 200ms both;
}

@keyframes notification-bell-swing {
    0% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(12deg);
    }
    45% {
        transform: rotate(-10deg);
    }
    70% {
        transform: rotate(6deg);
    }
    85% {
        transform: rotate(-3deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Step 3: the badge pop. NO translate here, unlike the SPAs: MUI and Mantine both
   seat their badge with translate(50%, -50%) and their keyframes have to restate
   it or the badge jumps across the bell mid-animation. This badge is placed with
   plain top/right, so the transform property is ours alone. */
.notification-bell-attention--motion .notification-bell__badge {
    animation: notification-bell-badge-pop 200ms cubic-bezier(0.34, 1.56, 0.64, 1) 700ms both;
}

@keyframes notification-bell-badge-pop {
    from {
        transform: scale(0.4);
    }
    to {
        transform: scale(1);
    }
}

/* Step 4: the CTA reveal. Keyed off a class ON THE CTA, not a descendant selector from the
   <li>, because the CTA is not a descendant of it - see the placement note below. */
.notification-bell-cta--reveal {
    animation: notification-bell-cta-reveal 300ms ease-out 900ms both;
}

@keyframes notification-bell-cta-reveal {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- The CTA itself ----

   ATTACHED TO document.body, NOT to the bell's <li>, and that is not a stylistic
   choice - putting it in the <li> was tried and is actively broken here.

   ui-menu.preliminary.css carries

       [ui-menu] > li[is-active] > :not(ul) { position: relative }

   which matches ANY non-ul direct child of an active item. At (0,2,2) it outranks
   a single class, so the moment the pointer entered the item the CTA was forced
   from absolute into flow, the <li> grew by the CTA's own 342px, and the bell
   visibly jumped sideways. ui-menu.js sets is-active on 'mouseenter focusin' for
   every li (ui-menu.js:26) and TOGGLES it on click (:18), and because the CTA was
   a DOM descendant, pointing at the CTA counted as pointing at the menu item.

   Living outside the menu subtree removes that whole class of interference at
   once: no is-active, no :not(ul) rule, no submenu behaviour, and no risk of an
   ancestor's overflow clipping a popover that must escape the header.

   The cost is that position has to be computed rather than inherited from a
   positioned ancestor - notification-bell.js sets --bell-cta-top/left from the
   bell's own rect in DOCUMENT coordinates, so the panel scrolls with the page and
   only resize needs re-measuring. */
.notification-bell-cta {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    box-sizing: border-box;
    text-align: left;
    /* Above the header's own stacking context. */
    z-index: 1300;
}

.notification-bell-cta[hidden] {
    display: none;
}

.notification-bell-cta__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.notification-bell-cta__unread,
.notification-bell-cta__action {
    margin: 0;
    color: #171a1e;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.15px;
    line-height: 1.5;
}

/*
   The action line is a WARNING BANNER, not bare text (Figma 160-133692). Amplify Amber 5 ground,
   Amber 100 text and glyph, 8px radius - the same pairing the invoice warning uses, so the two read as
   one language.

   Colour is not the only cue (AC29): the sentence says the notifications need action, and the glyph
   repeats it. Either alone would carry the meaning.

   The glyph is the frame's own exported ReportProblemOutlined, inlined as a data URI rather than
   committed as a file - it is 436 bytes, it renders on every DFX page that shows the moment, and a
   separate asset would cost a request and a deploy step for a quarter of a kilobyte. Carried on
   ::before so it stays out of the accessibility tree: it is decorative, and announcing "warning" ahead
   of a sentence that already says so is noise for a screen reader.
*/
.notification-bell-cta__action {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    padding: 6px 16px;
    border-radius: 8px;
    background: #fff6d5;
    color: #8a2e00;
}

.notification-bell-cta__action::before {
    content: "";
    flex: none;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22ReportProblemOutlined%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M11%205.49083L17.9025%2017.4167H4.0975L11%205.49083ZM11%201.83333L0.916667%2019.25H21.0833L11%201.83333ZM11.9167%2014.6667H10.0833V16.5H11.9167V14.6667ZM11.9167%209.16667H10.0833V12.8333H11.9167V9.16667Z%22%20fill%3D%22%238A2E00%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: 22px 22px;
}

/* A real link, not a button: it navigates, so middle-click and open-in-new-tab
   behave the way they do everywhere else in the header.

   THE SELECTOR IS DOUBLED. This anchor sits inside the user menu, and the rule at
   [ui-menu][uid="userMenu"] li a paints every anchor in that menu with the menu's
   own text colour - which on the Engagement Hub, whose header package carries the
   equivalent rule, rendered this label at 1.42:1 against its own navy fill before
   it was caught. Winning on class count rather than source order means the same
   defect cannot arrive here by a stylesheet being emitted in a different order. */
.notification-bell-cta .notification-bell-cta__view.notification-bell-cta__view {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 8px 16px;
    border: 0;
    border-radius: 8px;
    background: #174261;
    color: #ffffff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.15px;
    text-decoration: none;
    cursor: pointer;
    box-shadow:
        0 3px 1px -2px rgba(0, 0, 0, 0.2),
        0 2px 2px 0 rgba(0, 0, 0, 0.14),
        0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.notification-bell-cta .notification-bell-cta__view.notification-bell-cta__view:hover {
    background: #123449;
    color: #ffffff;
}

/*
   Scoped under the panel, at (0,2,0), because a single class was losing on the live page. Whatever
   wins there matches <button> but not the <a> beside it - __view renders correctly with identical
   specificity - so it is element- or attribute-based and outranks one class. Raising this beats that
   whole family; it will NOT beat !important or an equal-specificity rule in a later sheet, so if the
   close button is still wrong, the winning rule needs naming rather than out-specifying.
*/
.notification-bell-cta .notification-bell-cta__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    /* AC36's 24x24 floor, stated rather than inherited from whatever the glyph is. */
    min-width: 24px;
    min-height: 24px;
    /*
       !important, deliberately, and only on the properties an ISP button skin actually sets.

       dfx paints <button> from PER-PROGRAM CONFIG (--isp-css-button-bgcolor and friends), injected at
       runtime rather than living in this repo. On Oak Foundation Giving Fund that resolved to a filled
       #4d4bdd pill with a white glyph where the frame wants a bare mark - a colour that appears nowhere
       in this repository, which is how the source of it was identified.

       Out-specifying is not available: the rule is not here to out-specify, and scoping this to (0,2,0)
       already lost to it. Overriding a stylesheet you do not control is the case !important exists for.
       Scoped to this one control, so nothing else inherits the hammer.

       The <a> beside it needs none of this - only <button> is skinned, which is why "View Notifications"
       was always correct while this was not.
    */
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: #171a1e !important;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

/* Required, not decorative (WCAG 2.4.7 / AC33). Written as two rules rather than
   one list for the same reason the bell's hover/focus pair is: an unsupported
   pseudo-class invalidates the whole selector list it appears in. */
.notification-bell-cta__view:focus {
    outline: 2px solid #174261;
    outline-offset: 2px;
}

.notification-bell-cta__close:focus {
    outline: 2px solid #174261;
    outline-offset: 2px;
}

/* Desktop: anchored under the bell with a caret pointing back at it. Right-aligned
   because the bell sits at the end of the header, so a left-aligned panel would
   run off the viewport. */
.notification-bell-cta {
    position: absolute;
    /* Fallbacks matter: if the script ever fails to measure, the panel lands at the top
       left of the document rather than in an undefined place. */
    top: var(--bell-cta-top, 0);
    left: var(--bell-cta-left, 0);
    width: 342px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e1e6ea;
    border-radius: 8px;
    box-shadow:
        0 11px 15px -7px rgba(0, 0, 0, 0.2),
        0 24px 38px 3px rgba(0, 0, 0, 0.14),
        0 9px 46px 8px rgba(0, 0, 0, 0.12);
}

.notification-bell-cta::before {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 12px;
    border: 6px solid transparent;
    border-bottom-color: #e1e6ea;
}

/* Mobile: a full-width banner pinned under the header. Fixed rather than absolute,
   because on a narrow screen the bell's own <li> is nowhere near where the banner
   belongs. 37.5em is the breakpoint the header package already uses. */
@media (max-width: 37.5em) {
    .notification-bell-cta {
        /* Still absolute, not fixed: the banner belongs under the header, and the header
           scrolls, so document coordinates are right here too. left/right override the
           measured --bell-cta-left to span the viewport. */
        position: absolute;
        top: var(--bell-cta-top, 0);
        left: 0;
        right: 0;
        width: auto;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .notification-bell-cta::before {
        display: none;
    }
}

/* The backstop. The script omits --motion when the preference is already set, so
   this covers a preference that changes AFTER the class is applied. Same selectors
   as the rules above, so equal specificity and source order decides - which is why
   this block is last. animation: none rather than a zero duration, so every element
   lands on its natural resting style instead of a held final keyframe. */
@media (prefers-reduced-motion: reduce) {
    .notification-bell-attention--motion .notification-bell__icon::after {
        animation: none;
        opacity: 0;
    }

    .notification-bell-attention--motion .notification-bell__icon,
    .notification-bell-attention--motion .notification-bell__badge,
    .notification-bell-attention--motion .notification-bell-cta {
        animation: none;
    }
}