$table-responseive__bg: #f7f7f7;
$table-responseive__card-border: 1px solid #e0e0e0;
// aplica apenas em mobile (de 'md' para baixo)
@media (max-width: 768px) {
  .table-responsive-card {
    width: 100%;
    margin-bottom: 1.5em;
  }
  .table-responsive-card thead {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
  }
  .table-responsive-card tbody,
  .table-responsive-card tr,
  .table-responsive-card th,
  .table-responsive-card td {
    display: block;
    padding: 0;
    text-align: left;
    white-space: normal;
  }
  .table-responsive-card th,
  .table-responsive-card td {
    padding: .5em;
    vertical-align: middle;
  }
  .table-responsive-card caption {
    margin-bottom: 1em;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
  }
  .table-responsive-card tbody tr {
    margin-bottom: 1em;
    border: $table-responseive__card-border;
  }
  .table-responsive-card tbody tr:last-of-type {
    margin-bottom: 0;
  }
  .table-responsive-card tbody th[scope="row"] {
    background-color: $table-responseive__bg;
    color: #222;
  }
  .table-responsive-card tbody th {
    border-top: 0;
  }
  .table-responsive-card tbody td[data-type=currency] {
    text-align: right;
  }
  .table-responsive-card tbody td[data-title] {
    &:before {
      content: attr(data-title);
      float: left;
      margin-right: 1em;
    }
    &:after {
      content: "";
      display: table;
      clear: both;
    }
  }
  .table-responsive-card tbody td {
    text-align: right;
  }
}

// XXX: hack da barra superior quando não mobile
@media (min-width: 768px) {
  .table-responsive-card tbody tr:first-child td:first-child {
    border-top: 0;
  }
}