/*
    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;
    }
}