#results {
  position: relative;
}

.popover::backdrop {
  background: transparent;
}

table {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  table-layout: fixed;
}

table caption {
  /*font-size: 1.5em;*/
  margin: 0.5em 0 0.75em 0;
  text-align: left;
}

table tr:nth-child(2n) {
  background-color: #faf8f1;
  padding: 0.35em;
}

table th,
table td {
  padding: 8px;
  word-break: break-word;
  font-size: 14px;
  height: 56px;
}

table th {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0px 8px;
}

table td a:hover {
  text-decoration: underline;
}

table th {
  letter-spacing: 0.1em;
  text-align: left;
  color: #fff;
  background-color: #262626;
}

details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

.seller-report-modal .tooltip::before {
  font-size: 11px;
  letter-spacing: 0.44px;
  background-color: #666666;
  line-height: 178%;
}

@media screen and (max-width: 1024px) {
  #table-status-select-form {
    display: none;
  }

  table {
    border: none;
  }

  table caption {
    font-size: 1.3em;
  }

  table thead {
    /* This code hides the headers on mobile. */
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  table tr:hover {
    background: initial;
  }

  table td:hover {
    background: #f0f0f0;

    button:not(dialog button) {
      background: #d8d8d8;
    }
  }

  table tr:nth-child(2n) {
    background-color: #faf8f1;
    padding: 0;
  }

  table tr {
    border-bottom: 2px solid #ddd;
    margin-bottom: 0.7em;
  }

  table td {
    display: block;
    font-size: 0.8em;
    text-align: right;
    border-bottom: 1px solid #f6f6f6;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }

  /* Override display for preview modal within flex td */
  table td > dialog[id^="sellerReportPreviewModal_"] {
    display: block;
    /* Counteract parent td's display: flex */
    height: auto;
    text-align: initial;
    /* Reset text-align potentially inherited from td */
  }

  table
    td
    div:not(form div, .popover, dialog[id^="sellerReportPreviewModal_"] div) {
    display: block;
    float: right;
    text-align: right;
  }

  /* Restore rule for other dialogs */
  table dialog:not([id^="sellerReportPreviewModal_"]) {
    /* seller report dialog */
    text-align: left;
    height: 100%;
  }

  table td::before {
    /*
        * aria-label has no advantage, it won't be read inside a table
        content: attr(aria-label);
        */
    content: attr(data-label);
    float: left;
    font-family: "EV Text Bold", sans-serif;
  }

  table td.hidden::before {
    display: none;
  }

  table td span:not(form span, dialog span) {
    display: none !important;
  }

  table td:last-child {
    border-bottom: 0;
  }
}

.property-image {
  max-width: 200px;
}

tbody tr {
  border-bottom: 1px solid #e5e5e5;
}

tbody tr:hover td {
  background-color: #f2f2f2;
  cursor: pointer;
}

#listingsTable tbody tr {
  border-bottom: 1px solid #eaeaea;
  /* Needed for absolute positioning of the popover */
  position: relative;
}

table
  td
  div:not(form div, .popover, [id^="seller-report-preview-container"], dialog) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}