.lw-table {
  width: 100%;
  /* Scroll sideways when the columns can't shrink to fit the container.
     inline-size containment keeps the table's min width from propagating to
     flex/grid ancestors, which would otherwise widen the whole content column. */
  overflow-x: auto;
  contain: inline-size;
  --lw-table-fade: 48px;
}

/* Scroll hint: fade the edge(s) with more table beyond them (set by view.js). */
.lw-table--can-scroll-right {
  -webkit-mask-image: linear-gradient(
    to right,
    #000 calc(100% - var(--lw-table-fade)),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    #000 calc(100% - var(--lw-table-fade)),
    transparent
  );
}

.lw-table--can-scroll-left {
  -webkit-mask-image: linear-gradient(
    to left,
    #000 calc(100% - var(--lw-table-fade)),
    transparent
  );
  mask-image: linear-gradient(
    to left,
    #000 calc(100% - var(--lw-table-fade)),
    transparent
  );
}

.lw-table--can-scroll-left.lw-table--can-scroll-right {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--lw-table-fade),
    #000 calc(100% - var(--lw-table-fade)),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--lw-table-fade),
    #000 calc(100% - var(--lw-table-fade)),
    transparent
  );
}

.lw-table__table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto 2rem;
  background-color: #f7f7f7;
}

.lw-table__table:last-child {
  margin-bottom: 0;
}

.lw-table__table--desktop {
  display: table;
}

.lw-table__table--mobile .lw-table__cell {
  font-size: 1.4rem;
}

.lw-table__table--mobile .lw-table__cell--header,
.lw-table__table--mobile .lw-table__cell--data {
  padding: 8px 4px;
}

.lw-table__table--hidden {
  display: none !important;
}

.lw-table__row--header .lw-table__cell--header,
.lw-table__cell--corner {
  background-color: #9b51e0;
  color: #ffffff;
}

.lw-table__cell {
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 12px;
  text-align: center;
  border: 0;
}

.lw-table__cell > span {
  display: block;
}

.lw-table__cell--bold {
  font-weight: 700;
}

.lw-table__cell--corner {
  border-right: 15px solid #9b51e0;
}

.lw-table__table--desktop
  .lw-table__row--header
  .lw-table__cell--header:last-child {
  border-right: 15px solid #9b51e0;
}

.lw-table__table--mobile
  .lw-table__row--header
  .lw-table__cell--header:first-child,
.lw-table__table--no-row-titles
  .lw-table__row--header
  .lw-table__cell--header:first-child {
  border-left: 15px solid #9b51e0;
}

.lw-table__table--mobile
  .lw-table__row--header
  .lw-table__cell--header:last-child {
  border-right: 15px solid #9b51e0;
}

.lw-table__cell--row-title-desktop {
  text-align: left;
  padding-left: 2rem;
}

.lw-table__cell--row-title-mobile {
  padding-top: 2rem;
}

.lw-table__cell--white {
  background-color: #ffffff;
  border-bottom: 1px solid #dfdfdf;
  border-right: 1px solid #dfdfdf;
}

.lw-table__cell--last-column {
  border-right: 0;
}

.lw-table__row--data:last-of-type .lw-table__cell--data {
  border-bottom: 0;
}

.lw-table__table--mobile
  .lw-table__row--mobile-data
  .lw-table__cell--data:last-child {
  border-right: 0;
}

.lw-table__cell--spacer {
  padding: 5px;
  background-color: #f7f7f7;
}

.lw-table__table--mobile .lw-table__cell--spacer {
  padding: 10px;
}

.lw-table__cell--top-left {
  border-top-left-radius: 30px;
}

.lw-table__cell--top-right {
  border-top-right-radius: 30px;
}

.lw-table__cell--bottom-left {
  border-bottom-left-radius: 30px;
}

.lw-table__cell--bottom-right {
  border-bottom-right-radius: 30px;
}

.lw-table__cell--bottom {
  border-bottom: 0;
}