/*
e
*/
:root {
    --menu-backgound_color:  #1010d0;
    --menu_font_color:  white;
    --menu_font_size: 30px;
}
.zs-menu-common
{
    font-size:var(--menu_font_size);
    color:var(--menu_font_color);
    background-color:var(--menu-backgound_color);
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    display: flex;
    border:0;
    margin: 0;
    padding: 0;
    font-weight: 300;
    width:100%;
    justify-content:center;

}
.zs-menu-page
{
    position: sticky;
    top:0;
}

.zs-menu-bar
{
    display: flex;
    background-color: inherit;
    border-left:1px solid white;

}

.zs-menu-page input
{
    font-size:var(--menu_font_size);

}
.zs-menu-arrow
{
    padding-left: 4px;
    display: inline-block;
}
.menushow >a> .zs-menu-arrow {
    transform:translate(0px,15px) rotate(90deg);

    transition-duration: 20ms;
}
.menuhide .zs-menu-arrow {

    transition-duration: 20ms;
}

.zs-menu,.zs-menuitem
{

    background-color: inherit;


    color: inherit;
    cursor: pointer;
    display: block;
    border-right:1px solid white;
    z-index: 9999;
}

.zs-menu > div
{
    border-style: solid;
    /* border-width: 1px; */
    position: relative;
    color:inherit;
    background-color: inherit;
    display:none;
    z-index: 10009;
    height: max-content;
}
.zs-menu-bar > .zs-menu
{
    display: inline-block;
}


.zs-menu > a
{
    display: inline-block;

    /* line-height: 1.1em; */
}
.zs-menu.menushow > div
 {
     display: block;
    transition-duration: 100ms;

 }
.zs-menu-bar > .zs-menu > a
{
    display: block;

}
.zs-menu-bar > .zs-menu.menushow > div
 {
     display: block;

 }


.zs-menu.menushow > a
{
    filter: brightness(120%);
}
.zs-menu a
{
    background-color:inherit;

    white-space: nowrap;

    padding: 10px;

}

.zs-menuitem.textedit input
{
    display:inline !important;

    width: 6em;
    margin-left: 5px;

}

.zs-menuitem
{
    color:inherit;
    background-color: inherit;


}
.zs-menuitem a:hover
{
    filter: brightness(140%);
}
.zs-menuitem a
{
    color:inherit;
    background-color: inherit;
    padding: 10px;
    display: block;
    cursor: pointer;
    text-decoration: none;
}

@media all and  (min-width: 600px) {
    .zs_menu_mobile{
        display: none;
    }
    .zs-menu-bar {
        display: flex;
        flex-direction: row;
        z-index: 10001;

    }
    .zs-menu .zs-menu.menushow > div
    {
        left: 60px;
    }
    .zs-menu-bar .zs-menu.menushow > div
    {
        position: absolute;
        max-height: calc(100vh - var(--header-height));
        /* overflow-y: scroll; */
        height: auto;
    }

    .zs-menu > div::-webkit-scrollbar {
        width: 5px;
    }
    .zs-menu > div::-webkit-scrollbar-thumb  {
        width: 20px;
        left: 20px;
        filter: brightness(120%);

    }
}

@media all and  (max-width: 600px) {
    .barhide>.zs-menu-bar {
        display: none;
    }
    .zs_menu_mobile{
        padding: 2px;
        text-align: left;
    }
    .zs-menu-page
    {
        flex-direction: column;

    }
    .zs-menu-bar {
        flex-direction: column;

        max-height: calc(100vh - 100px);
        overflow-y: scroll;
    }
    .zs-menu-bar .zs-menu{
    }
    .zs-menu a
    {
        width: 100%;
        padding: 4px 0 4px 0;

    }
    .zs-menu.menushow > div
    {
        width: 100%;
    }
    .zs-menu-page *
    {
        border-right-width: 0 ;
        border-left-width: 0 ;
    }
}