/* Mobile */
@media only screen and (max-width: 40em) {

  table.responsive {
    margin-bottom: 0;
    width: auto;
    font-size: .8rem;
  }

  .pinned {
    position: absolute;
    left: 0;
    top: 0;
    background: black;
    width: 35%;
    overflow: hidden;
    font-size: .8rem;
    box-shadow: 10px 0 20px 0 rgba(0,0,0,0.5);

    table {
      border-right: none;
      border-left: none;
      width: 100%;

      th, td {
        white-space: nowrap;
        overflow: hidden;
      }
    }

    td:last-child {
      border-bottom: 0;
    }
  }

  div.table-wrapper {
    position: relative;
    overflow: hidden;

    div.scrollable {
      margin-left: 35%;
      overflow: scroll;
      overflow-y: hidden;
    }
  }

  table.responsive {
    td {
      position: relative;
      white-space: nowrap;
      overflow: hidden;
    }

    th {
      position: relative;
      white-space: nowrap;
      overflow: hidden;

      &:first-child {
        display: none;
      }
    }

    td:first-child, &.pinned td {
      display: none;
    }
  }


}