/* ---------------------------------------------------------------------
   <copyright file="topNav.css" company="Microsoft">
     Copyright (c) Microsoft Corporation.  All rights reserved.
   </copyright>
   --------------------------------------------------------------------- */

/* Styles for the top nav menu */

@media screen and (min-width: 860px) {
    .topNav {
        --normal-background: rgb(242 242 242);
        --hover-background: rgb(206 206 206);
        --active-background: rgb(230 230 230);
        --normal-color: rgb(57 57 57);
        --visited-color: black;
        display: block;
        color: var(--normal-color);
        background-color: var(--normal-background);
        font-family: 'Segoe UI 2', sans-serif;
        font-size: 13px;
        font-weight: 500;
        margin: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
        padding: 0 5%;
        border: 0;
    }

    .topNav > div {
        display: inherit;
        max-width: 1600px;
        margin: 0 auto;
    }

    .topNav > div > ul {
        display: inherit;
        margin: 0;
        padding: 0.9em 0;
        width: 90%;
    }

    .topNav > div > ul > li {
        display: inline;
        padding: 0.9em 0.5em;
        position: relative;
    }

    .topNav > div > ul > li:active {
        background-color: var(--active-background);
    }

    .topNav > div > ul > li > a {
        display: inline;
        padding: 0.9em;
        width: 100%;
        position: relative;
    }

    .topNav a {
        text-decoration: none;
        color: var(--visited-color);
        overflow-x: visible;
        display: block;
    }

    .topNav li {
        list-style: none;
    }

    .topNavCategory:hover, .topNavTopLevelMenuItem:hover {
        background-color: var(--hover-background);
    }

    .topNavCategory.topNavActiveCategory, .topNavTopLevelMenuItem.topNavActiveCategory {
        background-color: var(--active-background);
    }

    .topNavDropdownMenu {
        display: none;
        position: absolute;
        z-index: 1000;
        padding: 10px 0;
        left: 0;
        top: 3.1em;
        background-color: var(--active-background);
    }

    .topNavCategory li:hover {
        background-color: var(--hover-background);
    }

    .topNavActiveCategory .topNavDropdownMenu, .topNavDropdownLink, .topNavDropdownTrigger{
        display: block;
    }

    .topNavDropdownMenu li {
        background-color: var(--active-background);
    }

    .topNavDropdownMenu li:hover {
        background-color: var(--hover-background);
    }
    
    .topNavDropdownLink {
        padding: 8px 18px
    }

    .ms-Icon--chevronThinDown::before {
        content: '';
        font: 8px/13px 'OffSMDL2';
        margin: 0 0 0 0.3em;
    }
}

@media screen and (max-width: 859px) {
    #topNav {
        display: none;
    }
}