html {
	overflow: hidden;
}

body {
	/* Match tree.css */
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

button {
	border: 1px solid darkgray;
}

button:active {
	background-color: #d5d5d5;
}

.ProgressWindow-box {
	width: 300px;
	max-width: 92%;
	border-color: #adadad #9a9a9a #ababab;
	border-width: 1px;
	border-style: solid;
	background-color: #ededed;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 20px -2px;
	margin-left: 4px;
	padding: 6px 10px 6px;
	min-height: 40px;
	overflow: hidden;
	position: relative
}

/* Hack to check whether the mouse is over the pane when switching back from another tab.
   We use a property that has no effect and check its computed state in handleVisibilityChange(). */
.ProgressWindow-box:hover {
	background-size: cover;
}

.ProgressWindow-headline {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 13px;
	font-weight: bold;
	margin-top: 2px;
	margin-bottom: 7px;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	user-select: none
}

.ProgressWindow-headlineSelect {
	margin-left: 5px;
	height: 22px;
	width: 100%;
	font-size: 12px;
	flex-grow: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ProgressWindow-targetIcon {
	display: inline-block;
	width: 16px;
	height: 16px;
	background-position: center;
	background-repeat: no-repeat;
	margin-left: 4px;
	margin-right: 3px;
	vertical-align: -3px;
}

.ProgressWindow-disclosure {
	border-radius: 3px;
	margin-left: 6px;
	background: url('disclosure-closed.svg') no-repeat center/40% transparent;
	width: 26px;
	font-size: 20px;
	height: 20px;
	line-height: 17px;
	cursor: default;
	user-select: none
}

.ProgressWindow-disclosure.is-open {
	background-image: url('disclosure-open.svg');
}

.ProgressWindow-inputRow {
	display: flex;
	margin-top: 6px;
}

.ProgressWindow-tagsRow {
	font-size: 12px;
}

.ProgressWindow-tagsLabel {
	margin-top: 3px;
	margin-right: 6px;
	font-weight: bold;
	user-select: none;
}

.ProgressWindow-tagsInput {
	flex-grow: 1;
	margin-right: 8px;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 12px;
}

.ProgressWindow-button {
	background-color: white;
	padding: 3px 24px;
	border-radius: 4px;
	font-size: 11px;
}

.ProgressWindow-targetSelector {
	height: 218px;
	overflow-y: scroll;
	background: white;
	border: 1px solid lightgray;
	padding-bottom: 2px
}

.ProgressWindow-progressBox {
	margin-top: 10px;
	margin-bottom: 4px
}

.ProgressWindow-item {
	font-size: 11px;
	margin-top: 8px;
	margin-bottom: 4px
}

.ProgressWindow-itemIcon {
	position: absolute;
	width: 16px;
	height: 16px;
	background-size: contain;
	background-position: 0;
	background-repeat: no-repeat
}

.ProgressWindow-itemText {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 12px;
	vertical-align: middle;
	line-height: 16px;
	margin: 0 0 0 22px;
	white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis
}

.ProgressWindow-error {
	font-size: 11px;
	line-height: 1.4em;
	margin-bottom: 4px;
}


/* ---------------------- tree.css -------------------------- */

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

.tree {
	overflow: hidden;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 13px;
	white-space: nowrap;
	outline: none;
	user-select: none;
}

.tree button {
	display: block;
}

.tree .tree-node {
	display: flex;
	padding-top: 2px;
	padding-left: 7px;
	padding-bottom: 2px;
}

.tree-indent {
	display: inline-block;
	width: 12px;
	margin-left: 5px;
	/*border-left: 1px solid #A2D1FF;*/
	flex-shrink: 0;
}

.tree-indent:first-of-type {
	width: 6px;
}

/* Align with expandables siblings (where we have the arrow) */
.tree-node[data-expandable="false"] .tree-indent:last-of-type {
	margin-right: 15px;
}

/* For non expandable root nodes, we don't have .tree-indent elements, so we declare
   the margin on the start of the node */
.tree-node[data-expandable="false"][aria-level="0"] {
	padding-left: 22px
}

.tree .tree-node[data-expandable="true"] {
	cursor: default;
}

.tree .tree-node:not(.focused):hover {
	background-color: #F0F9FE;
}

.tree .tree-node.focused {
	color: white;
	background-color: var(--theme-selection-background, #0a84ff);
}

.tree-node.focused .arrow svg {
	fill: currentColor;
}

.arrow {
}

.arrow svg {
	fill: var(--theme-splitter-color, #9B9B9B);
	transition: transform 0.125s ease;
	width: 10px;
	margin-right: 5px;
	transform: rotate(-90deg);
	vertical-align: middle;
	margin-top: -3px;
}

html[dir="rtl"] .arrow svg,
.arrow svg:dir(rtl),
.arrow svg:-moz-locale-dir(rtl) {
	transform: rotate(90deg);
}

.arrow.expanded.expanded svg {
	transform: rotate(0deg);
}

.tree-item-label {
	overflow-x: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin-left: 4px;
}