table {
  margin: 24px 0px;
  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
  border-radius: 2px;
  background: $offwhite;

  &.is-full-width {
    width: 100%;
  }

  thead {
    vertical-align: middle;
    border-color: inherit;

    tr {
      vertical-align: inherit;
      border-color: inherit;
    }

    th {
      background: rgba($lightgray, 0.2);
      border-bottom: 1px solid $lightgray;
      color: $darkgray;
      font-size: 12px;
      font-weight: 500;
      padding: 8px 32px;
      text-align: left;
      text-transform: uppercase;
      line-height: 28px;
    }
  }

  tbody {
    th,
    td {
      border-bottom: 1px solid $lightgray;
      padding: 16px;
      text-align: left;
      line-height: 24px;
      vertical-align: top;

      @media (max-width: 480px) {
        &:before {
          // content: **ADD TABLE HEADER**;
          display: inline-block;
        }
      }

    }

    td {
      letter-spacing: 0.30px;

      @media (max-width: 480px) {
        display: block;
      }

    tr td:first-child {
      @media (max-width: 480px) {
        background-color: $lightgray;
      }
    }
      
    }

    th {
      background: rgba($lightgray, 0.2);
      border-right: 1px solid $lightgray;
      font-weight: 600;
      max-width: 100px;

      @media (max-width: 480px) {
        display: none;
      }
    }

    tr:last-child td {
      border: none;

      @media (max-width: 480px) {
        border-bottom: 1px solid $lightgray;
      }

    }
  }
}