#debug-bar {
    display:none;

    position:fixed;
    top:0;
    bottom:0;
    left:0;
    width:360px;

    background:#222;
    color:white;
    font-size:1em;
    line-height:1em;
    
    padding:0px;

    z-index:1001;
}

#debug-bar.collapsed {
    width:120px;    
    bottom:unset;
}

#debug-bar.collapsed .debug-bar-panels {
    display:none;
}

#debug-bar .debug-bar-header {
    display:block;
    height:50px;
    background:#262626;
    border-bottom:1px solid #303030;    
}

#debug-bar .debug-bar-header #debug-bar-toggle {
    display:inline-block;
    margin-right:10px;
    padding:8px 8px;
    height:50px;
    color:white;
    text-align:center;
    background:#303030;
}

#debug-bar .debug-bar-header #debug-bar-toggle:hover {
    background:#444;
}

#debug-bar .debug-bar-header h2 {
    display:inline-block;
    font-size:1em;
}

#debug-bar #debug-bar-console {
    margin:4px;
    background:#2b2b2b;
    padding:0px;    
}

#debug-bar .debug-bar-panels {
    margin-top:12px;
}

#debug-bar .debug-bar-panels .debug-bar-panel {
    display:none;
}

#debug-bar #debug-bar-console #debug-bar-console-messages {
    overflow-y:auto;
}

#debug-bar #debug-bar-console #debug-bar-console-messages li {    
    font-size:0.75em;    
    padding:1px 8px;
    border-bottom:1px solid #313131;
}

#debug-bar #debug-bar-console #debug-bar-console-messages li:last-child {
    border-bottom:0;
}

#debug-bar #debug-bar-console #debug-bar-console-messages .message-type-debug {
    color:#ccc;
}
#debug-bar #debug-bar-console #debug-bar-console-messages .message-type-warning {
    color:orange;
}
#debug-bar #debug-bar-console #debug-bar-console-messages .message-type-error {
    color:red;
}

#debug-bar #debug-bar-state {
    margin:10px;   
    font-size:0.9em;
}

#debug-bar #debug-bar-state table {
    background:transparent;
    color:white;
    font-size:0.8em;
    border:1px solid #333;
}

#debug-bar #debug-bar-state table tbody tr td:first-child {
    color:#aaa;
}

#debug-bar #debug-bar-state table tbody tr td:last-child {
    background:#333;
}


#debug-bar #debug-bar-state table.table td,
#debug-bar #debug-bar-state table.table th {
    border-color:#333;
    color:white;
    padding:1px 4px;
}

#debug-bar #debug-bar-state table tbody tr.dirty td:nth-child(1) {
    background:#234333;
    font-weight:bold;
    color:white;
}
#debug-bar #debug-bar-state table tbody tr.dirty td:nth-child(2) {
    background:#397456;
    font-weight:bold;
    color:white;
}