div.sysdebug {
	&.js {
		div.body {
			div.event {}
		}

	}

	&.default {
		bottom: 0;
		left: 0;

		&.closed {
			div.head {
				border-radius: 0 10px 0 0;
				border-bottom: 4px solid #660066;
			}
		}
	}

	&.ajax {
		bottom: 0;
		right: 0;

		&.closed {
			div.head {
				border-radius: 10px 0 0 0;
				border-bottom: 4px solid #660066;
			}
		}
	}

	&.js {
		top: 0;
		right: 0;

		&.closed {
			div.head {
				border-radius: 0 0 0 10px;
				border-top: 4px solid #660066;
			}
		}
	}

	&.time {
		top: 0;
		left: 10%;

		div.body {
			div.event {
				flex-direction: row;
				padding: 0;
				gap: 0;

				div.values {
					background: none;

					span.type {
						display: none;
					}

					div.time,
					div.runtime {
						padding-top: 2px;
					}
				}

				div.trace {
					background: none;

					span.function,
					span.args,
					span.static,
					span.fold {
						display: none;
					}

					div.callers div.caller span.line {
						display: inline;
						text-align: right;
						min-width: auto;
					}
				}
			}

		}

		&.closed {
			div.head {
				border-radius: 0 0 10px 10px;
				border-top: 4px solid #660066;
			}
		}

	}

	&.route {
		top: 0;
		left: 50%;

		&.closed {
			div.head {
				border-radius: 0 0 10px 10px;
				border-top: 4px solid #0a8f6c;
			}
		}

		&.open div.head {
			border-bottom: 4px solid #0a8f6c;
		}

		div.body {
			div.event {
				flex-direction: row;
				padding: 0;
				gap: 0;

				div.values {
					background: none;

					span._type {
						display: none;
					}
				}

				div.trace {
					background: none;

					span.function,
					span.args,
					span.static,
					span.fold {
						display: none;
					}

					div.callers div.caller span.line {
						display: inline;
						text-align: right;
						min-width: auto;
					}
				}
			}

		}

	}
}