html {
	display: -ms-flexbox;
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}

body {
	font-size: 14px;
	padding: 0;
	margin: 0;
	overflow-y: scroll !important;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	min-width: 100%;
}

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';
}

main {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	height: 100%;
	width: 100%;
	align-items: center;
	padding-bottom: 62px;
}

* {
	box-sizing: border-box;
}

h1 {
	margin: 0;
}

hr {
	color: #ced3da;
	margin: 0;
	height: 0;
	border: none;
	border-top: 1px solid #ced3da;
}

form {
	display: flex;
	flex-direction: column;
	width: 100%;
}

form label,
legend {
	color: #6d7880;
	font-size: 14px;
	line-height: 21px;
	display: flex;
	flex-direction: column;
	margin: 0 0 32px;
	width: 100%;
	gap: 7px;
}

fieldset {
	padding: 0;
	border: none;
}

legend {
	margin: 0 0 12px;
}

:not(.datePicker_input) > .input {
	margin-top: 7px;
}

table {
	width: 100%;
	border: 1px solid #ced3da;
	border-radius: 4px;
	text-align: left;
	overflow: hidden;
	border-spacing: 0;
	vertical-align: inherit;
	border-collapse: inherit;
}

thead {
	border-radius: 4px;
	background-color: #ebecf0;
	border: none;
}

th {
	padding: 0;
	border: none;
	font-size: 12px;
	font-weight: 600;
	height: 42px;
}

th,
td {
	padding: 0 0 0 24px;
	border-bottom: 1px solid #ced3da;
	box-sizing: border-box;
}

td {
	min-height: 82px;
	padding: 16px 0 16px 24px;
}

tr:last-child td {
	border-bottom: none;
}

.ellipsis {
	/* overflow: hidden; */
	/* text-overflow: ellipsis; */
	/* white-space: wrap; */
	overflow-wrap: break-word;
}
.🧭-textarea {
	height: 159px;
	width: 100%;
	border: none;
	box-shadow: 0 0 0 1px #ced3da;
	border-radius: 4px;
	background-color: #ffffff;
	padding: 16px;
	line-height: 24px;
	color: #2d3840;
	font-size: 16px;
	outline: none;
}

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

.🧭-textarea::placeholder {
	color: #6d7880;
}

.🧭-textarea:focus {
	box-shadow: 0 0 0 1px #156af4;
}

.🧭-textarea:disabled,
.🧭-textarea:disabled::placeholder {
	background: #fafbfc;
	color: #abb1bb;
}

.🧭-input {
	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.🧭-input-error {
	box-shadow: 0 0 0 1px #da1e28 !important;
}

.🧭-input::placeholder {
	color: #6d7880;
}

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

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

.🧭-svelte-select {
	--height: 48px;
	--border-radius: 4px;
	--border-hover-color: #ced3da;
	--border-focus-color: #156af4;
	--input-font-size: 16px;
	--placeholder-color: #6d7880;
	--selected-item-color: #2d3840;
	--item-is-active-bg: #156af4;
	--item-is-active-color: #fff;
	--item-color: #2d3840;
	--item-hover-color: #2d3840;
	--multi-item-bg: #f4f5f7;
	/* --multi-item-margin: 10px 8px 0 0; */
	--multi-item-border-radius: 2px;
	--multi-item-height: 28px;
	--multi-item-padding: 0 8px 0 8px;
	--multi-label-margin: 0 10px 0 0;
	--multi-select-padding: 0 0 0 16px;
	--indicator-top: 14px;
	--spinner-color: #156af4;
}

/* .🧭-svelte-select .svelte-select .loading {
	position: relative;
	padding: 0;
	right: 10px;
} */

/* @ctm/ui/DatePicker */
:root {
	--CTM-DatePicker-input-border: 1px solid #ced3da;
	--CTM-DatePicker-input-hover-border: 1px solid #ced3da;
	--CTM-DatePicker-input-focus-border-color: 1px solid #156af4;
	--CTM-DatePicker-input-height: 48px;
}
.datePicker .icon {
	color: inherit;
}

.🧭-button {
	outline: none;
	border: none;
	height: 48px;
	display: flex;
	border-radius: 4px;
	background-color: #156af4;
	color: #fff;
	align-items: center;
	font-size: 16px;
	padding: 0 24px;
	transition: all 0.2s ease;
	white-space: nowrap;
	justify-content: center;
	margin: 0;
}

.🧭-button div {
	display: flex !important; /* FIX FOR SAFARI BUG */
}

a.🧭-button {
	text-decoration: none;
}

.🧭-button:hover:not(:disabled) {
	background-color: #024eeb;
}

.🧭-button:active:not(:disabled) {
	background-color: #0031cb;
}

.🧭-button:disabled,
a.🧭-button.disabled {
	pointer-events: none;
	opacity: 0.3;
}

.🧭-button .🧭-button-icon {
	margin-right: 8px;
}

.🧭-button.🧭-button-basic {
	background: #ebecf0;
	color: #2d3840;
}

.🧭-button.🧭-button-basic:hover:not(:disabled) {
	background: #dfe1e6;
}

.🧭-button.🧭-button-basic:active:not(:disabled) {
	background: #ced3da;
}

.🧭-button.🧭-button-destructive {
	background: #da1e28;
}

.🧭-button.🧭-button-destructive:hover:not(:disabled) {
	background: #bd171e;
}

.🧭-button.🧭-button-destructive:active:not(:disabled) {
	background: #a31017;
}

.🧭-button-outline {
	overflow: hidden;
	border: 1px solid #156af4;
	color: #156af4;
	background: #fff;
}

.🧭-button.🧭-button-outline:hover:not(:disabled) {
	background: #e5effc;
}

.🧭-button.🧭-button-outline:active:not(:disabled) {
	background: #d0e2ff;
}

.🧭-button.🧭-button-outline.🧭-button-basic {
	border: 1px solid #ced3da;
	color: #2d3840;
	background: #fff;
}

.🧭-button.🧭-button-outline.🧭-button-basic:hover:not(:disabled) {
	background: #dfe1e6;
}

.🧭-button.🧭-button-outline.🧭-button-basic:active:not(:disabled) {
	background: #ced3da;
}

.🧭-button.🧭-button-outline.🧭-button-destructive {
	background: #fff;
	border: 1px solid #da1e28;
	color: #da1e28;
}

.🧭-button.🧭-button-outline.🧭-button-destructive:hover:not(:disabled) {
	background: #ffe9e9;
}

.🧭-button.🧭-button-outline.🧭-button-destructive:active:not(:disabled) {
	background: #ffd7d9;
}

.clear-search-override .🧭-button-icon {
	color: #abb1bb;
}

.🧭-button.🧭-button-ghost,
.🧭-button.🧭-button-ghost:active:not(:disabled) {
	background: transparent;
	color: #156af4;
}

.🧭-button.🧭-button-ghost:hover:not(:disabled) {
	background: #e5effc;
}

.🧭-button.🧭-button-ghost:active:not(:disabled) {
	background: #d0e2ff;
}

.🧭-button.🧭-button-ghost.🧭-button-destructive {
	background: transparent;
	color: #da1e28;
}

.🧭-button.🧭-button-ghost.🧭-button-destructive:hover:not(:disabled) {
	background: #ffe9e9;
}

.🧭-button.🧭-button-ghost.🧭-button-destructive:active:not(:disabled) {
	background-color: #ffd7d9;
}

.🧭-button.🧭-icon-only .🧭-button-icon {
	margin: 0;
}

.🧭-button-x-small {
	height: 40px;
	min-width: 40px;
	padding: 0;
}

.🧭-button-x-small .🧭-button-icon {
	max-width: 16px;
}

.🧭-button-group {
	display: flex;
	gap: 24px;
	width: 100%;
	justify-content: flex-end;
}

.🧭-toggle {
	display: flex;
	height: 44px;
	color: #2d3840;
	overflow: hidden;
}

.🧭-toggle .item {
	background: none;
	text-decoration: none;
	color: #2d3840;
	width: 50%;
	padding: 0 20px;
	height: 44px;
	text-align: center;
	font-size: 16px;
	line-height: 44px;
	border: 1px solid #ced3da;
	border-radius: 4px 0 0 4px;
	cursor: pointer;
	user-select: none;
}

.🧭-toggle .item:last-of-type {
	border-radius: 0 4px 4px 0;
}

.🧭-toggle .item.active {
	border-color: #156af4;
	background: #156af4;
	color: #fff;
}

.🧭-input-group {
	display: flex;
	gap: 24px;
}

.🧭-form-footer {
	padding: 30px 0 0;
	display: flex;
	justify-content: flex-end;
	gap: 24px;
}

.🧭-label-disabled {
	opacity: 0.3;
}

[type='radio'],
[type='checkbox'] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border: solid 1px #ccd0d7;
	margin: 0;
	margin-right: 9px;
	position: relative;
	flex: 0 0 16px;
}

[type='checkbox'] {
	border-radius: 2px;
	overflow: hidden;
	margin: 0;
}

[type='checkbox']:hover {
	border: 1px solid #156af4;
}

[type='checkbox']:checked {
	border: none;
}

.🧭-checkbox-label {
	display: flex;
	align-items: center;
	flex-direction: row;
	gap: 5px;
}

[type='radio']:checked {
	border-color: #2a59ec;
}

[type='radio']:checked::before {
	content: '';
	width: 8px;
	height: 8px;
	background-color: #2a59ec;
	position: absolute;
	top: 3px;
	left: 3px;
}

[type='radio'],
[type='radio']:checked::before {
	border-radius: 100%;
}

[type='checkbox']:checked::before {
	content: '';
	background: url('/tick.svg') top left no-repeat;
	width: 16px;
	height: 16px;
	position: absolute;
	top: 0;
	left: 0;
}

.🧭-checkbox-label:not(.🧭-label-disabled) [type='checkbox']:disabled {
	border-color: #ced3da;
	background: #ced3da;
	opacity: 0.2;
}

.margin-right-auto {
	margin-right: auto;
}

.add-button svg {
	width: 20px;
}

.table-header {
	display: flex;
	background: #e8e9ed;
	height: 42px;
	align-items: center;
	border-radius: 4px 4px 0 0;
	border: 1px solid #ced3da;
	border-bottom: none;
	color: #141b22;
	font-size: 12px;
	font-weight: 600;
}

.table-row {
	border: 1px solid #cfd3d9;
	border-top: none;
}

.table-row:last-of-type {
	border-radius: 0 0 4px 4px;
}