th[role=columnheader]:not(.no-sort) {
  cursor: pointer;
}

th[role=columnheader]:not(.no-sort):after {
  content: '';
  float: right;
  margin-top: 7px;
  border-width: 0 4px 4px;
  border-style: solid;
  border-color: #404040 transparent;
  visibility: hidden;
  opacity: 0;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

th[aria-sort=ascending]:not(.no-sort):after {
  border-bottom: none;
  border-width: 4px 4px 0;
}

th[aria-sort]:not(.no-sort):after {
  visibility: visible;
  opacity: 0.4;
}

th[role=columnheader]:not(.no-sort):hover:after {
  visibility: visible;
  opacity: 1;
}

th {
  position: sticky;
  top: 0;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

/********************************/

td.preserveWS {
  white-space: pre-line;
}

td.nowrap {
  white-space: nowrap;
}

table:not(.layout):not(#goals) tr:hover {
  background-color: #228;
  color: white;
}

/********************************/



tr {
  cursor: pointer;
}


.sort th {
  vertical-align: top;
  background: #ddd;
}

/* Model column should always show full text */

.sort tr:nth-child(2n) {
  background-color: #eee;
}

/* Hide these columns if viewport is small; not as important */

.hide-mobile,
.hide-mobile-xs {
  display: none;
}


@media only screen and (min-width: 768px) {
  .hide-mobile {
    display: table-cell;
  }
}

@media only screen and (min-width: 480px) {
  .hide-mobile-xs {
    display: table-cell;
  }
}

.legend {
  margin-top: 5em;
}

.legend tr {
  cursor: auto;
}

.legend th {
  background: #228;
  color: #eee;
  text-align: center;
}