/* v138: finish the desktop database-to-timeline alignment and clarify dialog checks. */
@media (min-width: 720px) {
  html body.view-database #showGrid > .database-card .card-content {
    align-items: stretch !important;
    width: auto !important;
    min-width: 0 !important;
    height: 150px !important;
    min-height: 150px !important;
    padding: 12px 12px 14px !important;
  }

  html body.view-database #showGrid > .database-card .card-top {
    align-self: stretch !important;
    width: 100% !important;
  }

  html body.view-database #showGrid > .database-card .card-episode-row {
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.view-database #showGrid > .database-card .next-episode {
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }

  html body.view-database #showGrid > .database-card .card-quick-watch {
    flex: 0 0 40px !important;
  }

  html body.view-database #showGrid > .database-card .progress-row {
    align-self: stretch !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.view-database #showGrid > .database-card .progress-track {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  html body.view-database #showGrid > .database-card .card-remaining {
    align-self: stretch !important;
    width: 100% !important;
  }
}

html[data-mode="dark"] body #showDialog .episode .check:not(.watched) {
  opacity: 1 !important;
  border: 2px solid color-mix(in srgb, var(--share-text, #f4f4f5) 58%, transparent) !important;
  background: color-mix(in srgb, var(--share-text, #f4f4f5) 6%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 22%, transparent) !important;
}
