/* Hide the original header row completely */

@media (max-width: 767px) {
  .responsive-stack-table thead {
    display: none;
  }
}

/* Force table elements to behave like blocks */

@media (max-width: 767px) {
  .responsive-stack-table, .responsive-stack-table tbody, .responsive-stack-table tr, .responsive-stack-table td {
    display: block;
    width: 100%;
  }
}

/* Turn each row into a distinct visually separated card */

@media (max-width: 767px) {
  .responsive-stack-table tr {
    margin-bottom: 15px;
    border: 1px solid #726f76;
    border-radius: 4px;
    padding: 8px;
    background-color: #fff;
  }
}

/* Align cell contents to the right, create space for left-aligned label */

@media (max-width: 767px) {
  .responsive-stack-table td {
    text-align: left;
    padding-left: 10%;
    position: relative;
    border-top: none;
    border-bottom: 1px solid #eee;
  }
}

/* Remove border from the last item in the card */

@media (max-width: 767px) {
  .responsive-stack-table td:last-child {
    border-bottom: none;
  }
}

/* Inject and format the data-label on the left side of the cell */

@media (max-width: 767px) {
  .responsive-stack-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    width: 45%;
    padding-right: 10px;
    text-align: left;
    font-weight: 600;
    color: #726f76;
    white-space: nowrap;
  }
}

/* --- Desktop View Styles --- */

/* Targets the first cell of every row on large screens */

/* --- Mobile View Adjustments --- */

@media (max-width: 767px) {
  .responsive-stack-table td:first-child {
    background-color: #f5f0ff;
    border-radius: 4px 4px 0 0;
    /*margin-top: -8px;*/
    /*margin-left: -8px;*/
    /*margin-right: -8px;*/
    padding-top: 12px;
    padding-bottom: 12px;
    color: #000;
  }
}

/* Adjusts the pseudo-label position on the colored background */

@media (max-width: 767px) {
  .responsive-stack-table td:first-child::before {
    left: 12px;
    top: 12px;
  }
}

