:root {
    --main-bg-color: #3b3b3b;
    --menu-height: 50px;
    --menu-width: 1200px;
    --menu-item-height: 30px;
    --menu-item-width: 160px;
    --menu-item-min-width: 90px;
    --menu-item-max-width: 230px;
    --menu-link-padding: 0 20px;
    --menu-link-line-height: 50px;
    --menu-font-family: Helvetica, Arial, sans-serif;
    --menu-font-size: 14px;
    --menu-text-color: #f3f3f3;
    --menu-text-shadow: 1px 1px 1px rgba(0,0,0,.6);
    --menu-bg-gradient-start: #1f2024;
    --menu-bg-gradient-end: #676769;
    --menu-hover-color: #8fde62;
    --menu-shadow: 6px 6px 6px -1px rgba(34, 60, 80, 0.75);
    --submenu-top: 50px;
    --submenu-left: 10px;
    --submenu-width: 250px;
    --submenu-link-width: 220px;
    --submenu-link-padding: 0px 4px 0px 20px;
    --submenu-border-color: #353539;
}

#glavnoemenu /* БЛОК В КОТОРОМ НАХОДИТСЯ ГЛАВНОЕ МЕНЮ */
{
	width: var(--menu-width); /* Высота блока */
	height: var(--menu-height); /* Высота блока */
	float: none;
	background: linear-gradient(to top, var(--menu-bg-gradient-start), var(--menu-bg-gradient-end));
    transition: color .2s ease-in-out, opacity .25s ease .1s;
    margin-bottom: 10px;
}


.mainmenu, .mainmenu ul, .mainmenu li, .mainmenu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

.mainmenu {
    height: 100%;
    width: 100%;
    border-radius: 5px;
}

.mainmenu li {
    position: relative;
    list-style: none;
    float: left;
    height: var(--menu-item-height);
    min-width: var(--menu-item-min-width);
    max-width: var(--menu-item-max-width);
    /*width: var(--menu-item-width);*/
    text-align: left;
}

.mainmenu li a {
    display: block;
    padding: var(--menu-link-padding);
    line-height: var(--menu-link-line-height);
    text-decoration: none;
    font-family: var(--menu-font-family);
    font-weight: bold;
    font-size: var(--menu-font-size);
    color: var(--menu-text-color);
    text-shadow: var(--menu-text-shadow);
   
    transition: color .2s ease-in-out, opacity .25s ease .1s;
    
}

.mainmenu li:hover > a {
    color: var(--menu-hover-color);
}

.mainmenu ul {
    position: absolute;
    top: var(--submenu-top);
    left: var(--submenu-left);
    opacity: 0;
    background: var(--menu-bg-gradient-start);
    border-radius: 0 0 5px 5px;
    transition: opacity .25s ease .1s;
    box-shadow: var(--menu-shadow);
    z-index: 1000; /* Высокое значение для размещения поверх других элементов */
}

.mainmenu li:hover > ul {
    opacity: 1;
}

.mainmenu ul li {
    height: 0;
    overflow: hidden;
    padding: 0;
    text-align: left;
    width: var(--submenu-width);
    transition: height .25s ease .1s;
}

.mainmenu li:hover > ul li {
    height: var(--menu-link-line-height);
    overflow: visible;
}

.mainmenu ul li a {
    width: var(--submenu-link-width);
    padding: var(--submenu-link-padding);
    border-bottom: 1px solid var(--submenu-border-color);
}

.mainmenu ul li:last-child a {
    border: none;
}

.mainmenu a.documents { background: url(../img/docs.png) no-repeat 6px center; }
.mainmenu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.mainmenu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }