:root {
    /* Header Colors (also used for site tour popups) */
    --headerBackground: #292929;
    --headerTextColor: white;
    /* This is used for hoverable items in the header (benefit picker, fund picker, and user account)
    Typically should be slightly lighter than the 'headerBackground' color */
    --headerBackgroundLighten: #7d7d7d;
    /* Navigation Menu Colors (also affects drop down menus in the header - benefit picker, fund picker, and user account) */
    --menuBackground: #f7f7f7;
    --menuLinkColor: #343434;
    /* Hover colors for menu links (also affects drop down menus in the header - benefit picker, fund picker, and user account)*/
    --menuLinkHoverColor: #343434;
    --menuLinkHoverBackgroundColor: #e1e1e1;
    /* Background color of the highlighted menu item for the current page (typically should be slighlty darker than the 'menuLinkHoverBackgroundColor') */
    --menuLinkSelectedBackgroundColor: #d4d4d4;
    /* Grid Header, Footer and Pager colors (also controls date picker header colors and menu data list colors) */
    --gridHeaderBackgroundColor: #292929;
    --gridHeaderColor: white;
    /* Link Colors */
    --linkColor: #000066;
    --linkHoverColor: #ff0000;
    /* Primary Button Colors */
    --primaryButtonBackgroundColor: #000066;
    --primaryButtonTextColor: white;
    --primaryButtonHoverBackgroundColor: #5a6268;
    --primaryButtonHoverTextColor: white;
    /* Secondary Button Colors*/
    --secondaryButtonBackgroundColor: #989898;
    --secondaryButtonTextColor: white;
    --secondaryButtonHoverBackgroundColor: #ff0000;
    --secondaryButtonHoverTextColor: white;
    /* Footer Colors */
    --footerBackgroundColor: #757575;
    --footerColor: white;

    /*#region FIPO Custom CSS Vars*/
    --cardValueMedium: #cc9933;
    --cardValueSmall: #000066;
    --cardValueDistributionColor: var(--cardValueSmall);
    --newCommunicationColor: green;
    /*#endregion*/
}