:root {
  --bg: #0c0c0f;
  --surface: #14141a;
  --surface-hover: #1c1c26;
  --border: #222230;
  --border-hover: #c0292b;
  --red: #e73c3c;
  --red-glow: rgba(231, 76, 60, .15);
  --red-dim: #a93226;
  --text: #e8e8ec;
  --text-muted: #bababa;
}

body {
background: var(--bg);
color: var(--text);
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px;
margin: 0;
display: inline-block;
    width: 100%;
}

h1 {
font-size: 32px;
line-height:32px;
font-weight: 400;
margin: 10px 5px;
}
h2 {
font-size: 16px;
line-height:16px;
font-weight: 400;
margin: 5px;
}
small {
font-size: 10px;
}
hr {
display: none;
}
img {
border: 0;
}

.sidebar {
background: var(--surface);
border-right: 1px solid var(--border);
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 250px;
height: 100%;
color: var(--text);
}

.sidebar-header {
border-bottom: 1px solid var(--border);
height: 50px;
position: relative;
padding: 10px;
box-sizing: border-box;
}
.sidebar-header .logo {
margin: 0;
display: inline-block;
padding: 0 5px;
}

.sidebar-menu {
overflow-x: auto;
overflow-y: auto;
position: absolute;
top: 51px;
bottom: 0px;
width: 249px;
}

.sidebar-menu img {
margin-left: 15px;
}

.sidebar .filter-label,
.sidebar .hierarchy-label {
display: none;
}
.sidebar .filter-text,
.sidebar .hierarchy-popup {
margin: 10px;
}
.sidebar .hierarchy-popup select {
width: 100%;
background: var(--bg);
color: var(--text);
border: 1px solid var(--border);
padding: 5px;
}
.sidebar .filter-text input {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--border);
padding: 5px;
background-color: var(--bg);
color: var(--text);
}
.sidebar .filter-text input:focus, .sidebar .hierarchy-popup select:focus {
border-color: var(--red);
outline: none;
box-shadow: 0 0 0 3px var(--red-glow);
}

.sidebar ul.menu {
margin: 0;
padding: 0;
list-style: none;
display: block;
padding-bottom: 10px;
}

.sidebar ul.menu li {
margin: 2px 10px;
border: 1px solid transparent;
position: relative;
}
.sidebar ul.menu li.menuopen,
.sidebar ul.menu li:hover,
.sidebar ul.menu li.menuactive {
border: 1px solid var(--border-hover);
background: var(--surface-hover);
color: var(--text);
box-shadow: 0 0 12px var(--red-glow);
}
.sidebar ul.menu li a {
color: var(--text-muted);
line-height: 2.0em;
display: block;
padding-left: 5px;
text-decoration: none;
}
.sidebar ul.menu li a.menulinkactive {
color: var(--red);
}
.sidebar ul.menu li a:hover {
color: var(--text);
}
.sidebar ul.menu li ul {
background: var(--surface);
padding: 5px;
}

.navbar {
height: 50px;
border-bottom: 1px solid var(--border);
background: var(--surface);
box-sizing: border-box;
position: fixed;
z-index: 10;
top: 0;
right: 0;
left: 250px;
box-shadow: 0 3px 6px rgba(0,0,0,0.5);
}

.navbar .navbar-menu {
border-right: 1px solid var(--border);
height: 50px;
display: inline-block;
}
.navbar .navbar-user {
border-left: 1px solid var(--border);
height: 50px;
display: inline-block;
right: 0;
position: absolute;
padding: 0 10px;
line-height: 50px;
font-size: 14px;
font-weight: 500;
}
.navbar .navbar-user .icon-person {
background: no-repeat left url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACGklEQVR4AeyWA+xWYRSH/8oea87Wh6wx27btxmarMdeQbWvItm3js57eXPee7zLXs/3me59zXpy9Gf/57aFatXzUrNlFZaTKJJsZrVLXkVh9mKPSSWW7ylFXqVGjgz2515upPuyncsiBUMomlWJ2ui+lctCRTM4RGjSoaKeAqeKPPJ5jNGlymbZtn9Khw0vLGT/+Ga9e7QbWAp2AzPRyny+3ku3Tyf3+E+pnr+jePUWPHtjKwoV8RRToZNR9Y5Uj38h9vuN06hSQBRZy+jQazhsVMF3XfbNmdxzLe/WCSAQNMVnu8RRSwjXfyL3eY3TuHHJcwNKlCOxO171X133Dhuct7rucy5cRGGz99Ldocd+xfNw4CAbREAFKSMMnWwl3agtwtfyLF0MqhYatQLbUfSOdvF69cxZlcs6eRWCY9dPfqtVDx/JRoyAQQMNroLx0+gui5rVu6nXpErYsFIaPwAEgU+q+rm74NGp0wdXpP3MGgSnpln+abvlbtnR++keMgFgMDXGgmPTgyFbC2brh06lT0HEBa9cisOmjUixglub0n3UsnzwZXrxAYKjR/B/wXYbP+PFw4wYCL4Gy6QuoXj33x2u4HY9nF6NGRRg7FsuZOhVWrIA3b0BmH5AlqIW3wNKlxQkEIipYTiKBCb0yrALkBsJ8PzYJo9cYYA7uSQLrgaIZdgEKATOAKPaJAKuAjkC+jP/85+0IAAA3lOK2R7hmggAAAABJRU5ErkJggg==');
width: 32px;
height: 32px;
display: inline-block;
vertical-align: middle;
padding-right: 10px;
opacity: 0.8;
}
a#menu-button {
background: no-repeat center url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkAQMAAADbzgrbAAAABlBMVEUAAAD4+Phxs4o8AAAAAXRSTlMAQObYZgAAABVJREFUeAFjIBXw////H5mkuXryAADmXxtt7p7X+QAAAABJRU5ErkJggg==);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
display: block;
opacity: 0.8;
height: 50px;
width: 50px;
}
a#menu-button:hover {
opacity: 1;
}

.main {
padding-left: 250px;
margin: 10px 10px;
padding-top: 50px;
display: inline-block;
}

.main .panel {
border: 2px solid var(--border);
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
background: var(--surface);
margin: 5px;
display: inline-block;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.main .panel:hover {
border-color: var(--border-hover);
box-shadow: 0 0 24px var(--red-glow);
}

.main .panel-heading {
background: var(--surface-hover);
border-bottom: 1px solid var(--border);
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}

.main .panel-heading h2 {
margin: 0;
padding-left: 10px;
line-height: 30px;
font-size: 14px;
font-weight: 500;
color: var(--text);
}

.main .panel-body {
padding: 5px;
}

.main .panel-body img {
filter: invert(1) hue-rotate(180deg);
}

.footer {
border-top: 1px solid var(--border);
padding-left: 250px;
}

.footer p {
display: inline-block;
margin: 5px 10px;
}

.footer p.footer-right {
float: right;
}

.footer,
.footer a {
color: var(--text-muted);
text-decoration: none;
}
.footer a:hover {
color: var(--red);
}

a {
color: var(--red);
transition: text-shadow 0.25s ease, color 0.25s ease;
}

a:hover {
color: #ff5252;
text-shadow: 0 0 8px var(--red);
}

.sidebar-hidden .sidebar {
left: -250px !important;
}

.sidebar-hidden .main,
.sidebar-hidden .footer {
padding-left: 0 !important;
}
.sidebar-hidden .navbar {
left: 0 !important;
}

@media (max-width: 900px) {
.sidebar, .navbar {
transition: left 0.4s ease;
}
.sidebar {
left: -250px;
}
.navbar {
left: 0;
}
.main, .footer {
padding-left: 0;
max-width: 100vw;
box-sizing: border-box;
}
.main .panel {
max-width: calc(100vw - 10px);
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
.sidebar-visible .sidebar {
left: 0px !important;
}
.sidebar-visible .navbar {
left: 250px !important;
}
}