/* global */
html, body { height: 100%; margin: 0; }
a { TEXT-DECORATION: none; }
ul,li,form,dd,dl,dt,p,a,span,h1,h2,h3,h4,h5,figure{ margin:0; padding:0px;list-style-type:none;}
.app { height: 100%; display: flex; flex-direction: column; }
.header { height: 56px; }
.footer { height: 40px; }
.main { flex:1; display:flex; overflow:hidden; position:relative; }

/* content */
.content { flex:1; padding:16px; overflow:auto; }

/* mobile */
@media(max-width:767.98px){.sidebar{display:none;}}
/* sidebar */
.sidebar {
    width: 240px;
    background: #212529;
    color:#adb5bd;
    overflow-y:auto;
    transition: width .25s;
    position:relative;
    flex-shrink:0;
}
.sidebar::-webkit-scrollbar { width:6px; }
.sidebar::-webkit-scrollbar-thumb { background:#495057; border-radius:3px; }

.sidebar.collapsed { width:64px; }

.menu-item > a{
    display: block; 
    padding:10px 16px; 
    cursor:pointer; 
    white-space:nowrap;
    background: #212529;
    color:#adb5bd;
    font-size: 14px;
    position: relative;
}
.menu-item > a i{
    display: inline-block !important;
    width: 32px;
    text-align: center;
}
.menu-item > a > .arrow{
    position: absolute;
    right: 10px;
}
.arrow i{ transition: transform .2s; }
.menu-item > a[aria-expanded="true"] .arrow i{ transform: rotate(90deg); }

.menu-item.active > a,.menu-item > a:hover{
    background: #343a40;
    color: #fff;
}
.menu-item > ul{
    background-color: #555d64;
}
.menu-item > ul > li > a{
    display: block; 
    background-color: #2a3339;
    padding:8px 10px 8px 18px; 
    font-size: 14px;
    color:#adb5bd;
    white-space:nowrap;
}
.menu-item > ul > li.active > a,.menu-item > ul > li > a:hover{
    background-color: #4e73df;
    color: #fff;
}
.menu-item > ul > li > a i{
    display: inline-block !important;
    width: 32px;
    text-align: center;
}

.collapsed li:hover a{ background-color: #ff3300 !important;}
/* .collapsed li:hover ul{ display: block;} */

/* ========== 浮层菜单 ========== */
.submenu-float {
    position: fixed;
    min-width: 180px;
    background: #2c3e50;
    border-radius: 4px;
    padding: 6px 0;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

.submenu-float li a {
    display: block;
    padding: 8px 16px;
    color: #ddd;
    white-space: nowrap;
}

.submenu-float li a:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}