/*
e
*/
:root {
    --menu_font_size: 30px;
    --backgound_color:  #68c;

}
zs-menubar
{
    font-size:var(--menu_font_size);
    font-family: 'Noto Sans';
    background-color: #68c;
    color:white;
    /* position: sticky; */
    top:0;
    display: flex;
    z-index: 99999;
    border:0;
    margin: 0;
    padding: 0;
    font-weight: 300;
    width:100%;
}
.zs_menu_top
{
    display: flex;
    background-color: inherit;

}

zs-menubar input
{
    font-size:var(--menu_font_size);

}
zs-menu,zs-menuitem
{
    background-color: var(--backgound_color);;

    color: inherit;
    cursor: pointer;
    display: block;
    border-right: 1px solid white;
     z-index: 99999;
}
/*
zs-menu > div::-webkit-scrollbar {
    display: none;
}*/
zs-menu > div
{
    border-style: solid;
    /* border-width: 1px; */
    position: relative;
    color:inherit;
    background-color: inherit;
    display:none;
    z-index: 99999;
    height: max-content;
}
.zs_menu_top > zs-menu
{
    display: inline-block;
}


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

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

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

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

 }
.zs_menu_top > zs-menu
{
    /*
    border-style: solid;
    border-width: 1px;

    border-right-color: white;
    border-right-style: solid;
    border-right-width: 2px;
    */

}
zs-menu.menuhide > div
{

}



zs-menu.menushow > a
{
    background-color: blue;
}
zs-menu a
{
    background-color: var(--backgound_color);;

    white-space: nowrap;

    padding: 10px;

}

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

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

}

zs-menuitem,zs-menulink
{
    color:inherit;
    background-color: inherit;


}
zs-menuitem a:hover
{
    background-color: blue;
}
zs-menuitem a,zs-menulink a
{
    color:inherit;
    background-color: inherit;
    padding: 10px;
    display: block;
    cursor: pointer;
    text-decoration: none;
}

@media all and  (min-width: 1000px) {
    .zs_menu_mobile{
        display: none;
    }
    .zs_menu_top {
        display: flex;
        flex-direction: row;
    }
    zs-menu zs-menu.menushow > div
    {
        left: 60px;
    }
    .zs_menu_top 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;
        background-color: blue;

    }
}

@media all and  (max-width: 1000px) {
    .barhide>.zs_menu_top {
        display: none;
    }
    .zs_menu_mobile{
        padding: 2px;
    }
    zs-menubar
    {
        flex-direction: column;
    }
    .zs_menu_top {
        flex-direction: column;
        max-height: calc(100vh - 100px);
        overflow-y: scroll;
    }
    .zs_menu_top zs-menu{
    }
    zs-menu a
    {
        width: 100%;
        padding: 4px 0 4px 0;

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