html {
  font-family: sans-serif;
}

table {
  box-sizing: border-box;
  border: 1px solid gray;
  width: calc(100% - 3px);
  border-collapse: collapse;
  position: relative;
}

#dialog-container table {
  width: calc(100% - 3px);
}

table.mutable {
  overflow: hidden;
}

table tr {
  background-color: #FFF;
}

table tr:nth-child(odd) td {
  background-color: #EEE;
}

th, td {
  text-align: center;
  position: relative;
  z-index: 100;
  margin: 0;
  background-color: inherit;
  border: 1px solid gray;
  border-collapse: collapse;
  margin-left: -1px;
  margin-top: -1px;
  height: 3em;
  vertical-align: middle;
}

table.mutable th, table.mutable td {
  display: inline-flex;
  position: relative;
  height: auto;
  top: 0;
  height: 3em;
  align-content: center;
  text-align: center;
  align-items: center;
}

th.mutableCell, td.mutableCell {
  z-index: 50;
}

th.fixedCol, td.fixedCol {
  background-color:blue;
  color: white;
}

.mutable div.tableData {
  width: 100%;
  text-align: center;
}

table.mutable th.mutableCell div.tableData {
  width: 67%;
  margin: 0 auto;
  line-height: 1.05em;
}

.hidden {
  display: none;
}

.tableContainer {
  position: relative;
}

.tableControls {
  position: absolute;
  top: 0.85em;
  z-index: 200;
}

.previousControl, .nextControl {
  font-size: 22px !important;
  position: absolute;
}

.previousControl {
  left: 2px;
}

.previousControl::after {
  content: '\25c0';
}

.nextControl {
  right: 5px;
}

.nextControl::after {
  content: '\25b6';
}

.tableControls a:link, a:visited {
  color: black;
  text-decoration: none !important;
}

@media screen and (min-width:768px) {
  table, table.mutable {
    overflow: auto;
    width: 100%;
  }

  .tableControls {
    display: none;
  }

  td, th {
    width: auto;
  }

  table.mutable th, table.mutable td {
    display: table-cell;
    position: relative;
  }
}