.level {
  height: 100%;
  flex: 1;
  min-height: 0;
}

.main-panel, .info-panel {
  height: 100%;
  overflow: auto;
}

.main-panel {
  display: flex;
  flex-flow: column;
}

.message-panel {
  width: 100%;
}

.exercise {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column;
}

.codeview {
  flex: 1 1 auto;
  min-height: 192px;

}

.exercise h4 {
  margin-top: 0;
  margin-bottom: 0;
}

.doc-panel li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12); /* This should be teh same colour as `divider` in LeftPanel.tsx */
}

.doc-panel li:first-of-type {
  border-top: 1px solid rgb(0, 0, 0, 0.12); /* This should be teh same colour as `divider` in LeftPanel.tsx */
}

/* fix as Mui seems to set this to `nowrap`. */
.MuiAccordionDetails-root {
  white-space: normal;
}

/* TODO: Adjust Mathjax styling. 1em vertical is excessive. */
mjx-container[jax="CHTML"][display="true"] {
  margin: 0.2em 0 !important;
}


/* Styling tables for Markdown */
.message-panel table, .message-panel th, .message-panel td {
  /* border: 1px solid rgb(0, 0, 0, 0.12); */
  border-collapse: collapse;
}

.message-panel th, .message-panel td {
  padding-left: .5em;
  padding-right: .5em;
}

span.katex-display {
  margin: 0;
}

p, table {
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

/***************************************/
/* TODO: For development purposes only */
/***************************************/
/* .doc-panel {
  border: 1px solid red;
}

.main-panel {
  border: 1px solid rgb(41, 112, 0);
}

.info-panel {
  border: 1px solid rgb(230, 122, 0);
}

.message-panel {
  border: 1px solid rgb(192, 18, 178);
}

.exercise {
  border: 1px solid rgb(102, 243, 67);
}

.codeview {
  border: 1px solid rgb(98, 148, 255);
}

.main-grid {
  border: 1px solid rgb(255, 0, 0);
  margin: 1px;
} */