button.diff-file-btn {
  position: absolute;
  background-color: #DDD;
  font-weight: bold;
  text-align: right;
  top: 7px;
  right: 7px;
  padding: 5px;
  border-radius: 2px;
  border: 1px solid #6F6F6F;
}
button.diff-file-btn:hover {
  cursor: pointer;
  background-color: #A5A5A5;
}
button.diff-file-btn:active {
  cursor: pointer;
  background-color: #8F8E8E;
}
button.diff-file-btn.reviewed {
  background-color: #DFFFD7;
  border: 1px solid #478A06;
}
button.diff-file-btn.reviewed:hover {
  background-color: rgba(1, 153, 1, 0.5);
}
button.diff-file-btn.reviewed:active {
  background-color: rgba(0, 92, 0, 0.5);
}
/* make indentation changes more noticable */
.indent {
  color: #aaaaaa;
  background-color: #dfffd7;
  outline: 1px solid #dfffd7;
}
.unindent {
  color: #aaaaaa;
  background-color: #ffe0e5;
  outline: 1px solid #ffe0e5;
}
/* add comment icon which follows cursor */
.sidebyside {
  /* ensure empty pre elements are the correct height */
  /* Make the moved-from/to border thinner, and reposition code to prevent
       incorrect indentation. */
}
.sidebyside tbody tr:hover pre:before {
  content: '';
  box-shadow: 1px 1px 3px black;
  border: 1px solid grey;
  height: 15px;
  width: 15px;
  margin: -2px -10px -2px -20px;
  float: left;
  pointer-events: none;
  background: url("../mozreview/plus.b30c4ef75609.svg") no-repeat 50%, linear-gradient(to bottom, #88bfe8 0%, #70b0e0 100%);
  transform: scale(0.8);
}
.sidebyside tbody tr th {
  padding-right: 20px;
}
.sidebyside pre {
  min-height: 13px;
}
.sidebyside .moved-row th {
  padding-right: 18px;
}
.sidebyside .moved-from pre,
.sidebyside .moved-to pre {
  margin-left: -2px;
}
.sidebyside .moved-from {
  border-left: 2px #b0d0ff solid !important;
}
.sidebyside .moved-to {
  border-left: 2px #a1c7ff solid !important;
}
span.ghost-commentflag {
  display: none !important;
}
/* make review comments more noticable */
.comment-block-container {
  border-top: 2px dotted #a1c0e3;
}
.comment-block-container-draft {
  border-top: 2px dotted #aceb6f;
}
/* Select commit message FileDiff.
   We're adding a content of the commit message as a FileDiff. FileDiff's DOM
   Element is a div.diff-container. Commit message element is displayed as
   a first FileDiff in the series as a second child of #diffs, after
   a div.diff-highlight. Due to a bug in Reviewboard, diff-highlight might not
   be present and commit message FileDiff will become the first child of
   the #diff.
   See https://hellosplat.com/s/beanbag/tickets/4520/

   We use an ugly CSS hack to remove "commit-message-[hash]" text from
   sight and instead display "commit-message".
 */
.with-commit-msg-filediff .diff-container:first-child .sidebyside .filename-row th,
.with-commit-msg-filediff :not(.diff-container) + .diff-container .sidebyside .filename-row th {
  color: transparent;
  position: relative;
}
.with-commit-msg-filediff .diff-container:first-child .sidebyside .filename-row th a:after,
.with-commit-msg-filediff :not(.diff-container) + .diff-container .sidebyside .filename-row th a:after {
  content: "commit-message";
  color: #000;
  position: absolute;
  font-weight: normal;
  font-style: italic;
}