/**
Responsive Table:
class: .DataTable
Table code:
<table class="DataTable">
    <caption>Name Template</caption>
    <thead>
        <tr>
            <th></th>
            <th>Cols Name 1</th>
            <th>Cols Name 2</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td data-label="Cols Name 1"></td>
            <td data-label="Cols Name 2"></td>
            <td></td>
        </tr>
        <!--/LIST:items-->
    </tbody>
</table>

Responsive Start: 640px 
**/
@media screen and (max-width: 960px ) {
  table.DataTable960 {
    border: 0;
  }
  table.DataTable960 thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  table.DataTable960 tr {
    border-top: none!important;
    border-bottom: 3px solid rgb(240, 243, 255);
    display: block;
    margin-bottom: 10px;
  }
  
  table.DataTable960 td {
    border-bottom: 1px dashed rgb(240, 243, 255);
    display: block;
  }
  
  table.DataTable960 td::before {
    content: attr(data-label);
    font-weight: normal;
    font-style: italic;
    padding-right: 15px;
    color: #1E87F0;
  }
  
  table.DataTable960 td:last-child {
    border-bottom: 0;
  }
}

@media screen and (max-width: 640px ) {
  table.DataTable640 {
    border: 0;
  }
  table.DataTable640 thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  table.DataTable640 tr {
    border-top: none!important;
    border-bottom: 3px solid rgb(240, 243, 255);
    display: block;
    margin-bottom: 10px;
  }
  
  table.DataTable640 td {
    border-bottom: 1px dashed rgb(240, 243, 255);
    display: block;
  }
  
  table.DataTable640 td::before {
    content: attr(data-label);
    font-weight: normal;
    font-style: italic;
    padding-right: 15px;
  }
  
  table.DataTable640 td:last-child {
    border-bottom: 0;
  }
}