.two-panes {
    display: flex;
    flex-direction: row;
    align-content: stretch;
    min-height: 100vh;
}

.two-panes .left-pane {
    position: sticky;
    top: 10px;
    overflow: scroll;
    flex: 1 0 0;
    align-self: flex-start;
    min-width: 200px;
    max-height: calc(100vh - 20px);
    padding: 0 0 10px 0;
}

.has-review-block .two-panes .left-pane {
    max-height: calc(100vh - 100px);
    min-height: calc(100vh - 300px);
}

.two-panes .pane-dragger {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    align-self: stretch;
    width: 5px;
    min-height: 100px;
    cursor: col-resize;
    padding-left: 14px;
    padding-right: 5px;
}

.two-panes .pane-dragger::after {
    position: sticky;
    top: 50vh;
    height: 36px;
    display: block;
    width: 3px;
    margin-left: -7px;
    content: '';
    border-right: 1px solid rgb(201, 201, 201);
    border-left: 1px solid rgb(201, 201, 201);
}

.two-panes .right-pane {
    overflow: scroll;
    flex: 5 0 0;
    padding-bottom: 50vh;
}

.left-pane .file_filter {
    margin-left: 0;
}

.file-list {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 32px;
}

.file-list li {
    position: relative;
    display: grid;
    padding: 0 0 0 15px;
    list-style: none;
    white-space: nowrap;
}

.file-list li.type-file {
    padding: 0 0 0 15px;
}

.file-list li > a {
    position: relative;
    padding-left: 32px;
    text-decoration: none;
    display: inline-block;
    width: 100%;
    padding: 5px 0 5px 32px;
}

.file-list li > a:hover {
    text-shadow: none;
}

.file-list li.type-file.is-active {
    background: #f6f6f6;
}

.file-list li.type-file:hover,
.file-list span.type-folder:hover {
    background: #f0f0f0;
}

.file-list li.collapsed > .file-list {
    display: none;
}

.file-list .type-folder {
    position: relative;
    display: block;
    padding: 8px 0 8px 32px;
    color: #000;
}

/* Added files */
.file-list .status-a a {
    color: var(--git-status-a-color);
}

.file-list .status-a a:visited {
    color: var(--git-status-a-visited-color);
}

/* Deleted files */
.file-list .status-d a {
    color: var(--git-status-d-color);
}

.file-list .status-d a:visited {
    color: var(--git-status-d-visited-color);
}

/* Modified files */
.file-list .status-m a {
    color: var(--git-status-m-color);
}

.file-list .status-m a:visited {
    color: var(--git-status-m-visited-color);
}

/* Renamed files */
.file-list .status-r a {
    color: var(--git-status-r-color);
}

.file-list .status-r a:visited {
    color: var(--git-status-r-visited-color);
}

/* Visited files */
.file-list li.is-visited > a::after {
    position: absolute;
    bottom: 7px;
    left: 11px;
    display: block;
    width: 12px;
    height: 12px;
    content: '';
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg"><circle fill="%23000000" cx="6" cy="6" r="6"/><path stroke="%23FFF" stroke-width="1.5" stroke-linecap="round" d="M3.48 5.93L5.34 7.8l3.57-3.58"/></svg>');
}

.file-list .type-file .review-comments a,
.file-list .type-file .review-comments span {
    display: inline-block;
    padding: 2px 4px 0 4px;
    border-radius: 4px;
    background: #ffde00;
    color: #000;
    font-size: 12px;
    line-height: 15px;
}

.file-list .type-file .review-comments a::before,
.file-list .type-file .review-comments span::before {
    content: "▶";
    position: absolute;
    left: -10px;
    color: #f5d400;
    font-weight: bold;
    font-size: 14px;
}

.file-list .type-file > a::before,
.file-list .type-folder::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 24px;
    height: 24px;
    margin: auto;
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
}

.file-list .type-file > a::before {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M6 20h12V8.83L13.17 4H6v16zM4.01 4A2 2 0 0 1 6 2h8l6 6v12a2 2 0 0 1-2 2H5.99A2 2 0 0 1 4 20l.01-16z" fill="%23979797"/><path d="M13 9h5v2h-7V4h2v5z" fill="%23979797"/></svg>');
}

.file-list .type-folder::before {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M9.6 2H2.4A2.4 2.4 0 0 0 0 4.38v14.25A2.4 2.4 0 0 0 2.4 21h19.2a2.4 2.4 0 0 0 2.4-2.38V6c0-1.3-1.08-2-2.4-2H12L9.6 2z" fill="%23C9C9C9"/></svg>');
}

.file-list li .type-folder::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -15px;
    display: block;
    width: 10px;
    height: 15px;
    margin: auto;
    content: '▼';
    color: #666;
    font-size: 10px;
    line-height: 15px;
}

.file-list li.collapsed .type-folder::after {
    content: '▶︎';
}
