/**
* Based on Brian Park's MIT-licensed Angular-Json-Human directive, this works on trees.
* Angular directive to convert JSON into human readable table. Inspired by https://github.com/marianoguerra/json.human.js.
* @version v1.2.1 - 2014-12-22
* @link https://github.com/yaru22/angular-json-human
* @author Brian Park <yaru22@gmail.com>
* @license MIT License, http://www.opensource.org/licenses/MIT
*/
/**
* DISCLAIMER: This CSS is modified from https://github.com/marianoguerra/json.human.js
*/

/* --- common css classes for QW Query Results table (class + <table>, <tr>, <td>) and tree displays (class + <li> or <ul>) ---- */

.ajtd-type-object,
.ajtd-type-array,
.ajtd-type-object table,
.ajtd-type-array tr,
.ajtd-type-array td {
  border-collapse: collapse;
  width: auto;
  margin-bottom: 0;
}
.ajtd-key {
  display: inline-block;
  font-style: italic;
  margin: 0;
  padding: .25rem;
  color: #2ca01c;
  font-size: .75rem;
  word-break: break-word;
}
.ajtd-value {
  margin: 0;
  padding: .25rem;
  font-size: .75rem;
  word-break: break-word;
}
.ajtd-value:first-child {
  padding: 0;
}
.ajtd-type-bool,
.ajtd-type-number {
  font-weight: 500;
  text-align: center;
  color: #cc2a2e;
}
.ajtd-type-string {
  font-style: italic;
  color: #333;
}
.ajtd-empty {
  font-style: italic;
  color: #999;
  font-size: small;
}

/* for TREES ------------------------------------------------------------ */
li.ajtd-type-array,
ul.ajtd-type-array {
  padding: 0;
  margin: 0;
}

ul.ajtd-type-object,
ul.ajtd-type-array {
  list-style-type: none;
}

.ajtd-type-object > li {
  padding: .25rem;
  border: 1px dashed #d1d1d1;
  border-bottom: none;
}

.ajtd-type-object li:last-child,
.ajtd-type-array li:last-child {
  border-bottom: 1px dashed #d1d1d1;
}

/* for TABLES ---------------------------------------------------------- */
table.ajtd-root {
  border: 0px solid #d1d1d1;
  margin: 0;
}
table.ajtd-root td {
  padding: .125rem;
  border: 1px solid #ececec;
}
table.ajtd-root tr:last-of-type {
  border-bottom: 1px solid #ececec;
}
table.ajtd-root th {
  background-color: #ececec;
  cursor: pointer;
}
td.ajtd-type-array {
  vertical-align: baseline;
}


/* striping alternate 'rows' for TREES and TABLES ----------------------- */
.ajtd-root > tbody > tr:nth-child(odd),
.ajtd-table > tbody > tr:nth-child(odd),
.ajtd-type-object > li:nth-child(odd),
.ajtd-type-array > li:nth-child(odd),
.data-table-wrapper > div:nth-child(odd),
.data-table-wrapper > form:nth-child(odd) {
  background-color: #f6fafd;
}

.ajtd-root > tbody > tr:nth-child(even),
.ajtd-table > tbody > tr:nth-child(even),
.ajtd-type-object > li:nth-child(even),
.ajtd-type-array > li:nth-child(even),
.data-table-wrapper > form:nth-child(even),
.data-table-wrapper > div:nth-child(even) {
  background-color: #fff;
}

/* hide and show very long strings in TABLES ----------------------------- */
.ajtd-hideContent {
  overflow: hidden;
  line-height: 1.5;
  height: 2.5rem;
}
.ajtd-editor {
  font-size: small;
  min-width: 140px;
}
.ajtd-editor-table {
  overflow: auto;
}
.ajtd-showContent {
  height: auto;
}

/*  basic <td> class  ---------------------- */
.ajtd-cell {
  word-wrap: break-word;
}

/*
 * the data-table-header is a separate div that holds the column headers, so
 * they stay visible even when the table is scrolled. This div is programatically
 * scrolled horizontally to stay in sync with the table contents.
 *
 * the spacing and font should be set the same as the table contents, since the
 * size of all the columns are specified in 'ch', and when the font changes the
 * size of a 'ch' also changes.
 */

.data-table-header-row {
  white-space: nowrap;            /* keep as a single row */
  overflow-x: scroll;             /* horizontal scroll with data */
  overflow: -moz-scrollbars-none; /* hide scrollbar in firefox */
  scrollbar-width: none;          /* a different way to hide firefox scrollbars */
  overflow-y: hidden;
  border-bottom: solid 1px #d1d1d1;
  background-color: #eceff2 !important;
  cursor: default;
  color: #555;
  height: 26px;
}

.data-table-editor-header-row {
  white-space: nowrap;            /* keep as a single row */
  border-bottom: solid 1px #d1d1d1;
  background-color: #eceff2 !important;
  cursor: default;
  color: #555;
  height: 40px;
}

.data-table-inner-header-row { /* used for headers on nested tables */
  white-space: nowrap;
  top: 0px;
  border-bottom: solid 1px #d1d1d1;
  background-color: #eceff2 !important;
  cursor: default;
  color: #555;
  height: 23px;
}

.data-table-header-row::-webkit-scrollbar {
  display: none;
}

.data-table-header-cell {
  display: inline-block;
  border-right: solid 1px #d1d1d1;
  padding-left: .25rem;
  cursor: pointer;
  font-size: .75rem; /* make sure font and size are the same as the data cells */
  overflow: hidden;
  height: 100%;
  line-height: 22px;
}
.data-table-header-cell:last-child {
  border-right: solid 0px #d1d1d1;
}
.caret-subspan {
  padding-left: .25rem;
}

/*
 * the data-table-wrapper is a div holding the table contents. We want it to show scrollbars
 * all the time. We also need it to have relative positioning, since the table rows are
 * set with absolute positioning, allowing big un-rendered gaps where the user hasn't looked
 */

.data-table-wrapper {
  width: 100%;
  height: calc(100% - 28px);
  overflow: scroll;
  position: relative;
}

.data-table {
  border: 1px solid #ececec;
}

.data-table-row {
  position: absolute;
  white-space: nowrap;
  border-left: solid 1px #d1d1d1;
  border-right: solid 1px #d1d1d1;
}

.data-table-editor-row {
  white-space: nowrap;
  padding-top: 0.25rem;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 1px;
}

.data-table-cell {
  display: inline-block;
  overflow: hidden;
  overflow-wrap: break-word;
  vertical-align: top;
  white-space: normal;
  font-size: .75rem; /* same as the header font for alignment HACK */
  padding-left: .25rem;
}

.data-table-cell-special { /* used for cells containing objects or arrays */
  display: inline-block;
  overflow: hidden;
  overflow-wrap: break-word;
  vertical-align: top;
  white-space: normal;
  font-size: .75rem; /* same as the header font for alignment HACK */
  padding: 0rem;
}

.data-table-special-value {
  font-style: italic;
  color: #2ca01c;
}

.data-table-array {
  border: 1px solid #ececec;
  /*margin: -.125rem;*/

}