.rowReadOnly,
.rowReadOnly td,
.rowReadOnly th {
  background-color: var(--ds-color-neutral-background-tinted);
}

tr > .fullWidthCellFirst {
  padding-left: var(--modal-padding-x);
}

tr > .fullWidthCellLast {
  padding-right: var(--modal-padding-x);
}

.table {
  width: 100%;
}

/* ====
TODO(1779): Remove these styles after going through all the different Table styles in
Altinn, and making sure they are consistent. */
.table {
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.12),
    0 2px 2px rgba(0, 0, 0, 0.12);
}
@media (max-width: 992px) {
  .table {
    border-top: 1px solid #dde3e5;
  }
}
.table th {
  background-color: #f5f5f5;
  border-bottom: 1px solid #dde3e5;
  padding-top: 15px;
  padding-bottom: 15px;
}
.table td {
  border-bottom: 1px solid #dde3e5;
  padding-top: 12px;
  padding-bottom: 12px;
}
/* ==== */

.table tr:hover {
  background-color: unset;
}

.contentFormatting {
  --cell-max-number-of-lines: 2;
  --cell-text-alignment: left;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--cell-max-number-of-lines);
  line-clamp: var(--cell-max-number-of-lines);
  text-align: var(--cell-text-alignment);
}

.tableCellFormatting {
  --cell-width: auto;
  width: var(--cell-width);
  box-sizing: border-box;
}

/* The width here should be: calc(var(--cell-width) + var(--modal-padding-x) - var(--table-input-margin));
   Adding 8.15% is a workaround for calc not working with both percentages and pixels inside a cell element.
*/
.tableCellFormatting:first-child {
  width: calc(var(--cell-width) + 8.15%);
}

.tableCellFormatting:last-child {
  width: calc(var(--cell-width) + 8.15%);
}

.textCell {
  display: flex;
}

.captionFullWidth {
  padding-left: var(--modal-padding-x);
  padding-right: var(--modal-padding-x);
}

.mobileFieldset {
  display: flex;
  gap: 24px;
  flex-direction: column;
}
