$label_background : rgba(223, 223, 223, 0.06);
$row_border_color : rgba(223, 223, 223, 0.13);
.app-prop-table{
  border-collapse: collapse;
  td{
    border:1px solid rgba(223, 223, 223, 0.27) !important;
  }
  th{
    background: $label_background;
    border:1px solid $row_border_color !important;
  }
}
table{
  &.table-row-bottom-border{
    tr {
      td,th {
        border-top:none;
        border-bottom: 1px solid rgba(223, 223, 223, 0.27) !important;
      }
    }
  }
}

@media all and (max-width: 576px) {
  .app-prop-table {
    font-size: 13px;
  }
  .app-table-responsive {
    thead{
      tr,th,td{
        display: block;
      }
    }
    tr {
      display: flex;
      flex-wrap: wrap;

      th, td {
        text-align: left;
        padding: 5px !important;
        width: 50%;
      }
    }
  }

  /* Force table to not be like tables anymore */
  .app-prop-table-data {
    &, thead, tbody, th, td, tr {
      display: block;
    }

    thead {
      tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
      }
    }
    th{
      padding-left:6px !important;
    }
    td {
      /* Behave like a "row" */
      border-width: 0 0 1px 0 !important;
      border-color: $row_border_color;
      position: relative;
      padding-left: calc( 50% + 6px) !important;
      white-space: normal;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      &.f-td-w{
        padding-left:6px !important;
        &:before {
          display: none;
        }
      }
      &:before {
        content: attr(data-title);
        /* Now like a table header */
        position: absolute;

        /* Top/left values mimic padding */
        top:0;
        left: 0;
        bottom: 0;
        width: 50%;
        padding: 6px 10px 6px 6px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        background: $label_background;

        border-right: 1px solid $row_border_color;
      }
    }
  }
}