:root {
  --bgColor: #0fddaf;
  --txtColor: #ffffff;
  --borColor: rgba(0, 0, 0, 0);
  --sizeVar: 8px;
  --textPrimary: #4b4760;
  --textSecondary: #7f7989;
  --borderColor: #cccccc;
}
body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: calc(var(--sizeVar) * 1.75);
}
h2    { color: #c44; margin: 0; }
h3    { color: #fc4; margin: 0; }
.col  { display:flex; flex-direction:column; font-size:20px; border:1px solid #ccc }
.row  { display:flex; width:100%; }
.hdr  { text-align:center; background-color:#eee; margin:8px 6px 2px 6px; padding:6px; border-radius:4px; }
.usr  {
    text-align:left; font-family:monospace; color:#484;
    margin:2px 6px 2px 6px; height:auto; padding: 6px;
    border:1px solid #eee; border-radius:6px;
    overflow-wrap:auto;
}
.dict { text-align:left; margin:0 6px 0 6px; }
.code { height:36px; width:100%; font-size:24px; padding:6px; margin-bottom:3px; }
.cmd  { color:#48f; margin: 2px; }
.txt  { display:block; padding:8px; width:auto; font-family:monospace; overflow-y:scroll; }
.ss   { padding:8px; color:#484; background-color:#eee; font-family:monospace; width:auto; }
.CodeMirror  { width:100%; border:1px solid #444; resize: vertical; overflow:auto; }
/* title and menu bars */
cite         { display:block; padding:6px; width:auto; background-color:#ec8; }
cite span    { color:black; padding-left:12px; font-family:monospace; }
cite i       { padding:2px; }
cite i:hover { background-color:#ff8; padding:2px; }
nav          { display: flex; flex-direction:column; width:28px; padding:4px; }
nav p        { height:4px; background-color:#eee; margin: 3px 0 3px 0; }
nav i        { float:right; background-color:#fff; padding:2px; }
nav i:hover  { background-color:#ddd; padding:2px; }

/* tree */
ul.tree         { margin:8px; }
ul.tree li      { list-style-type: none; position: relative; left:-1em; }
ul.tree li ul   { display: none; }
ul.tree li ul a { color: #888; }
ul.tree li.open > ul { display: block; margin:0 -1em; }
ul.tree li a    { color: #444; text-decoration: none; }
ul.tree li a:before {
    height: 1em; padding:0 .1em; font-size: .8em; display: block;
    position: absolute; left: -1em; top: .2em;
}
ul.tree li > a:not(:last-child):before      { content: '+'; }
ul.tree li.open > a:not(:last-child):before { content: '-'; }

/* tooltip */
.tip   { position: relative; display:inline-block; }
.tip i {
    visibility: hidden;
    color: #fff; background-color: #555; text-align: center;
    padding: 0.1em 1em 0.1em 1em; border-radius: 6px;
    position: absolute;                    /* position the tooltip text */
    z-index: 999; bottom: -20%; left: 100%; margin-left: 20px;
    opacity: 0; transition: opacity 0.6s;  /* fade in tooltip */
}
.tip:hover i  { visibility:visible; opacity: 0.90; }
.tip i::after {                            /* clear tooltip arrow */
  content : "";
  position: absolute; top: 50%; left: 0px;
  margin-left: -5px; border-width: 5px; border-style: solid;
  border-color: #555 transparent transparent transparent;
}