// @todo ggranum: Use themes, restore the asciidoctor.css import (but isolate it).
:host {
  display: flex;

  white-space: nowrap;
  outline: none;

}

.tanj-asciidoctor-container {
  display: flex;
  flex: 1;
}

.tanj-asciidoctor-body {
  display: block;
  flex: 1;
}

tanj-asciidoctor-panel {
  caption {
    padding-top: 8px;
    padding-bottom: 8px;
    color: #777
  }

  h1 {
    display: block;
    font-size: 200%;
    margin: .67em 0 .67em 0;
    font-weight: bold;
  }

  h2 {
    display: block;
    font-size: 150%;
    margin: .83em 0 .83em 0;
    font-weight: bold;
  }

  h3 {
    display: block;
    font-size: 1.17em;
    margin: 1em 0 1em 0;
    font-weight: bold;
  }

  .table {
    width: 100%;
    margin-bottom: 20px
  }

  .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    padding: 8px;
    line-height: 1.42857;
    vertical-align: top;
    border-top: 1px solid #ddd
  }

  .table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd
  }

  .table > caption + thead > tr:first-child > td, .table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > td, .table > thead:first-child > tr:first-child > th {
    border-top: 0
  }

  .table > tbody + tbody {
    border-top: 2px solid #ddd
  }

  .table .table {
    background-color: #fff
  }

  .table-condensed > tbody > tr > td, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > td, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > thead > tr > th {
    padding: 5px
  }

  .table-bordered, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
    border: 1px solid #ddd
  }

  .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
    border-bottom-width: 2px
  }

  .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9
  }

  .table-hover > tbody > tr:hover, .table > tbody > tr.active > td, .table > tbody > tr.active > th, .table > tbody > tr > td.active, .table > tbody > tr > th.active, .table > tfoot > tr.active > td, .table > tfoot > tr.active > th, .table > tfoot > tr > td.active, .table > tfoot > tr > th.active, .table > thead > tr.active > td, .table > thead > tr.active > th, .table > thead > tr > td.active, .table > thead > tr > th.active {
    background-color: #f5f5f5
  }

  table col[class*=col-] {
    position: static;
    float: none;
    display: table-column
  }

  table td[class*=col-], table th[class*=col-] {
    position: static;
    float: none;
    display: table-cell
  }

  .table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr.active:hover > th, .table-hover > tbody > tr:hover > .active, .table-hover > tbody > tr > td.active:hover, .table-hover > tbody > tr > th.active:hover {
    background-color: #e8e8e8
  }

  .table > tbody > tr.success > td, .table > tbody > tr.success > th, .table > tbody > tr > td.success, .table > tbody > tr > th.success, .table > tfoot > tr.success > td, .table > tfoot > tr.success > th, .table > tfoot > tr > td.success, .table > tfoot > tr > th.success, .table > thead > tr.success > td, .table > thead > tr.success > th, .table > thead > tr > td.success, .table > thead > tr > th.success {
    background-color: #dff0d8
  }

  .table-hover > tbody > tr.success:hover > td, .table-hover > tbody > tr.success:hover > th, .table-hover > tbody > tr:hover > .success, .table-hover > tbody > tr > td.success:hover, .table-hover > tbody > tr > th.success:hover {
    background-color: #d0e9c6
  }

  .table > tbody > tr.info > td, .table > tbody > tr.info > th, .table > tbody > tr > td.info, .table > tbody > tr > th.info, .table > tfoot > tr.info > td, .table > tfoot > tr.info > th, .table > tfoot > tr > td.info, .table > tfoot > tr > th.info, .table > thead > tr.info > td, .table > thead > tr.info > th, .table > thead > tr > td.info, .table > thead > tr > th.info {
    background-color: #d9edf7
  }

  .table-hover > tbody > tr.info:hover > td, .table-hover > tbody > tr.info:hover > th, .table-hover > tbody > tr:hover > .info, .table-hover > tbody > tr > td.info:hover, .table-hover > tbody > tr > th.info:hover {
    background-color: #c4e3f3
  }

  .table > tbody > tr.warning > td, .table > tbody > tr.warning > th, .table > tbody > tr > td.warning, .table > tbody > tr > th.warning, .table > tfoot > tr.warning > td, .table > tfoot > tr.warning > th, .table > tfoot > tr > td.warning, .table > tfoot > tr > th.warning, .table > thead > tr.warning > td, .table > thead > tr.warning > th, .table > thead > tr > td.warning, .table > thead > tr > th.warning {
    background-color: #fcf8e3
  }

  .table-hover > tbody > tr.warning:hover > td, .table-hover > tbody > tr.warning:hover > th, .table-hover > tbody > tr:hover > .warning, .table-hover > tbody > tr > td.warning:hover, .table-hover > tbody > tr > th.warning:hover {
    background-color: #faf2cc
  }

  .table > tbody > tr.danger > td, .table > tbody > tr.danger > th, .table > tbody > tr > td.danger, .table > tbody > tr > th.danger, .table > tfoot > tr.danger > td, .table > tfoot > tr.danger > th, .table > tfoot > tr > td.danger, .table > tfoot > tr > th.danger, .table > thead > tr.danger > td, .table > thead > tr.danger > th, .table > thead > tr > td.danger, .table > thead > tr > th.danger {
    background-color: #f2dede
  }

  .table-hover > tbody > tr.danger:hover > td, .table-hover > tbody > tr.danger:hover > th, .table-hover > tbody > tr:hover > .danger, .table-hover > tbody > tr > td.danger:hover, .table-hover > tbody > tr > th.danger:hover {
    background-color: #ebcccc
  }

  .table-responsive {
    overflow-x: auto;
    min-height: .01%
  }

  @media screen and (max-width: 767px) {
    .table-responsive {
      width: 100%;
      margin-bottom: 15px;
      overflow-y: hidden;
      -ms-overflow-style: -ms-autohiding-scrollbar;
      border: 1px solid #ddd
    }

    .table-responsive > .table {
      margin-bottom: 0
    }

    .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > td, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > thead > tr > th {
      white-space: nowrap
    }

    .table-responsive > .table-bordered {
      border: 0
    }

    .table-responsive > .table-bordered > tbody > tr > td:first-child, .table-responsive > .table-bordered > tbody > tr > th:first-child, .table-responsive > .table-bordered > tfoot > tr > td:first-child, .table-responsive > .table-bordered > tfoot > tr > th:first-child, .table-responsive > .table-bordered > thead > tr > td:first-child, .table-responsive > .table-bordered > thead > tr > th:first-child {
      border-left: 0
    }

    .table-responsive > .table-bordered > tbody > tr > td:last-child, .table-responsive > .table-bordered > tbody > tr > th:last-child, .table-responsive > .table-bordered > tfoot > tr > td:last-child, .table-responsive > .table-bordered > tfoot > tr > th:last-child, .table-responsive > .table-bordered > thead > tr > td:last-child, .table-responsive > .table-bordered > thead > tr > th:last-child {
      border-right: 0
    }

    .table-responsive > .table-bordered > tbody > tr:last-child > td, .table-responsive > .table-bordered > tbody > tr:last-child > th, .table-responsive > .table-bordered > tfoot > tr:last-child > td, .table-responsive > .table-bordered > tfoot > tr:last-child > th {
      border-bottom: 0
    }
  }

  table.tableblock {
    max-width: 100%;
    border-collapse: separate
  }

  table.tableblock td > .paragraph:last-child p > p:last-child, table.tableblock td > p:last-child, table.tableblock th > p:last-child {
    margin-bottom: 0
  }

  table.tableblock, td.tableblock, th.tableblock {
    border: 0 solid #dedede
  }

  table.grid-all td.tableblock, table.grid-all th.tableblock {
    border-width: 0 1px 1px 0
  }

  table.grid-all tfoot > tr > td.tableblock, table.grid-all tfoot > tr > th.tableblock {
    border-width: 1px 1px 0 0
  }

  table.grid-cols td.tableblock, table.grid-cols th.tableblock {
    border-width: 0 1px 0 0
  }

  table.grid-all * > tr > .tableblock:last-child, table.grid-cols * > tr > .tableblock:last-child {
    border-right-width: 0
  }

  table.grid-rows td.tableblock, table.grid-rows th.tableblock {
    border-width: 0 0 1px
  }

  table.grid-all tbody > tr:last-child > td.tableblock, table.grid-all tbody > tr:last-child > th.tableblock, table.grid-all thead:last-child > tr > th.tableblock, table.grid-rows tbody > tr:last-child > td.tableblock, table.grid-rows tbody > tr:last-child > th.tableblock, table.grid-rows thead:last-child > tr > th.tableblock {
    border-bottom-width: 0
  }

  table.grid-rows tfoot > tr > td.tableblock, table.grid-rows tfoot > tr > th.tableblock {
    border-width: 1px 0 0
  }

  table.frame-all {
    border-width: 1px
  }

  table.frame-sides {
    border-width: 0 1px
  }

  table.frame-topbot {
    border-width: 1px 0
  }

  td.halign-left, th.halign-left {
    text-align: left
  }

  td.halign-right, th.halign-right {
    text-align: right
  }

  td.halign-center, th.halign-center {
    text-align: center
  }

  td.valign-top, th.valign-top {
    vertical-align: top
  }

  td.valign-bottom, th.valign-bottom {
    vertical-align: bottom
  }

  td.valign-middle, th.valign-middle {
    vertical-align: middle
  }

  table tfoot th, table thead th {
    font-weight: 700
  }

  tbody tr th {
    display: table-cell;
    line-height: 1.6;
    background: #f7f8f7
  }

  tbody tr th, tbody tr th p, tfoot tr th, tfoot tr th p {
    color: rgba(0, 0, 0, .8);
    font-weight: 700
  }

  p.tableblock > code:only-child {
    background: 0 0;
    padding: 0
  }

  p.tableblock {
    font-size: 1em
  }

}