/* 
 * For match spots table.
 * /
 
/*
 * ---------------------------------------------------------------------
 * For Row and Column highlighting (using CSS only) refer to
 * https://css-tricks.com/simple-css-row-column-highlighting/
 * ---------------------------------------------------------------------
 *            * -A-
 *            |
 *  Use the above with the below.
 *                           |
 *                           * -B-
 * ---------------------------------------------------------------------
 * For FIXED HEADER and FIXED 1st COLUMN refer to
 * https://css-tricks.com/a-table-with-both-a-sticky-header-and-a-sticky-first-column/
 * ---------------------------------------------------------------------
 */


/* --------------------------------------------------------------
** Highlight both row and column.
**/

/* Highlight the row the cursor is on. */
tr:hover {
    background-color: rgba(126, 255, 0, 0.3);
  }

/* Highlight column.  (Method 'A' above) */
    /* width: 100%; */
td:hover::after,
th:hover::after {
    content: "";
    position: absolute;
    background-color: rgba(126, 255, 0, 0.3);
    left: 0;
    top: -5000px;
    height: 10000px;
    z-index: -1;
}
/* ----------------------------------------------------------- */



/* --------------------------------------------------------------
** Next 4 are for keeping CAPTION, COLUMN LABELS, and
** ROW LABELS visible when scrolling vertically or
** horizontally.
**
**   (Method 'B' above)
**  2021may23 -- V-scroll working.  H-scroll NOT WORKING.
*/

/* Keep caption visible when scrolling. */
caption {
    text-align: center;
    position: stickey;
    left: 0;
    padding: 0.25rem;
}

/* Column labels stay in place when v-scrolling. */
thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* First column labels stay in place on h-scrolling. */
thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
}

/* First column labels stay in place on h-scrolling. */
tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
}
/* ----------------------------------------------------------- */



/* --------------------------------------------------------------
** .FixedHeader was first shot at keeping column labels
** in place when scrolling vertically.
*/

.FixedHeader {
    overflow-y: auto;
    height: 18rem;
}

/*
 * See the 'thead th' entry above.
 *
.FixedHeader thead th {
    position: sticky;
    top: 0;
}
**
**/
/* ----------------------------------------------------------- */