body {
	/*height:100vh;*/
	width:100vw;
	
	background: #263238;
	height:100%;
	overflow-y: hidden;
	overflow-x: hidden;
}

#hidden{
	display:none;
	overflow-y: auto;
	
	max-height: 400px;
}

#errorArea{
	color:red;
	overflow-y: auto;
}
#textAreaSaida{
	height: 100%;
	min-height: 160px;
	width: 100%;
	outline: none;
	border: none;
	padding: 0;
	margin: 0;
	background: transparent;
	color: inherit;
	font-weight: inherit;
	font-family: inherit;
	font-size:inherit;
	white-space: inherit;
	resize: auto;
}
#myEditor{
	/*height: 80%; */
	max-height: 100vh;
	min-height: 200px;
	
}
#myOutput{
	height:0px;
	/*min-height: 200px;*/
	max-height: 600px;
	min-height: 80px;
}

/**
Mobile Only things
*/

body.mobile #myEditor{
	margin-right: 0px;
}

body.mobile .mobileHidden{
	display:none;
}

.ModalFull{
	
	z-index: 10; /* Sit on top */

	display:table;
	position: fixed; /* Stay in place */
	margin: 0 auto;
	width: 100vw;
	height: 100vh;
	top:0;
	left:0;
	
	pointer-events:none; /* invisible to clicks */
}

.ModalInside{
	display: table-cell;
	vertical-align: middle;
	position: relative;
	padding-left: 40px;
	padding-right: 40px;
	pointer-events:none;
}

.ModalContent{
	margin-left: auto;
	margin-right: auto;
	/*display: table; Parece que n precisava ser table*/
	display: flex;
	flex-direction: column;
	position: relative;
	background: #1E2324;
	min-width:220px;
	max-width:420px;
	pointer-events:auto;
	
	max-height:95vh;
}

.listaExemplos{
	color:#01EABC;
	font-weight: 800;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:20px;
	overflow-y:auto;
}

.listaExemplos h2{
	display: inline-block;
	padding:14px;
	margin:0px;
	font-size: 12pt;
	cursor: pointer;
}

.listaExemplos h3{
	display: inline-block;
	padding:12px;
	margin:0px;
	font-size: 10pt;
	cursor: pointer;
}

#myCanvasModal{
	
	z-index: 10; /* Sit on top */

	display:none;
	position: fixed; /* Stay in place */
	margin: 0 auto;
	width: 100vw;
	height: 100vh;
	top:0;
	left:0;
	
	pointer-events:none; /* invisible to clicks */
}

#myCanvasMiddle{
	display: table-cell;
	vertical-align: middle;
	position: relative;
	
	pointer-events:none;
}

#myCanvasWindow{
	 margin-left: auto;
	margin-right: auto;
	display: block;
	position: relative;
	background: #1E2324;
	min-width:180px;
	pointer-events:auto;
}

#myCanvas{

	position: relative;
	
	padding:4px;
}

#hotbar{
	z-index:9;
	display:block;
	position: fixed;
	bottom:-80px;
	left:0px;
	border-top: 1px solid #1E2324;
	padding-top:0px;
	cursor:grab;
	touch-action: none;
}

#hotbar.animate{
	transition: bottom 0.3s ease 0s;
}

.tabelavariaveis {
	border: 1px solid #ddd;
    /*width: 100%;*/
    table-layout: fixed;

	border-collapse: collapse;
	background-color: #000000;
}

.tabelavariaveis td,.tabelavariaveis th {
	text-overflow: ellipsis;
    overflow: hidden;

	text-align: left;
	border: 1px solid;
}

.tabelavariaveis td {
	padding: 5px;
}

.tabelavariaveis th {
	padding: 10px;
}

.atecemporcento {
	display: inline-block;
	max-width: 100%;
}

.divariaveis {
	width: 50%;
    /*display: inline-block;*/
	display: none;
	position: absolute;
	margin: 10px;
	top: 0px;
	right: 0px;
	overflow-x: auto;
	overflow-y: auto;
	text-align: right;
}

.paragrafo{
white-space: pre-wrap;
}

div.saida {
	white-space: pre;
	font-weight: 450;
	color: #C0C0C0;
	background: #000000;
	font-family:Liberation Mono, Courier New, Consolas,Monaco,Lucida Console,DejaVu Sans Mono,Bitstream Vera Sans Mono, monospace;
	/*font-family: "Courier New", Courier, monospace;*/
	tab-size: 4;
/*-webkit-box-shadow: 0px 13px 21px 0px rgba(207,207,207,1);*/
/*-moz-box-shadow: 0px 13px 21px 0px rgba(207,207,207,1);*/
/*box-shadow: 0px 13px 21px 0px rgba(207,207,207,1);*/
	/*height: 100%;*/
	display: block;
	padding: 5px;
	overflow: auto;
}

div.portugol {
	white-space: pre;
	max-width:90%;
	overflow-x:auto;
	font-weight: 450;
	font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
	/*font-family: "Courier New", Courier, monospace;*/
	line-height:20px;
	tab-size: 4;
-webkit-box-shadow: 0px 13px 21px 0px rgba(207,207,207,1);
-moz-box-shadow: 0px 13px 21px 0px rgba(207,207,207,1);
box-shadow: 0px 13px 21px 0px rgba(207,207,207,1);
	
	display: inline-block;
	padding: 20px;
	padding-left: 30px;
	margin-left: 5px;
}

div.portugol-buttons{
	background: #263238;
	/*border-top: 1px solid #1E2324;*/
	border-top: none;
	font-family:Liberation Mono, Courier New, Consolas,Monaco,Lucida Console,DejaVu Sans Mono,Bitstream Vera Sans Mono, monospace;
	
}

div.portugol-buttons input, #myCanvasModal input, .ModalContent input, .listaExemplos button{
	color:#01EABC;
	font-weight: 800;
	min-width:35px;
	height:40px;
	padding-left: 5px;
	/*background: #263238;*/
	background-color: transparent;
	border: none;
}

.code-ln{
	display:block;
	position: relative;
}

.ln-n{
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
	background: #FAFAFA;
	color: #808080;
	position: absolute;
	width: 20px;
	margin-left: -30px;
	padding-right: 5px;
	font-size: 12px;
	text-align: right;
	border-right: solid 1px #DDDDDD;
}

.w-programa, .w-funcao, .w-inclua, .w-biblioteca, .w-e, .w-ou, .w-nao, .w-se, .w-senao, .w-enquanto, .w-faca, .w-para, .w-escolha, .w-caso, .w-contrario, .w-pare, .w-retorne{
	color: blue;
	font-weight: 800;
}

.w-inteiro, .w-caracter, .w-cadeia, .w-real, .w-logico, .w-verdadeiro, .w-falso {
	color: #008080;
	font-weight: 800;
}

.sep-ln, .sep-tab, .sep-space,
.sep-bracesO, .sep-bracesC, .sep-parO, .sep-parC, .sep-squareO, .sep-squareC
{
	color: red;
}

.string-literal {
	color: #DC009C;
}

.numeric-literal{
	color: #6400C8;
}

.comment-line {
	color: #008000;
	font-style: italic;
}

.sep-plus, .sep-minus, .sep-mul, .sep-div, .sep-rem, .sep-not, .sep-and, .sep-or, .sep-xor, .sep-bnot, .sep-gt, .sep-lt, .sep-semi, .sep-colon, .sep-dot, .sep-equals{
	color: #804040;
}

.w-escreva, .w-leia {
	color: #AD8000;
}

h1 {
	color: maroon;
	margin-left: 40px;
}