*{margin:0;padding:0;box-sizing:border-box}html,body,#app{width:100%;height:100%}#app{display:flex;flex-direction:row;--sidebar-color:#fff;--sidebar-width:220px;--sidebar-collapse-width:60px;--sidebar-line-height:50px;--sidebar-background-image:url("/img/logo-white.png");--sidebar-background-sm-image:url("/img/logo.png");--sidebar-background-color:#1c1f2c;--sidebar-hover-color:#111;--sidebar-submenu-hover-color:#2e4bf3}#app .sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);height:100%;background:var(--sidebar-background-color);transition:all .5s ease;cursor:pointer;user-select:none}#app .sidebar .logo{width:100%;height:60px;background:var(--sidebar-background-image);background-size:100% 100%;background-repeat:no-repeat;background-origin:content-box;padding:0 20px;transition:all .5s ease}#app .sidebar ul.menu{color:var(--sidebar-color);display:flex;flex-direction:column;margin-top:20px;list-style:none;font-size:14px}#app .sidebar ul.menu li{width:100%;min-height:var(--sidebar-line-height)}#app .sidebar ul.menu li>div{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;min-height:var(--sidebar-line-height);padding:0 20px;width:100%;height:100%;position:relative}#app .sidebar ul.menu li>div a,#app .sidebar ul.menu li>div a:link,#app .sidebar ul.menu li>div a:visited,#app .sidebar ul.menu li>div a:hover,#app .sidebar ul.menu li>div a:active{color:var(--sidebar-color);text-decoration:none;width:100%;height:100%;display:flex;justify-content:flex-start;align-items:center}#app .sidebar ul.menu li>div i{margin-right:1em}#app .sidebar ul.menu li>div .bx-chevron-down,#app .sidebar ul.menu li>div span{visibility:visible;opacity:1;width:auto;height:var(--sidebar-line-height);line-height:var(--sidebar-line-height);vertical-align:middle;display:inline-block;transition:opacity .5s ease;transition-delay:.2s;overflow:hidden}#app .sidebar ul.menu li>div .bx-chevron-down{position:absolute;right:2px}#app .sidebar ul.menu li>div .bx-chevron-down.active{transform:rotate(-180deg)}#app .sidebar ul.menu li.active,#app .sidebar ul.menu li:hover{background:var(--sidebar-hover-color)}#app .sidebar ul.menu ul.sub-menu{display:none}#app .sidebar ul.menu ul.sub-menu.active{display:block}#app .sidebar ul.menu ul.sub-menu a,#app .sidebar ul.menu ul.sub-menu a:link,#app .sidebar ul.menu ul.sub-menu a:visited,#app .sidebar ul.menu ul.sub-menu a:hover,#app .sidebar ul.menu ul.sub-menu a:active{color:var(--sidebar-color);text-decoration:none;width:100%;height:100%;display:flex;justify-content:flex-start;align-items:center}#app .sidebar ul.menu ul.sub-menu li{list-style:none;display:flex;justify-content:flex-start;align-items:center;padding:0 60px}#app .sidebar ul.menu ul.sub-menu li:hover{background:var(--sidebar-submenu-hover-color)}#app .sidebar.collapse{width:var(--sidebar-collapse-width);min-width:var(--sidebar-collapse-width)}#app .sidebar.collapse .logo{background:var(--sidebar-background-sm-image);background-size:100% 100%;background-repeat:no-repeat;background-origin:content-box;padding:10px}#app .sidebar.collapse ul.menu{position:relative;z-index:999}#app .sidebar.collapse ul.menu li{position:relative}#app .sidebar.collapse ul.menu li div .bx-chevron-down,#app .sidebar.collapse ul.menu li div span{opacity:0;width:0;height:0}#app .sidebar.collapse ul.menu li ul.sub-menu{position:absolute;left:62px;top:0;background:var(--sidebar-hover-color);width:160px}#app .sidebar.collapse ul.menu li ul.sub-menu li{padding:0 20px}#app .sidebar.collapse ul.menu li ul.sub-menu li:hover{background:var(--sidebar-submenu-hover-color)}#app.light{--sidebar-color:rgba(0, 0, 0, 0.7);--sidebar-background-color:#fff;--sidebar-hover-color:#ecebea;--sidebar-background-image:url("/img/logo-black.png");--sidebar-submenu-hover-color:#ddd}#app.light .sidebar{border-right:1px solid #ccc}#app.light .sidebar ul.sub-menu{border:1px solid #ddd}#app.light .sidebar.collapse ul.sub-menu{border:1px solid #ccc}#app .main{width:100%;height:100%;background:#eee}#app .main .header{width:100%;height:60px;display:flex;justify-content:space-between;align-items:center;padding:0 40px 0 10px;border-bottom:1px solid #ccc}#app .main .header .bx{font-size:30px;cursor:pointer}#app .main .content{width:100%;height:calc(100% - 60px)}#app .main .footer{height:0}