body.is-mobile-device #page-sidebar,
#page-sidebar.collapsed {
  transform: translateX(-260px);  
}
#page-sidebar.expanded {
  transform: translateX(0) !important;  
}
body.is-mobile-device #page-contents {
  margin-left: 0px;
}

.show-nav {
  float: left;
  height: 60px;
  width: 48px;
  text-align: center;
  display: none;
  line-height: 60px;
  background: rgb(47, 53, 63);
  margin-right: 12px;
  font-size: 1.5em;
  color: #fff;
  cursor: pointer;
} .show-nav i { line-height: 60px; }
body.is-mobile-device .show-nav {
  display: block;
}

#main-menu { padding: 24px 0; margin: 0; list-style: none;}

#main-menu li a {  padding: 12px 20px; color: #98a6ad; }
#main-menu li a > i { width: 26px; color: #C3C3C3; line-height: 0; font-size: 16px; position: relative; top: 3px;}

#main-menu li.menu-title { color: #98a6ad !important; padding: 0 20px; margin-bottom: 12px; display: block; font-size: .9em; text-transform: uppercase; }

ul.ui-dropmenu.vertical li { position: relative; }
li.is-active-element > a, 
li.parent-menu-item > a,
li.current-menu-item > a,
li.current-menu-root > a  { background: rgba(255,255,255,.03); color: #fff; }

#main-menu li a:hover, 
#main-menu li a:hover > i,
li.parent-menu-item > a,
li.parent-menu-item > a > i, 
li.is-active-element > a, 
li.is-active-element > a > i { color: #fff !important;  }
li.is-active-element > a:before,
li.parent-menu-item > a:before,
li.current-menu-item > a:before,
li.current-menu-root > a:before {
  display: block;
  width: 4px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background: #185ab3;
}
li.is-active-element > ul,
li.parent-menu-item > ul { background: rgba(0,0,0,.1) }
li.is-active-element > ul:before,
li.parent-menu-item > ul:before { 
display: block;
  width: 4px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background: rgba(0,0,0,.2) 
}
#main-menu li.current-menu-item > a { color: #fff; }


#main-menu .caret { background: none !important;}
#main-menu .caret:before{
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  position: relative;
  color: #9e9e9e;
  text-shadow: 1px 1px 0px rgba(0,0,0,.4);
}
#main-menu .caret.closed:before { content: "\f0d7"; top: 12px; }
#main-menu .caret.open:before { content: "\f0d8";  top: 12px; color: #d2d2d2; }

#main-menu ul.level-2 li a { padding-left: 30px !important; }
#main-menu ul.level-3 li a { padding-left: 40px !important; }
#main-menu ul.level-4 li a { padding-left: 50px !important; }




.ui-appmenu  { 
  display: inline-block;
  list-style-type: none;
  padding: 0;
  margin: 0 0 8px 0;
  zoom: 1; 
  *display: inline;   
  font-size: 1em;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor: pointer;
  text-align: left;  
  border-style: solid;
  border-width: 1px;
  -moz-border-radius: 2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  border-color: #cbcbcb; 
  background-color: #fff;
}
.ui-appmenu.compact { font-size: .9em; } 
.ui-appmenu:after { clear:both; float:none; content:"-"; height:0px; width:0px; line-height:0px; font-size:0px; display:block; visibility:hidden; }
/* All */
.ui-appmenu li { margin: 0 0 0 0; white-space:nowrap }
.ui-appmenu li ul{position:absolute;z-index:9999;min-width:100px;max-width:350px;width:auto;top:auto;left:0}
.ui-appmenu li ul li{position:relative;white-space:nowrap}
.ui-appmenu li ul li ul{top:0;left:100%}
.ui-appmenu li.hsep { height: 1px; text-indent: -9000px; background: #cbcbcb;}
.ui-appmenu .caret { display: none !important; }
.ui-appmenu a > i {
  margin-right: 6px;
  margin-top: -1px;
  font-size: 1.4rem;
  position: relative;
  float: left;
}
.ui-appmenu a > [class^="icon-"] {
  font-size: 1.2em;
  margin-top: 0px
}

/* First */
.ui-appmenu > li { float:left; position:relative; border-right:1px solid #cbcbcb;  }
.ui-appmenu > li:last-child {border:0 !important; margin-right:0 } 
.ui-appmenu > li:last-child ul{left:auto!important;right:0}
.ui-appmenu > li:last-child ul li ul{left:0;right:100%}

.ui-appmenu > li > a,
.ui-appmenu > li > span {
  color: #4e4e4e;
  text-decoration: none; 
  text-shadow: 1px 1px 0 #fff; 
  text-transform: none;
  white-space: nowrap; 
  padding: 12px; 
  display:block;
  -webkit-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
}
.ui-appmenu > li > a:hover {
  background-color: #FBFBFB;
  color: #383838;
}

.ui-appmenu > li.disabled > a, 
.ui-appmenu > li.disabled > a:hover  {
	background: #DCDCDC;
	color: #ABABAB;
	cursor:not-allowed;
}

/* Sub */
.ui-appmenu ul { 
  display: none;
  border: 1px solid #cbcbcb; 
  background-color: #fff; 
  -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.ui-appmenu > li > ul { left: -1px !important; }
.ui-appmenu > li:last-child > ul { right: -1px !important; }
  
.ui-appmenu ul li { color: #333;  }
.ui-appmenu ul li a, 
.ui-appmenu ul li span { color: #333; text-shadow: 1px 1px 0 #e1e1e1; padding: 8px 12px; display:block; text-decoration:none;}
.ui-appmenu ul li:hover { background: #eee; }
.ui-appmenu ul li:hover > a { color: #101010; text-shadow: 1px 1px 0 #fff;  }


.ui-appmenu.is-vertical {
  display: block;
}
.ui-appmenu.is-vertical li {
  display: block;
  width: 100%;
  border-right: none;
  border-bottom: 1px solid #cbcbcb;
}