/* Basic table styling */
table {
  text-align: left;
  border-collapse: collapse;
  margin: 0;
  position: relative;
}

table thead th {
  font-weight: bold;
  cursor: pointer;
  margin: 0;
  padding: 2px 5px;
}

td,
th {
  margin: 0;
  padding: 2px 5px;
}

tr {
  margin: 0;
  padding: 0;
}

/* Specific table types */
table.gridded {
  border-collapse: collapse;
  margin: 0;
}

table.gridded.centered {
  margin: 0 auto;
}

table.gridded thead th,
table.gridded thead td {
  text-align: center;
  z-index: 20;
  background-color: #eef;
  border: 1px solid #333;
  font-weight: bold;
  border-bottom: 2px solid #333;
}

table.gridded td {
  border: 1px solid #333;
}

table.gridded tbody th {
  z-index: 20;
  background-color: #eef;
  border: 1px solid #333;
  font-weight: bold;
  border-right: 2px solid #333;
}

table.mce-item-table {
  width: auto;
}

table.gb thead th,
table.gb thead td,
table.gbl thead th,
table.gbl thead th.locked {
  background-color: var(--middle-gray);
  text-align: center;
  position: relative;
  z-index: 20;
}

table.gb {
  border-collapse: collapse;
  margin: 0;
  position: relative;
  background-color: var(--white);
}

table.gbl td.locked,
table.gbl th.locked {
  border-right: 2px solid #00f;
}

/* Sorting arrows */
table.gb thead th.sortable::after,
table.gb thead th.not-sortable::after {
  content: "\25bc";
  font-size: 12px;
  margin-left: 2px;
  display: inline-block;
  transition: transform 0.2s ease;
}

table.gb thead th.sortable[aria-sort="ascending"]::after {
  transform: rotate(180deg);
}

table.gb
  thead
  th.sortable:not([aria-sort="ascending"]):not(
    [aria-sort="descending"]
  )::after {
  color: gray;
}

/* Topic column exception */
table.gb
  thead
  th.sortable:nth-of-type(2):not([aria-sort="ascending"]):not(
    [aria-sort="descending"]
  )::after {
  color: inherit;
}

table.gb thead:has(th[aria-sort="ascending"]),
table.gb thead:has(th[aria-sort="descending"]) {
  th.sortable:nth-of-type(2):not([aria-sort="ascending"]):not(
      [aria-sort="descending"]
    )::after {
    color: gray;
  }
}

/* Row styles */
tr.even,
tr.even td {
  background-color: #fff;
}
tr.odd,
tr.odd td {
  background-color: #f8f6fc;
}
tr.highlight,
tr.highlight td {
  background-color: #ddf;
}
tr.bordered td {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
tr.grid td {
  border: 1px solid #000;
}
tr.dbltop td {
  border-top: 3px double #000;
}

/* Alignment helpers */
td.c,
th.c,
input.c {
  text-align: center;
}
td.r {
  text-align: right;
}

/* Category header colors */
table.gb .catdf {
  background-color: #eef;
}
table.gb .cat0 {
  background-color: #ddf;
}
table.gb .cat1 {
  background-color: #dfd;
}
table.gb .cat2 {
  background-color: #fdd;
}
table.gb .cat3 {
  background-color: #dff;
}
table.gb .cat4 {
  background-color: #ffd;
}
table.gb .cat5 {
  background-color: #fdf;
}
table.gb .cat6 {
  background-color: #aaf;
}
table.gb .cat7 {
  background-color: #afa;
}
table.gb .cat8 {
  background-color: #faa;
}
table.gb .cat9 {
  background-color: #aff;
}

/* Table container */
div#tbl-container {
  position: relative;
  margin: 10px 0;
  width: 99.5%;
  height: auto;
}

/* Items */
div.item {
  margin-bottom: 10px;
  padding: 5px;
  border-radius: 5px;
  border-bottom: 1px solid #ccc;
}

/* Calendar table */
table.cal {
  border-collapse: collapse;
  width: 100%;
}

table.cal thead th {
  text-align: center;
  background-color: #ddf;
  border: 1px solid #000;
}

table.cal td {
  border: 1px solid #000;
  width: 14%;
  height: 2.5em;
  vertical-align: top;
}

.day {
  font-size: 80%;
  background-color: #ddf;
}
.today {
  background-color: #fdd;
}
.caldatebar {
  background-color: #ddf;
}

span.calitem {
  padding: 0 4px;
  background-color: #0ff;
  margin: 1px;
  display: inline-block;
}

/* Date picker */
.dpTable {
  font-size: 90%;
  text-align: center;
  color: #505050;
  background-color: #ece9d8;
  border: 1px solid #aaaaaa;
}

.dpTD,
.dpDayTD {
  border: 1px solid #aaaaaa;
  background-color: #cccccc;
  color: white;
}

.dpDayHighlightTD {
  background-color: #cccccc;
  border: 1px solid #aaaaaa;
}

.dpTDHover {
  background-color: #aca998;
  border: 1px solid #888888;
  cursor: pointer;
  color: red;
}

.dpTitleText {
  font-weight: bold;
}
.dpDayHighlight {
  color: #4060ff;
  font-weight: bold;
}

.dpButton,
.dpTodayButton {
  font-size: 90%;
  color: gray;
  background: #d8e8ff;
  font-weight: bold;
  padding: 0;
}