.master {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  .demo-page {
    margin-top: @app-bar-height;
    height: calc(~"100% - "@app-bar-height);
  }
}
.mui-app-canvas {
  height: 100%;
  .mui-app-bar {
    z-index: 99;

    .mui-paper-container {
      display: flex;
      justify-content: space-between;
    }

    .mui-app-bar-title {
      flex: 1 0 auto;
      user-select: none;
      a {
        color: @app-bar-text-color;
        text-decoration: none;
      }
    }

    .appbar-icon-group {

      height: 100%;
      margin-right: -16px;
      display: flex;
      // overflow-x: auto;
      // align-items: baseline;
      .github-icon-button {
      }
      .help-button {
      }
      .mui-icon-button-tooltip {
        // margin-left: auto;
        // margin-right: auto;
        left: auto !important;
        // right: auto !important;
        // display: inline-block;
        // text-align: center;
        // transform: translate(-50%,50%);
        // top: 0;  bottom: 0; right: 0;
      }
    }
    // .github-icon-button {
    //   float: right;
    //   margin-right: -16px;
    // }
  }

  .mui-dialog-content {
    ul, ol {
      padding-left: 1em;
      margin-bottom: 14px;
    }
    h6 {
      margin-bottom: 0;
    }
    a {
      color: @primary-1-color;
    }
  }
}
a {
  color: @accent-1-color;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

// grammar visualization
#vizDiv {
  max-height: 500px;
  overflow: auto;

  // body {
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  font-size: 12pt;
// }

super::before {
  opacity: .30;
  content: '\25C1';
  padding-left: 3pt;
  padding-right: 3pt;
}

grammar {
  display: block;
}

grammar > name {
  font-weight: bold;
}

grammar > rules::before {
  content: ' {';
  opacity: .30;
}

grammar > rules::after {
  display: block;
  content: '}';
  opacity: .30;
}

rule {
  display: block;
  margin-left: 10pt;
}

rule > name {
  color: maroon;
}

description, caseName {
  opacity: .30;
  font-style: italic;
}

description::before {
  content: '(';
  padding-left: 10pt;
}

description::after {
  content: ')';
}

caseName::before {
  content: '\2014';
  padding-left: 10pt;
  padding-right: 4pt;
}

rule {
  margin-top: 12pt;
  margin-bottom: 12pt;
}

ruleDefineBody,
ruleOverrideBody,
ruleExtendBody {
  display: block;
}

ruleDefineBody > alt,
ruleOverrideBody > alt,
ruleExtendBody > alt {
  display: table;
  border-collapse: collapse;
}

ruleDefineBody > alt > choice,
ruleOverrideBody > alt > choice,
ruleExtendBody > alt > choice {
  display: table-row;
}

choice {
  // display: inline-block;
}

ruleDefineBody > alt > choice > *,
ruleOverrideBody > alt > choice > *,
ruleExtendBody > alt > choice > * {
  display: table-cell;
}

description {
  display: inline-block;
}

ruleDefineBody > alt::before,
ruleOverrideBody > alt::before,
ruleExtendBody > alt::before {
  display: none;
}

ruleDefineBody > *:first-child::before,
ruleOverrideBody > *:first-child::before,
ruleExtendBody > *:first-child::before,
ruleDefineBody > alt > choice:first-child::before,
ruleOverrideBody > alt > choice:first-child::before,
ruleExtendBody > alt > choice:first-child::before {
  display: inline-block;
  font-family: Monaco;
  text-align: right;
  width: 20pt;
  margin-right: 6pt;
}

ruleDefineBody > alt:first-child::before,
ruleOverrideBody > alt:first-child::before,
ruleExtendBody > alt:first-child::before {
  display: none;
}

ruleDefineBody > *:first-child::before,
ruleDefineBody > alt > choice:first-child::before {
  content: '=';
}

ruleOverrideBody > *:first-child::before,
ruleOverrideBody > alt > choice:first-child::before {
  content: ':=';
}

ruleExtendBody > *:first-child::before,
ruleExtendBody > alt > choice:first-child::before {
  content: '+=';
}

ruleDefineBody > alt > choice::before,
ruleOverrideBody > alt > choice::before,
ruleExtendBody > alt > choice::before {
  display: inline-block;
  text-align: right;
  width: 20pt;
  margin-left: 0;
  margin-right: 6pt;
}

choice:first-child::before {
  content: '';
  margin-left: 0;
  margin-right: 0;
}

choice::before {
  content: '|';
  margin-left: 2pt;
  margin-right: 2pt;
}

bind > name {
  margin-left: 1pt;
  vertical-align: sub;
  font-size: 75%;
  opacity: .30;
}

app {
}

seq {
  display: inline-block;
}
seq > * {
  margin-left: 2pt;
  margin-right: 2pt;
}

seq > *::first-child {
  margin-left: 0;
}

seq > *::last-child {
  margin-right: 0;
}

star::after {
  content: '*';
}

plus::after {
  font-size: 75%;
  vertical-align: super;
  content: '+';
}

lookahead::before {
  content: '&';
}

not::before {
  content: '~';
}

paren::before,
paren::after {
}

paren::before {
  content: '(';
}

paren::after {
  content: ')';
}

arr::before,
arr::after {
  font-family: Monaco;
}

arr::before {
  content: '[';
}

arr::after {
  content: ']';
}

str::before {
  content: '``';
}

str::after {
  content: "''";
}

prim {
  font-family: Monaco;
  _font-size: 85%;
}

string::before,
string::after,
str::before,
str::after {
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  opacity: .30;
}

string::before {
  content: '"';
}

string::after {
  content: '"';
}

string {
  font-family: Monaco;
}

specialChar {
  color: slateblue;
}

charClass {
  font-family: Monaco;
  _font-size: 85%;
}

charClass::after {
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  font-size: 50%;
  font-style: italic;
  vertical-align: super;
  content: 'RE';
}
}
