html {
	margin: 0;
    padding: 0;	

	font-size: 1.5vh;
	font-family: Avenir, Calibri, Helvetica, Arial, sans-serif;
}

body {
	margin: 0;
    padding: 0;	

    background-color: #aaa;
}

/***************************************************/

#content {
    display: grid;

    width: 100vw;
    height: 100vh;

    grid-template-rows: min-content auto 20vh;
    grid-template-columns: auto;

    position: relative;	

    overflow: hidden;
}

/***************************************************/

.header {
    grid-row: 1;
    grid-column: 1;

    background-color: #c0ff61;

    padding: 5px;
	display: grid;

	grid-template-columns: auto min-content;
	grid-template-rows: auto;	
}

.header > .pathInput {
	padding-right: 7px;
}

.header > .pathInput > input {
    width: 100%;
	font-size: 1rem;
}

.header > .buttons {
	font-size: 1.3em;
}

.header > .buttons > * {
	cursor: pointer;
	display: inline;
	padding-left: 7px;
}

/***************************************************/

.contentArea {
	grid-row: 2;
    grid-column: 1;

    position: relative;
}

.console {
	border-top: 2px solid #aaa;
	grid-row: 3;
    grid-column: 1;

	background-color: white;

	padding: 10px;
	font-family: 'Courier New', Courier, monospace;

	overflow: auto;
}

.console > * {
	display: grid;

	grid-template-rows: auto;
	grid-template-columns: min-content auto;
}

.console > * > *:first-child {
	color: rgb(183, 183, 183);
	white-space: pre;
	margin-right: 10px;
}

.console > * > *:last-child {
	color: black;
	white-space: pre;
}

.console > *.error > *:last-child {
	color: rgb(196, 0, 0);
	font-weight: bold;
}

.console > *.info > *:last-child {
	color: rgb(0, 85, 0);
}

/***************************************************/

.listing {
	position: absolute;

	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	background-color: white;
	z-index: 10;

	padding: 10px;
	font-family: 'Courier New', Courier, monospace;
}

.listing > * {
	display: block;
	white-space: pre;
	text-decoration: none;
	min-height: 1em;
}

.listing > a:hover {
	background-color: #eee;
}

.listing > a, .listing > a:visited, .listing > a:active {
	color: rgb(69, 69, 255);
  }

/***************************************************/

.editor {
	position: absolute;

	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	z-index: 20;

    container-type: size;
}

.CodeMirror {
	width: 100cqw;
	height: 100cqh;
}
 
/***************************************************/

.block {
    position: absolute;
    top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #aaa;
    opacity: 0.8;
	z-index: 100;
}

.progressBar {
	display: block;
	
	position: absolute;
	top: 50%;
	left: 50%;
	height: 1em;
	width: 50%;
}

.progressBar > * {
	display: block; 
	
	position: relative;
	top: -50%;
	left: -50%;
	height: 100%;
}

.progressBar > * > * {
	position: absolute;
	top: 0;
	left: 0;
	
	background: #000;
	
	border-radius: 1em;
	
	height: 100%;
	width: 100%;	
	overflow: hidden;
}

.progressBar > * > * > * {
	position: absolute;
	top: 0;
	left: 0;
	
	height: 100%;
	width: 0;
	background: #c0ff61;
	
	transition: width 0.06s;
}

.progressMessage {
	display: block;
	
	position: absolute;
	top: 50%;
	left: 25%;
	width: 50%;

	transform: translateY(20px);
	color: black;

	text-align: center;
}