:host {
  display: block;
  width: 100%;
}

.dt-grid {
  display: grid;
  grid-template:
    "dt-list"    auto
    "dt-details" auto
    / 1fr;
  gap: 16px;
  align-items: start;

  --dt-right-h: 580px;
}

@media (min-width: 992px) {
  .dt-grid {
    grid-template:
      "dt-list dt-details" auto
      / 1fr 1fr;
  }
}

.dt-col-left {
  grid-area: dt-list;
  margin-left: 15px;
}

.dt-col-right {
  grid-area: dt-details;
  margin-left: 15px;
}

.panel .table {
  table-layout: fixed;
  width: 100%;
}

.panel .panel-scroll {
  height: var(--dt-right-h);
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
}

.dt-version-item {
  display: block;
  line-height: 1.25;
  margin: 2px 0;
  word-break: break-word;
}

.dt-break-all {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.dt-grid .fa-sort { margin-left: 6px; }