#console {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	min-height: auto;
	max-height: 90vh;
	background: #1e1e1e;
	color: #d4d4d4;
	font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
	font-size: 12px;
	padding: 5px 10px 5px 10px;
	z-index: 9999;

	& .console-content {
		height: calc(100% - 20px);
		padding-top: 5px;
		overflow-y: auto;
		color-scheme: dark;
	}

	& .console-row{
		display: grid;
		grid-template-columns: 14px 90px 1fr 160px;
		margin-bottom: 2px;
		& > * {width: 100%;}
	}
	& .console-log > * { color: #d4d4d4; }
	& .console-warn > * { color: #cca700; }
	& .console-error > * { color: #f14c4c; }
	& .console-info > * { color: #3794ff; }
	& .console-debug > * { color: #b267e6; }
	& .console-table > * { color: #89d185; }
	& .console-trace > * { color: #6a9955; }
	& .console-type {
		font-size: 12pt;
		line-height: 12px;
	}
	& .console-time {
		color: #858585;
	}
	& .console-location {
		color: #858585;
		margin-right: 5px;
		text-align: right;
	}
	& .console-message {
		white-space: pre-wrap;
		word-break: break-all;
	}


	& .cookie-row, .localstorage-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 10px;
		padding: 1px 5px;

		& span {
			margin-left: 0;
			color: #d4d4d4;
		}

		&:hover {background: rgba(255,255,255,.05);}
	}


	& .resizer-handle {
		position: absolute;
		top: 0;
		right: 30px;
		height: 21px;
		width: 60vw;
		cursor: ns-resize;
		background: transparent;
		z-index: 10;

		&:hover {background: #444;}
		&:active {background: #333;}
	}


	& .console-tabs {
		display: flex;
		justify-content: start;
		column-gap: 20px;
		padding-bottom: 2px;
		border-bottom: solid 1px #333;

		& .console-tab {
			margin: 0;
			color: #555;
			cursor: pointer;

			&.active{
				color: #d4d4d4;
			}
			&:hover {
				color: #999;
			}
		}
		& #console-close {
			color: #555;
			width: fit-content;
			margin-right: 0;
			padding: 0 5px;
			cursor: pointer;

			&:hover {
				color: #d4d4d4;
			}
		}
	}
}