:root {
  color-scheme: light dark;
  supported-color-schemes: light dark;
  --left-text-color: rgba(0,0,0,0.50);
  --left-header-text-color: rgba(0,0,0,0.25);
  --content-background-color: white;
  --minimal-overlay-color: rgba(0,0,0,0.05);
  --subtle-overlay-color: rgba(0,0,0,0.1);
  --content-text-color: rgba(0,0,0,0.85);
  --inverted-text-color: rgba(255,255,255,0.85);
  --transparent-color: transparent;
  --selection-background-color: HSLA(279, 89%, 78%, 1.00);

  --table-border-color: hsl(0, 0%, 90%);
  --table-background-color: #fefefe;
  --table-background-reduced: #fff;
  --table-empty-background: hsl(0, 0%, 97%);
  --table-position-color: #777;
  --table-text-color: rgba(102,102,102,1.0);
  --table-text-highlight-color: rgab(0,0,0,0.8);
  --table-text-inv-color: HSLA(0, 0%, 60%, 1.00);
  --changed-code-color: #000;
  --control-border: HSLA(0, 0%, 60%, 1.00);
  --control-background: HSLA(0, 0%, 60%, 0.15);

  --line-number-text-color: HSLA(0, 0%, 67%, 1.00);

  --opp-border-color: #bbb;

  --del-base-color: hsl(3, 75.9%, 58.5%);
  --del-border-color: hsl(3, 67.4%, 69.3%);
  --del-background-color: hsl(3, 100%, 95%);
  --del-background-color-highlighted: var(--del-base-color);

  --ins-base-color: hsl(129, 64.8%, 57.4%);
  --ins-border-color: hsl(129, 50.8%, 57.3%);
  --ins-background-color: hsl(129, 100%, 93.5%);
  --ins-background-color-highlighted: var(--ins-base-color);

  --chg-base-color: hsl(211, 77.1%, 56.3%);
  --chg-border-color: hsl(211, 78.2%, 67.9%);
  --chg-background-color: hsl(211, 100%, 93.5%);
  --chg-background-color-highlighted: HSLA(211, 87%, 85%, 1.00);
  
  --font-system: -apple-system, ui-sans-serif, Roboto, Helvetica Neue, Helvetica, sans-serif;
{{ $FONT }}
  --font-line-numbers: ui-monospace, menlo, consolas, monospace;
  --font-system-rounded: ".AppleSystemUIFontRounded-Regular", ui-rounded, -apple-system, ui-sans-serif, Robot, Helvetica Neue, Helvetica, sans-serif;

}

body { background-color: white; }
div.diff::selection {
  color: var(--content-background-color);
  background: var(--selection-background-color);
}

div.diff {
  background: var(--content-background-color);
  color: var(--content-text-color);
  font-family: var(--font-system);
  font-variant: tabular-nums;
  font-weight: 300;
  font-size: 10pt;
}

div.diff-container {
  box-sizing: border-box;
}

div.diff-header {
  margin: 20pt 0pt;
  text-align: center;
}

div.diff-header table {
  width: 100%;
  background: none;
  border-collapse: collapse;
}

div.diff-header td, div.diff-header th {
  text-align: center;
  font-family: var(--font-system);
  font-variant: tabular-nums;
  font-weight: 500;
  padding-top: 8pt
}

div.diff-header th {
  padding: 1pt 8pt;
  font-weight: 600;
  font-size: 1.2em;
  width: 50%;
}
div.diff-header th.fullWidth {
  width: 100%;
}
			
div.diff-header th:nth-child(1) {
  text-align: right;
  border-right: 1.5pt solid;
}
div.diff-header th.fullWidth:nth-child(1) {
  text-align: center;
  border-right: 0;
}
div.diff-header th:nth-child(2) {
  text-align: left;
  border-collapse: collapse;
}

span.change {
position: relative;
background-color: var(--chg-background-color-highlighted);
}

/* interesting hack to show empty changes the way we show them in the app */
span.change:empty::before {
position: absolute;
width: 1pt;
border-left: 1pt solid var(--chg-border-color);
content: "";
top: 0pt;
bottom: 1pt;
}

span.change:empty::after {
position: absolute;
width: 3pt;
border-top: 1pt solid var(--chg-border-color);
border-bottom: 1pt solid var(--chg-border-color);
content: "";
top: 0pt;
bottom: 1pt;
left: -1pt;
}

.file .blob-num {
  color: var(--line-number-text-color);
  font-family: var(--font-line-numbers);
  font-size: 0.75em;
  text-align: right;
  vertical-align: top;
  padding-top: 0.3em;
  -webkit-user-select: none;
  user-select: none;
}

.blob-num::before {
  content: attr(data-line-number);
  width: 15pt;
  float:left;
}

.blob-num::after {
  content: attr(data-code-marker);
  font-weight: 800;
  font-size: larger;
  padding-right: 4pt;
  position: relative;
  bottom: 0.15em;
}

td.blob-num-context::after,
td.blob-num.empty-cell::after {
  content: " ";
}

.blob-num-deletion::after {
  color: var(--del-base-color);
}

.blob-num-addition::after {
  color: var(--ins-base-color);
}

.blob-num-change::after {
  color: var(--chg-base-color);
}

.blob-code {
  white-space: pre-wrap;
}

div.file {
  margin-bottom: 16px;
  position: relative;
  display:block;
  padding: 3pt;
}

.file td {
  font-family: var(--font-code);
  font-size: var(--font-code-size);
  font-weight: var(--font-code-weight);
  background: var(--table-background-color);
  color: var(--table-text-color);
  vertical-align: top;
  margin: 0;
  padding: 1pt;
  text-align: left;
  tab-size: 4;
}

div.file table {
  background: none;
  //    background: var(--table-empty-background);
  margin: 0;
  padding: 0;
  table-layout: fixed;
//  table-layout: auto;
  border-collapse: collapse;
}

.file .empty-cell {
  background: var(--table-empty-background);
}

.file .blob-code-hunk, .file .blob-num-hunk {
  background: var(--table-empty-background);
  color: var(--table-position-color);
  padding-top: 1em;
}

.file .blob-code-addition, .file .blob-num-addition {
  background: var(--ins-background-color);
}
.file .blob-code-deletion, .file .blob-num-deletion {
  background: var(--del-background-color);
}
.file .blob-code-change, .file .blob-num-change {
  background: var(--chg-background-color);
}
.file .blob-code-change, .file .blob-code-deletion, .file .blob-code-addition {
  color: var(--table-text-highlight-color);
}
			
.file td:nth-child(4) {
  border-left: 2pt solid var(--table-border-color);
}
.file td:nth-child(2) {
  border-right: 2pt solid var(--table-border-color);
}
.file td:nth-child(4).blob-num-empty {
  border-left: 2pt solid var(--opp-border-color);
}
.file td:nth-child(2).blob-code-empty {
  border-right: 2pt solid var(--opp-border-color);
}
.file td:nth-child(4).blob-num-change {
  border-left: 2pt solid var(--chg-border-color);
}
.file td:nth-child(2).blob-code-change {
  border-right: 2pt solid var(--chg-border-color);
}
.file td:nth-child(4).blob-num-addition {
  border-left: 2pt solid var(--ins-border-color);
}
.file td:nth-child(2).blob-code-deletion {
  border-right: 2pt solid var(--del-border-color);
}

.file .flex-auto {
  display: flex;
}

.js-expand-full-wrapper {
  width: 16pt;
  background: red;
  display: block;
}

col.col-num {
    width: 35pt;
}

col.col-gap {
  width: 10pt;
}

.col-code, .file-header-codecol {
//  max-width: calc((100vw - 85pt) / 2);
  width: calc((100vw - 85pt) / 2);
}

.file-header {
  font-family: var(--font-system-rounded);
  font-weight: 650;
  font-size: 0.8em;
  text-align: left;
  padding: 0 0 0 2pt;
  text-overflow: ellipsis;
  overflow: hidden;
  line-break: loose;
  text-align: left;
  height: 16pt;
}

.file-header[data-file-letter]::before {
  content: attr(data-file-letter);
  border: 1.2pt solid black;
  padding: 0 1pt 0.5pt 2pt;
  border-radius: 2.5pt;
  font-family: var(--font-system-rounded); 
  font-weight: 650;
  font-size: 0.9em;
  margin-right: 5pt;
}

div.file th {
  padding-bottom: 8pt;
}

.file table tbody tr td:nth-child(1), 
.file table tbody tr td:nth-child(4) {
    min-width: 32pt;
}

.file table tbody tr td:nth-child(3) {
  border-right: 2px solid var(--table-empty-background);
  border-left: 2px solid var(--table-empty-background);
  -webkit-user-select: none;
  user-select: none;
  min-width: 10pt;
}

.file table tbody tr td:nth-child(5), 
.file table tbody tr td:nth-child(2)
{
  max-width: calc((90vw - 95pt) / 2);
  width: calc((90vw - 95pt) / 2);
  overflow: hidden;
  text-overflow: ellipsis; 
}    

.file table td:nth-child(2) {
  -webkit-user-select: none;
  user-select: none;
}

data.inv {
//    border: 1px dotted green;
//    box-sizing: border-box;
//    background: black;
}

td.blob-code-context data.inv data.glyph::before,
td.blob-code-change data.inv data.glyph::before,
td.blob-code-addition data.inv data.glyph::before,
td.blob-code-deletion data.inv data.glyph::before
{
  float: left;
  position: absolute;
  content: attr(data-glyph);
  clear: none;
  color: var(--table-text-inv-color);
//    display:none;
}

data.inv data.control {
  display: inline-block;
  border: 1.1pt solid var(--control-border);
  background: var(--control-background);
  border-radius: 0.5em;
  font-family: var(--font-system);
  font-stretch: condensed;
  font-size: 0.72em;
  font-weight: 600; 
  color: var(--table-text-color);
  vertical-align: top;
  margin: 0.5pt 0.5pt 0 0.5pt;
  padding: 0 2pt 0.5pt 2pt;
}

data.inv data.control::after {
  content: attr(data-content);
  font-family: var(--font-system);
  font-stretch: condensed;
}

data.inv data {
  -webkit-user-select: none;
  user-select: none;
}

div.footer {
  width: 100%;
  margin-bottom: 20pt;
}
div.footer a {
  text-decoration: none;
  color: #666666;
}
div.footer .logo {
  float:left;
  margin-left: 5pt;
}
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip .tooltiptext {
  font-family: var(--font-system);
  visibility: hidden;
  width: 120px;
  height: 24px;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  text-align: left;
  font-size: 10px;
  padding: 7px 9px;
  border-radius: 9px;
  position: absolute;
  z-index: 1;
  top: -9px;
  left: 110%;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  animation-name: FadeIn;
  animation-duration: 0.5s;
}
@keyframes FadeIn {
    0% {
    opacity: 0;
    transform: scale(85%);
    }
    100% {
    opacity: 1;
    transform: scale(100%);
  }
}
.tooltip .tooltiptext::before {
  content: " ";
  position: absolute;
  top: 12px;
  left: -8px;
  margin-left: -8px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent rgba(0,0,0,0.5) transparent transparent;
}
{{ $ADDITIONAL_CSS }}
