/** General **/

html
{
    margin: 20px;
}
body
{
    background-color: #123;
    color: #eee;
    font-family: Monaco, "Lucida Console", sans-serif;
    font-size: 10px;
}

a,
a:visited
{
    color: #69c;
}

a:hover
{
    color: #9cf;
}

/** Header **/

#githubLink
{
  float:right;
  text-align: right;
}
#githubLink img
{
  width: 25px;
}

/** Footer **/

#footer
{
  text-align: center;
  color: #999;
}

/** Drop Zone **/

#dropZone
{
    border: 1px dashed #999;
    text-align: center;
    padding: 80px 0;
}

/** Information Blocks **/

.information-block li
{
    list-style-type: none;  /* this is needed */
}
.information-block .item-title
{
    color: #ffec00;
}
.information-block .item-subtitle
{
    color: #ff9100;
}

#globalChartContainer #resetFilter
{
  margin-top: 10px;
}

/** Chart Styling **/

.chart-container
{
    margin: auto;
    margin-bottom: 8vw;
    /*max-width: 960px;*/
    max-height: 480px;
}

.chart {
    text-align: left;
}

/** List **/

/* List - Table */

#logList
{
    table-layout: fixed;
    width: 100%;
    padding: 20px;
    border: 1px solid #ccc
}

#logList th
{
    text-align: left;
}

#logList thead th
{
    cursor: s-resize;
}

#logList td.qs
{
    overflow: hidden;
}

#logList pre
{
    white-space: normal;
    color: #9cf;
    font-size: 11px;
    line-height: 16px;
}

/* List - Search */

#logList #search th
{
    text-align: right;
}

/* List - Sort Icon */

#logList th.sort p {
  float: left;
}

#logList .sort-icon {
      margin-left: 5px;
      padding-right: 20px;
      font-size: 12px;
      width: 8px;
      height: 8px;
      color: yellow;
      float: right;
}
#logList .sort-icon::before {
  content: "▲"; /* starting block */
  float: right;
}
#logList .sort-icon::after {
  content: "▼"; /* starting block */
  float: right;
}
#logList th.asc .sort-icon::before, /* Change colour for active */
#logList th.desc .sort-icon::after {
  color: green;
}

/* List - Pagination */

#logList .pagination-container {
  text-decoration: none;
  display: flex;            /* Makes list items align horizontally */
  justify-content: center;  /* Centers the entire pagination */
  align-items: center;      /* Vertically aligns the entire pagination */
}

#logList .pagination-container a {
  text-decoration: none;
}

#logList .prevnext-button {
  padding:5px;
}

#logList ul.pagination {
  padding-inline-start: unset;
}

#logList .pagination li {
  display:inline-block;
  padding:5px;
}

#logList .pagination li.active a.page {
  color: red;
}