html,
body {
	margin: 0;
	padding: 0;
	color: #141b22;
	overscroll-behavior: none;
}

* {
	box-sizing: border-box;
}

body,
input,
select,
textarea,
button {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
		'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

dialog {
	border: none;
	border-radius: 8px;
	background: #fff;
	box-shadow:
		0px 8px 60px 0px rgba(32, 43, 51, 0.32),
		0px 12px 24px -4px rgba(32, 43, 51, 0.24);
	padding: 0;
}

/* Compass styles */
/* TODO: Replace with @ctm/compass post kit upgrade */

button.compass {
	width: auto;
	height: 48px;
	padding: 0 24px;
	gap: 8px;
	border-radius: 4px;
	border: 1px solid #156af4;
	background: #fff;
	color: #156af4;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	display: flex;
	align-items: center;
}

button.compass:hover {
	background: #e5effc;
}

button.compass:active {
	background: #d0e2ff;
}

button.compass:disabled {
	opacity: 0.3;
	pointer-events: none;
}

button.compass i {
	width: 24px;
	display: flex;
	align-items: center;
}

button.compass.x-small {
	height: 40px;
	padding: 0 16px;
}

button.compass.x-small i {
	width: 16px;
}

button.compass.destructive {
	color: #da1e28;
	border: 1px solid #da1e28;
}

button.compass.destructive:hover {
	background: #ffe9e9;
}

button.compass.destructive:active {
	background: #ffd7d9;
}

button.compass.primary {
	background: #156af4;
	color: #fff;
}

button.compass.primary:hover {
	background: #024eeb;
}

button.compass.primary:active {
	background: #0031cb;
}

.compass.menu {
	position: relative;
}

.compass.menu-list {
	display: none;
	position: absolute;
	background: #fff;
	margin: 0;
	padding: 0;
	flex-direction: column;
	border-radius: 4px;
	box-shadow:
		0px 2px 4px 0px rgba(32, 43, 51, 0.12),
		0px 0px 2px 0px rgba(32, 43, 51, 0.16);
	list-style: none;
	text-align: left;
	overflow: hidden;
	z-index: 1;
}

.compass.menu-list.right {
	right: 0;
}

.compass.menu-list li {
	display: flex;
}

.compass.menu-list:hover,
.compass.menu:hover .compass.menu-list {
	display: flex;
}

.compass.menu-list button {
	border: none;
	background: #fff;
	display: flex;
	color: #2d3840;
	height: 44px;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	align-items: center;
	padding: 0 16px;
	gap: 16px;
	flex-grow: 1;
	white-space: nowrap;
}

.compass.compass.menu-list button i {
	width: 24px;
	display: flex;
	align-items: center;
	color: rgba(171, 177, 187, 1);
}

.compass.menu-list button:hover {
	background: rgba(216, 236, 255, 1);
}

.table-container {
	border-radius: 8px;
	border: 1px solid #ced3da;
	overflow: hidden;
	overflow-x: auto;
	background: #fff;
	width: 100%;
	max-width: calc(100dvw - 40px);
	display: flex;
}

table.compass {
	flex-grow: 1;
	text-align: left;
	border-collapse: collapse;
}

table.compass thead tr,
table.compass tr:not(:last-child) {
	border-bottom: 1px solid #ebecf0;
}

table.compass th,
table.compass td {
	color: #6d7880;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	padding: 16px 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

table.compass td {
	color: #2d3840;
	font-weight: 400;
	padding: 18px 12px;
}

.compass.tag {
	border-radius: 2px;
	outline: 1px solid #ced3da;
	background: #f4f5f7;
	justify-content: center;
	align-items: center;
	color: #2d3840;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
	width: 130px;
	height: 28px;
	flex-shrink: 0;
	display: block;
	text-align: center;
}

.compass.tag.sky {
	outline-color: #bae6ff;
	background: #e2f5ff;
}

.compass.tag.green {
	outline-color: #B7EB8F;
	background: #ecfbde;
}

.compass.tag.orange {
	outline-color: #fdc9a4;
	background: #fee4d1;
}

.compass.tag.red {
	outline-color: #FFD7D9;
	background: #ffe9e9;
}

label.compass {
	color: #6d7880;
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

input.compass {
	height: 48px;
	width: 100%;
	border: none;
	box-shadow: 0 0 0 1px #ced3da;
	border-radius: 4px;
	background-color: #ffffff;
	padding: 0 16px;
	line-height: 24px;
	color: #2d3840;
	font-size: 16px;
	outline: none;
}

input.compass.compass-input-error {
	box-shadow: 0 0 0 1px #da1e28 !important;
}

input.compass::placeholder {
	color: #6d7880;
}

input.compass:focus {
	box-shadow: 0 0 0 1px #156af4;
}

input.compass:disabled,
input.compass:disabled::placeholder {
	background: #fafbfc;
	color: #abb1bb;
}

.svelte-select {
	--color: #2d3840;
	--spinner-color: #156af4;
}

.svelte-select.disabled {
	--border-hover: 1px solid #ebedef;
}