.codescope-embedded-snippet {
	display: grid;
	grid-template: 	
					"header" auto
					"content" 1fr
					"footer" auto
					/ 1fr;
					
	border: 1px solid black;
	position: relative;
	line-height: normal;
}

.codescope-embedded-snippet th, 
.codescope-embedded-snippet td {
	margin: 0;
	padding: 0;
}

.codescope-embedded-snippet table {
	border: none;
	margin: 0;
}

.codescope-embedded-snippet-outer-body {
	overflow-y:auto;
	grid-area: content;
}

.codescope-code-container {
}

/* Token colors */
.codescope-comment {
	color: green;
}

.codescope-keyword {
	color: blue;
}

.codescope-literal {
	color: maroon;
}

.codescope-macro {
	color: purple;
}

.codescope-operator {
	color: black;
}

.codescope-type {
	color: teal;
}

.codescope-data {
	color: black;
}

.codescope-function {
	color: saddlebrown;
}

.codescope-identifier {
	color: black;
}

.codescope-highlighted-reference {
	background-color: #ffffa0;
}

.codescope-activeref {
	background-color: #e0e0e0;
} 

.codescope-grayedout {
	opacity: 50%;
}

.codescope-collapsed-region-banner {
	display: none;
}

.codescope-region-banner {
	border: 1px solid black;
	color: gray;
	user-select: none;
	margin: 0 5px 0 5px;
}

.codescope-region {
}

.codescope-region-collapsed {
	display: inline-block;
	font-size: 0;
}

.codescope-filter-input {
	padding-left: 16px;
	background:url(img/filter.png) no-repeat left center; 
}

.codescope-filter-input:focus {
	outline: none;
}


.codescope-inline-symbol-reference:link { 
  text-decoration: none; 
} 

.codescope-inline-symbol-reference:visited { 
  text-decoration: none; 
} 

.codescope-inline-symbol-reference:hover { 
  text-decoration: underline; 
} 

.codescope-inline-symbol-reference:active { 
  text-decoration: none; 
}

.codescope-code {
	font-family: monospace;
	white-space: pre;
	outline: 0px solid transparent;
}

.codescope-lines {
	font-family: monospace;
	float: left;
}

.codescope-regionmargin {
	font-family: monospace;
	float: left;
	margin-right: 10px;
	margin-left: 5px;
}

.codescope-newblock {
	background: rgba(69, 167, 59, 0.25);
}

.codescope-removedblock {
	background: rgba(232, 57, 66, 0.25);
	text-decoration: line-through;
}

.codescope-changedblock {
	background: rgba(128, 128, 0, 0.25);
}

.codescope-padding-pseudotoken {
	display: inline-block;
	width:100%;
}

/* Collapsible regions */

.codescope-linemargin {
	position: relative;
	display: grid;
	align-items: center;
}

.codescope-linemargin div {
	position: absolute;
	height: 100%;
	width: 1px;
	background: black;
	left: 50%;
}
.codescope-linemargin span {
	grid-row: 1;
	grid-column: 1;
}

.codescope-linemargin img {
	grid-row: 1;
	grid-column: 1;
	vertical-align: middle;
	z-index: 2;
	width: 10px;
	height: 10px;
}

.codescope-linemargin-expanded {
	content: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M0 0 h10 v10 h-10z M2 5 L8 5' stroke='black' fill='white' stroke-width='1'/%3E%3C/svg%3E" );
}

.codescope-linemargin-collapsed {
	content: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M0 0 h10 v10 h-10z M2 5 L8 5 M5 2 L5 8' stroke='black' fill='white' stroke-width='1'/%3E%3C/svg%3E" );
}

.codescope-linemargin-end {
	content: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 5 h4' stroke='black' fill='white' stroke-width='1'/%3E%3C/svg%3E" );
}

.codescope-line-region {
}

.codescope-margin-region {
}

.codescope-line-region-collapsed {
	display: inline-block;
	font-size: 0;
}

.codescope-margin-region-collapsed {
	display: none;
}

.codescope-region-highlighted {
	background-color: #f0f0f0;
}

/* Option list */

.codescope-embedded-snippet-options {
	grid-area: header;
	background: #e7e7e7;
}

.codescope-option-icon {
	width: 16;
	height: 16;
	vertical-align: middle;
	margin-bottom: 1px;
}

.codescope-icon-lightning {
	content: url("icons/event.png");
}

.codescope-icon-checked {
	content: url("icons/checkmark.png");
}   

.codescope-icon-document {
	content: url("icons/document.png");
}   

.codescope-icon-robot {
	content: url("icons/robot.png");
}   

.codescope-icon-warning {
	content: url("icons/warning.png");
}   

.codescope-icon-error {
	content: url("icons/error.png");
}   

.codescope-selected-option {
	background: #ccccff;
	border: 0 solid black;
}

.codescope-embedded-snippet-options > span > img {
	padding: 0 2px;
}

.codescope-embedded-snippet-options > span {
	padding: 5px;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
}

.codescope-embedded-snippet-options > span:not(.codescope-selected-option):hover {
	background-color: #ffffcc;
}

.codescope-snippet-statistics {
	position: absolute;
	z-index: 2;
	right: 0;
	margin: 0 15px;
	background: #e7e7e7;
	padding: 10px;
}

.codescope-embedded-snippet-footer {
	grid-area: footer;
	background: #e7e7e7;
	padding: 2px;
}

.codescope-small-codevroom-icon {
	width: 16;
	height: 16;
	content: url("icons/finishflag.png");
	vertical-align: middle;
	margin-right: 5px;
	margin-top: 0;
	margin-bottom: 0;
}

.codescope-embedded-snippet-footer > span {
	display: inline-block;
	vertical-align: middle;
}

.codescope-full-snippet-link {
	float: right;	
}