:root {
  --bg: #0e0f11;
  --surface: #111111;
  --surface-hover: #14171c;
  --border: #303030;
  --border-hover: #a1d0d7;
  --red: #a1d0d7;
  --red-glow: rgba(161, 208, 215, 0.24);
  --red-dim: #4c7176;
  --text: #ffffff;
  --text-muted: #a1d0d7;
}

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;
color: var(--text);
}
h2 {
font-size: 16px;
line-height:16px;
font-weight: 400;
margin: 5px;
color: var(--text);
}
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-radius: 0;
}
.sidebar .filter-text input {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--border);
padding: 5px;
background-color: var(--bg);
color: var(--text);
border-radius: 0;
}
.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;
border-radius: 0;
}
.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,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAECUlEQVR4Aa1XA6w0SRCey/lpcLZtxDrfxcnZsZOzzfBsm+vpeebg7rdt27bqy1b/29NvnZ2kF101xa+quo1antb+7EV26D5nBeIfKxKjrVDMtmnR9xo7EAGtZ1qD1IVGI58zE4njINgKvel25B2sZlngDdynjV9+ObZ+zW+9dYQVuI+Rh4tiCkKxhzweQUb9YkVeZ4EmFoKm8S6yfPFovV7/oXnVa4Xuw2b7nxZ4TnB/bKG95UybZnz77VGggYcM7ItHxf0dMqtSfpKfOAX5VQRMMP3crTofYeF9yeME2dt1OvYoApMKDohRzQN/nVzRczAqXv91mvft8Tqf2Z8+j4zcyYKTpeQBA8Tzs5KScZBXOuehN1cyU/7fKCWXBKXBAyNgjEIqxf9WwQjvt6JMlLvHJROBa0kpYWYgbpZ8hJN3VVoFI36V7wEnw0Gno90XdxWJ0pEU8qn5CIkVds/fZ7Z1J2y5mgg/6v8YrTtzKsDK8hfGShR1rihfxeGdYSQSR2vA+wG0Riwrcv9Rwu9Nl6VGSh5QkPuk5IEXtLetQQYAkGsK7VVuBrmH8p56PjNtaOlMnMg5/JT3DjiBeJmidp+66J0XaR0AjxN57SpNXUT/TOo7YdC92EBvlx1ONhkzcK+lvX0cha+c/txlssuhA1YGmthLzlyp0tRIgs6ynjEwWDjn/8erQnyHfRhCv//j6tjqDCROL9vEQrGZDe8rwYaUj5R9Bn/GsKKfVSZ0LTJqUxw44uUK1QaHXpH8TpS7p1yk0PRgwCz+86HOKNPD3q+qqp93fnYMKVjOqdhVbCKSrI9Y50yDfkxmDHxRTBgx72QjKhmg9JR8KWPBiXIGINddbEC6mECEUQpDeCumIHRf1abolhOpCZVKAf78xPkdXQY0ndWAEIoYhJA3QqIdgFb5oFiCEAY8K8sQJVI0CkHmUlmGsL6UARg0h8vQz1yBEuYBtL8tSN/IfceJlSHOcErIPivVQNBcWNgBJxKvF21EgTiQF+x+LJXR/jpZ5pi46tBDE8xbHom1DWyx21v8v05Qwv2kpHGbH+C0TC2EOHT/bZQBTtgeyzeOanKCqo7CsNjJhTYWS8swOrVxWnLkYiTTOyv53RlQqGMDRzrN0AXD+gNOryBWAlptZ0O19sVSbegNf3B6VYx4S6fXezYkUL6j9JLZZbuYHBSM3L9xiKz3bIgwY3oqeR9R8bKCIaQagVbthLk7aj0b4kgHPKnKm3szJ1V9MVHSwUv0AycAHs6GMIwFL8MlRdY936YG1XcRhbquaST8ERwgNUP2koKFSq/vAmjRXkHT0S4BV/cDy81QPKWGs9ICL97BNDUa+bT57gX5m7I7ghRtpDY7HyMV3mOw4EYMnlpkHgKaxTQcKvS3owAAAABJRU5ErkJggg==');
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: 1px solid var(--border);
box-shadow: none;
background: var(--surface);
margin: 5px;
display: inline-block;
border-radius: 0;
transition: border-color 0.25s ease;
}
.main .panel:hover {
border-color: var(--border-hover);
box-shadow: none;
}

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

.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: color 180ms ease, text-shadow 180ms ease;
text-shadow: none;
}

a:hover,
a:focus-visible {
color: #b2dce2;
text-shadow: 0 0 8px rgba(161, 208, 215, 0.4);
}

.remark {
line-height: 1.6;
}

.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;
}
}