.menu
{
}

    .menu > ul
    {
        border: 0;
        list-style: none;
        margin: 0;
        padding: 0;
    }

.menu-item
{
    float: left;
    display: inline; /* new */
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: 8px;
    position: relative;
    white-space: nowrap;
    z-index: 5; /* above the iframes below */
}

    .menu-item a
    {
        display: block;
        float: none;
        font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
        font-size: 16px;
        font-weight: normal;
        margin: 0px;
        padding: 5px;
        text-decoration: none;
    }

        .menu-item a.welcomeuser, .menu-item a.welcomeuser:visited
        {
            padding-left: 40px;
            background-image: url('../images/user-icon2.png');
            background-repeat: no-repeat;
            background-position-x: 16px;
            background-position-y: center;
        }

        /* the global search icon */
        .menu-item a.globalsearch, .menu-item a.globalsearch:visited
        {
            padding-left: 8px;
        }

    /* the global search textbox */
    .menu-item input.globalsearch
    {
        font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
        font-size: 12px;
        font-weight: normal;
        background-color: white;
        color: black;
    }

    .menu-item > ul
    {
        display: none;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .menu-item:hover
    {
    }

        .menu-item:hover a
        {
        }

            .menu-item:hover a.welcomeuser
            {
                background-image: url('../images/user-icon2-b.png');
            }

                .menu-item:hover a.welcomeuser:hover
                {
                    background-image: url('../images/user-icon2.png');
                }

        .menu-item:hover > ul
        {
            display: block;
            left: 0;
            position: absolute;
            top: 40px;
        }

/* menu-item as active module*/
.activemodule
{
    /*background: url('../images/arrow-right.png') left center no-repeat;*/
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="lightgray" class="bi bi-arrow-right-short" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/></svg>') left center no-repeat;
    text-decoration: underline;
}

/* keep displaying the active arrow when the top module is hovered */
.menu-item.activemodule a:hover 
{
    /*background: url('../images/arrow-right.png') left center no-repeat;*/
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="ligthgray" class="bi bi-arrow-right-short" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/></svg>') left center no-repeat;
    text-decoration: underline;
}

/* menu item welcome user, active and hovered. */
.menu-item.activemodule:hover a.welcomeuser:hover
{
    background: url('../images/arrow-right.png') left center no-repeat, url('../images/user-icon2.png') 16px 11px no-repeat;
}

.menu-item-level2
{
    padding: 0;
    white-space: nowrap;
    min-width: 200px;   
}

    .menu-item-level2:hover
    {
        white-space: nowrap;        
    }

/* do not display the active arrows on the drop down items. */
.menu-item .menu-item-level2 a:hover
{
    background: none;
}


/** New classes from 4.9.0.2 when we changed the menu into a responsive menu. **/

/** The entire navigation bar. **/
.navbar
{
    padding-left: 0px;
    margin: 0px;
    height: 40px;
}

/** The left-side part of the navigation bar menu. **/
.leftmenu
{
    float: left;
    display: inline;
}

/** The div that contains the fan logo. **/
.logo
{
    display: inline;
    height: 24px;
}

/** The logo image **/
.logo-image
{
    width: 28px;
    height: 22px;
    margin: 0;
    padding: 0;
    padding-top: 10px;
}

/** The div that contains the menu icon, displayed on small resolutions. **/
.menuicon
{
    display: inline;
    padding-left: 8px;
}

.hidden
{
    display: none;
}

/** The div that displays the menu in horizontal layout. **/
.horizontalMenu
{
    display: inline;
}

/** The div that displays the right-side menu in horizontal and vertical layout. **/
.rightmenu
{
    display: inline;
    float: right;
}

.logout-image
{
    padding-top: 6px;
}

/** The additional style of the horizontal bar when the menu is displayed vertical. **/
.vertical
{
}

    /** When the menu is displayed vertical, the menu icon is visible **/
    .vertical .menuicon
    {
        display: inline;
    }

    .vertical .rightmenu
    {
        display: inline;
        float: right;
    }

/** Styles used by the vertical menu **/
.verticalMenu
{
    display: none;
}

    .verticalMenu .menu-item
    {
        display: block;
        float: none;
        width: 150px;
        margin-left: 0px;
    }

        .verticalMenu .menu-item:hover > ul
        {
            display: block;
            top: 0px;
            left: 150px;
            position: absolute;
        }

/** used for override. **/
.visible
{
    display: block;
}

/** used for override. **/
.floatright
{
    float: right;
}

/** The style of the menu item level 2 in vertical menu. **/
.verticalMenu .menu-item .menu-item-level2:first-child
{
    border-top: 1px solid lightgray;
}