.navtree-root{
	position: sticky;
	top: 0px;
	width: fit-content;
	padding: 12px;
	height: fit-content;
}

.nav-context{
	position: relative;
    display: flex;
    flex-wrap: wrap-reverse;
    flex-direction: row-reverse;
    align-items: flex-end;
}

.nav-content{
	min-height: 200px;
}

.nav-content-root{
	max-width: 900px;
}









.navtree-section{
	padding: 10px 15px;
	cursor: pointer;
    margin: 3px 0px;
	
	&.l1{
		background: whitesmoke;
		color: rgb(62, 62, 62);
		>.navtree-label{
			text-transform: uppercase;
			font-weight: 500;
			padding-bottom: 4px;
		}
		.l2:hover{
			color: black;
		}
	}

	&.l1.select{
		background: black;
		color: rgb(171, 171, 171);
		>.navtree-label{
			color: white;
			
		}

		.l2:hover{
			color: white;
			&.select{
				color: black;
			}
		}
	}

	&.l2.select{
		background: rgb(0, 255, 229); //linear-gradient(45deg, rgb(74, 255, 237), #00d9ff);
		// box-shadow: 0px 0px 6px #00fff07d;
		color: black;
	}

	&.l2.yellow.select{
		background: yellow;//(0, 255, 229); //linear-gradient(45deg, rgb(74, 255, 237), #00d9ff);
		// box-shadow: 0px 0px 6px #00fff07d;
		color: black;
	}
	
}