/**
 * @provides differential-core-view-css
 */

.differential-primary-pane {
  margin-top: -20px;
}

.differential-panel {
  padding: 16px;
}

.differential-panel h1 {
  border-bottom: 1px solid #aaaa99;
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.differential-content-hidden {
  margin: 0 0 24px 0;
}


/**
 * @provides differential-changeset-view-css
 * @requires phui-inline-comment-view-css
 */

.differential-changeset {
  position: relative;
  overflow-x: auto;

  /* Fixes what seems to be a layout bug in Firefox which causes scrollbars,
     to appear unpredictably, see discussion in T7690. */
  overflow-y: hidden;
}

.device-phone .differential-changeset {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

.differential-diff {
  background: #fff;
  width: 100%;
  border-top: 1px solid #BFCFDA;
  border-bottom: 1px solid #BFCFDA;
  table-layout: fixed;
}

.differential-diff.diff-2up {
  min-width: 780px;
}

.differential-diff col.num {
  width: 45px;
}

.device .differential-diff.diff-1up col.num {
  width: 32px;
}

.differential-diff.diff-2up col.left,
.differential-diff.diff-2up col.right {
  width: 49.25%;
}

.differential-diff.diff-1up col.unified {
  width: 99.5%;
}

.differential-diff col.copy {
  width: 0.5%;
}

.differential-diff col.cov {
  width: 1%;
}

.differential-diff td {
  vertical-align: top;
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 1px 8px;
}

.differential-diff td.diff-flush {
  padding-top: 0;
  padding-bottom: 0;
}

.device .differential-diff td {
  padding: 1px 4px;
}

.prose-diff {
  padding: 12px 0;
  white-space: pre-wrap;
  color: #74777D;
}

.prose-diff-frame {
  padding: 12px;
}

.prose-diff span.old,
.prose-diff span.new {
  padding: 0 2px;
}

.prose-diff span.old,
.prose-diff span.new {
  color: #4B4D51;
}

.differential-changeset-immutable .differential-diff td {
  cursor: auto;
}

.differential-diff td.old {
  background: rgba(251, 175, 175, .3);
}

.differential-diff td.new {
  background: rgba(151, 234, 151, .3);
}

.differential-diff td.old-rebase {
  background: #ffeeee;
}

.differential-diff td.new-rebase {
  background: #eeffee;
}

.differential-diff td.old span.bright,
.differential-diff td.old-full,
.prose-diff span.old {
  background: rgba(251, 175, 175, .7);
}


.differential-diff td.new span.bright,
.differential-diff td.new-full,
.prose-diff span.new {
  background: rgba(151, 234, 151, .6);
}

.differential-diff td span.depth-out,
.differential-diff td span.depth-in {
  padding: 2px 0;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: left center;
  position: relative;
  left: -8px;
  opacity: 0.5;
}

.differential-diff td span.depth-out {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0NzRjMzA5Yi05YmYwLTQ2MTYtYjA4MS1iZWI1NzAyYjFhNjMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjgwM0EzNkQyOTY2MTFFOThDMkQ4MjU4NjkzRDU3RjUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjgwM0EzNkMyOTY2MTFFOThDMkQ4MjU4NjkzRDU3RjUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpiYWEzMzA0OC1kYzQyLTRhYjctODg0ZS1kYjFiNTVkZDg1OTciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDc0YzMwOWItOWJmMC00NjE2LWIwODEtYmViNTcwMmIxYTYzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+IUrhVAAAAadJREFUeNrsmSuPwzAMgJfTgSssHSw9ODp4dHD04P2owdHBHRwcPVhaOFpY2DmSJx2Yk9iNE02yJWuTOqv+Er+SuXmeV68sb6sXFwMwAAMwAANYJO+pP3TOLXnPJ+gH6B/HKKXJltiBL9C90K46gHd8y7RpQX9w1/KFkMAJ7/yaadehXQM61gL47wRHtqlhowkgcaJB4E61CiXIDnRDPLsQFWiNzrdPnhULodAKTqAn0IEorVR18rDnEgChFbyh8yNRIqnq5G36EiEUWsEeHeHslgf+xU/1HAglq4/3K3O3KGAVgD3RZKTxfuaOGFKAUHOSxPuINrclScgB2BHOh7afcr7HeJ+KTaOEDJHYbQQ2Rc8DnWDSlI4az8f81IstOA9Ic4BK+mgOpPjGAXh8/c7cdckqpAUQ66TZ+oAmQJFOrA2gPguVAFCdRksBxKqNNC8G8O1Y8lB/QkepjrwhwuxA7FBb41bCr/KROSJMaHOt0Ymp8eIgGNIuAni1e6ExEBpZ4bUvtiSh8YBPOlbmrEKx46fK3aizfykNwAAMwAAMwAAqyl2AAQDTcqQGc21cVQAAAABJRU5ErkJggg==);
  background-color: rgba(251, 175, 175, .7);
}

.differential-diff td span.depth-in {
  background-position: 1px center;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0NzRjMzA5Yi05YmYwLTQ2MTYtYjA4MS1iZWI1NzAyYjFhNjMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0IyMjI0RjQyOTY2MTFFOThDMkQ4MjU4NjkzRDU3RjUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjgwM0EzNzAyOTY2MTFFOThDMkQ4MjU4NjkzRDU3RjUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpiYWEzMzA0OC1kYzQyLTRhYjctODg0ZS1kYjFiNTVkZDg1OTciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDc0YzMwOWItOWJmMC00NjE2LWIwODEtYmViNTcwMmIxYTYzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+TM8W3AAAAZ9JREFUeNrsma+zwjAMx1cOg5ydnH0Si0QOOYt8fxgWiUVikbOTs5N7bnR3qVu6JjSF3UvvqiC7fPLjmwzMOI7Zms8mW/lRAAVQAAVQgP8NsF36gjGG+sy9vX/2NlynKNtBSAaODB9qpp1ICf3Y+2tvTnz2wd7zt/RAARAl8fklE16kiXcQUWppcOHFVMiVxo4Bf/gEQO8pjWLms6e9d48g1DEBzJJkgYyeQB7nzhWRzBKcnctUC3bDuzIaCuDUCIveA4l6DjYFktkJoksF4BqyQhzyRbWGAARlUBJgySE0qtDAx5AMpgBwK8Mpcl9cUgK4kqqRQdUACKUvpsxdrU99KgCn8RVSUpOk3jz70pxNa326pFynB4h0S7Tj2NDX6cApWyGrwrCwsZafBvD1AGc2dJ6Siw4QW4WwphcBiD0H7pAx8RJKMomlAJLtQhIASbfR2ABnRO649f6kKs27ADkxgnuJZo2pQhwnuNM6KgDXiQ7s+kzgbIWdYA2n2ACN5yXddx5MO5GXeuqKkey3UaN/syqAAiiAAijAms9LgAEA3hKjj/1hFzEAAAAASUVORK5CYII=);
  background-color: rgba(151, 234, 151, .6);
}


.differential-diff td.copy {
  min-width: 0.5%;
  width: 0.5%;
  padding: 0;
  background: #F8F9FC;
}

.differential-diff td.new-copy,
.differential-diff td.new-copy span.bright {
  background: #f1c40f;
}

.differential-diff td.new-move,
.differential-diff td.new-move span.bright {
  background: #fdf5d4;
}

.differential-diff td.comment {
  background: #dddddd;
}

.differential-diff .inline > td {
  padding: 0;
}

/* Specify line number behaviors after other behaviors because line numbers
should always have a boring grey background. */

.differential-diff td.n {
  text-align: right;
  padding: 1px 6px 1px 0;
  vertical-align: top;
  background: #F8F9FC;
  color: #6B748C;
  cursor: pointer;
  border-right: 1px solid #DDE8EF;
  overflow: hidden;
}

.differential-diff td + td.n {
  border-left: 1px solid #DDE8EF;
}

.differential-diff td.n::before {
  content: attr(data-n);
}

.differential-diff td.show-context-line.n {
  cursor: auto;
}

.differential-diff td.cov {
  padding: 0;
}

td.cov-U {
  background: #dd8866;
}

td.cov-C {
  background: #66bbff;
}

td.cov-N {
  background: #ddeeff;
}

td.cov-X {
  background: #aa00aa;
}

td.cov-I {
  background: #F7F7F7;
}

.differential-diff td.source-cov-C,
.differential-diff td.source-cov-C span.bright {
  background: #cceeff;
}

.differential-diff td.source-cov-U,
.differential-diff td.source-cov-U span.bright {
  background: #ffbb99;
}

.differential-diff td.source-cov-N,
.differential-diff td.source-cov-N span.bright {
  background: #f3f6ff;
}

.differential-diff td.show-more,
.differential-diff td.show-context-line,
.differential-diff td.show-context,
.differential-diff td.differential-shield {
  background: #F8F9FC;
  padding: 12px 0;
  border-top: 1px solid #DDE8EF;
  border-bottom: 1px solid #DDE8EF;
}

.device .differential-diff td.show-more,
.device .differential-diff td.show-context-line,
.device .differential-diff td.show-context,
.device .differential-diff td.differential-shield {
  padding: 6px 0;
}

.differential-diff td.show-more,
.differential-diff td.differential-shield {
  font: 13px 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  white-space: normal;
}

.differential-diff td.show-more {
  text-align: center;
  color: #6B748C;
}

.differential-diff td.show-context-line {
  padding-right: 6px;
}

.differential-diff td.show-context-line.left-context {
  border-right: none;
}

.differential-diff td.show-context {
  padding-left: 14px;
}

.differential-diff td.differential-shield {
  text-align: center;
}

.differential-diff td.differential-shield a {
  font-weight: bold;
}

.differential-diff td.diff-image-cell {
  background-color: transparent;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBJREFUeNpiPHPmDANuoK6ujkeWiYECMKp5ZGhm/Pz5Mx7pmzdvjgbYqGZKNAMEGABjKghkVRD8dQAAAABJRU5ErkJggg==);
  padding: 8px;
}

.device-desktop .differential-diff .diff-image-cell:hover {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAC9JREFUeNpiNDExYcANbt68iUeWiYECMKp5ZGhm5OXlxSOtrq4+GmCjminRDBBgAHqwA+pfb+PGAAAAAElFTkSuQmCC);
}

.differential-image-stage {
  overflow: auto;
}

.differential-meta-notice {
  border-top: 1px solid #c9b8a8;
  border-bottom: 1px solid #c9b8a8;
  background-color: #fdf3da;
  padding: 12px;
}

.differential-meta-notice + .differential-diff {
  border-top: none;
}

.differential-changeset .differential-file-icon-header {
  font-size: 15px;
  padding: 18px 0 20px 12px;
  margin-top: 4px;
  line-height: 20px;
  color: #000;
  cursor: pointer;
}

.differential-changeset .differential-file-icon-header
  .differential-changeset-path-name {
  cursor: auto;
}

.device-phone .differential-changeset .differential-file-icon-header {
  word-break: break-word;
  margin-right: 8px;
}

.differential-loading {
  border-top: 1px solid #c9b8a8;
  border-bottom: 1px solid #c9b8a8;
  background-color: #fdf3da;
  padding: 12px;
  text-align: center;
}

.differential-file-icon-header .phui-icon-view {
  display: inline-block;
  margin: 0 6px 2px 0;
  vertical-align: middle;
  font-size: 14px;
}

.device-phone .differential-file-icon-header .phui-icon-view {
  display: none;
}

.differential-changeset-buttons {
  float: right;
  margin-top: 16px;
  margin-right: 12px;
}

.device-phone .differential-changeset-buttons .button .phui-button-text {
  visibility: hidden;
  width: 0;
  margin-left: 8px;
}

.differential-property-table {
  margin: 12px;
  background: #F7F7F7;
  border: 1px solid #BFCFDA;
  border-bottom: 1px solid #8C98B8;
}

.differential-property-table td em {
  color: #92969D;
}

.differential-property-table td.oval {
  background: #ffd0d0;
  width: 50%;
}

.differential-property-table td.nval {
  background: #d0ffd0;
  width: 50%;
}

tr.differential-inline-hidden {
  display: none;
}

tr.differential-inline-loading {
  opacity: 0.5;
}

.differential-review-stage {
  position: relative;
}

.diff-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #C7CCD9;
  padding: 8px 18px;
  vertical-align: middle;
  font-weight: bold;
  font-size: 14px;
  line-height: 28px;
}

.diff-banner-path {
  color: #74777D;
}

.diff-banner-buttons .button {
  margin-left: 8px;
}

.diff-banner-has-unsaved,
.diff-banner-has-unsubmitted,
.diff-banner-has-draft-done {
  background: #fdf3da;
}

.diff-banner-buttons {
  float: right;
}

/* In Firefox, making the table unselectable and then making cells selectable
does not work: the cells remain unselectable. Narrowly mark the cells as
unselectable. */

.differential-diff.copy-l > tbody > tr > td,
.differential-diff.copy-r > tbody > tr > td {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.differential-diff.copy-l > tbody > tr > td:nth-child(2) {
  -moz-user-select: auto;
  -ms-user-select: auto;
  -webkit-user-select: auto;
  user-select: auto;
}

.differential-diff.copy-l > tbody > tr > td.show-more:nth-child(2) {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.differential-diff.copy-r > tbody > tr > td:nth-child(5) {
  -moz-user-select: auto;
  -ms-user-select: auto;
  -webkit-user-select: auto;
  user-select: auto;
}

.differential-diff.copy-l > tbody > tr.inline > td,
.differential-diff.copy-r > tbody > tr.inline > td {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.changeset-content-hidden .differential-file-icon-header {
  background: #F7F7F7;
  color: #74777D;
}

.changeset-selected .differential-file-icon-header {
  background: #fdf5d4;
  color: #000;
}

.differential-diff tr td.inline-hover {
  background: #fdf3da;
}

.differential-diff tr td.inline-hover-bright {
  background: #fdf320;
}

.differential-diff tr td.n.inline-hover {
  background: #f1c40f;
}

.inline-hover-container {
  position: absolute;
  color: #92969D;
  background: #fdf5d4;
}

.inline-hover-text {
  padding-top: 2px;
  padding-bottom: 2px;
}

.inline-hover-text-bright {
  color: #000;
  background: #fdf320;
}

.differential-diff td.inline-hover span.bright {
  background: transparent;
}


/**
 * @provides differential-revision-history-css
 */

.differential-update-history-footer {
  text-align: right;
  vertical-align: middle;
  padding: 4px 8px;
  border-top: 1px solid #BFCFDA;
  background: #F8F9FC;
}

.differential-update-history-footer label {
  margin-right: 12px;
  color: #74777D;
}

.differential-update-history-footer select {
  margin-left: 8px;
}

.device .differential-update-history-footer label {
  display: block;
  margin-right: 0;
  margin-bottom: 4px;
}

.differential-update-history-radio {
  padding: 0 8px;
}

.aphront-table-view td.differential-update-history-old {
  background: #f9d0d0;
}

.aphront-table-view td.differential-update-history-new {
  background: #d0ffd0;
}

.aphront-table-view
  .differential-update-history-old-now
  td.differential-update-history-old,
.aphront-table-view
  .alt-differential-update-history-old-now
  td.differential-update-history-old {
  background: #ffaaaa;
}

.aphront-table-view
  .differential-update-history-new-now
  td.differential-update-history-new,
.aphront-table-view
  .alt-differential-update-history-new-now
  td.differential-update-history-new {
  background: #aaffaa;
}

.lintunit-star {
  text-align: center;
  padding: 0 16px;
}


/**
 * @provides differential-revision-list-css
 */


.revision-age-fresh,
.revision-age-stale,
.revision-age-old {
  margin: -4px -8px;
  padding: 4px 8px;
}

.revision-age-fresh {
  background: #dff1d8;
}

.revision-age-stale {
  background: #fcf9e2;
}

.revision-age-old {
  background: #f3dede;
}


/**
 * @provides differential-table-of-contents-css
 */

.differential-toc-meta {
  color: #92969D;
  padding-top: 2px;
}

table.aphront-table-view td.differential-toc-char {
  padding-right: 0;
  font-weight: bold;
  color: #464C5C;
}

table.aphront-table-view td.differential-toc-prop {
  padding-left: 0;
  padding-right: 0;
  font-weight: bold;
  color: #464C5C;
}

table.aphront-table-view td.differential-toc-ftype {
  padding-left: 0;
  font-weight: bold;
  color: #464C5C;
}

.differential-toc-file {
  color: #92969D;
}

.device-phone .differential-toc-file {
  word-break: break-word;
}

.differential-toc-cov {
  color: #464C5C;
  font-weight: bold;
}

.differential-toc-reveal-all,
.differential-toc-edit-all {
  float: right;
  margin-left: 4px;
}

.diff-star-none {
  color: #74777D;
}

.diff-star-okay {
  color: #e67e22;
}

/* TODO: 'warn' and 'fail' are both red, but we can't make 'warn' yellow since
   'okay' is a "gold star". */
.diff-star-warn {
  color: #c0392b;
}

.diff-star-fail {
  color: #c0392b;
}

.diff-star-skip {
  color: #6e5cb6;
}

.differential-toc table td em {
  color: #74777D;
}

.differential-toc .button {
  margin: 8px 0px 0px 8px;
}

.differential-mcoverage-loading {
  color: #92969D;
}

.differential-toc-buttons {
  border-top: 1px solid #DDE8EF;
  padding: 8px;
}

.differential-harbormaster-table-view {
  margin: 4px 0;
  border: 1px solid #DDE8EF;
}

.diff-toc-path .phui-icon-view {
  margin-right: 2px;
  text-align: center;
  width: 20px;
  display: inline-block;
}

table.aphront-table-view-compact td {
  padding: 3px 8px;
}

td.diff-toc-path td {
  padding: 0;
  color: #74777D;
}

.diff-toc-path div.diff-path-component-new {
  padding: 0 2px;
  box-shadow: inset 0 -2px rgba(151, 234, 151, .6);
  margin: 0 2px;
}

.diff-toc-path div.diff-path-component-old {
  padding: 0 2px;
  box-shadow: inset 0 -2px rgba(251, 175, 175, .7);
  margin: 0 2px;
}

.diff-toc-path a {
  color: #464C5C;
}

td.diff-toc-path .diff-path-old td {
  color: #92969D;
}

.diff-toc-low-importance-row,
.alt-diff-toc-low-importance-row {
  opacity: 0.5;
}


/**
 * @provides differential-revision-comment-css
 */

/*  Spooky haunted panel which floats on the bottom of the screen.
    Haunt modes are:

      - Mode 1: Just the comment box.
      - Mode 2: Comment box, comment preview, and inline comment previews.
*/
.differential-haunt-mode-1 .differential-add-comment-panel,
.differential-haunt-mode-2 .differential-add-comment-panel {
  background-color: #fff;
  position: fixed;
  width: 100%;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: auto;
  max-height: 375px;
  margin: 0;

  box-shadow: 0 0 4px #000;
  -webkit-box-shadow: 0 0 4px #000;
  -moz-box-shadow: 0 0 4px #000;
}

.differential-haunt-mode-1 .differential-add-comment-panel .phui-box,
.differential-haunt-mode-2 .differential-add-comment-panel .phui-box {
  margin: 0;
  border-width: 0;
}

.differential-haunt-mode-2 .differential-add-comment-panel {
  max-height: 75%;
}

.differential-haunt-mode-1 .differential-add-comment-panel .phui-header-shell,
.differential-haunt-mode-2 .differential-add-comment-panel .phui-header-shell {
  display: none;
}

.differential-haunt-mode-1 .aphront-panel-preview {
  display: none;
}

.differential-haunt-mode-1 {
  padding-bottom: 250px;
}


/**
 * @provides differential-revision-add-comment-css
 */

#inline-comment-preview {
  margin-left: 62px;
  width: 640px;
}

#inline-comment-preview .differential-inline-comment {
  margin: 12px 0;
}

#inline-comment-preview
  .differential-inline-comment + .differential-inline-comment {
  margin: 0 0 12px 0;
}


/**
 * @provides phabricator-object-selector-css
 * @requires aphront-dialog-view-css
 */

.device-desktop .phabricator-object-selector-dialog {
  width: 860px;
}

.phabricator-object-selector-dialog .aphront-dialog-body {
  padding: 0 12px;
}

.phabricator-object-selector-search {
  width: 100%;
  background: #F8F9FC;
  border-bottom: 1px solid #DDE8EF;
}

.phabricator-object-selector-search td {
  padding: 4px 8px;
  vertical-align: middle;
}

td.phabricator-object-selector-search-text {
  width: 100%;
}

.phabricator-object-selector-row:hover {
  background-color: #eceff5;
}

.phabricator-object-selector-row:hover a {
  text-decoration: none;
  color: #000;
}

.phabricator-object-selector-search-text input {
  width: 100%;
  border-radius: 14px;
  padding: 4px 8px;
  height: 26px;
  margin: 2px 0;
}

.phabricator-object-selector-popicon {
  display: inline-block;
  margin-top: 4px;
}

.phabricator-object-selector-results {
  position: relative;
  height: 24em;
  overflow-y: scroll;
  overflow-x: hidden;
}

.phabricator-object-selector-handle {
  width: 100%;
}

.phabricator-object-selector-handle + .phabricator-object-selector-handle {
  border-top: 1px solid #DDE8EF;
}

.phabricator-object-selector-handle td {
  padding: 4px 8px;
}

.phabricator-object-selector-handle th {
  font-weight: bold;
  vertical-align: middle;
  width: 100%;
  overflow: hidden;
}

.phabricator-object-selector-handle th a {
  display: block;
  padding: 4px 0;
}

.phabricator-object-selector-header {
  font-weight: bold;
  text-transform: uppercase;
  color: #464C5C;
  background-color: #F7F7F7;
  border-bottom: 1px solid #DDE8EF;
  padding: 6px 8px;
}

.phabricator-object-selector-attach-explicit {
  padding: 4px;
  background: #F7F7F7;
  border: solid #8C98B8;
  border-width: 1px 0px;
}

.phabricator-object-selector-current {
  border-top: 1px solid #DDE8EF;
}

.object-selector-nothing {
  padding: 1em;
  color: #92969D;
  text-align: center;
}

.phabricator-object-selector-instructions {
  font-size: 11px;
  color: #74777D;
  margin-top: 1.25em;
}


/**
 * @provides phabricator-content-source-view-css
 */

.phabricator-content-source-view {
  color: #92969D;
}


/**
 * @provides inline-comment-summary-css
 */

.transaction-comment + .phabricator-inline-summary-table {
  margin-top: 8px;
}

.phabricator-inline-summary-table {
  border-collapse: collapse;
  border-style: hidden;
  width: 100%;
  margin-top: -16px;
}

.phabricator-inline-summary-table .inline-comment-summary-table-header {
  font-weight: bold;
  padding: 16px 1px 8px;
  color: #000;
  border-bottom: 1px solid #DDE8EF;
}

.phabricator-inline-summary-table .inline-table-dolumn  {
  padding: 4px 8px;
  white-space: nowrap;
  color: #464C5C;
  background: #fff;
}

.phabricator-inline-summary-table td.inline-line-number {
  padding: 0;
  width: 100px;
  white-space: nowrap;
  background: #F7F7F7;
  font-family: "Menlo", "Consolas", monospace;
  font-size: 11px;
  color: #6B748C;
  border-right: 1px solid #DDE8EF;
}

.phabricator-inline-summary-table td.inline-which-diff {
  color: #74777D;
  width: 120px;
}

.phabricator-inline-summary-table td.inline-summary-content {
  vertical-align: top;
  white-space: normal;
}

/* NOTE: These two rules provide a larger hit target for clicking line numbers
   (by letting you click the entire cell) and a visual indicator that you're on
   target (by highlighting the entire cell). */

.phabricator-inline-summary-table td.inline-line-number a.num {
  padding: 4px 8px;
  display: block;
  color: #6B748C;
}

.phabricator-inline-summary-table td.inline-line-number:hover a.num {
  background: rgba(150,150,150,.1);
  text-decoration: none;
  color: #464C5C;
}

.phui-timeline-core-content .phabricator-inline-summary:first-child {
  border: none;
  margin-top: 0;
  padding-top: 0;
}


/**
 * @provides phui-inline-comment-view-css
 */

.differential-diff td.anchor-target {
  background: #fdf5d4;
}

/*  In the document, the anchor is positioned inside the inline comment, but
    this makes the browser jump into the comment so the top isn't visible.
    Instead, artificially position it a bit above the comment so we'll jump a
    bit before the comment. This allows us to see the entire comment (and
    generally the commented-on lines, at least in the case of one or two-line
    comments) after the jump.
*/
.differential-inline-comment-anchor {
  position: absolute;
  display: block;
  margin-top: -72px;
}

.differential-inline-comment-content {
  overflow: auto;
}

.differential-inline-comment,
.differential-inline-comment-edit {
  font: 13px 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  white-space: normal;
  border-radius: 3px;
  margin: 8px 12px;
  background: #fff;
  border: 1px solid #8C98B8;
}

.device .differential-inline-comment {
  margin: 4px;
}

.inline-state-is-draft {
  border: 1px dashed #A1A6B0;
}

.differential-inline-comment-head {
  font-weight:  bold;
  color: #464C5C;
  padding: 4px 5px 4px 8px;

  background: #F8F9FC;
  border-bottom: 1px solid #8C98B8;
}

.differential-inline-comment-content {
  padding: 12px;
}

.inline-state-is-draft .differential-inline-comment-head {
  border-bottom: 1px dashed #C7CCD9;
  background-color: #F7F7F7;
}

/* Tighten up spacing on replies */
.differential-inline-comment.inline-comment-is-reply {
  margin-top: 0;
}

.differential-inline-comment .inline-head-right {
  float: right;
  padding-right: 4px;
}

.differential-inline-comment .inline-head-right .button {
  vertical-align: top;
}

.differential-inline-comment .inline-head-left {
  float: left;
  padding: 4px;
}

.device-phone .differential-inline-comment .inline-head-left {
  float: none;
}

.device-phone .differential-inline-comment .inline-head-right {
  margin: 12px 0 4px 4px;
}

.device-phone .differential-inline-comment .inline-head-right .mml {
  margin: 0 4px 0 0;
}


/* - Sythetic Comment ---------------------------------------------------------

  Comments left by our robot overlords.

*/

.differential-inline-comment.differential-inline-comment-synthetic {
  border: 1px solid #2980b9;
}

.differential-inline-comment.differential-inline-comment-synthetic
  .differential-inline-comment-head {
    border-bottom: 1px solid #8C98B8;
    background-color: #daeaf3;
}

.differential-inline-comment.differential-inline-comment-synthetic
  .differential-inline-comment-head {
    padding-bottom: 4px;
}

/* - Ghost Comment ------------------------------------------------------------

  Comments from older or newer versions of the changeset.

*/

.differential-inline-comment.inline-comment-ghost {
  border: 1px solid #C7CCD9;
  opacity: 0.75;
}

.differential-inline-comment.inline-comment-ghost
  .differential-inline-comment-head {
    border-bottom: 1px solid #C7CCD9;
    background-color: #F7F7F7;
}

/* - New/Edit Inline Comment --------------------------------------------------

  Styles for when you are creating or editing an inline comment.

*/

.differential-inline-comment .done-label {
  display: inline-block;
  color: #9b946e;
  padding: 4px;
}

.differential-inline-comment.inline-state-is-draft .done-label,
.differential-inline-comment.inline-comment-ghost .done-label {
  color: #92969D;
}

/* - New/Edit Inline Comment --------------------------------------------------

  Styles for when you are creating or editing an inline comment.

*/

.differential-inline-comment-edit-body .aphront-form-input {
  margin: 0;
  width: 100%;
}

.differential-inline-comment-edit {
  padding: 8px;
}

.differential-inline-comment-edit-buttons {
  padding: 8px 0 0 0;
}

.differential-inline-comment-edit-buttons button {
  float: right;
  margin-left: 6px;
}

.differential-inline-comment-edit-title {
  font-weight: bold;
  color: #464C5C;
  padding: 4px 0 12px;
  font-size: 14px;
}

.differential-inline-comment-edit {
  background-color: #F7F7F7;
  border: 1px solid #C7CCD9;
}

.differential-inline-comment-edit .remarkup-assist-textarea {
  border-left-color: #C7CCD9;
  border-right-color: #C7CCD9;
  border-bottom-color: #A1A6B0;
}

.differential-inline-comment-edit .remarkup-assist-bar {
  border-left-color: #C7CCD9;
  border-right-color: #C7CCD9;
  border-top-color: #C7CCD9;
}

.differential-inline-comment-edit .aphront-form-control-textarea {
  padding: 0;
}


/* - Action Buttons -----------------------------------------------------------

  Reply, Edit, Delete, View, Button Bars...

*/

.differential-inline-comment .differential-inline-done-label {
  border-color: #c9b8a8;
  color: #6B748C;
}

.differential-inline-comment.inline-state-is-draft
  .differential-inline-done-label,
.differential-inline-comment.inline-state-is-draft
  .button.simple,
.differential-inline-comment.inline-comment-ghost
  .button.simple {
  color: #92969D;
}

/* - Done Button --------------------------------------------------------------

  Default colors, hovers, checked styles for the Done Button.

*/

.differential-inline-done-label {
  border: 1px solid #c9b8a8;
  border-radius: 3px;
  display: inline-block;
  padding: 3px 8px 4px;
  cursor: pointer;
}

.differential-inline-done-label .differential-inline-done {
  margin: 0 6px 0 0;
  display: inline;
  cursor: pointer;
}

.differential-inline-comment.inline-is-done
  .differential-inline-done-label {
    background-color: #fff;
    border-color: #BFCFDA;
    color: #3498db;
    opacity: 1;
}

.device-desktop .differential-inline-comment.inline-is-done
  .differential-inline-done-label:hover {
    background-color: #fff;
    color: #3498db;
}

.differential-inline-comment.inline-is-done .differential-inline-comment-head
  .button-done {
    color: #3498db;
}

.differential-inline-comment.inline-is-done {
  border-color: #dadee8;
}

.differential-inline-comment.inline-is-done
  .differential-inline-comment-head {
    background-color: #F7F7F7;
    border-bottom-color: #dadee8;
}

.differential-inline-comment.inline-is-done .differential-inline-comment-head
  .button.simple {
    border-color: #C7CCD9;
    color: #92969D;
}

.differential-inline-comment.inline-is-done .differential-inline-comment-head
  .differential-inline-done-label {
    color: #3498db;
    background-color: #fff;
    border-color: #3498db;
}

/* - Inline State is Draft ----------------------------------------------------

  The Unsubmitted state of the comment / done checkbox styles.

*/

.differential-inline-comment .inline-draft-text {
  display: none;
}

.differential-inline-comment.inline-state-is-draft .inline-draft-text {
  display: inline-block;
}

.inline-state-is-draft .differential-inline-done-label {
  border-style: dashed;
}


/* - Undo ---------------------------------------------------------------------

  A wild undo box appears!

*/

.differential-inline-undo {
  padding: 8px;
  margin: 4px 12px;
  text-align: center;
  background: #fdf3da;
  border: 1px solid #c9b8a8;
  color: #4B4D51;
  font: 13px 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  border-radius: 3px;
}

.differential-inline-undo a {
  font-weight: bold;
}

/* - Spooky Ghost UI -----------------------------------------------------------

  Hide your codez.

*/

.inline-comment-ghost .differential-inline-comment-head {
  padding-left: 40px;
}

.ghost-icon {
  background: rgba(55,55,55,.07);
  float: left;
  padding: 2px 4px 2px 2px;
  position: absolute;
  top: 0;
  left: 0;
}

.ghost-icon .phui-icon-view {
  padding: 8px 7px;
  font-size: 16px;
  color: #8C98B8;
}

.device-desktop .ghost-icon .phui-icon-view:hover {
  color: #e62f17;
}

.differential-inline-comment.inline-comment-ghost
  .differential-inline-comment-head {
    position: relative;
}

.differential-inline-comment.inline-comment-ghost
  .differential-inline-done-label,
.differential-inline-comment.inline-comment-ghost {
    border-color: #C7CCD9;
    color: #92969D;
}


/* - Hiding Inlines ------------------------------------------------------------
*/

.reveal-inline {
  color: #8C98B8;
  margin: 4px 0;
  display: none;
}

.inline-hidden .reveal-inline {
  display: block;
}

.inline-hidden .differential-inline-comment {
  display: none;
}

.differential-inline-summary {
  background: #F7F7F7;
  padding: 2px 16px;
  color: #92969D;
  display: none;
  font: 13px 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device .differential-inline-summary {
  padding-left: 4px;
  padding-right: 4px;
}

.inline-hidden .differential-inline-summary {
  display: block;
}

.reveal-inline span.phui-icon-view {
  color: #8C98B8;
}

.reveal-inline:hover span.phui-icon-view {
  color: #464C5C;
}

.inline-button-divider {
  border-left: 1px solid rgba(55,55,55,.25);
  margin-left: 8px;
}

.differential-inline-comment-synthetic .inline-button-divider {
  border: none;
}

.inline-comment-element .differential-inline-comment-head {
  cursor: pointer;
}

.inline-comment-selected .inline-comment-element {
  border-color: #f1c40f;
  background: #fffdf6;
}

.inline-comment-selected .inline-comment-element
  .differential-inline-comment-head {
  background: #fdf5d4;
  border-color: #f1c40f;
}

.inline-suggestion {
  display: none;
  margin: 0 -8px;
}

.has-suggestion .inline-suggestion {
  display: block;
}

.differential-inline-comment-edit-buttons button.inline-button-left {
  float: left;
  margin: 0 6px 0 0;
}

.inline-suggestion-table {
  table-layout: fixed;
  width: 100%;
  margin-bottom: 8px;
  white-space: pre-wrap;
  background: #EBECEE;
  border-width: 1px 0;
  border-style: solid;
  border-color: #C7CCD9;
}

textarea.inline-suggestion-input {
  width: 100%;
  height: auto;
  max-width: 100%;
}

.inline-suggestion-line-cell {
  text-align: right;
  background: #DFE0E2;
  width: 36px;
  color: #74777D;
  border-right: 1px solid #C7CCD9;
}

.inline-suggestion-table td.inline-suggestion-input-cell {
  padding: 8px 4px;
}

.inline-suggestion-table td.inline-suggestion-text-cell {
  /* This is attempting to align the text in the textarea with the text on
     the surrounding context lines. */
  padding: 0 8px 0 11px;
}

.inline-suggestion-view {
  padding: 4px 0;
  white-space: pre-wrap;
  background: #F7F7F7;
  margin: 0 -12px 8px;
  border-width: 1px 0;
  border-style: solid;
  border-color: #C7CCD9;
}

.diff-1up-simple-table {
  width: 100%;
  table-layout: fixed;
}

.diff-1up-simple-table > tbody > tr > td {
  padding-left: 12px;
  padding-right: 12px;
}


/**
 * @provides diff-tree-view-css
 */

.diff-tree-view {
  margin: 0 4px;
}

.diff-tree-path {
  height: 20px;
  line-height: 20px;
  color: #74777D;
  border-left: 4px solid transparent;
}

.diff-tree-path-indent {
  position: relative;
}

.diff-tree-path-icon {
  position: absolute;
  width: 20px;
  height: 20px;
  text-align: center;
}

.diff-tree-path-icon .phui-icon-view {
  color: #74777D;
}

.diff-tree-path-name {
  margin-left: 22px;
  margin-right: 44px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.diff-tree-path-changeset {
  cursor: pointer;
  color: #464C5C;
}

.diff-tree-path-focused {
  background: #DFE0E2;
}

.device-desktop .diff-tree-path-changeset:hover {
  background: #BFCFDA;
  transition: 0.1s;
}

.diff-tree-view .diff-tree-path-changeset.diff-tree-path-selected {
  /* Rule is intentionally more specific than "hover". */
  background: #f1c40f;
}

.diff-tree-path-low-importance .diff-tree-path-name {
  opacity: 0.5;
}

.diff-tree-path-hidden {
  opacity: 0.25;
}

.diff-tree-path-icon-hidden,
.diff-tree-path-hidden .diff-tree-path-icon-kind {
  display: none;
}

.diff-tree-path-hidden .diff-tree-path-icon-hidden {
  display: block;
}

.diff-tree-path-owned {
  border-left-color: #e67e22;
  box-shadow: inset 2px 0 #f7e2d4;
}

.diff-tree-path-inlines {
  display: none;
  position: absolute;
  right: 4px;
  border-radius: 4px;
  text-align: center;
  top: 2px;
  height: 16px;
  line-height: 14px;
  width: 36px;
  font-size: 12px;
  color: #74777D;
}

.diff-tree-path-inlines-visible {
  display: block;
  background: #BFCFDA;
}

.diff-tree-path-inlines-completed {
  background: #DFE0E2;
  color: #92969D;
  opacity: 0.75;
}


/**
 * @provides phui-formation-view-css
 */

.phui-formation-view {
  table-layout: fixed;
  width: 100%;
}

.phui-formation-view-expander {
  position: fixed;
  width: 24px;
  height: 36px;
  top: 64px;
  border-style: solid;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  border-color: #C7CCD9;
  background: #F7F7F7;
  z-index: 4;

  display: none;
}

.device-desktop .phui-formation-view-expander {
  display: block;
}

.phui-formation-desktop-only {
  display: none;
}

.device-desktop .phui-formation-desktop-only {
  display: table-cell;
}

.phui-formation-view-expander-left {
  border-radius: 0 12px 12px 0;
  border-width: 1px 1px 1px 0;
  cursor: e-resize;
}

.phui-formation-view-expander-right {
  border-radius: 12px 0 0 12px;
  border-width: 1px 0 1px 1px;
  cursor: w-resize;
}

.phui-formation-view-expander-icon {
  position: absolute;
  width: 18px;
  height: 18px;
  top: 9px;
  left: 3px;
  text-align: center;
}

.device-desktop .phui-formation-view-expander:hover {
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
  background: #DFE0E2;
  transition: 0.1s;
}

.device-desktop .phui-formation-view-expander:hover
  .phui-icon-view {
  color: #6B748C;
  transition: 0.1s;
}

.phui-flank-header {
  padding: 8px;
  background: #ECEEF4;
  border-bottom: 1px solid #C7CCD9;
}

.phui-flank-header-text {
  color: #4B4D51;
  font-weight: bold;
}

.phui-flank-header-hide {
  font-size: 13px;
  position: absolute;
  display: inline-block;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  text-align: center;
  border: 1px solid #C7CCD9;
  border-radius: 4px;
  line-height: 20px;
}

.phui-flank-header-hide-left {
  cursor: w-resize;
}


.device-desktop .phui-flank-header-hide:hover {
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05);
  background: #DFE0E2;
  transition: 0.1s;
}

.device-desktop .phui-flank-header-hide:hover
  .phui-icon-view {
  color: #6B748C;
  transition: 0.1s;
}

.phui-formation-resizer {
  position: fixed;
  top: 0;
  bottom: 0;

  cursor: col-resize;
  background: #f5f5f5;
  border-style: solid;
  border-width: 0 1px 0 1px;
  border-color: #fff #999c9e #fff #999c9e;
  box-sizing: border-box;

  box-shadow: inset -1px 0px 1px rgba(0,0,0, 0.15);

  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIBJREFUeNp8jjsKBCEQREtdA3E0MBC8gPe/jlcQmUQEf+COwmy4D7qDru6qJmst9N7XnBNvGWMIHsgYY933jZQSKKVQSoFzDmst+eyNEMK+htYarTU45/YYdLcYI4QQuK4LpRS8HPGxQK0VOWdIKX/isfXen0zG2Ml8If++/QowADitQkbxWNWuAAAAAElFTkSuQmCC);
  background-position: center;
  background-repeat: no-repeat;

  display: none;
  z-index: 4;
}

.device-desktop .phui-formation-resizer {
  display: block;
}

.phui-flank-view-fixed {
  position: fixed;
  top: 44px;
  bottom: 0;
  overflow: hidden;
  background: #F7F7F7;
  z-index: 4;
}

.phui-flank-view-fixed .phui-flank-view-body {
  overflow: hidden auto;
}

.device-desktop .phui-flank-view-fixed
  .phui-flank-view-body::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.device-desktop .phui-flank-view-fixed
  .phui-flank-view-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

.phui-flank-view-fixed .phui-flank-view-tail {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.phui-flank-view .phui-list-view {
  margin: 4px;
}

.phui-flank-view .phui-list-item-view {
  height: 20px;
  padding: 4px 0;
}

.phui-flank-view .phui-list-item-view .phui-icon-view {
  width: 20px;
  height: 20px;
  text-align: center;
  margin-right: 4px;
}

.phui-flank-view .phui-list-item-view .phui-list-item-href {
  display: block;
  color: #464C5C;
  text-decoration: none;
}

.device-desktop .phui-flank-view .phui-list-item-view:hover {
  background: #BFCFDA;
  transition: 0.1s;
}

.phui-flank-view .keyboard-shortcut-key {
  position: absolute;
  right: 4px;
  top: 4px;
  height: 18px;
  width: 18px;
  line-height: 18px;
  padding: 0;
  color: #92969D;
}

.phui-flank-view-head .phui-list-view {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  padding-bottom: 4px;
}

.phui-flank-view-tail .phui-list-view {
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1);
  padding-top: 4px;
}