:root {
    --cssmenu-bar-bg-color: var(--primary-color-2);
    --cssmenu-bar-color: var(--primary-color-1);
    --cssmenu-bar-color-hover: var(--primary-color-3);
    --cssmenu-bar-bottom-bg-color: var(--main-color);
    --cssmenu-bar-selected-bg-color: var(--main-color);
    --cssmenu-bar-selected-color: var(--primary-color-2);
    --cssmenu-bar-selected-color-hover: var(--primary-color-2);
    --cssmenu-option-bg-color: var(--primary-color-2);
    --cssmenu-option-bg-color-hover: var(--main-color);
    --cssmenu-option-color: var(--primary-color-1);
    --cssmenu-option-color-hover: var(--primary-color-2);
    --cssmenu-border-color: var(--main-color);
    --cssmenu-font-family: var(--font-family-base);
    --cssmenu-logout-color: var(--primary-color-1);
    --cssmenu-logout-color-hover: var(--main-color);
}

#cssmenu {
    border: none;
    border: 0;
    margin: 0;
    padding: 0;
    font-family: var(--cssmenu-font-family);
    font-size: 14px;
    font-weight: bold;
    color: var(--cssmenu-bar-color);
    width: auto;
}

#cssmenu > ul {
    margin-top: 6px !important;
}

#cssmenu ul {
    background: var(--cssmenu-bar-bg-color);
    border-top: 1px solid var(--cssmenu-bar-bg-color);
    -webkit-box-shadow: inset 0 1px 0 var(--cssmenu-bar-bg-color), 0 1px 0 var(--cssmenu-bar-bottom-bg-color), 0 2px 0 var(--cssmenu-bar-bottom-bg-color), 0 8px 0 var(--cssmenu-bar-bottom-bg-color), 0 9px 0 var(--cssmenu-bar-bottom-bg-color), 0 -1px 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 0 var(--cssmenu-bar-bg-color), 0 1px 0 var(--cssmenu-bar-bottom-bg-color), 0 2px 0 var(--cssmenu-bar-bottom-bg-color), 0 8px 0 var(--cssmenu-bar-bottom-bg-color), 0 9px 0 var(--cssmenu-bar-bottom-bg-color), 0 -1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 0 var(--cssmenu-bar-bg-color), 0 1px 0 var(--cssmenu-bar-bottom-bg-color), 0 2px 0 var(--cssmenu-bar-bottom-bg-color), 0 8px 0 var(--cssmenu-bar-bottom-bg-color), 0 9px 0 var(--cssmenu-bar-bottom-bg-color), 0 -1px 1px rgba(0, 0, 0, 0.1);
    height: 27px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#cssmenu ul ul {
    border-top: 6px solid var(--cssmenu-border-color);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

#cssmenu ul ul a {
    line-height: 30px;
}

#cssmenu ul ul ul {
    left: 100%;
    top: 0;
}

#cssmenu li {
    float: left;
    padding: 0 8px 0 8px;
}

#cssmenu li a {
    color: var(--cssmenu-option-color);
    display: block;
    font-weight: bold;
    line-height: 30px;
    padding: 0 25px;
    text-align: center;
    text-decoration: none;
}

#cssmenu li a:hover {
    color: var(--cssmenu-bar-color-hover);
    text-decoration: none;
}

#cssmenu li ul {
    background: var(--cssmenu-option-bg-color);
    border-left: 2px solid var(--cssmenu-border-color);
    border-right: 2px solid var(--cssmenu-border-color);
    border-bottom: 2px solid var(--cssmenu-border-color);
    display: none;
    height: auto;
    filter: alpha(opacity=95);
    opacity: 0.95;
    position: absolute;
    width: 225px;
    z-index: 200;
}

#cssmenu li:hover > ul {
    display: block;
}

#cssmenu li li {
    display: block;
    float: none;
    padding: 0;
    position: relative;
    width: 225px;
}

#cssmenu li ul a {
    display: block;
    font-size: 12px;
    font-style: normal;
    padding: 0 10px 0 15px;
    text-align: left;
}

#cssmenu li ul a:hover {
    background: var(--cssmenu-option-bg-color-hover);
    color: var(--cssmenu-option-color-hover);
    opacity: 1.0;
    filter: alpha(opacity=100);
}

#cssmenu p {
    clear: left;
}

#cssmenu .active > a {
    background: var(--cssmenu-bar-selected-bg-color);
    -webkit-box-shadow: 0 -4px 0 var(--cssmenu-bar-selected-bg-color), 0 -5px 0 var(--cssmenu-bar-selected-bg-color), 0 -6px 0 var(--cssmenu-bar-selected-bg-color);
    -moz-box-shadow: 0 -4px 0 var(--cssmenu-bar-selected-bg-color), 0 -5px 0 var(--cssmenu-bar-selected-bg-color), 0 -6px 0 var(--cssmenu-bar-selected-bg-color);
    box-shadow: 0 -4px 0 var(--cssmenu-bar-selected-bg-color), 0 -5px 0 var(--cssmenu-bar-selected-bg-color), 0 -6px 0 var(--cssmenu-bar-selected-bg-color);
    color: var(--cssmenu-bar-selected-color);
}

#cssmenu .active > a:hover {
    color: var(--cssmenu-bar-selected-color-hover);
}

#cssmenu .menuuser {
    float: right;
    padding-top: 5px;
    font-style: italic;
}

#cssmenu .menulogout {
    font-style: normal;
    font-weight: bold;
    font-size: 12px;
    font-family: var(--cssmenu-font-family);
    color: var(--cssmenu-logout-color);
}

#cssmenu .menulogout:hover {
    font-weight: bold;
    color: var(--cssmenu-logout-color-hover);
}