body {
  font-family: Poppins;
  line-height: 1.4;
  color: #333;
  background-color: #fff;
  padding: 0 5vw;
}

/* Standard Tables */

table {
  margin: 1em 0;
  border-collapse: collapse;
  border: 0.1em solid #d6d6d6;
}

th,
td {
  padding: 0.25em 0.5em 0.25em 1em;
  vertical-align: text-top;
  text-align: left;
  text-indent: -0.5em;
  border: 0.1em solid #d6d6d6;
}

th {
  vertical-align: bottom;
  background-color: #f0e3ac;

}

/* Starts multiple sticky column headers */
thead tr.first th,
thead tr.first td {
  position: sticky;
  top: 0;
  background-color: #f0e3ac;
}

thead tr.second th,
thead tr.second td {
  position: sticky;
  top: 28px;
  background-color: #f0e3ac;
  border-bottom: 0.1em solid #d6d6d6;
}
/* Ends multiple sticky column headers. Starts multiple sticky row headers */
tbody th.first {
  position: sticky;
  /* top: 0; */
}

tbody th.second {
  position: sticky;
  left: 100px;
}
/* Ends sticky row headers */

/* Starts combined sticky row headers to act as both column and row headers */
thead th.sticky-combo-first {
  position: sticky;
  top: 0;
  left: 100;
  background-color: #f0e3ac; /* To match the header color */
}

thead th.sticky-combo-second {
  position: sticky;
  top: 28px;
  right: 100px;
  background-color: #f0e3ac; /* To match the header color */
}
/* Ends combined sticky row headers */

tr:nth-child(even) th[scope="row"] {
  background-color: #f2f2f2;
}

tr:nth-child(odd) th[scope="row"] {
  background-color: #fff;
}

tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.05);
}

tr:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

td:nth-of-type(2) {
  font-style: italic;
}

th:nth-of-type(3),
td:nth-of-type(3) {
  text-align: left;
}

/* Fixed Headers */

th {
/*   position: -webkit-sticky; */
  position: sticky;
  top: 0;
  inset-block-start: 0;
  z-index: 2;
}

th[scope="row"] {
  /*   position: -webkit-sticky; */
  position: sticky;
  /*   left: 0; */
  inset-inline-start: 0;
  z-index: 1;
/*   background: linear-gradient(
    90deg,
    transparent 0%,
    transparent calc(100% - 0.09em),
    #f00 calc(100% - 0.09em),
    #f00 100%
  ); */
}

th[scope="row"]::after {
  content: "";
  position: absolute;
/*   inset-inline: calc(100% - .1em) 0; */
  inset-inline-end: 0;
  inset-block: 0;
  border-inline-end: .05em solid #d6d6d6;
}

th[scope="row"] {
  vertical-align: top;
  color: inherit;
  background-color: inherit;
/*   background: linear-gradient(
    90deg,
    transparent 0%,
    transparent calc(100% - 0.09em),
    #d6d6d6 calc(100% - 0.09em),
    #d6d6d6 100%
  ); */
}

table:nth-of-type(2) th:not([scope="row"]):first-child {
  left: 0;
  z-index: 3;
  background: linear-gradient(
    90deg,
    #666 0%,
    #666 calc(100% - 0.05em),
    #ccc calc(100% - 0.05em),
    #ccc 100%
  );
}

/* Strictly for making the scrolling happen. */

th[scope="row"] + td {
  min-width: 24em;
}

th[scope="row"] {
  min-width: 20em;
}

body {
  padding-bottom: 90vh;
}