/**
 * @copyright (c) 2004 - 2026 Performa Software Pty Ltd. All Rights Reserved.
 * @summary 🅱🅸🅳🆂 Server
 */

@layer theme {
    :root {
        --top-menu-font-name: 'Roboto';
    }

    :is(:root:not([data-theme]), :root[data-theme=Light]) {
        --top-menu-shadow-color: #717577;
        --top-menu-hover-background-color: #d0e5f5;
        --top-menu-hover-font-color: #1d5987;
        --top-menu-hover-border-color: #79b7e7;
    }

    :root[data-theme=Dark] {
        --top-menu-shadow-color: black;
        --top-menu-hover-background-color: #6ba81f;
        --top-menu-hover-font-color: #000000;
        --top-menu-hover-border-color: #152006;
    }
}

div.fg-menu-container {
    margin-top: -0.5px;
    z-index: 300;
    font-size: 120%;
    font-family: var(--top-menu-font-name);
}

    div.fg-menu-container,
    div.fg-menu-container ul.ui-widget-content {
        border-top-left-radius: 0;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border: 0;
        background: var(--top-menu-item-background-color);
        color: var(--top-menu-item-text-color);
    }

        div.fg-menu-container,
        div.fg-menu-container ul.ui-widget-content,
        nav#top-nav-bar > ul > li > a {
            box-shadow: 3px 5px 15px 0px var(--top-menu-shadow-color);
        }

nav.top-menu a.ui-button {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-size: 1.2em;
    background: #536E7C;
    color: #ffffff;
}

nav#top-nav-bar > ul {
    display: flex;
    margin: 0;
    font-family: var(--top-menu-font-name);
}

    nav#top-nav-bar > ul > li {
        margin-left: 5px;
        white-space: nowrap;
        list-style: none outside none;
    }

        nav#top-nav-bar > ul > li ul {
            display: none;
        }

        nav#top-nav-bar > ul > li a {
            border-width: 0;
        }


div.fg-menu-flyout {
    width: 210px !important;
}

/* Accordion (menu) items in hover state */
ul.fg-menu a.ui-state-hover {
    border: 1px solid var(--top-menu-hover-border-color);
    background: var(--top-menu-hover-background-color);
    font-weight: bold;
    color: var(--top-menu-hover-font-color);
}


@media print {
    nav.top-menu {
        display: none;
    }
}