.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;

  th {
    text-align: left
  }

  > thead > tr > td.active,
  > tbody > tr > td.active,
  > tfoot > tr > td.active,
  > thead > tr > th.active,
  > tbody > tr > th.active,
  > tfoot > tr > th.active,
  > thead > tr.active > td,
  > tbody > tr.active > td,
  > tfoot > tr.active > td,
  > thead > tr.active > th,
  > tbody > tr.active > th,
  > tfoot > tr.active > th {
    background-color: $gray-light;
  }

  > thead th {
    vertical-align: bottom;
    border-bottom: 2px solid $gray-medium;
  }

  > caption + thead > tr:first-child > th,
  > colgroup + thead > tr:first-child > th,
  > thead:first-child > tr:first-child > th,
  > caption + thead > tr:first-child > td,
  > colgroup + thead > tr:first-child > td,
  > thead:first-child > tr:first-child > td {
    border-top: 0;
  }

  > tbody + tbody {
    border-top: 2px solid #dddddd;
  }

  .table {
    background-color: $white;
  }
}

.table-bordered {
  border: 1px solid $gray-medium;

  > thead > tr > th,
  > tbody > tr > th,
  > tfoot > tr > th,
  > thead > tr > td,
  > tbody > tr > td,
  > tfoot > tr > td {
    border: 1px solid $gray-medium;
  }
  > thead > tr > th,
  > thead > tr > td {
    border-bottom-width: 2px;
  }

}

.table-striped > tbody > tr:nth-of-type(even) {
  background-color: #f9f9f9;
}
.table-hover > tbody > tr:hover {
  background-color: #f5f5f5;
}
table col[class*="col-"] {
  position: static;
  float: none;
  display: table-column;
}
table td[class*="col-"],
table th[class*="col-"] {
  position: static;
  float: none;
  display: table-cell;
}

.table-responsive {
  overflow-x: auto;
  min-height: 0.01%;
}

@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;

    > .table {
      margin-bottom: 0;

      > thead > tr > th,
      > tbody > tr > th,
      > tfoot > tr > th,
      > thead > tr > td,
      > tbody > tr > td,
      > tfoot > tr > td {
        white-space: nowrap;
      }

      > .table-bordered {
        border: 0;

        > thead > tr > th:first-child,
        > tbody > tr > th:first-child,
        > tfoot > tr > th:first-child,
        > thead > tr > td:first-child,
        > tbody > tr > td:first-child,
        > tfoot > tr > td:first-child {
          border-left: 0;
        }

        > thead > tr > th:last-child,
        > tbody > tr > th:last-child,
        > tfoot > tr > th:last-child,
        > thead > tr > td:last-child,
        > tbody > tr > td:last-child,
        > tfoot > tr > td:last-child {
          border-right: 0;
        }

        > tbody > tr:last-child > th,
        > tfoot > tr:last-child > th,
        > tbody > tr:last-child > td,
        > tfoot > tr:last-child > td {
          border-bottom: 0;
        }
      }
    }
  }
}