* AdminLTE v2.4.15
* Author: Colorlib
* Support: <https://github.com/ColorlibHQ/AdminLTE/issues>
* Repository: git://github.com/ColorlibHQ/AdminLTE.git
* License: MIT <http://opensource.org/licenses/MIT>
.wrapper {
height: 100%;
position: relative;
overflow-x: unset;
overflow-y: unset;
* Component: Sidebar
* ------------------
.main-sidebar {
position: fixed;
max-height: 100%;
height: 100%;
top: 0;
left: 0;
padding-top: 50px;
min-height: 100%;
/*width: 320px;*/
z-index: 810;
-webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
border-right: 1px solid #d2d6de;
background-color: #f9fafc;
@media (max-width: 767px) {
.main-sidebar {
padding-top: 100px;
@media (max-width: 767px) {
.main-sidebar {
-webkit-transform: translate(-555px, 0);
-ms-transform: translate(-555px, 0);
-o-transform: translate(-555px, 0);
transform: translate(-555px, 0);
@media (min-width: 768px) {
.sidebar-collapse .main-sidebar {
-webkit-transform: translate(-320px, 0);
-ms-transform: translate(-320px, 0);
-o-transform: translate(-320px, 0);
transform: translate(-320px, 0);
@media (max-width: 767px) {
.sidebar-open .main-sidebar {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
.sidebar {
/*padding-bottom: 10px;*/
/*.sidebar-form input:focus {
border-color: transparent;
/*.sidebar-menu {
list-style: none;
margin: 0;
padding: 0;
.sidebar-menu > li {
position: relative;
/*margin: 0;
padding: 0;*/
.sidebar-menu > li > a {
/*padding: 12px 5px 12px 15px;*/
display: block;
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .glyphicon,
.sidebar-menu > li > a > .ion {
width: 20px;
.sidebar-menu > li .label,
.sidebar-menu > li .badge {
margin-right: 5px;
.sidebar-menu > li .badge {
margin-top: 3px;
.sidebar-menu li.header {
padding: 10px 25px 10px 15px;
/*font-size: 12px;*/
.sidebar-menu li > a > .fa-angle-left,
.sidebar-menu li > a > .pull-right-container > .fa-angle-left {
width: auto;
height: auto;
padding: 0;
margin-right: 10px;
-webkit-transition: transform 0.5s ease;
-o-transition: transform 0.5s ease;
transition: transform 0.5s ease;
.sidebar-menu li > a > .fa-angle-left {
position: absolute;
top: 50%;
right: 10px;
margin-top: -8px;
.sidebar-menu .menu-open > a > .fa-angle-left,
.sidebar-menu .menu-open > a > .pull-right-container > .fa-angle-left {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
.sidebar-menu .active > .treeview-menu {
display: block;
* Component: Sidebar Mini
@media (min-width: 768px) {
.sidebar-mini.sidebar-collapse .content-wrapper,
.sidebar-mini.sidebar-collapse .right-side,
.sidebar-mini.sidebar-collapse .main-footer {
margin-left: 50px !important;
z-index: 840;
.sidebar-mini.sidebar-collapse .main-sidebar {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
width: 50px !important;
z-index: 850;
.sidebar-mini.sidebar-collapse .sidebar-menu > li {
position: relative;
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
margin-right: 0;
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span {
border-top-right-radius: 4px;
.sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.treeview) > a > span {
border-bottom-right-radius: 4px;
.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
padding-top: 5px;
padding-bottom: 5px;
border-bottom-right-radius: 4px;
/*.sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .info,*/
.sidebar-mini.sidebar-collapse .sidebar-form,
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span,
.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu,
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right,
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span > .pull-right,
.sidebar-mini.sidebar-collapse .sidebar-menu li.header {
display: none !important;
-webkit-transform: translateZ(0);
.sidebar-mini.sidebar-collapse .main-header .logo {
width: 50px;
.sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini {
display: block;
margin-left: -15px;
margin-right: -15px;
font-size: 18px;
.sidebar-mini.sidebar-collapse .main-header .logo > .logo-lg {
display: none;
.sidebar-mini.sidebar-collapse .main-header .navbar {
margin-left: 50px;
@media (min-width: 768px) {
.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
display: block !important;
position: absolute;
width: 400px;
left: 50px;
.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > span {
top: 0;
margin-left: -3px;
padding: 12px 5px 12px 20px;
background-color: inherit;
.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container {
position: relative !important;
float: right;
width: auto !important;
/*left: 180px !important;*/
left: 300px !important;
top: -22px !important;
z-index: 900;
.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container > .label:not(:first-of-type) {
display: none;
.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
top: 44px;
margin-left: 0;
.sidebar-expanded-on-hover .main-footer,
.sidebar-expanded-on-hover .content-wrapper {
margin-left: 50px;
.sidebar-expanded-on-hover .main-sidebar {
box-shadow: 3px 0 8px rgba(0, 0, 0, 0.125);
.sidebar-menu /*,
.main-sidebar .user-panel,
.sidebar-menu > li.header*/ {
white-space: nowrap;
overflow: hidden;
.sidebar-menu:hover {
overflow: visible;
/*.sidebar-form,
.sidebar-menu > li.header {
overflow: hidden;
text-overflow: clip;
.sidebar-menu li > a {
position: relative;
.sidebar-menu li > a > .pull-right-container {
position: absolute;
right: 10px;
top: 50%;
margin-top: -7px;
* Component: Nav
* --------------
/*.nav > li > a:hover,
.nav > li > a:active,
.nav > li > a:focus {
color: #444;
background: #f7f7f7;
.treeview-menu {
display: none;
list-style: none;
padding: 0;
margin: 0;
/*padding-left: 5px;*/
.treeview-menu .treeview-menu {
padding-left: 20px;
/*.treeview-menu > li {
margin: 0;
.treeview-menu > li > a {
padding: 5px 5px 5px 15px;
display: block;
/*font-size: 14px;*/
.treeview-menu > li > a > .fa,
.treeview-menu > li > a > .glyphicon,
.treeview-menu > li > a > .ion {
width: 20px;
.treeview-menu > li > a > .pull-right-container > .fa-angle-left,
.treeview-menu > li > a > .pull-right-container > .fa-angle-down,
.treeview-menu > li > a > .fa-angle-left,
.treeview-menu > li > a > .fa-angle-down {
width: auto;
/*.treeview > ul.treeview-menu {
overflow: hidden;
height: auto;
padding-top: 0px !important;
padding-bottom: 0px !important;
.treeview.menu-open > ul.treeview-menu {
overflow: visible;
height: auto;
.overflow-auto {
overflow: auto;
.services-bar-closed {
overflow: auto !important;
height: 500px !important;