* {
  box-sizing: border-box;
}

body {
  padding: 0px;
  margin: 0px;
}

div, main {
  padding: 0px;
  margin: 0px;
}

main.main-box {
  width: 100vw;
  height: 100vh;
  background-color: #111111;
  color: white;
  display: flex;
  flex-direction: row;
}

#left-panel {
  height: 100%;
  width: 50%;
  padding: 0px;
  position: relative;
}

#ctrl-box {
  height: 30px;
  width: 100%;
  background-color: #111111;
  position: absolute;
  z-index: 30;
  padding: 3px;
  text-align: right;
  color: white;
}

#ebnf-editor {
  height: 50%;
  width: 100%;
  margin: 0px;
  position: absolute;
  z-index: 20;
}


.cm-ebnf-editor {
  padding-top: 30px;
  height: 60%;
  border: solid 1px #333333;
}


.cm-export {
  padding-top: 0px;
  height: 40%;
  width: 100%;
  border: solid 1px #333333;
}

#right-panel {
  height: 100%;
  width: 50%;
  overflow: auto;
  border:solid 1px #111111;
  position: relative;
}

#export-box {
  height: 30px;
  width: 100%;
  background-color: #111111;
  position: absolute;
  z-index: 30;
  padding: 3px;
  text-align: right;
}

.cm-test-editor {
  padding-top: 30px;
  height: 60%;
  width: 100%;
  border: solid 1px #333333;
}
#console-box
{
  height: 40%;
  width: 100%;
  position: absolute;
  overflow-y: scroll;
  background-color: black;
  color: white;
}


#ast-box
{
  height: 40%;
  width: 100%;
  position: absolute;
  overflow: scroll;
  font-size: small;
  display: none;
}



/**
  * Symbol-box
  */

.symbol-table {
  display: inline-block;
  vertical-align: middle;
  border: solid 2px dimgray;
}

.root-symbol-table {
  clear: both;
  margin: 10px;
}

.st-statement,.st-block,.st-declare_func {
  clear: both;
  margin: 10px;
}

.symbol-table th {
  text-align: center;
  color: black;
  background-color: cornflowerblue;
}

th.token-name {
  text-align: center;
  color: #dddddd;
  background-color: transparent;
}

.symbol-table td {
  white-space: nowrap;
}


/* Error */
.code-error
{
  border-bottom: dotted 2px red;
  background-color: rgba(255,0,0,0.5);
}