history-version-compare {
    display: block;
}

history-version-compare .selectors {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    padding: 10px;
    border-bottom: 3px solid #494949;
    background: #ffffff0a;
    font-weight: bold;
}

history-version-compare .selectors .swap { align-self: center; }

history-version-compare .selectors label { display: block; }
history-version-compare .selectors label.base span { color: var(--DefaultGreenColor); font-weight: bold; }
history-version-compare .selectors span { display: block; margin-bottom: 0.5em; font-size: var(--DefaultLargeFontSize); }
history-version-compare .selectors select { width: 100%; margin-bottom: 0.5em; }

history-version-compare .versioninfo { font-weight: normal; font-size: var(--DefaultSmallFontSize); }

history-version-compare .banner { padding: 8px 10px; }
history-version-compare .loading, history-version-compare .nochange { padding: 24px; text-align: center; }

history-version-compare .summary { display: flex; align-items: baseline; gap: 0.5em; padding: 0.5em; border-bottom: 1px solid #ffffff26; }
history-version-compare .summary .count { flex-shrink: 0; }
history-version-compare .summary .chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; min-width: 0; }
history-version-compare .summary .chip { display: inline-flex; align-items: center; gap: 0.4em; padding: 2px 8px; border: 1px solid #ffffff26; border-radius: 0.25em; background: #ffffff0a; }
history-version-compare .summary .chip .pct { font-size: var(--DefaultSmallFontSize); color: rgba(255, 255, 255, 0.5); }
history-version-compare .bulk { margin-left: auto; display: inline-flex; gap: 6px; flex-shrink: 0; }

history-version-compare .field { border-bottom: 1px solid #ffffff26; padding: 12px 10px; scroll-margin-top: 7em; }
history-version-compare .field h3 { margin: 0; display: flex; align-items: center; gap: 0.4em; }
history-version-compare .toggle { cursor: pointer; box-sizing: content-box; padding: 0.25em; margin-left: -.25em; background-origin: content-box; background-clip: content-box; }

history-version-compare .timelinebar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 0.75em; padding: 10px; border-bottom: 3px solid #494949; background: #ffffff0a; }
history-version-compare .timelinebar .count { font-weight: bold; font-size: var(--DefaultLargeFontSize); }
history-version-compare .entry { border-bottom: 1px solid #ffffff26; padding: 12px 10px; }
history-version-compare .entry .entryhead { display: flex; align-items: center; gap: 0.4em; }
history-version-compare .meta { font-size: var(--DefaultSmallFontSize); color: rgba(255, 255, 255, 0.5); }
history-version-compare .field h3 .meta { font-weight: normal; }

history-version-compare .panes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

history-version-compare .panehead { display: flex; align-items: center; margin-bottom: 0.5em; }
history-version-compare .panehead .copy { margin-left: auto; }

history-version-compare .value {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--DefaultTechnicalFontFamily);
    font-size: var(--DefaultSmallFontSize);
    max-height: 500px;
    overflow: auto;
    border: 2px solid rgba(255, 255, 255, .05);
    box-shadow: inset 0 .5em 50px -5px rgba(0, 0, 0, .5);
    border-radius: .125em;
    padding: .5em;
}

history-version-compare del { color: var(--DefaultRedColor); }
history-version-compare ins { color: var(--DefaultBlueColor); }

history-version-compare .Upic { height: 1.75em; vertical-align: middle; border-radius: 0.125em; margin-right: 0.25em; }