:root {

    /* Header Colors (also used for site tour popups) */
    --headerBackground: #a9a7a7;
    --headerTextColor: black;

    /* 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: #d3d1d1;

    /* 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: #627482;
    --gridHeaderColor: white;

    /* Link Colors */
    --linkColor: #007B94;
    --linkHoverColor: #000308;

    /* Primary Button Colors */
    --primaryButtonBackgroundColor: #6c757d;
    --primaryButtonTextColor: white;
    --primaryButtonHoverBackgroundColor: #5a6268;
    --primaryButtonHoverTextColor: white;

    /* Secondary Button Colors*/
    --secondaryButtonBackgroundColor: #989898;
    --secondaryButtonTextColor: #212529;
    --secondaryButtonHoverBackgroundColor: #858585;
    --secondaryButtonHoverTextColor: white;

    /* Footer Colors */
    --footerBackgroundColor: #757575;
    --footerColor: white;
}