.hljs-comment,.hljs-quote{color:#7d7a68}.hljs-attribute,.hljs-link,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#d73737}.hljs-built_in,.hljs-builtin-name,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#b65611}.hljs-bullet,.hljs-string,.hljs-symbol{color:#60ac39}.hljs-section,.hljs-title{color:#6684e1}.hljs-keyword,.hljs-selector-tag{color:#b854d4}.hljs{display:block;overflow-x:auto;background:#fefbec;color:#6e6b5e;padding:.5em}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
.rendered_html tr,
.rendered_html th,
.rendered_html td {
 text-align: left;
 vertical-align: middle;
 padding: 0.42em 0.47em;
 line-height: normal;
 white-space: normal;
 max-width: none;
 border: none;
}
.rendered_html td {
 font-family: sans-serif !important;
 font-size: 9.3pt;
}
.rendered_html table {
 font-family: sans-serif !important;
 table-layout: auto !important;
 margin-left: 8px;
 margin-right: auto;
 border: none;
 border-collapse: collapse;
 border-spacing: 0;
 color: #e2e5f2;
 table-layout: fixed;
}
.rendered_html thead {
 font-family: sans-serif !important;
 font-size: 10.3pt !important;
 background: #27313d;
 color: #bbc2e1;
 border-bottom: 1px solid #27313d;
 vertical-align: bottom;
}
.rendered_html tbody tr:nth-child(odd) {
 background: #3f495a;
}
.rendered_html tbody tr {
 background: #394251;
}
.rendered_html tbody tr:hover:nth-child(odd) {
 background: #3d4757;
}
.rendered_html tbody tr:hover {
 background: #373f4e;
}
.rendered_html * + table {
 margin-top: .05em;
}



/* ****************************************************************** */
.ftable tr,
.ftable th,
.ftable td {
 text-align: left;
 vertical-align: middle;
 border: 1px dashed #8e8;
 padding: 0.42em 0.47em;
 line-height: normal;
 white-space: normal;
 max-width: none;
/* border: none;*/
}
.ftable td {
 font-family: sans-serif !important;
 font-size: 9.3pt;
}
.ftable table {
 font-family: sans-serif !important;
 margin-left: 8px;
 margin-right: auto;
 border: none;
 border-collapse: collapse;
 border-spacing: 0;
 color: #e2e5f2;
 table-layout: fixed;
}
.ftable thead {
 font-family: sans-serif !important;
 font-size: 10.3pt !important;
 background: #27313d;
 color: #bbc2e1;
 border-bottom: 1px solid #27313d;
 vertical-align: bottom;
}
.ftable tbody tr:nth-child(odd) {
 background: #3f495a;
}
.ftable tbody tr {
 background: #394251;
}
.ftable tbody tr:hover:nth-child(odd) {
 background: #3d4757;
}
.ftable tbody tr:hover {
 background: #373f4e;
}
.ftable * + table {
 margin-top: .05em;
}




.tryit-error {
  color: red;
  border-style: dotted;
  width: 90%;
  display: none
}

.tryit-code {
  border-style: solid;
  width: 100%;
  background-color: lightgrey;
  height: 7rem;
}

.tryit-display {
  border-style: solid;
  border-color: lightgrey;
  border-width: 1px;
  /*width: 80%;*/
  min-height: 1rem;
  overflow-x: scroll ;
  overflow-y: scroll;
}

.left-row {
  position: static !important; 
  width: auto ; 
  display: inline-block ;
}

.right-row {
  position: static !important;
  display: inline-block !important; 
  width: 60%; 
  top: -75px
}

body { 
    padding: 2.5rem;
    padding-right: 2.5rem;
    overflow-x: hidden;
    min-width: 320px;
    background: #fff;
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    font-size: 14px;
    line-height: 1.4285em;
    color: rgba(0,0,0,.87);
}

textarea.tryit {
  width: 100%;
}

h1 {
  text-align:center;
  color: #4287f5;
  font-size: 3rem;
}


body {
  counter-reset: h2counter;
}

h1 {
    counter-reset: h2counter;
    padding-bottom: 1.5rem;

}

h2 {
  counter-reset: h3counter;
}

h2:before {
    content: counter(h2counter) ".\0000a0\0000a0";
    counter-increment: h2counter;
    
}

h3 {
  counter-reset: h4counter;
}

h3:before {
    content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
    counter-increment: h3counter;
}



h4:before {
    content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) ".\0000a0\0000a0";
    counter-increment: h4counter;
}

h1, h2, h3, h4, h5, p, ul, li {
  /*font-family: 'Dosis', sans-serif;*/
  font-family: 'Titillium Web', sans-serif;
}

p {
  font-size: 1.4em;
}

ul, li {
  font-size: 1.2rem;
  font-style: italic;
}

ul ul {
  font-size: 1.1rem;
  font-style: italic;
}

ul ul ul {
  font-size: 0.9rem;
  font-style: italic;
}

/* Page support */

div[data-visible="true"] {
  display: block;
}

div[data-visible!="true"] {
  display: none;
}



.expression {
    display: inline;
    width: 30%;
    min-width: 15rem;
    background-color: #606080;
    color: white;
    padding-right: 2rem;
    padding-left: 1rem;
}

.expression::before {
  content:"eval: ";
}
.expression-value {
    display: inline;
    padding-left: 2rem
    width: 60%;
}

div.D2:nth-child(even)  {
  display: inline-block;
  background-color: #ddffdd;
  width: 20%;
  font-weight: 800;
  font-size: 95%;
}

div.D2:nth-child(odd)  {
  display: inline-block;
  width: 70%;
}

/* Table of contents TOC */


#toc_container a:hover {
  color: #ddffff !important;
  cursor: pointer;
  background-color: #8888ff;
}

.logo {
  text-align: center;
  background-color: white;
  padding-left: -2rem;
}
.save_all:hover {
    color: #00eeff !important;
}

.click_me {
   position: fixed;
   padding-top: 50rem;
   margin-left: -35rem;
   /*margin-top:  20rem;*/
   font-size: 4rem;
   transform: rotate(-90deg);
   opacity: 0.1;
}

@media only screen and (max-width: 800px) {
  .click_me {
    font-size: 3rem;
    margin-left: -34.5rem;
  }
}



.toc_title {
    font-weight: 700;
    text-align: center;
    font-size: 2rem;
    padding-bottom: 2rem;
}

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toc0 {
    font-size: 1.2rem;
    padding-bottom: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #333;
    margin-top: 0.75rem;
}

.toc_title + .toc0 {
    border-top: none;
    margin-top: 0.75rem;
    padding-top: 0rem;
}


.toc0 a {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white !important; 
}

.toc1 {
  font-size: 1.15rem;
  text-align:left;
  color: #84a1d0;
}

.toc2 {
  font-size: 1.05rem;
  text-align:left;
  margin-left: 15px;
  color: #84a1d0;
}

.toc3 {
  font-size: 0.9rem;
  text-align:left;
  margin-left: 25px;
  color: #84a1d0;
}

.toc4 {
  font-size: 0.85rem;
  text-align:left;
  margin-left: 35px;
  color: #84a1d0;
}

.toc1 a, .toc2 a, .toc3 a, .toc4 a {
  color: #84a1d0;
}


#toc_container li, #toc_container ul, #toc_container ul li{
    list-style: outside none none !important;
}

#toc_inner {
  max-height: 75vh;
  overflow-y: scroll;
  /*background-color: #eeffff;*/
}

/** END TOC */

.pastel0 {background: #d8f9fd; text-align: right; font-weight: bold; color: #0e1000; }
.pastel1 { background: #aae8de; text-align: right; font-weight: bold; }
.pastel2 { background: #ffffb3; text-align: right; font-weight: bold; }
.pastel3 { background: #bce0f7; text-align: right; font-weight: bold; color: #020258; }
.pastel4 { background: #fbdfdf; text-align: right; font-weight: bold; color: #020800;}
.pastel5 { background: #ded9ea; text-align: right; font-weight: bold; color: #0e0113;}
.pastel6 { background: #ffd8ac; text-align: right; font-weight: bold; }
.pastel7 { background: #b3de69; text-align: right; font-weight: bold; color: #170404;}
.pastel8 { background: #fccde5; text-align: right; font-weight: bold; }
.pastel9 { background: #d9d9d9; text-align: right; font-weight: bold; }

.CodeMirror { 
    height: auto;
}

.CodeMirror-scroll {
  max-height: 50rem;
}

/*
.CodeMirror-panel .info-panel {
    display: flex;
    justify-content: space-between;
    height: 32px;
}*/

/*    PAGE MARKERS    */

.tryit-container {
  margin-bottom: 3rem !important;
}

.try-page {
  padding-top: 1rem;
}

div.try-page[data-pagevisible="true"] {
  display: block;
  /*background-color: #ddddff;*/
}

div.try-page[data-pagevisible="false"] {
  display: none;
}

/* helper for include locations */
.icon-right {
    position: relative;
    float: right;
    top: -3rem;
}

p.tryit {
    color: red;
    background-color: #eeeeff;
    margin-bottom: -12px;
    padding-bottom: 0px;
}

p.md {
  color: darkgreen;
  background-color: #eeffee;
  margin-bottom: -12px;
  padding-bottom: 0px;
}

p.html {
  color: darkred;
  background-color: #ffeeee;
  margin-bottom: -12px;
  padding-bottom: 0px;
}

.shrink {
  font-weight: bolder;
  font-size: 1.2rem;
  color: #e2e2ef;
  background-color: lightslategrey;
}

.active.shrink {
  margin-bottom: -20px;
  padding-bottom: 0px;
/*  border-top-left-radius: 5px;
  border-top-right-radius: 5px;*/
}

.my-styled {
  border-radius: 5px;
  border: 1px solid #73AD21;
  padding-right: 1rem
  padding-bottom: 1rem;
  margin-left: 3rem;
  margin-right: 1rem;
  margin-bottom: 2rem; 
}
.my-styled~.shrink {
  font-weight: bolder;
  font-size: 1.5rem;
  color: #d2d2ef;
  background-color: lightslategrey;
}