/* TH-MENU-LIST */
.th-menu-list {
	position: relative; 
	padding: 0em; margin: 0em;
	display: inline-block;
}


.th-menu-list .menu-ul { 
	/* nth level */
	position: absolute; 
	top: 1.1em; 
	left: 0.6em; 
	
	padding-left: 0em; 
	margin-left: 0em;

	background-color: rgba(254,254,254, 0.95); 
	box-shadow: 0.2em 0.2em 1.2em 0.5em rgba(0,0,0,0.75);
	
	white-space: nowrap; 
	list-style-type: none;  

	margin-top: 0.5em; 
	margin-left: 0em; 
}
.th-menu-list .menu-ul > .menu-li { 
	/* nth level */
	position: relative; 
	
	padding-left: 0.4em; 
	margin: 0.05em 0.05em 0.05em 0.05em;
		
	line-height: 0.95; 
	vertical-align: middle; 
	list-style-type: none; 
}


.th-menu-list:hover > .menu-ul {display: block; }

.th-menu-list .menu-ul > .menu-li > .menu-link { white-space: nowrap; text-align: left; }
.th-menu-list .menu-ul > .menu-li > .menu-link > i { display: inline-block; width: 1em; text-align: center; padding-right: 0.1em; }
.th-menu-list .menu-ul > .menu-li > .menu-link > p { display: inline-block; line-height: 1; margin: 0; padding: 0.3em 1em 0.3em 0.1em;  }

.th-menu-list .menu-ul > .menu-li {  }
.th-menu-list .menu-ul > .menu-li > .menu-ul { display: none; }
	
.th-menu-list .menu-ul > .menu-li:hover {  cursor: pointer; background-color: rgba(60,110,255, 0.2); }
.th-menu-list .menu-ul > .menu-li:hover > .menu-ul { display: block; position: absolute; z-index: 1; margin-top: 0.5em; margin-left: 0.95em;}

.th-menu-list .menu-ul > .menu-li.has-sub::before {content:' '; border-left: blue 0.2em solid; margin-left: -0.2em; margin-right: 0.2em; }
.th-menu-list .menu-ul > .menu-li.has-sub {}



/* 1st level */
.th-menu-list > .menu-ul {
	text-align: left; 
	box-shadow: none;
	position: relative; 
	top: 0; 
	left: 0; 
	background-color: transparent; 
}
.th-menu-list > .menu-ul > .menu-li {
	background-color: transparent; 
}
.th-menu-list > .menu-ul.menu-bar  > .menu-li {
	display: inline-block;
}
.th-menu-list > .menu-ul.menu-drop > .menu-li {
	min-width: 10em;
	display: block;
}

.th-menu-list > .menu-ul.menu-bar > .menu-li > .menu-ul {
	top: 1.0em; 
}
.th-menu-list > .menu-ul.menu-drop > .menu-li > .menu-ul {
	top: 1.1em; 
}





/* TH-MENU-ICON */
.th-menu-icon {position: relative; padding: 0.1em; }

.th-menu-icon .menu-ul { display: inline-block; margin-left: 0; padding-left: 0; vertical-align: middle; }
.th-menu-icon .menu-ul .menu-li { display: inline-block; margin-left: 0; position: relative; background-color: #f9f9f9; list-style-type: none; line-height: 0.95; margin-left: 1em; vertical-align: middle; }

.th-menu-icon .menu-link { display: inline-block; width: 6em; height: 6em;  box-shadow: 0 0.4em 0.4em 0px rgba(0,0,0,0.6); margin: 0.5em 0.5em; text-align: center; vertical-align: middle; padding-top: 0.4em; }
.th-menu-icon .menu-link > i { display: inline-block; font-size: 1.5em; text-align: center; vertical-align: middle; padding-top: 0.2em; }
.th-menu-icon .menu-link > p { display: block; font-size: 0.8em; text-align: center; vertical-align: middle; padding-top: 0.2em; }

.th-menu-icon .menu-li:hover { cursor: pointer; }
.th-menu-icon .menu-li:not(.has-sub):hover { transform: rotate(-5deg);  }
.th-menu-icon .menu-li:hover > .menu-ul { }

.th-menu-icon .menu-li.has-sub::before { }
.th-menu-icon .menu-li.has-sub { }
.th-menu-icon .menu-li.has-sub > a {color: darkred; font-weight: bold; }

.th-menu-icon .skip-folder {font-size: 0.6em; line-height: 1; display: block; }


.th-menu-icon .menu-link {
	-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
	clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
	background: linear-gradient(135deg, 
		rgba(128,128,128, 1),
		rgba(128,128,128, 0.6),
		rgba(128,128,128, 0.3),
		rgba(249,249,249, 1),
		rgba(249,249,249, 1),
		rgba(200,220,220, 0.5)
	);

}
.th-menu-icon .menu-li:not(.has-sub):hover .menu-link {
	background: linear-gradient(135deg, 
		pink,
		rgba(249,249,249, 1),
		rgba(200,220,220, 0.5)
	);
	border-color: red;
}


.ctrlbar_head .th-menu-list .menu-ul > .menu-li > .menu-link i,
.ctrlbar_head .th-menu-list .menu-ul > .menu-li > .menu-link p {
	color: blue;
}
.ctrlbar_head .th-menu-list .menu-ul > .menu-li:hover > .menu-link i,
.ctrlbar_head .th-menu-list .menu-ul > .menu-li:hover > .menu-link p {
	color: red;
}


.menu-funcs {background: lightyellow; margin:  0.1em 0.1em 1em 0.1em; }
.menu-funcs .menu-link {margin: 0.1em 0.2em; padding: 0.1em 0.2em; }
.menu-funcs .menu-link:nth-child(n+2) { border-left: blue thin solid;  }



@media only screen and (max-width: 768px) {
	.th-menu-list > .menu-ul > .menu-li > .menu-link > p {display: none; }
}
@media only screen and (min-width: 768px) {
	.th-menu-list > .menu-ul > .menu-li > .menu-link > p {display: inline-block; }
}
















/* -- ------------------------------------ -- */
/* -- MENUS-LIST                              */
/* -- ------------------------------------ -- */
.menus-list { position: relative; padding: 0em; margin: 0em; display: inline-block; font-size: 0.975em; }

/* nth level */
.menus-list .menu-ul { position: absolute; top: 1.1em; left: 0.5em; padding-left: 0em; margin-left: 0em; background-color: rgba(254,254,254, 0.95); box-shadow: 0.2em 0.2em 1.2em 0.5em rgba(0,0,0,0.75);white-space: nowrap; list-style-type: none;  margin-top: 0.5em; margin-left: 0em; }
.menus-list .menu-ul > .menu-li { position: relative; padding-left: 0.4em; margin: 0.05em 0.05em 0.05em 0.05em;	line-height: 0.95; vertical-align: middle; list-style-type: none; }

.menus-list:hover > .menu-ul {display: block; }

.menus-list .menu-ul > .menu-li > .menu-item { display: inline-block; white-space: nowrap; text-align: left; }
.menus-list .menu-ul > .menu-li > .menu-item > .menu-icon { display: inline-block; width: 1em; text-align: center; padding-right: 0.1em; color: black;  }
.menus-list .menu-ul > .menu-li > .menu-item > .menu-text { display: inline-block; line-height: 1; margin: 0 0.3em; padding: 0.3em 1em 0.3em 0.1em;  color: black; }

.menus-list .menu-ul > .menu-li {  }
.menus-list .menu-ul > .menu-li > .menu-ul { display: none; }
.menus-list .menu-ul > .menu-li:hover {  cursor: pointer; background-color: rgba(60,110,255, 0.2); }
.menus-list .menu-ul > .menu-li:hover > .menu-ul { display: block; position: absolute; z-index: 1; margin-top: 0.5em; margin-left: 0.95em;}

.menus-list .menu-ul > .menu-li.has-sub::before {content: ' '; border-left: blue 0.2em solid; margin-left: -0.2em; margin-right: 0.2em; }
.menus-list .menu-ul > .menu-li.has-sub {}

/* 1st level */
.menus-list > .menu-ul {text-align: left; box-shadow: none;position: relative; top: 0; left: 0; background-color: transparent; }
.menus-list > .menu-ul > .menu-li {background-color: transparent; }
.menus-list > .menu-ul.menu-bar  > .menu-li {display: inline-block;}
.menus-list > .menu-ul.menu-drop > .menu-li {min-width: 10em;display: block;}
.menus-list > .menu-ul.menu-bar > .menu-li > .menu-ul {top: 1.0em; }
.menus-list > .menu-ul.menu-drop > .menu-li > .menu-ul {top: 1.1em; }


/* -- ------------------------------------ -- */
/* -- MENUS-NAVS                              */
/* -- ------------------------------------ -- */
.menus-navs {position: relative; padding: 0em; margin: 0em;display: inline-block;  font-size: 1em; }

/* nth level */
.menus-navs .menu-ul { position: absolute; top: 1.05em; left: 0.25em; padding-left: 0em; margin-left: 0em; background-color: rgba(254,254,254, 0.95); box-shadow: 0.2em 0.2em 1.2em 0.5em rgba(0,0,0,0.75);white-space: nowrap; list-style-type: none;  margin-top: 0.5em; margin-left: 0em; }
.menus-navs .menu-ul > .menu-li { position: relative; padding: 0.1em 0.1em; padding-left: 0.1em; margin: 0.05em 0.05em 0.05em 0.05em;	line-height: 1; vertical-align: middle; list-style-type: none; }

.menus-navs:hover > .menu-ul {display: block; }

.menus-navs .menu-ul > .menu-li > .menu-item { display: inline-block; white-space: nowrap; text-align: left; padding: 0 0.2em; }
.menus-navs .menu-ul > .menu-li > .menu-item > .menu-icon { display: inline-block; width: 1.5em; text-align: center; padding-right: 0.1em; color: black; }
.menus-navs .menu-ul > .menu-li > .menu-item > .menu-text { display: inline-block; line-height: 1; color: black; }

.menus-navs .menu-ul > .menu-li {display: block; }
.menus-navs > .menu-ul > .menu-li {display: inline-block; }
.menus-navs .menu-ul > .menu-li > .menu-ul { display: none; }
.menus-navs .menu-ul > .menu-li:hover {  cursor: pointer; background-color: rgba(60,110,255, 0.2); }
.menus-navs .menu-ul > .menu-li:hover > .menu-ul { display: block; position: absolute; z-index: 1; top: 0.9em; left: 1.5em;}

.menus-navs .menu-ul > .menu-li.has-sub::before {content: ' '; border-left: red 0 solid; margin-left: -0.2em; margin-right: 0.2em;  }
.menus-navs .menu-ul > .menu-li.has-sub {}

/* 1st level */
.menus-navs > .menu-ul {text-align: left; box-shadow: none; position: relative; top: 0; left: 0; background-color: transparent; }
.menus-navs > .menu-ul > .menu-li {background-color: transparent; }
.menus-navs > .menu-ul.menu-bar  > .menu-li {display: inline-block;}
.menus-navs > .menu-ul.menu-drop > .menu-li {min-width: 10em;display: block;}
.menus-navs > .menu-ul.menu-bar > .menu-li > .menu-ul {top: 1.0em; }
.menus-navs > .menu-ul.menu-drop > .menu-li > .menu-ul {top: 1.1em; }
.menus-navs > .menu-ul > .menu-li > .menu-item > .menu-icon { width: auto; }


.menus-navs .menu-ul > .menu-type-spr {}
.menus-navs .menu-ul > .menu-type-spr > .menu-item {display: block;}
.menus-navs .menu-ul > .menu-type-spr > .menu-item > .menu-icon {display: none;}
.menus-navs .menu-ul > .menu-type-spr > .menu-item > .menu-text {width: 100%; color: black; display: block; }
.menus-navs .menu-ul > .menu-type-spr > .menu-item > .menu-text > hr { height: 2px; color: grey; width: 100%; }


/* -- ------------------------------------ -- */
/* -- MENUS-ICON                              */
/* -- ------------------------------------ -- */
.menus-icon {position: relative; padding: 0.1em; }

.menus-icon .menu-ul { display: inline-block; margin-left: 0; padding-left: 0; vertical-align: middle; }
.menus-icon .menu-ul .menu-li { display: inline-block; margin-left: 0; position: relative; background-color: #f9f9f9; list-style-type: none; line-height: 0.95; vertical-align: middle; }

.menus-icon .menu-item { display: inline-block; width: 6em; height: 6em;  box-shadow: 0 0.4em 0.4em 0px rgba(0,0,0,0.6); margin: 0.5em 0.5em; text-align: center; vertical-align: middle; padding-top: 0.4em; }
.menus-icon .menu-item > .menu-icon { display: inline-block; font-size: 2.1em; text-align: center; vertical-align: middle; padding-top: 0.2em; }
.menus-icon .menu-item > .menu-text { display: block; font-size: 0.8em; text-align: center; vertical-align: middle; padding-top: 0.2em; }

.menus-icon .menu-li:hover { cursor: pointer; }
.menus-icon .menu-li:not(.has-sub):hover { transform: rotate(-5deg);  }
.menus-icon .menu-li:hover > .menu-ul { }

.menus-icon .menu-li.has-sub::before { }
.menus-icon .menu-li.has-sub { }
.menus-icon .menu-li.has-sub > a {color: darkred; font-weight: bold; }

.menus-icon .skip-folder {font-size: 0.6em; line-height: 1; display: block; }


.menus-icon .menu-item {
	-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
	
	clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
	
	background: linear-gradient(135deg, 
		rgba(128,128,128, 1),
		rgba(128,128,128, 0.6),
		rgba(128,128,128, 0.3),
		rgba(249,249,249, 1),
		rgba(249,249,249, 1),
		rgba(200,220,220, 0.5)
	);

}
.menus-icon .menu-li:not(.has-sub):hover .menu-item {
	background: linear-gradient( 135deg, pink, rgba(249,249,249, 1), rgba(200,220,220, 0.5) );
	border-color: red;
}


.ctrlbar_head .menus-navs .menu-ul > .menu-li > .menu-item .menu-icon,
.ctrlbar_head .menus-navs .menu-ul > .menu-li > .menu-item .menu-text {color: blue; }

.ctrlbar_head .menus-navs .menu-ul > .menu-li:hover > .menu-item .menu-icon,
.ctrlbar_head .menus-navs .menu-ul > .menu-li:hover > .menu-item .menu-text {color: red;}


.menu-funcs {background: lightyellow; margin:  0.1em 0.1em 1em 0.1em; }
.menu-funcs .menu-item {margin: 0.1em 0.2em; padding: 0.1em 0.2em; }
.menu-funcs .menu-item:nth-child(n+2) { border-left: blue thin solid;  }


/* -- ------------------------------------ -- */
/* -- MENU: RESPONSIVE                        */
/* -- ------------------------------------ -- */

@media only screen and (max-width: 768px) {
	.menus-navs > .menu-ul > .menu-li > .menu-item > .menu-text {display: none; }
}
@media only screen and (min-width: 768px) {
	.menus-navs > .menu-ul > .menu-li > .menu-item > .menu-text {display: inline-block; }
}

.dir_skip .menu-type-dir > .menu-item {display: none; }

.dir_only .menu-type-app > .menu-item {display: none; }
.dir_only .menu-type-fnx > .menu-item {display: none; }

.fnx_only .menu-type-dir > .menu-item {display: none; }
.fnx_only .menu-type-app > .menu-item {display: none; }