.top-nav
{
    width: 100%;
    position: absolute;                  
    bottom: 0;                          
    left: 0; 

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */

    display: flex;
    flex-direction: column;
}

.top-nav .nav-search 
{
    padding: var(--spacing);
}

.top-nav .top-nav-mobile-language-container
{
    padding-top: var(--spacing);
    padding-right: var(--spacing);
    display: flex;
    justify-content: flex-end;
}

.top-nav .top-nav-mobile-language-container > a
{
    margin-left: calc(var(--spacing) * 4);
}

.top-nav ul 
{
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: var(--heading-font-family) !important;
    font-weight: bold;

    display: flex;
    justify-content: stretch;
    align-items: stretch;;
}
.top-nav ul li
{
    flex-grow: 1;
    font-size: var(--top-nav-font-size);
    
    border-style: solid;
    border-width: 0px 0px 0px 0px;
    border-color: var(--background-color);

}

.top-nav ul li:not(:last-child)
{
    border-right: none;
}

.top-nav ul li:last-child
{
    /*float:none;*/
    overflow:hidden;
}


.top-nav ul li a
{
    display: block;
    text-align: center;
    line-height: var(--top-nav-button-height);
    padding: var(--top-nav-button-padding);
    color: var(--header-foreground-color);
    text-decoration: none;

    border-style: var(--top-nav-active-border-style);
    border-width: 0px;
    border-color: transparent;
}

.top-nav ul li a:hover
{
    color: var(--header-foreground-color) !important;
    background-color: var(--header-hover-color);
}

.top-nav-active
{
    color: var(--top-nav-active-foreground-color) !important;
    background-color: var(--top-nav-active-background-color);

    border-top-color: var(--top-nav-active-border-color) !important;
}
 
.left-nav ul
{
    list-style-type: none;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

.left-nav ul > li
{
    
    border-width: 0;
    border-style: solid;
    border-color: transparent;
    background-color: var(--left-nav-deep-nest-background-color);

}
.left-nav ul > li:hover
{
    background-color: var(--header-hover-color) !important;
}

.left-nav ul > li:hover > a
{
    color: var(--header-foreground-color) !important;
}

.left-nav-top-item 
{
    background-color: var(--header-background-color) !important;
}

.left-nav-top-item > a
{
    color: var(--header-foreground-color) !important;
}

.left-nav-active
{
    background-color: var(--top-nav-active-background-color) !important;
    border-color: var(--left-nav-active-border-color) !important;
}

.left-nav-active > a
{
    color: var(--header-active-color) !important;
}


.left-nav-link, .left-nav-expand
{
    float: left;
    display: block;
    font-weight: bold;
    font-family: var(--heading-font-family) !important;
    word-wrap: break-word;

    padding: var(--left-nav-button-padding);
    color: var(--left-nav-foreground-color) !important;
    text-decoration: none;
    width: calc(100% - 15px);
}

.left-nav-expand
{
    width: 15px;
    padding-left: 0px;
    padding-right: 0px;
}

.left-nav-depth-0 > .left-nav-link
{
    padding-left: calc(var(--spacing) * 1) !important;
}

.left-nav-depth-1 > .left-nav-link
{
    padding-left: calc(var(--spacing) * 2) !important;
}

.left-nav-depth-2 > .left-nav-link
{
    padding-left: calc(var(--spacing) * 3) !important;
}

.left-nav-depth-3 > .left-nav-link
{
    padding-left: calc(var(--spacing) * 4) !important;
}