:root {
	--color-console-background: #000;
	--color-console-text: #ddd;
	--color-console-alert: #4499bb;
	--color-console-result: #5f5;
	--color-console-line: #FFF;
	--color-console-row1: #222;
	--color-console-row2: #111;
	--font-console: 1em monospace;
	}
	
.console.component{
	font:var(--font-console);
	font-size:10px;
	background-color: var(--color-console-background); 
	color: var(--color-console-text);
	}
	
.console .screen {

	padding: 2px;
	white-space: pre; 
	overflow-y: auto;
	overflow-x: hidden;
	line-height: 1.3em;
} 

.console .topline {
	width:100%;
	color: white;
	background-color:#9a9996;
	position:sticky;
	top:-2px
} 

.console .toolbar {
	width:100%;
	margin:0px;
	border-radius: 0;
	background-color: #ddd;
	border: 1px solid #ddd;
}

.console .out {
	width:100%;
	color:rgb(249, 240, 107);
} 

.console .out.error { color:rgb(237, 51, 59); } 
.console .out.done { color: #55ff55;  }  
.console .out.idle { color: #819d3e; text-decoration: line-through; }  
.console .out.result { color: #fefefe; } 

.console .line {
	width:100%;
	background-color: rgb(52, 73, 94);
	color:var(--color-console-line);
	overflow:  auto hidden;
} 

.console .line.masked .left {
	background-color: red;
	color:  red;
}

.console .line.masked .right {
	background-color: red;
	color:  red;
}

.console .line div { display: inline; }

.console .line .cursor {
	width: .1em;
	height: 1.3em;
	background-color:var(--color-console-line);
	display: inline-block;
	vertical-align: bottom;
	}
	
.console .line .cursor.deleter {
	width: .5em;
	}	
	
.console .screen:focus {
	background-color: rgb(9, 75, 6);
} 

.console .out.formify {
	padding: 2px;
	font-size: 1em;
}

.console .out.tabulate {
	padding: 2px;
	font-size: 1em;
}

.console .out.formify  td:nth-of-type(1) {
	color: #33d17a;   
}

 
.console .component.table {
	height:auto !important;
}
		
.console table {
	width:auto;
	background-color: transparent;
	font-size: .8em;
	font-family: mono;
	line-height: 1em;
 } 
 
.console table td {
	border: none;
	padding-right: 4px;
	vertical-align: top;
}

.console table th {
	background-color:unset;
	color: #33d17a;   
	padding: 0px;
	text-align: left;
	padding-right: 4px;
	position:unset;
}
.console table tr:nth-child(even){ background-color:unset;}
.console table tr:nth-child(odd){ background-color:unset;}

table tr:hover {background-color:var(--color-hover);}
table tr.selected td{background-color: var(--color-selected);}