@font-face {
	font-family: "Inter-Regular";
	src: url("/assets/fonts/Inter-Regular.woff2") format("woff2");
	font-style: normal;
}
@font-face {
	font-family: "Inter-Medium";
	src: url("/assets/fonts/Inter-Medium.woff2") format("woff2");
	font-style: normal;
}
@font-face {
	font-family: "Inter-SemiBold";
	src: url("/assets/fonts/Inter-SemiBold.woff2") format("woff2");
	font-style: normal;
}
@font-face {
	font-family: "RobotoMono";
	src: url("/assets/fonts/RobotoMono.woff2") format("woff2");
	font-style: normal;
}

body {
	--font-family-regular: Inter-Regular, sans-serif;
	--font-family-medium: Inter-Medium, sans-serif;
	--font-family-semi-bold: Inter-SemiBold, sans-serif;
	--font-family-mono: RobotoMono, monospace;

	--font-size-h00: 32px;
	--font-size-h0: 28px;
	--font-size-h1: 24px;
	--font-size-h2: 20px;
	--font-size-h3: 18px;
	--font-size-h4: 16px;
	--font-size-h5: 14px;
	--font-size-h6: 12px;

	--font-size-heading: var(--font-size-h4);
	--font-size-md: 14px;
	--font-size-sm: 12px;

	--font-lineHeight-3: 12px;
	--font-lineHeight-4: 16px;
	--font-lineHeight-4a: 18px;
	--font-lineHeight-5: 20px;
	--font-lineHeight-6: 24px;
	--font-lineHeight-7: 28px;
	--font-lineHeight-7a: 30px;
	--font-lineHeight-8: 32px;
	--font-lineHeight-9: 36px;
	--font-lineHeight-10: 38px;
	--font-lineHeight-11: 44px;

	--font-lineHeight-sm: var(--font-lineHeight-3);
	--font-lineHeight-md: var(--font-lineHeight-4);

	--iconHeight-2: 8px;
	--iconHeight-3: 12px;
	--iconHeight-4: 16px;
	--iconHeight-5: 20px;
	--iconHeight-8: 32px;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 28px;
	--space-8: 32px;
	--space-9: 36px;
	--space-10: 40px;
	--space-11: 44px;
	--space-12: 48px;

	--interaction-medium: 28px;
	--interaction-large: 36px;

	--button-size: 28px;
	--button-size-lg: 36px;

	--button-modal-width: 84px;
	--button-modal-height: 36px;

	--select-button-height: var(--button-size);

	--border-radius-xsm: 2px;
	--border-radius-sm: 4px;
	--border-radius-md: 6px;
	--border-radius-lg: 10px;
	--border-radius-xlg: 20px;
	--border-width: 1px;
	--border-color: var(--color-gray-300);
	--border-input: var(--color-gray);
	--border-focusColor: var(--color-primary);

	--outline-color: var(--color-primary);
	--invalid-color: var(--color-error);

	--transition-duration: "0.1s";

	--hover-light: "brightness(110%)";
	--hover-dark: "brightness(92%)";
	--hover-opacity: "0.6";

	--layer-flyout: 1e12;
	--layer-modal: 1e12;
	--layer-d3tooltip: 1e12;

	--color-white-opacity: rgba(255, 255, 255, 0.95);
	--color-white: #ffffff;
	--color-gray-50: #fcfcfc;
	--color-gray-100: #f9f9fa;
	--color-gray-200: #eff0f2;
	--color-gray-300: #e4e5e8;
	--color-gray-400: #d6d7dc;
	--color-gray: #adb0b9;
	--color-gray-500: #adb0b9;
	--color-gray-600: #7d828f;
	--color-gray-700: #545b6c;
	--color-gray-800: #333a50;
	--color-gray-900: #1c243c;
	--color-gray-border: rgba(150, 148, 148, 0.85);
	--color-black: #161d30;
	--color-black-opacity: rgba(22, 22, 22, 0.2);
	--color-shadow-opacity: rgba(0, 0, 0, 0.2);
	--color-light-shadow-100: rgba(0, 0, 0, 0.09);
	--color-light-shadow-200: rgba(0, 0, 0, 0.1);
	--color-shadow-soft: rgba(0, 0, 0, 0.12);

	--color-primary-100: #d8d8f4;
	--color-primary-200: #b1b0e8;
	--color-primary-300: #8b89dd;
	--color-primary-400: #6461d1;
	--color-primary: #3d3ac6;
	--color-primary-600: #2a2896;
	--color-primary-700: #252377;

	--color-secondary-100: #e6f5ff;
	--color-secondary-200: #b3e0ff;
	--color-secondary-300: #80ccff;
	--color-secondary-400: #4db8ff;
	--color-secondary: #0099ff;
	--color-secondary-600: #007acc;
	--color-secondary-700: #005c99;
	--color-secondary-800: #003d66;
	--color-secondary-900: #001f33;

	--color-red-100: #fcd3db;
	--color-red-200: #f9a8b6;
	--color-red-300: #f57c92;
	--color-red-400: #f2516d;
	--color-red-transparent: rgb(239, 37, 73, 0.6);
	--color-red: #ef2549;
	--color-red-900: #30070f;

	--color-orange-200: #ffe39b;
	--color-orange-300: #ffd568;
	--color-orange-400: #ffc736;
	--color-orange: #ffb904;
	--color-orange-900: #332501;

	--color-green-100: #d3f2e7;
	--color-green-300: #7ad8b6;
	--color-green: #22be86;
	--color-green-900: #07261b;

	--color-violet-200: #dfc7ff;
	--color-violet-300: #caa1ff;
	--color-violet: #9543ff;
	--color-violet-900: #1e0d33;

	--color-blue-300: #7fb2ff;
	--color-blue: #297fff;
	--color-blue-light: rgba(0, 120, 255, 0.05);
	--color-blue-500: #91bdcb;
	--color-blue-600: #2166cc;
	--color-blue-900: #081933;

	--color-turquoise-200: #cff4f7;
	--color-turquoise-300: #a0e9ef;
	--color-turquoise: #1ccad8;

	--color-pink: #ff6392;

	--color-success: var(--color-green);
	--color-debug: var(--color-green-300);
	--color-info: var(--color-blue-300);
	--color-warning-400: var(--color-orange-400);
	--color-warning: var(--color-orange);
	--color-error-transparent: var(--color-red-transparent);
	--color-error: var(--color-red);
	--color-change: #9442ff33;
	--color-link: var(--color-blue);
	--color-link-600: var(--color-blue-600);
	--color-new: var(--color-turquoise);

	--color-new-100: #e8fafb;
	--color-new-200: #cff4f7;
	--color-new-300: #a0e9ef;
	--color-new-400: #70dee7;
	--color-new-600: #16a2ad;
	--color-new-700: #117982;
	--color-new-800: #0b5156;
	--color-new-900: #06282b;

	--color-item: #b3e0ff;
	--color-feature: #c0b3ff;
	--color-sequence: #ffe7b3;
	--color-file: #b3ffdd;
	--color-location: #ffb3b3;
	--color-script: #b3fcff;
	--color-script-default: #cbe6e7;
	--color-spec: #fbb3ff;
	--color-workspace: #e3ffb3;
	--color-item-query: #b3d0ff;
	--color-view-query: #ffd6b3;
	--color-background: linear-gradient(
		135deg,
		#ebf4ff 0%,
		#ffffff 50%,
		#f0f9ff 100%
	);

	--color-top-bar-workspace: #5d77ab13;
	--color-workspace-card: #80c6ca44;
	--color-workspace-warning: #e9edf1a2;
	--color-workspacebutton: #76a9df54;

	--color-workbook: #b3ffdd;
	--color-sheet: #ffe7b3;
	--color-table: #c0b3ff;
	--color-table-col: #f2b3ff;
	--color-table-row: #b3e0ff;

	--color-command: #1b1b1b;
	--color-running: #084cf3;
	--color-pending: #084cf3;
	--color-done: #2b8214;
	--color-failed: #f33508;
	--color-killed: #c8a110;

	--chevron-size: 20px;

	--max-height-modal: calc(100vh - 150px);
	--max-width-modal: calc(100vw - 100px);

	--b-length: 4px;
}

body {
	font-family: var(--font-family-regular);
	font-size: var(--font-size-md);
	color: var(--color-black);
}

html,
body,
#root {
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

h4 {
	font-family: var(--font-family-semi-bold);
	font-size: var(--font-size-h4);
	line-height: var(--font-lineHeight-6);
}

button.icon:hover {
	cursor: pointer;
}

.bn-button {
	margin: 16px auto 0;
	padding: 10px 18px;
	font-size: var(--font-size-md);
	font-family: var(--font-family-medium);
	font-weight: 500;
	border-radius: 999px;
	border: 1px solid var(--color-gray-300);
	background: var(--color-white);
	color: var(--color-gray-800);
	cursor: pointer;
}

/*
.bn-button.lg {
	height: var(--interaction-large);
	font-size: 16px;
	border-radius: var(--border-radius-md);
	padding: 0px calc(3 * var(--b-length));
}
	*/

.bn-button:not(:disabled):hover {
	color: var(--color-gray-900);
	--hover-fill: var(--color-gray-900);
	border-color: var(--color-gray-600);
	background-color: var(--color-gray-200);
	cursor: pointer;
}
.bn-button.emphasis {
	background-color: var(--color-primary);
	color: var(--color-white);
	border: none;
}
.bn-button.emphasis:hover {
	background-color: var(--color-primary-400);
	color: var(--color-white);
	border: none;
}
.bn-button:disabled {
	cursor: auto;
	opacity: 0.5;
}

/** Span container for icon buttons */
.icon-button-container,
span:has(> button.icon) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	width: 28px;
	border-radius: 50%;
	border: 1px solid var(--color-gray-300);
}
.icon-button-container:has(button:hover),
span:has(> button.icon:hover) {
	cursor: pointer;
	background-color: var(--color-gray-200);
}

input[type="checkbox"] {
	height: 14px;
	width: 14px;
	border: 1px solid var(--color-gray-600);
	border-radius: var(--border-radius-xsm);
}
input[type="checkbox"]:not([disabled]):hover {
	cursor: pointer;
	color: var(--color-gray-200);
}
span:has(> input[type="checkbox"]) {
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	width: 28px;
}
span:has(> input[type="checkbox"]:not([disabled])):hover {
	cursor: pointer;
	background-color: var(--color-gray-200);
}

.hidden {
	display: none;
}

.popover {
	margin: 0;
	padding: 0;
	background-color: var(--color-white);
	border: var(--border-width) solid var(--color-gray-400);
	border-radius: var(--border-radius, --border-radius-md);
	box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.15);
	min-height: 1rem;
	min-width: 100px;
	overflow: auto;
}

.modal {
	box-sizing: border-box;
	background-color: var(--color-white);
	border-color: var(--color-gray-300);
	border-width: var(--border-width);
	border-radius: var(--border-radius-xlg);
	border-style: solid;
	padding: 0;
	box-shadow: 0 12px 36px var(--color-light-shadow-200);
}

.modal::backdrop {
	background: var(--color-black-opacity);
}

.modal .container {
	box-sizing: border-box;
	max-width: calc(100vw - 40px);
	max-height: calc(100vh - 40px);
	width: max-content;
	min-width: clamp(0px, 90vw - 30rem, 30rem);
	padding: 1.1rem 1.2rem 1rem;
	display: flex;
	flex-direction: column;
	row-gap: 0.85rem;
}

.modal .container.input-suggestions {
	min-width: clamp(0px, 40rem, 90vw);
}

.modal .content {
	overflow: var(--modal-content-overflow, auto);
	min-height: clamp(0px, 10rem, 100vh - 40px);
	width: var(--modal-content-width, auto);
	height: var(--modal-content-height, auto);
}

.modal .title {
	font-family: var(--font-family-semi-bold);
	font-size: var(--font-size-h2);
	color: var(--color-gray-900);
}

.modal .description {
	margin-top: 0.9rem;
	font-size: var(--font-size-md);
	color: var(--color-gray-900);
}

.modal .buttons {
	display: flex;
	justify-content: flex-end;
	align-items: safe center;
	column-gap: 0.6rem;
	padding-top: 0.5rem;
}

.modal .cancel,
.modal .confirm {
	min-width: 5.1rem;
	width: auto;
	height: 36px;
	padding: 0 16px;
	border-width: var(--border-width);
	border-style: solid;
	border-radius: 999px;
	font-family: var(--font-family-medium);
	font-size: var(--font-size-md);
	cursor: pointer;
	transition:
		border-color 120ms ease,
		background-color 120ms ease,
		color 120ms ease;
}

.modal .cancel {
	color: var(--color-gray-700);
	background-color: var(--color-white);
	border-color: var(--color-gray-300);
}

.modal .cancel:hover {
	color: var(--color-gray-900);
	background-color: var(--color-gray-100);
	border-color: var(--color-gray-600);
}

.modal .confirm {
	color: var(--color-gray-900);
	background: linear-gradient(
		180deg,
		var(--color-white) 0%,
		var(--color-new-100) 100%
	);
	border-color: var(--color-new-300);
}

.modal .confirm:hover {
	background: linear-gradient(
		180deg,
		var(--color-white) 0%,
		var(--color-new-200) 100%
	);
	border-color: var(--color-new-600);
}

.modal .confirm:disabled {
	background: var(--color-gray-100);
	border-color: var(--color-gray-300);
	color: var(--color-gray-600);
	cursor: auto;
}

.modal #input,
.modal #textarea {
	box-sizing: border-box;
	margin-top: 2rem;
	padding: 5px;
	border-width: var(--border-width);
	border-style: solid;
	font-family: var(--font-family-regular);
	font-size: var(--font-size-md);
}

.modal #input {
	height: 2rem;
	width: 100%;
}

.modal #textarea {
	height: 20rem;
	width: 40rem;
	max-height: calc(var(--max-height-modal) - 100px);
	min-height: 10rem;
	max-width: var(--max-width-modal);
	min-width: 40rem;
}

.modal #input:focus,
.modal #textarea:focus {
	border-color: var(--color-primary);
}

.modal #input:invalid,
.modal #textarea:invalid {
	outline-color: var(--color-error);
}

.select-button {
	display: flex;
	justify-content: space-around;
	align-items: center;
	font-family: var(--font-family-regular);
	min-width: var(--select-button-min-width, 8em);
	padding-left: 10px;
	height: var(--select-button-height);
	font-size: var(--select-button-font-size, 12px);
	line-height: inherit;
	text-align: left;
}

bn-select.large,
bn-select-single-filter.large,
bn-select-multi.large {
	--select-button-font-size: var(--font-size-md);
	line-height: var(--font-lineHeight-md);
	--select-button-height: var(--button-size-lg);
}

.select-button svg {
	width: 2em;
	height: 2em;
}

.select-button:hover {
	color: var(--color-gray-900);
	--icon-color: var(--color-gray-900);
	fill: var(--color-gray-900);
	background-color: var(--color-gray-200);
	border-color: var(--color-gray-300);
}

.select-filter {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width: 30em;
	padding: 0;
	margin: 0;
}

.select-filter-header {
	display: flex;
	height: 2em;
	margin: 2px 0 2px 2px;
	padding: 3px 0;
	justify-content: space-between;
	align-items: safe center;
	gap: 2px;
	border-bottom: 1px solid var(--color-gray-400);
}

.select-filter-header > .icon {
	margin-left: 0.5em;
}

.select-filter-header input {
	font-family: var(--font-family-regular);
	margin-right: 1em;
	border-width: 0;
	outline-width: 0;
	padding: 5px;
	flex-grow: 1;
}

.select-filter-header span {
	margin-right: 0.5em;
}

/* table */

th {
	border-bottom: 1px solid;
	text-align: left;
}

td {
	border-bottom: 1px solid gray;
}

table {
	overflow-x: auto;
	border-spacing: 0;
}

thead {
	font-family: var(--font-family-semi-bold);
	font-size: var(--font-size-h4);
}

tbody {
	white-space: nowrap;
}

th,
td {
	padding: 5px 10px;
	border-top-width: 0;
	border-left-width: 0;
}

th {
	position: sticky;
	top: 0;
	background: #fff;
	vertical-align: bottom;
}

th:last-child,
td:last-child {
	border-right-width: 0;
}

tr:last-child td {
	border-bottom-width: 0;
}

ul.notes li {
	padding-top: 1em;
}

/** bn-commit-app */
.branch-list,
.commit-list-checkout {
	margin: 0px 32px 0px 32px;
}

.branch-list.standard-list table,
.commit-list-checkout.standard-list table {
	padding-bottom: 80px;
}

/** bn-branch-list */
/** bn-commit-list-checkout */
.standard-list {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: start;
}
.standard-list .title-container {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
}
.standard-list h1 {
	font-size: var(--font-size-h0);
	font-family: var(--font-family-semi-bold);
}
.standard-list .create-branch-button-container {
	height: 32px;
	width: 32px;
}
.standard-list .create {
	--icon-scale: 2;
}
.standard-list .create:hover {
	cursor: pointer;
	background-color: var(--color-gray-600);
}
.standard-list h2 {
	margin-top: 5px;
	margin-bottom: 28px;
}
.standard-list table {
	table-layout: fixed;
}
.standard-list .hash {
	font-family: var(--font-family-mono);
}
.standard-list #uncommitted-changes {
	display: none;
}
.standard-list #uncommitted-changes.uncommitted-changes {
	display: inline;
	color: var(--color-red);
}
.standard-list tr.checked-out {
	background-color: var(--color-workspace-card);
}
.standard-list table td.disabled span {
	display: none;
}
.standard-list tr.checked-out td.delete span {
	display: none;
}
.standard-list tr:not(.checked-out):hover {
	background-color: var(--color-workspace-card);
}
.standard-list table tr:hover {
	cursor: pointer;
}
.standard-list table td {
	word-break: break-all;
	word-wrap: break-word;
	white-space: normal;
	overflow: hidden;
	width: 200px;
}
.standard-list table td.time-creation {
	width: 300px;
}
.standard-list table td.delete {
	width: 80px;
}
.standard-list table td.plus {
	width: 80px;
}

.sidebar-menu {
	gap: 8px;
	padding-bottom: 12px;

	.section {
		display: flex;
		flex-direction: column;
		border-bottom: var(--border-width) solid var(--border-color);
		gap: 8px;
		padding-bottom: 8px;
	}

	.section-header {
		font-size: var(--font-size-sm);
		line-height: var(--font-lineHeight-4);
		font-weight: normal;
		font-family: var(--font-family-semi-bold);
	}
}