body {padding: 20px;}
h1 {
  font-size: 16pt; padding: 0; margin: 0;
  margin-bottom: 10px;
}

.console {
  margin-bottom: 10px;
  font-size: 80%;
  display: none;
} .console.in-use {background: #f5f5f5;}
.console.error {color: #d00;}


/* position textareas and renderings over each other */
.areas {position: relative; width: 90%; height: 18em;}

.json textarea,
.json pre,
.csv textarea,
.csv .table,
.json .drop {
  width: 100%; height: 100%;
  position: absolute;
}

.csv .table {overflow-x: scroll;}
.json pre {cursor: pointer;}

.json .drop {
  opacity: 0.5; background-color: #444;
  vertical-align: middle; text-align: center;
  color: #fff; font-size: 40pt;
  padding-top: 75px;
}

/* show empty textarea by default */
.json textarea {display: block;}
.json .rendered {display: none;}
.json .drop {display: none; z-index: 100;}
.csv textarea {}
.csv .rendered {display: none;}

.json .error a.report {font-weight: bold;}
.json .warning {margin-top: 5px; color: #888;}
.json .error {
  display: none;
  margin-top: 5px;
  color: #a00; font-weight: normal;
}
.json .permalink {display: none;}

.csv {color: black;margin-top: 30px;}
.csv textarea {background-color: #f5f5f5; color: #888;}


/** csv rendered table **/

.csv table {font-size: 10pt;}
.csv table tr {background-color: #fff;}
.csv table thead tr,
.csv table tbody tr:nth-child(2n) {background-color: #f8f8f8;}

.show-render-all {display: none;}

.csv td, .csv th {
  max-width: 250px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1em;
  border: 1px solid #aaa;
  padding: 6px 6px;
}

/** footer **/

footer {
  margin-top: 30px;
}

footer p {
  display: inline-block;
  line-height: 25px;
  border-top: 1px solid #888;
  padding-top: 5px;
}

/* harmonize bootstrap and highlightjs background colors */
.hljs {background-color: #f5f5f5 !important;}