renderer.css

/* Collection default theme */

.ReactVirtualized__Collection {
}

.ReactVirtualized__Collection__innerScrollContainer {
}

/* Grid default theme */

.ReactVirtualized__Grid {
}

.ReactVirtualized__Grid__innerScrollContainer {
}

/* Table default theme */

.ReactVirtualized__Table {
}

.ReactVirtualized__Table__Grid {
}

.ReactVirtualized__Table__headerRow {
  font-weight: 700;
  text-transform: uppercase;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.ReactVirtualized__Table__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.ReactVirtualized__Table__headerTruncatedText {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ReactVirtualized__Table__headerColumn,
.ReactVirtualized__Table__rowColumn {
  margin-right: 10px;
  min-width: 0px;
}
.ReactVirtualized__Table__rowColumn {
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ReactVirtualized__Table__headerColumn:first-of-type,
.ReactVirtualized__Table__rowColumn:first-of-type {
  margin-left: 10px;
}
.ReactVirtualized__Table__sortableHeaderColumn {
  cursor: pointer;
}

.ReactVirtualized__Table__sortableHeaderIconContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.ReactVirtualized__Table__sortableHeaderIcon {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 24px;
          flex: 0 0 24px;
  height: 1em;
  width: 1em;
  fill: currentColor;
}

/* List default theme */

.ReactVirtualized__List {
}
/* BASICS */

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: 300px;
  color: black;
  direction: ltr;
}

/* PADDING */

.CodeMirror-lines {
  padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre {
  padding: 0 4px; /* Horizontal padding of content */
}

.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  background-color: white; /* The little square between H and V scrollbars */
}

/* GUTTER */

.CodeMirror-gutters {
  border-right: 1px solid #ddd;
  background-color: #f7f7f7;
  white-space: nowrap;
}
.CodeMirror-linenumbers {}
.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #999;
  white-space: nowrap;
}

.CodeMirror-guttermarker { color: black; }
.CodeMirror-guttermarker-subtle { color: #999; }

/* CURSOR */

.CodeMirror-cursor {
  border-left: 1px solid black;
  border-right: none;
  width: 0;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver;
}
.cm-fat-cursor .CodeMirror-cursor {
  width: auto;
  border: 0 !important;
  background: #7e7;
}
.cm-fat-cursor div.CodeMirror-cursors {
  z-index: 1;
}
.cm-fat-cursor-mark {
  background-color: rgba(20, 255, 20, 0.5);
  -webkit-animation: blink 1.06s steps(1) infinite;
  -moz-animation: blink 1.06s steps(1) infinite;
  animation: blink 1.06s steps(1) infinite;
}
.cm-animate-fat-cursor {
  width: auto;
  border: 0;
  -webkit-animation: blink 1.06s steps(1) infinite;
  -moz-animation: blink 1.06s steps(1) infinite;
  animation: blink 1.06s steps(1) infinite;
  background-color: #7e7;
}
@-moz-keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}
@-webkit-keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}
@keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}

/* Can style cursor different in overwrite (non-insert) mode */
.CodeMirror-overwrite .CodeMirror-cursor {}

.cm-tab { display: inline-block; text-decoration: inherit; }

.CodeMirror-rulers {
  position: absolute;
  left: 0; right: 0; top: -50px; bottom: -20px;
  overflow: hidden;
}
.CodeMirror-ruler {
  border-left: 1px solid #ccc;
  top: 0; bottom: 0;
  position: absolute;
}

/* DEFAULT THEME */

.cm-s-default .cm-header {color: blue;}
.cm-s-default .cm-quote {color: #090;}
.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}
.cm-strikethrough {text-decoration: line-through;}

.cm-s-default .cm-keyword {color: #708;}
.cm-s-default .cm-atom {color: #219;}
.cm-s-default .cm-number {color: #164;}
.cm-s-default .cm-def {color: #00f;}
.cm-s-default .cm-variable,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-property,
.cm-s-default .cm-operator {}
.cm-s-default .cm-variable-2 {color: #05a;}
.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
.cm-s-default .cm-comment {color: #a50;}
.cm-s-default .cm-string {color: #a11;}
.cm-s-default .cm-string-2 {color: #f50;}
.cm-s-default .cm-meta {color: #555;}
.cm-s-default .cm-qualifier {color: #555;}
.cm-s-default .cm-builtin {color: #30a;}
.cm-s-default .cm-bracket {color: #997;}
.cm-s-default .cm-tag {color: #170;}
.cm-s-default .cm-attribute {color: #00c;}
.cm-s-default .cm-hr {color: #999;}
.cm-s-default .cm-link {color: #00c;}

.cm-s-default .cm-error {color: #f00;}
.cm-invalidchar {color: #f00;}

.CodeMirror-composing { border-bottom: 2px solid; }

/* Default styles for common addons */

div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
.CodeMirror-activeline-background {background: #e8f2ff;}

/* STOP */

/* The rest of this file contains styles related to the mechanics of
   the editor. You probably shouldn't touch them. */

.CodeMirror {
  position: relative;
  overflow: hidden;
  background: white;
}

.CodeMirror-scroll {
  overflow: scroll !important; /* Things will break if this is overridden */
  /* 30px is the magic margin used to hide the element's real scrollbars */
  /* See overflow: hidden in .CodeMirror */
  margin-bottom: -30px; margin-right: -30px;
  padding-bottom: 30px;
  height: 100%;
  outline: none; /* Prevent dragging from highlighting the element */
  position: relative;
}
.CodeMirror-sizer {
  position: relative;
  border-right: 30px solid transparent;
}

/* The fake, visible scrollbars. Used to force redraw during scrolling
   before actual scrolling happens, thus preventing shaking and
   flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  position: absolute;
  z-index: 6;
  display: none;
}
.CodeMirror-vscrollbar {
  right: 0; top: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
.CodeMirror-hscrollbar {
  bottom: 0; left: 0;
  overflow-y: hidden;
  overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
  right: 0; bottom: 0;
}
.CodeMirror-gutter-filler {
  left: 0; bottom: 0;
}

.CodeMirror-gutters {
  position: absolute; left: 0; top: 0;
  min-height: 100%;
  z-index: 3;
}
.CodeMirror-gutter {
  white-space: normal;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: -30px;
}
.CodeMirror-gutter-wrapper {
  position: absolute;
  z-index: 4;
  background: none !important;
  border: none !important;
}
.CodeMirror-gutter-background {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 4;
}
.CodeMirror-gutter-elt {
  position: absolute;
  cursor: default;
  z-index: 4;
}
.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }

.CodeMirror-lines {
  cursor: text;
  min-height: 1px; /* prevents collapsing before first draw */
}
.CodeMirror pre {
  /* Reset some styles that the rest of the page might have set */
  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
  border-width: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
  z-index: 2;
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-variant-ligatures: contextual;
  font-variant-ligatures: contextual;
}
.CodeMirror-wrap pre {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal;
}

.CodeMirror-linebackground {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 0;
}

.CodeMirror-linewidget {
  position: relative;
  z-index: 2;
  padding: 0.1px; /* Force widget margins to stay inside of the container */
}

.CodeMirror-widget {}

.CodeMirror-rtl pre { direction: rtl; }

.CodeMirror-code {
  outline: none;
}

/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.CodeMirror-measure {
  position: absolute;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.CodeMirror-cursor {
  position: absolute;
  pointer-events: none;
}
.CodeMirror-measure pre { position: static; }

div.CodeMirror-cursors {
  visibility: hidden;
  position: relative;
  z-index: 3;
}
div.CodeMirror-dragcursors {
  visibility: visible;
}

.CodeMirror-focused div.CodeMirror-cursors {
  visibility: visible;
}

.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.CodeMirror-crosshair { cursor: crosshair; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }

.cm-searching {
  background-color: #ffa;
  background-color: rgba(255, 255, 0, .4);
}

/* Used to force a border model for a node */
.cm-force-border { padding-right: .1px; }

@media print {
  /* Hide the cursor when printing */
  .CodeMirror div.CodeMirror-cursors {
    visibility: hidden;
  }
}

/* See issue #2901 */
.cm-tab-wrap-hack:after { content: ''; }

/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext { background: none; }

.CodeMirror-dialog {
  position: absolute;
  left: 0; right: 0;
  background: inherit;
  z-index: 15;
  padding: .1em .8em;
  overflow: hidden;
  color: inherit;
}

.CodeMirror-dialog-top {
  border-bottom: 1px solid #eee;
  top: 0;
}

.CodeMirror-dialog-bottom {
  border-top: 1px solid #eee;
  bottom: 0;
}

.CodeMirror-dialog input {
  border: none;
  outline: none;
  background: transparent;
  width: 20em;
  color: inherit;
  font-family: monospace;
}

.CodeMirror-dialog button {
  font-size: 70%;
}

/*
Solarized theme for code-mirror
http://ethanschoonover.com/solarized
*/

/*
Solarized color palette
http://ethanschoonover.com/solarized/img/solarized-palette.png
*/

.solarized.base03 { color: #002b36; }
.solarized.base02 { color: #073642; }
.solarized.base01 { color: #586e75; }
.solarized.base00 { color: #657b83; }
.solarized.base0 { color: #839496; }
.solarized.base1 { color: #93a1a1; }
.solarized.base2 { color: #eee8d5; }
.solarized.base3  { color: #fdf6e3; }
.solarized.solar-yellow  { color: #b58900; }
.solarized.solar-orange  { color: #cb4b16; }
.solarized.solar-red { color: #dc322f; }
.solarized.solar-magenta { color: #d33682; }
.solarized.solar-violet  { color: #6c71c4; }
.solarized.solar-blue { color: #268bd2; }
.solarized.solar-cyan { color: #2aa198; }
.solarized.solar-green { color: #859900; }

/* Color scheme for code-mirror */

.cm-s-solarized {
  line-height: 1.45em;
  color-profile: sRGB;
  rendering-intent: auto;
}
.cm-s-solarized.cm-s-dark {
  color: #839496;
  background-color: #002b36;
  text-shadow: #002b36 0 1px;
}
.cm-s-solarized.cm-s-light {
  background-color: #fdf6e3;
  color: #657b83;
  text-shadow: #eee8d5 0 1px;
}

.cm-s-solarized .CodeMirror-widget {
  text-shadow: none;
}

.cm-s-solarized .cm-header { color: #586e75; }
.cm-s-solarized .cm-quote { color: #93a1a1; }

.cm-s-solarized .cm-keyword { color: #cb4b16; }
.cm-s-solarized .cm-atom { color: #d33682; }
.cm-s-solarized .cm-number { color: #d33682; }
.cm-s-solarized .cm-def { color: #2aa198; }

.cm-s-solarized .cm-variable { color: #839496; }
.cm-s-solarized .cm-variable-2 { color: #b58900; }
.cm-s-solarized .cm-variable-3, .cm-s-solarized .cm-type { color: #6c71c4; }

.cm-s-solarized .cm-property { color: #2aa198; }
.cm-s-solarized .cm-operator { color: #6c71c4; }

.cm-s-solarized .cm-comment { color: #586e75; font-style:italic; }

.cm-s-solarized .cm-string { color: #859900; }
.cm-s-solarized .cm-string-2 { color: #b58900; }

.cm-s-solarized .cm-meta { color: #859900; }
.cm-s-solarized .cm-qualifier { color: #b58900; }
.cm-s-solarized .cm-builtin { color: #d33682; }
.cm-s-solarized .cm-bracket { color: #cb4b16; }
.cm-s-solarized .CodeMirror-matchingbracket { color: #859900; }
.cm-s-solarized .CodeMirror-nonmatchingbracket { color: #dc322f; }
.cm-s-solarized .cm-tag { color: #93a1a1; }
.cm-s-solarized .cm-attribute { color: #2aa198; }
.cm-s-solarized .cm-hr {
  color: transparent;
  border-top: 1px solid #586e75;
  display: block;
}
.cm-s-solarized .cm-link { color: #93a1a1; cursor: pointer; }
.cm-s-solarized .cm-special { color: #6c71c4; }
.cm-s-solarized .cm-em {
  color: #999;
  text-decoration: underline;
  text-decoration-style: dotted;
}
.cm-s-solarized .cm-error,
.cm-s-solarized .cm-invalidchar {
  color: #586e75;
  border-bottom: 1px dotted #dc322f;
}

.cm-s-solarized.cm-s-dark div.CodeMirror-selected { background: #073642; }
.cm-s-solarized.cm-s-dark.CodeMirror ::selection { background: rgba(7, 54, 66, 0.99); }
.cm-s-solarized.cm-s-dark .CodeMirror-line::-moz-selection, .cm-s-dark .CodeMirror-line > span::-moz-selection, .cm-s-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(7, 54, 66, 0.99); }

.cm-s-solarized.cm-s-light div.CodeMirror-selected { background: #eee8d5; }
.cm-s-solarized.cm-s-light .CodeMirror-line::selection, .cm-s-light .CodeMirror-line > span::selection, .cm-s-light .CodeMirror-line > span > span::selection { background: #eee8d5; }
.cm-s-solarized.cm-s-light .CodeMirror-line::-moz-selection, .cm-s-ligh .CodeMirror-line > span::-moz-selection, .cm-s-ligh .CodeMirror-line > span > span::-moz-selection { background: #eee8d5; }

/* Editor styling */



/* Little shadow on the view-port of the buffer view */
.cm-s-solarized.CodeMirror {
  -moz-box-shadow: inset 7px 0 12px -6px #000;
  -webkit-box-shadow: inset 7px 0 12px -6px #000;
  box-shadow: inset 7px 0 12px -6px #000;
}

/* Remove gutter border */
.cm-s-solarized .CodeMirror-gutters {
  border-right: 0;
}

/* Gutter colors and line number styling based of color scheme (dark / light) */

/* Dark */
.cm-s-solarized.cm-s-dark .CodeMirror-gutters {
  background-color: #073642;
}

.cm-s-solarized.cm-s-dark .CodeMirror-linenumber {
  color: #586e75;
  text-shadow: #021014 0 -1px;
}

/* Light */
.cm-s-solarized.cm-s-light .CodeMirror-gutters {
  background-color: #eee8d5;
}

.cm-s-solarized.cm-s-light .CodeMirror-linenumber {
  color: #839496;
}

/* Common */
.cm-s-solarized .CodeMirror-linenumber {
  padding: 0 5px;
}
.cm-s-solarized .CodeMirror-guttermarker-subtle { color: #586e75; }
.cm-s-solarized.cm-s-dark .CodeMirror-guttermarker { color: #ddd; }
.cm-s-solarized.cm-s-light .CodeMirror-guttermarker { color: #cb4b16; }

.cm-s-solarized .CodeMirror-gutter .CodeMirror-gutter-text {
  color: #586e75;
}

/* Cursor */
.cm-s-solarized .CodeMirror-cursor { border-left: 1px solid #819090; }

/* Fat cursor */
.cm-s-solarized.cm-s-light.cm-fat-cursor .CodeMirror-cursor { background: #77ee77; }
.cm-s-solarized.cm-s-light .cm-animate-fat-cursor { background-color: #77ee77; }
.cm-s-solarized.cm-s-dark.cm-fat-cursor .CodeMirror-cursor { background: #586e75; }
.cm-s-solarized.cm-s-dark .cm-animate-fat-cursor { background-color: #586e75; }

/* Active line */
.cm-s-solarized.cm-s-dark .CodeMirror-activeline-background {
  background: rgba(255, 255, 255, 0.06);
}
.cm-s-solarized.cm-s-light .CodeMirror-activeline-background {
  background: rgba(0, 0, 0, 0.06);
}

.CodeMirror-simplescroll-horizontal div, .CodeMirror-simplescroll-vertical div {
  position: absolute;
  background: #ccc;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #bbb;
  border-radius: 2px;
}

.CodeMirror-simplescroll-horizontal, .CodeMirror-simplescroll-vertical {
  position: absolute;
  z-index: 6;
  background: #eee;
}

.CodeMirror-simplescroll-horizontal {
  bottom: 0; left: 0;
  height: 8px;
}
.CodeMirror-simplescroll-horizontal div {
  bottom: 0;
  height: 100%;
}

.CodeMirror-simplescroll-vertical {
  right: 0; top: 0;
  width: 8px;
}
.CodeMirror-simplescroll-vertical div {
  right: 0;
  width: 100%;
}


.CodeMirror-overlayscroll .CodeMirror-scrollbar-filler, .CodeMirror-overlayscroll .CodeMirror-gutter-filler {
  display: none;
}

.CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div {
  position: absolute;
  background: #bcd;
  border-radius: 3px;
}

.CodeMirror-overlayscroll-horizontal, .CodeMirror-overlayscroll-vertical {
  position: absolute;
  z-index: 6;
}

.CodeMirror-overlayscroll-horizontal {
  bottom: 0; left: 0;
  height: 6px;
}
.CodeMirror-overlayscroll-horizontal div {
  bottom: 0;
  height: 100%;
}

.CodeMirror-overlayscroll-vertical {
  right: 0; top: 0;
  width: 6px;
}
.CodeMirror-overlayscroll-vertical div {
  right: 0;
  width: 100%;
}

:root {
  --color-new: #28a745;
  --color-deleted: #d73a49;
  --color-modified: #dbab09;
  --color-renamed: #0366d6;
  --color-conflicted: #f66a0a;
  --text-color: #24292e;
  --text-secondary-color: #6a737d;
  --background-color: #fff;
  --button-height: 25px;
  --button-background: #0366d6;
  --button-border-radius: 2px;
  --button-hover-background: #0372ef;
  --button-text-color: #fff;
  --button-focus-border-color: #005cc5;
  --link-button-color: #0366d6;
  --link-button-hover-color: #005cc5;
  --secondary-button-background: #fafbfc;
  --secondary-button-hover-background: #fff;
  --secondary-button-text-color: var(--text-color);
  --secondary-button-focus-shadow-color: rgba(225, 228, 232, 0.75);
  --secondary-button-focus-border-color: #d1d5da;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-family-monospace: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  /**
   * Font weight to use for semibold text
   */
  --font-weight-semibold: 600;
  /**
   * Font weight to use for light text
   */
  --font-weight-light: 300;
  --font-size: 12px;
  --font-size-sm: 11px;
  --font-size-md: 14px;
  --font-size-lg: 28px;
  --font-size-xl: 32px;
  --font-size-xxl: 42px;
  /** Extra small font size, be very conservative with the use of this */
  --font-size-xs: 9px;
  /**
   * Background color for custom scroll bars.
   * The color is applied to the thumb part of the scrollbar.
   *
   * Note: Only applies to win32 platforms
   */
  --scroll-bar-thumb-background-color: rgba(0, 0, 0, 0.2);
  /**
   * Background color for custom scroll bars in their active state.
   * The color is applied to the thumb part of the scrollbar.
   *
   * Note: Only applies to win32 platforms
   */
  --scroll-bar-thumb-background-color-active: rgba(0, 0, 0, 0.5);
  --box-background-color: var(--background-color);
  --box-alt-background-color: #f6f8fa;
  /**
   * Background color for skeleton or "loading" boxes
   */
  --box-skeleton-background-color: #e1e4e8;
  --skeleton-background-gradient: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
  /**
   * Border color for boxes.
   */
  --box-border-color: #e1e4e8;
  --box-border-accent-color: #0366d6;
  /**
   * Background color for selected boxes without keyboard focus
   */
  --box-selected-background-color: #ebeef1;
  /**
   * Text color for when a user hovers over a boxe with a
   * pointing device. Should not be used by boxes that doesn't
   * implement a hover state since this will conflict with
   * selection and active selection
   */
  --box-hover-text-color: #24292e;
  /**
   * Background color for when a user hovers over a boxe with a
   * pointing device. Should not be used by boxes that doesn't
   * implement a hover state since this will conflict with
   * selection and active selection
   */
  /**
   * Text color for selected boxes without keyboard focus
   */
  --box-selected-text-color: #24292e;
  /**
   * Border color for selected boxes without keyboard focus
   */
  --box-selected-border-color: #959da5;
  /**
   * Background color for selected boxes with active keyboard focus
   */
  --box-selected-active-background-color: #0366d6;
  /**
   * Text color for selected boxes with active keyboard focus
   */
  --box-selected-active-text-color: #fff;
  /**
   * Border color for selected boxes with active keyboard focus
   */
  --box-selected-active-border-color: #959da5;
  /**
   * Gradient used to indicate that content is overflowing, intended
   * for use when content can be expanded through other means than
   * scrolling.
   */
  --box-overflow-shadow-background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, white 90%, white 100%);
  /**
   * Placeholder color for input boxes
   */
  --box-placeholder-color: #6a737d;
  /**
   * Author input (co-authors)
   */
  --co-author-tag-background-color: #f1f8ff;
  --co-author-tag-border-color: #c8e1ff;
  /**
   * The height of the title bar area on Win32 platforms
   * If changed, update titleBarHeight in 'app/src/ui/dialog/dialog.tsx'
  */
  --win32-title-bar-height: 28px;
  --win32-title-bar-background-color: #24292e;
  /**
   * The height of the title bar area on darwin platforms
   * If changed, update titleBarHeight in 'app/src/ui/dialog/dialog.tsx'
  */
  --darwin-title-bar-height: 22px;
  --spacing: 10px;
  --spacing-double: calc(var(--spacing) * 2);
  --spacing-triple: calc(var(--spacing) * 3);
  --spacing-quad: calc(var(--spacing) * 4);
  --spacing-half: calc(var(--spacing) / 2);
  --spacing-third: calc(var(--spacing) / 3);
  --border-radius: 3px;
  --base-border: 1px solid var(--box-border-color);
  --shadow-color: rgba(71, 83, 95, 0.19);
  --base-box-shadow: 0 2px 7px var(--shadow-color);
  --toolbar-height: 50px;
  --toolbar-background-color: #24292e;
  --toolbar-border-color: #24292e;
  --toolbar-text-color: #fff;
  --toolbar-text-secondary-color: #d1d5da;
  --toolbar-button-color: var(--toolbar-text-color);
  --toolbar-button-background-color: transparent;
  --toolbar-button-border-color: black;
  --toolbar-button-secondary-color: var(--toolbar-text-secondary-color);
  --toolbar-button-hover-color: #fff;
  --toolbar-button-hover-background-color: #2f363d;
  --toolbar-button-hover-border-color: var(--toolbar-button-border-color);
  --toolbar-button-focus-background-color: #2f363d;
  --toolbar-button-active-color: var(--text-color);
  --toolbar-button-active-background-color: var(--background-color);
  --toolbar-button-active-border-color: var(--background-color);
  --toolbar-button-progress-color: #2f363d;
  --toolbar-button-focus-progress-color: #444d56;
  --toolbar-button-hover-progress-color: #444d56;
  --toolbar-dropdown-open-progress-color: #e1e4e8;
  /**
   * App menu bar colors (Windows/Linux only)
   */
  --app-menu-button-color: var(--toolbar-text-color);
  --app-menu-button-hover-color: var(--toolbar-button-hover-color);
  --app-menu-button-hover-background-color: var(--toolbar-button-hover-background-color);
  --app-menu-button-active-color: var(--toolbar-button-active-color);
  --app-menu-button-active-background-color: var(--toolbar-button-active-background-color);
  --app-menu-pane-color: var(--text-color);
  --app-menu-pane-secondary-color: var(--text-secondary-color);
  --app-menu-pane-background-color: var(--toolbar-button-active-background-color);
  --app-menu-divider-color: var(--box-border-color);
  /**
    * Background color for badges inside of toolbar buttons.
    * Examples of badges are the ahead/behind bubble in the
    * push/pull button and the PR badge in the branch drop
    * down button.
    */
  --toolbar-badge-background-color: #586069;
  --toolbar-badge-active-background-color: #e1e4e8;
  --tab-bar-height: 29px;
  --tab-bar-active-color: #0366d6;
  --tab-bar-background-color: #fff;
  --tab-bar-hover-background-color: #f6f8fa;
  /** Count bubble colors when used inside of a tab bar item */
  --tab-bar-count-color: var(--text-color);
  --tab-bar-count-background-color: #e1e4e8;
  /**
    * Badge colors when used inside of list items.
    * Example of this is the change indicators inside
    * of the repository list.
    */
  --list-item-badge-color: #2f363d;
  --list-item-badge-background-color: #e1e4e8;
  --list-item-selected-badge-color: #24292e;
  --list-item-selected-badge-background-color: #d1d5da;
  --list-item-selected-active-badge-color: #24292e;
  --list-item-selected-active-badge-background-color: #fff;
  --list-item-hover-background-color: #f6f8fa;
  /** Win32 has custom scrol bars, see _scroll.scss */
  --win32-scroll-bar-size: 10px;
  /**
   * The z-index for popups. Nothing should be higher, but other z-indexes can
   * be defined in terms of it.
   *
   * 10 seems arbitrary (because it is) but we have to go that high because
   * codemirror is all over the place with their z-indexes and uses at least
   * 0-6.
   */
  --popup-z-index: 10;
  --popup-overlay-z-index: calc(var(--popup-z-index) - 1);
  --foldout-z-index: calc(var(--popup-z-index) - 2);
  /**
   * Toast notifications are shown temporarily for things like the zoom
   * percentage changing or the app toggling between full screen and normal
   * window mode.
   */
  --toast-notification-color: #fafbfc;
  --toast-notification-background-color: rgba(36, 41, 46, 0.6);
  --tip-box-background-color: rgba(3, 102, 214, 0.06);
  --tip-box-border-color: #c8e1ff;
  /** The highlight color used for focus rings and focus box shadows */
  --focus-color: #0366d6;
  /**
   * Variables for form elements
   */
  --text-field-height: 25px;
  --text-field-focus-shadow-color: rgba(3, 102, 214, 0.25);
  /**
   * Blankslate actions, see `BlankslateAction` component.
   */
  --primary-blankslate-action-background: #f1f8ff;
  --primary-blankslate-action-border-color: #c8e1ff;
  /**
   * Diff view
   */
  --diff-line-padding-y: 2px;
  --diff-text-color: #24292e;
  --diff-border-color: #e1e4e8;
  --diff-gutter-color: #e1e4e8;
  --diff-gutter-background-color: var(--background-color);
  --diff-line-number-color: #444d56;
  --diff-line-number-column-width: 50px;
  --diff-selected-background-color: #2188ff;
  --diff-selected-border-color: #005cc5;
  --diff-selected-gutter-color: #005cc5;
  --diff-selected-text-color: var(--background-color);
  --diff-add-background-color: #e6ffed;
  --diff-add-border-color: #85e89d;
  --diff-add-gutter-color: #85e89d;
  --diff-add-gutter-background-color: #cdffd8;
  --diff-add-inner-background-color: #acf2bd;
  --diff-add-text-color: var(--diff-text-color);
  --diff-delete-background-color: #ffeef0;
  --diff-delete-border-color: #fdaeb7;
  --diff-delete-gutter-color: #fdaeb7;
  --diff-delete-gutter-background-color: #ffdce0;
  --diff-delete-inner-background-color: #fdb8c0;
  --diff-delete-text-color: var(--diff-text-color);
  --diff-hunk-background-color: #f1f8ff;
  --diff-hunk-border-color: #c8e1ff;
  --diff-hunk-gutter-color: #afd3ff;
  --diff-hunk-gutter-background-color: #dbedff;
  --diff-hunk-text-color: #6a737d;
  --diff-hover-background-color: #79b8ff;
  --diff-hover-border-color: #2188ff;
  --diff-hover-gutter-color: #2188ff;
  --diff-hover-text-color: var(--background-color);
  --diff-add-hover-background-color: #85e89d;
  --diff-add-hover-border-color: #34d058;
  --diff-add-hover-gutter-color: #34d058;
  --diff-add-hover-text-color: var(--text-color);
  --diff-delete-hover-background-color: #fdaeb7;
  --diff-delete-hover-border-color: #f97583;
  --diff-delete-hover-gutter-color: #f97583;
  --diff-delete-hover-text-color: var(--text-color);
  --syntax-variable-color: #6f42c1;
  --syntax-alt-variable-color: #24292e;
  --syntax-keyword-color: #d73a49;
  --syntax-atom-color: #005cc5;
  --syntax-string-color: #032f62;
  --syntax-qualifier-color: #6f42c1;
  --syntax-type-color: #d73a49;
  --syntax-comment-color: #6a737d;
  --syntax-tag-color: #22863a;
  --syntax-attribute-color: #6f42c1;
  --syntax-link-color: #032f62;
  --syntax-header-color: #0000ff;
  --undo-animation-duration: 500ms;
  --error-color: #d73a49;
  --form-error-background: #ffdce0;
  --form-error-border-color: #fdaeb7;
  --form-error-text-color: #9e1c23;
  /** Overlay is used as a background for both modals and foldouts */
  --overlay-background-color: rgba(0, 0, 0, 0.4);
  /** Dialog */
  --dialog-warning-color: #f9c513;
  --dialog-error-color: #d73a49;
  /** Inline paths and code */
  --path-segment-background: #f1f8ff;
  --path-segment-padding: var(--spacing-third);
  /** Diverging notification banner colors */
  --notification-banner-background: #f1f8ff;
  --notification-banner-border-color: #c8e1ff;
  --notification-ref-background: rgba(255, 255, 255, 0.75);
  --easing-ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --easing-ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --easing-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  /** rebase progress bar */
  --dialog-rebase-progress-background: #28a745;
  /** merge/rebase status indicators */
  --status-pending-color: #dbab09;
  --status-error-color: #d73a49;
  --status-success-color: #28a745; }

::backdrop {
  --overlay-background-color: rgba(0, 0, 0, 0.4); }

body.theme-dark {
  --color-new: #28a745;
  --color-deleted: #d73a49;
  --color-modified: #dbab09;
  --color-renamed: #0366d6;
  --color-conflicted: #f66a0a;
  --text-color: #d1d5da;
  --text-secondary-color: #959da5;
  --background-color: #24292e;
  --button-background: #0366d6;
  --button-hover-background: #0372ef;
  --button-text-color: #fff;
  --button-focus-border-color: #005cc5;
  --link-button-color: #3090ff;
  --link-button-hover-color: #2188ff;
  --secondary-button-background: #2f363d;
  --secondary-button-hover-background: var(--secondary-button-background);
  --secondary-button-text-color: var(--text-color);
  --secondary-button-focus-shadow-color: rgba(225, 228, 232, 0.75);
  --secondary-button-focus-border-color: #d1d5da;
  /**
   * Background color for custom scroll bars.
   * The color is applied to the thumb part of the scrollbar.
   *
   * Note: Only applies to win32 platforms
   */
  --scroll-bar-thumb-background-color: rgba(0, 0, 0, 0.7);
  /**
   * Background color for custom scroll bars in their active state.
   * The color is applied to the thumb part of the scrollbar.
   *
   * Note: Only applies to win32 platforms
   */
  --scroll-bar-thumb-background-color-active: rgba(0, 0, 0, 0.8);
  --box-background-color: #1d2125;
  --box-alt-background-color: #2f363d;
  /**
   * Background color for skeleton or "loading" boxes
   */
  --box-skeleton-background-color: #444d56;
  --skeleton-background-gradient: -webkit-linear-gradient(left, rgba(36, 41, 46, 0) 0%, rgba(36, 41, 46, 0.5) 50%, rgba(36, 41, 46, 0) 100%);
  /**
   * Border color for boxes.
   */
  --box-border-color: #141414;
  --box-border-accent-color: #0366d6;
  /**
   * Background color for selected boxes without keyboard focus
   */
  --box-selected-background-color: #444d56;
  /**
   * Text color for when a user hovers over a boxe with a
   * pointing device. Should not be used by boxes that doesn't
   * implement a hover state since this will conflict with
   * selection and active selection
   */
  --box-hover-text-color: var(--text-color);
  /**
   * Background color for when a user hovers over a boxe with a
   * pointing device. Should not be used by boxes that doesn't
   * implement a hover state since this will conflict with
   * selection and active selection
   */
  /**
   * Text color for selected boxes without keyboard focus
   */
  --box-selected-text-color: var(--text-color);
  /**
   * Border color for selected boxes without keyboard focus
   */
  --box-selected-border-color: #959da5;
  /**
   * Background color for selected boxes with active keyboard focus
   */
  --box-selected-active-background-color: #0366d6;
  /**
   * Text color for selected boxes with active keyboard focus
   */
  --box-selected-active-text-color: #fff;
  /**
   * Border color for selected boxes with active keyboard focus
   */
  --box-selected-active-border-color: #959da5;
  /**
   * Gradient used to indicate that content is overflowing, intended
   * for use when content can be expanded through other means than
   * scrolling.
   */
  --box-overflow-shadow-background: linear-gradient(180deg, rgba(36, 41, 46, 0) 0%, #24292e 90%, #24292e 100%);
  /**
   * Placeholder color for input boxes
   */
  --box-placeholder-color: #959da5;
  /**
   * Author input (co-authors)
   */
  --co-author-tag-background-color: #032f62;
  --co-author-tag-border-color: #044289;
  --base-border: 1px solid var(--box-border-color);
  --shadow-color: rgba(0, 0, 0, 0.5);
  --base-box-shadow: 0 2px 7px var(--shadow-color);
  --toolbar-background-color: #1d2125;
  --toolbar-border-color: var(--box-border-color);
  --toolbar-text-color: var(--text-color);
  --toolbar-text-secondary-color: var(--text-secondary-color);
  --toolbar-button-color: var(--toolbar-text-color);
  --toolbar-button-background-color: transparent;
  --toolbar-button-border-color: var(--box-border-color);
  --toolbar-button-secondary-color: var(--toolbar-text-secondary-color);
  --toolbar-button-hover-color: #fff;
  --toolbar-button-hover-background-color: #2f363d;
  --toolbar-button-hover-border-color: var(--toolbar-button-border-color);
  --toolbar-button-focus-background-color: #2f363d;
  --toolbar-button-active-color: var(--text-color);
  --toolbar-button-active-background-color: var(--background-color);
  --toolbar-button-active-border-color: var(--box-border-color);
  --toolbar-button-progress-color: #2f363d;
  --toolbar-button-focus-progress-color: #444d56;
  --toolbar-button-hover-progress-color: #444d56;
  --toolbar-dropdown-open-progress-color: #e1e4e8;
  /**
    * App menu bar colors (Windows/Linux only)
    */
  --app-menu-button-color: var(--toolbar-text-color);
  --app-menu-button-hover-color: var(--toolbar-button-hover-color);
  --app-menu-button-hover-background-color: var(--toolbar-button-hover-background-color);
  --app-menu-button-active-color: var(--text-color);
  --app-menu-button-active-background-color: #2f363d;
  --app-menu-pane-color: var(--text-color);
  --app-menu-pane-secondary-color: var(--text-secondary-color);
  --app-menu-pane-background-color: #2f363d;
  --app-menu-divider-color: #586069;
  /**
   * Background color for badges inside of toolbar buttons.
   * Examples of badges are the ahead/behind bubble in the
   * push/pull button and the PR badge in the branch drop
   * down button.
   */
  --toolbar-badge-background-color: #444d56;
  --toolbar-badge-active-background-color: #444d56;
  --tab-bar-active-color: #0366d6;
  --tab-bar-background-color: var(--box-background-color);
  --tab-bar-hover-background-color: #2f363d;
  /** Count bubble colors when used inside of a tab bar item */
  --tab-bar-count-color: var(--text-color);
  --tab-bar-count-background-color: #444d56;
  /**
    * Badge colors when used inside of list items.
    * Example of this is the ahead/behind indicators inside
    * of the repository list.
    */
  --list-item-badge-color: var(--text-color);
  --list-item-badge-background-color: #586069;
  --list-item-selected-badge-color: #fff;
  --list-item-selected-badge-background-color: #6a737d;
  --list-item-selected-active-badge-color: #24292e;
  --list-item-selected-active-badge-background-color: #fff;
  --list-item-hover-background-color: #2f363d;
  /**
   * Toast notifications are shown temporarily for things like the zoom
   * percentage changing or the app toggling between full screen and normal
   * window mode.
   */
  --toast-notification-color: var(--text-color);
  --toast-notification-background-color: rgba(0, 0, 0, 0.8);
  /** The highlight color used for focus rings and focus box shadows */
  --focus-color: #0366d6;
  /**
   * Variables for form elements
   */
  --text-field-focus-shadow-color: rgba(3, 102, 214, 0.25);
  /**
   * Blankslate actions, see `BlankslateAction` component.
   */
  --primary-blankslate-action-background: #05264c;
  --primary-blankslate-action-border-color: #044289;
  /**
   * Diff view
   */
  --diff-text-color: var(--text-color);
  --diff-border-color: #2f363d;
  --diff-gutter-color: #2f363d;
  --diff-gutter-background-color: #1d2125;
  --diff-line-number-color: var(--text-secondary-color);
  --diff-line-number-column-width: 50px;
  --diff-selected-background-color: #044289;
  --diff-selected-border-color: #005cc5;
  --diff-selected-gutter-color: #005cc5;
  --diff-selected-text-color: var(--text-color);
  --diff-add-background-color: #113a1b;
  --diff-add-border-color: #123e1c;
  --diff-add-gutter-color: #123e1c;
  --diff-add-gutter-background-color: #0b2611;
  --diff-add-inner-background-color: #22863a;
  --diff-add-text-color: var(--diff-text-color);
  --diff-delete-background-color: #450c0f;
  --diff-delete-border-color: #5b1014;
  --diff-delete-gutter-color: #5b1014;
  --diff-delete-gutter-background-color: #2f090a;
  --diff-delete-inner-background-color: #b31d28;
  --diff-delete-text-color: #ffdce0;
  --diff-hunk-background-color: #1d2125;
  --diff-hunk-border-color: #2b3137;
  --diff-hunk-gutter-color: #2b3137;
  --diff-hunk-gutter-background-color: #171a1d;
  --diff-hunk-text-color: var(--text-secondary-color);
  --diff-hover-background-color: #0366d6;
  --diff-hover-border-color: #2188ff;
  --diff-hover-gutter-color: #2188ff;
  --diff-hover-text-color: var(--diff-text-color);
  --diff-add-hover-background-color: #144620;
  --diff-add-hover-border-color: #176f2c;
  --diff-add-hover-gutter-color: #176f2c;
  --diff-add-hover-text-color: var(--text-color);
  --diff-delete-hover-background-color: #9e1c23;
  --diff-delete-hover-border-color: #b31d28;
  --diff-delete-hover-gutter-color: #b31d28;
  --diff-delete-hover-text-color: var(--text-color);
  --syntax-variable-color: #b392f0;
  --syntax-alt-variable-color: #79b8ff;
  --syntax-keyword-color: #f97583;
  --syntax-atom-color: #79b8ff;
  --syntax-string-color: #ffab70;
  --syntax-qualifier-color: #b392f0;
  --syntax-type-color: #f97583;
  --syntax-comment-color: #959da5;
  --syntax-tag-color: #34d058;
  --syntax-attribute-color: #b392f0;
  --syntax-link-color: #79b8ff;
  --syntax-header-color: #f97583;
  --error-color: #d73a49;
  --form-error-background: #79161a;
  --form-error-border-color: #86181d;
  --form-error-text-color: var(--text-color);
  /** Overlay is used as a background for both modals and foldouts */
  --overlay-background-color: rgba(0, 0, 0, 0.5);
  /** Dialog */
  --dialog-warning-color: #f9c513;
  --dialog-error-color: #cb2431;
  /** Inline paths and code */
  --path-segment-background: #444d56;
  /** Diverging notification banner colors */
  --notification-banner-background: #2f363d;
  --notification-banner-border-color: #444d56;
  --notification-ref-background: #444d56;
  /** merge/rebase status indicators */
  --status-pending-color: #dbab09;
  --status-error-color: #d73a49;
  --status-success-color: #28a745; }
  body.theme-dark .blankslate-image {
    filter: invert() grayscale(1) brightness(8) contrast(0.6); }

.CodeMirror-cursor {
  border-left-color: currentColor; }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
html {
  box-sizing: border-box; }

*,
*::before,
*::after {
  box-sizing: inherit; }

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; }

html {
  font-size: var(--font-size);
  position: relative; }

body {
  font-family: var(--font-family-sans-serif);
  font-size: var(--font-size);
  line-height: 1.5;
  color: var(--text-color);
  background-color: var(--background-color); }

:not(input):not(textarea), :not(input):not(textarea)::after, :not(input):not(textarea)::before {
  -webkit-user-select: none;
  user-select: none;
  cursor: default; }

img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none; }

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem; }

button {
  -webkit-app-region: no-drag; }

#content {
  display: flex;
  height: 100%;
  width: 100%; }

.blankslate {
  background: var(--box-alt-background-color);
  color: var(--text-secondary-color);
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing); }

.fill-window {
  position: absolute;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

:focus:not(.focus-ring) {
  outline: none; }

:focus {
  outline: auto 5px var(--focus-color); }

.more-dropdown {
  color: var(--text-color) !important;
  margin-left: var(--spacing); }
  .more-dropdown .octicon {
    margin-left: var(--spacing-third);
    width: 8px; }

.brutalism {
  background: salmon; }

kbd {
  border-radius: var(--border-radius);
  border: var(--base-border);
  display: inline-block;
  padding: 1px 2px;
  line-height: 1;
  min-height: 16px;
  font-family: var(--font-family);
  text-align: center;
  min-width: 1.5em; }
  kbd:not(:last-child) {
    margin-right: 2px; }

.byline {
  font-size: var(--font-size-sm);
  color: var(--text-secondary-color); }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
#desktop-app-container {
  width: 100%;
  height: 100%;
  overflow: hidden; }

#desktop-app-chrome {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%; }

#desktop-app-contents {
  display: flex;
  flex-direction: column;
  flex-grow: 1; }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
#app-menu-foldout {
  height: 100%;
  display: flex; }

.menu-pane {
  height: 100%;
  width: 240px; }
  .menu-pane.menu-pane-branch {
    width: 275px; }
  .menu-pane.menu-pane-edit {
    width: 175px; }
  .menu-pane.menu-pane-help {
    width: 220px; }
  .menu-pane.menu-pane-file {
    width: 205px; }
  .menu-pane:not(:first-child) {
    border-left: var(--base-border); }
  .menu-pane:not(:last-child) .list-item.selected {
    --text-color: var(--box-selected-active-text-color);
    --text-secondary-color: var(--box-selected-active-text-color);
    color: var(--text-color);
    background-color: var(--box-selected-active-background-color); }
  .menu-pane .ReactVirtualized__Grid:focus {
    outline: none; }
  .menu-pane .menu-item {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    min-width: 0; }
    .menu-pane .menu-item.disabled {
      opacity: 0.3; }
    .menu-pane .menu-item .label {
      flex-grow: 1;
      margin-left: var(--spacing-double);
      margin-right: var(--spacing);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
    .menu-pane .menu-item .submenu-arrow {
      flex-shrink: 0;
      opacity: 0.7;
      height: 12px;
      margin-right: var(--spacing); }
    .menu-pane .menu-item .accelerator {
      flex-shrink: 0;
      margin-right: var(--spacing);
      color: var(--text-secondary-color); }
    .menu-pane .menu-item.checked .label {
      margin-left: 0; }
    .menu-pane .menu-item.checked .icon {
      flex-grow: 0;
      margin: calc((var(--spacing-double) - 16) / 2) 0; }
    .menu-pane .menu-item .access-key.highlight {
      text-decoration: underline; }
  .menu-pane hr {
    width: 100%;
    border: none;
    height: 1px;
    border-bottom: 1px solid var(--app-menu-divider-color); }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
body.platform-win32 ::-webkit-scrollbar {
  width: var(--win32-scroll-bar-size);
  height: var(--win32-scroll-bar-size);
  background: transparent;
  cursor: pointer; }
  body.platform-win32 ::-webkit-scrollbar-thumb {
    background-color: var(--scroll-bar-thumb-background-color);
    border-radius: var(--win32-scroll-bar-size);
    border-color: transparent;
    border-style: solid;
    border-width: 3px;
    background-clip: padding-box; }
    body.platform-win32 ::-webkit-scrollbar-thumb:active {
      background-color: var(--scroll-bar-thumb-background-color-active); }
    body.platform-win32 ::-webkit-scrollbar-thumb:hover, body.platform-win32 ::-webkit-scrollbar-thumb:active {
      border-width: 1px;
      background-color: var(--scroll-bar-thumb-background-color-active);
      cursor: pointer; }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
#desktop-app-title-bar {
  -webkit-app-region: drag;
  flex-grow: 0;
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: row; }
  body.platform-darwin #desktop-app-title-bar {
    height: var(--darwin-title-bar-height);
    background: linear-gradient(to bottom, #3b3f46 0%, #2b2e33 100%);
    border-bottom: 1px solid #000; }
  body.platform-win32 #desktop-app-title-bar {
    height: var(--win32-title-bar-height);
    background: var(--win32-title-bar-background-color);
    border-bottom: 1px solid #000; }
    body.platform-win32 #desktop-app-title-bar .app-icon {
      color: var(--toolbar-button-secondary-color);
      margin: 0 var(--spacing);
      align-self: center; }
  #desktop-app-title-bar .resize-handle {
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-app-region: no-drag; }
    #desktop-app-title-bar .resize-handle.top {
      width: 100%;
      height: 3px; }
    #desktop-app-title-bar .resize-handle.left {
      width: 3px;
      height: var(--win32-title-bar-height); }
  #desktop-app-title-bar .window-controls {
    flex-grow: 0;
    flex-shrink: 0;
    margin-left: auto; }
    #desktop-app-title-bar .window-controls button {
      -webkit-app-region: no-drag;
      display: inline-block;
      position: relative;
      width: 45px;
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;
      border: none;
      box-shadow: none;
      border-radius: 0;
      color: #a0a0a0;
      background-color: transparent;
      transition: background-color 0.25s ease;
      line-height: 10px;
      /* https://css-tricks.com/cascading-svg-fill-color/ */ }
      #desktop-app-title-bar .window-controls button:focus {
        outline: none; }
      #desktop-app-title-bar .window-controls button:hover {
        background-color: #888;
        color: #fff; }
        #desktop-app-title-bar .window-controls button:hover:active {
          background-color: #666;
          transition: none; }
      #desktop-app-title-bar .window-controls button.close:hover {
        background-color: #e81123;
        color: #fff; }
        #desktop-app-title-bar .window-controls button.close:hover:active {
          background-color: #bf0f1d;
          transition: none; }
      #desktop-app-title-bar .window-controls button svg {
        fill: currentColor; }

#desktop-app-title-bar.light-title-bar {
  position: fixed;
  z-index: 1; }
  body.platform-darwin #desktop-app-title-bar.light-title-bar {
    background: transparent;
    border-bottom: none; }
  body.platform-win32 #desktop-app-title-bar.light-title-bar {
    background: transparent;
    border-bottom: none; }
  #desktop-app-title-bar.light-title-bar .window-controls button:hover {
    background-color: #e5e5e5;
    color: #000; }
    #desktop-app-title-bar.light-title-bar .window-controls button:hover:active {
      background-color: #cccccc; }
  #desktop-app-title-bar.light-title-bar .window-controls button.close:hover {
    background-color: #e81123; }
    #desktop-app-title-bar.light-title-bar .window-controls button.close:hover svg {
      fill: #fff; }
    #desktop-app-title-bar.light-title-bar .window-controls button.close:hover:active {
      background-color: #f1707a; }

#app-menu-bar {
  display: flex; }
  #app-menu-bar .toolbar-button > button {
    padding: 0 var(--spacing);
    border: 0; }
    #app-menu-bar .toolbar-button > button .access-key.highlight {
      text-decoration: underline; }
  #app-menu-bar .toolbar-dropdown.open > .toolbar-button > button {
    background-color: var(--app-menu-button-active-background-color);
    color: var(--app-menu-button-active-color); }
  #app-menu-bar .toolbar-dropdown:not(.open) > .toolbar-button > button {
    color: var(--app-menu-button-color);
    background: transparent; }
    #app-menu-bar .toolbar-dropdown:not(.open) > .toolbar-button > button:hover, #app-menu-bar .toolbar-dropdown:not(.open) > .toolbar-button > button:focus {
      color: var(--app-menu-button-hover-color);
      background: var(--app-menu-button-hover-background-color); }
  #app-menu-bar #foldout-container .foldout {
    background: transparent;
    pointer-events: none; }
    #app-menu-bar #foldout-container .foldout .menu-pane {
      --background-color: var(--app-menu-pane-background-color);
      background: var(--background-color);
      --text-color: var(--app-menu-pane-color);
      color: var(--text-color);
      --text-secondary-color: var(--app-menu-pane-secondary-color);
      pointer-events: all; }
    #app-menu-bar #foldout-container .foldout .menu-item:hover:not(.disabled) {
      --text-color: var(--box-selected-active-text-color);
      --text-secondary-color: var(--box-selected-active-text-color);
      color: var(--text-color);
      background-color: var(--box-selected-active-background-color); }

body.platform-win32 #desktop-app-chrome.blurred #desktop-app-title-bar .app-icon,
body.platform-win32 #desktop-app-chrome.blurred #desktop-app-title-bar .window-controls > button:not(:hover),
body.platform-win32 #desktop-app-chrome.blurred #desktop-app-title-bar .toolbar-dropdown:not(.open) .menu-item .label {
  opacity: 0.6; }

#window-zoom-info {
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0; }
  #window-zoom-info > div {
    padding: var(--spacing);
    min-width: 100px;
    background: var(--toast-notification-background-color);
    color: var(--toast-notification-color);
    text-align: center;
    border-radius: 100px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    z-index: 20; }
  #window-zoom-info .zoom-in-appear {
    transform: scale(0.25);
    opacity: 0; }
  #window-zoom-info .zoom-out-appear {
    transform: scale(1.75);
    opacity: 0; }
  #window-zoom-info .zoom-in-leave-active,
  #window-zoom-info .zoom-out-leave-active {
    opacity: 0;
    transition: opacity 100ms ease-out; }
  #window-zoom-info .zoom-in-appear-active,
  #window-zoom-info .zoom-out-appear-active {
    transform: scale(1);
    opacity: 1;
    transition: all 100ms ease-out; }

.toast-notification-container {
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0; }
  .toast-notification-container .toast-notification {
    padding: var(--spacing) var(--spacing-double);
    min-width: 100px;
    background: var(--toast-notification-background-color);
    color: var(--toast-notification-color);
    text-align: center;
    border-radius: 100px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    z-index: 20; }
  .toast-notification-container kbd {
    padding: var(--spacing-half);
    border-color: #d1d5da; }

.toast-animation-appear {
  transform: scale(0.25);
  opacity: 0.1; }

.toast-animation-appear-active {
  transform: scale(1);
  opacity: 1;
  transition: all 100ms ease-out; }

.toast-animation-leave-active {
  opacity: 0;
  transition: all 250ms ease-out; }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
.file-list {
  height: 100%; }
  .file-list .list-item {
    border-bottom: var(--base-border); }
  .file-list .list-focus-container.focus-within .list-item:not(.selected) .status-new,
  .file-list .list-focus-container:not(.focus-within) .list-item .status-new {
    fill: var(--color-new); }
  .file-list .list-focus-container.focus-within .list-item:not(.selected) .status-copied,
  .file-list .list-focus-container:not(.focus-within) .list-item .status-copied {
    fill: var(--color-new); }
  .file-list .list-focus-container.focus-within .list-item:not(.selected) .status-modified,
  .file-list .list-focus-container:not(.focus-within) .list-item .status-modified {
    fill: var(--color-modified); }
  .file-list .list-focus-container.focus-within .list-item:not(.selected) .status-renamed,
  .file-list .list-focus-container:not(.focus-within) .list-item .status-renamed {
    fill: var(--color-renamed); }
  .file-list .list-focus-container.focus-within .list-item:not(.selected) .status-deleted,
  .file-list .list-focus-container:not(.focus-within) .list-item .status-deleted {
    fill: var(--color-deleted); }
  .file-list .list-focus-container.focus-within .list-item:not(.selected) .status-conflicted,
  .file-list .list-focus-container:not(.focus-within) .list-item .status-conflicted {
    fill: var(--color-conflicted); }
  .file-list .list-focus-container.focus-within .list-item:not(.selected) .status-resolved,
  .file-list .list-focus-container:not(.focus-within) .list-item .status-resolved {
    fill: var(--color-new); }
  .file-list .list-focus-container.focus-within .list-item:not(.selected) .line-endings,
  .file-list .list-focus-container:not(.focus-within) .list-item .line-endings {
    fill: var(--color-conflicted); }
  .file-list .file {
    display: flex;
    align-items: center;
    flex-grow: 1;
    min-width: 0;
    height: 100%;
    padding: 0 var(--spacing); }
    .file-list .file .checkbox-component {
      flex-shrink: 0;
      width: 20px; }
    .file-list .file input,
    .file-list .file .status {
      flex-shrink: 0; }
    .file-list .file .octicon {
      vertical-align: text-bottom; }

svg.octicon {
  /* https://css-tricks.com/cascading-svg-fill-color/ */
  fill: currentColor;
  /* Only height is specified here since not every Octicon is a 16px wide.
  Forcing a width of 16px would result in some blurry icons showing up.
  Instead, let's imply width: auto; instead. */
  height: 16px;
  flex-shrink: 0; }

.list {
  flex-grow: 1;
  height: 100%;
  min-width: 0;
  overflow: hidden; }
  .list .ReactVirtualized__Grid {
    background: var(--background-color); }

body.platform-win32 .list {
  position: relative; }
  body.platform-win32 .list .ReactVirtualized__Grid::-webkit-scrollbar {
    display: none; }
  body.platform-win32 .list .fake-scroll {
    display: none; }
  body.platform-win32 .list:hover .fake-scroll {
    display: block;
    position: absolute;
    top: 0px;
    right: 3px;
    width: 15px;
    overflow-y: auto;
    overflow-x: hidden; }

.list-focus-container.focus-within .list-item.selected {
  --text-color: var(--box-selected-active-text-color);
  --text-secondary-color: var(--box-selected-active-text-color);
  color: var(--text-color);
  background-color: var(--box-selected-active-background-color); }

.list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%; }
  .list-item.selected {
    --text-color: var(--box-selected-text-color);
    --text-secondary-color: var(--box-selected-text-color);
    color: var(--text-color);
    background-color: var(--box-selected-background-color); }
  .list-item:focus {
    outline: none; }
  .list-item:not(.not-selectable):hover {
    background: var(--list-item-hover-background-color); }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
.repository-list {
  height: 100%;
  display: flex;
  flex-direction: row;
  /**
   * Inherit the min-width from the ToolbarDropdown so that the repositories
   * list will always be the width of the button. Otherwise, if the Add
   * Repository foldout was open, it'd be taken into account as part of the
   * width and the list wouldn't be the same width as the button.
   */
  min-width: inherit;
  /**
   * Container for repository list items in the sidebar
   *
   * Contains two elements, one 16x16 <svg class='octicon'> holding an octicon
   * representing the repository type (local, private, public, fork)
   * and one <div class='name'> holding the repository name.
   */ }
  .repository-list .repository-list-item {
    padding: 0 var(--spacing);
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%; }
    .repository-list .repository-list-item:not(.group-repositories-by-owner) {
      padding-left: 0; }
    .repository-list .repository-list-item .icon-for-repository {
      margin-right: var(--spacing-half);
      flex-shrink: 0;
      width: 16px; }
    .repository-list .repository-list-item .name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      /* Used to highlight substring matches in filtered lists */ }
      .repository-list .repository-list-item .name .prefix {
        color: var(--text-secondary-color); }
      .repository-list .repository-list-item .name mark {
        font-weight: bold;
        /* Reset browser defaults */
        background-color: inherit;
        color: currentColor; }
    .repository-list .repository-list-item .repo-indicators {
      margin-left: auto;
      display: flex;
      justify-content: flex-end;
      align-items: center; }
    .repository-list .repository-list-item .change-indicator-wrapper {
      display: flex;
      min-width: 12px;
      justify-content: center;
      align-items: center;
      margin-left: var(--spacing-half); }
      .repository-list .repository-list-item .change-indicator-wrapper .octicon {
        color: var(--tab-bar-active-color);
        width: auto; }
      .repository-list .repository-list-item .change-indicator-wrapper:not(.group-repositories-by-owner) {
        margin-right: var(--spacing-half); }
    .repository-list .repository-list-item .ahead-behind {
      height: 16px;
      background: var(--list-item-badge-background-color);
      color: var(--list-item-badge-color);
      align-items: center;
      margin-left: auto; }
      body.platform-darwin .repository-list .repository-list-item .ahead-behind {
        height: 12px;
        line-height: 12px; }
      body.platform-win32 .repository-list .repository-list-item .ahead-behind {
        height: 13px;
        line-height: 13px; }
      .repository-list .repository-list-item .ahead-behind .octicon {
        margin: 0;
        height: 20px;
        width: 12px; }
  .repository-list .filter-list-group-header.group-repositories-by-owner {
    padding-top: var(--spacing); }
  .repository-list .new-repository-button {
    flex-shrink: 0; }
    .repository-list .new-repository-button .octicon {
      margin-left: 5px;
      width: 9px;
      height: 13px; }
  .repository-list .no-items {
    text-align: center;
    padding: var(--spacing);
    word-wrap: break-word; }
    .repository-list .no-items .blankslate-image {
      margin: 0 auto;
      max-width: 300px;
      min-width: auto; }
    .repository-list .no-items .title {
      font-weight: var(--font-weight-semibold); }
    .repository-list .no-items .protip {
      padding-top: var(--spacing-double);
      padding-left: var(--spacing-double);
      padding-right: var(--spacing-double);
      text-align: center;
      font-size: var(--font-size-sm); }
      .repository-list .no-items .protip .kbd-shortcut {
        display: inline-block; }
      .repository-list .no-items .protip kbd {
        border-radius: var(--border-radius);
        border: var(--base-border);
        border-color: #d1d5da;
        display: inline-block;
        padding: 1px 2px;
        line-height: 1;
        min-height: 16px;
        font-family: var(--font-family);
        text-align: center; }

.list-focus-container {
  /** Ahead/behind badge colors when list item is selected but not focused */ }
  .list-focus-container .list-item.selected .repository-list-item .ahead-behind {
    background: var(--list-item-selected-badge-background-color);
    color: var(--list-item-selected-badge-color); }
  .list-focus-container.focus-within {
    /** Ahead/behind badge colors when list item is selected and focused */ }
    .list-focus-container.focus-within .list-item.selected .repository-list-item .ahead-behind {
      background: var(--list-item-selected-active-badge-background-color);
      color: var(--list-item-selected-active-badge-color); }
    .list-focus-container.focus-within .change-indicator {
      color: var(--text-color); }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
/** A React component holding the commit message entry */
#commit-message {
  border-top: 1px solid var(--box-border-color);
  flex-direction: column;
  flex-shrink: 0;
  margin-top: auto;
  display: flex;
  background-color: var(--box-alt-background-color);
  padding: var(--spacing); }
  #commit-message .summary {
    display: flex;
    flex-direction: row; }
    #commit-message .summary .summary-field {
      flex: 1;
      margin-bottom: var(--spacing); }
      #commit-message .summary .summary-field input {
        width: 100%; }
    #commit-message .summary .avatar {
      flex-shrink: 0;
      width: var(--text-field-height);
      height: var(--text-field-height);
      border: var(--base-border);
      margin-right: var(--spacing-half); }
  #commit-message.with-co-authors .description-focus-container {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; }
    #commit-message.with-co-authors .description-focus-container.focus-within {
      z-index: 1; }
  #commit-message .co-authors-toggle {
    color: var(--text-secondary-color); }
    #commit-message .co-authors-toggle:hover {
      color: var(--text-color); }
  #commit-message.with-co-authors .co-authors-toggle {
    color: var(--link-button-color); }
    #commit-message.with-co-authors .co-authors-toggle:hover {
      color: var(--link-button-hover-color); }
  #commit-message.with-action-bar .description-field textarea {
    min-height: 80px; }
  #commit-message .description-focus-container {
    border: 1px solid var(--box-border-color);
    border-radius: var(--border-radius);
    background: var(--background-color);
    cursor: text; }
    #commit-message .description-focus-container.focus-within {
      outline: none;
      border-color: var(--focus-color);
      box-shadow: 0 0 0 1px var(--text-field-focus-shadow-color); }
    #commit-message .description-focus-container .description-field.with-overflow {
      position: relative; }
      #commit-message .description-focus-container .description-field.with-overflow:after {
        content: '';
        position: absolute;
        width: 100%;
        bottom: 0px;
        height: 5px;
        background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
        border-bottom: var(--base-border); }
    #commit-message .description-focus-container textarea {
      border: none;
      color: currentColor;
      font-size: var(--font-size);
      font-family: var(--font-family-sans-serif);
      padding: var(--spacing-half);
      resize: none;
      min-height: 100px; }
      #commit-message .description-focus-container textarea:focus {
        outline: 0;
        border: none;
        box-shadow: none; }
    #commit-message .description-focus-container .action-bar {
      padding: var(--spacing-half);
      background: var(--box-background-color);
      border-radius: var(--border-radius);
      cursor: default; }
      #commit-message .description-focus-container .action-bar:empty {
        display: none; }
      #commit-message .description-focus-container .action-bar.disabled {
        background: var(--box-alt-background-color); }
    #commit-message .description-focus-container .co-authors-toggle {
      border: none;
      -webkit-appearance: none;
      background: transparent;
      padding: 0;
      margin: 0;
      text-align: left;
      align-items: center;
      display: block;
      height: 16px;
      width: 16px;
      cursor: pointer; }
      #commit-message .description-focus-container .co-authors-toggle:after {
        content: attr(aria-label);
        position: absolute;
        margin-left: 3px;
        margin-top: 1px;
        font-size: var(--font-size-sm);
        color: var(--text-secondary-color);
        opacity: 0;
        transition: 150ms all ease-in-out;
        pointer-events: none; }
      #commit-message .description-focus-container .co-authors-toggle:disabled {
        pointer-events: none; }
      #commit-message .description-focus-container .co-authors-toggle:hover:after {
        opacity: 1; }
      #commit-message .description-focus-container .co-authors-toggle svg {
        height: 7px;
        width: 12px;
        pointer-events: none; }
  #commit-message .commit-button {
    max-width: 100%;
    margin-top: var(--spacing);
    display: flex;
    justify-content: center;
    align-items: center;
    /* Due to some weirdo bug in Chrome that affects Windows
     * and possible other platforms we can't change the opacity
     * for disabled buttons if the button also has a
     * overflow: hidden property set. The workaround is to put
     * the contents of the button in a block element and put
     * ellipsis on that instead. See commit 67fad24ed
     */ }
    #commit-message .commit-button .octicon {
      flex-shrink: 0;
      flex-grow: 0;
      margin-right: var(--spacing-half); }
    #commit-message .commit-button > span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
#continue-rebase {
  border-top: 1px solid var(--box-border-color);
  flex-direction: column;
  flex-shrink: 0;
  margin-top: auto;
  display: flex;
  background-color: var(--box-alt-background-color);
  padding: var(--spacing); }
  #continue-rebase .warning-untracked-files {
    padding-top: var(--spacing-half);
    text-align: center; }
  #continue-rebase .commit-button {
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Due to some weirdo bug in Chrome that affects Windows
     * and possible other platforms we can't change the opacity
     * for disabled buttons if the button also has a
     * overflow: hidden property set. The workaround is to put
     * the contents of the button in a block element and put
     * ellipsis on that instead. See commit 67fad24ed
     */ }
    #continue-rebase .commit-button .octicon {
      flex-shrink: 0;
      flex-grow: 0;
      margin-right: var(--spacing-half); }
    #continue-rebase .commit-button > span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
#changes-list {
  min-height: 0; }

/** A React component holding the currently selected repository's changes */
.changes-list-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column; }
  .changes-list-container .stashed-changes-button {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 29px;
    display: flex;
    flex-grow: 1;
    padding: 0 var(--spacing);
    width: 100%;
    height: 100%;
    font-family: var(--font-family-sans-serif);
    font-size: var(--font-size);
    padding: 0 var(--spacing);
    color: var(--secondary-button-text-color);
    background-color: var(--secondary-button-background);
    border: none;
    border-top: var(--base-border);
    box-shadow: none;
    z-index: 0; }
    .changes-list-container .stashed-changes-button:disabled {
      opacity: 0.6; }
    .changes-list-container .stashed-changes-button:hover, .changes-list-container .stashed-changes-button:focus {
      background-color: var(--secondary-button-hover-background);
      background: var(--box-selected-background-color); }
    .changes-list-container .stashed-changes-button.selected, .changes-list-container .stashed-changes-button.selected:hover {
      color: var(--box-selected-active-text-color);
      background-color: var(--box-selected-active-background-color); }
      .changes-list-container .stashed-changes-button.selected .stack-icon, .changes-list-container .stashed-changes-button.selected:hover .stack-icon {
        fill: var(--box-selected-active-text-color); }
    .changes-list-container .stashed-changes-button .stack-icon {
      fill: var(--color-modified); }
    .changes-list-container .stashed-changes-button .text {
      flex-grow: 1;
      margin: 0 var(--spacing-half);
      text-align: start; }
    .changes-list-container .stashed-changes-button .octicon {
      flex-shrink: 0; }
  .changes-list-container .header {
    background: var(--box-alt-background-color);
    border-bottom: 1px solid var(--box-border-color);
    padding: 0 var(--spacing);
    height: 29px; }
    .changes-list-container .header .checkbox-component {
      align-items: center;
      height: 100%;
      position: relative; }
      .changes-list-container .header .checkbox-component label {
        position: absolute;
        left: 0;
        width: 100%;
        padding: 0 30px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; }
      .changes-list-container .header .checkbox-component input[type='checkbox'] {
        flex-grow: 0;
        flex-shrink: 0; }

.undo-enter {
  max-height: 0;
  overflow: hidden; }

.undo-enter.undo-enter-active {
  max-height: 200px;
  transition: max-height var(--undo-animation-duration) ease-in; }

.undo-leave {
  max-height: 200px; }

.undo-leave.undo-leave-active {
  max-height: 0;
  transition: max-height var(--undo-animation-duration) ease-out; }

#changes-sidebar-contents {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; }

#undo-commit {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-top: var(--base-border);
  background: var(--box-alt-background-color); }
  #undo-commit .commit-info {
    padding: var(--spacing-half) var(--spacing);
    padding-right: 0;
    margin-right: var(--spacing-half);
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-sm); }
    #undo-commit .commit-info .summary,
    #undo-commit .commit-info .ago {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
    #undo-commit .commit-info .ago {
      color: var(--text-secondary-color); }
  #undo-commit .actions {
    padding: var(--spacing);
    padding-left: 0; }

.changed-file {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0; }
  .changed-file .header {
    background: var(--box-alt-background-color);
    border-bottom: 1px solid var(--diff-border-color);
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    flex-grow: 0;
    padding: var(--spacing-half) var(--spacing); }
    .changed-file .header span {
      user-select: text; }
    .changed-file .header .status-new {
      fill: var(--color-new); }
    .changed-file .header .status-copied {
      fill: var(--color-new); }
    .changed-file .header .status-modified {
      fill: var(--color-modified); }
    .changed-file .header .status-renamed {
      fill: var(--color-renamed); }
    .changed-file .header .status-deleted {
      fill: var(--color-deleted); }
    .changed-file .header .status-conflicted {
      fill: var(--color-conflicted); }
    .changed-file .header .status-resolved {
      fill: var(--color-new); }
    .changed-file .header .line-endings {
      fill: var(--color-conflicted); }
    .changed-file .header .octicon {
      flex-shrink: 0;
      vertical-align: text-bottom;
      position: relative;
      top: 1px;
      align-self: center; }
    .changed-file .header .line-endings {
      margin-right: var(--spacing-half); }
    .changed-file .header .open-merge-tool {
      margin-right: var(--spacing-half); }
  .changed-file .panel {
    display: flex;
    flex: 1; }
    .changed-file .panel.empty, .changed-file .panel.renamed, .changed-file .panel.binary {
      justify-content: center;
      align-items: center; }
    .changed-file .panel.large-diff {
      margin: var(--spacing-double);
      text-align: center;
      justify-content: initial; }
      .changed-file .panel.large-diff .blankslate-image {
        max-height: 150px; }

.diff-wrapper {
  display: flex;
  flex-grow: 1;
  min-width: 0; }

#no-changes {
  padding: var(--spacing-quad);
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  overflow-x: hidden;
  /** Lessen the padding at 1.5x zoom and above  **/
  /** Hide the blankslate image at high zoom levels **/ }
  #no-changes .header {
    display: flex;
    flex-direction: row;
    margin-bottom: var(--spacing-double); }
    #no-changes .header .text {
      flex-grow: 1;
      margin-right: var(--spacing-double); }
      #no-changes .header .text h1 {
        padding: 0;
        margin: 0;
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-light); }
      #no-changes .header .text p {
        margin: 0; }
    #no-changes .header .blankslate-image {
      flex: 0;
      height: 70px;
      width: 73px;
      min-width: 70px;
      min-height: 73px;
      align-self: flex-end; }
  #no-changes .content {
    width: 100%;
    max-width: 600px; }
  #no-changes .actions {
    display: flex;
    flex-direction: column; }
    #no-changes .actions.primary {
      margin-bottom: var(--spacing); }
  #no-changes .action-leave {
    opacity: 1;
    transform: translate3d(0, 0, 0); }
  #no-changes .action-leave.action-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
    transition: opacity 200ms ease-in, transform 250ms var(--easing-ease-in-back); }
  #no-changes .action-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0); }
  #no-changes .action-enter.action-enter-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 200ms ease-in 500ms, transform 250ms var(--easing-ease-out-back) 500ms; }
  #no-changes .action-height {
    transition: height 250ms ease-out 250ms; }
  @media screen and (max-width: 640px) {
    #no-changes {
      padding: var(--spacing-double); } }
  @media screen and (max-width: 550px) {
    #no-changes .header .blankslate-image {
      display: none; } }

#oversized-files .dialog-content {
  max-height: 305px; }
  #oversized-files .dialog-content .files-list {
    max-height: 175px;
    overflow-y: auto;
    -webkit-margin-after: 1em; }
  #oversized-files .dialog-content .recommendation {
    -webkit-margin-after: 0.5em; }

.blankslate-action {
  border: var(--base-border);
  border-bottom: 0;
  padding: var(--spacing-double);
  display: flex;
  flex-direction: row;
  align-items: center;
  /** Switch to a vertical layout at 1.25x zoom and above **/ }
  .blankslate-action:first-child {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius); }
  .blankslate-action:last-child {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-bottom: var(--base-border); }
  .blankslate-action.primary {
    background: var(--primary-blankslate-action-background);
    border-color: var(--primary-blankslate-action-border-color); }
  .blankslate-action .text-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-right: var(--spacing-double); }
  .blankslate-action h2 {
    margin: 0;
    padding: 0;
    font-size: var(--font-size);
    font-weight: var(--font-weight-semibold); }
  .blankslate-action p.description {
    margin: 0;
    padding: 0;
    font-size: var(--font-size);
    margin-bottom: var(--spacing-half); }
  .blankslate-action p.discoverability {
    margin: 0;
    padding: 0;
    font-size: var(--font-size);
    color: var(--text-secondary-color); }
    .blankslate-action p.discoverability kbd {
      color: var(--text-color); }
  .blankslate-action .button-component {
    flex-shrink: 0; }
  @media screen and (max-width: 768px) {
    .blankslate-action {
      flex-direction: column;
      align-items: flex-start; }
      .blankslate-action .text-wrapper {
        margin-right: 0;
        margin-bottom: var(--spacing-double); } }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
#protected-branch {
  border-top: 1px solid var(--box-border-color);
  flex-direction: column;
  flex-shrink: 0;
  margin-top: auto;
  display: flex;
  background-color: var(--box-alt-background-color);
  padding-top: var(--spacing); }
  #protected-branch .warning-message {
    margin-bottom: 0;
    text-align: center;
    color: var(--text-secondary-color); }
    #protected-branch .warning-message strong {
      color: var(--text-color);
      word-wrap: break-word; }
  #protected-branch .protected-branch-icon-container {
    height: 20px;
    position: relative;
    text-align: center; }
    #protected-branch .protected-branch-icon-container .protected-branch-icon {
      color: var(--dialog-warning-color);
      background: var(--box-alt-background-color);
      border-width: 0 var(--spacing-half);
      border: solid transparent;
      box-sizing: content-box;
      position: relative;
      z-index: 1; }
    #protected-branch .protected-branch-icon-container:after {
      display: block;
      border-bottom: var(--base-border);
      content: '';
      position: absolute;
      z-index: 0;
      display: block;
      width: 100%;
      top: var(--spacing); }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
#cloning-repository-view {
  /* The view's position in relation to its parent, ie full
   * width, vertically centered...  */
  justify-content: center;
  align-self: center;
  width: 600px;
  /* TODO: Revisit, this might not be the best way to do it.
   * We don't want the contents to sit smack on the vertical
   * midline. The view itself doesn't extend 100% to the top
   * on most platforms (due to our title bar) and it looks
   * better if we position it centered on the ~40% line.
   */
  margin-top: -60px;
  /* Add a ~20px padding around the view to ensure that
   * content doesn't touch the edge of the sideline or
   * window when space is scarce.
   */
  padding: var(--spacing-double);
  /*  Center children horizontally */
  align-items: center;
  /* Holds the icon and title, position them next to each other */
  /* Big clone icon */
  /* xl-sized title */
  /* Limit the progress text to one line. Without
   * this the entire container will jump around in
   * y-pos due to the change in height */ }
  #cloning-repository-view .title-container {
    /* See comment about min-width on #cloning-repository-view,
     * this ensure that we're filling the x-space available but no more
     */
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: var(--spacing); }
  #cloning-repository-view .octicon {
    width: 32px;
    height: 32px;
    /* Space between the icon and title text */
    margin-right: var(--spacing);
    /* Don't grow nor shrink */
    flex: none;
    /* Warning: magic number. The icon looks poorly aligned
     * against the baseline of the title text without this
     */
    margin-top: 4px; }
  #cloning-repository-view .title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-light);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }
  #cloning-repository-view .details {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  #cloning-repository-view progress {
    max-width: 100%;
    width: 100%;
    margin-bottom: var(--spacing); }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
/** The container for the CodeMirror element. */
.diff-code-mirror {
  flex-grow: 1;
  min-width: 0; }

.diff-code-mirror .CodeMirror {
  height: 100%;
  color: var(--diff-text-color);
  background: var(--background-color);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-monospace); }
  .diff-code-mirror .CodeMirror span {
    word-break: break-all; }
  .diff-code-mirror .CodeMirror pre {
    border: none; }
  .diff-code-mirror .CodeMirror-lines {
    padding: 0; }
  .diff-code-mirror .CodeMirror-line {
    padding: 2px 0 2px var(--spacing-half); }
    .diff-code-mirror .CodeMirror-line svg.no-newline {
      height: 8px;
      fill: var(--error-color);
      display: inline-block;
      margin-left: 3px;
      margin-bottom: -1px; }
  .diff-code-mirror .CodeMirror .CodeMirror-code {
    border-bottom: var(--base-border); }
  .diff-code-mirror .CodeMirror .CodeMirror-gutters {
    background: transparent;
    border: none; }
  .diff-code-mirror .CodeMirror .CodeMirror-gutter-wrapper {
    top: 0;
    bottom: 0; }
  .diff-code-mirror .CodeMirror .CodeMirror-gutter-elt {
    height: 100%; }
  .diff-code-mirror .CodeMirror .diff-gutter {
    width: 125px; }
  .diff-code-mirror .CodeMirror .CodeMirror-search-dialog {
    left: auto;
    border: var(--base-border);
    border-top: 0;
    right: var(--spacing);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    padding: var(--spacing-half) var(--spacing);
    box-shadow: var(--base-box-shadow); }
    .diff-code-mirror .CodeMirror .CodeMirror-search-dialog .CodeMirror-search-hint {
      display: none; }
    .diff-code-mirror .CodeMirror .CodeMirror-search-dialog input.CodeMirror-search-field {
      background: var(--box-background-color);
      color: var(--text-color);
      font-size: var(--font-size);
      font-family: var(--font-family-sans-serif);
      height: var(--text-field-height);
      padding: 0;
      width: 180px; }
    .diff-code-mirror .CodeMirror .CodeMirror-search-dialog .buttons {
      display: inline-block; }

.CodeMirror-lines .diff-line-gutter {
  display: flex;
  height: 100%;
  background: var(--diff-gutter-background-color);
  box-sizing: border-box;
  position: relative;
  cursor: default; }
  .CodeMirror-lines .diff-line-gutter * {
    cursor: default; }
  .CodeMirror-lines .diff-line-gutter .hunk-handle {
    position: absolute;
    height: 100%;
    width: 20px;
    right: -8px;
    top: 0; }
    .CodeMirror-lines .diff-line-gutter .hunk-handle.includeable {
      cursor: pointer; }
  .CodeMirror-lines .diff-line-gutter.diff-add {
    background: var(--diff-add-gutter-background-color); }
  .CodeMirror-lines .diff-line-gutter.diff-delete {
    background: var(--diff-delete-gutter-background-color); }
  .CodeMirror-lines .diff-line-gutter.diff-hunk {
    background: var(--diff-hunk-gutter-background-color); }
  .CodeMirror-lines .diff-line-gutter .before {
    border-right: 1px solid var(--diff-border-color); }
  .CodeMirror-lines .diff-line-gutter .after {
    border-right: 4px solid var(--diff-border-color); }
  .CodeMirror-lines .diff-line-gutter .diff-line-number {
    width: 50%;
    padding: 0 var(--spacing-half); }
  .CodeMirror-lines .diff-line-gutter.diff-add:not(.read-only) *, .CodeMirror-lines .diff-line-gutter.diff-delete:not(.read-only) * {
    cursor: pointer; }
  .CodeMirror-lines .diff-line-gutter.read-only .after {
    border-right-width: 1px; }

.diff-line-number {
  display: inline-block;
  color: var(--diff-line-number-color);
  text-align: right; }

.CodeMirror-linebackground.diff-add {
  background: var(--diff-add-background-color); }

.CodeMirror-linebackground.diff-delete {
  background: var(--diff-delete-background-color); }

.CodeMirror-linebackground.diff-context {
  background: var(--background-color); }

.CodeMirror-linebackground.diff-hunk {
  background: var(--diff-hunk-background-color); }

.CodeMirror .diff-line-gutter.diff-add {
  color: var(--diff-add-text-color); }
  .CodeMirror .diff-line-gutter.diff-add .diff-line-number {
    border-color: var(--diff-add-border-color); }
    .CodeMirror .diff-line-gutter.diff-add .diff-line-number:last-child {
      border-color: var(--diff-add-gutter-color); }

.CodeMirror .diff-line-gutter.diff-delete {
  color: var(--diff-delete-text-color); }
  .CodeMirror .diff-line-gutter.diff-delete .diff-line-number {
    border-color: var(--diff-delete-border-color); }
    .CodeMirror .diff-line-gutter.diff-delete .diff-line-number:last-child {
      border-color: var(--diff-delete-gutter-color); }

.CodeMirror .diff-line-gutter.diff-context {
  color: var(--diff-text-color); }
  .CodeMirror .diff-line-gutter.diff-context .diff-line-number {
    border-color: var(--diff-border-color); }
    .CodeMirror .diff-line-gutter.diff-context .diff-line-number:last-child {
      border-color: var(--diff-gutter-color); }

.CodeMirror-line.diff-hunk {
  color: var(--diff-hunk-text-color); }

.CodeMirror-line.diff-delete {
  color: var(--diff-delete-text-color); }

.CodeMirror-line.diff-add {
  color: var(--diff-add-text-color); }

.CodeMirror-line.diff-context {
  color: var(--diff-text-color); }

.cm-diff-delete-inner {
  background: var(--diff-delete-inner-background-color); }

.cm-diff-add-inner {
  background: var(--diff-add-inner-background-color); }

.CodeMirror .diff-line-gutter.diff-hunk {
  color: var(--diff-hunk-text-color); }
  .CodeMirror .diff-line-gutter.diff-hunk .diff-line-number {
    border-color: var(--diff-hunk-border-color); }
    .CodeMirror .diff-line-gutter.diff-hunk .diff-line-number:last-child {
      border-color: var(--diff-hunk-gutter-color); }

.CodeMirror .diff-line-gutter.diff-line-selected .diff-line-number {
  background: var(--diff-selected-background-color);
  border-color: var(--diff-selected-border-color);
  color: var(--diff-selected-text-color); }
  .CodeMirror .diff-line-gutter.diff-line-selected .diff-line-number:last-child {
    border-color: var(--diff-selected-gutter-color); }

.CodeMirror .diff-line-gutter.diff-line-hover .diff-line-number,
.CodeMirror .diff-line-gutter.includeable:hover .diff-line-number {
  background: var(--diff-hover-background-color);
  border-color: var(--diff-hover-border-color);
  color: var(--diff-hover-text-color); }
  .CodeMirror .diff-line-gutter.diff-line-hover .diff-line-number:last-child,
  .CodeMirror .diff-line-gutter.includeable:hover .diff-line-number:last-child {
    border-color: var(--diff-hover-gutter-color); }

.CodeMirror .diff-line-gutter.diff-line-hover:not(.diff-line-selected).diff-add .diff-line-number,
.CodeMirror .diff-line-gutter.includeable:hover:not(.diff-line-selected).diff-add .diff-line-number {
  background: var(--diff-add-hover-background-color);
  border-color: var(--diff-add-hover-border-color);
  color: var(--diff-add-hover-text-color); }
  .CodeMirror .diff-line-gutter.diff-line-hover:not(.diff-line-selected).diff-add .diff-line-number:last-child,
  .CodeMirror .diff-line-gutter.includeable:hover:not(.diff-line-selected).diff-add .diff-line-number:last-child {
    border-color: var(--diff-add-hover-gutter-color); }

.CodeMirror .diff-line-gutter.diff-line-hover:not(.diff-line-selected).diff-delete .diff-line-number,
.CodeMirror .diff-line-gutter.includeable:hover:not(.diff-line-selected).diff-delete .diff-line-number {
  background: var(--diff-delete-hover-background-color);
  border-color: var(--diff-delete-hover-border-color);
  color: var(--diff-delete-hover-text-color); }
  .CodeMirror .diff-line-gutter.diff-line-hover:not(.diff-line-selected).diff-delete .diff-line-number:last-child,
  .CodeMirror .diff-line-gutter.includeable:hover:not(.diff-line-selected).diff-delete .diff-line-number:last-child {
    border-color: var(--diff-delete-hover-gutter-color); }

#diff .panel {
  padding-top: var(--spacing); }

#diff .image-header {
  padding: var(--spacing) 0 var(--spacing-half) 0;
  margin-left: auto;
  margin-right: auto;
  flex-shrink: 0; }

#diff img {
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  padding: 0; }

.panel.image {
  display: flex;
  flex: 1;
  padding-top: 10px;
  overflow: hidden; }
  .panel.image .tab-bar {
    width: 350px;
    margin: 10px auto 0;
    z-index: 0; }
  .panel.image .image-diff-previous {
    color: var(--color-deleted); }
  .panel.image .image-diff-current {
    color: var(--color-new); }
  .panel.image .image-diff-previous,
  .panel.image .image-diff-current {
    text-align: center; }
    .panel.image .image-diff-previous img,
    .panel.image .image-diff-current img {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEX5+fn///8pDrwNAAAAFElEQVQI12NgsP/AQAz+f4CBGAwAJIIdTTn0+w0AAAAASUVORK5CYII=);
      border: 1px solid currentColor; }
  .panel.image .image-diff-header {
    font-weight: var(--font-weight-semibold);
    padding-bottom: 10px; }
  .panel.image .image-diff-footer {
    color: var(--text-secondary-color); }
    .panel.image .image-diff-footer .strong {
      font-weight: var(--font-weight-semibold); }

.image-diff-container {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  flex-direction: column; }
  .image-diff-container .image-diff-two-up {
    display: flex;
    align-items: center; }
    .image-diff-container .image-diff-two-up .image-diff-previous {
      margin-right: var(--spacing-half);
      margin-bottom: var(--spacing-half); }
    .image-diff-container .image-diff-two-up .image-diff-current {
      margin-left: var(--spacing-half);
      margin-bottom: var(--spacing-half); }
  .image-diff-container .image-diff-summary {
    color: var(--text-secondary-color);
    font-weight: var(--font-weight-semibold); }
    .image-diff-container .image-diff-summary .added {
      color: var(--color-new); }
    .image-diff-container .image-diff-summary .removed {
      color: var(--color-deleted); }

.image-diff-difference {
  display: flex;
  flex-direction: column;
  flex: 1; }
  .image-diff-difference .sizing-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center; }
    .image-diff-difference .sizing-container .image-container {
      position: relative; }
      .image-diff-difference .sizing-container .image-container .image-diff-previous,
      .image-diff-difference .sizing-container .image-container .image-diff-current {
        position: absolute;
        top: 0;
        left: 0;
        img-border: 0;
        img-background: transparent; }

.image-diff-onion-skin {
  display: flex;
  flex-direction: column;
  flex: 1; }
  .image-diff-onion-skin .slider {
    align-self: center; }
  .image-diff-onion-skin .sizing-container {
    margin: 0;
    margin-bottom: var(--spacing-half);
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center; }
    .image-diff-onion-skin .sizing-container .image-diff-previous,
    .image-diff-onion-skin .sizing-container .image-diff-current {
      position: absolute;
      margin: 0;
      overflow: hidden; }
      .image-diff-onion-skin .sizing-container .image-diff-previous img,
      .image-diff-onion-skin .sizing-container .image-diff-current img {
        border: 0;
        background: transparent; }
    .image-diff-onion-skin .sizing-container .image-diff-previous {
      border: 1px solid var(--color-deleted); }
    .image-diff-onion-skin .sizing-container .image-diff-current {
      border: 1px solid var(--color-new); }
    .image-diff-onion-skin .sizing-container .image-container {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEX5+fn///8pDrwNAAAAFElEQVQI12NgsP/AQAz+f4CBGAwAJIIdTTn0+w0AAAAASUVORK5CYII=);
      position: relative; }

.image-diff-swipe {
  display: flex;
  flex-direction: column;
  flex: 1; }
  .image-diff-swipe .slider {
    align-self: center; }
  .image-diff-swipe .sizing-container {
    margin: 0;
    margin-bottom: var(--spacing-half);
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center; }
    .image-diff-swipe .sizing-container .image-container {
      position: relative; }
      .image-diff-swipe .sizing-container .image-container .image-diff-previous,
      .image-diff-swipe .sizing-container .image-container .image-diff-current {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEX5+fn///8pDrwNAAAAFElEQVQI12NgsP/AQAz+f4CBGAwAJIIdTTn0+w0AAAAASUVORK5CYII=);
        position: absolute;
        margin: 0;
        overflow: hidden; }
        .image-diff-swipe .sizing-container .image-container .image-diff-previous img,
        .image-diff-swipe .sizing-container .image-container .image-diff-current img {
          border: 0;
          background: transparent; }
      .image-diff-swipe .sizing-container .image-container .image-diff-previous {
        border: 1px solid var(--color-deleted);
        right: 0; }
      .image-diff-swipe .sizing-container .image-container .image-diff-current {
        border: 1px solid var(--color-new); }
      .image-diff-swipe .sizing-container .image-container .swiper {
        border-left: 1px solid var(--text-secondary-color);
        margin: 0;
        overflow: hidden;
        position: absolute;
        right: 0; }

.cm-s-default .cm-variable {
  color: var(--syntax-variable-color); }

.cm-s-default .cm-keyword {
  color: var(--syntax-keyword-color); }

.cm-s-default .cm-atom {
  color: var(--syntax-atom-color); }

.cm-s-default .cm-number {
  color: inherit; }

.cm-s-default .cm-def {
  color: inherit; }

.cm-s-default .cm-variable-2,
.cm-s-default .cm-variable-3 {
  color: var(--syntax-alt-variable-color); }

.cm-s-default .cm-comment,
.cm-s-default .cm-meta {
  color: var(--syntax-comment-color); }

.cm-s-default .cm-string,
.cm-s-default .cm-string-2 {
  color: var(--syntax-string-color); }
  .cm-s-default .cm-string.cm-property,
  .cm-s-default .cm-string-2.cm-property {
    color: inherit; }

.cm-s-default .cm-qualifier {
  color: var(--syntax-qualifier-color); }

.cm-s-default .cm-type {
  color: var(--syntax-type-color); }

.cm-s-default .cm-builtin {
  color: inherit; }

.cm-s-default .cm-bracket {
  color: inherit; }

.cm-s-default .cm-tag {
  color: var(--syntax-tag-color); }

.cm-s-default .cm-attribute {
  color: var(--syntax-attribute-color); }

.cm-s-default .cm-hr {
  color: inherit; }

.cm-s-default .cm-link {
  text-decoration: underline;
  color: var(--syntax-link-color); }

.cm-s-default .cm-header {
  color: var(--syntax-header-color); }

.cm-s-default .cm-diff-delete-inner {
  color: var(--diff-delete-text-color); }

.cm-s-default .cm-diff-add-inner {
  color: var(--diff-add-text-color); }

.cm-s-default .cm-m-css.cm-property {
  color: var(--syntax-atom-color); }

.cm-s-default .cm-m-shell.cm-builtin {
  color: var(--syntax-atom-color); }

.cm-s-default .cm-m-javascript.cm-type {
  color: var(--syntax-variable-color); }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
/** A React component holding the currently selected repository's history */
#history {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0; }

#commit-summary-container {
  flex-grow: 0; }

#compare-view {
  display: flex;
  flex-direction: column;
  flex: 1; }
  #compare-view .filter-list .filter-field-row {
    margin: 0; }
  #compare-view .compare-form {
    background: var(--box-alt-background-color);
    flex: initial;
    padding: var(--spacing-half);
    border-bottom: var(--base-border); }
  #compare-view .compare-commit-list {
    flex: 1;
    display: flex;
    flex-direction: column; }
  #compare-view .merge-status {
    background: var(--background-color);
    border-width: 0 var(--spacing-half);
    border: solid transparent;
    box-sizing: content-box;
    position: relative;
    z-index: 1; }
  #compare-view .merge-message {
    max-height: 500px;
    transition: max-height 750ms ease; }
    #compare-view .merge-message-loading {
      max-height: 40px; }
  #compare-view .merge-message-legacy {
    margin-top: var(--spacing); }
  #compare-view .merge-cta {
    border-top: var(--base-border);
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-sm);
    text-align: center;
    padding: var(--spacing); }
  #compare-view .no-branches {
    color: var(--text-secondary-color);
    margin-top: var(--spacing-double); }
  #compare-view .branch-commit-counter {
    color: var(--text-secondary-color);
    display: flex;
    justify-content: flex-end;
    flex: 1;
    font-size: var(--font-size-sm); }
    #compare-view .branch-commit-counter-item {
      display: flex;
      align-items: center; }
      #compare-view .branch-commit-counter-item:first-child {
        margin-right: var(--spacing-half); }
    #compare-view .branch-commit-counter .octicon {
      fill: var(--text-secondary-color);
      width: 8px;
      margin-left: 1px; }
      #compare-view .branch-commit-counter .octicon:last-child {
        margin-right: 0; }
  #compare-view .tab-bar {
    padding: var(--spacing-half);
    border-bottom: var(--base-border);
    height: initial; }
    #compare-view .tab-bar-item {
      box-shadow: none;
      background: var(--tab-bar-background-color);
      border: var(--base-border); }
      #compare-view .tab-bar-item:first-of-type {
        border-radius: var(--border-radius) 0 0 var(--border-radius); }
      #compare-view .tab-bar-item:last-of-type {
        border-radius: 0 var(--border-radius) var(--border-radius) 0; }
      #compare-view .tab-bar-item.selected {
        background: var(--box-selected-active-background-color);
        border-color: var(--box-border-accent-color);
        color: var(--box-selected-active-text-color); }
  #compare-view .select-component {
    flex-grow: 0; }
  #compare-view .compare-content {
    display: flex;
    height: 100%;
    flex-direction: column; }
    #compare-view .compare-content .ref-component {
      word-break: break-word; }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
/** A React component holding history's commit list */
#commit-list {
  display: flex;
  flex-direction: column;
  flex: 1; }
  #commit-list .commit {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 100%;
    border-bottom: var(--base-border);
    padding: 0 var(--spacing); }
    #commit-list .commit .info {
      display: flex;
      flex-direction: column;
      margin-top: -4px;
      overflow: hidden;
      width: 100%; }
      #commit-list .commit .info .description {
        display: flex;
        flex-direction: row;
        margin-top: 3px; }
      #commit-list .commit .info .summary {
        font-weight: var(--font-weight-semibold); }
      #commit-list .commit .info .summary,
      #commit-list .commit .info .byline {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
/** A React component holding the selected commit's detailed information */
#commit-summary {
  display: flex;
  flex-direction: column; }
  #commit-summary .avatar {
    width: 16px;
    height: 16px; }
  #commit-summary .expander {
    position: absolute;
    width: 75px;
    top: var(--spacing);
    right: var(--spacing); }
    #commit-summary .expander svg {
      vertical-align: text-top;
      margin-right: var(--spacing-half); }
  #commit-summary.expanded .commit-summary-description-scroll-view {
    max-height: none;
    overflow: auto; }
    #commit-summary.expanded .commit-summary-description-scroll-view:before {
      content: none; }
  #commit-summary.hide-description-border .commit-summary-description-container {
    border-bottom: none; }
  #commit-summary.has-expander .commit-summary-description {
    padding-right: 100px; }
  #commit-summary.has-expander:not(.expanded) .commit-summary-description:before {
    content: '';
    background: var(--box-overflow-shadow-background);
    position: absolute;
    height: 30px;
    bottom: 0px;
    width: 100%;
    pointer-events: none; }

.commit-summary-title, .commit-summary-meta {
  padding: var(--spacing); }

.commit-summary-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: 16px;
  padding: var(--spacing);
  word-wrap: break-word; }

.commit-summary-description-container {
  display: flex;
  position: relative;
  border-bottom: var(--base-border); }

.commit-summary-description-scroll-view {
  overflow: hidden;
  max-height: 69px;
  flex: 1; }

.commit-summary-title span,
.commit-summary-title a, .commit-summary-description span,
.commit-summary-description a {
  -webkit-user-select: text;
  user-select: text; }

.commit-summary-title span, .commit-summary-description span {
  cursor: text; }

.commit-summary-description {
  font-family: var(--font-family-monospace);
  font-size: var(--font-size-sm);
  word-wrap: break-word;
  white-space: pre-line;
  padding: var(--spacing); }

.commit-summary-meta {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0 var(--spacing) var(--spacing); }

.commit-summary-meta-item:not(.without-truncation) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.commit-summary-meta-item {
  display: flex;
  flex-direction: row;
  min-width: 0;
  margin-right: var(--spacing);
  font-size: var(--font-size-sm); }
  .commit-summary-meta-item .avatar,
  .commit-summary-meta-item .octicon {
    display: inline-block;
    margin-right: var(--spacing-third);
    vertical-align: bottom; }
  .commit-summary-meta-item .sha {
    user-select: text; }

.commit-summary-header {
  border-bottom: var(--base-border); }

#history .file-list {
  display: flex;
  flex: 1;
  border-right: var(--base-border); }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
/** A React component holding the currently selected repository */
#repository {
  display: flex;
  flex-direction: row;
  flex: 1;
  border-top: var(--base-border); }
  #repository > .focus-container {
    display: flex; }
  #repository-sidebar {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--box-border-color); }

.resizable-component {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative; }
  .resizable-component .resize-handle {
    position: absolute;
    right: -5px;
    top: 0px;
    height: 100%;
    width: 10px;
    cursor: ew-resize; }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
/** A React component holding the main application toolbar component. */
#desktop-app-toolbar {
  height: var(--toolbar-height);
  border-bottom: 1px solid var(--toolbar-border-color);
  display: flex;
  flex-direction: row;
  flex-grow: 0;
  flex-shrink: 0;
  /* See https://css-tricks.com/flexbox-truncated-text/
   * We need to do this "hack" or else the container will
   * always grow to fit the intrinsic width of its children
   * and thus killing our text truncation in the title.
   */
  min-width: 0;
  color: var(--toolbar-text-color);
  background-color: var(--toolbar-background-color); }
  #desktop-app-toolbar .sidebar-section {
    display: flex;
    flex-direction: row;
    flex-shrink: 0; }
    #desktop-app-toolbar .sidebar-section > :last-child {
      flex-grow: 1; }
  #desktop-app-toolbar .toolbar-button.push-pull-button {
    width: 230px; }
  #desktop-app-toolbar .toolbar-dropdown.branch-button {
    width: 230px; }
  #desktop-app-toolbar .toolbar-button.revert-progress {
    width: 230px; }

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

.spin {
  animation: spin 1s linear infinite; }

.ahead-behind {
  display: flex;
  background: var(--toolbar-badge-background-color);
  border-radius: 8px;
  padding: 0 6px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold); }
  body.platform-darwin .ahead-behind {
    height: 13px; }
  body.platform-win32 .ahead-behind {
    height: 14px; }
  .ahead-behind span {
    display: flex;
    align-items: center; }
    .ahead-behind span:nth-child(2) {
      margin-left: var(--spacing-half); }
    .ahead-behind span .octicon {
      width: 6px;
      margin-left: var(--spacing-third); }

.toolbar-button {
  min-width: 0;
  position: relative; }
  .toolbar-button > button {
    -webkit-appearance: none;
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    text-align: left;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%; }
    .toolbar-button > button:active {
      box-shadow: none; }
    .toolbar-button > button:focus {
      background-color: var(--toolbar-button-focus-background-color);
      outline-offset: -4px;
      border-color: var(--toolbar-button-border-color);
      box-shadow: none; }
      .toolbar-button > button:focus .progress {
        background: var(--toolbar-button-focus-progress-color); }
      .toolbar-button > button:focus:not(.focus-ring) {
        outline: none;
        background-color: var(--toolbar-button-background-color); }
        .toolbar-button > button:focus:not(.focus-ring) .progress {
          background: var(--toolbar-button-progress-color); }
    .toolbar-button > button:not(:disabled):hover {
      background-color: var(--toolbar-button-hover-background-color);
      color: var(--toolbar-button-hover-color);
      border-color: var(--toolbar-button-hover-border-color); }
      .toolbar-button > button:not(:disabled):hover .description {
        color: var(--toolbar-button-secondary-color); }
      .toolbar-button > button:not(:disabled):hover .progress {
        background: var(--toolbar-button-hover-progress-color); }
  .toolbar-button > button {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--spacing);
    margin: 0;
    overflow: hidden;
    background-color: var(--toolbar-button-background-color);
    color: var(--toolbar-button-color);
    border-right: 1px solid var(--toolbar-button-border-color); }
    .toolbar-button > button .icon {
      flex-shrink: 0;
      margin-right: var(--spacing);
      position: relative; }
    .toolbar-button > button .dropdownArrow {
      width: 9px;
      height: 13px;
      flex-shrink: 0;
      position: relative; }
    .toolbar-button > button .text {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      min-width: 0;
      margin-right: var(--spacing);
      position: relative; }
    .toolbar-button > button .title {
      font-weight: var(--font-weight-semibold);
      position: relative; }
    .toolbar-button > button .description {
      color: var(--toolbar-button-secondary-color);
      font-size: var(--font-size-sm);
      position: relative; }
    .toolbar-button > button .title,
    .toolbar-button > button .description {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
    .toolbar-button > button .progress {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background: var(--toolbar-button-progress-color);
      transform-origin: left;
      pointer-events: none;
      transition: transform 0.3s var(--easing-ease-out-quint); }
  .toolbar-button.has-progress > button:disabled {
    opacity: 1; }

.toolbar-dropdown {
  min-width: 0; }
  .toolbar-dropdown > .toolbar-button {
    width: 100%;
    height: 100%; }
  .toolbar-dropdown.open > .toolbar-button > button {
    color: var(--toolbar-button-active-color);
    background-color: var(--toolbar-button-active-background-color);
    border-color: var(--toolbar-button-active-border-color); }
    .toolbar-dropdown.open > .toolbar-button > button .description {
      color: var(--text-secondary-color); }
    .toolbar-dropdown.open > .toolbar-button > button .progress {
      background-color: var(--toolbar-dropdown-open-progress-color); }

.tab-bar {
  display: flex;
  flex-direction: row;
  height: var(--tab-bar-height);
  background: var(--tab-bar-background-color); }
  .tab-bar.tabs .tab-bar-item {
    border: none;
    box-shadow: none;
    border-radius: 0;
    color: var(--text-color);
    background: var(--background-color);
    font-family: var(--font-family-sans-serif);
    font-size: var(--font-size);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--box-border-color);
    border-right: 1px solid var(--box-border-color); }
    .tab-bar.tabs .tab-bar-item:last-child {
      border-right: none; }
    .tab-bar.tabs .tab-bar-item.selected {
      box-shadow: inset 0 -3px 0px var(--tab-bar-active-color); }
    .tab-bar.tabs .tab-bar-item:hover {
      background: var(--tab-bar-hover-background-color); }
    .tab-bar.tabs .tab-bar-item .with-indicator {
      display: flex;
      align-items: center; }
    .tab-bar.tabs .tab-bar-item .indicator {
      color: var(--tab-bar-active-color);
      margin-left: 4px;
      margin-top: 1px; }
    .tab-bar.tabs .tab-bar-item .counter {
      color: var(--tab-bar-count-color);
      background-color: var(--tab-bar-count-background-color);
      margin-left: 4px;
      padding: 2px 5px;
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-semibold);
      border-radius: 20px;
      line-height: 1; }
    .tab-bar.tabs .tab-bar-item.focus-ring {
      outline-offset: -4px; }
  .tab-bar.switch .tab-bar-item {
    cursor: pointer;
    border: none;
    box-shadow: none;
    border-radius: 0;
    color: var(--text-color);
    background: var(--background-color);
    font-family: var(--font-family-sans-serif);
    font-size: var(--font-size);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--box-border-color); }
    .tab-bar.switch .tab-bar-item:last-child {
      border-right: none; }
    .tab-bar.switch .tab-bar-item.selected {
      font-weight: var(--font-weight-semibold); }

.panel {
  display: flex;
  flex-direction: column;
  flex: 1; }

.popup {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  min-width: 260px;
  margin: var(--spacing-triple) var(--spacing);
  background-color: var(--box-alt-background-color);
  z-index: var(--popup-z-index); }

.popup-content {
  padding: var(--spacing); }

.popup-inner-content {
  border: var(--base-border);
  border-radius: var(--border-radius);
  background: var(--background-color); }

.popup-actions {
  margin-top: var(--spacing); }

.popup-error-output {
  font-family: var(--font-family-monospace);
  font-size: var(--font-size-sm);
  margin: 0;
  white-space: pre-wrap; }

.popup-overlay {
  z-index: var(--popup-overlay-z-index);
  background: black;
  opacity: 0.4;
  height: 100%; }

progress {
  -webkit-appearance: none;
  height: 10px;
  background-color: var(--box-alt-background-color); }
  progress::-webkit-progress-bar {
    background-color: transparent; }
  progress::-webkit-progress-value {
    background-color: var(--text-color); }
  progress:indeterminate {
    background-image: -webkit-linear-gradient(-45deg, transparent 33%, var(--text-color) 33%, var(--text-color) 66%, transparent 66%);
    background-size: 25px 10px, 100% 100%, 100% 100%;
    -webkit-animation: progress-indeterminate-animation 5s linear infinite; }

@-webkit-keyframes progress-indeterminate-animation {
  100% {
    background-position: 100px 0px; } }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
.branches-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 350px; }
  .branches-container > .tab-bar {
    border-top: var(--base-border); }
  .branches-container .branches-list {
    width: 350px; }

.pull-request-tab {
  display: flex;
  flex-direction: row;
  align-items: center; }
  .pull-request-tab .count {
    display: flex;
    background: var(--tab-bar-count-background-color);
    color: var(--tab-bar-count-color);
    margin-left: var(--spacing-half);
    border-radius: 8px;
    padding: 0 6px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold); }
    body.platform-darwin .pull-request-tab .count {
      height: 13px;
      line-height: 13px; }
    body.platform-win32 .pull-request-tab .count {
      height: 14px;
      line-height: 14px; }

.pull-request-list {
  height: 100%;
  width: 100%; }
  .pull-request-list.filter-list .filter-field-row {
    margin-bottom: var(--spacing-half); }
  .pull-request-list .list-item.selected:focus .ci-status {
    color: inherit; }
  .pull-request-list .pull-request-item {
    padding: 0 var(--spacing);
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    flex-grow: 1; }
    .pull-request-list .pull-request-item .icon {
      margin-left: var(--spacing-half);
      margin-right: var(--spacing);
      flex-shrink: 0;
      align-self: flex-start;
      margin-top: 2px; }
    .pull-request-list .pull-request-item .info {
      display: flex;
      flex-direction: column;
      min-width: 0;
      flex-grow: 1;
      margin-right: var(--spacing); }
      .pull-request-list .pull-request-item .info .title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        font-weight: var(--font-weight-semibold); }
      .pull-request-list .pull-request-item .info .subtitle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        font-weight: var(--font-weight-light);
        font-size: var(--font-size-sm);
        color: var(--text-secondary-color); }
    .pull-request-list .pull-request-item .ci-status {
      margin-right: var(--spacing-half); }

.branches-list-item {
  padding: 0 var(--spacing); }

.branches-list-item {
  display: flex;
  flex-direction: row;
  min-width: 0;
  flex-grow: 1;
  align-items: center; }
  .branches-list-item .icon {
    margin-right: var(--spacing-half);
    width: 16px;
    flex-shrink: 0; }
  .branches-list-item .name {
    flex-grow: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 65%;
    margin-right: var(--spacing-half);
    /* Used to highlight substring matches in filtered lists */ }
    .branches-list-item .name mark {
      font-weight: bold;
      /* Reset browser defaults */
      background-color: inherit;
      color: currentColor; }
  .branches-list-item .description {
    margin-right: var(--spacing-half);
    color: var(--text-secondary-color);
    font-size: var(--font-size-sm);
    flex-grow: 1;
    text-align: right;
    white-space: nowrap; }

.no-pull-requests {
  width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing); }
  .no-pull-requests .title {
    font-weight: var(--font-weight-semibold); }
  .no-pull-requests .no-prs {
    padding-bottom: var(--spacing); }
  .no-pull-requests .call-to-action {
    font-size: var(--font-size-sm); }

.emoji {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom; }

.ui-view {
  /* Layout children top to bottom by default */
  display: flex;
  flex-direction: column;
  /* Expand to take the remaining app width after the sidebar */
  flex-grow: 1;
  /* See https://css-tricks.com/flexbox-truncated-text/
   * We need to do this "hack" or else the container will
   * always grow to fit the intrinsic width of its children
   * and thus killing our text truncation in the title.
   */
  min-width: 0; }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
.autocompletion-container {
  position: relative;
  display: flex;
  flex-direction: column; }

.CodeMirror-hints {
  list-style: none;
  flex-direction: column;
  padding: 0;
  max-height: 100px;
  transform: translate(0, -15px);
  overflow-y: auto; }
  .CodeMirror-hints li {
    height: 29px;
    padding: 0 var(--spacing); }
  body.platform-win32 .CodeMirror-hints {
    overflow-y: hidden; }

.autocompletion-popup {
  overflow: hidden; }

.autocompletion-popup,
.CodeMirror-hints {
  display: flex;
  position: absolute;
  z-index: var(--popup-z-index);
  width: 250px;
  border-radius: var(--border-radius);
  background-color: var(--background-color);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); }
  .autocompletion-popup.emoji,
  .CodeMirror-hints.emoji {
    width: 200px; }
  .autocompletion-popup.user,
  .CodeMirror-hints.user {
    width: 220px; }
  .autocompletion-popup.issue,
  .CodeMirror-hints.issue {
    width: 300px; }
  .autocompletion-popup .list-item,
  .autocompletion-popup li,
  .CodeMirror-hints .list-item,
  .CodeMirror-hints li {
    border-bottom: none; }
    .autocompletion-popup .list-item:not(:first-child),
    .autocompletion-popup li:not(:first-child),
    .CodeMirror-hints .list-item:not(:first-child),
    .CodeMirror-hints li:not(:first-child) {
      border-top: var(--base-border); }
    .autocompletion-popup .list-item.selected, .autocompletion-popup .list-item.CodeMirror-hint-active,
    .autocompletion-popup li.selected,
    .autocompletion-popup li.CodeMirror-hint-active,
    .CodeMirror-hints .list-item.selected,
    .CodeMirror-hints .list-item.CodeMirror-hint-active,
    .CodeMirror-hints li.selected,
    .CodeMirror-hints li.CodeMirror-hint-active {
      --text-color: var(--box-selected-active-text-color);
      --text-secondary-color: var(--box-selected-active-text-color);
      color: var(--text-color);
      background-color: var(--box-selected-active-background-color);
      border-top-color: var(--box-selected-active-background-color); }
      .autocompletion-popup .list-item.selected + .list-item,
      .autocompletion-popup .list-item.selected + .CodeMirror-hint-active, .autocompletion-popup .list-item.CodeMirror-hint-active + .list-item,
      .autocompletion-popup .list-item.CodeMirror-hint-active + .CodeMirror-hint-active,
      .autocompletion-popup li.selected + .list-item,
      .autocompletion-popup li.selected + .CodeMirror-hint-active,
      .autocompletion-popup li.CodeMirror-hint-active + .list-item,
      .autocompletion-popup li.CodeMirror-hint-active + .CodeMirror-hint-active,
      .CodeMirror-hints .list-item.selected + .list-item,
      .CodeMirror-hints .list-item.selected + .CodeMirror-hint-active,
      .CodeMirror-hints .list-item.CodeMirror-hint-active + .list-item,
      .CodeMirror-hints .list-item.CodeMirror-hint-active + .CodeMirror-hint-active,
      .CodeMirror-hints li.selected + .list-item,
      .CodeMirror-hints li.selected + .CodeMirror-hint-active,
      .CodeMirror-hints li.CodeMirror-hint-active + .list-item,
      .CodeMirror-hints li.CodeMirror-hint-active + .CodeMirror-hint-active {
        border-top-color: var(--box-selected-active-background-color); }

.autocompletion-item {
  flex-grow: 1;
  height: 100%;
  min-width: 0;
  padding: 0 var(--spacing);
  /* Used to highlight substring matches in autocompletion texts */ }
  .autocompletion-item mark {
    font-weight: bold;
    /* Reset browser defaults */
    background-color: inherit;
    color: currentColor; }
  .autocompletion-item .emoji {
    display: flex;
    flex-grow: 1;
    height: 100%;
    width: 100%;
    align-items: center; }
    .autocompletion-item .emoji .icon {
      flex-shrink: 0;
      height: 20px;
      width: 20px;
      margin-right: var(--spacing-half); }
    .autocompletion-item .emoji .title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%; }
  .autocompletion-item .issue {
    display: flex;
    flex-grow: 1;
    align-items: center;
    height: 100%;
    width: 100%; }
    .autocompletion-item .issue .number {
      margin-right: var(--spacing-half); }
    .autocompletion-item .issue .title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: var(--font-weight-semibold); }
  .autocompletion-item .user {
    display: flex;
    flex-grow: 1;
    align-items: center;
    height: 100%;
    width: 100%; }
    .autocompletion-item .user.unknown .username {
      font-style: italic; }
    .autocompletion-item .user.unknown .description {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text-secondary-color);
      font-style: italic;
      font-size: var(--font-size-sm); }
    .autocompletion-item .user .username {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: var(--font-weight-semibold);
      margin-right: var(--spacing-half); }
    .autocompletion-item .user .name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text-secondary-color); }

#welcome {
  align-items: stretch;
  justify-content: center;
  flex-direction: row;
  font-size: var(--font-size-md); }
  #welcome #start {
    display: flex;
    flex-direction: column; }
  #welcome .actions {
    display: flex; }
  #welcome #sign-in-dot-com {
    display: flex;
    flex-direction: column; }
    #welcome #sign-in-dot-com .form-component {
      display: block; }
    #welcome #sign-in-dot-com .actions {
      margin-top: var(--spacing-double); }
  #welcome #sign-in-enterprise .sign-in-form {
    margin-top: 0; }
  #welcome #sign-in-enterprise .sign-in-footer {
    margin-top: var(--spacing-double); }
  #welcome #sign-in-enterprise .actions {
    display: inline;
    margin-top: var(--spacing); }
  #welcome #configure-git-user .form-component div:last-child {
    margin-top: var(--spacing); }
  #welcome #usage-opt-out .welcome-title {
    margin: 0; }
  #welcome input,
  #welcome button {
    font-size: var(--font-size-md);
    height: auto; }
  #welcome input {
    padding: var(--spacing-half); }
  #welcome button {
    margin-right: var(--spacing);
    padding: var(--spacing-half) var(--spacing); }
  #welcome .form-component .text-box-component {
    margin-bottom: var(--spacing); }
  #welcome .actions {
    margin-top: var(--spacing); }
  #welcome.exiting .welcome-left {
    transition: transform 250ms ease-in-out;
    transform: translateX(-100%); }
  #welcome.exiting .welcome-right {
    transition: transform 250ms ease-in-out;
    transform: translateX(100%); }

.welcome-title,
.welcome-text {
  margin: 0; }

.welcome-title {
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-light);
  line-height: 1.25;
  margin-bottom: var(--spacing); }

.welcome-text {
  margin: var(--spacing) 0; }

.welcome-button {
  font-weight: var(--font-weight-semibold);
  margin: var(--spacing) 0; }

.sign-in-field {
  width: 100%; }

.welcome-left,
.welcome-right {
  flex-grow: 1;
  width: 50%; }

.welcome-left {
  display: flex;
  align-items: center;
  padding: var(--spacing-quad);
  position: relative; }
  .welcome-left .welcome-graphic-bottom {
    position: absolute;
    right: var(--spacing);
    bottom: var(--spacing);
    height: auto;
    max-height: 100%;
    width: 40%;
    z-index: -1; }
  .welcome-left .welcome-graphic-top {
    position: absolute;
    right: 80px;
    top: 40px;
    height: auto;
    max-height: 100%;
    width: 20%;
    z-index: -1; }
  @media screen and (min-width: 1366px) {
    .welcome-left {
      zoom: 1.2; } }
  @media screen and (min-width: 1400px) {
    .welcome-left {
      zoom: 1.3; } }
  @media screen and (min-width: 1600px) {
    .welcome-left {
      zoom: 1.4; } }
  @media screen and (min-width: 1800px) {
    .welcome-left {
      zoom: 1.5; } }

.welcome-right {
  background-color: #28373b;
  justify-content: center;
  align-items: center;
  display: flex;
  padding: var(--spacing-quad);
  position: relative;
  overflow: hidden; }
  .welcome-right .welcome-graphic {
    height: auto;
    max-height: 100%;
    width: 100%; }

.skip-action-container {
  margin-top: var(--spacing-quad); }
  .skip-action-container .skip-button {
    color: var(--text-secondary-color); }

.welcome-content {
  justify-content: center;
  max-width: 500px;
  width: 100%; }

.forgot-password-link {
  align-self: center;
  margin-left: var(--spacing); }

#foldout-container {
  z-index: var(--foldout-z-index); }
  #foldout-container .overlay {
    background: var(--overlay-background-color);
    height: 100%; }
    #foldout-container .overlay:focus {
      outline: none;
      border: none;
      box-shadow: none; }
  #foldout-container .foldout {
    background: var(--background-color);
    color: var(--text-color); }

#preferences .accounts-tab .account-info .avatar {
  width: 34px;
  height: 34px;
  border: var(--base-border);
  align-self: center; }

#preferences .accounts-tab .account-info .user-info {
  flex-grow: 1;
  align-self: flex-start; }
  #preferences .accounts-tab .account-info .user-info .name {
    font-weight: var(--font-weight-semibold);
    margin-top: -2px;
    margin-bottom: -2px; }

#preferences .no-options-found label {
  margin-bottom: 0; }

#preferences .no-options-found span {
  color: var(--text-secondary-color); }

#external-editor-error {
  width: 450px; }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
.path-text-component {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }
  .path-text-component .dirname {
    color: var(--text-secondary-color); }

.path-label-component {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  align-self: center;
  min-width: 0;
  margin-right: var(--spacing-half); }
  .path-label-component .rename-arrow {
    margin: 0 var(--spacing-half); }

#configure-git-user .form-component {
  margin: var(--spacing-double) 0; }

#configure-git-user .commit-list-example {
  position: relative;
  background: white;
  border: var(--base-border);
  border-radius: var(--border-radius); }
  #configure-git-user .commit-list-example .header {
    background: #f2f8fe;
    padding: var(--spacing-half) var(--spacing);
    font-size: var(--font-size-sm); }
  #configure-git-user .commit-list-example .commit {
    font-size: var(--font-size);
    padding: var(--spacing-half) var(--spacing);
    width: 280px;
    border-bottom: none; }

.form-component {
  display: flex;
  flex-direction: column;
  margin: var(--spacing-half) 0; }
  .form-component > *:not(:last-child) {
    margin-bottom: var(--spacing); }
  .form-component hr {
    width: 100%;
    border: none;
    height: 1px;
    border-bottom: var(--base-border); }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
.text-box-component {
  display: flex;
  flex-direction: column;
  flex: 1; }
  .text-box-component .label-container {
    display: flex;
    margin-bottom: var(--spacing-third); }
    .text-box-component .label-container label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex-grow: 1; }
    .text-box-component .label-container .link-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      justify-content: flex-end;
      flex-shrink: 0;
      flex-grow: 0; }
  .text-box-component input {
    border: 1px solid var(--box-border-color);
    border-radius: var(--border-radius);
    background: var(--box-background-color);
    color: currentColor;
    font-size: var(--font-size);
    font-family: var(--font-family-sans-serif);
    height: var(--text-field-height);
    padding: 0 var(--spacing-half); }
    .text-box-component input:focus {
      outline: none;
      border-color: var(--focus-color);
      box-shadow: 0 0 0 1px var(--text-field-focus-shadow-color); }
    .text-box-component input::-webkit-input-placeholder {
      color: var(--box-placeholder-color); }
    .text-box-component input:disabled {
      background: var(--box-alt-background-color);
      color: var(--text-secondary-color); }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
.button-component {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-family-sans-serif);
  font-size: var(--font-size);
  padding: 0 var(--spacing);
  border: var(--base-border);
  height: var(--button-height);
  color: var(--secondary-button-text-color);
  background-color: var(--secondary-button-background);
  border-radius: var(--button-border-radius); }
  .button-component:not(:disabled):hover {
    border-color: var(--secondary-button-focus-border-color);
    background-color: var(--secondary-button-hover-background); }
  .button-component:focus {
    background-color: var(--secondary-button-hover-background);
    border-color: var(--secondary-button-focus-border-color);
    box-shadow: 0 0 0 1px var(--secondary-button-focus-shadow-color); }
  .button-component:disabled {
    opacity: 0.6; }
  .button-component .octicon {
    vertical-align: middle; }

.button-component[type='submit'] {
  background-color: var(--button-background);
  color: var(--button-text-color);
  border: 1px solid var(--button-background); }
  .button-component[type='submit']:not(:disabled):hover {
    border-color: var(--button-background);
    background-color: var(--button-hover-background); }
  .button-component[type='submit']:focus {
    border: 1px solid var(--button-focus-border-color);
    background-color: var(--button-hover-background);
    box-shadow: 0 0 0 2px var(--text-field-focus-shadow-color); }

.link-button-component {
  color: var(--link-button-color);
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center; }
  .link-button-component:hover {
    text-decoration: underline; }
  .link-button-component[disabled] {
    opacity: 0.6;
    cursor: default;
    text-decoration: none; }
  .link-button-component.link-with-icon .octicon {
    margin-left: var(--spacing-half); }

.small-button {
  font-size: var(--font-size-sm);
  padding: 0 var(--spacing-half);
  height: 21px; }

.button-group-item {
  border-right-width: 0;
  border-radius: 0; }
  .button-group-item:first-child {
    border-top-left-radius: var(--button-border-radius);
    border-bottom-left-radius: var(--button-border-radius); }
  .button-group-item:last-child {
    border-right-width: 1px;
    border-top-right-radius: var(--button-border-radius);
    border-bottom-right-radius: var(--button-border-radius); }
  .button-group-item.selected, .button-group-item:focus, .button-group-item:active, .button-group-item:hover {
    border-right-width: 1px; }
    .button-group-item.selected + .button-group-item, .button-group-item:focus + .button-group-item, .button-group-item:active + .button-group-item, .button-group-item:hover + .button-group-item {
      border-left-width: 0; }

.button-group-item:focus, .button-group-item:active {
  z-index: 1; }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
.select-component {
  display: flex;
  flex-direction: column;
  flex-grow: 1; }
  .select-component label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: var(--spacing-third); }
  .select-component select {
    border: 1px solid var(--box-border-color);
    border-radius: var(--border-radius);
    background: var(--box-background-color);
    color: currentColor;
    font-size: var(--font-size);
    font-family: var(--font-family-sans-serif);
    height: var(--text-field-height);
    padding: 0 var(--spacing-half);
    padding: 0; }
    .select-component select:focus {
      outline: none;
      border-color: var(--focus-color);
      box-shadow: 0 0 0 1px var(--text-field-focus-shadow-color); }
    .select-component select::-webkit-input-placeholder {
      color: var(--box-placeholder-color); }
    .select-component select:disabled {
      background: var(--box-alt-background-color);
      color: var(--text-secondary-color); }

.row-component {
  display: flex;
  flex-direction: row; }
  .row-component > *:not(:last-child) {
    margin-right: var(--spacing); }
  .row-component .button-component {
    align-self: flex-end; }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
.text-area-component {
  display: flex;
  flex-direction: column;
  flex: 1; }
  .text-area-component textarea {
    border: 1px solid var(--box-border-color);
    border-radius: var(--border-radius);
    background: var(--box-background-color);
    color: currentColor;
    font-size: var(--font-size);
    font-family: var(--font-family-sans-serif);
    height: var(--text-field-height);
    padding: 0 var(--spacing-half);
    height: auto;
    resize: none;
    min-height: 100px; }
    .text-area-component textarea:focus {
      outline: none;
      border-color: var(--focus-color);
      box-shadow: 0 0 0 1px var(--text-field-focus-shadow-color); }
    .text-area-component textarea::-webkit-input-placeholder {
      color: var(--box-placeholder-color); }
    .text-area-component textarea:disabled {
      background: var(--box-alt-background-color);
      color: var(--text-secondary-color); }

.checkbox-component {
  display: flex;
  flex-direction: row;
  align-items: center; }
  .checkbox-component input {
    margin: 0; }
    .checkbox-component input:not(:last-child) {
      margin-right: var(--spacing-half); }
    .checkbox-component input:focus {
      outline-offset: -1px; }

.errors-component {
  background: var(--form-error-background);
  border: 1px solid var(--form-error-border-color);
  border-radius: var(--border-radius);
  color: var(--error-color);
  font-size: var(--font-size-sm);
  padding: var(--spacing-half); }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
dialog#merge {
  width: 450px; }
  dialog#merge .branches-list {
    height: 300px; }
  dialog#merge .dialog-header {
    border-bottom: none; }
    dialog#merge .dialog-header h1 {
      font-weight: var(--font-weight-light); }
  dialog#merge .dialog-content {
    padding: 0; }
    dialog#merge .dialog-content .filter-field-row {
      margin: 0;
      border-bottom: var(--base-border); }
      dialog#merge .dialog-content .filter-field-row .filter-list-filter-field {
        padding: 0 var(--spacing-double);
        padding-bottom: var(--spacing); }
    dialog#merge .dialog-content .list-item {
      padding: 0 var(--spacing-double); }
      dialog#merge .dialog-content .list-item .filter-list-group-header,
      dialog#merge .dialog-content .list-item .branches-list-item {
        padding: 0; }
  dialog#merge .dialog-footer button[type='submit'] {
    height: auto;
    width: 100%;
    padding: var(--spacing-half); }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
dialog#merge-conflicts-list,
dialog#rebase-conflicts-list {
  width: 500px; }
  dialog#merge-conflicts-list .summary,
  dialog#rebase-conflicts-list .summary {
    margin-bottom: 20px; }
  dialog#merge-conflicts-list .dialog-header h1,
  dialog#rebase-conflicts-list .dialog-header h1 {
    font-weight: var(--font-weight-light); }
  dialog#merge-conflicts-list .dialog-content,
  dialog#rebase-conflicts-list .dialog-content {
    padding-bottom: var(--spacing); }
  dialog#merge-conflicts-list .green-circle,
  dialog#rebase-conflicts-list .green-circle {
    background-color: var(--color-new);
    color: var(--background-color);
    border-radius: 50%;
    height: 22px;
    width: 22px;
    display: flex;
    justify-content: center;
    align-items: center; }
  dialog#merge-conflicts-list ul,
  dialog#rebase-conflicts-list ul {
    list-style: none;
    padding: 0;
    max-height: 285px;
    overflow-y: auto; }
    dialog#merge-conflicts-list ul li,
    dialog#rebase-conflicts-list ul li {
      margin-bottom: var(--spacing-double);
      padding-left: 0; }
    dialog#merge-conflicts-list ul li:last-of-type,
    dialog#rebase-conflicts-list ul li:last-of-type {
      margin-bottom: calc(var(--spacing) * 2); }
    dialog#merge-conflicts-list ul li.unmerged-file-status-resolved,
    dialog#merge-conflicts-list ul li.unmerged-file-status-conflicts,
    dialog#rebase-conflicts-list ul li.unmerged-file-status-resolved,
    dialog#rebase-conflicts-list ul li.unmerged-file-status-conflicts {
      display: flex;
      flex-flow: row nowrap; }
      dialog#merge-conflicts-list ul li.unmerged-file-status-resolved .file-octicon,
      dialog#merge-conflicts-list ul li.unmerged-file-status-conflicts .file-octicon,
      dialog#rebase-conflicts-list ul li.unmerged-file-status-resolved .file-octicon,
      dialog#rebase-conflicts-list ul li.unmerged-file-status-conflicts .file-octicon {
        margin-right: var(--spacing); }
      dialog#merge-conflicts-list ul li.unmerged-file-status-resolved .column-left,
      dialog#merge-conflicts-list ul li.unmerged-file-status-conflicts .column-left,
      dialog#rebase-conflicts-list ul li.unmerged-file-status-resolved .column-left,
      dialog#rebase-conflicts-list ul li.unmerged-file-status-conflicts .column-left {
        display: flex;
        flex-flow: column nowrap;
        align-items: start;
        max-width: 50%;
        padding-right: var(--spacing); }
        dialog#merge-conflicts-list ul li.unmerged-file-status-resolved .column-left .path-text-component,
        dialog#merge-conflicts-list ul li.unmerged-file-status-conflicts .column-left .path-text-component,
        dialog#rebase-conflicts-list ul li.unmerged-file-status-resolved .column-left .path-text-component,
        dialog#rebase-conflicts-list ul li.unmerged-file-status-conflicts .column-left .path-text-component {
          text-overflow: ellipsis;
          max-width: 100%; }
      dialog#merge-conflicts-list ul li.unmerged-file-status-resolved .action-buttons,
      dialog#merge-conflicts-list ul li.unmerged-file-status-conflicts .action-buttons,
      dialog#rebase-conflicts-list ul li.unmerged-file-status-resolved .action-buttons,
      dialog#rebase-conflicts-list ul li.unmerged-file-status-conflicts .action-buttons {
        margin-left: auto;
        flex-shrink: 0;
        flex: 0 1 auto;
        display: flex;
        align-items: center;
        justify-content: center; }
        dialog#merge-conflicts-list ul li.unmerged-file-status-resolved .action-buttons .resolve-arrow-menu .octicon,
        dialog#merge-conflicts-list ul li.unmerged-file-status-conflicts .action-buttons .resolve-arrow-menu .octicon,
        dialog#rebase-conflicts-list ul li.unmerged-file-status-resolved .action-buttons .resolve-arrow-menu .octicon,
        dialog#rebase-conflicts-list ul li.unmerged-file-status-conflicts .action-buttons .resolve-arrow-menu .octicon {
          margin-left: var(--spacing-half);
          width: 10px;
          height: 14px; }
      dialog#merge-conflicts-list ul li.unmerged-file-status-resolved .green-circle:last-child,
      dialog#merge-conflicts-list ul li.unmerged-file-status-conflicts .green-circle:last-child,
      dialog#rebase-conflicts-list ul li.unmerged-file-status-resolved .green-circle:last-child,
      dialog#rebase-conflicts-list ul li.unmerged-file-status-conflicts .green-circle:last-child {
        margin-left: auto;
        margin-top: var(--spacing);
        flex-shrink: 0;
        flex: 0 1 auto; }
    dialog#merge-conflicts-list ul .unmerged-file-status-resolved .file-conflicts-status,
    dialog#rebase-conflicts-list ul .unmerged-file-status-resolved .file-conflicts-status {
      color: var(--color-new); }
    dialog#merge-conflicts-list ul .unmerged-file-status-conflicts .file-conflicts-status,
    dialog#rebase-conflicts-list ul .unmerged-file-status-conflicts .file-conflicts-status {
      color: var(--color-conflicted); }
    dialog#merge-conflicts-list ul .unmerged-file-status-conflicts .command-line-hint,
    dialog#rebase-conflicts-list ul .unmerged-file-status-conflicts .command-line-hint {
      color: var(--text-secondary-color); }
  dialog#merge-conflicts-list .all-conflicts-resolved,
  dialog#rebase-conflicts-list .all-conflicts-resolved {
    display: flex;
    flex-flow: row nowrap;
    padding: var(--spacing) 0 var(--spacing-double); }
    dialog#merge-conflicts-list .all-conflicts-resolved .message,
    dialog#rebase-conflicts-list .all-conflicts-resolved .message {
      padding-left: var(--spacing);
      padding-top: var(--spacing-third); }
  dialog#merge-conflicts-list .arrow-menu .octicon,
  dialog#rebase-conflicts-list .arrow-menu .octicon {
    width: 10px;
    height: 14px; }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
dialog#rebase {
  width: 450px; }
  dialog#rebase .branches-list {
    height: 300px; }
  dialog#rebase .dialog-header {
    border-bottom: none; }
    dialog#rebase .dialog-header h1 {
      font-weight: var(--font-weight-light); }
  dialog#rebase .dialog-content {
    padding: 0; }
    dialog#rebase .dialog-content .filter-field-row {
      margin: 0;
      border-bottom: var(--base-border); }
      dialog#rebase .dialog-content .filter-field-row .filter-list-filter-field {
        padding: 0 var(--spacing-double);
        padding-bottom: var(--spacing); }
    dialog#rebase .dialog-content .list-item {
      padding: 0 var(--spacing-double); }
      dialog#rebase .dialog-content .list-item .filter-list-group-header,
      dialog#rebase .dialog-content .list-item .branches-list-item {
        padding: 0; }
  dialog#rebase .dialog-footer button[type='submit'] {
    height: auto;
    width: 100%;
    padding: var(--spacing-half); }

dialog#rebase-progress progress {
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
  width: 100%;
  margin-bottom: var(--spacing); }
  dialog#rebase-progress progress::-webkit-progress-bar {
    background-color: transparent; }
  dialog#rebase-progress progress::-webkit-progress-value {
    background-color: var(--dialog-rebase-progress-background);
    transition: width 1s ease; }

dialog#rebase-progress .details {
  display: flex;
  flex-flow: row nowrap;
  padding: var(--spacing) 0 var(--spacing-double); }
  dialog#rebase-progress .details .green-circle {
    background-color: var(--color-new);
    color: var(--background-color);
    border-radius: 50%;
    height: 22px;
    width: 22px;
    display: flex;
    justify-content: center;
    align-items: center; }
  dialog#rebase-progress .details .summary {
    padding-left: var(--spacing); }
    dialog#rebase-progress .details .summary .message {
      font-weight: bold; }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
dialog#abort-merge-warning {
  width: 450px; }
  dialog#abort-merge-warning .content-wrapper {
    display: flex;
    padding-top: var(--spacing-triple);
    padding-bottom: var(--spacing-triple); }
    dialog#abort-merge-warning .content-wrapper .octicon {
      color: var(--dialog-warning-color);
      margin-right: var(--spacing); }
  dialog#abort-merge-warning .column-left {
    display: flex;
    flex-flow: column nowrap;
    align-items: start; }

dialog#push-needs-pull-warning {
  width: 450px; }
  dialog#push-needs-pull-warning .spin {
    margin-right: var(--spacing-half); }

#publish-repository {
  width: 450px; }

#repository-settings {
  width: 450px; }
  #repository-settings .no-remote {
    justify-content: space-between; }
    #repository-settings .no-remote button {
      flex-shrink: 0;
      flex-grow: 0;
      min-width: 120px;
      align-self: center; }

:root {
  --color-new: #28a745;
  --color-deleted: #d73a49;
  --color-modified: #dbab09;
  --color-renamed: #0366d6;
  --color-conflicted: #f66a0a;
  --text-color: #24292e;
  --text-secondary-color: #6a737d;
  --background-color: #fff;
  --button-height: 25px;
  --button-background: #0366d6;
  --button-border-radius: 2px;
  --button-hover-background: #0372ef;
  --button-text-color: #fff;
  --button-focus-border-color: #005cc5;
  --link-button-color: #0366d6;
  --link-button-hover-color: #005cc5;
  --secondary-button-background: #fafbfc;
  --secondary-button-hover-background: #fff;
  --secondary-button-text-color: var(--text-color);
  --secondary-button-focus-shadow-color: rgba(225, 228, 232, 0.75);
  --secondary-button-focus-border-color: #d1d5da;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-family-monospace: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  /**
   * Font weight to use for semibold text
   */
  --font-weight-semibold: 600;
  /**
   * Font weight to use for light text
   */
  --font-weight-light: 300;
  --font-size: 12px;
  --font-size-sm: 11px;
  --font-size-md: 14px;
  --font-size-lg: 28px;
  --font-size-xl: 32px;
  --font-size-xxl: 42px;
  /** Extra small font size, be very conservative with the use of this */
  --font-size-xs: 9px;
  /**
   * Background color for custom scroll bars.
   * The color is applied to the thumb part of the scrollbar.
   *
   * Note: Only applies to win32 platforms
   */
  --scroll-bar-thumb-background-color: rgba(0, 0, 0, 0.2);
  /**
   * Background color for custom scroll bars in their active state.
   * The color is applied to the thumb part of the scrollbar.
   *
   * Note: Only applies to win32 platforms
   */
  --scroll-bar-thumb-background-color-active: rgba(0, 0, 0, 0.5);
  --box-background-color: var(--background-color);
  --box-alt-background-color: #f6f8fa;
  /**
   * Background color for skeleton or "loading" boxes
   */
  --box-skeleton-background-color: #e1e4e8;
  --skeleton-background-gradient: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
  /**
   * Border color for boxes.
   */
  --box-border-color: #e1e4e8;
  --box-border-accent-color: #0366d6;
  /**
   * Background color for selected boxes without keyboard focus
   */
  --box-selected-background-color: #ebeef1;
  /**
   * Text color for when a user hovers over a boxe with a
   * pointing device. Should not be used by boxes that doesn't
   * implement a hover state since this will conflict with
   * selection and active selection
   */
  --box-hover-text-color: #24292e;
  /**
   * Background color for when a user hovers over a boxe with a
   * pointing device. Should not be used by boxes that doesn't
   * implement a hover state since this will conflict with
   * selection and active selection
   */
  /**
   * Text color for selected boxes without keyboard focus
   */
  --box-selected-text-color: #24292e;
  /**
   * Border color for selected boxes without keyboard focus
   */
  --box-selected-border-color: #959da5;
  /**
   * Background color for selected boxes with active keyboard focus
   */
  --box-selected-active-background-color: #0366d6;
  /**
   * Text color for selected boxes with active keyboard focus
   */
  --box-selected-active-text-color: #fff;
  /**
   * Border color for selected boxes with active keyboard focus
   */
  --box-selected-active-border-color: #959da5;
  /**
   * Gradient used to indicate that content is overflowing, intended
   * for use when content can be expanded through other means than
   * scrolling.
   */
  --box-overflow-shadow-background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, white 90%, white 100%);
  /**
   * Placeholder color for input boxes
   */
  --box-placeholder-color: #6a737d;
  /**
   * Author input (co-authors)
   */
  --co-author-tag-background-color: #f1f8ff;
  --co-author-tag-border-color: #c8e1ff;
  /**
   * The height of the title bar area on Win32 platforms
   * If changed, update titleBarHeight in 'app/src/ui/dialog/dialog.tsx'
  */
  --win32-title-bar-height: 28px;
  --win32-title-bar-background-color: #24292e;
  /**
   * The height of the title bar area on darwin platforms
   * If changed, update titleBarHeight in 'app/src/ui/dialog/dialog.tsx'
  */
  --darwin-title-bar-height: 22px;
  --spacing: 10px;
  --spacing-double: calc(var(--spacing) * 2);
  --spacing-triple: calc(var(--spacing) * 3);
  --spacing-quad: calc(var(--spacing) * 4);
  --spacing-half: calc(var(--spacing) / 2);
  --spacing-third: calc(var(--spacing) / 3);
  --border-radius: 3px;
  --base-border: 1px solid var(--box-border-color);
  --shadow-color: rgba(71, 83, 95, 0.19);
  --base-box-shadow: 0 2px 7px var(--shadow-color);
  --toolbar-height: 50px;
  --toolbar-background-color: #24292e;
  --toolbar-border-color: #24292e;
  --toolbar-text-color: #fff;
  --toolbar-text-secondary-color: #d1d5da;
  --toolbar-button-color: var(--toolbar-text-color);
  --toolbar-button-background-color: transparent;
  --toolbar-button-border-color: black;
  --toolbar-button-secondary-color: var(--toolbar-text-secondary-color);
  --toolbar-button-hover-color: #fff;
  --toolbar-button-hover-background-color: #2f363d;
  --toolbar-button-hover-border-color: var(--toolbar-button-border-color);
  --toolbar-button-focus-background-color: #2f363d;
  --toolbar-button-active-color: var(--text-color);
  --toolbar-button-active-background-color: var(--background-color);
  --toolbar-button-active-border-color: var(--background-color);
  --toolbar-button-progress-color: #2f363d;
  --toolbar-button-focus-progress-color: #444d56;
  --toolbar-button-hover-progress-color: #444d56;
  --toolbar-dropdown-open-progress-color: #e1e4e8;
  /**
   * App menu bar colors (Windows/Linux only)
   */
  --app-menu-button-color: var(--toolbar-text-color);
  --app-menu-button-hover-color: var(--toolbar-button-hover-color);
  --app-menu-button-hover-background-color: var(--toolbar-button-hover-background-color);
  --app-menu-button-active-color: var(--toolbar-button-active-color);
  --app-menu-button-active-background-color: var(--toolbar-button-active-background-color);
  --app-menu-pane-color: var(--text-color);
  --app-menu-pane-secondary-color: var(--text-secondary-color);
  --app-menu-pane-background-color: var(--toolbar-button-active-background-color);
  --app-menu-divider-color: var(--box-border-color);
  /**
    * Background color for badges inside of toolbar buttons.
    * Examples of badges are the ahead/behind bubble in the
    * push/pull button and the PR badge in the branch drop
    * down button.
    */
  --toolbar-badge-background-color: #586069;
  --toolbar-badge-active-background-color: #e1e4e8;
  --tab-bar-height: 29px;
  --tab-bar-active-color: #0366d6;
  --tab-bar-background-color: #fff;
  --tab-bar-hover-background-color: #f6f8fa;
  /** Count bubble colors when used inside of a tab bar item */
  --tab-bar-count-color: var(--text-color);
  --tab-bar-count-background-color: #e1e4e8;
  /**
    * Badge colors when used inside of list items.
    * Example of this is the change indicators inside
    * of the repository list.
    */
  --list-item-badge-color: #2f363d;
  --list-item-badge-background-color: #e1e4e8;
  --list-item-selected-badge-color: #24292e;
  --list-item-selected-badge-background-color: #d1d5da;
  --list-item-selected-active-badge-color: #24292e;
  --list-item-selected-active-badge-background-color: #fff;
  --list-item-hover-background-color: #f6f8fa;
  /** Win32 has custom scrol bars, see _scroll.scss */
  --win32-scroll-bar-size: 10px;
  /**
   * The z-index for popups. Nothing should be higher, but other z-indexes can
   * be defined in terms of it.
   *
   * 10 seems arbitrary (because it is) but we have to go that high because
   * codemirror is all over the place with their z-indexes and uses at least
   * 0-6.
   */
  --popup-z-index: 10;
  --popup-overlay-z-index: calc(var(--popup-z-index) - 1);
  --foldout-z-index: calc(var(--popup-z-index) - 2);
  /**
   * Toast notifications are shown temporarily for things like the zoom
   * percentage changing or the app toggling between full screen and normal
   * window mode.
   */
  --toast-notification-color: #fafbfc;
  --toast-notification-background-color: rgba(36, 41, 46, 0.6);
  --tip-box-background-color: rgba(3, 102, 214, 0.06);
  --tip-box-border-color: #c8e1ff;
  /** The highlight color used for focus rings and focus box shadows */
  --focus-color: #0366d6;
  /**
   * Variables for form elements
   */
  --text-field-height: 25px;
  --text-field-focus-shadow-color: rgba(3, 102, 214, 0.25);
  /**
   * Blankslate actions, see `BlankslateAction` component.
   */
  --primary-blankslate-action-background: #f1f8ff;
  --primary-blankslate-action-border-color: #c8e1ff;
  /**
   * Diff view
   */
  --diff-line-padding-y: 2px;
  --diff-text-color: #24292e;
  --diff-border-color: #e1e4e8;
  --diff-gutter-color: #e1e4e8;
  --diff-gutter-background-color: var(--background-color);
  --diff-line-number-color: #444d56;
  --diff-line-number-column-width: 50px;
  --diff-selected-background-color: #2188ff;
  --diff-selected-border-color: #005cc5;
  --diff-selected-gutter-color: #005cc5;
  --diff-selected-text-color: var(--background-color);
  --diff-add-background-color: #e6ffed;
  --diff-add-border-color: #85e89d;
  --diff-add-gutter-color: #85e89d;
  --diff-add-gutter-background-color: #cdffd8;
  --diff-add-inner-background-color: #acf2bd;
  --diff-add-text-color: var(--diff-text-color);
  --diff-delete-background-color: #ffeef0;
  --diff-delete-border-color: #fdaeb7;
  --diff-delete-gutter-color: #fdaeb7;
  --diff-delete-gutter-background-color: #ffdce0;
  --diff-delete-inner-background-color: #fdb8c0;
  --diff-delete-text-color: var(--diff-text-color);
  --diff-hunk-background-color: #f1f8ff;
  --diff-hunk-border-color: #c8e1ff;
  --diff-hunk-gutter-color: #afd3ff;
  --diff-hunk-gutter-background-color: #dbedff;
  --diff-hunk-text-color: #6a737d;
  --diff-hover-background-color: #79b8ff;
  --diff-hover-border-color: #2188ff;
  --diff-hover-gutter-color: #2188ff;
  --diff-hover-text-color: var(--background-color);
  --diff-add-hover-background-color: #85e89d;
  --diff-add-hover-border-color: #34d058;
  --diff-add-hover-gutter-color: #34d058;
  --diff-add-hover-text-color: var(--text-color);
  --diff-delete-hover-background-color: #fdaeb7;
  --diff-delete-hover-border-color: #f97583;
  --diff-delete-hover-gutter-color: #f97583;
  --diff-delete-hover-text-color: var(--text-color);
  --syntax-variable-color: #6f42c1;
  --syntax-alt-variable-color: #24292e;
  --syntax-keyword-color: #d73a49;
  --syntax-atom-color: #005cc5;
  --syntax-string-color: #032f62;
  --syntax-qualifier-color: #6f42c1;
  --syntax-type-color: #d73a49;
  --syntax-comment-color: #6a737d;
  --syntax-tag-color: #22863a;
  --syntax-attribute-color: #6f42c1;
  --syntax-link-color: #032f62;
  --syntax-header-color: #0000ff;
  --undo-animation-duration: 500ms;
  --error-color: #d73a49;
  --form-error-background: #ffdce0;
  --form-error-border-color: #fdaeb7;
  --form-error-text-color: #9e1c23;
  /** Overlay is used as a background for both modals and foldouts */
  --overlay-background-color: rgba(0, 0, 0, 0.4);
  /** Dialog */
  --dialog-warning-color: #f9c513;
  --dialog-error-color: #d73a49;
  /** Inline paths and code */
  --path-segment-background: #f1f8ff;
  --path-segment-padding: var(--spacing-third);
  /** Diverging notification banner colors */
  --notification-banner-background: #f1f8ff;
  --notification-banner-border-color: #c8e1ff;
  --notification-ref-background: rgba(255, 255, 255, 0.75);
  --easing-ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --easing-ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --easing-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  /** rebase progress bar */
  --dialog-rebase-progress-background: #28a745;
  /** merge/rebase status indicators */
  --status-pending-color: #dbab09;
  --status-error-color: #d73a49;
  --status-success-color: #28a745; }

::backdrop {
  --overlay-background-color: rgba(0, 0, 0, 0.4); }

#release-notes {
  max-height: 450px; }
  #release-notes .dialog-content {
    padding: 0; }
  #release-notes .dialog-header {
    height: 100px;
    position: relative; }
    #release-notes .dialog-header .release-notes-header {
      display: flex;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 0 var(--spacing-double); }
    #release-notes .dialog-header .release-note-graphic-left {
      margin-right: 20px; }
    #release-notes .dialog-header .release-note-graphic-right {
      margin-left: 20px; }
    #release-notes .dialog-header .title {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      justify-content: center;
      text-align: center; }
      #release-notes .dialog-header .title p {
        margin: 0; }
      #release-notes .dialog-header .title .version {
        font-size: 14px;
        font-weight: var(--font-weight-semibold);
        margin-bottom: 0; }
      #release-notes .dialog-header .title .date {
        font-size: 11px;
        color: var(--text-secondary-color); }
  #release-notes .dialog-footer {
    flex-direction: row;
    justify-content: space-between; }
  #release-notes ul {
    list-style: none;
    padding-left: 0; }
    #release-notes ul li {
      padding-left: 0; }
  #release-notes a.close {
    align-self: flex-start;
    z-index: 1; }
  #release-notes .container {
    width: 600px;
    max-height: 200px;
    display: flex;
    flex-direction: row;
    padding-left: var(--spacing-triple);
    padding-right: var(--spacing-triple);
    overflow-x: hidden;
    overflow-y: auto;
    justify-content: space-around; }
    #release-notes .container .column {
      flex: 1 1 275px;
      max-width: 75%;
      margin: 0 calc(var(--spacing) * 1.5); }
      #release-notes .container .column .section {
        margin: var(--spacing-double) 0; }
        #release-notes .container .column .section .header {
          font-size: 12px;
          font-weight: var(--font-weight-semibold); }

#usage-reporting .ref-component {
  word-break: break-word; }

#usage-reporting .checkbox-component {
  margin-left: auto; }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
dialog#stash-changes {
  width: 450px; }
  dialog#stash-changes .dialog-content .octicon {
    color: var(--dialog-warning-color);
    margin-right: var(--spacing); }

dialog {
  --dialog-icon-alert: url('data:image/svg+xml;utf8,<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m 12,1.5 c -0.5,0 -1.5,0 -2,1 L 5,11 0.33203125,19.234375 C -0.5,21 0.5,23 2.4902344,23 L 12,23 21.509766,23 C 23.5,23 24.5,21 23.667969,19.234375 L 19,11 14,2.5 c -0.5,-1 -1.5,-1 -2,-1 z m -1,5.5 2,0 0,8 -2,0 z m 0,10 2,0 0,2 -2,0 z" /></svg>');
  --dialog-icon-stop: url('data:image/svg+xml;utf8,<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m 16,2 -9,0 -6,6 0,9 6,6 9,0 6,-6 0,-9 z m 4.5,14.25 -5.25,5.25 -7.5,0 -5.25,-5.25 0,-7.5 5.25,-5.25 7.5,0 5.25,5.25 z M 10,6 l 3,0 0,8 -3,0 z m 0,10 3,0 0,3 -3,0 z" /></svg>');
  --dialog-icon-size: 24px;
  border: var(--base-border);
  box-shadow: var(--base-box-shadow);
  padding: 0;
  border-radius: var(--border-radius);
  color: var(--text-color);
  background: var(--background-color);
  transform: scale(1);
  opacity: 1;
  min-width: 400px;
  max-width: 600px; }
  dialog.modal-enter {
    opacity: 1;
    transform: scale(0.75);
    pointer-events: none; }
    dialog.modal-enter::backdrop {
      opacity: 0; }
  dialog.modal-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: transform 250ms var(--easing-ease-out-back); }
    dialog.modal-enter-active::backdrop {
      opacity: 1;
      transition: opacity 100ms ease-in; }
  dialog.modal-leave {
    opacity: 1;
    transform: scale(1);
    pointer-events: none; }
    dialog.modal-leave::backdrop {
      opacity: 1; }
  dialog.modal-leave-active {
    opacity: 0.01;
    transform: scale(0.25);
    transition: opacity 100ms ease-in, transform 100ms var(--easing-ease-in-back); }
    dialog.modal-leave-active::backdrop {
      opacity: 0.01;
      transition: opacity 100ms ease-in; }
  dialog::backdrop {
    background: var(--overlay-background-color);
    opacity: 1; }
  dialog > form > fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0; }
  dialog .dialog-header {
    height: 50px;
    border-bottom: var(--base-border);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--spacing-double); }
    dialog .dialog-header svg.icon {
      flex-shrink: 0;
      margin-right: var(--spacing); }
    dialog .dialog-header h1 {
      font-weight: var(--font-weight-semibold);
      font-size: var(--font-size-md);
      margin: 0;
      padding: 0;
      margin-right: var(--spacing);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
    dialog .dialog-header .close {
      flex-shrink: 0;
      border: 0;
      height: 16px;
      width: 16px;
      margin: 0 calc(var(--spacing) * -1) 0 auto;
      padding: 0;
      background: transparent;
      color: var(--text-secondary-color);
      cursor: pointer; }
      dialog .dialog-header .close .octicon {
        pointer-events: none; }
      dialog .dialog-header .close:hover {
        color: var(--text-color); }
      dialog .dialog-header .close:focus {
        outline: 0; }
    dialog .dialog-header .close {
      flex-shrink: 0;
      border: 0;
      height: 16px;
      width: 16px;
      margin: 0 calc(var(--spacing) * -1) 0 auto;
      padding: 0;
      background: transparent;
      color: var(--text-secondary-color);
      cursor: pointer; }
      dialog .dialog-header .close .octicon {
        pointer-events: none; }
      dialog .dialog-header .close:hover {
        color: var(--text-color); }
      dialog .dialog-header .close:focus {
        outline: 0; }
  dialog.warning .dialog-content, dialog.error .dialog-content {
    position: relative;
    margin-left: var(--spacing-double);
    padding-left: calc(var(--spacing-double) + var(--dialog-icon-size));
    min-height: calc(var(--spacing-double) * 2 + var(--spacing-half) + var(--dialog-icon-size)); }
    dialog.warning .dialog-content::before, dialog.error .dialog-content::before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      height: 24px;
      width: 24px;
      -webkit-mask-repeat: no-repeat; }
  dialog.warning .dialog-content::before {
    background-color: var(--dialog-warning-color);
    -webkit-mask: var(--dialog-icon-alert); }
  dialog.error .dialog-content::before {
    background-color: var(--dialog-error-color);
    -webkit-mask: var(--dialog-icon-stop); }
  dialog .dialog-content {
    padding: var(--spacing-double); }
    dialog .dialog-content .row-component:not(:last-child) {
      margin-bottom: var(--spacing); }
    dialog .dialog-content p {
      margin-top: 0;
      margin-bottom: var(--spacing); }
      dialog .dialog-content p:last-child {
        margin-bottom: 0; }
    dialog .dialog-content h2,
    dialog .dialog-content h3 {
      font-weight: var(--font-weight-semibold);
      margin-top: 0;
      margin-bottom: var(--spacing); }
      dialog .dialog-content h2:last-child,
      dialog .dialog-content h3:last-child {
        margin-bottom: 0; }
    dialog .dialog-content h2 {
      font-size: var(--font-size-md); }
    dialog .dialog-content h3 {
      font-size: var(--font-size); }
    dialog .dialog-content ul,
    dialog .dialog-content ol {
      margin-top: 0;
      padding-left: var(--spacing-double);
      list-style-position: outside; }
      dialog .dialog-content ul:last-child,
      dialog .dialog-content ol:last-child {
        margin-bottom: 0; }
      dialog .dialog-content ul li,
      dialog .dialog-content ol li {
        margin-bottom: var(--spacing);
        padding-left: var(--spacing-half); }
  dialog .dialog-footer {
    display: flex;
    flex-direction: column;
    border-top: var(--base-border);
    padding: var(--spacing-double); }
    dialog .dialog-footer .button-group {
      display: flex;
      flex-direction: row;
      justify-content: flex-end; }
    dialog .dialog-footer button {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-right: var(--spacing-half);
      min-width: 120px; }
      dialog .dialog-footer button:last-child {
        margin-right: 0; }
  dialog .dialog-error {
    display: flex;
    padding: var(--spacing);
    align-items: center;
    white-space: pre-wrap;
    background: var(--form-error-background);
    border-bottom: 1px solid var(--form-error-border-color);
    color: var(--form-error-text-color); }
    dialog .dialog-error > .octicon {
      flex-grow: 0;
      flex-shrink: 0;
      margin-right: var(--spacing); }
  dialog#app-error .dialog-content {
    max-height: 400px;
    overflow-y: auto; }
    dialog#app-error .dialog-content p {
      -webkit-user-select: auto;
      user-select: auto;
      cursor: text;
      white-space: pre-wrap; }
      dialog#app-error .dialog-content p.monospace {
        font-family: var(--font-family-monospace); }
  dialog#preferences {
    width: 450px; }
  dialog#about {
    width: 450px; }
  dialog#create-repository {
    width: 400px; }
  dialog#create-branch {
    width: 400px; }
  dialog#push-branch-commits {
    width: 450px; }
  dialog#publish-branch {
    width: 450px; }
  dialog#generic-git-auth {
    width: 450px; }
  dialog#confirm-remove-repository {
    width: 450px; }
    dialog#confirm-remove-repository .description {
      color: var(--text-secondary-color);
      font-size: var(--font-size-sm); }
  dialog#sign-in {
    width: 400px; }
    dialog#sign-in .sign-in-with-browser {
      display: block;
      text-align: center; }
    dialog#sign-in .forgot-password-row,
    dialog#sign-in .what-is-this-row {
      font-size: var(--font-size-sm);
      justify-content: flex-end; }
    dialog#sign-in .forgot-password-link-sign-in {
      margin-left: auto; }
  dialog#add-existing-repository {
    width: 400px; }
  dialog#initialize-lfs {
    width: 400px; }
  dialog#lfs-attribute-mismatch {
    width: 400px; }

.warning-helper-text {
  font-size: var(--font-size-sm); }
  .warning-helper-text .octicon {
    fill: var(--dialog-warning-color);
    margin-right: var(--spacing-half); }

#successful-merge .banner-message {
  overflow-x: hidden;
  display: flex;
  flex: 1 1 auto; }
  #successful-merge .banner-message span {
    max-width: 100%;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }

#successful-merge .green-circle {
  background-color: var(--color-new);
  color: var(--background-color);
  border-radius: 50%;
  height: 16px;
  width: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: var(--spacing);
  display: flex;
  flex-shrink: 0;
  flex-grow: 0; }

#merge-conflicts-banner .banner-message {
  overflow-x: hidden;
  display: flex;
  flex: 1 1 auto; }
  #merge-conflicts-banner .banner-message span {
    max-width: 100%;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 1ex; }

#merge-conflicts-banner .alert-icon {
  fill: var(--color-conflicted); }

#successful-rebase .banner-message {
  overflow-x: hidden;
  display: flex;
  flex: 1 1 auto; }
  #successful-rebase .banner-message span {
    max-width: 100%;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }

#successful-rebase .green-circle {
  background-color: var(--color-new);
  color: var(--background-color);
  border-radius: 50%;
  height: 16px;
  width: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: var(--spacing);
  display: flex;
  flex-shrink: 0;
  flex-grow: 0; }

#rebase-conflicts-banner .banner-message {
  overflow-x: hidden;
  display: flex;
  flex: 1 1 auto; }
  #rebase-conflicts-banner .banner-message span {
    max-width: 100%;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 1ex; }

#rebase-conflicts-banner .alert-icon {
  fill: var(--color-conflicted); }

#update-available .download-icon {
  margin-right: var(--spacing); }

.banner {
  height: 30px;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--spacing);
  flex: none; }
  .banner .contents {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    align-content: center;
    justify-content: left;
    align-items: center; }
  .banner .close {
    display: flex;
    flex-shrink: 0;
    flex-grow: 0;
    width: 16px;
    height: 16px;
    margin-right: var(--spacing);
    margin-left: var(--spacing);
    background: transparent;
    color: var(--text-secondary-color); }
    .banner .close:hover {
      color: var(--text-color); }
    .banner .close:focus {
      outline: 0; }
  .banner.banner-enter {
    height: 0px;
    opacity: 0; }
    .banner.banner-enter.banner-enter-active {
      height: 30px;
      opacity: 1;
      transition: height 300ms ease-in-out, opacity 200ms ease-in 300ms; }
  .banner.banner-leave {
    height: 30px;
    opacity: 1; }
    .banner.banner-leave.banner-leave-active {
      height: 0px;
      opacity: 0;
      transition: height 225ms ease-in-out 175ms, opacity 175ms ease-in; }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
#add-repository {
  width: 350px; }
  #add-repository .content {
    margin: var(--spacing-double); }

.clone-github-repo {
  height: 250px; }
  .clone-github-repo.filter-list .filter-field-row {
    margin: var(--spacing-double);
    margin-bottom: var(--spacing); }
  .clone-github-repo .clone-repository-list-group-header {
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing) var(--spacing-double); }
  .clone-github-repo .clone-repository-list-item {
    padding: 0 var(--spacing-double); }
    .clone-github-repo .clone-repository-list-item .name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
  .clone-github-repo .clone-repository-list-item {
    display: flex;
    flex-direction: row;
    min-width: 0;
    flex-grow: 1;
    align-items: center; }
    .clone-github-repo .clone-repository-list-item .icon {
      fill: var(--text-secondary-color);
      margin-right: var(--spacing-half);
      width: 16px;
      flex-shrink: 0; }

.dialog-content.clone-github-repository-content {
  padding: 0; }

.dialog-content.clone-generic-repository-content {
  padding: var(--spacing-double); }

.clone-repository {
  width: 500px; }
  .clone-repository .local-path-field {
    border-top: var(--base-border);
    padding: var(--spacing-double); }

#discard-changes .dialog-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: var(--spacing); }
  #discard-changes .dialog-content ul li {
    padding-left: 0;
    margin-bottom: 0; }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
.filter-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: inherit; }
  .filter-list .filter-field-row {
    margin: var(--spacing);
    min-width: 0; }
    .filter-list .filter-field-row .filter-list-filter-field {
      min-width: 0; }
  .filter-list-container {
    display: flex;
    flex: 1; }

.filter-list-group-header {
  padding: 0 var(--spacing);
  font-weight: var(--font-weight-semibold); }

.no-results-found {
  width: 100%;
  text-align: center; }

.merge-button.button-component {
  align-self: auto; }

.merge-button-row {
  display: flex;
  flex-direction: column;
  border-top: var(--base-border);
  padding: var(--spacing); }

.merge-button .icon {
  margin-right: var(--spacing-half); }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
#missing-repository-view {
  /* The view's position in relation to its parent, ie full
   * width, vertically centered...  */
  justify-content: center;
  align-self: center;
  width: 600px;
  /* TODO: Revisit, this might not be the best way to do it.
   * We don't want the contents to sit smack on the vertical
   * midline. The view itself doesn't extend 100% to the top
   * on most platforms (due to our title bar) and it looks
   * better if we position it centered on the ~40% line.
   */
  margin-top: -60px;
  /* Add a ~20px padding around the view to ensure that
   * content doesn't touch the edge of the sideline or
   * window when space is scarce.
   */
  padding: var(--spacing-double);
  /*  Center children horizontally */
  align-items: center;
  /* Holds the icon and title, position them next to each other */
  /* xl-sized title */ }
  #missing-repository-view .title-container {
    /* See comment about min-width on #cloning-repository-view,
     * this ensure that we're filling the x-space available but no more
     */
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--spacing); }
  #missing-repository-view .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-light); }
  #missing-repository-view .details {
    margin-top: var(--spacing);
    margin-bottom: var(--spacing);
    text-align: center; }
    #missing-repository-view .details .path {
      font-family: var(--font-family-monospace);
      background: var(--path-segment-background);
      border: var(--path-segment-background);
      border-radius: var(--border-radius);
      padding: var(--path-segment-padding); }
  #missing-repository-view button {
    width: 120px; }

.horizontal-rule {
  text-align: center;
  position: relative;
  margin-bottom: var(--spacing-half);
  width: 100%; }
  .horizontal-rule:after {
    border-bottom: var(--base-border);
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.6em; }
  .horizontal-rule .horizontal-rule-content {
    display: inline-block;
    background: var(--background-color);
    padding: 0 0.5em;
    position: relative;
    z-index: 1; }

hr.short-rule {
  border: none;
  border-top: var(--base-border);
  margin: var(--spacing-double) 0;
  width: 5em; }

dialog#about .dialog-content .row-component {
  justify-content: center; }

dialog#about .dialog-content p,
dialog#about .dialog-content h2 {
  text-align: center; }

dialog#about .dialog-content p.no-padding {
  margin-bottom: 0; }

dialog#about .dialog-content .version-text {
  cursor: pointer; }
  dialog#about .dialog-content .version-text .octicon {
    color: rgba(0, 0, 0, 0.5);
    height: 12px;
    margin-bottom: -1px;
    transition: color 0.4s;
    cursor: pointer; }
  dialog#about .dialog-content .version-text:hover .octicon {
    color: black; }

dialog#about .logo {
  justify-content: center; }
  dialog#about .logo svg {
    width: 64px;
    height: 64px; }

dialog#about .update-status .octicon.spin {
  align-self: center; }
  dialog#about .update-status .octicon.spin:not(:last-child) {
    margin-right: 3px; }

.avatar {
  border-radius: var(--border-radius); }

.avatar-container {
  line-height: 0; }

.call-to-action {
  justify-content: space-between; }
  .call-to-action button.action-button {
    flex-shrink: 0;
    flex-grow: 0;
    min-width: 120px;
    align-self: center;
    margin-left: var(--spacing); }

#acknowledgements {
  width: 600px; }
  #acknowledgements .dialog-content {
    height: 300px;
    overflow-x: hidden;
    overflow-y: auto; }
    #acknowledgements .dialog-content .license-text {
      font-family: var(--font-family-monospace);
      white-space: pre-wrap;
      margin-bottom: var(--spacing-double);
      cursor: text;
      user-select: text; }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
fieldset.vertical-segmented-control {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0; }
  fieldset.vertical-segmented-control legend {
    margin-bottom: var(--spacing-third);
    padding: 0 0 5px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  fieldset.vertical-segmented-control ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: var(--border-radius);
    overflow: hidden; }
    fieldset.vertical-segmented-control ul li {
      padding: var(--spacing);
      margin: 0;
      border-left: var(--base-border);
      border-right: var(--base-border);
      border-top: var(--base-border);
      border-bottom: none; }
      fieldset.vertical-segmented-control ul li:last-child {
        border-bottom: var(--base-border); }
      fieldset.vertical-segmented-control ul li.selected {
        color: var(--box-selected-active-text-color);
        background: var(--box-selected-active-background-color);
        border-color: var(--box-selected-active-background-color); }
        fieldset.vertical-segmented-control ul li.selected p {
          color: var(--box-selected-active-text-color); }
        fieldset.vertical-segmented-control ul li.selected + li {
          border-top-color: var(--box-selected-active-background-color); }
      fieldset.vertical-segmented-control ul li:hover:not(.selected) {
        background: var(--box-hover-background-color);
        color: var(--box-hover-text-color); }
        fieldset.vertical-segmented-control ul li:hover:not(.selected) p {
          color: var(--box-hover-text-color); }
      fieldset.vertical-segmented-control ul li .title {
        font-weight: var(--font-weight-semibold);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; }
      fieldset.vertical-segmented-control ul li p {
        color: var(--text-secondary-color); }

#blank-slate {
  display: flex;
  padding: calc(var(--spacing) * 6);
  align-items: center; }
  #blank-slate header {
    align-self: flex-start;
    margin-bottom: var(--spacing-quad); }
    #blank-slate header h1 {
      font-size: var(--font-size-xxl);
      font-weight: var(--font-weight-light); }
    #blank-slate header h1,
    #blank-slate header p {
      margin: 0; }
  #blank-slate .content {
    align-self: stretch;
    flex-direction: row;
    display: flex;
    flex-shrink: 0;
    flex-grow: 1; }
    #blank-slate .content > .content-pane {
      display: flex;
      flex-direction: column;
      align-self: stretch;
      flex-shrink: 0;
      max-width: 50%;
      width: 50%;
      flex-grow: 1; }
      #blank-slate .content > .content-pane:not(:last-child) {
        padding-right: var(--spacing); }
      #blank-slate .content > .content-pane:not(:first-child) {
        padding-left: var(--spacing); }
    #blank-slate .content ul.button-group {
      list-style-type: none;
      margin: 0;
      padding: 0;
      flex-grow: 1; }
      #blank-slate .content ul.button-group li {
        margin-bottom: var(--spacing);
        width: 100%; }
        #blank-slate .content ul.button-group li .button-component {
          width: 100%;
          padding: var(--spacing);
          height: auto;
          text-align: left;
          margin-bottom: var(--spacing);
          display: flex;
          flex-direction: row;
          align-items: center;
          /** These buttons need to wrap in high zoom levels */
          text-overflow: unset;
          white-space: normal;
          min-width: 0; }
          #blank-slate .content ul.button-group li .button-component .octicon {
            margin-right: var(--spacing);
            height: 32px;
            width: 32px; }
  #blank-slate .drag-drop-info {
    background: var(--tip-box-background-color);
    border: 2px dashed var(--tip-box-border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-double);
    display: flex;
    flex-direction: row; }
    #blank-slate .drag-drop-info .octicon {
      margin-right: var(--spacing); }
  #blank-slate .blankslate-graphic-bottom {
    position: absolute;
    right: var(--spacing);
    bottom: var(--spacing);
    width: auto;
    max-width: 40%;
    height: 40%;
    z-index: -1; }
  #blank-slate .blankslate-graphic-top {
    position: absolute;
    right: 80px;
    top: 40px;
    width: auto;
    max-width: 20%;
    height: 20%;
    z-index: -1; }
  #blank-slate .content-pane.left .tab-bar {
    margin-bottom: var(--spacing);
    border: var(--base-border);
    border-radius: var(--border-radius); }
    #blank-slate .content-pane.left .tab-bar .tab-bar-item {
      border-bottom: 0; }
  #blank-slate .content-pane.left .clone-selected-repository {
    margin-top: var(--spacing);
    width: 100%; }
  #blank-slate .content-pane.left .filter-list .filter-field-row {
    margin: 0;
    margin-bottom: var(--spacing); }
  #blank-slate .content-pane.left .filter-list .clone-repository-list-group-header {
    padding: var(--spacing); }
  #blank-slate .content-pane.left .filter-list .clone-repository-list-item {
    padding: 0 var(--spacing); }
  @media screen and (min-width: 1366px) {
    #blank-slate {
      zoom: 1.2; } }
  @media screen and (min-width: 1400px) {
    #blank-slate {
      zoom: 1.3; } }
  @media screen and (min-width: 1600px) {
    #blank-slate {
      zoom: 1.4; } }
  @media screen and (min-width: 1800px) {
    #blank-slate {
      zoom: 1.5; } }

.blankslate-image {
  width: 50%;
  min-width: 400px;
  max-width: 800px; }

.foldout .blankslate-image {
  width: 100%;
  min-width: auto; }

@media (max-height: 400px) {
  #blank-slate {
    padding: var(--spacing); }
    #blank-slate header {
      margin-bottom: var(--spacing); }
    #blank-slate .drag-drop-info {
      display: none; } }

#terms-and-conditions {
  width: 550px; }
  #terms-and-conditions .dialog-content {
    height: 250px;
    overflow-x: hidden;
    overflow-y: auto; }
    #terms-and-conditions .dialog-content p,
    #terms-and-conditions .dialog-content ol,
    #terms-and-conditions .dialog-content ul,
    #terms-and-conditions .dialog-content li,
    #terms-and-conditions .dialog-content h2,
    #terms-and-conditions .dialog-content h3 {
      cursor: text;
      user-select: text; }
    #terms-and-conditions .dialog-content a {
      cursor: pointer;
      user-select: text; }

.ref-component {
  font-style: normal;
  font-family: var(--font-family-monospace);
  background: var(--path-segment-background);
  border: var(--path-segment-background);
  border-radius: var(--border-radius);
  padding: var(--path-segment-padding);
  word-break: break-all; }

span.monospaced {
  font-family: var(--font-family-monospace); }

#initialize-lfs .dialog-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: var(--spacing); }
  #initialize-lfs .dialog-content ul li {
    padding-left: 0;
    margin-bottom: 0; }

.ci-status {
  height: 16px;
  flex-shrink: 0; }

.ci-status-pending {
  color: #dbab09; }

.ci-status-failure {
  color: #d73a49; }

.ci-status-success {
  color: #28a745; }

.toolbar-dropdown.open .pr-badge {
  background: var(--toolbar-badge-active-background-color); }

.toolbar-dropdown:not(.open) .pr-badge {
  background: var(--toolbar-badge-background-color); }

.pr-badge {
  --height: 18px;
  display: flex;
  flex-direction: row;
  height: var(--height);
  align-items: center;
  border-radius: var(--border-radius);
  border-width: 0;
  margin-right: var(--spacing);
  padding: var(--spacing-half); }
  .pr-badge .number {
    font-size: var(--font-size-sm);
    line-height: var(--height); }
  .pr-badge .ci-status {
    margin-left: var(--spacing-half); }

.toolbar-dropdown.open .ci-status-pending {
  color: #dbab09; }

.toolbar-dropdown.open .ci-status-failure {
  color: #d73a49; }

.toolbar-dropdown.open .ci-status-success {
  color: #28a745; }

.no-branches {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing); }
  .no-branches .title {
    font-weight: var(--font-weight-semibold);
    text-align: center; }
  .no-branches .subtitle {
    margin-left: var(--spacing-double);
    margin-right: var(--spacing-double);
    text-align: center;
    font-size: var(--font-size-sm); }
  .no-branches .create-branch-button {
    margin: var(--spacing-double);
    align-self: stretch; }
  .no-branches .protip {
    padding-left: var(--spacing-triple);
    padding-right: var(--spacing-triple);
    text-align: center;
    font-size: var(--font-size-sm); }

.CodeMirror-focused .CodeMirror-selected,
.CodeMirror.dialog-opened .CodeMirror-selected {
  background: Highlight; }

.CodeMirror-focused .CodeMirror-selectedtext,
.CodeMirror.dialog-opened .CodeMirror-selectedtext {
  color: HighlightText !important; }

.CodeMirror-lines * {
  cursor: text; }

.CodeMirror-selectedtext {
  color: inherit; }

.CodeMirror-selected {
  background: inherit; }

.CodeMirror-simplescroll-horizontal,
.CodeMirror-simplescroll-vertical {
  background: var(--box-alt-background-color); }
  .CodeMirror-simplescroll-horizontal div,
  .CodeMirror-simplescroll-vertical div {
    background: var(--scroll-bar-thumb-background-color);
    border: none; }

body.platform-win32 .CodeMirror-vscrollbar, body.platform-win32 .CodeMirror-hscrollbar {
  opacity: 0; }

body.platform-win32 .CodeMirror:hover .CodeMirror-vscrollbar,
body.platform-win32 .CodeMirror:hover .CodeMirror-hscrollbar {
  opacity: 1; }

body.platform-win32 .CodeMirror-scrollbar-filler {
  background: transparent; }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
.author-input-component.disabled .CodeMirror {
  background: var(--box-alt-background-color);
  color: var(--text-secondary-color); }

.author-input-component .CodeMirror {
  border: 1px solid var(--box-border-color);
  border-radius: var(--border-radius);
  background: var(--box-background-color);
  color: currentColor;
  font-size: var(--font-size);
  font-family: var(--font-family-sans-serif);
  height: var(--text-field-height);
  padding: 0 var(--spacing-half);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 0;
  height: auto; }
  .author-input-component .CodeMirror:focus {
    outline: none;
    border-color: var(--focus-color);
    box-shadow: 0 0 0 1px var(--text-field-focus-shadow-color); }
  .author-input-component .CodeMirror::-webkit-input-placeholder {
    color: var(--box-placeholder-color); }
  .author-input-component .CodeMirror .label {
    color: var(--text-secondary-color); }
  .author-input-component .CodeMirror .placeholder {
    color: var(--text-secondary-color);
    cursor: text; }
  .author-input-component .CodeMirror .handle {
    border-radius: 3px;
    border: 1px solid var(--co-author-tag-border-color);
    background: var(--co-author-tag-background-color);
    padding: 1px 1px;
    margin: 0px 2px; }
    .author-input-component .CodeMirror .handle.progress {
      background: transparent; }
    .author-input-component .CodeMirror .handle.error {
      background: var(--form-error-background);
      color: var(--form-error-text-color);
      border-color: var(--form-error-border-color); }
      .author-input-component .CodeMirror .handle.error svg {
        padding-bottom: 2px; }
    .author-input-component .CodeMirror .handle.progress svg, .author-input-component .CodeMirror .handle.error svg {
      height: 9px;
      margin-left: 3px;
      margin-right: 3px;
      vertical-align: middle;
      fill: currentColor; }

.author-input-component .CodeMirror-focused {
  outline: none;
  border-color: var(--focus-color);
  box-shadow: 0 0 0 1px var(--text-field-focus-shadow-color);
  border-top-width: 1px;
  border-top-style: solid;
  margin-top: -1px; }

.author-input-component .CodeMirror-scroll {
  max-height: 80px; }

.AvatarStack {
  position: relative;
  min-width: 26px;
  height: 20px; }
  .AvatarStack .AvatarStack-body {
    position: absolute; }
  .AvatarStack.AvatarStack--two {
    min-width: 36px; }
  .AvatarStack.AvatarStack--three-plus {
    min-width: 46px; }
  .AvatarStack.AvatarStack--small {
    height: 16px;
    min-width: 20px; }
    .AvatarStack.AvatarStack--small .avatar {
      width: 16px;
      height: 16px; }
    .AvatarStack.AvatarStack--small.AvatarStack--two {
      min-width: 25px; }
    .AvatarStack.AvatarStack--small.AvatarStack--three-plus {
      min-width: 30px; }
    .AvatarStack.AvatarStack--small .avatar.avatar-more::before, .AvatarStack.AvatarStack--small .avatar.avatar-more::after {
      height: 16px; }
    .AvatarStack.AvatarStack--small .avatar.avatar-more::before {
      width: 13px; }
    .AvatarStack.AvatarStack--small:hover .avatar {
      margin-right: 1px; }

.AvatarStack-body {
  display: flex;
  background: inherit; }
  .AvatarStack-body .avatar {
    position: relative;
    z-index: 2;
    display: flex;
    width: 20px;
    height: 20px;
    box-sizing: content-box;
    margin-right: -11px;
    background-color: inherit;
    box-shadow: 1px 0 0 #fff;
    border-radius: 2px;
    transition: margin 0.1s ease-in-out; }
    .AvatarStack-body .avatar:first-child {
      z-index: 3; }
    .AvatarStack-body .avatar:last-child {
      z-index: 1;
      box-shadow: none; }
    .AvatarStack-body .avatar img {
      border-radius: 2px; }
    .AvatarStack-body .avatar:nth-child(n + 4) {
      display: none;
      opacity: 0; }
  .AvatarStack-body:hover .avatar {
    margin-right: 3px; }
  .AvatarStack-body:hover .avatar:nth-child(n + 4) {
    display: flex;
    opacity: 1; }
  .AvatarStack-body:hover .avatar-more {
    display: none !important; }

.avatar.avatar-more {
  z-index: 1;
  margin-right: 0;
  background: #f6f8fa; }
  .avatar.avatar-more::before, .avatar.avatar-more::after {
    position: absolute;
    display: block;
    height: 20px;
    content: '';
    border-radius: 2px;
    outline: 1px solid #fff; }
  .avatar.avatar-more::before {
    width: 17px;
    background: #e1e4e8; }
  .avatar.avatar-more::after {
    width: 14px;
    background: #d1d5da; }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
.commit-attribution-component {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
.fancy-text-box-component {
  background: var(--box-background-color);
  display: flex;
  align-items: center;
  border: var(--base-border);
  border-radius: var(--border-radius); }
  .fancy-text-box-component .fancy-octicon {
    height: var(--text-field-height);
    padding: var(--spacing-half) 0 var(--spacing-half) 7px;
    border-right: none;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    opacity: 0.5;
    transition: opacity 0.2s ease; }
  .fancy-text-box-component.focused {
    outline: none;
    border-color: var(--focus-color);
    box-shadow: 0 0 0 1px var(--text-field-focus-shadow-color); }
    .fancy-text-box-component.focused .fancy-octicon {
      opacity: 1; }
  .fancy-text-box-component input {
    border-left: none;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    border: none;
    box-shadow: none; }
    .fancy-text-box-component input:focus {
      box-shadow: none; }
  .fancy-text-box-component.disabled {
    background: var(--box-alt-background-color); }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
.notification-banner + .compare-form {
  border-top: var(--base-border); }

.notification-banner {
  background: var(--notification-banner-background);
  border: var(--base-border);
  border-color: var(--notification-banner-border-color);
  border-radius: var(--border-radius);
  display: flex;
  padding: var(--spacing);
  position: relative; }
  .notification-banner .notification-icon {
    margin-right: var(--spacing-half); }
  .notification-banner-content {
    display: flex;
    flex-wrap: wrap; }
    .notification-banner-content p {
      flex-grow: 1;
      font-size: var(--font-size-sm);
      margin: 0;
      padding-right: var(--spacing-double); }
      .notification-banner-content p + p {
        margin-top: var(--spacing-half); }
  .notification-banner .close {
    flex-shrink: 0;
    border: 0;
    height: 16px;
    width: 16px;
    margin: 0 calc(var(--spacing) * -1) 0 auto;
    padding: 0;
    background: transparent;
    color: var(--text-secondary-color);
    cursor: pointer; }
    .notification-banner .close .octicon {
      pointer-events: none; }
    .notification-banner .close:hover {
      color: var(--text-color); }
    .notification-banner .close:focus {
      outline: 0; }
  .notification-banner .ref-component {
    background: var(--notification-ref-background);
    word-break: normal; }
  .notification-banner .close {
    position: absolute;
    margin: 0;
    top: var(--spacing);
    right: var(--spacing);
    text-align: center; }
    .notification-banner .close .octicon {
      height: 12px; }

.diverge-banner {
  margin: var(--spacing-half);
  overflow: hidden; }
  .diverge-banner-enter {
    max-height: 0;
    opacity: 0; }
    .diverge-banner-enter-active {
      max-height: 200px;
      opacity: 1;
      transition: all var(--undo-animation-duration) cubic-bezier(0, 0, 0.2, 1); }
  .diverge-banner-leave {
    max-height: 200px; }
    .diverge-banner-leave-active {
      max-height: 0;
      opacity: 1;
      transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1); }
      .diverge-banner-leave-active .diverge-banner {
        transform: translateX(-102%);
        opacity: 0;
        transition: all 180ms cubic-bezier(0.4, 0, 1, 1); }
  .diverge-banner-wrapper {
    overflow: hidden;
    box-shadow: inset 0 -1px var(--box-border-color); }

.notification-banner-content-body {
  margin-bottom: var(--spacing-half); }

.notification-banner-content .button-component {
  margin-top: var(--spacing-half);
  margin-right: var(--spacing-half); }

.merge-status-component .merge-status-icon-container {
  height: 20px;
  position: relative;
  text-align: center; }
  .merge-status-component .merge-status-icon-container .merge-status {
    background: var(--background-color);
    border-width: 0 var(--spacing-half);
    border: solid transparent;
    box-sizing: content-box;
    position: relative;
    z-index: 1; }

.merge-status-component .merge-status-loading {
  color: #dbab09; }

.merge-status-component .merge-status-conflicts {
  color: var(--color-conflicted); }

.merge-status-component .merge-status-invalid {
  color: #d73a49; }

.merge-status-component .merge-status-clean {
  color: #28a745; }

.merge-status-component .merge-message,
.merge-status-component .merge-info {
  margin-bottom: 0;
  text-align: center;
  color: var(--text-secondary-color); }
  .merge-status-component .merge-message strong,
  .merge-status-component .merge-info strong {
    color: var(--text-color); }

.merge-status-component .merge-message {
  padding-bottom: var(--spacing); }

dialog#merge .merge-info {
  margin-top: var(--spacing-half);
  margin-bottom: var(--spacing); }

dialog#merge .merge-status-component {
  margin-top: 0; }

dialog#merge .merge-status-icon-container:after {
  border-bottom: 0; }

dialog#merge .dialog-footer {
  padding-top: var(--spacing); }

.rebase-status-component .rebase-status-icon-container {
  height: 20px;
  position: relative;
  text-align: center; }
  .rebase-status-component .rebase-status-icon-container .rebase-status {
    background: var(--background-color);
    border-width: 0 var(--spacing-half);
    border: solid transparent;
    box-sizing: content-box;
    position: relative;
    z-index: 1; }

.rebase-status-component .rebase-status-loading {
  color: var(--status-pending-color); }

.rebase-status-component .rebase-status-conflicts {
  color: var(--color-conflicted); }

.rebase-status-component .rebase-status-invalid {
  color: var(--status-error-color); }

.rebase-status-component .rebase-status-clean {
  color: var(--status-success-color); }

.rebase-status-component .rebase-message,
.rebase-status-component .rebase-info {
  margin-bottom: 0;
  text-align: center;
  color: var(--text-secondary-color); }
  .rebase-status-component .rebase-message strong,
  .rebase-status-component .rebase-info strong {
    color: var(--text-color); }

.rebase-status-component .rebase-message {
  padding-bottom: var(--spacing); }

dialog#rebase .rebase-info {
  margin-top: var(--spacing-half);
  margin-bottom: var(--spacing); }

dialog#rebase .rebase-status-component {
  margin-top: 0; }

dialog#rebase .rebase-status-icon-container:after {
  border-bottom: 0; }

dialog#rebase .dialog-footer {
  padding-top: var(--spacing); }

.filter-list.clone-github-repo .no-items {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  margin: var(--spacing-double);
  width: 100%; }
  .filter-list.clone-github-repo .no-items .octicon {
    fill: var(--text-secondary-color);
    margin-right: var(--spacing-half); }
  .filter-list.clone-github-repo .no-items.loading {
    color: var(--text-secondary-color); }

:root {
  --color-new: #28a745;
  --color-deleted: #d73a49;
  --color-modified: #dbab09;
  --color-renamed: #0366d6;
  --color-conflicted: #f66a0a;
  --text-color: #24292e;
  --text-secondary-color: #6a737d;
  --background-color: #fff;
  --button-height: 25px;
  --button-background: #0366d6;
  --button-border-radius: 2px;
  --button-hover-background: #0372ef;
  --button-text-color: #fff;
  --button-focus-border-color: #005cc5;
  --link-button-color: #0366d6;
  --link-button-hover-color: #005cc5;
  --secondary-button-background: #fafbfc;
  --secondary-button-hover-background: #fff;
  --secondary-button-text-color: var(--text-color);
  --secondary-button-focus-shadow-color: rgba(225, 228, 232, 0.75);
  --secondary-button-focus-border-color: #d1d5da;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-family-monospace: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  /**
   * Font weight to use for semibold text
   */
  --font-weight-semibold: 600;
  /**
   * Font weight to use for light text
   */
  --font-weight-light: 300;
  --font-size: 12px;
  --font-size-sm: 11px;
  --font-size-md: 14px;
  --font-size-lg: 28px;
  --font-size-xl: 32px;
  --font-size-xxl: 42px;
  /** Extra small font size, be very conservative with the use of this */
  --font-size-xs: 9px;
  /**
   * Background color for custom scroll bars.
   * The color is applied to the thumb part of the scrollbar.
   *
   * Note: Only applies to win32 platforms
   */
  --scroll-bar-thumb-background-color: rgba(0, 0, 0, 0.2);
  /**
   * Background color for custom scroll bars in their active state.
   * The color is applied to the thumb part of the scrollbar.
   *
   * Note: Only applies to win32 platforms
   */
  --scroll-bar-thumb-background-color-active: rgba(0, 0, 0, 0.5);
  --box-background-color: var(--background-color);
  --box-alt-background-color: #f6f8fa;
  /**
   * Background color for skeleton or "loading" boxes
   */
  --box-skeleton-background-color: #e1e4e8;
  --skeleton-background-gradient: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
  /**
   * Border color for boxes.
   */
  --box-border-color: #e1e4e8;
  --box-border-accent-color: #0366d6;
  /**
   * Background color for selected boxes without keyboard focus
   */
  --box-selected-background-color: #ebeef1;
  /**
   * Text color for when a user hovers over a boxe with a
   * pointing device. Should not be used by boxes that doesn't
   * implement a hover state since this will conflict with
   * selection and active selection
   */
  --box-hover-text-color: #24292e;
  /**
   * Background color for when a user hovers over a boxe with a
   * pointing device. Should not be used by boxes that doesn't
   * implement a hover state since this will conflict with
   * selection and active selection
   */
  /**
   * Text color for selected boxes without keyboard focus
   */
  --box-selected-text-color: #24292e;
  /**
   * Border color for selected boxes without keyboard focus
   */
  --box-selected-border-color: #959da5;
  /**
   * Background color for selected boxes with active keyboard focus
   */
  --box-selected-active-background-color: #0366d6;
  /**
   * Text color for selected boxes with active keyboard focus
   */
  --box-selected-active-text-color: #fff;
  /**
   * Border color for selected boxes with active keyboard focus
   */
  --box-selected-active-border-color: #959da5;
  /**
   * Gradient used to indicate that content is overflowing, intended
   * for use when content can be expanded through other means than
   * scrolling.
   */
  --box-overflow-shadow-background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, white 90%, white 100%);
  /**
   * Placeholder color for input boxes
   */
  --box-placeholder-color: #6a737d;
  /**
   * Author input (co-authors)
   */
  --co-author-tag-background-color: #f1f8ff;
  --co-author-tag-border-color: #c8e1ff;
  /**
   * The height of the title bar area on Win32 platforms
   * If changed, update titleBarHeight in 'app/src/ui/dialog/dialog.tsx'
  */
  --win32-title-bar-height: 28px;
  --win32-title-bar-background-color: #24292e;
  /**
   * The height of the title bar area on darwin platforms
   * If changed, update titleBarHeight in 'app/src/ui/dialog/dialog.tsx'
  */
  --darwin-title-bar-height: 22px;
  --spacing: 10px;
  --spacing-double: calc(var(--spacing) * 2);
  --spacing-triple: calc(var(--spacing) * 3);
  --spacing-quad: calc(var(--spacing) * 4);
  --spacing-half: calc(var(--spacing) / 2);
  --spacing-third: calc(var(--spacing) / 3);
  --border-radius: 3px;
  --base-border: 1px solid var(--box-border-color);
  --shadow-color: rgba(71, 83, 95, 0.19);
  --base-box-shadow: 0 2px 7px var(--shadow-color);
  --toolbar-height: 50px;
  --toolbar-background-color: #24292e;
  --toolbar-border-color: #24292e;
  --toolbar-text-color: #fff;
  --toolbar-text-secondary-color: #d1d5da;
  --toolbar-button-color: var(--toolbar-text-color);
  --toolbar-button-background-color: transparent;
  --toolbar-button-border-color: black;
  --toolbar-button-secondary-color: var(--toolbar-text-secondary-color);
  --toolbar-button-hover-color: #fff;
  --toolbar-button-hover-background-color: #2f363d;
  --toolbar-button-hover-border-color: var(--toolbar-button-border-color);
  --toolbar-button-focus-background-color: #2f363d;
  --toolbar-button-active-color: var(--text-color);
  --toolbar-button-active-background-color: var(--background-color);
  --toolbar-button-active-border-color: var(--background-color);
  --toolbar-button-progress-color: #2f363d;
  --toolbar-button-focus-progress-color: #444d56;
  --toolbar-button-hover-progress-color: #444d56;
  --toolbar-dropdown-open-progress-color: #e1e4e8;
  /**
   * App menu bar colors (Windows/Linux only)
   */
  --app-menu-button-color: var(--toolbar-text-color);
  --app-menu-button-hover-color: var(--toolbar-button-hover-color);
  --app-menu-button-hover-background-color: var(--toolbar-button-hover-background-color);
  --app-menu-button-active-color: var(--toolbar-button-active-color);
  --app-menu-button-active-background-color: var(--toolbar-button-active-background-color);
  --app-menu-pane-color: var(--text-color);
  --app-menu-pane-secondary-color: var(--text-secondary-color);
  --app-menu-pane-background-color: var(--toolbar-button-active-background-color);
  --app-menu-divider-color: var(--box-border-color);
  /**
    * Background color for badges inside of toolbar buttons.
    * Examples of badges are the ahead/behind bubble in the
    * push/pull button and the PR badge in the branch drop
    * down button.
    */
  --toolbar-badge-background-color: #586069;
  --toolbar-badge-active-background-color: #e1e4e8;
  --tab-bar-height: 29px;
  --tab-bar-active-color: #0366d6;
  --tab-bar-background-color: #fff;
  --tab-bar-hover-background-color: #f6f8fa;
  /** Count bubble colors when used inside of a tab bar item */
  --tab-bar-count-color: var(--text-color);
  --tab-bar-count-background-color: #e1e4e8;
  /**
    * Badge colors when used inside of list items.
    * Example of this is the change indicators inside
    * of the repository list.
    */
  --list-item-badge-color: #2f363d;
  --list-item-badge-background-color: #e1e4e8;
  --list-item-selected-badge-color: #24292e;
  --list-item-selected-badge-background-color: #d1d5da;
  --list-item-selected-active-badge-color: #24292e;
  --list-item-selected-active-badge-background-color: #fff;
  --list-item-hover-background-color: #f6f8fa;
  /** Win32 has custom scrol bars, see _scroll.scss */
  --win32-scroll-bar-size: 10px;
  /**
   * The z-index for popups. Nothing should be higher, but other z-indexes can
   * be defined in terms of it.
   *
   * 10 seems arbitrary (because it is) but we have to go that high because
   * codemirror is all over the place with their z-indexes and uses at least
   * 0-6.
   */
  --popup-z-index: 10;
  --popup-overlay-z-index: calc(var(--popup-z-index) - 1);
  --foldout-z-index: calc(var(--popup-z-index) - 2);
  /**
   * Toast notifications are shown temporarily for things like the zoom
   * percentage changing or the app toggling between full screen and normal
   * window mode.
   */
  --toast-notification-color: #fafbfc;
  --toast-notification-background-color: rgba(36, 41, 46, 0.6);
  --tip-box-background-color: rgba(3, 102, 214, 0.06);
  --tip-box-border-color: #c8e1ff;
  /** The highlight color used for focus rings and focus box shadows */
  --focus-color: #0366d6;
  /**
   * Variables for form elements
   */
  --text-field-height: 25px;
  --text-field-focus-shadow-color: rgba(3, 102, 214, 0.25);
  /**
   * Blankslate actions, see `BlankslateAction` component.
   */
  --primary-blankslate-action-background: #f1f8ff;
  --primary-blankslate-action-border-color: #c8e1ff;
  /**
   * Diff view
   */
  --diff-line-padding-y: 2px;
  --diff-text-color: #24292e;
  --diff-border-color: #e1e4e8;
  --diff-gutter-color: #e1e4e8;
  --diff-gutter-background-color: var(--background-color);
  --diff-line-number-color: #444d56;
  --diff-line-number-column-width: 50px;
  --diff-selected-background-color: #2188ff;
  --diff-selected-border-color: #005cc5;
  --diff-selected-gutter-color: #005cc5;
  --diff-selected-text-color: var(--background-color);
  --diff-add-background-color: #e6ffed;
  --diff-add-border-color: #85e89d;
  --diff-add-gutter-color: #85e89d;
  --diff-add-gutter-background-color: #cdffd8;
  --diff-add-inner-background-color: #acf2bd;
  --diff-add-text-color: var(--diff-text-color);
  --diff-delete-background-color: #ffeef0;
  --diff-delete-border-color: #fdaeb7;
  --diff-delete-gutter-color: #fdaeb7;
  --diff-delete-gutter-background-color: #ffdce0;
  --diff-delete-inner-background-color: #fdb8c0;
  --diff-delete-text-color: var(--diff-text-color);
  --diff-hunk-background-color: #f1f8ff;
  --diff-hunk-border-color: #c8e1ff;
  --diff-hunk-gutter-color: #afd3ff;
  --diff-hunk-gutter-background-color: #dbedff;
  --diff-hunk-text-color: #6a737d;
  --diff-hover-background-color: #79b8ff;
  --diff-hover-border-color: #2188ff;
  --diff-hover-gutter-color: #2188ff;
  --diff-hover-text-color: var(--background-color);
  --diff-add-hover-background-color: #85e89d;
  --diff-add-hover-border-color: #34d058;
  --diff-add-hover-gutter-color: #34d058;
  --diff-add-hover-text-color: var(--text-color);
  --diff-delete-hover-background-color: #fdaeb7;
  --diff-delete-hover-border-color: #f97583;
  --diff-delete-hover-gutter-color: #f97583;
  --diff-delete-hover-text-color: var(--text-color);
  --syntax-variable-color: #6f42c1;
  --syntax-alt-variable-color: #24292e;
  --syntax-keyword-color: #d73a49;
  --syntax-atom-color: #005cc5;
  --syntax-string-color: #032f62;
  --syntax-qualifier-color: #6f42c1;
  --syntax-type-color: #d73a49;
  --syntax-comment-color: #6a737d;
  --syntax-tag-color: #22863a;
  --syntax-attribute-color: #6f42c1;
  --syntax-link-color: #032f62;
  --syntax-header-color: #0000ff;
  --undo-animation-duration: 500ms;
  --error-color: #d73a49;
  --form-error-background: #ffdce0;
  --form-error-border-color: #fdaeb7;
  --form-error-text-color: #9e1c23;
  /** Overlay is used as a background for both modals and foldouts */
  --overlay-background-color: rgba(0, 0, 0, 0.4);
  /** Dialog */
  --dialog-warning-color: #f9c513;
  --dialog-error-color: #d73a49;
  /** Inline paths and code */
  --path-segment-background: #f1f8ff;
  --path-segment-padding: var(--spacing-third);
  /** Diverging notification banner colors */
  --notification-banner-background: #f1f8ff;
  --notification-banner-border-color: #c8e1ff;
  --notification-ref-background: rgba(255, 255, 255, 0.75);
  --easing-ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --easing-ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --easing-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  /** rebase progress bar */
  --dialog-rebase-progress-background: #28a745;
  /** merge/rebase status indicators */
  --status-pending-color: #dbab09;
  --status-error-color: #d73a49;
  --status-success-color: #28a745; }

::backdrop {
  --overlay-background-color: rgba(0, 0, 0, 0.4); }

#stash-diff-viewer {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0; }
  #stash-diff-viewer .header {
    display: flex;
    flex-direction: column;
    border-bottom: var(--base-border);
    padding: var(--spacing-triple) var(--spacing-double); }
    #stash-diff-viewer .header h3 {
      font-weight: var(--font-weight-light);
      font-size: var(--font-size-xl);
      line-height: 1;
      margin-bottom: var(--spacing); }
    #stash-diff-viewer .header .row {
      display: flex;
      align-items: center;
      margin-top: var(--spacing); }
    #stash-diff-viewer .header .button-group {
      display: flex; }
      #stash-diff-viewer .header .button-group button {
        margin-right: var(--spacing); }
    #stash-diff-viewer .header .explanatory-text {
      display: flex;
      align-items: center;
      flex-grow: 1;
      margin-left: var(--spacing-half); }
      #stash-diff-viewer .header .explanatory-text .text {
        flex-grow: 1; }
      #stash-diff-viewer .header .explanatory-text .octicon {
        fill: var(--text-secondary-color);
        margin: 0 var(--spacing-half);
        flex-shrink: 0; }
  #stash-diff-viewer .file-list {
    display: flex;
    flex: 1;
    border-right: var(--base-border); }

/**
 * Enable end-of-line text truncation when text overflows
 * the horizontal boundary of its container.
 */
/**
 * Draw a checkboard in the background
 * (useful to see the transparent part of an image)
 */
.commit-details {
  display: flex;
  flex-direction: row;
  flex: 1; }
  .commit-details .fill-window {
    border-right: var(--base-border); }
  .commit-details .panel {
    display: flex;
    flex: 1; }
    .commit-details .panel.empty, .commit-details .panel.renamed, .commit-details .panel.binary {
      justify-content: center;
      align-items: center; }
    .commit-details .panel.large-diff {
      margin: var(--spacing-double);
      text-align: center;
      justify-content: initial; }
      .commit-details .panel.large-diff .blankslate-image {
        max-height: 150px; }


/*# sourceMappingURL=renderer.css.map*/