/* Tomorrow Theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
.tomorrow-comment, pre .comment, pre .title {
  color: #8e908c;
}

.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
  color: #c82829;
}

.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
  color: #f5871f;
}

.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
  color: #eab700;
}

.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
  color: #718c00;
}

.tomorrow-aqua, pre .css .hexcolor {
  color: #3e999f;
}

.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
  color: #4271ae;
}

.tomorrow-purple, pre .keyword, pre .javascript .function {
  color: #8959a8;
}

g > text.bb-title {
  font-size: 1.3em;
  stroke-width: 2px;
  font-weight: bold;
}

g > text.bb-title {
  font-size: 1.3em;
  stroke-width: 2px;
  font-weight: bold;
}

@media (min-width: 1200px) {
  .example-grid:has(.chart_area div) {
    display: grid;
    grid-template-columns: 45% 55%;
    grid-gap: 0 20px;
  }

  .sub_tit {
    margin-top: 0;
  }

.code {
    margin:0;
  }
  
  .code .html {
    max-height: 80px;
    overflow: auto;
  }

  .chart_area, .js code {
    overflow-y: scroll;
    margin: 0 auto;
    height: calc(100vh - 200px);
  }

  div.chart_area {
    height: calc(100vh - 100px);
  }
}

#title {
  margin-top: 0;
}

.sub_tit {
  background-color: #0a82d3;
  color: #fff;
  padding: 5px;
}

pre code {
  display: block;
  background: white;
  color: #4d4d4c;
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  line-height: 1.3;
  border: 1px solid #ccc;
  padding: 10px;
overscroll-behavior: contain;
}

code.html {
  font-size: 12px;
}


.chart_area h4 {
  border-bottom:dotted 1px;padding:10px 0 5px
}

.chart_area ul {
  font-size:1.1em;
}

#description {
  font-size: 13px;
  color: gray;
  display: inline-block;
}

.sparkline {  
  border: solid 1px #eee;
  width: 150px;
  height: 50px;
  float: left;
}

.chart_area::after {
  display: block;
  float: none;
  clear: left;
  content: "";
}

@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/alfaslabone/v17/6NUQ8FmMKwSEKjnm5-4v-4Jh2dJhe_escmA.woff2) format('woff2');
}

body.dark {
  background-color: #000;
  color: #d4d4d4;
}

.dark .sub_tit {
  background-color: #03568e;
}

.dark .code .html {
  background-color: #ccc;
  filter: invert(1);
}

.dark .hljs {
  background-color: #ccc;
  filter: invert(1);
}

.dark .code .button.clipboard {
  color: #000;
}

.dark .code .button.clipboard:hover {
  color: #fff;
}