/* NAV CSS */

.sideNav ::-webkit-scrollbar {
  width: 10px;
}

.sideNav ::scrollbar {
  width: 10px;
}

.sideNav ::-webkit-scrollbar-track {  background: var(--background-extra-muted); }

.sideNav ::scrollbar-track {  background: var(--background-extra-muted); }
 
.sideNav ::-webkit-scrollbar-thumb {  background: var(--background-muted); }
.sideNav ::scrollbar-thumb {  background: var(--background-muted); }

.sideNav ::-webkit-scrollbar-thumb:hover {  background: var(--background); }
.sideNav ::scrollbar-thumb:hover {  background: var(--background); }

.sideNav {
	scrollbar-color: var(--highlight-light) var(--background-muted);
}

.wffNav .navBox .navAction {
	display: none;
}

.wffNav .navBox:hover .navAction i {
    box-shadow: 0px 0px 10px 4px var(--background-muted);
    background-color: var(--background-muted);
}

.wffNav .navBox:hover .navAction {
	display: block;
    /* background-color: var(--background); */
    color: var(--highlight);
	padding-left: 8px;
    padding-right: 8px;
}

.navMenu {
	animation: dropdownpopup 0.2s forwards;
    position: fixed;
    z-index: 999999;
	background-color: var(--background);
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px var(--highlight);
    transition: max-height 0.4s, opacity 0.15s;
    overflow-y: hidden;
    font-weight: normal;
    transform-origin: top;
    text-align: left;
    font-size: 12pt;
    color: var(--text);
}

.navMenu table {
	margin: 8px;
}

.wffNav .dynNavCont {
	max-height: 100%;
}


.navMenuItem td {
	padding: 3px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.navMenuItem {
	vertical-align: middle;
}

.navMenuItem:hover {
    background-color: var(--highlight);
    color: var(--fore-highlight);
}

.navMenuSelected {
	background-color: var(--highlight);
	border: 1px solid var(--border-color);
	color: var(--fore-highlight);
}

.navMenuItem hr {
    line-height: 1px;
    margin: 0px;
}

.navMenuRow {
	font-weight: normal;
	cursor: pointer;
}

.navMenuRow:hover {
	font-weight: normal !important;
}

.wffNav .dynNav .navItem {
		padding: 0px;
		margin-left: 15px;
/*		width: calc(100% - 25px); */
		position: relative;
		/* overflow: hidden; */
	}
	
.wffNav .dynNav .navItem:hover {
	}
	
.wffNav .dynNav > .navAlert > .navBox {
		color: var(--assignment) !important;
	}
	
.wffNav .navSelected > .navBox {
		background-color: var(--background);
		color: var(--text);
		opacity: 1;
	}
	
.wffNav {
    	position: fixed;
    	margin-left: 0px;
    	z-index: 9990;
    	background-color: var(--background-muted);
		padding: 10px;
		width: 300px;
		border-radius: 15px;
	/*	border-right: 1px solid #dfdfdf; */
	}
	
.wffNav .dynNavCont {
		overflow-y: scroll;
		height: auto;
		scrollbar-width: thin;
		position: relative;
		padding-right: 5px;	
	}
	
.wffNav .dynNav {
		list-style: none;
		cursor: pointer;
		margin: 0px;
    	padding: 0px;
    	transition: height 0.25s;
    	overflow-y: hidden;
    	height: auto;
	}
	
.wffNav .navBox {
		width: calc(100% - 10px);
		padding: 4px;
		font-weight: normal;
		display: inline-block;		
	}
	
.wffNav .navBox:hover {
		background-color: var(--background-extra-muted);
		color: var(--text);
		text-decoration: none;
		border-bottom: 1px solid transparent;
		border: none;
	}
	
.wffNav .navExpanded {
		font-weight: bold;
	}
	
.wffNav  .dynNav .hasChildren::before {
	    content: '\25B6';
	    position: absolute;
	    margin-left: -1.1em;
	    margin-top: 4px;
		color: var(--text-muted);
    	font-size: 0.8em;
    	padding-top: 0.2em;
    	opacity: 0.7;
    }

.wffNav .dynNav .hasDrilldown::before {
	    content: '\01C1';
	    font-weight: bold;
	    position: absolute;
	    margin-left: -1.1em;
	    margin-top: 4px;
	    color: gray;
	}