table.primary {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  position: relative;
  border-collapse: collapse; 
  background-color: #f1f1f1;
  z-index: 2;
}
/* Spacing */
td, th {
  border: 3px solid #424242;
  padding: 20px;
}
th {
  background-color: #000042;
  color: white;
  border-radius: 0;
  top: 0;
  padding: 20px;
  text-align: center;
}
body {
    background-image: url('images/ChapInt-Background.jpg');
    background-position: top center;
    background-attachment: scroll;
    webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:100%;
}
.highlight0 td:nth-child(0),
.highlight1 td:nth-child(1),
.highlight2 td:nth-child(2),
.highlight3 td:nth-child(3),
.highlight4 td:nth-child(4),
.highlight5 td:nth-child(5),
.highlight6 td:nth-child(6) {
  background-color: yellow;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    position: absolute;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    z-index: 4;
    opacity: 0;
    transition: opacity .6s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip-left {
  top: -5px;
  bottom:auto;
  right: 105%;
}

.tooltip-left::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #555;
}