/*-------------------------------------------------
Main sidebar layout
-------------------------------------------------*/
#sidebar-navigation
{
  	position: sticky;
  	top: 50px;
  	left: 0px;
  	width: 300px;
  	height: calc(100vh - var(--nav-bar-height-full));
  	background-color: var(--sidebar-background);
  	background-color: transparent;
 	color: var(--sidebar-left-text);
}

#sidebar-navigation.extended
{
  	height: calc(100vh - var(--nav-bar-height));
}

#sidebar-navigation-background
{
  	position: fixed;
  	bottom: 0;
  	left: 0px;
  	height: calc(100% - var(--3dportal-bar-height));
  	width: 300px;
	background-color: var(--sidebar-background);
  	margin-bottom: 0;
}

#sidebar-navigation-background-gap
{
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 300px;
  	height: 16px;
  	background-color: var(--sidebar-background);
}

@media (max-width: 960px)
{
  	#sidebar-navigation
  	{
    	width: 0px;  	
  	}
  
   	.menu-mode #sidebar-navigation
  	{
    	width: 100%;  	
  	}
  
  	#sidebar-navigation-background,
  	#sidebar-navigation-background-gap
  	{
      	width: 100%;
    	/*display: none;*/
  	}
}


/*-------------------------------------------------
Tab menu
-------------------------------------------------*/
#sidebar-navigation-menu
{
  	margin: 10px;
  	margin-top: 0;
  	margin-left: 16px;
  	border-bottom: 2px solid var(--sidebar-tab);
  	display: none;
}

@media (max-width: 960px)
{
    #sidebar-navigation-menu
    {
        display: block;
    }
}

#sidebar-navigation-menu button
{
  	color: var(--header-link);
  	border: 0;
  	background: transparent;
  	height: 45px;
  	padding: 16px;
  	padding-right: 0px;
  	padding-left: 0;
  	padding-top: 12px;
  	margin-right: 24px;
  	position: relative;
  	cursor: pointer;
  	transition: color 0.13s ease-in-out;
}

#sidebar-navigation-menu button.current,
#sidebar-navigation-menu button:hover
{
  	color: var(--header-link-hover);
}

#sidebar-navigation-menu span
{
  	position: absolute;
  	background-color: var(--sidebar-tab-current);	
  	height: 2px;
  	width: 100%;
  	bottom: -2px;
  	display: block;
  	z-index: 2;
  	opacity: 0;
  	transition: opacity 0.13s ease-in-out;
}


#sidebar-navigation-menu button.current span
{
  	opacity: 1;
}


/*-------------------------------------------------
Sidebar content
-------------------------------------------------*/
#sidebar-navigation a,
#sidebar-navigation a:hover,
#sidebar-navigation a:link,
#sidebar-navigation a:visited,
#sidebar-navigation a:focus
{
  	text-decoration: none;
}

#sidebar-navigation p
{
  	color: var(--sidebar-link-hover);
}

#sidebar-navigation hr
{
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 6px;
    margin-bottom: 6px;
    height: 2px;
    border: 0;
    background-color: var(--sidebar-border-light);
}

#sidebar-navigation h2
{
    color: var(--sidebar-title);
    font-size: 18px;
  	margin: 0;
  	padding: 10px;
  	padding-left: 16px;
}

#sidebar-navigation h3
{
    text-transform: uppercase;
    color: var(--sidebar-title);
    font-size: 13px;
  	margin: 0;
  	padding: 10px;
    padding-bottom: 0px;
  	padding-left: 16px;
}

#sidebar-navigation .header
{
  	height: 52px;
	border-bottom: 2px solid var(--sidebar-border-light);
  	color: var(--sidebar-title);
    display: flex;
    align-items: center;
    justify-content: left;
    box-sizing: border-box;
  	font-size: 14px;
  	font-weight: 700;
  	line-height: 21px;
}

#sidebar-navigation .header svg
{
  	display: inline-block;
  	pointer-events: none;
  	fill: currentColor;
  	width: 18px;
  	height: 18px;
  	margin: 0px 12px 0px 24px;
}

#page-tree-body
{
    display: block;
    margin-right: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - var(--nav-bar-height-full) - 196px);
}

#page-tree-body.extended
{
  	height: calc(100vh - var(--nav-bar-height) - 196px);
}

body.menu-mode #page-tree-body
{
    height: calc(100vh - var(--nav-bar-height-full) - 68px);
}

body.menu-mode #page-tree-body.extended
{
  	height: calc(100vh - var(--nav-bar-height) - 74px);
}

@media (max-width: 960px)
{
    #sidebar-navigation hr
    {
        display: none;
    }
  
    #sidebar-navigation h2,
  	#sidebar-navigation h3
    {
        display: none;
    }
}

/*-------------------------------------------------
Menu
-------------------------------------------------*/

#menu-navigation
{
  	padding: 16px;
  	padding-top: 0;
  	display: none;
}

#menu-navigation h4
{
  	color: var(--sidebar-title);
  	font-size: 20px;
  	margin: 0;
  	margin-top: 12px;
  	margin-bottom: 4px;
}

#menu-navigation a
{
  	color: var(--sidebar-link);
  	font-size: 16px;
  	display: block;
  	margin-left: 12px;
  	padding-bottom: 4px;
  	transition: color 0.13s ease-in-out;
}

#menu-navigation a:hover
{
  	color: var(--sidebar-link-hover);
}


@media (max-width: 960px)
{
    #menu-navigation,
  	#menu-search,
  	#menu-tree
    {
        display: none;
    }
  
    body.menu-mode #menu-navigation.current,
  	body.menu-mode #menu-search.current,
  	body.menu-mode #menu-tree.current
    {
        display: block;
    }
  
  	#menu-navigation
  	{
    	height: calc( 100% - 84px);
      	overflow-y: auto;
      	margin-right: 8px;  
  	}
}