:root {
    --nav-bar-bg-color: #e6e6e6;
    --nav-bar-border-bottom-color: #888888;
    --nav-bar-hover-bg-color: #cde8ff;

    --nav-text-color: #000000;
    --nav-bg-color: #fff;
    --nav-menu-spacer-color: #b3b3b3;

    --nav-hover-bg-color: #0a0d5f;
    --nav-hover-text-color: #fff;

    --nav-disabled-text-color: #8f8f8f;
    --nav-disabled-hover-bg-color: #b9b9b9;
    --nav-disabled-hover-text-color: #8f8f8f;

    --nav-border-bottom-color: #215c7e;
    --nav-box-shadow-color: #676767;
}

nav {
    background-color: var(--nav-bar-bg-color);
    margin-bottom: 5px;
}

nav span {
    cursor: default;
}

nav ul {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--nav-bar-border-bottom-color);
}

nav ul li {
    display: inline-block;
    position: relative;
}

nav ul li span {
    color: var(--nav-text-color);
    display: block;
    padding: 5px 10px;
    transition: 0.3s linear;
}

nav ul li:hover {
    background-color: var(--nav-bar-hover-bg-color);
}

nav ul li ul {
    border-bottom: 3px solid var(--nav-border-bottom-color);
    display: none;
    position: absolute;
    width: 190px;
    z-index: 10;
    box-shadow: 0 5px 5px var(--nav-box-shadow-color);
}

nav ul li ul li {
    /*border-top: 1px solid #bfbfbf;*/
    display: block;
    z-index: 10;
}

/*
nav ul li ul li:first-child {
    border-top: none;
    z-index: 10;
} */

nav ul li ul li span,
span.menu-spacer,
span.menu-spacer:hover {
    background-color: var(--nav-bg-color);
    display: block;
    padding: 4px 10px;
    z-index: 10;
}

span.menu-spacer {
    height: 1px;
    min-height: 1px;
}
span.menu-spacer span {
    height: 1px;
    min-height: 1px;
    background-color: var(--nav-menu-spacer-color);
    margin: 0;
    padding: 0;
}

nav ul li ul li span:hover {
    background-color: var(--nav-hover-bg-color);
    color: var(--nav-hover-text-color);
}

.menu-disabled {
    color: var(--nav-disabled-text-color);
}
.menu-disabled:hover {
    background-color: var(--nav-disabled-hover-bg-color);
    color: var(--nav-disabled-hover-text-color);
}

.icon-item:before {
    display: block;
    float: left;
    padding-right: 4px;
}
.icon-item.menu-disabled:before {
    filter: grayscale(70%);
}

/* File menu */
.icon-none:before         { content: url("icons/menu/16/empty.png")}
.icon-import:before       { content: url("icons/menu/16/import.png")}
.icon-export:before       { content: url("icons/menu/16/export.png")}
.icon-close:before        { content: url("icons/menu/16/close.png")}
/* Edit menu */
.icon-insert:before       { content: url("icons/menu/16/insert.png")}
.icon-edit:before         { content: url("icons/menu/16/edit.png")}
.icon-delete:before       { content: url("icons/menu/16/delete.png")}
.icon-copy:before         { content: url("icons/menu/16/copy.png")}
.icon-selectall:before    { content: url("icons/menu/16/selectall.png")}
.icon-selectnone:before   { content: url("icons/menu/16/selectnone.png")}
.icon-selectinvert:before { content: url("icons/menu/16/selectinvert.png")}
/* Display menu */
.icon-refresh:before      { content: url("icons/menu/16/refresh.png")}
/* Extra menu */
.icon-preferences:before  { content: url("icons/menu/16/preferences.png")}
.icon-clean:before        { content: url("icons/menu/16/cleanup.png")}
/* Help menu */
.icon-help:before         { content: url("icons/menu/16/help.png")}
.icon-releasenotes:before { content: url("icons/menu/16/releasenotes.png")}
.icon-about:before        { content: url("icons/menu/16/about.png")}

.icon-fhc:before          { content: url("icons/fhc-16.png")}

.icon-showfields:before   { content: url("icons/menu/16/showfields.png")}


/* Context menu */
#context-menu-container {
    display: none;
}
#context-menu-wrapper {
    position: absolute;
    top: 10px;
    left: 10px;
    opacity: 0;
    transition: opacity .8s ease, top .2s ease, left .2s ease;
}
#context-menu-wrapper.show {
    opacity: 1;
}
.context-menu {
    color: var(--nav-text-color);
    background-color: var(--nav-bg-color);
    border-radius: 3px;
    margin: 0;
    min-width: 160px;
    padding: 5px 0;
    box-shadow: 0 0 10px 2px var(--nav-box-shadow-color);
}
.context-menu li {
    list-style: none;
}
.context-menu span {
    box-sizing: border-box;
    display: block;
    padding: 5px 15px;
}
.context-menu span:hover {
    background-color: var(--nav-hover-bg-color);
    color: var(--nav-hover-text-color);
}
.context-separator {
    border-bottom: 1px solid var(--nav-menu-spacer-color);
    margin: 5px;
}

.menu-title {
    font-weight: bold;
    padding: 5px 15px;
    font-style: italic;
    font-size: 110%;
}