/* скрываем панель админа на маленьких экранах */
@media (max-width: 768px) {
	#panel-wrapper {
		display: none;
	}
	ul.breadcrumb {display:none;} 
	#mainmenu {display:none;}
	#header {overflow:hidden; height:55px; visibility: hidden;}
}
#sidebarmenu ::-moz-selection {background:#3B4753 !important;}
#sidebarmenu ::selection {background:#3B4753 !important;}
#sidebarmenu a:active, #sidebarmenu a:focus, #topbar a:active, #topbar a:focus {outline: none;}


/* Левый сайдбар с основной навигацией */
	.sidebarmenu-shadow {
		position: fixed; z-index:7776; top:0; left:0; width: 100%; height: 100%;
		background:#000; opacity:0.7;
	}
	#sidebarmenu { padding-top:55px;
		position: fixed; z-index:7777; top:0; left:0; 
		overflow: hidden; width: 80%; min-width: 240px; max-width: 300px; height: 100%;  
		background:#3B4753; 
		box-shadow:0 0 10px #000;
	}
	.sidebarmenu-wrap-1 {
		overflow: hidden;  height: 100%; width:110%;
	}
	.sidebarmenu-wrap-2 {
		overflow: scroll; height: 100%; width:100%;
	}
    .sidebarmenu-wrap-3 {overflow:hidden;}
	
	#sidebarmenu ul { padding:0; margin:0; }
	#sidebarmenu ul li {
		display: block; width:150%;
	}
	#sidebarmenu ul li a {
		display: block; white-space: nowrap;
		float:left;
		/*position: absolute; width:100%; overflow: hidden;*/
        width:70%; height:47px; overflow: hidden;
		color: #ccc;
		padding: 10px 10px 10px 20px;
		font-size: 18px;
		border-bottom: 1px solid #2A333B;
		border-top: 1px solid #4c555d;
		text-shadow: 0px -1px 0 #000;
	}
	/* иконка для разворачивания */
	#sidebarmenu ul li span.toggle {
		display: inline-block; 
		position:relative; left:-20%; margin:1px 0 0 -20px;
		background:transparent; color:#fff;
        font-size: 18px; text-align: center; line-height: 50px;
		right: 0px;
		width: 88px;
		height: 46px;
	}

	#sidebarmenu ul li span.toggle:hover { color:#aaa; cursor:pointer; }
	#sidebarmenu ul li span.toggle i {
		/*-webkit-transition: all 0.1s ease-out 0.3s;*/
		/*-moz-transition: all 0.1s ease-out 0.3s;*/
		/*-o-transition: all 0.1s ease-out 0.3s;*/
		transition: all 0.5s ease-out 0.1s;
	}
	#sidebarmenu ul li span.toggle i.open { display: block;
		transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}


	#sidebarmenu ul li a:hover, #sidebarmenu ul li.active a { background:#3B4753; color:#fff; text-decoration:none;}
    #sidebarmenu ul li.active a {border-bottom:0;}
    #sidebarmenu ul.submenu { display:none; overflow:hidden; background:#3a444b; box-shadow:-5px 0 7px #111 inset; }
    #sidebarmenu ul li.active ul.submenu {display:block;}
    #sidebarmenu ul.submenu li a { padding: 10px 10px 10px 35px; color:#bbb; background:transparent; text-align:left; border-top:1px solid #3B4753;} /* #2A333B */
    #sidebarmenu ul.submenu li:first-child a {border-top: none}
    #sidebarmenu ul.submenu li:last-child {clear:both}






/* Верзняя панель и анимированная иконка  */
#topbar {
  position:fixed; z-index:7778; top:0; left:0; height:56px; width:100%; overflow: hidden;
  /*box-shadow: 0px 0 10px #000;*/
}

#topbar .user-wrap {
	/*background: #3B4753;*/
	/*background:#2a3642;*/
	position: fixed;
	top: 0;
	right: 0;
	width:auto;
	min-width: 50px;
	max-width:30%;
	white-space: nowrap;
	height: 50px;
	padding-right:10px;
	font-size: 14px;
}
#topbar .user-button {color:#fff; text-decoration: none;}
#topbar .user-button:hover, #topbar .user-button:active {color:#aaa; text-decoration: none;}

#topbar .user-login-link {color:#fff;width:50px; text-align:center; text-decoration: none;}
#topbar .user-login-link:hover, #topbar .user-login-link:active {color:#aaa; text-decoration: none;}

#topbar .topbar-title {
    font-size: 22px;
}
#topbar .topbar-title a {color:#fff; text-decoration: none}
#topbar .topbar-title a:hover {color:#fff; text-decoration: none}

.layout__state {
  position: absolute;
  left: -5000px;
}
.topbar_header { 
  height: 56px;
  background:#3B4753; 
  color: #fff;
  font-size: 21px;
  font-family: Arial;
  line-height: 56px;
  font-weight: 300;
  transition:all 0.3s linear;
}
.topbar_header_dark {
  background:#2a3642;
}
.sidebar__trigger {
  position: relative;
  float: left;
  width: 56px;
  height: 56px;
  margin: 0 8px 0 0;
  vertical-align: top;
  cursor: pointer;
}
.sidebar__trigger:hover {
  background: rgba(255,255,255,0.05);
}
.sidebar__bar {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 24px;
  height: 2px;
  margin: -1px 0 0;
  background: #fff;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -o-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
  -webkit-transition: 0.3s linear;
  -moz-transition: 0.3s linear;
  -o-transition: 0.3s linear;
  -ms-transition: 0.3s linear;
  transition: 0.3s linear;
}
.sidebar__bar:before,
.sidebar__bar:after {
  content: '';
  position: absolute;
  top: -7px;
  right: 0;
  width: 24px;
  height: 2px;
  background: #fff;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -o-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
  -webkit-transition: 0.3s linear;
  -moz-transition: 0.3s linear;
  -o-transition: 0.3s linear;
  -ms-transition: 0.3s linear;
  transition: 0.3s linear;
}
.sidebar__bar:after {
  top: 7px;
}
/* трансформация в стрелочку */
.layout__state:checked ~ .topbar_header .sidebar__bar {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  bacground: #fcc;
}
.layout__state:checked ~ .topbar_header .sidebar__bar:before,
.layout__state:checked ~ .topbar_header .sidebar__bar:after {
  content: '';
  top: -5px;
  right: -3px;
  width: 16px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.layout__state:checked ~ .topbar_header .sidebar__bar:after {
  top: 5px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


/* трансформация в крестик */
.layout__state:checked ~ .topbar_header .sidebar__bar_close {
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
  bacground: #fcc;
}
.layout__state:checked ~ .topbar_header .sidebar__bar_close:before,
.layout__state:checked ~ .topbar_header .sidebar__bar_close:after {
  content: '';
  top: 0px;
	right: 0px;
	width: 24px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}


/* трансформация в звёздочку */
.layout__state:checked ~ .topbar_header .sidebar__bar_star {
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
  bacground: #fcc;
}
.layout__state:checked ~ .topbar_header .sidebar__bar_star:before,
.layout__state:checked ~ .topbar_header .sidebar__bar_star:after {
  content: '';
  top: 0px;
	right: 0px;
	width: 24px;
  -webkit-transform: rotate(-120deg);
  -moz-transform: rotate(-120deg);
  -o-transform: rotate(-120deg);
  -ms-transform: rotate(-120deg);
  transform: rotate(-120deg);
}
.layout__state:checked ~ .topbar_header .sidebar__bar_star:after {
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  transform: rotate(-60deg);
}