/* --------------------------------------------------------------------------
   mtree - menu tree
-----------------------------------------------------------------------------*/
ul.mtree {
  opacity: 1;
  margin-left: 0;
  position:relative;
  /*padding: 1.2em;*/
}
ul.mtree ul {
  margin-left: 1em;
}
ul.mtree li {
   list-style: none;
}
ul.mtree a {
   display: block;
   text-align: right;
	padding:0px 15px 0px 0px !important;
   font-size: 12px;
   font-weight: normal;
   text-transform: uppercase;
   text-shadow:none !important;
   height: 42px;
   line-height: 42px;
   color: #333;
   background-color: @colorDef;
   border-bottom:1px solid @colorBorderLightDef;
}
ul.mtree a .mtree-icon {
   font-size:20px;
   color:#333;
	margin-left:3px;
	vertical-align:middle;
}
ul.mtree li li > a .mtree-icon {
	color: #666 !important;
	font-size: 14px;
	opacity: 0.4;	
}
ul.mtree a .mtree-icon.bg-image {
	display: inline-block;
   width:24px;
	height:24px;
	background-position : center;
	background-size: contain;
	background-repeat: no-repeat;
}
ul.mtree li li > a .mtree-icon.bg-image {
   width:18px;
	height:18px;
}
ul.mtree li.mtree-node > a {
  font-weight: normal;
  text-align: right;
}

ul.mtree a {
	position: relative;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
}

/* transit them */
ul.mtree.transit {
  background: @colorDarkerDef;
  padding: 0px;
}
ul.mtree.transit ul {
  margin-left: 0;
  border-right: 10px solid @colorDarkDef;
  padding-right: 1px;
}
ul.mtree.transit ul > li {
  font-size: .9em;
}
ul.mtree.transit li.mtree-node {
  position: relative;
}
ul.mtree.transit li.mtree-node > a:before {
  color:@fcolorDef;
  font-family:FontAwesome;
  font-family:'Font Awesome 6 Pro';
  font-size: 16px;
  position: absolute;
  left: 10px;
  height: 100%;
  /*right: 0px;*/
  transition:all 0.5s;
}
ul.mtree.transit li.mtree-open > a:first-child {
  border-bottom:none;
}
ul.mtree.transit li.mtree-open > a:before {
  content: '\f106';
  font-weight: normal;
  height:0px;
}
ul.mtree.transit li.mtree-closed > a:before {
   content: '\f107';
   height:0px;
	 font-weight: normal;
}
ul.mtree.transit ul > li:first-child {
  margin-top: 1px;
}
ul.mtree.transit ul > li {

}
ul.mtree.transit li.mtree-open > a {
  /*background: @colorDef;*/
  background: @colorDarkDef !important;
  color:@fcolorDef;
}
ul.mtree.transit li > a:hover, ul.mtree.transit li.mtree-active > a {
   color:#2B373B;
   background-color: @colorHoverDef;
	color:@fcolorDef;
}
ul.mtree.transit li.mtree-node > ul > li:last-child {
  margin-bottom: 0px;
  padding-bottom: 0px;
  /*border-bottom: 1px solid @colorBorderLightDef; */
}
ul.mtree.transit li.mtree-node:last-child > ul > li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
ul.mtree.transit a {
   padding: 0px 5px 0px 0px;
   color: @fcolorDef;
	border-bottom:1px solid @colorBorderLightDef;
}
ul.mtree.transit a.active {
   background-color:@colorActiveDef;
   color:@fcolorActiveDef;	
}
ul.mtree.transit li li > a {
  padding-left: 1.6em;
  background-color: @colorMenuDef;
  color: @fcolorMenuDef;
  border-bottom:1px solid @fcolorMenuBorderDef;
}
ul.mtree.transit li li.mtree-node > a:before {
  color: @fcolorMenuDef;
}
ul.mtree.transit a .mtree-icon {
   font-size:20px;
   color:@fcolorDef;
	margin-left:3px;
	vertical-align:middle;
}
ul.mtree.transit li li > a .mtree-icon {
  color: @fcolorMenuDef !important;
}
ul.mtree.transit li li li > a {
  padding-left: 2.4em;
}
ul.mtree.transit li li li li > a {
  padding-left: 3.2em;
}
ul.mtree.transit li li li li li > a {
  padding-left: 4em;
}

/* basic them */
ul.mtree.basic {
  background: #fff;
  padding: 0px;
}
ul.mtree.basic ul {
	margin-left: 0;
	padding-right: 5px;
	background-color: #e8e8e8;
}
ul.mtree.basic ul > li {
  font-size: .9em;
}
ul.mtree.basic li.mtree-node {
  position: relative;
}
ul.mtree.basic li.mtree-node > a:before {
  color:#333;
  font-family:FontAwesome;
  font-family:'Font Awesome 6 Pro';
  font-size: 1rem;
  position: absolute;
  left: 10px;
  height: 100%;
  transition:all 0.5s;
}
ul.mtree.basic li.mtree-open > a:first-child {
  border-bottom:none;
}
ul.mtree.basic li.mtree-open > a:before {
  content: '\f106';
  font-weight: normal;
  height:0px;
}
ul.mtree.basic li.mtree-closed > a:before {
   content: '\f107';
   height:0px;
	font-weight: normal;
}
ul.mtree.basic ul > li:first-child {
   /*margin-top: 1px;*/
}
ul.mtree.basic ul > li {

}
ul.mtree.basic li.mtree-open > a {
  color:#1995a0;
  background-color: #e8e8e8;
}
ul.mtree.basic li > a:hover, ul.mtree.basic li.mtree-active > a {
	color:#00aff0;
}
ul.mtree.basic li li > a .mtree-icon {
	color: #666 !important;
	font-size: 14px;
	opacity: 0.4;	
}
ul.mtree.basic a:hover .mtree-icon {
	color:#00aff0 !important;
}
ul.mtree.basic li.mtree-node > ul > li:last-child {
  margin-bottom: 0px;
  padding-bottom: 0px;
}
ul.mtree.basic li.mtree-node:last-child > ul > li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
ul.mtree.basic a {
	padding: 0px 5px 0px 0px !important;
	color: #333;
	background-color: #fff;
	border: none;
	border-bottom: 1px solid #eee;
	font-size: 1rem;
}
ul.mtree.basic a.active, ul.mtree.basic a.active .mtree-icon {
   color:#00aff0 !important;
   font-weight:bold;	
}
ul.mtree.basic li li > a {
  padding-left: 1.6em;
  color: #000;
  background-color:#fff;
}
ul.mtree.basic li li.mtree-node > a:before {
  color: #000;
}
ul.mtree.basic a .mtree-icon {
  color: #333 !important;
  font-size:20px;
}
ul.mtree.basic a .mtree-counter {
  color: #aaa !important;
}
ul.mtree.basic li li > a .mtree-icon {
  color: #000 !important;
}
ul.mtree.basic li li li > a {
  padding-left: 2.4em;
}
ul.mtree.basic li li li li > a {
  padding-left: 3.2em;
}
ul.mtree.basic li li li li li > a {
  padding-left: 4em;
}

/* basic2 them */
ul.mtree.basic2 {
  background: transparent;
  padding: 0px;
}
ul.mtree.basic2 ul {
	margin-left: 0;
	padding-right: 20px;
	background-color: transparent;
}
ul.mtree.basic2 ul > li {
  font-size: 1rem;
}
ul.mtree.basic2 li hr {
	border: none;
	height: 1px;
	background-color: #ccc;	
}
ul.mtree.basic2 li.mtree-node {
  position: relative;
}
ul.mtree.basic2 li.mtree-node > a:before {
  color:#333;
  font-family:FontAwesome;
  font-family:'Font Awesome 6 Pro';
  font-size: 1rem;
  position: absolute;
  left: 10px;
  height: 100%;
  transition:all 0.5s;
}
ul.mtree.basic2 li.mtree-open > a:first-child {
  border-bottom:none;
}
ul.mtree.basic2 li.mtree-open > a:before {
  content: '\f106';
  font-weight: normal;
  height:0px;
}
ul.mtree.basic2 li.mtree-closed > a:before {
   content: '\f107';
   height:0px;
	font-weight: normal;
}
ul.mtree.basic2 ul > li:first-child {
   /*margin-top: 1px;*/
}
ul.mtree.basic2 ul > li {

}
ul.mtree.basic2 li.mtree-open > a {
  color:#1995a0;
  background-color: transparent;
}
ul.mtree.basic2 li > a:hover, ul.mtree.basic2 li.mtree-active > a {
	background-color: #ddd;
	color:#000;
	font-weight: bold;
}
ul.mtree.basic2 li li > a .mtree-icon {
	color: #666 !important;
	font-size: 14px;
	opacity: 0.4;	
}
ul.mtree.basic2 a:hover .mtree-icon {
	color:#000 !important;
}
ul.mtree.basic2 li.mtree-node > ul > li:last-child {
  margin-bottom: 0px;
  padding-bottom: 0px;
}
ul.mtree.basic2 li.mtree-node:last-child > ul > li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
ul.mtree.basic2 a {
	padding: 0px 5px 0px 0px !important;
	color: #333;
	background-color: transparent;
	border: none;
	font-size: 0.9rem;
}
ul.mtree.basic2 a.active, ul.mtree.basic2 a.active .mtree-icon {
   color:#00aff0 !important;
   font-weight:bold;	
}
ul.mtree.basic2 li li > a {
	font-size: 0.9rem;
  padding-left: 1.6em;
  color: #666;
  background-color:transparent;
}
ul.mtree.basic2 li li.mtree-node > a:before {
  color: #000;
}
ul.mtree.basic2 a .mtree-icon {
  color: #333 !important;
  font-size:0.9rem;
}
ul.mtree.basic2 a .mtree-counter {
  color: #aaa !important;
}
ul.mtree.basic2 li li > a .mtree-icon {
  color: #000 !important;
}
ul.mtree.basic2 li li li > a {
  padding-left: 2.4em;
}
ul.mtree.basic2 li li li li > a {
  padding-left: 3.2em;
}
ul.mtree.basic2 li li li li li > a {
  padding-left: 4em;
}

/* dark them */
ul.mtree.dark {
  background-color: #272634;
  padding: 0px;
}
ul.mtree.dark ul {
  margin-left: 0;
  padding-right: 5px;
  background-color:#131219;
}
ul.mtree.dark ul > li {
  font-size: 13px;
}
ul.mtree.dark li.mtree-node {
  position: relative;
}
ul.mtree.dark li.mtree-node > a:before {
  color:#b3b1d5;
  font-family:FontAwesome;
  font-family:'Font Awesome 6 Pro';
  font-size: 16px;
  position: absolute;
  left: 10px;
  height: 100%;
  /*right: 0px;*/
  transition:all 0.5s;
}
ul.mtree.dark li.mtree-open > a:first-child {
  border-bottom:none;
}
ul.mtree.dark li.mtree-open > a:before {
  content: '\f107';
  font-weight: normal;
  height:0px;
    transform: rotatex(180deg);
    /* transform: scale(1); */
    /* position: absolute; */
    margin-top: 42px;
}
ul.mtree.dark li.mtree-closed > a:before {
   content: '\f107';
   height:0px;
	font-weight: normal;
}
ul.mtree.dark ul > li:first-child {
   margin-top: 1px;
}
ul.mtree.dark ul > li {
   opacity:1 !important;
}
ul.mtree.dark li.mtree-open > a {
  color:#b3b1d5;
}
ul.mtree.dark li > a:hover {
	color:#fff;
	background-color:#16151d;
}
ul.mtree.dark li.mtree-active > a {
	color:#fff;
	background-color:#16151d;
}
ul.mtree.dark a:hover .mtree-icon {
	color:#fff !important;
   transform-origin: top center;
   animation-name: anim-swing;
   animation-duration: 2s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;	
}
ul.mtree.dark li.mtree-node > ul > li:last-child {
  margin-bottom: 0px;
  padding-bottom: 0px;
}
ul.mtree.dark li.mtree-node:last-child > ul > li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
ul.mtree.dark a {
   padding: 0px 5px 0px 0px;
   color: #b3b1d5;
	background-color: #272634;
	border:none;
	border-bottom:1px solid #131219;
	height:46px;
	line-height:46px;
}
ul.mtree.dark a.active {
   color:#fff;
   background-color:#000;	
}
ul.mtree.dark li li > a {
  padding-left: 1.6em;
  color: #b3b1d5;
  background-color:#1b1a24;
}
ul.mtree.dark li li.mtree-node > a:before {
  color: #b3b1d5;
}
ul.mtree.dark a .mtree-icon {
  color: #b3b1d5 !important;
  font-size:20px;
  width:30px !important;
  vertical-align:middle;
}
ul.mtree.dark a .mtree-counter {	
    opacity: 0;
    position: absolute;
    left: 32px;
    height: 16px;
    /* margin-top: 11px; */
    line-height: 16px;
    min-width: 24px;
    border-radius: 0px;
    text-align: center;
    /* padding: 0px 5px 0px 5px; */
    font-size: 0.7rem;
    background-color: #2196F3;
    color: #000 !important;
    top: 50%;
    transform: translateY(-50%);
}
ul.mtree.dark a .mtree-counter.mtree-counter-bg {
	background-color: rgba(0,0,0,0.5);	
}
ul.mtree.dark li li > a .mtree-icon {
  color: #b3b1d5 !important;
  font-size: 14px;
  opacity:0.3;
}
ul.mtree.dark li li li > a {
  padding-left: 2.4em;
}
ul.mtree.dark li li li li > a {
  padding-left: 3.2em;
}
ul.mtree.dark li li li li li > a {
  padding-left: 4em;
}
@media screen and (max-width:1024px) {
   ul.mtree a {
      font-size: 14px;
   }
}



/* normal them */
ul.mtree.normal {
  background-color: #fff;
  padding: 0px;
}
ul.mtree.normal ul {
  margin-left: 0;
  padding-right: 5px;
  background-color:#ddd;
}
ul.mtree.normal ul > li {
  font-size: 13px;
}
ul.mtree.normal li.mtree-node {
  position: relative;
}
ul.mtree.normal li.mtree-node > a:before {
  color:#000;
  font-family:FontAwesome;
  font-family:'Font Awesome 6 Pro';
  font-size: 16px;
  position: absolute;
  left: 10px;
  height: 100%;
  /*right: 0px;*/
  transition:all 0.5s;
}
ul.mtree.normal li.mtree-open > a:first-child {
  border-bottom:none;
}
ul.mtree.normal li.mtree-open > a:before {
   content: '\f107';
   font-weight: normal;
   height:0px;
   transform: rotatex(180deg);
   /* transform: scale(1); */
   /* position: absolute; */
   margin-top: 42px;
}
ul.mtree.normal li.mtree-closed > a:before {
   content: '\f107';
   height:0px;
	font-weight: normal;
}
ul.mtree.normal ul > li:first-child {
  margin-top: 1px;
}
ul.mtree.normal ul > li {
   opacity:1 !important;
}
ul.mtree.normal li.mtree-open > a {
  color:#00aff0;
}
ul.mtree.normal li > a:hover {
	color:#00aff0;
	background-color:#fafafa;
}
ul.mtree.normal li.mtree-active > a {
	color:#00aff0;
}
ul.mtree.normal a:hover .mtree-icon {
	color:#000 !important;
   transform-origin: top center;
   animation-name: anim-swing;
   animation-duration: 2s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;	
}
ul.mtree.normal li.mtree-node > ul > li:last-child {
  margin-bottom: 0px;
  padding-bottom: 0px;
}
ul.mtree.normal li.mtree-node:last-child > ul > li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
ul.mtree.normal a {
   padding: 0px 5px 0px 0px;
   color: #000;
	background-color: #fff;
	border:none;
	height:46px;
	line-height:46px;
}
ul.mtree.normal a.active {
	color:#00aff0;
	font-weight:bold;
	font-size: 16px;
}
ul.mtree.normal li li > a {
  padding-left: 1.6em;
  color: #000;
  background-color:#eee;
}
ul.mtree.normal li li.mtree-node > a:before {
  color: #000;
}
ul.mtree.normal a .mtree-icon {
  color: #444 !important;
  font-size:20px;
  width:30px !important;
  vertical-align:middle;
}
ul.mtree.normal a .mtree-counter {
  color: #aaa !important;
}
ul.mtree.normal li li > a .mtree-icon {
  color: #444 !important;
}
ul.mtree.normal li li li > a {
  padding-left: 2.4em;
}
ul.mtree.normal li li li li > a {
  padding-left: 3.2em;
}
ul.mtree.normal li li li li li > a {
  padding-left: 4em;
}
@media screen and (max-width:1024px) {
   ul.mtree a {
      font-size: 14px;
   }
}