.table-responsive {
  display: table !important;
}

.table-header {
  background-color: #000000;
  color: #ffffff;
}

.table-header.processo {
  background-color: #f7f7f7;
  color: #ffffff;
}

.user {
  background-color: #eae1e1;
  border: 0px solid rgb(255,255,255) !important;
;  color: rgb(30,51,129);
  color: #000000;
  width: 200px;
}

.modelo {
  background-color: #eae1e1;
  border: 0px solid rgb(255,255,255) !important;
;  color: rgb(30,51,129);
  color: #000000;
  width: 200px;
}

.table-responsive {
  padding: 30px;
  display: block;
}

@media screen and (max-width: 768px) {
  .table-header {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  .table-header.processo {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  .user, .modelo {
    background-color: #eae1e1 !important;
    border: 0px solid rgb(255,255,255) !important;
    color: #000000;
    width: 100% !important;
    display: block;
    text-align: center !important;
  }
}

@media screen and (max-width: 768px) {
  .table-header th {
    display: block;
    background-color: #000000;
    text-align: center;
  }
}

@media screen and (max-width: 768px) {
  .table-responsive tr {
    padding: 5px;
    display: block;
    margin: 0rem 0 1rem;
    background-color: #fff;
    border-radius: 0px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
  }
}

@media screen and (max-width: 600px) {
  .table-responsive td {
    display: block;
    text-align: center;
    border-bottom: 0px dotted #ccc;
  }
}

@media screen and (max-width: 600px) {
  table.table-responsive td:last-child {
    border-bottom: 0;
  }
}

@media screen and (max-width: 600px) {
  table.table-responsive td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}