.msg-list { 
	list-style: none; 
	margin: 10px 0; 
}

.msg-list > li { 
	display: flex;
	margin: 5px 0; 
	color: #333; 
	overflow: hidden; 
	border: 1px solid #ccc;
}

.msg-list .msg-icon {
	display: block;
	width: 30px;
	padding: 5px;
	float: left;
	text-align: center;
	color: #fff;
}

.msg-list .msg-content {
	display: block;
	width: calc( 100% - 30px );
	padding: 5px 10px;
	float: right;
}

.single-list span.msg-content {
    background: #fff;
}

.msg-list ul.db-msg {
    margin-left: 20px;
    list-style: disc;
}

.msg-list ul.db-msg > li:nth-child(n+2) {
    padding-top: 5px;
}

ul.db-msg b {
    display: block;
    width: 130px;
    float: left;
}

ul.db-msg span {
    display: block;
    margin-left: 130px;
}

/* errors */
.single-list .msg-notice {
	border-color: #ccc; 
}
.msg-notice .msg-icon { 
	background: #ccc; 
}

/* debug */
.single-list .msg-debug {
	border-color: #002f5d; 
}

.msg-debug .msg-icon { 
	background: #002f5d; 
}

/* warning */
.single-list .msg-warning {
	border-color: #e88615; 
}

.msg-warning .msg-icon { 
	background: #e88615; 
}

/* errors */
.single-list .msg-error {
	border-color: #c02e2e; 
}

.msg-error .msg-icon { 
	background: #c02e2e; 
}

/* success */
.single-list .msg-success {
	border-color: #469b2b; 
}

.msg-success .msg-icon { 
	background: #469b2b; 
}

/* array */
.array-list .msg-error {
	border-color: #404040; 
}
.msg-array .msg-icon { 
	background: #404040;
}

#msg-overview {
	overflow: hidden;
	margin: 10px 0;
}

#msg-overview li {
    display: inline-block;
    margin-right: 5px;
    border: solid 1px #ccc;
}

#msg-overview .msg-content {
	color: #ccc;	
}

#msg-overview .active {
	cursor: pointer;
}

#msg-overview .active .msg-content {
	color: #333;
}
#msg-overview .active:hover .msg-content {
	background: #fff;
}
#msg-overview .triggered .msg-content {
	background: #fff;
	font-weight: 700;
}

.open-tree-level,
	.closde-tree-level {
	cursor: pointer;	
}

/* backtrace list */
.msg-content ul {
    margin: 5px 0 5px 25px;
}

.msg-content ul li {
    list-style: disc;
}

.msg-content ul li:nth-child(n+2) {
    border-top: dotted 1px #ccc;
    padding-top: 3px;
    margin-top: 3px;
}

.open-tree-level:hover,
	.closde-tree-level:hover {
	color: #b2d06b;
}

/* instant message block */
div#instant-msg {
    padding: 15px;
    position: fixed;
    top: 30px;
    left: 0;
    width: 100%;
    background: rgba( 0, 0, 0, .3 );
    z-index: 100000;
}

div#instant-msg ul.msg-list {
    margin: 0;
    padding: 0;
}

div#instant-msg li {
    background: #fff;
}