@media screen and (max-width: 650px) {
  td, th {
    display: block;
  }

  td::before,
  th::before {
    content: attr(column-label);
    text-align: left;
    width: 70%;
  }
  
  td:first-child,
  th:first-child {
    background-color: var(--emphasized-background-color);
    display: block;
    margin-bottom: .5rem;
    width: 100%;
  }
  
  td:first-child::before {
    content: "";
  }
  
  th:not(:first-child) {
    display: none;
  }
  
  td:not(:first-child) {
    display: flex;
    justify-content: space-between;
    padding: .1rem 1.2rem !important;
    width: 100% !important;
  }
  
  td:last-child {
    padding-bottom: 1.2rem !important;
  }
}

table.j-calculator-results-table {
  text-align: right;
  width: 100%;
  
  tbody::before {
    content: '';
    display: block;
    height: 2rem;
  }
  
  tr {
    border-bottom-color: var(--jr-divider-color, unset);
    border-bottom-style: var(--jr-divider-style, unset);
    border-bottom-width: var(--jr-divider-thickness, 0);
  }
  
  td:first-child, th:first-child {
    text-align: left;
    width: auto;
  }
  
  th, td {
    padding: .2rem 1.2rem;
    vertical-align: top;
    width: 10rem;
  }
  
  details {
    summary {
      background-color: unset;
      color: var(--j-color-foreground);
    }
    
    div {
      background-color: var(--jr-info-card-container-color, var(--j-color-foreground));
      color: var(--jr-info-card-text-color, var(--j-color-background));
      font-weight: var(--jr-info-card-text-weight, inherit);
      margin: .5rem 0;
      padding: 0.3rem 0.6rem;
    }
  }
  
  --emphasized-background-color: var(--jr-list-item-emphasized-variant-container-color, #d3d3d3);
  --emphasized-font-weight: 600;
  --emphasized-color: var(--jr-list-item-emphasized-label-text-color, #76b72a);
  
  .emphasized-background {
    background-color: var(--emphasized-background-color);
  }
  
  .emphasized-font {
    font-weight: var(--emphasized-font-weight);
  }
  
  .emphasized-color {
    color: var(--emphasized-color);
  }
}