.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url('/static/images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}
table.tableSection {
        display: table;
        width: 100%;
    }
    table.tableSection thead, table.tableSection tbody {
        float: left;
        width: 100%;
    }
    table.tableSection tbody {
        overflow: auto;
        height: 300px;
    }
    table.tableSection tr {
        width: 100%;
        display: table;
        text-align: left;
    }
    table.tableSection th, table.tableSection td {
        width: 33%;
    }

.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

table.dataTable.select tbody tr,
table.dataTable thead th:first-child {
  cursor: pointer;
}

table.dataTable tbody tr.selected,
table.dataTable tbody th.selected,
table.dataTable tbody td.selected {
  color: #000000;
  font-weight: bold;
}

table.dataTable tbody > tr.selected,
table.dataTable tbody > tr > .selected {
  /*background-color: #337ab7;*/
  background-color: #e0f1d8;

}

.fixed-table-body{
  height: auto;
}
.profile-thumbnail {
    position: absolute;
}
.profile-header {
    min-height: 260px;
    margin-left: 280px;
}
div.post-tabs {
    margin-top: 16px;
}
ul.posts {
    list-style-type: none;
    padding: 0px;
    margin: 16px 0px 0px 0px;
    border-top: 1px solid #e0e0e0;
}
div.post-tabs ul.posts {
    margin: 0px;
    border-top: none;
}
ul.posts li.post {
    padding: 8px;
    border-bottom: 1px solid #e0e0e0;
}
ul.posts li.post:hover {
    background-color: #f0f0f0;
}
div.post-date {
    float: right;
}
div.post-author {
    font-weight: bold;
}
div.post-thumbnail {
    position: absolute;
}
div.post-content {
    margin-left: 48px;
    min-height: 48px;
}
div.post-footer {
    text-align: right;
}
ul.comments {
    list-style-type: none;
    padding: 0px;
    margin: 16px 0px 0px 0px;
}
ul.comments li.comment {
    margin-left: 32px;
    padding: 8px;
    border-bottom: 1px solid #e0e0e0;
}
ul.comments li.comment:nth-child(1) {
    border-top: 1px solid #e0e0e0;
}
ul.comments li.comment:hover {
    background-color: #f0f0f0;
}
div.comment-date {
    float: right;
}
div.comment-author {
    font-weight: bold;
}
div.comment-thumbnail {
    position: absolute;
}
div.comment-content {
    margin-left: 48px;
    min-height: 48px;
}
div.comment-form {
    margin: 16px 0px 16px 32px;
}
div.pagination {
    width: 100%;
    text-align: right;
    padding: 0px;
    margin: 0px;
}
div.flask-pagedown-preview {
    margin: 10px 0px 10px 0px;
    border: 1px solid #e0e0e0;
    padding: 4px;
}
div.flask-pagedown-preview h1 {
    font-size: 140%;
}
div.flask-pagedown-preview h2 {
    font-size: 130%;
}
div.flask-pagedown-preview h3 {
    font-size: 120%;
}
.post-body h1 {
    font-size: 140%;
}
.post-body h2 {
    font-size: 130%;
}
.post-body h3 {
    font-size: 120%;
}
.table.followers tr {
    border-bottom: 1px solid #e0e0e0;
}

.jumbotron {
    padding-top: 0;
    padding-bottom: 1em;
}

/* Analysis page: the Grafana frame fills the panel's width and most of the window's height;
   Grafana lays itself out inside it. */
#output-iframe {
  display: block;
  width: 100%;
  height: calc(100vh - 220px);
  min-height: 480px;
  margin-top: 1.5em;
  border: 0;
}
/* DataTables 2+ right-aligns columns it detects as numbers/dates (account numbers, DDIs) and moves
   their sort arrow to the left. Keep the DataTables 1.x look: left-aligned, arrow on the right,
   unless a column asks for right alignment (className 'dt-right' or 'text-right', e.g. rates). */
table.dataTable th.dt-type-numeric:not(.dt-right):not(.text-right),
table.dataTable th.dt-type-date:not(.dt-right):not(.text-right),
table.dataTable td.dt-type-numeric:not(.dt-right):not(.text-right),
table.dataTable td.dt-type-date:not(.dt-right):not(.text-right) {
    text-align: left;
}
table.dataTable th.dt-type-numeric:not(.dt-right):not(.text-right) div.dt-column-header,
table.dataTable th.dt-type-date:not(.dt-right):not(.text-right) div.dt-column-header {
    flex-direction: row;
}
table.dataTable.table-condensed > thead > tr th.dt-type-numeric:not(.dt-right):not(.text-right) .dt-column-order,
table.dataTable.table-condensed > thead > tr th.dt-type-date:not(.dt-right):not(.text-right) .dt-column-order {
    left: auto;
    right: 4px;
}

/* Right-aligned columns (className 'dt-right' or 'text-right': amounts, counts): the sort arrow sits
   just right of the heading, inside its own column, and the cells keep the same right edge, so the
   numbers line up under the heading (DataTables puts the arrow on the left, where it reads as the
   previous column's). */
table.dataTable th.text-right div.dt-column-header,
table.dataTable th.dt-right div.dt-column-header {
    flex-direction: row;
}
table.dataTable.table-condensed > thead > tr > th.text-right,
table.dataTable.table-condensed > thead > tr > th.dt-right {
    padding-left: 5px;
    padding-right: 5px;
}
table.dataTable.table-condensed > thead > tr > th.text-right .dt-column-order,
table.dataTable.table-condensed > thead > tr > th.dt-right .dt-column-order {
    left: auto;
    right: auto;
}
/* 5px cell padding + the 8px arrow + the header's 4px gap: numbers end where the heading text ends */
table.dataTable.table-condensed > tbody > tr > td.text-right,
table.dataTable.table-condensed > tbody > tr > td.dt-right {
    padding-right: 17px;
}

/* Pinned layout (desktop only): the navbar, the sidebar, the main panel's heading and each
   table's length/search row and column headings stay visible while the page scrolls.
   base.html's pinLayout() sets the offsets from the real heights:
   --pin-top: navbar height + PIN_GAP (where the sidebar and the main heading sit, level),
   --pin-heading-h: height of the pinned main heading, --dt-controls-h: per table. */
@media (min-width: 768px) {
    .navbar {
        position: sticky;
        top: 0;
        z-index: 1030;
    }
    .pin-sidebar {
        position: sticky;
        top: var(--pin-top, 64px);
        max-height: calc(100vh - var(--pin-top, 64px));
        overflow-y: auto;
    }
    .pin-heading {
        position: sticky;
        top: var(--pin-top, 64px);
        z-index: 20;
        /* white strip above the heading (1px wider each side, over the panel border) covers the gap below the navbar */
        box-shadow: 0 calc(-1 * var(--pin-gap, 12px)) 0 1px #fff;
    }
    .dt-container > .dt-layout-row:first-child {
        position: sticky;
        top: calc(var(--pin-top, 64px) + var(--pin-heading-h, 0px));
        z-index: 19;
        background: #fff;
        margin-left: 0;
        margin-right: 0;
        padding: 6px 0;
    }
    .dt-container table.dataTable > thead > tr > th {
        position: sticky;
        top: calc(var(--pin-top, 64px) + var(--pin-heading-h, 0px) + var(--dt-controls-h, 0px));
        z-index: 18;
        background: #fff;
        box-shadow: inset 0 -2px 0 #ddd;
    }
}