@charset "UTF-8";
:root {
    --miheight: 45px;
    --mifntheight: 18px;
/*
    --nbclr: white;
    --nbbgr: #444;
    --mmclr: white;
    --mmbgr: #444;
    --mmhclr: #666;
    --mmhbgr: white;
*/
}

/*
main {
    margin-top: 40px;
    padding: 15px;
}

.navbar {
    color: gold;
    background: gray;
    margin: 0;  
    padding: 0;
    height: 40px;
    width: 100%;
    position: fixed;
    overflow: hidden;
    top: 0; left: 0;
    font-size: 20px;
    cursor: pointer;
    z-index: 1000;
}
*/
.mobmenu {
    display: inline-block;
    /*display: none;*/
    position: fixed;
    color: var(--mmclr);
    background: var(--mmbgr);
    top: 0px;
    left: -200px;
    width: 200px;
    height: 100%;
    font-size: var(--mifntheight);
    text-decoration: none;
    z-index: 2000;
    overflow: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.mobmenu.togglemenu {
    left: -0px;
}
#mainwrapper,
.navbar {
    filter: none;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
}
#mainwrapper.togglemenu,
.navbar.togglemenu {
    filter: grayscale(70%) blur(2px);
    -webkit-transform: translateX(200px);
    -moz-transform: translateX(200px);
    transform: translateX(200px);
}

.mobmenu::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/*
.container {
    overflow-y: scroll;
    scrollbar-width: none;  Firefox 
    -ms-overflow-style: none;  Internet Explorer 10+
}
.container::-webkit-scrollbar { WebKit
    width: 0;
    height: 0;
}
*/

.mobmenu ul, .submenu ul {
    list-style: none;
}
.mobmenu a {
    display: block;    
    color: var(--mmclr);
    line-height: var(--miheight);
    text-decoration: none;
}

.submenu ul {
    display: none;
    padding-left: 10px;
}

.mitem a, .submenu a {
    padding: 4px 0 4px 15px;
    color: var(--mmclr);
    background-color: var(--mmbgr);
}
.mitem a:hover, .submenu a:hover {
    color: var(--mmhclr);
    background-color: var(--mmhbgr);
}

.sitem a {
    color: var(--mmsclr);
    background-color: var(--mmsbgr);
}

.sitem a:hover {
    color: var(--mmhclr);
    background-color: var(--mmhbgr);
}

.mask-content {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
}
.mask-content.togglemenu {
    display: block;
}