div#thediff {
    padding-right: 10px;
    max-width: 100%;
}

.diff-header {
    top: 0px;
    position: sticky;
    background: white;
    text-align: left;
    padding: 4px;
}
.diff-header .num-add, .diff-header .num-delete {
  font-weight: normal;
  font-size: small;
}
.diff-header .num-add {
  color: green;
}
.diff-header .num-delete {
  color: red;
}

.diff .line-no, .diff .code {
    font-family: Inconsolata, Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 13px;
}

/* It's not possible to set a border without shifting the row */
tr.selected {
  box-shadow: 0px -2px 0px 0px rgb(216,225,253);
  z-index: 1;
  position: relative;
}

/* keeps the header on top of the selection line and cell */
.diff thead {
  z-index: 2;
  position: relative;
}

/* This is overridden in JS based on your .gitconfig */
td.code {
  width: 101ch;  /* per-side max line length */
}

.file-selector {
  padding-bottom: 5px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 15px;
}

ul.file-list {
  padding: 0;
}
.file-list li {
  list-style-type: none;
}

.file-mode-toggle {
  position: absolute;
  right: 0;
  cursor: pointer;
  width: 20px;
  height: 10px;
  overflow: hidden;
}

.arrow-holder {
  font-size: 20px;
  line-height: 20px;
  transform: rotate(90deg);
}

.file-list .diff {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background: url(/static/img/sprites.png) no-repeat left center;
  vertical-align: top;
}

.diff.add    { background-position: 0 0; }
.diff.change { background-position: 0 -16px; }
.diff.delete { background-position: 0 -32px; }
.diff.move   { background-position: 0 -48px; }

.spark {
  display: inline-block;
  width: 32px;
  height: 16px;
  margin-right: 4px;
}
.spark .delete, .spark .add {
  display: inline-block;
  height: 16px;
}
.spark .delete {
  background: #fcc;
}
.spark .add {
  background: #cfc;
}

.side-a { border: 1px solid red; }
.side-b { border: 1px solid green; }

/* Per-file type diff controls: image diff mode, JSON normalization */
.diff-mode-controls {
  text-align: center;
  background-color: #f7f7f7;
  padding: 5px;
}
.diff-mode-controls > input {
  margin-left: 20px;
}
.diff-mode-controls a {
  text-decoration: none;
}
.diff-mode-controls a, .diff-mode-controls a:visited {
  color: #666;
}
.diff-mode-controls b {
  color: black;
}
.diff-mode-controls .mode {
  padding-left: 5px;
  padding-right: 5px;
  border-right: 1px solid #ccc;
}
.diff-mode-controls .mode:last-child {
  border-right: none;
}

.overlapping-images {
  position: relative;
  margin: 5px;
}
.overlapping-images div {
  position: absolute;
}
.overlapping-images-metadata .image-props:first-child {
  margin-right: 5px;
  float: left;
}
.overlapping-images-metadata .image-props:last-child {
  margin-left: 5px;
  float: right;
}
.overlapping-images-metadata {
  overflow: hidden;
}
.image-diff {
  display: table;
  margin: 0px auto;
}
.swipe input {
  width: 100%;
}
.onion-skin .range-holder {
  margin: 0 auto;  /* center the slider */
  display: table;
}
.onion-skin input {
  width: 200px;
}
.swipe input,
.onion-skin input {
  background-color: transparent; /* So it displays in Firefox */
  margin: 0;
}
/* Remove dotted outline in Firefox*/
input::-moz-focus-outer{
  border: 0;
}
.shrink-to-fit {
  max-width: 100%;
}

table .side-a, table .side-b {
  background: url(/static/img/trans_bg.gif);
}

.no-changes {
  background-color: rgb(252, 248, 227);
  border: 1px solid rgb(245, 231, 158);
  border-radius: 4px;
  color: rgb(138, 109, 59);
  text-align: center;
  padding: 5px 5px;
  margin-bottom: 10px;
}

.image-diff .no-changes {
  margin-top: 10px;
}

.image-holder {
  position: relative;  /* offset parent for .perceptual-diff */
}
.perceptual-diff {
  position: absolute;
}
.perceptual-diff.bbox {
  border: 2px solid hotpink;
  box-shadow: 0 0 5px 0 rgba(50, 50, 50, 0.75);
}
.perceptual-diff.pixels {
  opacity: 0.5;
}

.diff-box-disabled {
  color: gray;
}
.pdiff-options {
  margin-left: 10px;
}
.magick {
  font-style: italic;
}

/* Cribbed from GitHub */
kbd {
  display: inline-block;
  padding: 3px 5px;
  line-height: 10px;
  color: rgb(31, 35, 40);
  vertical-align: middle;
  background-color: rgb(246, 248, 250);
  border: solid 1px rgba(175, 184, 193, 0.2);
  border-radius: 6px;
  box-shadow: rgba(175, 184, 193, 0.2) 0px -1px 0px 0px inset;
}

.keyboard-shortcuts { font-size: 80%; }

.keyboard-shortcuts .header {
  font-weight: bold;
}

.keyboard-shortcuts ul {
  padding-left: 0;  /* 1em; */
}
.keyboard-shortcuts li {
  list-style-type: none;
  margin-bottom: 2px;
}

.suppressed-large-diff {
  text-align: center;
  background-color: lightyellow;
}
