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: 17em;}

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

/* fix top border bug on json textarea */
.json textarea {position: static !important;}

.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;}

.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;}


/* *******************************************************/
/* styles for react */

/* ---------------------------- */
/* GENERIC */

section {
  margin: 30px 0;
}

/* ---------------------------- */
/* COMPONENT */

/* ---------------------------- */
/* /src/js/component/nav */

.inline-tab {
  margin: 1em 0;
  padding: 0;
}
.inline-tab > .item {
  display: inline-block;
  list-style: none;
  padding: 0 1em;
  margin: 0;
  border-right: 1px solid gray;
}
.inline-tab > .item:last-child {
  border-right: 0;
}

/* ---------------------------- */
/* /src/js/component/drop */

.drop-modal {
  width: 100%; height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.drop-modal {
  opacity: 0.5; background-color: #444;
  vertical-align: middle; text-align: center;
  color: #fff; font-size: 40pt;
  line-height: 100vh;
}

/* ---------------------------- */
/* /src/js/component/csvtable */

.csv-table {
  position: relative;
  width: 90%;
  height: 17em;
  overflow-x: auto;
  overflow-y: hidden;
}

.csv-table {color: black;}
.csv-table textarea {background-color: #f5f5f5; color: #888; width: 100%; height: 100%; position: absolute;}

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

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

/* ---------------------------- */
/* /src/js/component/jsoncode */

.json-code {
  position: relative;
  width: 90%;
  height: 17em;
  overflow-x: auto;
  overflow-y: hidden;
}

.json-code {color: black;}
.row-json {background-color: white; color: black; width: 100%; height: 100%; position: absolute;}
.pretty-json {cursor: pointer; width: 100%; height: 100%; position: absolute;}

/* ---------------------------- */
/* /src/js/component/errorDialog */
/* /src/js/component/downloadDialog */

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


/* ---------------------------- */
/* TOOLS */

._hidden {
  display: none !important;
}

nav a.is-active {
  color: dimgray;
  text-decoration: underline;
  font-weight: bold;
}