@charset "UTF-8";.key-value-pair[data-v-939d8b23] {
  width: 100%;
}
.key-value-pair__header-wrapper[data-v-939d8b23] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-xs);
}
.key-value-pair__pair[data-v-939d8b23] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}
.key-value-pair__input[data-v-939d8b23] {
  flex: 1 1 0;
  min-width: 0;
}
.key-value-pair__pair[data-v-939d8b23] > *:last-child {
  flex: 0 0 auto;
}
/* 
	@author Palonnyi Oleksandr
	Must be first — locks cascade layer priority 
	before any content is loaded: wt-default < base < primevue < wt-typography.
	[WTEL-9107](https://webitel.atlassian.net/browse/WTEL-9107)

	link for complex comment https://webitel.atlassian.net/browse/WTEL-9107?focusedCommentId=740565
*/
[data-v-9bed30f8]:root {
	--scrollbar-width: 10px;
	--scrollbar-height: 10px;
	--scrollbar-thumb-width: 10px;
	--scrollbar-bg-color: var(--p-surface-50);
	--scrollbar-thumb-color: var(--p-surface-150);
	--scrollbar-hover-thumb-color: var(--p-surface-250);
	--scrollbar-border-radius: var(--border-radius);
}
:root.theme--dark[data-v-9bed30f8] {
	--scrollbar-bg-color: var(--p-surface-850);
	--scrollbar-thumb-color: var(--p-surface-700);
	--scrollbar-hover-thumb-color: var(--p-surface-800);
}
.wt-scrollbar[data-v-9bed30f8] {
	/* scrollbar itself */
}
.wt-scrollbar[data-v-9bed30f8]::-webkit-scrollbar {
	width: var(--scrollbar-width);
	height: var(--scrollbar-height);
	cursor: pointer;
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-bg-color);
}

/* scrollable element */
.wt-scrollbar[data-v-9bed30f8]::-webkit-scrollbar-thumb {
	width: var(--scrollbar-thumb-width);
	height: var(--scrollbar-thumb-height);
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-thumb-color);
}
.wt-scrollbar[data-v-9bed30f8]::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-hover-thumb-color);
}
.wt-distant-scrollbar[data-v-9bed30f8]::-webkit-scrollbar {
	width: 14px;
	height: 18px;
	background-color: var(--scrollbar-bg-color);
}
.wt-distant-scrollbar[data-v-9bed30f8]::-webkit-scrollbar-thumb {
	height: 2px;
	border: 4px solid rgba(0, 0, 0, 0);
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-thumb-color);
	background-clip: padding-box;
	/* -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05); */
}
[data-v-9bed30f8]:root {
	--border-radius: var(--spacing-2xs);
	--border-radius--pill: 50px;
}
/*
NOTE:   text-transform: none; is set explicitly cause t-t is inherited from parent
 */

/* 
	@author HlukhovYe
	layer needed for overriding primevue's default typography for the components
	https://webitel.atlassian.net/browse/WTEL-8775?focusedCommentId=723773
*/
@layer wt-typography {
.typo-heading-1[data-v-9bed30f8] {
		font-family: "Montserrat", monospace;
		font-size: 32px;
		font-weight: 600;
		line-height: 48px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-2[data-v-9bed30f8] {
		font-family: "Montserrat", monospace;
		font-size: 24px;
		font-weight: 600;
		line-height: 40px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-3[data-v-9bed30f8] {
		font-family: "Montserrat", monospace;
		font-size: 20px;
		font-weight: 600;
		line-height: 32px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-4[data-v-9bed30f8] {
		font-family: "Montserrat", monospace;
		font-size: 16px;
		font-weight: 600;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-subtitle-1[data-v-9bed30f8] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 500;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-subtitle-2[data-v-9bed30f8] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-body-1[data-v-9bed30f8] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 400;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.56px; */
		/* 0.04em */
}
.typo-body-1-bold[data-v-9bed30f8] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 700;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.56px; */
		/* 0.04em */
}
.typo-body-2[data-v-9bed30f8] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 400;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.16px; */
		/* 0.01em */
}
.typo-body-2-bold[data-v-9bed30f8] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 700;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.16px; */
		/* 0.01em */
}
.typo-button--md[data-v-9bed30f8] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 24px;
		text-transform: uppercase;
		/* letter-spacing: 0.96px; */
		/* 0.06em */
}
.typo-button--sm[data-v-9bed30f8] {
		font-family: "Montserrat", monospace;
		font-size: 10px;
		font-weight: 500;
		line-height: 24px;
		text-transform: uppercase;
		/* letter-spacing: 0.96px; */
		/* 0.06em */
}
.typo-caption[data-v-9bed30f8] {
		font-family: "Montserrat", monospace;
		font-size: 10px;
		font-weight: 400;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.48px; */
		/* 0.03em */
}
.typo-overline[data-v-9bed30f8] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 20px;
		text-transform: uppercase;
		/* letter-spacing: 2.56px; */
		/* 0.16em */
}
}
[data-v-9bed30f8]:root {
	/* LIGHTNESS */
	--lightness-lighten-5: 95%;
	--lightness-lighten-4: 90%;
	--lightness-lighten-3: 80%;
	--lightness-lighten-2: 70%;
	--lightness-lighten-1: 60%;

	--lightness-darken-1: 50%;
	--lightness-darken-2: 45%;
	--lightness-darken-3: 40%;
	--lightness-darken-4: 35%;

	--lightness-accent-1: 75%;
	--lightness-accent-2: 65%;
	--lightness-accent-3: 50%;
	--lightness-accent-4: 40%;

	/* SATURATION */
	--saturation-lighten-5: 92%;
	--saturation-lighten-4: 88%;
	--saturation-lighten-3: 90%;
	--saturation-lighten-2: 90%;
	--saturation-lighten-1: 90%;

	--saturation-darken-1: 75%;
	--saturation-darken-2: 75%;
	--saturation-darken-3: 75%;
	--saturation-darken-4: 75%;

	--saturation-accent-1: 91%;
	--saturation-accent-2: 90%;
	--saturation-accent-3: 97%;
	--saturation-accent-4: 97%;

	/* HUE */
	--hue-red: 0;
	--hue-pink: 337;
	--hue-purple: 291;
	--hue-deep-purple: 263;
	--hue-indigo: 232;
	--hue-blue: 209;
	--hue-light-blue: 202;
	--hue-cyan: 188;
	--hue-teal: 173;
	--hue-green: 121;
	--hue-light-green: 88;
	--hue-lime: 66;
	--hue-yellow: 54;
	--hue-amber: 43;
	--hue-orange: 32;
	--hue-deep-orange: 11;

	/* RED */
	--red-lighten-5: hsla(
		var(--hue-red),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--red-lighten-4: hsla(
		var(--hue-red),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--red-lighten-3: hsla(
		var(--hue-red),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--red-lighten-2: hsla(
		var(--hue-red),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--red-lighten-1: hsla(
		var(--hue-red),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--red-darken-4: hsla(
		var(--hue-red),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--red-darken-3: hsla(
		var(--hue-red),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--red-darken-2: hsla(
		var(--hue-red),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--red-darken-1: hsla(
		var(--hue-red),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--red-accent-4: hsla(
		var(--hue-red),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--red-accent-3: hsla(
		var(--hue-red),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--red-accent-2: hsla(
		var(--hue-red),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--red-accent-1: hsla(
		var(--hue-red),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* PINK */
	--pink-lighten-5: hsla(
		var(--hue-pink),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--pink-lighten-4: hsla(
		var(--hue-pink),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--pink-lighten-3: hsla(
		var(--hue-pink),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--pink-lighten-2: hsla(
		var(--hue-pink),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--pink-lighten-1: hsla(
		var(--hue-pink),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--pink-darken-4: hsla(
		var(--hue-pink),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--pink-darken-3: hsla(
		var(--hue-pink),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--pink-darken-2: hsla(
		var(--hue-pink),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--pink-darken-1: hsla(
		var(--hue-pink),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--pink-accent-4: hsla(
		var(--hue-pink),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--pink-accent-3: hsla(
		var(--hue-pink),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--pink-accent-2: hsla(
		var(--hue-pink),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--pink-accent-1: hsla(
		var(--hue-pink),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* PURPLE */
	--purple-lighten-5: hsla(
		var(--hue-purple),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--purple-lighten-4: hsla(
		var(--hue-purple),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--purple-lighten-3: hsla(
		var(--hue-purple),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--purple-lighten-2: hsla(
		var(--hue-purple),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--purple-lighten-1: hsla(
		var(--hue-purple),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--purple-darken-4: hsla(
		var(--hue-purple),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--purple-darken-3: hsla(
		var(--hue-purple),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--purple-darken-2: hsla(
		var(--hue-purple),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--purple-darken-1: hsla(
		var(--hue-purple),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--purple-accent-4: hsla(
		var(--hue-purple),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--purple-accent-3: hsla(
		var(--hue-purple),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--purple-accent-2: hsla(
		var(--hue-purple),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--purple-accent-1: hsla(
		var(--hue-purple),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* DEEP PURPLE */
	--deep-purple-lighten-5: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--deep-purple-lighten-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--deep-purple-lighten-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--deep-purple-lighten-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--deep-purple-lighten-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--deep-purple-darken-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--deep-purple-darken-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--deep-purple-darken-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--deep-purple-darken-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--deep-purple-accent-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--deep-purple-accent-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--deep-purple-accent-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--deep-purple-accent-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* INDIGO */
	--indigo-lighten-5: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--indigo-lighten-4: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--indigo-lighten-3: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--indigo-lighten-2: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--indigo-lighten-1: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--indigo-darken-4: hsla(
		var(--hue-indigo),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--indigo-darken-3: hsla(
		var(--hue-indigo),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--indigo-darken-2: hsla(
		var(--hue-indigo),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--indigo-darken-1: hsla(
		var(--hue-indigo),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--indigo-accent-4: hsla(
		var(--hue-indigo),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--indigo-accent-3: hsla(
		var(--hue-indigo),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--indigo-accent-2: hsla(
		var(--hue-indigo),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--indigo-accent-1: hsla(
		var(--hue-indigo),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* BLUE */
	--blue-lighten-5: hsla(
		var(--hue-blue),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--blue-lighten-4: hsla(
		var(--hue-blue),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--blue-lighten-3: hsla(
		var(--hue-blue),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--blue-lighten-2: hsla(
		var(--hue-blue),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--blue-lighten-1: hsla(
		var(--hue-blue),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--blue-darken-4: hsla(
		var(--hue-blue),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--blue-darken-3: hsla(
		var(--hue-blue),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--blue-darken-2: hsla(
		var(--hue-blue),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--blue-darken-1: hsla(
		var(--hue-blue),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--blue-accent-4: hsla(
		var(--hue-blue),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--blue-accent-3: hsla(
		var(--hue-blue),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--blue-accent-2: hsla(
		var(--hue-blue),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--blue-accent-1: hsla(
		var(--hue-blue),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIGHT BLUE */
	--light-blue-lighten-5: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--light-blue-lighten-4: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--light-blue-lighten-3: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--light-blue-lighten-2: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--light-blue-lighten-1: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--light-blue-darken-4: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--light-blue-darken-3: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--light-blue-darken-2: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--light-blue-darken-1: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--light-blue-accent-4: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--light-blue-accent-3: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--light-blue-accent-2: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--light-blue-accent-1: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* CYAN */
	--cyan-lighten-5: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--cyan-lighten-4: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--cyan-lighten-3: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--cyan-lighten-2: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--cyan-lighten-1: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--cyan-darken-4: hsla(
		var(--hue-cyan),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--cyan-darken-3: hsla(
		var(--hue-cyan),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--cyan-darken-2: hsla(
		var(--hue-cyan),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--cyan-darken-1: hsla(
		var(--hue-cyan),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--cyan-accent-4: hsla(
		var(--hue-cyan),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--cyan-accent-3: hsla(
		var(--hue-cyan),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--cyan-accent-2: hsla(
		var(--hue-cyan),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--cyan-accent-1: hsla(
		var(--hue-cyan),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* TEAL */
	--teal-lighten-5: hsla(
		var(--hue-teal),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--teal-lighten-4: hsla(
		var(--hue-teal),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--teal-lighten-3: hsla(
		var(--hue-teal),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--teal-lighten-2: hsla(
		var(--hue-teal),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--teal-lighten-1: hsla(
		var(--hue-teal),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--teal-darken-4: hsla(
		var(--hue-teal),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--teal-darken-3: hsla(
		var(--hue-teal),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--teal-darken-2: hsla(
		var(--hue-teal),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--teal-darken-1: hsla(
		var(--hue-teal),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--teal-accent-4: hsla(
		var(--hue-teal),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--teal-accent-3: hsla(
		var(--hue-teal),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--teal-accent-2: hsla(
		var(--hue-teal),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--teal-accent-1: hsla(
		var(--hue-teal),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* GREEN */
	--green-lighten-5: hsla(
		var(--hue-green),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--green-lighten-4: hsla(
		var(--hue-green),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--green-lighten-3: hsla(
		var(--hue-green),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--green-lighten-2: hsla(
		var(--hue-green),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--green-lighten-1: hsla(
		var(--hue-green),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--green-darken-4: hsla(
		var(--hue-green),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--green-darken-3: hsla(
		var(--hue-green),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--green-darken-2: hsla(
		var(--hue-green),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--green-darken-1: hsla(
		var(--hue-green),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--green-accent-4: hsla(
		var(--hue-green),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--green-accent-3: hsla(
		var(--hue-green),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--green-accent-2: hsla(
		var(--hue-green),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--green-accent-1: hsla(
		var(--hue-green),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIGHT GREEN */
	--light-green-lighten-5: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--light-green-lighten-4: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--light-green-lighten-3: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--light-green-lighten-2: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--light-green-lighten-1: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--light-green-darken-4: hsla(
		var(--hue-light-green),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--light-green-darken-3: hsla(
		var(--hue-light-green),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--light-green-darken-2: hsla(
		var(--hue-light-green),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--light-green-darken-1: hsla(
		var(--hue-light-green),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--light-green-accent-4: hsla(
		var(--hue-light-green),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--light-green-accent-3: hsla(
		var(--hue-light-green),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--light-green-accent-2: hsla(
		var(--hue-light-green),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--light-green-accent-1: hsla(
		var(--hue-light-green),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIME */
	--lime-lighten-5: hsla(
		var(--hue-lime),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--lime-lighten-4: hsla(
		var(--hue-lime),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--lime-lighten-3: hsla(
		var(--hue-lime),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--lime-lighten-2: hsla(
		var(--hue-lime),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--lime-lighten-1: hsla(
		var(--hue-lime),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--lime-darken-4: hsla(
		var(--hue-lime),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--lime-darken-3: hsla(
		var(--hue-lime),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--lime-darken-2: hsla(
		var(--hue-lime),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--lime-darken-1: hsla(
		var(--hue-lime),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--lime-accent-4: hsla(
		var(--hue-lime),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--lime-accent-3: hsla(
		var(--hue-lime),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--lime-accent-2: hsla(
		var(--hue-lime),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--lime-accent-1: hsla(
		var(--hue-lime),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* yellow */
	--yellow-lighten-5: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--yellow-lighten-4: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--yellow-lighten-3: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--yellow-lighten-2: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--yellow-lighten-1: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--yellow-darken-4: hsla(
		var(--hue-yellow),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--yellow-darken-3: hsla(
		var(--hue-yellow),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--yellow-darken-2: hsla(
		var(--hue-yellow),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--yellow-darken-1: hsla(
		var(--hue-yellow),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--yellow-accent-4: hsla(
		var(--hue-yellow),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--yellow-accent-3: hsla(
		var(--hue-yellow),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--yellow-accent-2: hsla(
		var(--hue-yellow),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--yellow-accent-1: hsla(
		var(--hue-yellow),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* amber */
	--amber-lighten-5: hsla(
		var(--hue-amber),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--amber-lighten-4: hsla(
		var(--hue-amber),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--amber-lighten-3: hsla(
		var(--hue-amber),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--amber-lighten-2: hsla(
		var(--hue-amber),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--amber-lighten-1: hsla(
		var(--hue-amber),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--amber-darken-4: hsla(
		var(--hue-amber),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--amber-darken-3: hsla(
		var(--hue-amber),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--amber-darken-2: hsla(
		var(--hue-amber),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--amber-darken-1: hsla(
		var(--hue-amber),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--amber-accent-4: hsla(
		var(--hue-amber),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--amber-accent-3: hsla(
		var(--hue-amber),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--amber-accent-2: hsla(
		var(--hue-amber),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--amber-accent-1: hsla(
		var(--hue-amber),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* orange */
	--orange-lighten-5: hsla(
		var(--hue-orange),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--orange-lighten-4: hsla(
		var(--hue-orange),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--orange-lighten-3: hsla(
		var(--hue-orange),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--orange-lighten-2: hsla(
		var(--hue-orange),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--orange-lighten-1: hsla(
		var(--hue-orange),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--orange-darken-4: hsla(
		var(--hue-orange),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--orange-darken-3: hsla(
		var(--hue-orange),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--orange-darken-2: hsla(
		var(--hue-orange),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--orange-darken-1: hsla(
		var(--hue-orange),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--orange-accent-4: hsla(
		var(--hue-orange),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--orange-accent-3: hsla(
		var(--hue-orange),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--orange-accent-2: hsla(
		var(--hue-orange),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--orange-accent-1: hsla(
		var(--hue-orange),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* deep-orange */
	--deep-orange-lighten-5: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--deep-orange-lighten-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--deep-orange-lighten-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--deep-orange-lighten-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--deep-orange-lighten-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--deep-orange-darken-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--deep-orange-darken-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--deep-orange-darken-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--deep-orange-darken-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--deep-orange-accent-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--deep-orange-accent-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--deep-orange-accent-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--deep-orange-accent-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* grey */

	--lightness-lighten-5-grey: 94%;
	--lightness-lighten-4-grey: 84%;
	--lightness-lighten-3-grey: 74%;
	--lightness-lighten-2-grey: 64%;
	--lightness-lighten-1-grey: 54%;

	--lightness-darken-1-grey: 44%;
	--lightness-darken-2-grey: 34%;
	--lightness-darken-3-grey: 24%;
	--lightness-darken-4-grey: 14%;
	--lightness-darken-5-grey: 4%;

	--saturation-grey: 20%;
	--hue-grey: 225;

	--grey-lighten-5: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-5-grey),
		1
	);
	--grey-lighten-4: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-4-grey),
		1
	);
	--grey-lighten-3: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-3-grey),
		1
	);
	--grey-lighten-2: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-2-grey),
		1
	);
	--grey-lighten-1: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-1-grey),
		1
	);

	--grey-darken-1: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-1-grey),
		1
	);
	--grey-darken-2: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-2-grey),
		1
	);
	--grey-darken-3: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-3-grey),
		1
	);
	--grey-darken-4: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-4-grey),
		1
	);
	--grey-darken-5: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-5-grey),
		1
	);

	--black: hsla(0, 0%, 0%, 1);
	--white: hsla(0, 0%, 100%, 1);
}
[data-v-9bed30f8]:root {
	/* HSL COLORS HUE VALUE */
	--_accent-color-hue: 42;
	--_secondary-color-hue: 202;
	--_page-bg-color-hue: 209;
	--_icon-color-hue: 202;
	--_positive-color-hue: 119;
	--_negative-color-hue: 11;

	--_hold-color-hue: 54;
	--_transfer-color-hue: 227;
	--_job-color-hue: 209;

	/* DEFAULT STATES OPACITY */
	--_opacity--default: 0.8;
	--_opacity--hover: 1;
	--_opacity--active: 1;
	--_opacity--focus: 0.8;
	--_opacity--disabled: 0.4;

	/* BASIC HSL COLORS VALUES */
	--_accent-color: var(--_accent-color-hue), 100%, 50%;
	--_main-color: var(--_accent-color-hue), 20%, 99%;
	--_contrast-color: var(--_accent-color-hue), 20%, 1%;
	--_secondary-color: var(--_secondary-color-hue), 20%, 90%;
	--_secondary-color-50: var(--_secondary-color-hue), 22%, 96%;
	--_page-bg-color: var(--_page-bg-color-hue), 20%, 95%;
	--_header-color: var(--_page-bg-color-hue), 20%, 90%;
	--_positive-color: var(--_positive-color-hue), 60%, 40%;
	--_negative-color: var(--_negative-color-hue), 80%, 50%;
	--_icon-color: var(--_icon-color-hue), 100%, 15%;

	--_hold-color: var(--_hold-color-hue), 80%, 50%;
	--_transfer-color: var(--_transfer-color-hue), 80%, 50%;
	--_job-color: var(--_job-color-hue), 96%, 57%;

	/* MAIN COLORS */
	--accent-color: hsla(var(--_accent-color), 1);

	--main-color: hsla(var(--_main-color), 1);

	--contrast-color: hsla(var(--_contrast-color), 1);

	--secondary-color: hsla(var(--_secondary-color), 1);
	--secondary-color-50: hsla(var(--_secondary-color-50), 1);

	/* ICON COLORS */
	--icon-color-secondary: hsla(var(--_icon-color), 0.25);

	--icon-color--hover: hsla(var(--_icon-color), var(--_opacity--hover));

	--icon-color-accent: var(--accent-color);
	--icon-color-contrast: hsla(var(--_main-color), var(--_opacity--default));
	--icon-color-active: var(--icon-color--hover);
	--icon-color-disabled: hsla(var(--_icon-color), var(--_opacity--disabled));
	--icon-color-success: var(--true-color);
	--icon-color-danger: var(--false-color);
	--icon-color-transfer: var(--transfer-color);
	--icon-color-hold: var(--hold-color);
	--icon-color-secondary-50: var(--secondary-color-50);

	--page-bg-color: hsla(var(--_page-bg-color), 1);
	--header-color: hsla(var(--_header-color), 1);

	--accent-secondary-color: hsla(var(--_accent-color), 0.3);

	/* SEMANTIC COLORS */
	--disabled-color: hsl(var(--_contrast-color), var(--_opacity--disabled));

	--true-color: hsla(var(--_positive-color), var(--_opacity--default));
	--true--hover-color: hsla(var(--_positive-color), var(--_opacity--hover));

	--false-color: hsla(var(--_negative-color), var(--_opacity--default));
	--false--hover-color: hsla(var(--_negative-color), var(--_opacity--hover));

	--hold-color: hsla(var(--_hold-color), var(--_opacity--default));
	--hold--hover-color: hsla(var(--_hold-color), var(--_opacity--hover));

	--transfer-color: hsla(var(--_transfer-color), var(--_opacity--default));
	--transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover));

	--job-color: hsla(var(--_job-color), var(--_opacity--default));
	--job--hover-color: hsla(var(--_job-color), var(--_opacity--hover));

	--link-color: hsla(205, 90%, 45%, 1);
	--link--hover-color: hsla(205, 90%, 60%, 1);

	/* SUBORDINATE COLORS */
	--tag-bg-color: var(--accent-secondary-color);

	/* FORM STATES OPACITY */
	--form-opacity--default: var(--_opacity--default);
	--form-opacity--hover: var(--_opacity--hover);
	--form-opacity--active: var(--_opacity--active);
	--form-opacity--focus: var(--_opacity--focus);
	--form-opacity--disabled: var(--_opacity--disabled);

	--form-placeholder-opacity: 0.6;
	--form-placeholder-opacity--focus: 0.4;
	--form-border-opacity--disabled: 0.05;

	--form-opacity--ouline--default: 0.4;
	--form-opacity--ouline--hover: 0.7;

	/* FORM COLORS */
	--form-input-color: var(--contrast-color);
	/* user input color */

	--form-label-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);
	--form-label--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--hover)
	);
	--form-label--active-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--active)
	);
	--form-label--disabled-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--disabled)
	);

	--form-border-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);
	--form-border--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--hover)
	);
	--form-border--disabled-color: hsla(
		var(--_contrast-color),
		var(--form-border-opacity--disabled)
	);

	--form-placeholder-color: hsla(
		var(--_contrast-color),
		var(--form-placeholder-opacity)
	);
	--form-placeholder-color--focus: hsla(
		var(--_contrast-color),
		var(--form-placeholder-opacity--focus)
	);
	--form-placeholder-color--disabled: hsla(
		var(--_contrast-color),
		var(--form-opacity--disabled)
	);

	/* outline */
	--form-outline-label-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);

	--form-outline-border-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--ouline--default)
	);
	--form-outline-border--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--ouline--hover)
	);

	/* TEXT OPACITY */
	--text-opacity--default: var(--_opacity--default);
	--text-opacity----outline--default: 0.7;
	--text-opacity--disabled: 0.5;

	/* TEXT COLORS */
	--text-primary-color: hsla(
		var(--_contrast-color),
		var(--text-opacity--default)
	);
	--text-outline-color: hsla(
		var(--_contrast-color),
		var(--text-opacity----outline--default)
	);
	--text-contrast-color: hsla(var(--_main-color), var(--text-opacity--default));
	--text--disabled-color: hsla(
		var(--_contrast-color),
		var(--text-opacity--disabled)
	);

	/* CHAT COLORS */
	--_chat-client-color: var(--_accent-color);
	--_chat-client-opacity: 0.2;
	--_chat-agent-color: var(--_secondary-color-50);
	--_chat-agent-opacity: 1;

	--chat-client-message-bg-color: hsla(
		var(--_chat-client-color),
		var(--_chat-client-opacity)
	);
	--chat-agent-message-bg-color: hsla(
		var(--_chat-agent-color),
		var(--_chat-agent-opacity)
	);
	--chat-client-attachment-bg-color: hsla(
		var(--_chat-client-color),
		var(--_chat-client-opacity)
	);
	--chat-agent-attachment-bg-color: hsla(
		var(--_chat-agent-color),
		var(--_chat-agent-opacity)
	);
}
/* shared text field colors */
[data-v-9bed30f8]:root {
	/* TODO: move to separate helper-text component */
	/* helper */
	--wt-helper-text-color: var(--text-main-color);
	--wt-helper-text-disabled-color: var(--text-disabled-color);
	--wt-helper-text-invalid-color: var(--text-error-color);

	/* text */
	--wt-text-field-text-color: var(--black);

	/* placeholder */
	--wt-text-field-error-text-color: var(--error-color);
	--wt-text-field-placeholder-color: var(--grey-lighten-1);
	--wt-text-field-placeholder-error-color: var(--error-color);
	--wt-text-field-placeholder-disabled-color: var(--text-disabled-color);

	/* border */
	--wt-text-field-input-border-color: var(--grey-darken-1);
	--wt-text-field-input-border-disabled-color: var(--dp-16-surface-color);
	--wt-text-field-input-border-error-color: var(--error-color);

	/* input bg */
	--wt-text-field-input-background-disabled-color: var(--dp-16-surface-color);

	/* select */
	--wt-text-field-select-option-text-color: var(--text-main-color);
	--wt-text-field-select-option-text-hover-color: var(--primary-on-color);
	--wt-text-field-select-option-text-selected-color: var(--primary-on-color);

	--wt-text-field-select-option-wrapper-border-color: var(
		--dp-22-surface-color
	);
	--wt-text-field-select-option-background-color: var(--dp-22-surface-color);
	--wt-text-field-select-option-background-hover-color: var(
		--primary-light-color
	);
	--wt-text-field-select-option-background-selected-color: var(--primary-color);
}
:root.theme--dark[data-v-9bed30f8] {
	/* text */
	--wt-text-field-text-color: var(--white);

	--wt-text-field-input-border-color: var(--grey-lighten-1);
}
[data-v-9bed30f8]:root {
	/* dp colors */
	--dp-24-surface-color: hsl(0, 0%, 100%);
	--dp-23-surface-color: hsl(225, 20%, 99%);
	--dp-22-surface-color: hsl(225, 20%, 98%);
	--dp-21-surface-color: hsl(225, 20%, 97%);
	--dp-20-surface-color: hsl(225, 20%, 96%);
	--dp-19-surface-color: hsl(225, 20%, 95%);
	--dp-18-surface-color: hsl(225, 20%, 94%);
	--dp-17-surface-color: hsl(225, 20%, 93%);
	--dp-16-surface-color: hsl(225, 20%, 92%);
	--dp-15-surface-color: hsl(225, 20%, 91%);
	--dp-14-surface-color: hsl(225, 20%, 90%);
	--dp-13-surface-color: hsl(225, 20%, 89%);
	--dp-12-surface-color: hsl(225, 20%, 88%);
	--dp-11-surface-color: hsl(225, 20%, 87%);
	--dp-10-surface-color: hsl(225, 20%, 86%);
	--dp-9-surface-color: hsl(225, 20%, 85%);
	--dp-8-surface-color: hsl(225, 20%, 84%);
	--dp-7-surface-color: hsl(225, 20%, 83%);
	--dp-6-surface-color: hsl(225, 20%, 82%);
	--dp-5-surface-color: hsl(225, 20%, 81%);
	--dp-4-surface-color: hsl(225, 20%, 80%);
	--dp-3-surface-color: hsl(225, 20%, 79%);
	--dp-2-surface-color: hsl(225, 20%, 78%);
	--dp-1-surface-color: hsl(225, 20%, 77%);

	/* content wrapper */
	--content-wrapper-color: var(--p-content-background);
	--content-wrapper-hover-color: var(--p-content-hover-background);

	/* context menu */
	--context-menu-background-color: var(--content-wrapper-color);
	--context-menu-option-hover-color: var(--p-surface-50);
	--context-menu-option-disabled-color: var(--p-surface-100);
	--context-menu-option-text-color: var(--text-main-color);
	--context-menu-option-text-disabled-color: var(--text-disabled-color);

	/* success colors */
	--success-color: var(--green-darken-4);
	--success-hover-color: var(--green-darken-3);
	--success-light-color: var(--green-lighten-4);
	--success-on-color: var(--white);

	/* warning colors */
	--warning-color: var(--orange-accent-2);
	--warning-hover-color: var(--orange-accent-1);
	--warning-light-color: var(--orange-lighten-4);
	--warning-on-color: var(--black);

	/* error colors */
	--error-color: var(--red-accent-2);
	--error-hover-color: var(--red-lighten-2);
	--error-light-color: var(--red-lighten-4);
	--error-on-color: var(--white);

	/* info colors */
	--info-color: var(--blue-darken-1);
	--info-hover-color: var(--blue-lighten-1);
	--info-light-color: var(--blue-lighten-4);
	--info-on-color: var(--black);

	/* job colors */
	--job-color: var(--blue-darken-1);
	--job-hover-color: var(--blue-lighten-1);
	--job-light-color: var(--blue-lighten-4);
	--job-on-color: var(--black);

	/* chat colors */
	--chat-color: var(--indigo-accent-2);
	--chat-hover-color: var(--indigo-accent-1);
	--chat-light-color: var(--indigo-lighten-4);
	--chat-on-color: var(--black);

	/* transfer colors */
	--transfer-color: var(--indigo-lighten-1);
	--transfer-hover-color: var(--indigo-lighten-2);
	--transfer-light-color: var(--indigo-lighten-4);
	--transfer-on-color: var(--white);

	/* primary colors */
	--primary-color: var(--amber-accent-3);
	--primary-hover-color: var(--amber-accent-2);
	--primary-light-color: var(--amber-lighten-3);
	--primary-on-color: var(--black);

	/* secondary colors */
	--secondary-color: var(--dp-10-surface-color);
	--secondary-hover-color: var(--dp-14-surface-color);
	--secondary-light-color: var(--dp-16-surface-color);
	--secondary-on-color: var(--grey-darken-4);

	/* email colors */
	--email-color: var(--blue-darken-3);
	--email-hover-color: var(--blue-darken-2);
	--email-light-color: var(--blue-lighten-2);
	--email-on-color: var(--black);

	/* accent colors */
	--accent-color: var(--purple-lighten-1);
	--sub-accent-color: var(--indigo-darken-3);

	/* typography colors */
	--text-main-color: var(--grey-darken-3);
	--text-disabled-color: var(--grey-lighten-1);
	--text-error-color: var(--error-color);
	--text-success-color: var(--success-color);
	--text-link-color: var(--info-color);
	/* typography on colors */
	--text-on-brand-color: var(--white);
}
:root.theme--dark[data-v-9bed30f8] {
	/* dp colors */
	--dp-24-surface-color: hsl(225, 20%, 25%);
	--dp-23-surface-color: hsl(225, 20%, 24%);
	--dp-22-surface-color: hsl(225, 20%, 23%);
	--dp-21-surface-color: hsl(225, 20%, 22%);
	--dp-20-surface-color: hsl(225, 20%, 21%);
	--dp-19-surface-color: hsl(225, 20%, 20%);
	--dp-18-surface-color: hsl(225, 20%, 19%);
	--dp-17-surface-color: hsl(225, 20%, 18%);
	--dp-16-surface-color: hsl(225, 20%, 17%);
	--dp-15-surface-color: hsl(225, 20%, 16%);
	--dp-14-surface-color: hsl(225, 20%, 15%);
	--dp-13-surface-color: hsl(225, 20%, 14%);
	--dp-12-surface-color: hsl(225, 20%, 13%);
	--dp-11-surface-color: hsl(225, 20%, 12%);
	--dp-10-surface-color: hsl(225, 20%, 11%);
	--dp-9-surface-color: hsl(225, 20%, 10%);
	--dp-8-surface-color: hsl(225, 20%, 9%);
	--dp-7-surface-color: hsl(225, 20%, 8%);
	--dp-6-surface-color: hsl(225, 20%, 7%);
	--dp-5-surface-color: hsl(225, 20%, 6%);
	--dp-4-surface-color: hsl(225, 20%, 5%);
	--dp-3-surface-color: hsl(225, 20%, 4%);
	--dp-2-surface-color: hsl(225, 20%, 3%);
	--dp-1-surface-color: hsl(225, 20%, 2%);

	/* success colors */
	--success-color: var(--green-darken-4);
	--success-hover-color: var(--green-darken-3);
	--success-light-color: var(--green-lighten-3);
	--success-on-color: var(--black);

	/* warning colors */
	--warning-color: var(--orange-accent-2);
	--warning-hover-color: var(--orange-accent-1);
	--warning-light-color: var(--orange-lighten-3);
	--warning-on-color: var(--black);

	/* error colors */
	--error-color: var(--red-accent-2);
	--error-hover-color: var(--red-lighten-2);
	--error-light-color: var(--red-lighten-3);
	--error-on-color: var(--black);

	/* info colors */
	--info-color: var(--blue-darken-1);
	--info-hover-color: var(--blue-lighten-1);
	--info-light-color: var(--blue-lighten-3);
	--info-on-color: var(--white);

	/* job colors */
	--job-color: var(--blue-darken-1);
	--job-hover-color: var(--blue-lighten-1);
	--job-light-color: var(--blue-lighten-3);
	--job-on-color: var(--white);

	/* chat colors */
	--chat-color: var(--indigo-accent-2);
	--chat-hover-color: var(--indigo-accent-1);
	--chat-light-color: var(--indigo-lighten-3);
	--chat-on-color: var(--white);

	/* transfer colors */
	--transfer-color: var(--indigo-darken-1);
	--transfer-hover-color: var(--indigo-lighten-1);
	--transfer-light-color: var(--indigo-lighten-4);
	--transfer-on-color: var(--white);

	/* primary colors */
	--primary-color: var(--amber-darken-2);
	--primary-hover-color: var(--amber-darken-1);
	--primary-light-color: var(--amber-darken-4);
	--primary-on-color: var(--black);

	/* secondary colors */
	--secondary-on-color: var(--grey-lighten-4);

	/* email colors */
	--email-color: var(--blue-darken-3);
	--email-hover-color: var(--blue-darken-2);
	--email-light-color: var(--blue-lighten-1);
	--email-on-color: var(--white);

	/* accent colors */
	--accent-color: var(--purple-lighten-1);
	--sub-accent-color: var(--indigo-darken-3);

	/* typography colors */
	--text-main-color: var(--grey-lighten-3);
	--text-disabled-color: var(--grey-darken-1);
	--text-error-color: var(--error-color);
	--text-success-color: var(--success-color);
	--text-link-color: var(--info-color);
	/* typography on colors */
	--text-on-brand-color: var(--white);

	/* context menu */
	--context-menu-option-hover-color: var(--p-surface-900);
	--context-menu-option-disabled-color: var(--p-surface-850);
}
[data-v-9bed30f8]:root {
	--_elevation-color: hsla(0, 0%, 0%, 0.05);
	--elevation-1: 0px 0px 4px 1px var(--_elevation-color);
	--elevation-2: 0px 0px 6px 2px var(--_elevation-color);
	--elevation-3: 0px 0px 8px 3px var(--_elevation-color);
	--elevation-4: 0px 0px 10px 4px var(--_elevation-color);
	--elevation-5: 0px 0px 12px 5px var(--_elevation-color);
	--elevation-6: 0px 0px 14px 6px var(--_elevation-color);
	--elevation-7: 0px 0px 16px 7px var(--_elevation-color);
	--elevation-8: 0px 0px 18px 8px var(--_elevation-color);
	--elevation-9: 0px 0px 20px 9px var(--_elevation-color);
	--elevation-10: 0px 0px 22px 10px var(--_elevation-color);
}
[data-v-9bed30f8]:root {
	/* Start point */
	--_spacing-multiplicator: 8px;

	/* Spacings */
	--spacing-3xs: calc(var(--_spacing-multiplicator) / 4);
	--spacing-2xs: calc(var(--_spacing-multiplicator) / 2);
	--spacing-xs: calc(var(--_spacing-multiplicator) * 1);
	--spacing-sm: calc(var(--_spacing-multiplicator) * 2);
	--spacing-md: calc(var(--_spacing-multiplicator) * 3);
	--spacing-lg: calc(var(--_spacing-multiplicator) * 4);
	--spacing-xl: calc(var(--_spacing-multiplicator) * 5);
	--spacing-2xl: calc(var(--_spacing-multiplicator) * 6);
	--spacing-3xl: calc(var(--_spacing-multiplicator) * 7);
}
[data-v-9bed30f8]:root {
	--transition-fast: 0.3s;
	--transition-normal: 0.6s;
	--transition-slow: 0.9s;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Thin-B0oow3R9.woff2")
		format("woff2");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ThinItalic-Df5kGryu.woff2")
		format("woff2");
	font-weight: 100;
	font-style: italic;
	font-display: swap;
	font-display: swap;
	font-display: swap;
	font-display: swap;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraLight-BLVvTz6v.woff2")
		format("woff2");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraLightItalic-Cm43v-Vf.woff2")
		format("woff2");
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Light-De9MYPOT.woff2")
		format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-LightItalic-DV9n9KIB.woff2")
		format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Regular-Cu1XIIHs.woff2")
		format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Italic-DdaXnPiX.woff2")
		format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Medium-DJODbTHz.woff2")
		format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-MediumItalic-Dx3RkM4S.woff2")
		format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-SemiBold-DwmoiGAe.woff2")
		format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-SemiBoldItalic-DUAaODp3.woff2")
		format("woff2");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Bold-DYLVQlxQ.woff2")
		format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-BoldItalic-DSEOJb3S.woff2")
		format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraBold-CLYj8xrZ.woff2")
		format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraBoldItalic-DikM7EMV.woff2")
		format("woff2");
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Black-C-enK_Oz.woff2")
		format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-BlackItalic-D65VYM31.woff2")
		format("woff2");
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

/*
This font was added for use in wt-input-text in case we need to hide the input value,like in a password input,
but without type="password" on input. It was added because not all brawsers are support 'text-security: disc' property,
So this font changes text to discs in these cases
*/
@font-face {
	font-family: "text-security-disc";
	src: url("data:font/woff2;base64,d09GMgABAAAAAAMQAAoAAAAACAAAAALIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAggAKcHILBgABNgIkAwYEIAWJSAcvG0gHEZWcjBRfHNjNPraIGU7SkQoTFkXoFRjv8FUcbDmIj4fv117P3fcRQioFRseKQUaWwJVVVVWlqUSWQCqzAXDOVp+vqsnVapWIlhw7yBoEhhMnHFYCHMKOvkR03bf6e9V3k5C0pdB3/e9T0qkd4MMPltYAwwl4rBdKBw5Q6WQJiMe2JfXQzxqDHiJHyBCRoyWk9D0eokh2Ww9se/9MHLHYawD4n5f/Ls/b722ATVs377KRPE9jOdKY88cWRA5gIghJDQ1N8AfoA89ygvcYf4pg/Ec+TgiEgQwZEhIKKKCIIkoooYwyKqigiipqqKGOOhpooIkmWmihjTY66PxOyEABGSZiKqAAQnQ6B6/n1u98x4262u0Js8WuS9OPfJk+/cuR6bOAtTcIJOZcuOuj7bV/Kyl9h9f38fFYbrefcSYrI8lAQDMUDxExOyyGlfQ/vVsg0xGArgJ1t5MoVLEcA2Gq5ci0HECy2rnswoOiU55kl1xUjEQJdXtiFM3sEWm9lqWFmgZbjP05LRVBvbqdHux9wpyGnbGWEX6p5JEHp+lXirTnJ5QhZa5Rrsq9D67r+24QRrdzndcmBzUrQ9xXb6hp/3Kt1h1kLEFUI/CLVKdW/dqtdrVRNqpIyLr2KxU5WYVXmZuskh+VXqlluyjNMNPGBGcj6JOF0MC+M9Ucc48RhDxCB6QQzssN7C3m8bmbGCrG7VXU5FY+yGdUakVOvwKllMExtmsLwzMsVQFGpi5UbHxfXhb762Voh6fTcKeW03OxxicY73eTpa8bxhIzeWR+wnoJ6j/4kBejs2xf69j7pOSUzmzPCqNy4cojtlsLwpBhb++AtcBHQcpyGZgkYrGUBTwXn2/RF12BjlQTI1XSvANELqO18DPB+UIyNkJSZBsoX7wh7DlfsyVfTshpuSjLSv9H3fwD+a36nwAAkBFZ5aSOqp+7Bg==")
		format("woff2");
	font-weight: 100;
	font-style: normal;
}
.fade-enter-active[data-v-9bed30f8],
.fade-leave-active[data-v-9bed30f8] {
	transition: opacity var(--transition);
}
.fade-enter[data-v-9bed30f8],
.fade-leave-to[data-v-9bed30f8] {
	opacity: 0;
}
/*
  Classes for direct use in placeholder-like elements styling
   (e.g. vue-multiselect .multiselect__placeholder which is technically a span)
*/
.wt-placeholder[data-v-9bed30f8] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-color);
}
.wt-placeholder--disabled[data-v-9bed30f8] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-disabled-color);
}
.wt-placeholder--error[data-v-9bed30f8] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-error-color);
}
.d-none[data-v-9bed30f8] {
	display: none;
}
@media only screen and (max-width: 960px) {
.d-none-sm[data-v-9bed30f8] {
		display: none;
}
.d-block-sm[data-v-9bed30f8] {
		display: block;
}
}
@media only screen and (max-width: 600px) {
.d-none-xs[data-v-9bed30f8] {
		display: none;
}
.d-block-xs[data-v-9bed30f8] {
		display: block;
}
}
/* Component Variables - Centralized to avoid duplication */
/* This file imports all component-specific CSS variables once globally */
[data-v-9bed30f8]:root {
	--wt-app-header-min-height: 40px;
	--wt-app-header-padding: var(--spacing-xs) var(--spacing-sm);
	--wt-app-header-background: var(--dp-9-surface-color);

	--wt-app-header-content-gap: var(--spacing-sm);
	--wt-app-header-content-panel-margin: var(--spacing-2xs);
	--wt-app-header-content-bg-color: var(--content-wrapper-color);
	--wt-app-header-content-z-index: 11;

	--wt-app-navigator-max-height: 80vh;
	--wt-app-navigator-padding: var(--wt-app-header-content-gap);
	--wt-app-navigator-item-width: 128px;
	--wt-app-navigator-item-height: 135px;
	--wt-app-navigator-item-padding: var(--spacing-xs);
	--wt-app-navigator-item-gap: var(--wt-app-header-content-gap);
	--wt-app-navigator-item-border: 1px solid;
	--wt-app-navigator-item-border-color: var(--secondary-color);
	--wt-app-navigator-item-pic-size: 88px;
	--wt-app-navigator-item-border-color--hover: var(--primary-color);

	--wt-header-actions-min-width: 120px;
	--wt-header-actions-content-sections-gap: var(--spacing-lg);
	--wt-header-actions-padding: var(--wt-app-header-content-gap);
	--wt-header-actions-action-bg-color--hover: var(--secondary-color);
	--wt-header-actions-action-link-padding: var(--spacing-xs);
}
[data-v-9bed30f8]:root {
	--wt-avatar-size--size-xs: calc(var(--_spacing-multiplicator) * 3);
	--wt-avatar-size--size-sm: calc(var(--_spacing-multiplicator) * 4);
	--wt-avatar-size--size-md: calc(var(--_spacing-multiplicator) * 5);
	--wt-avatar-size--size-lg: calc(var(--_spacing-multiplicator) * 7);
	--wt-avatar-size--size-xl: calc(var(--_spacing-multiplicator) * 9);
	--wt-avatar-size--size-2xl: calc(var(--_spacing-multiplicator) * 12);
	--wt-avatar-size--size-3xl: calc(var(--_spacing-multiplicator) * 16);

	--wt-avatar-size: var(--wt-avatar-size--size-md);

	--online-color: var(--success-color);
	--dnd-color: var(--warning-color);
	--busy-color: var(--error-color);
	--offline-color: var(--disabled-color);
	--pause-color: var(--warning-color);

	--wt-avatar-text-color: var(--white);

	--wt-avatar-letters-p1-color: var(--red-lighten-2);
	--wt-avatar-letters-p2-color: var(--purple-lighten-2);
	--wt-avatar-letters-p3-color: var(--deep-purple-lighten-2);
	--wt-avatar-letters-p4-color: var(--indigo-lighten-2);
	--wt-avatar-letters-p5-color: var(--blue-lighten-1);
	--wt-avatar-letters-p6-color: var(--cyan-lighten-1);
	--wt-avatar-letters-p7-color: var(--teal-darken-3);
	--wt-avatar-letters-p8-color: var(--green-darken-2);
	--wt-avatar-letters-p9-color: var(--lime-darken-3);
	--wt-avatar-letters-p10-color: var(--yellow-darken-3);
	--wt-avatar-letters-p11-color: var(--amber-lighten-2);
	--wt-avatar-letters-p12-color: var(--orange-darken-1);
	--wt-avatar-letters-p13-color: var(--deep-purple-lighten-1);
}
:root.theme--dark[data-v-9bed30f8] {
	--wt-avatar-text-color: var(--black);
}
[data-v-9bed30f8]:root {
	--wt-badge-size: var(--spacing-xs);
}
[data-v-9bed30f8]:root {
	--breadcrumb-indicator-size: 4px;
	--breadcrumb-gap: var(--spacing-sm);
	--breadcrumb-dot-gap: var(--spacing-2xs);
	--breadcrumb-indicator-color: var(--icon-color);
	--breadcrumb-accent-indicator-color: var(--primary-color);
}
[data-v-9bed30f8]:root {
	--button-select-button-padding: var(--spacing-xs) var(--spacing-sm);

	--button-select-icon-button-padding: var(--spacing-xs);

	--button-select-buttons-gap: 1px;
}
[data-v-9bed30f8]:root {
	--btn-min-width: 90px;
	--btn-min-width--size-sm: 70px;
	--btn-padding: var(--spacing-xs) var(--spacing-sm);
	--btn-padding--size-sm: var(--spacing-2xs) var(--spacing-xs);
	/* COLORS */
	--btn-primary-color: var(--primary-color);
	--btn-primary-hover-color: var(--primary-hover-color);
	--btn-primary-text-color: var(--primary-on-color);

	--btn-secondary-color: var(--dp-10-surface-color);
	--btn-secondary-hover-color: var(--dp-14-surface-color);
	--btn-secondary-text-color: var(--grey-darken-4);

	--btn-success-color: var(--success-color);
	--btn-success-hover-color: var(--success-hover-color);
	--btn-success-text-color: var(--grey-lighten-5);

	--btn-info-color: var(--info-color);
	--btn-info-hover-color: var(--info-hover-color);
	--btn-info-text-color: var(--grey-lighten-5);

	--btn-job-color: var(--job-color);
	--btn-job-hover-color: var(--job-hover-color);
	--btn-job-text-color: var(--grey-lighten-5);

	--btn-error-color: var(--error-color);
	--btn-error-hover-color: var(--error-hover-color);
	--btn-error-text-color: var(--grey-lighten-5);

	--btn-transfer-color: var(--transfer-color);
	--btn-transfer-hover-color: var(--transfer-hover-color);
	--btn-transfer-text-color: var(--transfer-on-color);

	--btn-disabled-color: var(--dp-16-surface-color);
	--btn-disabled-text-color: var(--grey-darken-1);
}
:root.theme--dark[data-v-9bed30f8] {
	--btn-secondary-text-color: var(--grey-lighten-4);
}
[data-v-9bed30f8]:root {
	--wt-card-border-radius: var(--p-content-border-radius);
	--wt-card-padding: var(--spacing-sm);
}
[data-v-9bed30f8]:root {
	--checkbox-icon-margin: var(--spacing-xs);
}
[data-v-9bed30f8]:root {
	--chip-padding: var(--spacing-2xs) var(--spacing-sm);
	--chip-border-radius: var(--spacing-lg);

	--wt-chip-main-background-color: var(--primary-light-color);
	--wt-chip-main-text-color: var(--primary-on-color);

	--wt-chip-primary-background-color: var(--primary-color);
	--wt-chip-primary-text-color: var(--primary-on-color);

	--wt-chip-secondary-background-color: var(--secondary-color);
	--wt-chip-secondary-text-color: var(--secondary-on-color);

	--wt-chip-success-background-color: var(--success-color);
	--wt-chip-success-text-color: var(--success-on-color);

	--wt-chip-warning-background-color: var(--warning-color);
	--wt-chip-warning-text-color: var(--warning-on-color);

	--wt-chip-error-background-color: var(--error-color);
	--wt-chip-error-text-color: var(--error-on-color);

	--wt-chip-transfer-background-color: var(--transfer-color);
	--wt-chip-transfer-text-color: var(--transfer-on-color);
}
[data-v-9bed30f8]:root {
	--wt-context-menu-option-padding: var(--spacing-xs);

	--wt-context-menu-background-color: var(--context-menu-background-color);
	--wt-context-menu-option-text-color: var(--context-menu-option-text-color);
	--wt-context-menu-option-background-hover-color: var(
		--context-menu-option-hover-color
	);
	--wt-context-menu-option-background-disabled-color: var(
		--context-menu-option-disabled-color
	);
	--wt-context-menu-option-text-disabled-color: var(
		--context-menu-option-text-disabled-color
	);
}
:root {
&[data-v-9bed30f8]{
	/*General*/
	--dp-font-family: "Montserrat";
	--dp-border-radius: var(--border-radius);
	/*Configurable border-radius*/
	--dp-cell-border-radius: var(--border-radius);
	/*Specific border radius for the calendar cell*/

	/*Sizing*/
	--dp-button-heigh: 32px;
	/*Size for buttons in overlays*/
	--dp-month-year-row-height: 24px;
	/*Height of the month-year select row*/
	--dp-month-year-row-button-size: 24px;
	/*Specific height for the next/previous buttons*/
	--dp-button-icon-height: var(--icon-md-size);
	/*Icon sizing in buttons*/
	--dp-cell-size: 24px;
	/*Width and height of calendar cell*/
	--dp-cell-padding: var(--spacing-2xs);
	/*Padding in the cell*/
	--dp-common-padding: var(--spacing-xs);
	/*Common padding used*/
	--dp-input-icon-padding: calc(var(--icon-md-size) + 2 * var(--spacing-xs));
	/*Padding on the left side of the input if icon is present*/
	--dp-input-padding: calc(var(--spacing-xs) - 1px)
		calc(var(--icon-md-size) + 2 * var(--spacing-xs));
	/*Padding in the input*/
	/* --dp-menu-min-width: 260px; Adjust the min width of the menu */
	--dp-action-buttons-padding: 2px 5px;
	/*Adjust padding for the action buttons in action row*/
	--dp-row-maring: var(--spacing-3xs);
	/*Adjust the spacing between rows in the calendar*/
	--dp-calendar-header-cell-padding: 0.5rem;
	/*Adjust padding in calendar header cells*/
	--dp-two-calendars-spacing: 10px;
	/*Space between multiple calendars*/
	--dp-overlay-col-padding: 3px;
	/*Padding in the overlay column*/
	--dp-time-inc-dec-button-size: 24px;
	/*Sizing for arrow buttons in the time picker*/

	/*Font sizes*/
	--dp-font-size: 12px;
	/*Default font-size*/
	--dp-preview-font-size: 12px;
	/*Font size of the date preview in the action row*/
	--dp-time-font-size: 12px;
	/*Font size in the time picker*/

	/*Transitions*/
	--dp-animation-duration: var(--transition);
	/*Transition duration*/
	--dp-menu-appear-transition-timing: cubic-bezier(0.4, 0, 1, 1);
	/*Timing on menu appear animation*/
	--dp-transition-timing: ease-out;
	/*Timing on slide animations*/
	}
.dp__theme_light[data-v-9bed30f8] {
		--dp-background-color: var(--content-wrapper-color);
		--dp-text-color: var(--text-main-color);
		/* --dp-hover-color: var(--secondary-color-50); */
		/* --dp-hover-text-color: var(--contrast-color); */
		--dp-hover-icon-color: var(--icon-btn-hover-color);
		--dp-primary-color: var(--primary-color);
		--dp-primary-text-color: var(--primary-on-color);
		--dp-secondary-color: var(--secondary-color);
		--dp-border-color: var(--wt-text-field-input-border-color);
		--dp-menu-border-color: transparent;
		/* --dp-border-color-hover: var(--form-border--hover-color); */
		--dp-disabled-color: var(--wt-text-field-input-background-disabled-color);
		--dp-success-color: var(--success-color);
		--dp-icon-color: var(--icon-color);
		--dp-danger-color: var(--error-color);
		/* --dp-scroll-bar-background: #f3f3f3; */
		/* --dp-scroll-bar-color: #959595; */
		/* --dp-success-color-disabled: #a3d9b1; */
		/* --dp-highlight-color: rgba(25, 118, 210, 0.1); */
}
}
[data-v-9bed30f8]:root {
	--divider-border: 1px solid;
	--divider-border-color: var(--grey-lighten-4);
}
:root.theme--dark[data-v-9bed30f8] {
	--divider-border-color: var(--grey-darken-2);
}
[data-v-9bed30f8]:root {
	--wt-dual-panel-padding: var(--spacing-sm);
	--wt-dual-panel-section-padding: var(--spacing-sm);
	--wt-dual-panel-section-gap: var(--spacing-sm);

	--wt-dual-panel-background-color: var(--grey-lighten-5);
	--wt-dual-panel-content-wrapper-color: var(--content-wrapper-color);
}
:root.theme--dark[data-v-9bed30f8] {
	--wt-dual-panel-background-color: var(--grey-darken-4);
}
[data-v-9bed30f8]:root {
	--wt-dummy-text-color: var(--text-main-color);
}
[data-v-9bed30f8]:root {
	--wt-empty-min-width: 280px;
	--wt-empty-width: 600px;
	--wt-empty-max-width: 80vw;
}
[data-v-9bed30f8]:root {
	--wt-error-page-background-color: var(--content-wrapper-color);
	--wt-error-page-text-color: var(--text-main-color);
}
[data-v-9bed30f8]:root {
	--wt-expansion-panel-header-background-color: var(--dp-16-surface-color);
	--wt-expansion-panel-header-title-color: var(--text-main-color);
	--wt-expansion-panel-content-background-color: var(--content-wrapper-color);
	--wt-expansion-panel-content-text-color: var(--text-main-color);
}
[data-v-9bed30f8]:root {
	--headline-min-height: 40px; /* button/search-bar height */
	--headline-title-margin: var(--spacing-sm);
	--wt-headline-background-color: var(--content-wrapper-color);
}
[data-v-9bed30f8]:root {
	--icon-btn-hover-color: var(--grey-darken-5);
}
:root.theme--dark[data-v-9bed30f8] {
	--icon-btn-hover-color: var(--grey-lighten-5);
}
[data-v-9bed30f8]:root {
	--icon-8xl-size: 96px;
	--icon-7xl-size: 88px;
	--icon-6xl-size: 80px;
	--icon-5xl-size: 72px;
	--icon-4xl-size: 64px;
	--icon-3xl-size: 56px;
	--icon-2xl-size: 48px;
	--icon-xl-size: 40px;
	--icon-lg-size: 32px;
	--icon-md-size: 24px;
	--icon-sm-size: 16px;
	--icon-xs-size: 8px;

	--icon-color: var(--grey-darken-2);
	--icon-active-color: var(--grey-darken-4);
	--icon-primary-color: var(--p-primary-color);
	--icon-error-color: var(--p-error-color);
	--icon-success-color: var(--p-success-color);
	--icon-warning-color: var(--p-warn-color);
	--icon-on-dark-color: var(--white);
	--icon-on-light-color: var(--grey-darken-3);
	--icon-on-primary-color: var(--primary-on-color);
	--icon-info-color: var(--p-info-color);
	--icon-chat-color: var(--p-chat-color);
	--icon-transfer-color: var(--p-transfer-color);
	--icon-job-color: var(--p-task-color);
	--icon-disabled-color: var(--grey-lighten-4);
}
:root.theme--dark[data-v-9bed30f8] {
	--icon-color: var(--grey-lighten-2);
	--icon-active-color: var(--grey-lighten-4);
	--icon-disabled-color: var(--grey-darken-2);
}
[data-v-9bed30f8]:root {
	--wt-indicator-dot-size--size-sm: var(--spacing-xs);
	--wt-indicator-dot-size--size-md: var(--spacing-sm);
	--wt-indicator-dot-size: var(--wt-indicator-size--size-md);
	--wt-indicator-dot-offset: var(--spacing-2xs);

	--wt-indicator-text-margin: var(--spacing-2xs);

	--wt-indicator-text-color: var(--text-main-color);
	--wt-indicator-primary-color: var(--primary-color);
	--wt-indicator-secondary-color: var(--grey-lighten-3);
	--wt-indicator-disabled-color: var(--grey-lighten-4);
	--wt-indicator-success-color: var(--success-color);
	--wt-indicator-error-color: var(--error-color);
	--wt-indicator-transfer-color: var(--transfer-color);
	--wt-indicator-break-out-color: var(--warning-color);
	--wt-indicator-info-color: var(--info-color);
	--wt-indicator-final-status-color: var(--green-accent-4);
	--wt-indicator-initial-status-color: var(--red-accent-2);
	--wt-indicator-other-status-color: var(--orange-accent-2);
}
:root.theme--dark[data-v-9bed30f8] {
	--wt-indicator-secondary-color: var(--grey-darken-1);
	--wt-indicator-disabled-color: var(--grey-darken-2);
}
[data-v-9bed30f8]:root {
	--input-padding: calc(var(--spacing-xs) - 1px); /* - border */
	--input-border: 1px solid;
	--input-icon-margin: var(--spacing-xs);

	--input-after-wrapper-gap: var(--spacing-2xs);
}
[data-v-9bed30f8]:root {
	--wt-item-link-text-color: var(--text-main-color);
}
[data-v-9bed30f8]:root {
	--wt-label-padding: var(--spacing-2xs) var(--spacing-xs);

	--wt-label-color: var(--p-form-field-color);
	--wt-label-error-color: var(--p-error-color);
	--wt-label-disabled-color: var(--p-form-field-disabled-color);
}
[data-v-9bed30f8]:root {
	--load-bar-height: 6px;
	--load-bar-padding: 1px;
	--load-bar-border-radius: 50px;

	--wt-load-bar-primary-color: var(--primary-on-color);
	--wt-load-bar-error-color: var(--p-error-color);
	--wt-load-bar-warning-color: var(--p-warn-color);
	--wt-load-bar-success-color: var(--p-success-color);
	--wt-load-bar-info-color: var(--p-info-color);
}
[data-v-9bed30f8]:root {
	--loader-size: 44px;
	--loader-dot-size: 6px;
	--loader-animation-duration: 3s;

	--wt-loader-md-path-color: var(--grey-darken-2);
	--wt-loader-md-point-color: var(--primary-color);

	--wt-loader-sm-path-main-color: var(--grey-darken-2);
	--wt-loader-sm-path-icon-color: var(--icon-color);
	--wt-loader-sm-path-on-light-color: var(--icon-on-light-color);
	--wt-loader-sm-path-on-dark-color: var(--icon-on-dark-color);
}
:root.theme--dark[data-v-9bed30f8] {
	--wt-loader-md-path-color: var(--grey-lighten-2);

	--wt-loader-sm-path-main-color: var(--grey-lighten-2);
}
[data-v-9bed30f8]:root {
	--wt-logo-width: 84px;
	--wt-logo-height: 16px;
}
[data-v-9bed30f8]:root {
	--wt-navigation-bar-width: 340px;
	--wt-navigation-bar-z-index: 10;
	--wt-navigation-bar-padding: var(--spacing-sm);

	--wt-navigation-bar-header-padding: var(--spacing-xs);
	--wt-navigation-bar-app-pic-height: 24px;

	--wt-navigation-bar-list-padding: var(--wt-navigation-bar-padding);
	--wt-navigation-bar-link-padding: var(--wt-navigation-bar-padding);
	--wt-navigation-bar-subnav-padding-left: var(--spacing-lg);
	--wt-navigation-bar-active-expansion-flag-width: 5px;
	--wt-navigation-bar-active-expansion-name-max-width: calc(
		100% -
		var(--icon-md-size) -
		var(--spacing-xs)
	);

	--wt-navigation-bar-background-color: var(--dp-18-surface-color);
	--wt-navigation-bar-option-text-color: var(--text-main-color);
	--wt-navigation-bar-option-text-active-color: var(--primary-on-color);
	--wt-navigation-bar-option-background-color: var(
		--wt-navigation-bar-background-color
	);
	--wt-navigation-bar-option-background-hover-color: var(--dp-20-surface-color);
	--wt-navigation-bar-option-background-active-color: var(
		--primary-light-color
	);
	--wt-navigation-bar-expansion-ribbon-color: var(--primary-color);
}
[data-v-9bed30f8]:root {
	--notifications-bar-max-height: 60%;
	--notifications-bar-corner-margin: var(--spacing-sm);
	--notifications-bar-notifications-margin: 0 0 var(--spacing-xs) auto;
	--notifications-bar-z-index: 101;
}
[data-v-9bed30f8]:root {
	--page-wrapper-padding: var(--spacing-sm);
	--page-wrapper-section-padding: var(--spacing-sm);
	--page-wrapper-section-gap: var(--spacing-sm);

	--wt-page-wrapper-background-color: var(--p-surface-50);
	--wt-page-wrapper-content-wrapper-color: var(--content-wrapper-color);
	/* --content-wrapper-border-radius: var(--p-border-radius-lg); */
}
:root.theme--dark[data-v-9bed30f8] {
	--wt-page-wrapper-background-color: var(--p-surface-850);
}
[data-v-9bed30f8]:root {
	--pagination-gap: var(--spacing-xs);
	--pagination-size-input-width: 100px;
}
.wt-player[data-v-9bed30f8] {
	--plyr-color-main: var(--primary-color);
	--plyr-audio-control-color: var(--icon-color);
	--plyr-audio-control-color-hover: var(--icon-btn-hover-color);
	--plyr-audio-controls-background: var(--content-wrapper-color);
	--plyr-controls-icon-size: var(--icon-sm-size);
	--plyr-controls-icon-padding: var(--spacing-2xs);
	--plyr-audio-control-background-hover: transparent;
	--plyr-audio-progress-buffered-background: var(
		--dp-14-surface-color
	); /* loaded color */
	--wt-player-audio-progress-background: var(
		--wt-slider-background-color
	); /* not played color */
	--plyr-tooltip-background: var(--wt-tooltip-background-color);
	--plyr-tooltip-color: var(--wt-tooltip-text-color);
	/* --plyr-control-toggle-checked-background: var(--main-color); */
	--player-close-icon-transform-translate-x: var(--spacing-md);
	/* "-1 * var" for use the negative value of a variable */
	--player-close-icon-transform-translate-y: calc(-1 * var(--spacing-md));

	--wt-slider-border: 1px solid var(--secondary-color);
	--wt-slider-pointer-radius: 50%;
	--wt-slider-pointer-background-color: var(--dp-24-surface-color);
	--wt-slider-pointer-border-color: var(--dp-10-surface-color);
	--wt-slider-pointer-size: 16px;
}
[data-v-9bed30f8]:root {
	--popup-wrapper-z-index: 12;

	--popup-shadow-opacity: 0.8;
	--wt-popup-shadow-color: hsla(0, 0%, 0%, var(--popup-shadow-opacity));

	--wt-popup-size-xs: 300px;
	--wt-popup-size-sm: 500px;
	--wt-popup-size-md: 800px;
	--wt-popup-size-lg: 1140px;

	--popup-max-height: 90%;

	--wt-popup-background-color: var(--dp-24-surface-color);
	--popup-sections-gap: var(--spacing-xs);
	--popup-padding: var(--spacing-sm);

	--popup-header-padding: var(--spacing-xs);
	--wt-popup-header-background-color: var(--dp-18-surface-color);
	--wt-popup-header-text-color: var(--text-main-color);

	--popup-main-section-padding-right: var(--spacing-xs); /* scroll offset */

	--popup-actions-padding: var(--spacing-xs);
}
[data-v-9bed30f8]:root {
	--wt-progress-bar-height: 12px;
	--wt-progress-bar-padding: var(--spacing-3xs);
	--wt-progress-bar-border-radius: var(--wt-progress-bar-padding);

	--wt-progress-bar-background-color: var(--dp-1-surface-color);
	--wt-progress-bar-background-primary-color: var(--primary-color);
	--wt-progress-bar-background-secondary-color: var(--dp-20-surface-color);
	--wt-progress-bar-background-success-color: var(--success-color);
	--wt-progress-bar-background-error-color: var(--error-color);
	--wt-progress-bar-background-warning-color: var(--warning-color);
}
[data-v-9bed30f8]:root {
	--radio-icon-margin: var(--spacing-xs);
	--radio-checkmark-size: 18px;
	--radio-bullet-size: 8px;
	--radio-border: 2px solid;
}
[data-v-9bed30f8]:root {
	--rounded-action-border-size: 2px;
	--rounded-action-padding: calc(
		var(--spacing-xs) -
		var(--rounded-action-border-size)
	);

	--rounded-action-rounded-border-radius: var(--border-radius--pill);

	--rounded-action-bg-color: var(--dp-18-surface-color);
	--rounded-action-bg-hover-color: var(--dp-20-surface-color);

	--rounded-action-active-color: var(--dp-10-surface-color);
}
[data-v-9bed30f8]:root {
	--wt-search-bar-width: 270px;
}
[data-v-9bed30f8]:root {
	--wt-slider-pointer-size: 16px;
	--wt-slider-height: var(--wt-slider-pointer-size);

	--wt-slider-width: 100%;
	--wt-slider-input-height: 8px;
	--wt-slider-border: 1px solid var(--secondary-color);
	--wt-slider-background-color: var(--dp-1-surface-color);
	--wt-slider-background-completed-color: var(--primary-color);

	--wt-slider-pointer-background-color: var(--dp-24-surface-color);
	--wt-slider-pointer-background-hover-color: var(--dp-22-surface-color);
	--wt-slider-pointer-border-color: var(--dp-10-surface-color);

	--wt-slider-pointer-radius: 50%;

	--wt-slider-vertical-container-translation: translate(2px);
	--wt-slider-vertical-transform: translate(-100%, 0) rotate(-90deg);
	--wt-slider-vertical-transform-origin: 100% 0;
}
[data-v-9bed30f8]:root {
	--wt-status-select-padding: 0 calc(var(--icon-size-md) + var(--spacing-xs)) 0
		0; /* reset wt-select padding, but preserve arrow icon padding */

	--wt-status-select-option-text-color: var(--text-main-color);
	--wt-status-select-option-background-color: var(--dp-22-surface-color);
	--wt-status-select-option-background-hover-color: var(
		--secondary-light-color
	);
	/* --wt-status-select-option-background-selected-color: var(--primary-light-color); */

	--wt-status-select-background-color: var(
		--wt-status-select-option-background-color
	);
}
[data-v-9bed30f8]:root {
	--wt-stepper-divider-background-color: var(--secondary-color);
	--wt-stepper-divider-background-completed-color: var(--primary-color);
}
[data-v-9bed30f8]:root {
	--switcher-icon-margin: var(--spacing-xs);
	--switcher-width: 40px;
	--switcher-height: 22px;
	--switcher-cicle-size: 14px;
	--switcher-cicle-margin: 4px;
	--switcher-cicle-translateX: 17px;
	--switcher-border-radius: 24px;
	/* circle */
	--wt-switcher-circle-background-color-on: var(--grey-darken-3);
	--wt-switcher-circle-background-color-on-hover: var(--grey-darken-4);
	--wt-switcher-circle-background-color-on-disabled: var(--grey-lighten-3);

	--wt-switcher-circle-background-color-off: var(--grey-lighten-4);
	--wt-switcher-circle-background-color-off-hover: var(--grey-lighten-5);
	--wt-switcher-circle-background-color-off-disabled: var(--grey-lighten-3);
	/* background */
	--wt-switcher-background-color-on: var(--primary-color);
	--wt-switcher-background-color-on-hover: var(--primary-hover-color);
	--wt-switcher-background-color-on-disabled: var(--primary-light-color);

	--wt-switcher-background-color-off: var(--grey-darken-2);
	--wt-switcher-background-color-off-hover: var(--grey-darken-1);
	--wt-switcher-background-color-off-disabled: var(--grey-lighten-4);
}
:root.theme--dark[data-v-9bed30f8] {
	/* circle */
	--wt-switcher-circle-background-color-off: var(--grey-darken-4);
	--wt-switcher-circle-background-color-off-hover: var(--grey-darken-3);
	--wt-switcher-circle-background-color-off-disabled: var(--grey-darken-3);
	/* background */
	--wt-switcher-background-color-off: var(--grey-lighten-1);
	--wt-switcher-background-color-off-hover: var(--grey-lighten-2);
	--wt-switcher-background-color-off-disabled: var(--grey-darken-2);
}
[data-v-9bed30f8]:root {
	--table-actions-padding: var(--spacing-xs);
	--table-actions-icon-gap: var(--spacing-xs);
}
[data-v-9bed30f8]:root {
	--table-col-min-width: 140px;

	--table-head-sort-arrow-margin: var(--spacing-xs);
	--table-head-border: 1px solid;

	--table-min-height: 24px; /* 24px icon size or body-1 lh */
	--table-column-gap: var(--spacing-xs);
	--table-row-padding: var(--spacing-xs);

	--wt-table-head-border-color: var(--grey-lighten-1);
	--wt-table-head-background-color: var(--content-wrapper-color);
	--wt-table-primary-color: var(--content-wrapper-color);
	--wt-table-zebra-color: var(--dp-18-surface-color);
}
:root.theme--dark[data-v-9bed30f8] {
	--wt-table-head-border-color: var(--grey-darken-1);
}
[data-v-9bed30f8]:root {
	--tabs-underiline-height: 1px;
	--tabs-underiline-color: transparent;

	--tab-padding: var(--spacing-2xs);
	--tab-gap: var(--spacing-xs);
	--wt-tabs-text-color: var(--text-main-color);
	--wt-tabs-text-hover-color: var(--wt-tabs-text-color);
	--wt-tabs-text-active-color: var(--wt-tabs-text-color);
	--tab-border: 4px solid;
	--wt-tabs-underline-active-color: var(--primary-color);
	--tab-z-index: 1;
}
[data-v-9bed30f8]:root {
	--textarea-min-height: 100px;
	--textarea-padding: var(--input-padding);
}
[data-v-9bed30f8]:root {
	--timepicker-input-width: 80px;
	--timepicker-input-margin: var(--spacing-xs);
}
[data-v-9bed30f8]:root {
	--tooltip-padding: var(--spacing-2xs) var(--spacing-xs);

	--wt-tooltip-text-color: var(--text-main-color);
	--wt-tooltip-background-color: var(--dp-24-surface-color);

	--tooltip-elevation: var(--elevation-10);
}
[data-v-9bed30f8]:root {
	--wt-tree-item-active: var(--primary-light-color);
	--wt-tree-item-active-on: var(--grey-darken-4);

	--wt-tree-item-searched: var(--light-blue-lighten-4);
	--wt-tree-item-searched-on: var(--grey-darken-4);

	--wt-tree-item: var(--primary-light-color);
	--wt-tree-item-on: var(--grey-darken-1);

	--wt-tree-item-hover: var(--dp-24-surface-color);
	--wt-tree-item-hover-on: var(--grey-darken-1);
}
:root.theme--dark[data-v-9bed30f8] {
	--wt-tree-item-active: var(--primary-light-color);
	--wt-tree-item-active-on: var(--grey-lighten-4);

	--wt-tree-item-searched: var(--light-blue-lighten-2);
	--wt-tree-item-searched-on: var(--grey-darken-4);

	--wt-tree-item: var(--primary-light-color);
	--wt-tree-item-on: var(--grey-lighten-3);

	--wt-tree-item-hover-on: var(--grey-lighten-3);
}
[data-v-9bed30f8]:root {
	--wt-tree-table-col-min-witdh: var(--table-col-min-width);

	--wt-tree-table-head-sort-arrow-margin: var(--table-head-sort-arrow-margin);
	--wt-tree-table-head-border: var(--table-head-border);

	--wt-tree-table-min-height: var(--table-min-height);
	--wt-tree-table-column-gap: var(--table-column-gap);
	--wt-tree-table-row-padding: var(--table-row-padding);

	--wt-tree-table-head-border-color: var(--wt-table-head-border-color);
	--wt-tree-table-head-background-color: var(--wt-table-head-background-color);
	--wt-tree-table-primary-color: var(--wt-table-primary-color);
	--wt-tree-table-zebra-color: var(--wt-table-zebra-color);
}
:root.theme--dark[data-v-9bed30f8] {
	--wt-tree-table-head-border-color: var(--wt-table-head-border-color);
}
[data-v-9bed30f8]:root {
	--content-wrapper-padding: var(--spacing-xs);
	--content-wrapper-gap: var(--spacing-xs);
}
.table-page.wt-page-wrapper[data-v-9bed30f8] {
	width: 100%;
	height: 100%;
}
.table-page .wt-page-wrapper__main[data-v-9bed30f8],

.wt-page-wrapper__main[data-v-9bed30f8]:has(.table-section) {
	min-height: 0;
}
.table-section[data-v-9bed30f8] {
	display: flex;
	flex-direction: column;
	width: 100%;
	flex: 1;
	min-height: 0;
}
.table-section__table-wrapper[data-v-9bed30f8] {
	display: flex;
	flex: 1 1 100%;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	min-height: 0;
	gap: var(--spacing-sm);
}
.table-section__table-wrapper .table-wrapper__visible-scroll-wrapper[data-v-9bed30f8] {
	flex-grow: 1;
}
.table-section__table-wrapper .wt-pagination[data-v-9bed30f8] {
	margin-top: auto;
}
.table-section__visible-scroll-wrapper[data-v-9bed30f8] {
	overflow: visible;
	height: 100%;
}
.table-section__visible-scroll-wrapper .wt-table[data-v-9bed30f8] {
	overflow: visible;
}
.table-title[data-v-9bed30f8] {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: var(--spacing-sm) 0;
}
.table-title__title[data-v-9bed30f8] {
	font-family: "Montserrat", monospace;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-transform: none;
}
.table-title__title + .hint[data-v-9bed30f8] {
	top: -2px;
}
.table-title__actions-wrap[data-v-9bed30f8] {
	display: flex;
	align-items: center;
	gap: var(--table-actions-icon-gap);
}
.main-section-wrapper .wt-loader.wt-brand-loader[data-v-9bed30f8] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 1;
}
.table-wrapper--tab-table[data-v-9bed30f8] {
	position: relative;
}
.table-wrapper--tab-table .wt-loader.wt-brand-loader[data-v-9bed30f8] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 1;
}
.table-wrapper--tab-table .table-loading-wrapper[data-v-9bed30f8] {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	min-height: 0;
}
.opened-card[data-v-9bed30f8] {
	width: 100%;
}
.opened-card.wt-page-wrapper[data-v-9bed30f8],
.opened-card.wt-dual-panel[data-v-9bed30f8] {
	width: 100%;
}
.opened-card-tabs[data-v-9bed30f8] {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: var(--spacing-sm);
}
.opened-card-tabs__tab[data-v-9bed30f8] {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: var(--spacing-sm);
	min-height: 0;
}
.opened-card-header[data-v-9bed30f8] {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin: var(--spacing-sm) 0;
}
.opened-card-header__title[data-v-9bed30f8] {
	font-family: "Montserrat", monospace;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-transform: none;
}
.opened-card-header__title + .hint[data-v-9bed30f8] {
	top: -2px;
}
.opened-card-form[data-v-9bed30f8] {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.opened-card-input-grid[data-v-9bed30f8] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: minmax(auto, auto);
	align-items: flex-start;
	grid-column-gap: var(--spacing-sm);
	grid-row-gap: var(--spacing-sm);
}
.opened-card-input-grid--1-col[data-v-9bed30f8] {
	grid-template-columns: 1fr;
}
.opened-card-input-grid--w50[data-v-9bed30f8] {
	width: 50%;
}
.opened-card-input-grid--w100[data-v-9bed30f8] {
	width: 100%;
}
#wt-flow-diagram[data-v-9bed30f8] {
  --flow-light-level-12: 90%;
  --flow-icon-header-disabled-color: var(--grey-lighten-2);
  --flow-text-main-color: var(--black);
  --flow-text-tab-color: var(--black);
  --flow-connection-default-color: var(--black);
  --flow-connection-active-color: var(--black);
  --flow-on-dark-text-color: var(--grey-lighten-5);
  --flow-on-light-text-color: var(--grey-darken-3);
  --flow-conection-point-color: var(--dp-22-surface-color);
  --flow-conection-point-border-color: var(--dp-16-surface-color);
  --flow-connection-color: var(--grey-darken-1);
  --flow-connection-goto-color: var(--red-accent-2);
  --flow-connection-failover-color: var(--red-accent-2);
  --flow-connection-selected-color: var(--red-accent-4);
  --flow-calendar-header-bg-color: var(--cyan-lighten-3);
  --flow-execute-header-bg-color: var(--orange-lighten-2);
  --flow-function-header-bg-color: var(--orange-lighten-2);
  --flow-goto-header-bg-color: var(--red-darken-1);
  --flow-if-header-bg-color: var(--pink-lighten-2);
  --flow-i-frame-header-bg-color: var(--blue-lighten-1);
  --flow-js-header-bg-color: var(--amber-accent-3);
  --flow-math-header-bg-color: var(--deep-orange-accent-2);
  --flow-string-header-bg-color: var(--light-green-darken-3);
  --flow-mark-ivr-header-bg-color: var(--pink-accent-2);
  --flow-soft-sleep-header-bg-color: var(--light-blue-lighten-1);
  --flow-set-grantee-header-bg-color: var(--yellow-darken-2);
  --flow-schema-header-bg-color: var(--deep-orange-lighten-3);
  --flow-log-header-bg-color: var(--amber-lighten-1);
  --flow-start-header-bg-color: var(--green-darken-3);
  --flow-switch-header-bg-color: var(--purple-lighten-1);
  --flow-trigger-header-bg-color: var(--red-lighten-1);
  --flow-http-header-bg-color: var(--pink-lighten-2);
  --flow-custom-code-header-bg-color: var(--grey-lighten-4);
  --flow-export-var-header-bg-color: var(--indigo-lighten-3);
  --flow-set-var-header-bg-color: var(--amber-lighten-1);
  --flow-un-set-var-header-bg-color: var(--orange-lighten-3);
  --flow-list-header-bg-color: var(--light-blue-darken-3);
  --flow-list-add-header-bg-color: var(--light-blue-darken-1);
  --flow-get-email-header-bg-color: var(--cyan-darken-4);
  --flow-playback-header-bg-color: var(--orange-lighten-1);
  --flow-ring-ready-header-bg-color: var(--green-darken-3);
  --flow-pre-answer-header-bg-color: var(--green-darken-3);
  --flow-answer-header-bg-color: var(--green-darken-3);
  --flow-hangup-header-bg-color: var(--deep-orange-darken-2);
  --flow-sip-redirect-header-bg-color: var(--amber-lighten-3);
  --flow-ringback-header-bg-color: var(--green-darken-3);
  --flow-bridge-header-bg-color: var(--orange-lighten-2);
  --flow-conference-header-bg-color: var(--cyan-lighten-3);
  --flow-generate-link-header-bg-color: var(--indigo-accent-2);
  --flow-in-band-dtmf-header-bg-color: var(--yellow-lighten-2);
  --flow-flush-dtmf-header-bg-color: var(--pink-lighten-2);
  --flow-update-cid-header-bg-color: var(--orange-lighten-2);
  --flow-park-header-bg-color: var(--cyan-lighten-3);
  --flow-join-queue-header-bg-color: var(--deep-orange-lighten-1);
  --flow-record-file-header-bg-color: var(--green-lighten-3);
  --flow-record-session-header-bg-color: var(--green-lighten-2);
  --flow-tts-header-bg-color: var(--purple-darken-1);
  --flow-recv-message-header-bg-color: var(--blue-accent-4);
  --flow-send-text-header-bg-color: var(--orange-accent-3);
  --flow-send-tts-header-bg-color: var(--purple-darken-1);
  --flow-send-file-header-bg-color: var(--purple-accent-3);
  --flow-stt-header-bg-color: var(--orange-lighten-1);
  --flow-send-email-header-bg-color: var(--deep-orange-accent-2);
  --flow-send-message-header-bg-color: var(--blue-darken-1);
  --flow-broadcast-chat-message-header-bg-color: var(--blue-darken-2);
  --flow-classifier-header-bg-color: var(--deep-purple-lighten-2);
  --flow-menu-header-bg-color: var(--amber-lighten-3);
  --flow-plata-by-mono-header-bg-color: var(--deep-purple-darken-1);
  --flow-user-info-header-bg-color: var(--green-darken-2);
  --flow-member-info-header-bg-color: var(--purple-lighten-1);
  --flow-get-queue-agents-header-bg-color: var(--indigo-lighten-2);
  --flow-join-agent-header-bg-color: var(--deep-purple-lighten-2);
  --flow-callback-queue-header-bg-color: var(--lime-darken-2);
  --flow-patch-members-header-bg-color: var(--purple-lighten-1);
  --flow-form-textfield-header-bg-color: var(--light-blue-accent-4);
  --flow-form-text-header-bg-color: var(--light-blue-lighten-3);
  --flow-form-table-header-bg-color: var(--cyan-darken-2);
  --flow-form-select-header-bg-color: var(--light-blue-lighten-1);
  --flow-open-link-header-bg-color: var(--blue-lighten-1);
  --flow-form-select-service-header-bg-color: var(--amber-lighten-1);
  --flow-form-select-case-status-header-bg-color: var(--amber-lighten-1);
  --flow-form-datetime-picker-header-bg-color: var(--blue-lighten-2);
  --flow-form-rich-text-editor-header-bg-color: var(--light-blue-darken-4);
  --flow-generate-form-header-bg-color: var(--blue-accent-4);
  --flow-make-call-header-bg-color: var(--light-green-darken-4);
  --flow-form-select-from-object-header-bg-color: var(--indigo-lighten-1);
  --flow-attempt-result-header-bg-color: var(--red-lighten-2);
  --flow-form-file-header-bg-color: var(--blue-lighten-2);
  --flow-chat-history-header-bg-color: var(--amber-accent-2);
  --flow-while-header-bg-color: var(--deep-purple-darken-4);
  --flow-chat-ai-header-bg-color: var(--lime-darken-3);
  --flow-notification-header-bg-color: var(--pink-lighten-1);
  --flow-custom-module-header-bg-color: var(--deep-purple-darken-3);
}
.theme--dark #wt-flow-diagram[data-v-9bed30f8] {
  --flow-icon-header-disabled-color: var(--grey-darken-3);
  --flow-text-main-color: var(--white);
  --flow-text-tab-color: var(--white);
  --flow-connection-default-color: var(--white);
  --flow-connection-active-color: var(--black);
}
@layer wt-default, base, primevue, wt-typography;
/*
	@author HlukhovYe
	layer needed beacuse of manipulating primevue's default typography
	https://webitel.atlassian.net/browse/WTEL-8775?focusedCommentId=723773
*/
@layer wt-default {
[data-v-9bed30f8]:root {
    --transition: 0.2s;
    --box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    /* viewport breakpoints */
    --viewport-lg: 1904px;
    --viewport-md: 1264px;
    --viewport-sm: 960px;
    --viewport-xs: 600px;
}
html[data-v-9bed30f8] {
    height: 100%;
    font-size: 16px;
}
body[data-v-9bed30f8] {
    font-family: "Montserrat", monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-transform: none;
    margin: 0;
    height: 100%;
    min-height: 100%;
}
[data-v-9bed30f8] {
    box-sizing: border-box;
}
.theme--dark body[data-v-9bed30f8] {
    color-scheme: dark;
}
h1[data-v-9bed30f8],
  h2[data-v-9bed30f8],
  h3[data-v-9bed30f8],
  h4[data-v-9bed30f8],
  h5[data-v-9bed30f8],
  h6[data-v-9bed30f8],
  p[data-v-9bed30f8] {
    margin: 0;
    font-weight: normal;
}
  /* reset ul styles */
ul[data-v-9bed30f8] {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
iframe[data-v-9bed30f8] {
    outline: none;
    border: none;
}
a[data-v-9bed30f8] {
    color: #000;
    text-decoration: none;
}
.hidden[data-v-9bed30f8] {
    opacity: 0;
    pointer-events: none;
}
}
/*
	@author HlukhovYe
	reset input autofill styles https://webitel.atlassian.net/browse/WTEL-9005
*/
input[data-v-9bed30f8]:-webkit-autofill,
input[data-v-9bed30f8]:-webkit-autofill:hover,
input[data-v-9bed30f8]:-webkit-autofill:focus,
textarea[data-v-9bed30f8]:-webkit-autofill,
textarea[data-v-9bed30f8]:-webkit-autofill:hover,
textarea[data-v-9bed30f8]:-webkit-autofill:focus,
select[data-v-9bed30f8]:-webkit-autofill,
select[data-v-9bed30f8]:-webkit-autofill:hover,
select[data-v-9bed30f8]:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--p-inputtext-color);
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s; /* prevents an immediate color change */
}

/* https://github.com/Akryum/floating-vue/issues/488 */
.v-popper__arrow-container[data-v-9bed30f8] {
  display: none;
}
.config-form-grid[data-v-9bed30f8], .config-form-section-item__main[data-v-9bed30f8], .config-form[data-v-9bed30f8] {
  display: grid;
  grid-row-gap: var(--spacing-xs);
}
.p-toggleswitch[data-v-9bed30f8] {
  flex-shrink: 0;
}

/*
xl: @media only screen and (min-width: $viewport-xl) {}
lg: @media only screen and (max-width: $viewport-xl) {}
md: @media only screen and (max-width: $viewport-lg) {}
sm: @media only screen and (max-width: $viewport-md) {}
xs: @media only screen and (max-width: $viewport-sm) {}
 */
#wt-flow-diagram[data-v-9bed30f8] {
  /* В компоненті `key-value-pair` присутні компоненти з бібліотеки `webitel.ui`,
   наприклад, `<wt-input-text>`, margin яких = 10px, тому у даному випадку я використав
   змінну `--body-block-margin` , яка також = 10px.
  Можна працювати по нових спейсінгах, але треба переписати компоненти, які є в бібліотеці*/
  --body-block-margin: 10px;
  --workspace-content-offset-top: var(--spacing-xs);
  --workspace-content-offset-bottom: var(--spacing-xs);
  --workspace-content-offset-side: var(--spacing-xs);
  --nodes-panel-width: 260px;
  --config-panel-width: -16px;
  --min-flow-toolbar-width: 491px;
  --flow-toolbar-height: 40px;
  --flow-pages-height: 56px;
  --zoom-panel-width: 227px;
  --zoom-panel-height: calc(2 * var(--spacing-sm) + var(--icon-md-size));
}
@media only screen and (max-width: 960px) {
#wt-flow-diagram[data-v-9bed30f8] {
    --flow-toolbar-height: 40px;
}
}
@media only screen and (max-width: 600px) {
#wt-flow-diagram[data-v-9bed30f8] {
    --flow-toolbar-height: 40px;
}
}
#wt-flow-diagram[data-v-9bed30f8] {
  --elevation-1: 0px 1px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-2: 0px 2px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-3: 0px 3px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-4: 0px 4px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-5: 0px 5px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-6: 0px 6px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-7: 0px 7px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-8: 0px 8px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-9: 0px 9px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-10: 0px 10px 10px hsla(0, 0%, 0%, 0.15);
}
.config-form-section-item-wrapper[data-v-9bed30f8] {
  min-width: 0;
  padding: var(--spacing-xs);
  box-shadow: var(--elevation-1);
  border-radius: var(--border-radius);
}
.config-form-section-item__header[data-v-9bed30f8] {
  margin-bottom: var(--spacing-xs);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.config-form-section-item__title[data-v-9bed30f8] {
  width: 100%;
}
.config-form-section-item__footer[data-v-9bed30f8] {
  display: flex;
  margin-top: var(--spacing-xs);
}
.config-form-section-item__footer--actions[data-v-9bed30f8] {
  gap: var(--spacing-xs);
}
/* 
	@author Palonnyi Oleksandr
	Must be first — locks cascade layer priority 
	before any content is loaded: wt-default < base < primevue < wt-typography.
	[WTEL-9107](https://webitel.atlassian.net/browse/WTEL-9107)

	link for complex comment https://webitel.atlassian.net/browse/WTEL-9107?focusedCommentId=740565
*/
[data-v-8fadb751]:root {
	--scrollbar-width: 10px;
	--scrollbar-height: 10px;
	--scrollbar-thumb-width: 10px;
	--scrollbar-bg-color: var(--p-surface-50);
	--scrollbar-thumb-color: var(--p-surface-150);
	--scrollbar-hover-thumb-color: var(--p-surface-250);
	--scrollbar-border-radius: var(--border-radius);
}
:root.theme--dark[data-v-8fadb751] {
	--scrollbar-bg-color: var(--p-surface-850);
	--scrollbar-thumb-color: var(--p-surface-700);
	--scrollbar-hover-thumb-color: var(--p-surface-800);
}
.wt-scrollbar[data-v-8fadb751] {
	/* scrollbar itself */
}
.wt-scrollbar[data-v-8fadb751]::-webkit-scrollbar {
	width: var(--scrollbar-width);
	height: var(--scrollbar-height);
	cursor: pointer;
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-bg-color);
}

/* scrollable element */
.wt-scrollbar[data-v-8fadb751]::-webkit-scrollbar-thumb {
	width: var(--scrollbar-thumb-width);
	height: var(--scrollbar-thumb-height);
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-thumb-color);
}
.wt-scrollbar[data-v-8fadb751]::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-hover-thumb-color);
}
.wt-distant-scrollbar[data-v-8fadb751]::-webkit-scrollbar {
	width: 14px;
	height: 18px;
	background-color: var(--scrollbar-bg-color);
}
.wt-distant-scrollbar[data-v-8fadb751]::-webkit-scrollbar-thumb {
	height: 2px;
	border: 4px solid rgba(0, 0, 0, 0);
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-thumb-color);
	background-clip: padding-box;
	/* -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05); */
}
[data-v-8fadb751]:root {
	--border-radius: var(--spacing-2xs);
	--border-radius--pill: 50px;
}
/*
NOTE:   text-transform: none; is set explicitly cause t-t is inherited from parent
 */

/* 
	@author HlukhovYe
	layer needed for overriding primevue's default typography for the components
	https://webitel.atlassian.net/browse/WTEL-8775?focusedCommentId=723773
*/
@layer wt-typography {
.typo-heading-1[data-v-8fadb751] {
		font-family: "Montserrat", monospace;
		font-size: 32px;
		font-weight: 600;
		line-height: 48px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-2[data-v-8fadb751] {
		font-family: "Montserrat", monospace;
		font-size: 24px;
		font-weight: 600;
		line-height: 40px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-3[data-v-8fadb751] {
		font-family: "Montserrat", monospace;
		font-size: 20px;
		font-weight: 600;
		line-height: 32px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-4[data-v-8fadb751] {
		font-family: "Montserrat", monospace;
		font-size: 16px;
		font-weight: 600;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-subtitle-1[data-v-8fadb751] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 500;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-subtitle-2[data-v-8fadb751] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-body-1[data-v-8fadb751] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 400;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.56px; */
		/* 0.04em */
}
.typo-body-1-bold[data-v-8fadb751] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 700;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.56px; */
		/* 0.04em */
}
.typo-body-2[data-v-8fadb751] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 400;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.16px; */
		/* 0.01em */
}
.typo-body-2-bold[data-v-8fadb751] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 700;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.16px; */
		/* 0.01em */
}
.typo-button--md[data-v-8fadb751] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 24px;
		text-transform: uppercase;
		/* letter-spacing: 0.96px; */
		/* 0.06em */
}
.typo-button--sm[data-v-8fadb751] {
		font-family: "Montserrat", monospace;
		font-size: 10px;
		font-weight: 500;
		line-height: 24px;
		text-transform: uppercase;
		/* letter-spacing: 0.96px; */
		/* 0.06em */
}
.typo-caption[data-v-8fadb751] {
		font-family: "Montserrat", monospace;
		font-size: 10px;
		font-weight: 400;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.48px; */
		/* 0.03em */
}
.typo-overline[data-v-8fadb751] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 20px;
		text-transform: uppercase;
		/* letter-spacing: 2.56px; */
		/* 0.16em */
}
}
[data-v-8fadb751]:root {
	/* LIGHTNESS */
	--lightness-lighten-5: 95%;
	--lightness-lighten-4: 90%;
	--lightness-lighten-3: 80%;
	--lightness-lighten-2: 70%;
	--lightness-lighten-1: 60%;

	--lightness-darken-1: 50%;
	--lightness-darken-2: 45%;
	--lightness-darken-3: 40%;
	--lightness-darken-4: 35%;

	--lightness-accent-1: 75%;
	--lightness-accent-2: 65%;
	--lightness-accent-3: 50%;
	--lightness-accent-4: 40%;

	/* SATURATION */
	--saturation-lighten-5: 92%;
	--saturation-lighten-4: 88%;
	--saturation-lighten-3: 90%;
	--saturation-lighten-2: 90%;
	--saturation-lighten-1: 90%;

	--saturation-darken-1: 75%;
	--saturation-darken-2: 75%;
	--saturation-darken-3: 75%;
	--saturation-darken-4: 75%;

	--saturation-accent-1: 91%;
	--saturation-accent-2: 90%;
	--saturation-accent-3: 97%;
	--saturation-accent-4: 97%;

	/* HUE */
	--hue-red: 0;
	--hue-pink: 337;
	--hue-purple: 291;
	--hue-deep-purple: 263;
	--hue-indigo: 232;
	--hue-blue: 209;
	--hue-light-blue: 202;
	--hue-cyan: 188;
	--hue-teal: 173;
	--hue-green: 121;
	--hue-light-green: 88;
	--hue-lime: 66;
	--hue-yellow: 54;
	--hue-amber: 43;
	--hue-orange: 32;
	--hue-deep-orange: 11;

	/* RED */
	--red-lighten-5: hsla(
		var(--hue-red),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--red-lighten-4: hsla(
		var(--hue-red),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--red-lighten-3: hsla(
		var(--hue-red),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--red-lighten-2: hsla(
		var(--hue-red),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--red-lighten-1: hsla(
		var(--hue-red),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--red-darken-4: hsla(
		var(--hue-red),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--red-darken-3: hsla(
		var(--hue-red),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--red-darken-2: hsla(
		var(--hue-red),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--red-darken-1: hsla(
		var(--hue-red),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--red-accent-4: hsla(
		var(--hue-red),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--red-accent-3: hsla(
		var(--hue-red),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--red-accent-2: hsla(
		var(--hue-red),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--red-accent-1: hsla(
		var(--hue-red),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* PINK */
	--pink-lighten-5: hsla(
		var(--hue-pink),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--pink-lighten-4: hsla(
		var(--hue-pink),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--pink-lighten-3: hsla(
		var(--hue-pink),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--pink-lighten-2: hsla(
		var(--hue-pink),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--pink-lighten-1: hsla(
		var(--hue-pink),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--pink-darken-4: hsla(
		var(--hue-pink),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--pink-darken-3: hsla(
		var(--hue-pink),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--pink-darken-2: hsla(
		var(--hue-pink),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--pink-darken-1: hsla(
		var(--hue-pink),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--pink-accent-4: hsla(
		var(--hue-pink),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--pink-accent-3: hsla(
		var(--hue-pink),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--pink-accent-2: hsla(
		var(--hue-pink),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--pink-accent-1: hsla(
		var(--hue-pink),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* PURPLE */
	--purple-lighten-5: hsla(
		var(--hue-purple),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--purple-lighten-4: hsla(
		var(--hue-purple),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--purple-lighten-3: hsla(
		var(--hue-purple),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--purple-lighten-2: hsla(
		var(--hue-purple),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--purple-lighten-1: hsla(
		var(--hue-purple),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--purple-darken-4: hsla(
		var(--hue-purple),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--purple-darken-3: hsla(
		var(--hue-purple),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--purple-darken-2: hsla(
		var(--hue-purple),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--purple-darken-1: hsla(
		var(--hue-purple),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--purple-accent-4: hsla(
		var(--hue-purple),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--purple-accent-3: hsla(
		var(--hue-purple),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--purple-accent-2: hsla(
		var(--hue-purple),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--purple-accent-1: hsla(
		var(--hue-purple),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* DEEP PURPLE */
	--deep-purple-lighten-5: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--deep-purple-lighten-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--deep-purple-lighten-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--deep-purple-lighten-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--deep-purple-lighten-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--deep-purple-darken-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--deep-purple-darken-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--deep-purple-darken-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--deep-purple-darken-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--deep-purple-accent-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--deep-purple-accent-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--deep-purple-accent-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--deep-purple-accent-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* INDIGO */
	--indigo-lighten-5: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--indigo-lighten-4: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--indigo-lighten-3: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--indigo-lighten-2: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--indigo-lighten-1: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--indigo-darken-4: hsla(
		var(--hue-indigo),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--indigo-darken-3: hsla(
		var(--hue-indigo),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--indigo-darken-2: hsla(
		var(--hue-indigo),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--indigo-darken-1: hsla(
		var(--hue-indigo),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--indigo-accent-4: hsla(
		var(--hue-indigo),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--indigo-accent-3: hsla(
		var(--hue-indigo),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--indigo-accent-2: hsla(
		var(--hue-indigo),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--indigo-accent-1: hsla(
		var(--hue-indigo),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* BLUE */
	--blue-lighten-5: hsla(
		var(--hue-blue),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--blue-lighten-4: hsla(
		var(--hue-blue),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--blue-lighten-3: hsla(
		var(--hue-blue),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--blue-lighten-2: hsla(
		var(--hue-blue),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--blue-lighten-1: hsla(
		var(--hue-blue),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--blue-darken-4: hsla(
		var(--hue-blue),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--blue-darken-3: hsla(
		var(--hue-blue),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--blue-darken-2: hsla(
		var(--hue-blue),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--blue-darken-1: hsla(
		var(--hue-blue),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--blue-accent-4: hsla(
		var(--hue-blue),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--blue-accent-3: hsla(
		var(--hue-blue),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--blue-accent-2: hsla(
		var(--hue-blue),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--blue-accent-1: hsla(
		var(--hue-blue),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIGHT BLUE */
	--light-blue-lighten-5: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--light-blue-lighten-4: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--light-blue-lighten-3: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--light-blue-lighten-2: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--light-blue-lighten-1: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--light-blue-darken-4: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--light-blue-darken-3: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--light-blue-darken-2: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--light-blue-darken-1: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--light-blue-accent-4: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--light-blue-accent-3: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--light-blue-accent-2: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--light-blue-accent-1: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* CYAN */
	--cyan-lighten-5: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--cyan-lighten-4: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--cyan-lighten-3: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--cyan-lighten-2: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--cyan-lighten-1: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--cyan-darken-4: hsla(
		var(--hue-cyan),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--cyan-darken-3: hsla(
		var(--hue-cyan),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--cyan-darken-2: hsla(
		var(--hue-cyan),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--cyan-darken-1: hsla(
		var(--hue-cyan),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--cyan-accent-4: hsla(
		var(--hue-cyan),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--cyan-accent-3: hsla(
		var(--hue-cyan),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--cyan-accent-2: hsla(
		var(--hue-cyan),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--cyan-accent-1: hsla(
		var(--hue-cyan),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* TEAL */
	--teal-lighten-5: hsla(
		var(--hue-teal),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--teal-lighten-4: hsla(
		var(--hue-teal),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--teal-lighten-3: hsla(
		var(--hue-teal),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--teal-lighten-2: hsla(
		var(--hue-teal),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--teal-lighten-1: hsla(
		var(--hue-teal),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--teal-darken-4: hsla(
		var(--hue-teal),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--teal-darken-3: hsla(
		var(--hue-teal),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--teal-darken-2: hsla(
		var(--hue-teal),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--teal-darken-1: hsla(
		var(--hue-teal),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--teal-accent-4: hsla(
		var(--hue-teal),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--teal-accent-3: hsla(
		var(--hue-teal),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--teal-accent-2: hsla(
		var(--hue-teal),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--teal-accent-1: hsla(
		var(--hue-teal),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* GREEN */
	--green-lighten-5: hsla(
		var(--hue-green),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--green-lighten-4: hsla(
		var(--hue-green),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--green-lighten-3: hsla(
		var(--hue-green),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--green-lighten-2: hsla(
		var(--hue-green),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--green-lighten-1: hsla(
		var(--hue-green),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--green-darken-4: hsla(
		var(--hue-green),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--green-darken-3: hsla(
		var(--hue-green),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--green-darken-2: hsla(
		var(--hue-green),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--green-darken-1: hsla(
		var(--hue-green),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--green-accent-4: hsla(
		var(--hue-green),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--green-accent-3: hsla(
		var(--hue-green),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--green-accent-2: hsla(
		var(--hue-green),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--green-accent-1: hsla(
		var(--hue-green),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIGHT GREEN */
	--light-green-lighten-5: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--light-green-lighten-4: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--light-green-lighten-3: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--light-green-lighten-2: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--light-green-lighten-1: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--light-green-darken-4: hsla(
		var(--hue-light-green),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--light-green-darken-3: hsla(
		var(--hue-light-green),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--light-green-darken-2: hsla(
		var(--hue-light-green),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--light-green-darken-1: hsla(
		var(--hue-light-green),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--light-green-accent-4: hsla(
		var(--hue-light-green),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--light-green-accent-3: hsla(
		var(--hue-light-green),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--light-green-accent-2: hsla(
		var(--hue-light-green),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--light-green-accent-1: hsla(
		var(--hue-light-green),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIME */
	--lime-lighten-5: hsla(
		var(--hue-lime),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--lime-lighten-4: hsla(
		var(--hue-lime),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--lime-lighten-3: hsla(
		var(--hue-lime),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--lime-lighten-2: hsla(
		var(--hue-lime),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--lime-lighten-1: hsla(
		var(--hue-lime),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--lime-darken-4: hsla(
		var(--hue-lime),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--lime-darken-3: hsla(
		var(--hue-lime),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--lime-darken-2: hsla(
		var(--hue-lime),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--lime-darken-1: hsla(
		var(--hue-lime),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--lime-accent-4: hsla(
		var(--hue-lime),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--lime-accent-3: hsla(
		var(--hue-lime),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--lime-accent-2: hsla(
		var(--hue-lime),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--lime-accent-1: hsla(
		var(--hue-lime),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* yellow */
	--yellow-lighten-5: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--yellow-lighten-4: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--yellow-lighten-3: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--yellow-lighten-2: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--yellow-lighten-1: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--yellow-darken-4: hsla(
		var(--hue-yellow),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--yellow-darken-3: hsla(
		var(--hue-yellow),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--yellow-darken-2: hsla(
		var(--hue-yellow),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--yellow-darken-1: hsla(
		var(--hue-yellow),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--yellow-accent-4: hsla(
		var(--hue-yellow),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--yellow-accent-3: hsla(
		var(--hue-yellow),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--yellow-accent-2: hsla(
		var(--hue-yellow),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--yellow-accent-1: hsla(
		var(--hue-yellow),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* amber */
	--amber-lighten-5: hsla(
		var(--hue-amber),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--amber-lighten-4: hsla(
		var(--hue-amber),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--amber-lighten-3: hsla(
		var(--hue-amber),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--amber-lighten-2: hsla(
		var(--hue-amber),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--amber-lighten-1: hsla(
		var(--hue-amber),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--amber-darken-4: hsla(
		var(--hue-amber),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--amber-darken-3: hsla(
		var(--hue-amber),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--amber-darken-2: hsla(
		var(--hue-amber),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--amber-darken-1: hsla(
		var(--hue-amber),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--amber-accent-4: hsla(
		var(--hue-amber),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--amber-accent-3: hsla(
		var(--hue-amber),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--amber-accent-2: hsla(
		var(--hue-amber),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--amber-accent-1: hsla(
		var(--hue-amber),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* orange */
	--orange-lighten-5: hsla(
		var(--hue-orange),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--orange-lighten-4: hsla(
		var(--hue-orange),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--orange-lighten-3: hsla(
		var(--hue-orange),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--orange-lighten-2: hsla(
		var(--hue-orange),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--orange-lighten-1: hsla(
		var(--hue-orange),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--orange-darken-4: hsla(
		var(--hue-orange),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--orange-darken-3: hsla(
		var(--hue-orange),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--orange-darken-2: hsla(
		var(--hue-orange),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--orange-darken-1: hsla(
		var(--hue-orange),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--orange-accent-4: hsla(
		var(--hue-orange),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--orange-accent-3: hsla(
		var(--hue-orange),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--orange-accent-2: hsla(
		var(--hue-orange),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--orange-accent-1: hsla(
		var(--hue-orange),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* deep-orange */
	--deep-orange-lighten-5: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--deep-orange-lighten-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--deep-orange-lighten-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--deep-orange-lighten-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--deep-orange-lighten-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--deep-orange-darken-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--deep-orange-darken-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--deep-orange-darken-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--deep-orange-darken-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--deep-orange-accent-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--deep-orange-accent-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--deep-orange-accent-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--deep-orange-accent-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* grey */

	--lightness-lighten-5-grey: 94%;
	--lightness-lighten-4-grey: 84%;
	--lightness-lighten-3-grey: 74%;
	--lightness-lighten-2-grey: 64%;
	--lightness-lighten-1-grey: 54%;

	--lightness-darken-1-grey: 44%;
	--lightness-darken-2-grey: 34%;
	--lightness-darken-3-grey: 24%;
	--lightness-darken-4-grey: 14%;
	--lightness-darken-5-grey: 4%;

	--saturation-grey: 20%;
	--hue-grey: 225;

	--grey-lighten-5: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-5-grey),
		1
	);
	--grey-lighten-4: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-4-grey),
		1
	);
	--grey-lighten-3: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-3-grey),
		1
	);
	--grey-lighten-2: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-2-grey),
		1
	);
	--grey-lighten-1: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-1-grey),
		1
	);

	--grey-darken-1: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-1-grey),
		1
	);
	--grey-darken-2: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-2-grey),
		1
	);
	--grey-darken-3: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-3-grey),
		1
	);
	--grey-darken-4: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-4-grey),
		1
	);
	--grey-darken-5: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-5-grey),
		1
	);

	--black: hsla(0, 0%, 0%, 1);
	--white: hsla(0, 0%, 100%, 1);
}
[data-v-8fadb751]:root {
	/* HSL COLORS HUE VALUE */
	--_accent-color-hue: 42;
	--_secondary-color-hue: 202;
	--_page-bg-color-hue: 209;
	--_icon-color-hue: 202;
	--_positive-color-hue: 119;
	--_negative-color-hue: 11;

	--_hold-color-hue: 54;
	--_transfer-color-hue: 227;
	--_job-color-hue: 209;

	/* DEFAULT STATES OPACITY */
	--_opacity--default: 0.8;
	--_opacity--hover: 1;
	--_opacity--active: 1;
	--_opacity--focus: 0.8;
	--_opacity--disabled: 0.4;

	/* BASIC HSL COLORS VALUES */
	--_accent-color: var(--_accent-color-hue), 100%, 50%;
	--_main-color: var(--_accent-color-hue), 20%, 99%;
	--_contrast-color: var(--_accent-color-hue), 20%, 1%;
	--_secondary-color: var(--_secondary-color-hue), 20%, 90%;
	--_secondary-color-50: var(--_secondary-color-hue), 22%, 96%;
	--_page-bg-color: var(--_page-bg-color-hue), 20%, 95%;
	--_header-color: var(--_page-bg-color-hue), 20%, 90%;
	--_positive-color: var(--_positive-color-hue), 60%, 40%;
	--_negative-color: var(--_negative-color-hue), 80%, 50%;
	--_icon-color: var(--_icon-color-hue), 100%, 15%;

	--_hold-color: var(--_hold-color-hue), 80%, 50%;
	--_transfer-color: var(--_transfer-color-hue), 80%, 50%;
	--_job-color: var(--_job-color-hue), 96%, 57%;

	/* MAIN COLORS */
	--accent-color: hsla(var(--_accent-color), 1);

	--main-color: hsla(var(--_main-color), 1);

	--contrast-color: hsla(var(--_contrast-color), 1);

	--secondary-color: hsla(var(--_secondary-color), 1);
	--secondary-color-50: hsla(var(--_secondary-color-50), 1);

	/* ICON COLORS */
	--icon-color-secondary: hsla(var(--_icon-color), 0.25);

	--icon-color--hover: hsla(var(--_icon-color), var(--_opacity--hover));

	--icon-color-accent: var(--accent-color);
	--icon-color-contrast: hsla(var(--_main-color), var(--_opacity--default));
	--icon-color-active: var(--icon-color--hover);
	--icon-color-disabled: hsla(var(--_icon-color), var(--_opacity--disabled));
	--icon-color-success: var(--true-color);
	--icon-color-danger: var(--false-color);
	--icon-color-transfer: var(--transfer-color);
	--icon-color-hold: var(--hold-color);
	--icon-color-secondary-50: var(--secondary-color-50);

	--page-bg-color: hsla(var(--_page-bg-color), 1);
	--header-color: hsla(var(--_header-color), 1);

	--accent-secondary-color: hsla(var(--_accent-color), 0.3);

	/* SEMANTIC COLORS */
	--disabled-color: hsl(var(--_contrast-color), var(--_opacity--disabled));

	--true-color: hsla(var(--_positive-color), var(--_opacity--default));
	--true--hover-color: hsla(var(--_positive-color), var(--_opacity--hover));

	--false-color: hsla(var(--_negative-color), var(--_opacity--default));
	--false--hover-color: hsla(var(--_negative-color), var(--_opacity--hover));

	--hold-color: hsla(var(--_hold-color), var(--_opacity--default));
	--hold--hover-color: hsla(var(--_hold-color), var(--_opacity--hover));

	--transfer-color: hsla(var(--_transfer-color), var(--_opacity--default));
	--transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover));

	--job-color: hsla(var(--_job-color), var(--_opacity--default));
	--job--hover-color: hsla(var(--_job-color), var(--_opacity--hover));

	--link-color: hsla(205, 90%, 45%, 1);
	--link--hover-color: hsla(205, 90%, 60%, 1);

	/* SUBORDINATE COLORS */
	--tag-bg-color: var(--accent-secondary-color);

	/* FORM STATES OPACITY */
	--form-opacity--default: var(--_opacity--default);
	--form-opacity--hover: var(--_opacity--hover);
	--form-opacity--active: var(--_opacity--active);
	--form-opacity--focus: var(--_opacity--focus);
	--form-opacity--disabled: var(--_opacity--disabled);

	--form-placeholder-opacity: 0.6;
	--form-placeholder-opacity--focus: 0.4;
	--form-border-opacity--disabled: 0.05;

	--form-opacity--ouline--default: 0.4;
	--form-opacity--ouline--hover: 0.7;

	/* FORM COLORS */
	--form-input-color: var(--contrast-color);
	/* user input color */

	--form-label-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);
	--form-label--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--hover)
	);
	--form-label--active-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--active)
	);
	--form-label--disabled-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--disabled)
	);

	--form-border-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);
	--form-border--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--hover)
	);
	--form-border--disabled-color: hsla(
		var(--_contrast-color),
		var(--form-border-opacity--disabled)
	);

	--form-placeholder-color: hsla(
		var(--_contrast-color),
		var(--form-placeholder-opacity)
	);
	--form-placeholder-color--focus: hsla(
		var(--_contrast-color),
		var(--form-placeholder-opacity--focus)
	);
	--form-placeholder-color--disabled: hsla(
		var(--_contrast-color),
		var(--form-opacity--disabled)
	);

	/* outline */
	--form-outline-label-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);

	--form-outline-border-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--ouline--default)
	);
	--form-outline-border--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--ouline--hover)
	);

	/* TEXT OPACITY */
	--text-opacity--default: var(--_opacity--default);
	--text-opacity----outline--default: 0.7;
	--text-opacity--disabled: 0.5;

	/* TEXT COLORS */
	--text-primary-color: hsla(
		var(--_contrast-color),
		var(--text-opacity--default)
	);
	--text-outline-color: hsla(
		var(--_contrast-color),
		var(--text-opacity----outline--default)
	);
	--text-contrast-color: hsla(var(--_main-color), var(--text-opacity--default));
	--text--disabled-color: hsla(
		var(--_contrast-color),
		var(--text-opacity--disabled)
	);

	/* CHAT COLORS */
	--_chat-client-color: var(--_accent-color);
	--_chat-client-opacity: 0.2;
	--_chat-agent-color: var(--_secondary-color-50);
	--_chat-agent-opacity: 1;

	--chat-client-message-bg-color: hsla(
		var(--_chat-client-color),
		var(--_chat-client-opacity)
	);
	--chat-agent-message-bg-color: hsla(
		var(--_chat-agent-color),
		var(--_chat-agent-opacity)
	);
	--chat-client-attachment-bg-color: hsla(
		var(--_chat-client-color),
		var(--_chat-client-opacity)
	);
	--chat-agent-attachment-bg-color: hsla(
		var(--_chat-agent-color),
		var(--_chat-agent-opacity)
	);
}
/* shared text field colors */
[data-v-8fadb751]:root {
	/* TODO: move to separate helper-text component */
	/* helper */
	--wt-helper-text-color: var(--text-main-color);
	--wt-helper-text-disabled-color: var(--text-disabled-color);
	--wt-helper-text-invalid-color: var(--text-error-color);

	/* text */
	--wt-text-field-text-color: var(--black);

	/* placeholder */
	--wt-text-field-error-text-color: var(--error-color);
	--wt-text-field-placeholder-color: var(--grey-lighten-1);
	--wt-text-field-placeholder-error-color: var(--error-color);
	--wt-text-field-placeholder-disabled-color: var(--text-disabled-color);

	/* border */
	--wt-text-field-input-border-color: var(--grey-darken-1);
	--wt-text-field-input-border-disabled-color: var(--dp-16-surface-color);
	--wt-text-field-input-border-error-color: var(--error-color);

	/* input bg */
	--wt-text-field-input-background-disabled-color: var(--dp-16-surface-color);

	/* select */
	--wt-text-field-select-option-text-color: var(--text-main-color);
	--wt-text-field-select-option-text-hover-color: var(--primary-on-color);
	--wt-text-field-select-option-text-selected-color: var(--primary-on-color);

	--wt-text-field-select-option-wrapper-border-color: var(
		--dp-22-surface-color
	);
	--wt-text-field-select-option-background-color: var(--dp-22-surface-color);
	--wt-text-field-select-option-background-hover-color: var(
		--primary-light-color
	);
	--wt-text-field-select-option-background-selected-color: var(--primary-color);
}
:root.theme--dark[data-v-8fadb751] {
	/* text */
	--wt-text-field-text-color: var(--white);

	--wt-text-field-input-border-color: var(--grey-lighten-1);
}
[data-v-8fadb751]:root {
	/* dp colors */
	--dp-24-surface-color: hsl(0, 0%, 100%);
	--dp-23-surface-color: hsl(225, 20%, 99%);
	--dp-22-surface-color: hsl(225, 20%, 98%);
	--dp-21-surface-color: hsl(225, 20%, 97%);
	--dp-20-surface-color: hsl(225, 20%, 96%);
	--dp-19-surface-color: hsl(225, 20%, 95%);
	--dp-18-surface-color: hsl(225, 20%, 94%);
	--dp-17-surface-color: hsl(225, 20%, 93%);
	--dp-16-surface-color: hsl(225, 20%, 92%);
	--dp-15-surface-color: hsl(225, 20%, 91%);
	--dp-14-surface-color: hsl(225, 20%, 90%);
	--dp-13-surface-color: hsl(225, 20%, 89%);
	--dp-12-surface-color: hsl(225, 20%, 88%);
	--dp-11-surface-color: hsl(225, 20%, 87%);
	--dp-10-surface-color: hsl(225, 20%, 86%);
	--dp-9-surface-color: hsl(225, 20%, 85%);
	--dp-8-surface-color: hsl(225, 20%, 84%);
	--dp-7-surface-color: hsl(225, 20%, 83%);
	--dp-6-surface-color: hsl(225, 20%, 82%);
	--dp-5-surface-color: hsl(225, 20%, 81%);
	--dp-4-surface-color: hsl(225, 20%, 80%);
	--dp-3-surface-color: hsl(225, 20%, 79%);
	--dp-2-surface-color: hsl(225, 20%, 78%);
	--dp-1-surface-color: hsl(225, 20%, 77%);

	/* content wrapper */
	--content-wrapper-color: var(--p-content-background);
	--content-wrapper-hover-color: var(--p-content-hover-background);

	/* context menu */
	--context-menu-background-color: var(--content-wrapper-color);
	--context-menu-option-hover-color: var(--p-surface-50);
	--context-menu-option-disabled-color: var(--p-surface-100);
	--context-menu-option-text-color: var(--text-main-color);
	--context-menu-option-text-disabled-color: var(--text-disabled-color);

	/* success colors */
	--success-color: var(--green-darken-4);
	--success-hover-color: var(--green-darken-3);
	--success-light-color: var(--green-lighten-4);
	--success-on-color: var(--white);

	/* warning colors */
	--warning-color: var(--orange-accent-2);
	--warning-hover-color: var(--orange-accent-1);
	--warning-light-color: var(--orange-lighten-4);
	--warning-on-color: var(--black);

	/* error colors */
	--error-color: var(--red-accent-2);
	--error-hover-color: var(--red-lighten-2);
	--error-light-color: var(--red-lighten-4);
	--error-on-color: var(--white);

	/* info colors */
	--info-color: var(--blue-darken-1);
	--info-hover-color: var(--blue-lighten-1);
	--info-light-color: var(--blue-lighten-4);
	--info-on-color: var(--black);

	/* job colors */
	--job-color: var(--blue-darken-1);
	--job-hover-color: var(--blue-lighten-1);
	--job-light-color: var(--blue-lighten-4);
	--job-on-color: var(--black);

	/* chat colors */
	--chat-color: var(--indigo-accent-2);
	--chat-hover-color: var(--indigo-accent-1);
	--chat-light-color: var(--indigo-lighten-4);
	--chat-on-color: var(--black);

	/* transfer colors */
	--transfer-color: var(--indigo-lighten-1);
	--transfer-hover-color: var(--indigo-lighten-2);
	--transfer-light-color: var(--indigo-lighten-4);
	--transfer-on-color: var(--white);

	/* primary colors */
	--primary-color: var(--amber-accent-3);
	--primary-hover-color: var(--amber-accent-2);
	--primary-light-color: var(--amber-lighten-3);
	--primary-on-color: var(--black);

	/* secondary colors */
	--secondary-color: var(--dp-10-surface-color);
	--secondary-hover-color: var(--dp-14-surface-color);
	--secondary-light-color: var(--dp-16-surface-color);
	--secondary-on-color: var(--grey-darken-4);

	/* email colors */
	--email-color: var(--blue-darken-3);
	--email-hover-color: var(--blue-darken-2);
	--email-light-color: var(--blue-lighten-2);
	--email-on-color: var(--black);

	/* accent colors */
	--accent-color: var(--purple-lighten-1);
	--sub-accent-color: var(--indigo-darken-3);

	/* typography colors */
	--text-main-color: var(--grey-darken-3);
	--text-disabled-color: var(--grey-lighten-1);
	--text-error-color: var(--error-color);
	--text-success-color: var(--success-color);
	--text-link-color: var(--info-color);
	/* typography on colors */
	--text-on-brand-color: var(--white);
}
:root.theme--dark[data-v-8fadb751] {
	/* dp colors */
	--dp-24-surface-color: hsl(225, 20%, 25%);
	--dp-23-surface-color: hsl(225, 20%, 24%);
	--dp-22-surface-color: hsl(225, 20%, 23%);
	--dp-21-surface-color: hsl(225, 20%, 22%);
	--dp-20-surface-color: hsl(225, 20%, 21%);
	--dp-19-surface-color: hsl(225, 20%, 20%);
	--dp-18-surface-color: hsl(225, 20%, 19%);
	--dp-17-surface-color: hsl(225, 20%, 18%);
	--dp-16-surface-color: hsl(225, 20%, 17%);
	--dp-15-surface-color: hsl(225, 20%, 16%);
	--dp-14-surface-color: hsl(225, 20%, 15%);
	--dp-13-surface-color: hsl(225, 20%, 14%);
	--dp-12-surface-color: hsl(225, 20%, 13%);
	--dp-11-surface-color: hsl(225, 20%, 12%);
	--dp-10-surface-color: hsl(225, 20%, 11%);
	--dp-9-surface-color: hsl(225, 20%, 10%);
	--dp-8-surface-color: hsl(225, 20%, 9%);
	--dp-7-surface-color: hsl(225, 20%, 8%);
	--dp-6-surface-color: hsl(225, 20%, 7%);
	--dp-5-surface-color: hsl(225, 20%, 6%);
	--dp-4-surface-color: hsl(225, 20%, 5%);
	--dp-3-surface-color: hsl(225, 20%, 4%);
	--dp-2-surface-color: hsl(225, 20%, 3%);
	--dp-1-surface-color: hsl(225, 20%, 2%);

	/* success colors */
	--success-color: var(--green-darken-4);
	--success-hover-color: var(--green-darken-3);
	--success-light-color: var(--green-lighten-3);
	--success-on-color: var(--black);

	/* warning colors */
	--warning-color: var(--orange-accent-2);
	--warning-hover-color: var(--orange-accent-1);
	--warning-light-color: var(--orange-lighten-3);
	--warning-on-color: var(--black);

	/* error colors */
	--error-color: var(--red-accent-2);
	--error-hover-color: var(--red-lighten-2);
	--error-light-color: var(--red-lighten-3);
	--error-on-color: var(--black);

	/* info colors */
	--info-color: var(--blue-darken-1);
	--info-hover-color: var(--blue-lighten-1);
	--info-light-color: var(--blue-lighten-3);
	--info-on-color: var(--white);

	/* job colors */
	--job-color: var(--blue-darken-1);
	--job-hover-color: var(--blue-lighten-1);
	--job-light-color: var(--blue-lighten-3);
	--job-on-color: var(--white);

	/* chat colors */
	--chat-color: var(--indigo-accent-2);
	--chat-hover-color: var(--indigo-accent-1);
	--chat-light-color: var(--indigo-lighten-3);
	--chat-on-color: var(--white);

	/* transfer colors */
	--transfer-color: var(--indigo-darken-1);
	--transfer-hover-color: var(--indigo-lighten-1);
	--transfer-light-color: var(--indigo-lighten-4);
	--transfer-on-color: var(--white);

	/* primary colors */
	--primary-color: var(--amber-darken-2);
	--primary-hover-color: var(--amber-darken-1);
	--primary-light-color: var(--amber-darken-4);
	--primary-on-color: var(--black);

	/* secondary colors */
	--secondary-on-color: var(--grey-lighten-4);

	/* email colors */
	--email-color: var(--blue-darken-3);
	--email-hover-color: var(--blue-darken-2);
	--email-light-color: var(--blue-lighten-1);
	--email-on-color: var(--white);

	/* accent colors */
	--accent-color: var(--purple-lighten-1);
	--sub-accent-color: var(--indigo-darken-3);

	/* typography colors */
	--text-main-color: var(--grey-lighten-3);
	--text-disabled-color: var(--grey-darken-1);
	--text-error-color: var(--error-color);
	--text-success-color: var(--success-color);
	--text-link-color: var(--info-color);
	/* typography on colors */
	--text-on-brand-color: var(--white);

	/* context menu */
	--context-menu-option-hover-color: var(--p-surface-900);
	--context-menu-option-disabled-color: var(--p-surface-850);
}
[data-v-8fadb751]:root {
	--_elevation-color: hsla(0, 0%, 0%, 0.05);
	--elevation-1: 0px 0px 4px 1px var(--_elevation-color);
	--elevation-2: 0px 0px 6px 2px var(--_elevation-color);
	--elevation-3: 0px 0px 8px 3px var(--_elevation-color);
	--elevation-4: 0px 0px 10px 4px var(--_elevation-color);
	--elevation-5: 0px 0px 12px 5px var(--_elevation-color);
	--elevation-6: 0px 0px 14px 6px var(--_elevation-color);
	--elevation-7: 0px 0px 16px 7px var(--_elevation-color);
	--elevation-8: 0px 0px 18px 8px var(--_elevation-color);
	--elevation-9: 0px 0px 20px 9px var(--_elevation-color);
	--elevation-10: 0px 0px 22px 10px var(--_elevation-color);
}
[data-v-8fadb751]:root {
	/* Start point */
	--_spacing-multiplicator: 8px;

	/* Spacings */
	--spacing-3xs: calc(var(--_spacing-multiplicator) / 4);
	--spacing-2xs: calc(var(--_spacing-multiplicator) / 2);
	--spacing-xs: calc(var(--_spacing-multiplicator) * 1);
	--spacing-sm: calc(var(--_spacing-multiplicator) * 2);
	--spacing-md: calc(var(--_spacing-multiplicator) * 3);
	--spacing-lg: calc(var(--_spacing-multiplicator) * 4);
	--spacing-xl: calc(var(--_spacing-multiplicator) * 5);
	--spacing-2xl: calc(var(--_spacing-multiplicator) * 6);
	--spacing-3xl: calc(var(--_spacing-multiplicator) * 7);
}
[data-v-8fadb751]:root {
	--transition-fast: 0.3s;
	--transition-normal: 0.6s;
	--transition-slow: 0.9s;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Thin-B0oow3R9.woff2")
		format("woff2");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ThinItalic-Df5kGryu.woff2")
		format("woff2");
	font-weight: 100;
	font-style: italic;
	font-display: swap;
	font-display: swap;
	font-display: swap;
	font-display: swap;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraLight-BLVvTz6v.woff2")
		format("woff2");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraLightItalic-Cm43v-Vf.woff2")
		format("woff2");
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Light-De9MYPOT.woff2")
		format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-LightItalic-DV9n9KIB.woff2")
		format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Regular-Cu1XIIHs.woff2")
		format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Italic-DdaXnPiX.woff2")
		format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Medium-DJODbTHz.woff2")
		format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-MediumItalic-Dx3RkM4S.woff2")
		format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-SemiBold-DwmoiGAe.woff2")
		format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-SemiBoldItalic-DUAaODp3.woff2")
		format("woff2");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Bold-DYLVQlxQ.woff2")
		format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-BoldItalic-DSEOJb3S.woff2")
		format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraBold-CLYj8xrZ.woff2")
		format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraBoldItalic-DikM7EMV.woff2")
		format("woff2");
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Black-C-enK_Oz.woff2")
		format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-BlackItalic-D65VYM31.woff2")
		format("woff2");
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

/*
This font was added for use in wt-input-text in case we need to hide the input value,like in a password input,
but without type="password" on input. It was added because not all brawsers are support 'text-security: disc' property,
So this font changes text to discs in these cases
*/
@font-face {
	font-family: "text-security-disc";
	src: url("data:font/woff2;base64,d09GMgABAAAAAAMQAAoAAAAACAAAAALIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAggAKcHILBgABNgIkAwYEIAWJSAcvG0gHEZWcjBRfHNjNPraIGU7SkQoTFkXoFRjv8FUcbDmIj4fv117P3fcRQioFRseKQUaWwJVVVVWlqUSWQCqzAXDOVp+vqsnVapWIlhw7yBoEhhMnHFYCHMKOvkR03bf6e9V3k5C0pdB3/e9T0qkd4MMPltYAwwl4rBdKBw5Q6WQJiMe2JfXQzxqDHiJHyBCRoyWk9D0eokh2Ww9se/9MHLHYawD4n5f/Ls/b722ATVs377KRPE9jOdKY88cWRA5gIghJDQ1N8AfoA89ygvcYf4pg/Ec+TgiEgQwZEhIKKKCIIkoooYwyKqigiipqqKGOOhpooIkmWmihjTY66PxOyEABGSZiKqAAQnQ6B6/n1u98x4262u0Js8WuS9OPfJk+/cuR6bOAtTcIJOZcuOuj7bV/Kyl9h9f38fFYbrefcSYrI8lAQDMUDxExOyyGlfQ/vVsg0xGArgJ1t5MoVLEcA2Gq5ci0HECy2rnswoOiU55kl1xUjEQJdXtiFM3sEWm9lqWFmgZbjP05LRVBvbqdHux9wpyGnbGWEX6p5JEHp+lXirTnJ5QhZa5Rrsq9D67r+24QRrdzndcmBzUrQ9xXb6hp/3Kt1h1kLEFUI/CLVKdW/dqtdrVRNqpIyLr2KxU5WYVXmZuskh+VXqlluyjNMNPGBGcj6JOF0MC+M9Ucc48RhDxCB6QQzssN7C3m8bmbGCrG7VXU5FY+yGdUakVOvwKllMExtmsLwzMsVQFGpi5UbHxfXhb762Voh6fTcKeW03OxxicY73eTpa8bxhIzeWR+wnoJ6j/4kBejs2xf69j7pOSUzmzPCqNy4cojtlsLwpBhb++AtcBHQcpyGZgkYrGUBTwXn2/RF12BjlQTI1XSvANELqO18DPB+UIyNkJSZBsoX7wh7DlfsyVfTshpuSjLSv9H3fwD+a36nwAAkBFZ5aSOqp+7Bg==")
		format("woff2");
	font-weight: 100;
	font-style: normal;
}
.fade-enter-active[data-v-8fadb751],
.fade-leave-active[data-v-8fadb751] {
	transition: opacity var(--transition);
}
.fade-enter[data-v-8fadb751],
.fade-leave-to[data-v-8fadb751] {
	opacity: 0;
}
/*
  Classes for direct use in placeholder-like elements styling
   (e.g. vue-multiselect .multiselect__placeholder which is technically a span)
*/
.wt-placeholder[data-v-8fadb751] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-color);
}
.wt-placeholder--disabled[data-v-8fadb751] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-disabled-color);
}
.wt-placeholder--error[data-v-8fadb751] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-error-color);
}
.d-none[data-v-8fadb751] {
	display: none;
}
@media only screen and (max-width: 960px) {
.d-none-sm[data-v-8fadb751] {
		display: none;
}
.d-block-sm[data-v-8fadb751] {
		display: block;
}
}
@media only screen and (max-width: 600px) {
.d-none-xs[data-v-8fadb751] {
		display: none;
}
.d-block-xs[data-v-8fadb751] {
		display: block;
}
}
/* Component Variables - Centralized to avoid duplication */
/* This file imports all component-specific CSS variables once globally */
[data-v-8fadb751]:root {
	--wt-app-header-min-height: 40px;
	--wt-app-header-padding: var(--spacing-xs) var(--spacing-sm);
	--wt-app-header-background: var(--dp-9-surface-color);

	--wt-app-header-content-gap: var(--spacing-sm);
	--wt-app-header-content-panel-margin: var(--spacing-2xs);
	--wt-app-header-content-bg-color: var(--content-wrapper-color);
	--wt-app-header-content-z-index: 11;

	--wt-app-navigator-max-height: 80vh;
	--wt-app-navigator-padding: var(--wt-app-header-content-gap);
	--wt-app-navigator-item-width: 128px;
	--wt-app-navigator-item-height: 135px;
	--wt-app-navigator-item-padding: var(--spacing-xs);
	--wt-app-navigator-item-gap: var(--wt-app-header-content-gap);
	--wt-app-navigator-item-border: 1px solid;
	--wt-app-navigator-item-border-color: var(--secondary-color);
	--wt-app-navigator-item-pic-size: 88px;
	--wt-app-navigator-item-border-color--hover: var(--primary-color);

	--wt-header-actions-min-width: 120px;
	--wt-header-actions-content-sections-gap: var(--spacing-lg);
	--wt-header-actions-padding: var(--wt-app-header-content-gap);
	--wt-header-actions-action-bg-color--hover: var(--secondary-color);
	--wt-header-actions-action-link-padding: var(--spacing-xs);
}
[data-v-8fadb751]:root {
	--wt-avatar-size--size-xs: calc(var(--_spacing-multiplicator) * 3);
	--wt-avatar-size--size-sm: calc(var(--_spacing-multiplicator) * 4);
	--wt-avatar-size--size-md: calc(var(--_spacing-multiplicator) * 5);
	--wt-avatar-size--size-lg: calc(var(--_spacing-multiplicator) * 7);
	--wt-avatar-size--size-xl: calc(var(--_spacing-multiplicator) * 9);
	--wt-avatar-size--size-2xl: calc(var(--_spacing-multiplicator) * 12);
	--wt-avatar-size--size-3xl: calc(var(--_spacing-multiplicator) * 16);

	--wt-avatar-size: var(--wt-avatar-size--size-md);

	--online-color: var(--success-color);
	--dnd-color: var(--warning-color);
	--busy-color: var(--error-color);
	--offline-color: var(--disabled-color);
	--pause-color: var(--warning-color);

	--wt-avatar-text-color: var(--white);

	--wt-avatar-letters-p1-color: var(--red-lighten-2);
	--wt-avatar-letters-p2-color: var(--purple-lighten-2);
	--wt-avatar-letters-p3-color: var(--deep-purple-lighten-2);
	--wt-avatar-letters-p4-color: var(--indigo-lighten-2);
	--wt-avatar-letters-p5-color: var(--blue-lighten-1);
	--wt-avatar-letters-p6-color: var(--cyan-lighten-1);
	--wt-avatar-letters-p7-color: var(--teal-darken-3);
	--wt-avatar-letters-p8-color: var(--green-darken-2);
	--wt-avatar-letters-p9-color: var(--lime-darken-3);
	--wt-avatar-letters-p10-color: var(--yellow-darken-3);
	--wt-avatar-letters-p11-color: var(--amber-lighten-2);
	--wt-avatar-letters-p12-color: var(--orange-darken-1);
	--wt-avatar-letters-p13-color: var(--deep-purple-lighten-1);
}
:root.theme--dark[data-v-8fadb751] {
	--wt-avatar-text-color: var(--black);
}
[data-v-8fadb751]:root {
	--wt-badge-size: var(--spacing-xs);
}
[data-v-8fadb751]:root {
	--breadcrumb-indicator-size: 4px;
	--breadcrumb-gap: var(--spacing-sm);
	--breadcrumb-dot-gap: var(--spacing-2xs);
	--breadcrumb-indicator-color: var(--icon-color);
	--breadcrumb-accent-indicator-color: var(--primary-color);
}
[data-v-8fadb751]:root {
	--button-select-button-padding: var(--spacing-xs) var(--spacing-sm);

	--button-select-icon-button-padding: var(--spacing-xs);

	--button-select-buttons-gap: 1px;
}
[data-v-8fadb751]:root {
	--btn-min-width: 90px;
	--btn-min-width--size-sm: 70px;
	--btn-padding: var(--spacing-xs) var(--spacing-sm);
	--btn-padding--size-sm: var(--spacing-2xs) var(--spacing-xs);
	/* COLORS */
	--btn-primary-color: var(--primary-color);
	--btn-primary-hover-color: var(--primary-hover-color);
	--btn-primary-text-color: var(--primary-on-color);

	--btn-secondary-color: var(--dp-10-surface-color);
	--btn-secondary-hover-color: var(--dp-14-surface-color);
	--btn-secondary-text-color: var(--grey-darken-4);

	--btn-success-color: var(--success-color);
	--btn-success-hover-color: var(--success-hover-color);
	--btn-success-text-color: var(--grey-lighten-5);

	--btn-info-color: var(--info-color);
	--btn-info-hover-color: var(--info-hover-color);
	--btn-info-text-color: var(--grey-lighten-5);

	--btn-job-color: var(--job-color);
	--btn-job-hover-color: var(--job-hover-color);
	--btn-job-text-color: var(--grey-lighten-5);

	--btn-error-color: var(--error-color);
	--btn-error-hover-color: var(--error-hover-color);
	--btn-error-text-color: var(--grey-lighten-5);

	--btn-transfer-color: var(--transfer-color);
	--btn-transfer-hover-color: var(--transfer-hover-color);
	--btn-transfer-text-color: var(--transfer-on-color);

	--btn-disabled-color: var(--dp-16-surface-color);
	--btn-disabled-text-color: var(--grey-darken-1);
}
:root.theme--dark[data-v-8fadb751] {
	--btn-secondary-text-color: var(--grey-lighten-4);
}
[data-v-8fadb751]:root {
	--wt-card-border-radius: var(--p-content-border-radius);
	--wt-card-padding: var(--spacing-sm);
}
[data-v-8fadb751]:root {
	--checkbox-icon-margin: var(--spacing-xs);
}
[data-v-8fadb751]:root {
	--chip-padding: var(--spacing-2xs) var(--spacing-sm);
	--chip-border-radius: var(--spacing-lg);

	--wt-chip-main-background-color: var(--primary-light-color);
	--wt-chip-main-text-color: var(--primary-on-color);

	--wt-chip-primary-background-color: var(--primary-color);
	--wt-chip-primary-text-color: var(--primary-on-color);

	--wt-chip-secondary-background-color: var(--secondary-color);
	--wt-chip-secondary-text-color: var(--secondary-on-color);

	--wt-chip-success-background-color: var(--success-color);
	--wt-chip-success-text-color: var(--success-on-color);

	--wt-chip-warning-background-color: var(--warning-color);
	--wt-chip-warning-text-color: var(--warning-on-color);

	--wt-chip-error-background-color: var(--error-color);
	--wt-chip-error-text-color: var(--error-on-color);

	--wt-chip-transfer-background-color: var(--transfer-color);
	--wt-chip-transfer-text-color: var(--transfer-on-color);
}
[data-v-8fadb751]:root {
	--wt-context-menu-option-padding: var(--spacing-xs);

	--wt-context-menu-background-color: var(--context-menu-background-color);
	--wt-context-menu-option-text-color: var(--context-menu-option-text-color);
	--wt-context-menu-option-background-hover-color: var(
		--context-menu-option-hover-color
	);
	--wt-context-menu-option-background-disabled-color: var(
		--context-menu-option-disabled-color
	);
	--wt-context-menu-option-text-disabled-color: var(
		--context-menu-option-text-disabled-color
	);
}
:root {
&[data-v-8fadb751]{
	/*General*/
	--dp-font-family: "Montserrat";
	--dp-border-radius: var(--border-radius);
	/*Configurable border-radius*/
	--dp-cell-border-radius: var(--border-radius);
	/*Specific border radius for the calendar cell*/

	/*Sizing*/
	--dp-button-heigh: 32px;
	/*Size for buttons in overlays*/
	--dp-month-year-row-height: 24px;
	/*Height of the month-year select row*/
	--dp-month-year-row-button-size: 24px;
	/*Specific height for the next/previous buttons*/
	--dp-button-icon-height: var(--icon-md-size);
	/*Icon sizing in buttons*/
	--dp-cell-size: 24px;
	/*Width and height of calendar cell*/
	--dp-cell-padding: var(--spacing-2xs);
	/*Padding in the cell*/
	--dp-common-padding: var(--spacing-xs);
	/*Common padding used*/
	--dp-input-icon-padding: calc(var(--icon-md-size) + 2 * var(--spacing-xs));
	/*Padding on the left side of the input if icon is present*/
	--dp-input-padding: calc(var(--spacing-xs) - 1px)
		calc(var(--icon-md-size) + 2 * var(--spacing-xs));
	/*Padding in the input*/
	/* --dp-menu-min-width: 260px; Adjust the min width of the menu */
	--dp-action-buttons-padding: 2px 5px;
	/*Adjust padding for the action buttons in action row*/
	--dp-row-maring: var(--spacing-3xs);
	/*Adjust the spacing between rows in the calendar*/
	--dp-calendar-header-cell-padding: 0.5rem;
	/*Adjust padding in calendar header cells*/
	--dp-two-calendars-spacing: 10px;
	/*Space between multiple calendars*/
	--dp-overlay-col-padding: 3px;
	/*Padding in the overlay column*/
	--dp-time-inc-dec-button-size: 24px;
	/*Sizing for arrow buttons in the time picker*/

	/*Font sizes*/
	--dp-font-size: 12px;
	/*Default font-size*/
	--dp-preview-font-size: 12px;
	/*Font size of the date preview in the action row*/
	--dp-time-font-size: 12px;
	/*Font size in the time picker*/

	/*Transitions*/
	--dp-animation-duration: var(--transition);
	/*Transition duration*/
	--dp-menu-appear-transition-timing: cubic-bezier(0.4, 0, 1, 1);
	/*Timing on menu appear animation*/
	--dp-transition-timing: ease-out;
	/*Timing on slide animations*/
	}
.dp__theme_light[data-v-8fadb751] {
		--dp-background-color: var(--content-wrapper-color);
		--dp-text-color: var(--text-main-color);
		/* --dp-hover-color: var(--secondary-color-50); */
		/* --dp-hover-text-color: var(--contrast-color); */
		--dp-hover-icon-color: var(--icon-btn-hover-color);
		--dp-primary-color: var(--primary-color);
		--dp-primary-text-color: var(--primary-on-color);
		--dp-secondary-color: var(--secondary-color);
		--dp-border-color: var(--wt-text-field-input-border-color);
		--dp-menu-border-color: transparent;
		/* --dp-border-color-hover: var(--form-border--hover-color); */
		--dp-disabled-color: var(--wt-text-field-input-background-disabled-color);
		--dp-success-color: var(--success-color);
		--dp-icon-color: var(--icon-color);
		--dp-danger-color: var(--error-color);
		/* --dp-scroll-bar-background: #f3f3f3; */
		/* --dp-scroll-bar-color: #959595; */
		/* --dp-success-color-disabled: #a3d9b1; */
		/* --dp-highlight-color: rgba(25, 118, 210, 0.1); */
}
}
[data-v-8fadb751]:root {
	--divider-border: 1px solid;
	--divider-border-color: var(--grey-lighten-4);
}
:root.theme--dark[data-v-8fadb751] {
	--divider-border-color: var(--grey-darken-2);
}
[data-v-8fadb751]:root {
	--wt-dual-panel-padding: var(--spacing-sm);
	--wt-dual-panel-section-padding: var(--spacing-sm);
	--wt-dual-panel-section-gap: var(--spacing-sm);

	--wt-dual-panel-background-color: var(--grey-lighten-5);
	--wt-dual-panel-content-wrapper-color: var(--content-wrapper-color);
}
:root.theme--dark[data-v-8fadb751] {
	--wt-dual-panel-background-color: var(--grey-darken-4);
}
[data-v-8fadb751]:root {
	--wt-dummy-text-color: var(--text-main-color);
}
[data-v-8fadb751]:root {
	--wt-empty-min-width: 280px;
	--wt-empty-width: 600px;
	--wt-empty-max-width: 80vw;
}
[data-v-8fadb751]:root {
	--wt-error-page-background-color: var(--content-wrapper-color);
	--wt-error-page-text-color: var(--text-main-color);
}
[data-v-8fadb751]:root {
	--wt-expansion-panel-header-background-color: var(--dp-16-surface-color);
	--wt-expansion-panel-header-title-color: var(--text-main-color);
	--wt-expansion-panel-content-background-color: var(--content-wrapper-color);
	--wt-expansion-panel-content-text-color: var(--text-main-color);
}
[data-v-8fadb751]:root {
	--headline-min-height: 40px; /* button/search-bar height */
	--headline-title-margin: var(--spacing-sm);
	--wt-headline-background-color: var(--content-wrapper-color);
}
[data-v-8fadb751]:root {
	--icon-btn-hover-color: var(--grey-darken-5);
}
:root.theme--dark[data-v-8fadb751] {
	--icon-btn-hover-color: var(--grey-lighten-5);
}
[data-v-8fadb751]:root {
	--icon-8xl-size: 96px;
	--icon-7xl-size: 88px;
	--icon-6xl-size: 80px;
	--icon-5xl-size: 72px;
	--icon-4xl-size: 64px;
	--icon-3xl-size: 56px;
	--icon-2xl-size: 48px;
	--icon-xl-size: 40px;
	--icon-lg-size: 32px;
	--icon-md-size: 24px;
	--icon-sm-size: 16px;
	--icon-xs-size: 8px;

	--icon-color: var(--grey-darken-2);
	--icon-active-color: var(--grey-darken-4);
	--icon-primary-color: var(--p-primary-color);
	--icon-error-color: var(--p-error-color);
	--icon-success-color: var(--p-success-color);
	--icon-warning-color: var(--p-warn-color);
	--icon-on-dark-color: var(--white);
	--icon-on-light-color: var(--grey-darken-3);
	--icon-on-primary-color: var(--primary-on-color);
	--icon-info-color: var(--p-info-color);
	--icon-chat-color: var(--p-chat-color);
	--icon-transfer-color: var(--p-transfer-color);
	--icon-job-color: var(--p-task-color);
	--icon-disabled-color: var(--grey-lighten-4);
}
:root.theme--dark[data-v-8fadb751] {
	--icon-color: var(--grey-lighten-2);
	--icon-active-color: var(--grey-lighten-4);
	--icon-disabled-color: var(--grey-darken-2);
}
[data-v-8fadb751]:root {
	--wt-indicator-dot-size--size-sm: var(--spacing-xs);
	--wt-indicator-dot-size--size-md: var(--spacing-sm);
	--wt-indicator-dot-size: var(--wt-indicator-size--size-md);
	--wt-indicator-dot-offset: var(--spacing-2xs);

	--wt-indicator-text-margin: var(--spacing-2xs);

	--wt-indicator-text-color: var(--text-main-color);
	--wt-indicator-primary-color: var(--primary-color);
	--wt-indicator-secondary-color: var(--grey-lighten-3);
	--wt-indicator-disabled-color: var(--grey-lighten-4);
	--wt-indicator-success-color: var(--success-color);
	--wt-indicator-error-color: var(--error-color);
	--wt-indicator-transfer-color: var(--transfer-color);
	--wt-indicator-break-out-color: var(--warning-color);
	--wt-indicator-info-color: var(--info-color);
	--wt-indicator-final-status-color: var(--green-accent-4);
	--wt-indicator-initial-status-color: var(--red-accent-2);
	--wt-indicator-other-status-color: var(--orange-accent-2);
}
:root.theme--dark[data-v-8fadb751] {
	--wt-indicator-secondary-color: var(--grey-darken-1);
	--wt-indicator-disabled-color: var(--grey-darken-2);
}
[data-v-8fadb751]:root {
	--input-padding: calc(var(--spacing-xs) - 1px); /* - border */
	--input-border: 1px solid;
	--input-icon-margin: var(--spacing-xs);

	--input-after-wrapper-gap: var(--spacing-2xs);
}
[data-v-8fadb751]:root {
	--wt-item-link-text-color: var(--text-main-color);
}
[data-v-8fadb751]:root {
	--wt-label-padding: var(--spacing-2xs) var(--spacing-xs);

	--wt-label-color: var(--p-form-field-color);
	--wt-label-error-color: var(--p-error-color);
	--wt-label-disabled-color: var(--p-form-field-disabled-color);
}
[data-v-8fadb751]:root {
	--load-bar-height: 6px;
	--load-bar-padding: 1px;
	--load-bar-border-radius: 50px;

	--wt-load-bar-primary-color: var(--primary-on-color);
	--wt-load-bar-error-color: var(--p-error-color);
	--wt-load-bar-warning-color: var(--p-warn-color);
	--wt-load-bar-success-color: var(--p-success-color);
	--wt-load-bar-info-color: var(--p-info-color);
}
[data-v-8fadb751]:root {
	--loader-size: 44px;
	--loader-dot-size: 6px;
	--loader-animation-duration: 3s;

	--wt-loader-md-path-color: var(--grey-darken-2);
	--wt-loader-md-point-color: var(--primary-color);

	--wt-loader-sm-path-main-color: var(--grey-darken-2);
	--wt-loader-sm-path-icon-color: var(--icon-color);
	--wt-loader-sm-path-on-light-color: var(--icon-on-light-color);
	--wt-loader-sm-path-on-dark-color: var(--icon-on-dark-color);
}
:root.theme--dark[data-v-8fadb751] {
	--wt-loader-md-path-color: var(--grey-lighten-2);

	--wt-loader-sm-path-main-color: var(--grey-lighten-2);
}
[data-v-8fadb751]:root {
	--wt-logo-width: 84px;
	--wt-logo-height: 16px;
}
[data-v-8fadb751]:root {
	--wt-navigation-bar-width: 340px;
	--wt-navigation-bar-z-index: 10;
	--wt-navigation-bar-padding: var(--spacing-sm);

	--wt-navigation-bar-header-padding: var(--spacing-xs);
	--wt-navigation-bar-app-pic-height: 24px;

	--wt-navigation-bar-list-padding: var(--wt-navigation-bar-padding);
	--wt-navigation-bar-link-padding: var(--wt-navigation-bar-padding);
	--wt-navigation-bar-subnav-padding-left: var(--spacing-lg);
	--wt-navigation-bar-active-expansion-flag-width: 5px;
	--wt-navigation-bar-active-expansion-name-max-width: calc(
		100% -
		var(--icon-md-size) -
		var(--spacing-xs)
	);

	--wt-navigation-bar-background-color: var(--dp-18-surface-color);
	--wt-navigation-bar-option-text-color: var(--text-main-color);
	--wt-navigation-bar-option-text-active-color: var(--primary-on-color);
	--wt-navigation-bar-option-background-color: var(
		--wt-navigation-bar-background-color
	);
	--wt-navigation-bar-option-background-hover-color: var(--dp-20-surface-color);
	--wt-navigation-bar-option-background-active-color: var(
		--primary-light-color
	);
	--wt-navigation-bar-expansion-ribbon-color: var(--primary-color);
}
[data-v-8fadb751]:root {
	--notifications-bar-max-height: 60%;
	--notifications-bar-corner-margin: var(--spacing-sm);
	--notifications-bar-notifications-margin: 0 0 var(--spacing-xs) auto;
	--notifications-bar-z-index: 101;
}
[data-v-8fadb751]:root {
	--page-wrapper-padding: var(--spacing-sm);
	--page-wrapper-section-padding: var(--spacing-sm);
	--page-wrapper-section-gap: var(--spacing-sm);

	--wt-page-wrapper-background-color: var(--p-surface-50);
	--wt-page-wrapper-content-wrapper-color: var(--content-wrapper-color);
	/* --content-wrapper-border-radius: var(--p-border-radius-lg); */
}
:root.theme--dark[data-v-8fadb751] {
	--wt-page-wrapper-background-color: var(--p-surface-850);
}
[data-v-8fadb751]:root {
	--pagination-gap: var(--spacing-xs);
	--pagination-size-input-width: 100px;
}
.wt-player[data-v-8fadb751] {
	--plyr-color-main: var(--primary-color);
	--plyr-audio-control-color: var(--icon-color);
	--plyr-audio-control-color-hover: var(--icon-btn-hover-color);
	--plyr-audio-controls-background: var(--content-wrapper-color);
	--plyr-controls-icon-size: var(--icon-sm-size);
	--plyr-controls-icon-padding: var(--spacing-2xs);
	--plyr-audio-control-background-hover: transparent;
	--plyr-audio-progress-buffered-background: var(
		--dp-14-surface-color
	); /* loaded color */
	--wt-player-audio-progress-background: var(
		--wt-slider-background-color
	); /* not played color */
	--plyr-tooltip-background: var(--wt-tooltip-background-color);
	--plyr-tooltip-color: var(--wt-tooltip-text-color);
	/* --plyr-control-toggle-checked-background: var(--main-color); */
	--player-close-icon-transform-translate-x: var(--spacing-md);
	/* "-1 * var" for use the negative value of a variable */
	--player-close-icon-transform-translate-y: calc(-1 * var(--spacing-md));

	--wt-slider-border: 1px solid var(--secondary-color);
	--wt-slider-pointer-radius: 50%;
	--wt-slider-pointer-background-color: var(--dp-24-surface-color);
	--wt-slider-pointer-border-color: var(--dp-10-surface-color);
	--wt-slider-pointer-size: 16px;
}
[data-v-8fadb751]:root {
	--popup-wrapper-z-index: 12;

	--popup-shadow-opacity: 0.8;
	--wt-popup-shadow-color: hsla(0, 0%, 0%, var(--popup-shadow-opacity));

	--wt-popup-size-xs: 300px;
	--wt-popup-size-sm: 500px;
	--wt-popup-size-md: 800px;
	--wt-popup-size-lg: 1140px;

	--popup-max-height: 90%;

	--wt-popup-background-color: var(--dp-24-surface-color);
	--popup-sections-gap: var(--spacing-xs);
	--popup-padding: var(--spacing-sm);

	--popup-header-padding: var(--spacing-xs);
	--wt-popup-header-background-color: var(--dp-18-surface-color);
	--wt-popup-header-text-color: var(--text-main-color);

	--popup-main-section-padding-right: var(--spacing-xs); /* scroll offset */

	--popup-actions-padding: var(--spacing-xs);
}
[data-v-8fadb751]:root {
	--wt-progress-bar-height: 12px;
	--wt-progress-bar-padding: var(--spacing-3xs);
	--wt-progress-bar-border-radius: var(--wt-progress-bar-padding);

	--wt-progress-bar-background-color: var(--dp-1-surface-color);
	--wt-progress-bar-background-primary-color: var(--primary-color);
	--wt-progress-bar-background-secondary-color: var(--dp-20-surface-color);
	--wt-progress-bar-background-success-color: var(--success-color);
	--wt-progress-bar-background-error-color: var(--error-color);
	--wt-progress-bar-background-warning-color: var(--warning-color);
}
[data-v-8fadb751]:root {
	--radio-icon-margin: var(--spacing-xs);
	--radio-checkmark-size: 18px;
	--radio-bullet-size: 8px;
	--radio-border: 2px solid;
}
[data-v-8fadb751]:root {
	--rounded-action-border-size: 2px;
	--rounded-action-padding: calc(
		var(--spacing-xs) -
		var(--rounded-action-border-size)
	);

	--rounded-action-rounded-border-radius: var(--border-radius--pill);

	--rounded-action-bg-color: var(--dp-18-surface-color);
	--rounded-action-bg-hover-color: var(--dp-20-surface-color);

	--rounded-action-active-color: var(--dp-10-surface-color);
}
[data-v-8fadb751]:root {
	--wt-search-bar-width: 270px;
}
[data-v-8fadb751]:root {
	--wt-slider-pointer-size: 16px;
	--wt-slider-height: var(--wt-slider-pointer-size);

	--wt-slider-width: 100%;
	--wt-slider-input-height: 8px;
	--wt-slider-border: 1px solid var(--secondary-color);
	--wt-slider-background-color: var(--dp-1-surface-color);
	--wt-slider-background-completed-color: var(--primary-color);

	--wt-slider-pointer-background-color: var(--dp-24-surface-color);
	--wt-slider-pointer-background-hover-color: var(--dp-22-surface-color);
	--wt-slider-pointer-border-color: var(--dp-10-surface-color);

	--wt-slider-pointer-radius: 50%;

	--wt-slider-vertical-container-translation: translate(2px);
	--wt-slider-vertical-transform: translate(-100%, 0) rotate(-90deg);
	--wt-slider-vertical-transform-origin: 100% 0;
}
[data-v-8fadb751]:root {
	--wt-status-select-padding: 0 calc(var(--icon-size-md) + var(--spacing-xs)) 0
		0; /* reset wt-select padding, but preserve arrow icon padding */

	--wt-status-select-option-text-color: var(--text-main-color);
	--wt-status-select-option-background-color: var(--dp-22-surface-color);
	--wt-status-select-option-background-hover-color: var(
		--secondary-light-color
	);
	/* --wt-status-select-option-background-selected-color: var(--primary-light-color); */

	--wt-status-select-background-color: var(
		--wt-status-select-option-background-color
	);
}
[data-v-8fadb751]:root {
	--wt-stepper-divider-background-color: var(--secondary-color);
	--wt-stepper-divider-background-completed-color: var(--primary-color);
}
[data-v-8fadb751]:root {
	--switcher-icon-margin: var(--spacing-xs);
	--switcher-width: 40px;
	--switcher-height: 22px;
	--switcher-cicle-size: 14px;
	--switcher-cicle-margin: 4px;
	--switcher-cicle-translateX: 17px;
	--switcher-border-radius: 24px;
	/* circle */
	--wt-switcher-circle-background-color-on: var(--grey-darken-3);
	--wt-switcher-circle-background-color-on-hover: var(--grey-darken-4);
	--wt-switcher-circle-background-color-on-disabled: var(--grey-lighten-3);

	--wt-switcher-circle-background-color-off: var(--grey-lighten-4);
	--wt-switcher-circle-background-color-off-hover: var(--grey-lighten-5);
	--wt-switcher-circle-background-color-off-disabled: var(--grey-lighten-3);
	/* background */
	--wt-switcher-background-color-on: var(--primary-color);
	--wt-switcher-background-color-on-hover: var(--primary-hover-color);
	--wt-switcher-background-color-on-disabled: var(--primary-light-color);

	--wt-switcher-background-color-off: var(--grey-darken-2);
	--wt-switcher-background-color-off-hover: var(--grey-darken-1);
	--wt-switcher-background-color-off-disabled: var(--grey-lighten-4);
}
:root.theme--dark[data-v-8fadb751] {
	/* circle */
	--wt-switcher-circle-background-color-off: var(--grey-darken-4);
	--wt-switcher-circle-background-color-off-hover: var(--grey-darken-3);
	--wt-switcher-circle-background-color-off-disabled: var(--grey-darken-3);
	/* background */
	--wt-switcher-background-color-off: var(--grey-lighten-1);
	--wt-switcher-background-color-off-hover: var(--grey-lighten-2);
	--wt-switcher-background-color-off-disabled: var(--grey-darken-2);
}
[data-v-8fadb751]:root {
	--table-actions-padding: var(--spacing-xs);
	--table-actions-icon-gap: var(--spacing-xs);
}
[data-v-8fadb751]:root {
	--table-col-min-width: 140px;

	--table-head-sort-arrow-margin: var(--spacing-xs);
	--table-head-border: 1px solid;

	--table-min-height: 24px; /* 24px icon size or body-1 lh */
	--table-column-gap: var(--spacing-xs);
	--table-row-padding: var(--spacing-xs);

	--wt-table-head-border-color: var(--grey-lighten-1);
	--wt-table-head-background-color: var(--content-wrapper-color);
	--wt-table-primary-color: var(--content-wrapper-color);
	--wt-table-zebra-color: var(--dp-18-surface-color);
}
:root.theme--dark[data-v-8fadb751] {
	--wt-table-head-border-color: var(--grey-darken-1);
}
[data-v-8fadb751]:root {
	--tabs-underiline-height: 1px;
	--tabs-underiline-color: transparent;

	--tab-padding: var(--spacing-2xs);
	--tab-gap: var(--spacing-xs);
	--wt-tabs-text-color: var(--text-main-color);
	--wt-tabs-text-hover-color: var(--wt-tabs-text-color);
	--wt-tabs-text-active-color: var(--wt-tabs-text-color);
	--tab-border: 4px solid;
	--wt-tabs-underline-active-color: var(--primary-color);
	--tab-z-index: 1;
}
[data-v-8fadb751]:root {
	--textarea-min-height: 100px;
	--textarea-padding: var(--input-padding);
}
[data-v-8fadb751]:root {
	--timepicker-input-width: 80px;
	--timepicker-input-margin: var(--spacing-xs);
}
[data-v-8fadb751]:root {
	--tooltip-padding: var(--spacing-2xs) var(--spacing-xs);

	--wt-tooltip-text-color: var(--text-main-color);
	--wt-tooltip-background-color: var(--dp-24-surface-color);

	--tooltip-elevation: var(--elevation-10);
}
[data-v-8fadb751]:root {
	--wt-tree-item-active: var(--primary-light-color);
	--wt-tree-item-active-on: var(--grey-darken-4);

	--wt-tree-item-searched: var(--light-blue-lighten-4);
	--wt-tree-item-searched-on: var(--grey-darken-4);

	--wt-tree-item: var(--primary-light-color);
	--wt-tree-item-on: var(--grey-darken-1);

	--wt-tree-item-hover: var(--dp-24-surface-color);
	--wt-tree-item-hover-on: var(--grey-darken-1);
}
:root.theme--dark[data-v-8fadb751] {
	--wt-tree-item-active: var(--primary-light-color);
	--wt-tree-item-active-on: var(--grey-lighten-4);

	--wt-tree-item-searched: var(--light-blue-lighten-2);
	--wt-tree-item-searched-on: var(--grey-darken-4);

	--wt-tree-item: var(--primary-light-color);
	--wt-tree-item-on: var(--grey-lighten-3);

	--wt-tree-item-hover-on: var(--grey-lighten-3);
}
[data-v-8fadb751]:root {
	--wt-tree-table-col-min-witdh: var(--table-col-min-width);

	--wt-tree-table-head-sort-arrow-margin: var(--table-head-sort-arrow-margin);
	--wt-tree-table-head-border: var(--table-head-border);

	--wt-tree-table-min-height: var(--table-min-height);
	--wt-tree-table-column-gap: var(--table-column-gap);
	--wt-tree-table-row-padding: var(--table-row-padding);

	--wt-tree-table-head-border-color: var(--wt-table-head-border-color);
	--wt-tree-table-head-background-color: var(--wt-table-head-background-color);
	--wt-tree-table-primary-color: var(--wt-table-primary-color);
	--wt-tree-table-zebra-color: var(--wt-table-zebra-color);
}
:root.theme--dark[data-v-8fadb751] {
	--wt-tree-table-head-border-color: var(--wt-table-head-border-color);
}
[data-v-8fadb751]:root {
	--content-wrapper-padding: var(--spacing-xs);
	--content-wrapper-gap: var(--spacing-xs);
}
.table-page.wt-page-wrapper[data-v-8fadb751] {
	width: 100%;
	height: 100%;
}
.table-page .wt-page-wrapper__main[data-v-8fadb751],

.wt-page-wrapper__main[data-v-8fadb751]:has(.table-section) {
	min-height: 0;
}
.table-section[data-v-8fadb751] {
	display: flex;
	flex-direction: column;
	width: 100%;
	flex: 1;
	min-height: 0;
}
.table-section__table-wrapper[data-v-8fadb751] {
	display: flex;
	flex: 1 1 100%;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	min-height: 0;
	gap: var(--spacing-sm);
}
.table-section__table-wrapper .table-wrapper__visible-scroll-wrapper[data-v-8fadb751] {
	flex-grow: 1;
}
.table-section__table-wrapper .wt-pagination[data-v-8fadb751] {
	margin-top: auto;
}
.table-section__visible-scroll-wrapper[data-v-8fadb751] {
	overflow: visible;
	height: 100%;
}
.table-section__visible-scroll-wrapper .wt-table[data-v-8fadb751] {
	overflow: visible;
}
.table-title[data-v-8fadb751] {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: var(--spacing-sm) 0;
}
.table-title__title[data-v-8fadb751] {
	font-family: "Montserrat", monospace;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-transform: none;
}
.table-title__title + .hint[data-v-8fadb751] {
	top: -2px;
}
.table-title__actions-wrap[data-v-8fadb751] {
	display: flex;
	align-items: center;
	gap: var(--table-actions-icon-gap);
}
.main-section-wrapper .wt-loader.wt-brand-loader[data-v-8fadb751] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 1;
}
.table-wrapper--tab-table[data-v-8fadb751] {
	position: relative;
}
.table-wrapper--tab-table .wt-loader.wt-brand-loader[data-v-8fadb751] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 1;
}
.table-wrapper--tab-table .table-loading-wrapper[data-v-8fadb751] {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	min-height: 0;
}
.opened-card[data-v-8fadb751] {
	width: 100%;
}
.opened-card.wt-page-wrapper[data-v-8fadb751],
.opened-card.wt-dual-panel[data-v-8fadb751] {
	width: 100%;
}
.opened-card-tabs[data-v-8fadb751] {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: var(--spacing-sm);
}
.opened-card-tabs__tab[data-v-8fadb751] {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: var(--spacing-sm);
	min-height: 0;
}
.opened-card-header[data-v-8fadb751] {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin: var(--spacing-sm) 0;
}
.opened-card-header__title[data-v-8fadb751] {
	font-family: "Montserrat", monospace;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-transform: none;
}
.opened-card-header__title + .hint[data-v-8fadb751] {
	top: -2px;
}
.opened-card-form[data-v-8fadb751] {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.opened-card-input-grid[data-v-8fadb751] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: minmax(auto, auto);
	align-items: flex-start;
	grid-column-gap: var(--spacing-sm);
	grid-row-gap: var(--spacing-sm);
}
.opened-card-input-grid--1-col[data-v-8fadb751] {
	grid-template-columns: 1fr;
}
.opened-card-input-grid--w50[data-v-8fadb751] {
	width: 50%;
}
.opened-card-input-grid--w100[data-v-8fadb751] {
	width: 100%;
}
#wt-flow-diagram[data-v-8fadb751] {
  --flow-light-level-12: 90%;
  --flow-icon-header-disabled-color: var(--grey-lighten-2);
  --flow-text-main-color: var(--black);
  --flow-text-tab-color: var(--black);
  --flow-connection-default-color: var(--black);
  --flow-connection-active-color: var(--black);
  --flow-on-dark-text-color: var(--grey-lighten-5);
  --flow-on-light-text-color: var(--grey-darken-3);
  --flow-conection-point-color: var(--dp-22-surface-color);
  --flow-conection-point-border-color: var(--dp-16-surface-color);
  --flow-connection-color: var(--grey-darken-1);
  --flow-connection-goto-color: var(--red-accent-2);
  --flow-connection-failover-color: var(--red-accent-2);
  --flow-connection-selected-color: var(--red-accent-4);
  --flow-calendar-header-bg-color: var(--cyan-lighten-3);
  --flow-execute-header-bg-color: var(--orange-lighten-2);
  --flow-function-header-bg-color: var(--orange-lighten-2);
  --flow-goto-header-bg-color: var(--red-darken-1);
  --flow-if-header-bg-color: var(--pink-lighten-2);
  --flow-i-frame-header-bg-color: var(--blue-lighten-1);
  --flow-js-header-bg-color: var(--amber-accent-3);
  --flow-math-header-bg-color: var(--deep-orange-accent-2);
  --flow-string-header-bg-color: var(--light-green-darken-3);
  --flow-mark-ivr-header-bg-color: var(--pink-accent-2);
  --flow-soft-sleep-header-bg-color: var(--light-blue-lighten-1);
  --flow-set-grantee-header-bg-color: var(--yellow-darken-2);
  --flow-schema-header-bg-color: var(--deep-orange-lighten-3);
  --flow-log-header-bg-color: var(--amber-lighten-1);
  --flow-start-header-bg-color: var(--green-darken-3);
  --flow-switch-header-bg-color: var(--purple-lighten-1);
  --flow-trigger-header-bg-color: var(--red-lighten-1);
  --flow-http-header-bg-color: var(--pink-lighten-2);
  --flow-custom-code-header-bg-color: var(--grey-lighten-4);
  --flow-export-var-header-bg-color: var(--indigo-lighten-3);
  --flow-set-var-header-bg-color: var(--amber-lighten-1);
  --flow-un-set-var-header-bg-color: var(--orange-lighten-3);
  --flow-list-header-bg-color: var(--light-blue-darken-3);
  --flow-list-add-header-bg-color: var(--light-blue-darken-1);
  --flow-get-email-header-bg-color: var(--cyan-darken-4);
  --flow-playback-header-bg-color: var(--orange-lighten-1);
  --flow-ring-ready-header-bg-color: var(--green-darken-3);
  --flow-pre-answer-header-bg-color: var(--green-darken-3);
  --flow-answer-header-bg-color: var(--green-darken-3);
  --flow-hangup-header-bg-color: var(--deep-orange-darken-2);
  --flow-sip-redirect-header-bg-color: var(--amber-lighten-3);
  --flow-ringback-header-bg-color: var(--green-darken-3);
  --flow-bridge-header-bg-color: var(--orange-lighten-2);
  --flow-conference-header-bg-color: var(--cyan-lighten-3);
  --flow-generate-link-header-bg-color: var(--indigo-accent-2);
  --flow-in-band-dtmf-header-bg-color: var(--yellow-lighten-2);
  --flow-flush-dtmf-header-bg-color: var(--pink-lighten-2);
  --flow-update-cid-header-bg-color: var(--orange-lighten-2);
  --flow-park-header-bg-color: var(--cyan-lighten-3);
  --flow-join-queue-header-bg-color: var(--deep-orange-lighten-1);
  --flow-record-file-header-bg-color: var(--green-lighten-3);
  --flow-record-session-header-bg-color: var(--green-lighten-2);
  --flow-tts-header-bg-color: var(--purple-darken-1);
  --flow-recv-message-header-bg-color: var(--blue-accent-4);
  --flow-send-text-header-bg-color: var(--orange-accent-3);
  --flow-send-tts-header-bg-color: var(--purple-darken-1);
  --flow-send-file-header-bg-color: var(--purple-accent-3);
  --flow-stt-header-bg-color: var(--orange-lighten-1);
  --flow-send-email-header-bg-color: var(--deep-orange-accent-2);
  --flow-send-message-header-bg-color: var(--blue-darken-1);
  --flow-broadcast-chat-message-header-bg-color: var(--blue-darken-2);
  --flow-classifier-header-bg-color: var(--deep-purple-lighten-2);
  --flow-menu-header-bg-color: var(--amber-lighten-3);
  --flow-plata-by-mono-header-bg-color: var(--deep-purple-darken-1);
  --flow-user-info-header-bg-color: var(--green-darken-2);
  --flow-member-info-header-bg-color: var(--purple-lighten-1);
  --flow-get-queue-agents-header-bg-color: var(--indigo-lighten-2);
  --flow-join-agent-header-bg-color: var(--deep-purple-lighten-2);
  --flow-callback-queue-header-bg-color: var(--lime-darken-2);
  --flow-patch-members-header-bg-color: var(--purple-lighten-1);
  --flow-form-textfield-header-bg-color: var(--light-blue-accent-4);
  --flow-form-text-header-bg-color: var(--light-blue-lighten-3);
  --flow-form-table-header-bg-color: var(--cyan-darken-2);
  --flow-form-select-header-bg-color: var(--light-blue-lighten-1);
  --flow-open-link-header-bg-color: var(--blue-lighten-1);
  --flow-form-select-service-header-bg-color: var(--amber-lighten-1);
  --flow-form-select-case-status-header-bg-color: var(--amber-lighten-1);
  --flow-form-datetime-picker-header-bg-color: var(--blue-lighten-2);
  --flow-form-rich-text-editor-header-bg-color: var(--light-blue-darken-4);
  --flow-generate-form-header-bg-color: var(--blue-accent-4);
  --flow-make-call-header-bg-color: var(--light-green-darken-4);
  --flow-form-select-from-object-header-bg-color: var(--indigo-lighten-1);
  --flow-attempt-result-header-bg-color: var(--red-lighten-2);
  --flow-form-file-header-bg-color: var(--blue-lighten-2);
  --flow-chat-history-header-bg-color: var(--amber-accent-2);
  --flow-while-header-bg-color: var(--deep-purple-darken-4);
  --flow-chat-ai-header-bg-color: var(--lime-darken-3);
  --flow-notification-header-bg-color: var(--pink-lighten-1);
  --flow-custom-module-header-bg-color: var(--deep-purple-darken-3);
}
.theme--dark #wt-flow-diagram[data-v-8fadb751] {
  --flow-icon-header-disabled-color: var(--grey-darken-3);
  --flow-text-main-color: var(--white);
  --flow-text-tab-color: var(--white);
  --flow-connection-default-color: var(--white);
  --flow-connection-active-color: var(--black);
}
@layer wt-default, base, primevue, wt-typography;
/*
	@author HlukhovYe
	layer needed beacuse of manipulating primevue's default typography
	https://webitel.atlassian.net/browse/WTEL-8775?focusedCommentId=723773
*/
@layer wt-default {
[data-v-8fadb751]:root {
    --transition: 0.2s;
    --box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    /* viewport breakpoints */
    --viewport-lg: 1904px;
    --viewport-md: 1264px;
    --viewport-sm: 960px;
    --viewport-xs: 600px;
}
html[data-v-8fadb751] {
    height: 100%;
    font-size: 16px;
}
body[data-v-8fadb751] {
    font-family: "Montserrat", monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-transform: none;
    margin: 0;
    height: 100%;
    min-height: 100%;
}
[data-v-8fadb751] {
    box-sizing: border-box;
}
.theme--dark body[data-v-8fadb751] {
    color-scheme: dark;
}
h1[data-v-8fadb751],
  h2[data-v-8fadb751],
  h3[data-v-8fadb751],
  h4[data-v-8fadb751],
  h5[data-v-8fadb751],
  h6[data-v-8fadb751],
  p[data-v-8fadb751] {
    margin: 0;
    font-weight: normal;
}
  /* reset ul styles */
ul[data-v-8fadb751] {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
iframe[data-v-8fadb751] {
    outline: none;
    border: none;
}
a[data-v-8fadb751] {
    color: #000;
    text-decoration: none;
}
.hidden[data-v-8fadb751] {
    opacity: 0;
    pointer-events: none;
}
}
/*
	@author HlukhovYe
	reset input autofill styles https://webitel.atlassian.net/browse/WTEL-9005
*/
input[data-v-8fadb751]:-webkit-autofill,
input[data-v-8fadb751]:-webkit-autofill:hover,
input[data-v-8fadb751]:-webkit-autofill:focus,
textarea[data-v-8fadb751]:-webkit-autofill,
textarea[data-v-8fadb751]:-webkit-autofill:hover,
textarea[data-v-8fadb751]:-webkit-autofill:focus,
select[data-v-8fadb751]:-webkit-autofill,
select[data-v-8fadb751]:-webkit-autofill:hover,
select[data-v-8fadb751]:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--p-inputtext-color);
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s; /* prevents an immediate color change */
}

/* https://github.com/Akryum/floating-vue/issues/488 */
.v-popper__arrow-container[data-v-8fadb751] {
  display: none;
}
.config-form-grid[data-v-8fadb751], .combined-select-input .combined-select-input__input-wrapper[data-v-8fadb751], .config-form[data-v-8fadb751] {
  display: grid;
  grid-row-gap: var(--spacing-xs);
}
.p-toggleswitch[data-v-8fadb751] {
  flex-shrink: 0;
}

/*
xl: @media only screen and (min-width: $viewport-xl) {}
lg: @media only screen and (max-width: $viewport-xl) {}
md: @media only screen and (max-width: $viewport-lg) {}
sm: @media only screen and (max-width: $viewport-md) {}
xs: @media only screen and (max-width: $viewport-sm) {}
 */
#wt-flow-diagram[data-v-8fadb751] {
  /* В компоненті `key-value-pair` присутні компоненти з бібліотеки `webitel.ui`,
   наприклад, `<wt-input-text>`, margin яких = 10px, тому у даному випадку я використав
   змінну `--body-block-margin` , яка також = 10px.
  Можна працювати по нових спейсінгах, але треба переписати компоненти, які є в бібліотеці*/
  --body-block-margin: 10px;
  --workspace-content-offset-top: var(--spacing-xs);
  --workspace-content-offset-bottom: var(--spacing-xs);
  --workspace-content-offset-side: var(--spacing-xs);
  --nodes-panel-width: 260px;
  --config-panel-width: -16px;
  --min-flow-toolbar-width: 491px;
  --flow-toolbar-height: 40px;
  --flow-pages-height: 56px;
  --zoom-panel-width: 227px;
  --zoom-panel-height: calc(2 * var(--spacing-sm) + var(--icon-md-size));
}
@media only screen and (max-width: 960px) {
#wt-flow-diagram[data-v-8fadb751] {
    --flow-toolbar-height: 40px;
}
}
@media only screen and (max-width: 600px) {
#wt-flow-diagram[data-v-8fadb751] {
    --flow-toolbar-height: 40px;
}
}
#wt-flow-diagram[data-v-8fadb751] {
  --elevation-1: 0px 1px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-2: 0px 2px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-3: 0px 3px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-4: 0px 4px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-5: 0px 5px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-6: 0px 6px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-7: 0px 7px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-8: 0px 8px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-9: 0px 9px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-10: 0px 10px 10px hsla(0, 0%, 0%, 0.15);
}
.combined-select-input__chips-wrapper[data-v-8fadb751] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}
.combined-select-input .wt-chip--draggable[data-v-8fadb751] {
  cursor: move;
}
.combined-select-input .combined-select-input-chip__name[data-v-8fadb751] {
  white-space: normal;
  word-break: break-all;
  overflow-wrap: break-word;
}
/* 
	@author Palonnyi Oleksandr
	Must be first — locks cascade layer priority 
	before any content is loaded: wt-default < base < primevue < wt-typography.
	[WTEL-9107](https://webitel.atlassian.net/browse/WTEL-9107)

	link for complex comment https://webitel.atlassian.net/browse/WTEL-9107?focusedCommentId=740565
*/
[data-v-b91fb69e]:root {
	--scrollbar-width: 10px;
	--scrollbar-height: 10px;
	--scrollbar-thumb-width: 10px;
	--scrollbar-bg-color: var(--p-surface-50);
	--scrollbar-thumb-color: var(--p-surface-150);
	--scrollbar-hover-thumb-color: var(--p-surface-250);
	--scrollbar-border-radius: var(--border-radius);
}
:root.theme--dark[data-v-b91fb69e] {
	--scrollbar-bg-color: var(--p-surface-850);
	--scrollbar-thumb-color: var(--p-surface-700);
	--scrollbar-hover-thumb-color: var(--p-surface-800);
}
.wt-scrollbar[data-v-b91fb69e] {
	/* scrollbar itself */
}
.wt-scrollbar[data-v-b91fb69e]::-webkit-scrollbar {
	width: var(--scrollbar-width);
	height: var(--scrollbar-height);
	cursor: pointer;
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-bg-color);
}

/* scrollable element */
.wt-scrollbar[data-v-b91fb69e]::-webkit-scrollbar-thumb {
	width: var(--scrollbar-thumb-width);
	height: var(--scrollbar-thumb-height);
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-thumb-color);
}
.wt-scrollbar[data-v-b91fb69e]::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-hover-thumb-color);
}
.wt-distant-scrollbar[data-v-b91fb69e]::-webkit-scrollbar {
	width: 14px;
	height: 18px;
	background-color: var(--scrollbar-bg-color);
}
.wt-distant-scrollbar[data-v-b91fb69e]::-webkit-scrollbar-thumb {
	height: 2px;
	border: 4px solid rgba(0, 0, 0, 0);
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-thumb-color);
	background-clip: padding-box;
	/* -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05); */
}
[data-v-b91fb69e]:root {
	--border-radius: var(--spacing-2xs);
	--border-radius--pill: 50px;
}
/*
NOTE:   text-transform: none; is set explicitly cause t-t is inherited from parent
 */

/* 
	@author HlukhovYe
	layer needed for overriding primevue's default typography for the components
	https://webitel.atlassian.net/browse/WTEL-8775?focusedCommentId=723773
*/
@layer wt-typography {
.typo-heading-1[data-v-b91fb69e] {
		font-family: "Montserrat", monospace;
		font-size: 32px;
		font-weight: 600;
		line-height: 48px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-2[data-v-b91fb69e] {
		font-family: "Montserrat", monospace;
		font-size: 24px;
		font-weight: 600;
		line-height: 40px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-3[data-v-b91fb69e] {
		font-family: "Montserrat", monospace;
		font-size: 20px;
		font-weight: 600;
		line-height: 32px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-4[data-v-b91fb69e] {
		font-family: "Montserrat", monospace;
		font-size: 16px;
		font-weight: 600;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-subtitle-1[data-v-b91fb69e] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 500;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-subtitle-2[data-v-b91fb69e] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-body-1[data-v-b91fb69e] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 400;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.56px; */
		/* 0.04em */
}
.typo-body-1-bold[data-v-b91fb69e] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 700;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.56px; */
		/* 0.04em */
}
.typo-body-2[data-v-b91fb69e] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 400;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.16px; */
		/* 0.01em */
}
.typo-body-2-bold[data-v-b91fb69e] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 700;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.16px; */
		/* 0.01em */
}
.typo-button--md[data-v-b91fb69e] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 24px;
		text-transform: uppercase;
		/* letter-spacing: 0.96px; */
		/* 0.06em */
}
.typo-button--sm[data-v-b91fb69e] {
		font-family: "Montserrat", monospace;
		font-size: 10px;
		font-weight: 500;
		line-height: 24px;
		text-transform: uppercase;
		/* letter-spacing: 0.96px; */
		/* 0.06em */
}
.typo-caption[data-v-b91fb69e] {
		font-family: "Montserrat", monospace;
		font-size: 10px;
		font-weight: 400;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.48px; */
		/* 0.03em */
}
.typo-overline[data-v-b91fb69e] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 20px;
		text-transform: uppercase;
		/* letter-spacing: 2.56px; */
		/* 0.16em */
}
}
[data-v-b91fb69e]:root {
	/* LIGHTNESS */
	--lightness-lighten-5: 95%;
	--lightness-lighten-4: 90%;
	--lightness-lighten-3: 80%;
	--lightness-lighten-2: 70%;
	--lightness-lighten-1: 60%;

	--lightness-darken-1: 50%;
	--lightness-darken-2: 45%;
	--lightness-darken-3: 40%;
	--lightness-darken-4: 35%;

	--lightness-accent-1: 75%;
	--lightness-accent-2: 65%;
	--lightness-accent-3: 50%;
	--lightness-accent-4: 40%;

	/* SATURATION */
	--saturation-lighten-5: 92%;
	--saturation-lighten-4: 88%;
	--saturation-lighten-3: 90%;
	--saturation-lighten-2: 90%;
	--saturation-lighten-1: 90%;

	--saturation-darken-1: 75%;
	--saturation-darken-2: 75%;
	--saturation-darken-3: 75%;
	--saturation-darken-4: 75%;

	--saturation-accent-1: 91%;
	--saturation-accent-2: 90%;
	--saturation-accent-3: 97%;
	--saturation-accent-4: 97%;

	/* HUE */
	--hue-red: 0;
	--hue-pink: 337;
	--hue-purple: 291;
	--hue-deep-purple: 263;
	--hue-indigo: 232;
	--hue-blue: 209;
	--hue-light-blue: 202;
	--hue-cyan: 188;
	--hue-teal: 173;
	--hue-green: 121;
	--hue-light-green: 88;
	--hue-lime: 66;
	--hue-yellow: 54;
	--hue-amber: 43;
	--hue-orange: 32;
	--hue-deep-orange: 11;

	/* RED */
	--red-lighten-5: hsla(
		var(--hue-red),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--red-lighten-4: hsla(
		var(--hue-red),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--red-lighten-3: hsla(
		var(--hue-red),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--red-lighten-2: hsla(
		var(--hue-red),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--red-lighten-1: hsla(
		var(--hue-red),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--red-darken-4: hsla(
		var(--hue-red),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--red-darken-3: hsla(
		var(--hue-red),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--red-darken-2: hsla(
		var(--hue-red),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--red-darken-1: hsla(
		var(--hue-red),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--red-accent-4: hsla(
		var(--hue-red),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--red-accent-3: hsla(
		var(--hue-red),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--red-accent-2: hsla(
		var(--hue-red),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--red-accent-1: hsla(
		var(--hue-red),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* PINK */
	--pink-lighten-5: hsla(
		var(--hue-pink),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--pink-lighten-4: hsla(
		var(--hue-pink),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--pink-lighten-3: hsla(
		var(--hue-pink),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--pink-lighten-2: hsla(
		var(--hue-pink),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--pink-lighten-1: hsla(
		var(--hue-pink),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--pink-darken-4: hsla(
		var(--hue-pink),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--pink-darken-3: hsla(
		var(--hue-pink),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--pink-darken-2: hsla(
		var(--hue-pink),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--pink-darken-1: hsla(
		var(--hue-pink),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--pink-accent-4: hsla(
		var(--hue-pink),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--pink-accent-3: hsla(
		var(--hue-pink),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--pink-accent-2: hsla(
		var(--hue-pink),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--pink-accent-1: hsla(
		var(--hue-pink),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* PURPLE */
	--purple-lighten-5: hsla(
		var(--hue-purple),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--purple-lighten-4: hsla(
		var(--hue-purple),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--purple-lighten-3: hsla(
		var(--hue-purple),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--purple-lighten-2: hsla(
		var(--hue-purple),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--purple-lighten-1: hsla(
		var(--hue-purple),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--purple-darken-4: hsla(
		var(--hue-purple),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--purple-darken-3: hsla(
		var(--hue-purple),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--purple-darken-2: hsla(
		var(--hue-purple),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--purple-darken-1: hsla(
		var(--hue-purple),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--purple-accent-4: hsla(
		var(--hue-purple),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--purple-accent-3: hsla(
		var(--hue-purple),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--purple-accent-2: hsla(
		var(--hue-purple),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--purple-accent-1: hsla(
		var(--hue-purple),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* DEEP PURPLE */
	--deep-purple-lighten-5: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--deep-purple-lighten-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--deep-purple-lighten-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--deep-purple-lighten-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--deep-purple-lighten-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--deep-purple-darken-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--deep-purple-darken-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--deep-purple-darken-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--deep-purple-darken-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--deep-purple-accent-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--deep-purple-accent-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--deep-purple-accent-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--deep-purple-accent-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* INDIGO */
	--indigo-lighten-5: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--indigo-lighten-4: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--indigo-lighten-3: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--indigo-lighten-2: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--indigo-lighten-1: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--indigo-darken-4: hsla(
		var(--hue-indigo),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--indigo-darken-3: hsla(
		var(--hue-indigo),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--indigo-darken-2: hsla(
		var(--hue-indigo),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--indigo-darken-1: hsla(
		var(--hue-indigo),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--indigo-accent-4: hsla(
		var(--hue-indigo),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--indigo-accent-3: hsla(
		var(--hue-indigo),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--indigo-accent-2: hsla(
		var(--hue-indigo),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--indigo-accent-1: hsla(
		var(--hue-indigo),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* BLUE */
	--blue-lighten-5: hsla(
		var(--hue-blue),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--blue-lighten-4: hsla(
		var(--hue-blue),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--blue-lighten-3: hsla(
		var(--hue-blue),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--blue-lighten-2: hsla(
		var(--hue-blue),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--blue-lighten-1: hsla(
		var(--hue-blue),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--blue-darken-4: hsla(
		var(--hue-blue),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--blue-darken-3: hsla(
		var(--hue-blue),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--blue-darken-2: hsla(
		var(--hue-blue),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--blue-darken-1: hsla(
		var(--hue-blue),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--blue-accent-4: hsla(
		var(--hue-blue),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--blue-accent-3: hsla(
		var(--hue-blue),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--blue-accent-2: hsla(
		var(--hue-blue),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--blue-accent-1: hsla(
		var(--hue-blue),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIGHT BLUE */
	--light-blue-lighten-5: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--light-blue-lighten-4: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--light-blue-lighten-3: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--light-blue-lighten-2: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--light-blue-lighten-1: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--light-blue-darken-4: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--light-blue-darken-3: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--light-blue-darken-2: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--light-blue-darken-1: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--light-blue-accent-4: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--light-blue-accent-3: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--light-blue-accent-2: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--light-blue-accent-1: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* CYAN */
	--cyan-lighten-5: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--cyan-lighten-4: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--cyan-lighten-3: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--cyan-lighten-2: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--cyan-lighten-1: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--cyan-darken-4: hsla(
		var(--hue-cyan),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--cyan-darken-3: hsla(
		var(--hue-cyan),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--cyan-darken-2: hsla(
		var(--hue-cyan),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--cyan-darken-1: hsla(
		var(--hue-cyan),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--cyan-accent-4: hsla(
		var(--hue-cyan),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--cyan-accent-3: hsla(
		var(--hue-cyan),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--cyan-accent-2: hsla(
		var(--hue-cyan),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--cyan-accent-1: hsla(
		var(--hue-cyan),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* TEAL */
	--teal-lighten-5: hsla(
		var(--hue-teal),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--teal-lighten-4: hsla(
		var(--hue-teal),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--teal-lighten-3: hsla(
		var(--hue-teal),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--teal-lighten-2: hsla(
		var(--hue-teal),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--teal-lighten-1: hsla(
		var(--hue-teal),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--teal-darken-4: hsla(
		var(--hue-teal),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--teal-darken-3: hsla(
		var(--hue-teal),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--teal-darken-2: hsla(
		var(--hue-teal),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--teal-darken-1: hsla(
		var(--hue-teal),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--teal-accent-4: hsla(
		var(--hue-teal),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--teal-accent-3: hsla(
		var(--hue-teal),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--teal-accent-2: hsla(
		var(--hue-teal),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--teal-accent-1: hsla(
		var(--hue-teal),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* GREEN */
	--green-lighten-5: hsla(
		var(--hue-green),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--green-lighten-4: hsla(
		var(--hue-green),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--green-lighten-3: hsla(
		var(--hue-green),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--green-lighten-2: hsla(
		var(--hue-green),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--green-lighten-1: hsla(
		var(--hue-green),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--green-darken-4: hsla(
		var(--hue-green),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--green-darken-3: hsla(
		var(--hue-green),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--green-darken-2: hsla(
		var(--hue-green),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--green-darken-1: hsla(
		var(--hue-green),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--green-accent-4: hsla(
		var(--hue-green),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--green-accent-3: hsla(
		var(--hue-green),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--green-accent-2: hsla(
		var(--hue-green),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--green-accent-1: hsla(
		var(--hue-green),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIGHT GREEN */
	--light-green-lighten-5: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--light-green-lighten-4: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--light-green-lighten-3: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--light-green-lighten-2: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--light-green-lighten-1: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--light-green-darken-4: hsla(
		var(--hue-light-green),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--light-green-darken-3: hsla(
		var(--hue-light-green),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--light-green-darken-2: hsla(
		var(--hue-light-green),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--light-green-darken-1: hsla(
		var(--hue-light-green),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--light-green-accent-4: hsla(
		var(--hue-light-green),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--light-green-accent-3: hsla(
		var(--hue-light-green),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--light-green-accent-2: hsla(
		var(--hue-light-green),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--light-green-accent-1: hsla(
		var(--hue-light-green),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIME */
	--lime-lighten-5: hsla(
		var(--hue-lime),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--lime-lighten-4: hsla(
		var(--hue-lime),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--lime-lighten-3: hsla(
		var(--hue-lime),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--lime-lighten-2: hsla(
		var(--hue-lime),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--lime-lighten-1: hsla(
		var(--hue-lime),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--lime-darken-4: hsla(
		var(--hue-lime),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--lime-darken-3: hsla(
		var(--hue-lime),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--lime-darken-2: hsla(
		var(--hue-lime),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--lime-darken-1: hsla(
		var(--hue-lime),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--lime-accent-4: hsla(
		var(--hue-lime),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--lime-accent-3: hsla(
		var(--hue-lime),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--lime-accent-2: hsla(
		var(--hue-lime),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--lime-accent-1: hsla(
		var(--hue-lime),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* yellow */
	--yellow-lighten-5: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--yellow-lighten-4: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--yellow-lighten-3: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--yellow-lighten-2: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--yellow-lighten-1: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--yellow-darken-4: hsla(
		var(--hue-yellow),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--yellow-darken-3: hsla(
		var(--hue-yellow),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--yellow-darken-2: hsla(
		var(--hue-yellow),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--yellow-darken-1: hsla(
		var(--hue-yellow),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--yellow-accent-4: hsla(
		var(--hue-yellow),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--yellow-accent-3: hsla(
		var(--hue-yellow),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--yellow-accent-2: hsla(
		var(--hue-yellow),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--yellow-accent-1: hsla(
		var(--hue-yellow),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* amber */
	--amber-lighten-5: hsla(
		var(--hue-amber),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--amber-lighten-4: hsla(
		var(--hue-amber),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--amber-lighten-3: hsla(
		var(--hue-amber),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--amber-lighten-2: hsla(
		var(--hue-amber),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--amber-lighten-1: hsla(
		var(--hue-amber),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--amber-darken-4: hsla(
		var(--hue-amber),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--amber-darken-3: hsla(
		var(--hue-amber),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--amber-darken-2: hsla(
		var(--hue-amber),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--amber-darken-1: hsla(
		var(--hue-amber),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--amber-accent-4: hsla(
		var(--hue-amber),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--amber-accent-3: hsla(
		var(--hue-amber),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--amber-accent-2: hsla(
		var(--hue-amber),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--amber-accent-1: hsla(
		var(--hue-amber),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* orange */
	--orange-lighten-5: hsla(
		var(--hue-orange),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--orange-lighten-4: hsla(
		var(--hue-orange),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--orange-lighten-3: hsla(
		var(--hue-orange),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--orange-lighten-2: hsla(
		var(--hue-orange),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--orange-lighten-1: hsla(
		var(--hue-orange),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--orange-darken-4: hsla(
		var(--hue-orange),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--orange-darken-3: hsla(
		var(--hue-orange),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--orange-darken-2: hsla(
		var(--hue-orange),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--orange-darken-1: hsla(
		var(--hue-orange),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--orange-accent-4: hsla(
		var(--hue-orange),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--orange-accent-3: hsla(
		var(--hue-orange),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--orange-accent-2: hsla(
		var(--hue-orange),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--orange-accent-1: hsla(
		var(--hue-orange),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* deep-orange */
	--deep-orange-lighten-5: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--deep-orange-lighten-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--deep-orange-lighten-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--deep-orange-lighten-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--deep-orange-lighten-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--deep-orange-darken-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--deep-orange-darken-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--deep-orange-darken-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--deep-orange-darken-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--deep-orange-accent-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--deep-orange-accent-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--deep-orange-accent-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--deep-orange-accent-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* grey */

	--lightness-lighten-5-grey: 94%;
	--lightness-lighten-4-grey: 84%;
	--lightness-lighten-3-grey: 74%;
	--lightness-lighten-2-grey: 64%;
	--lightness-lighten-1-grey: 54%;

	--lightness-darken-1-grey: 44%;
	--lightness-darken-2-grey: 34%;
	--lightness-darken-3-grey: 24%;
	--lightness-darken-4-grey: 14%;
	--lightness-darken-5-grey: 4%;

	--saturation-grey: 20%;
	--hue-grey: 225;

	--grey-lighten-5: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-5-grey),
		1
	);
	--grey-lighten-4: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-4-grey),
		1
	);
	--grey-lighten-3: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-3-grey),
		1
	);
	--grey-lighten-2: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-2-grey),
		1
	);
	--grey-lighten-1: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-1-grey),
		1
	);

	--grey-darken-1: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-1-grey),
		1
	);
	--grey-darken-2: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-2-grey),
		1
	);
	--grey-darken-3: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-3-grey),
		1
	);
	--grey-darken-4: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-4-grey),
		1
	);
	--grey-darken-5: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-5-grey),
		1
	);

	--black: hsla(0, 0%, 0%, 1);
	--white: hsla(0, 0%, 100%, 1);
}
[data-v-b91fb69e]:root {
	/* HSL COLORS HUE VALUE */
	--_accent-color-hue: 42;
	--_secondary-color-hue: 202;
	--_page-bg-color-hue: 209;
	--_icon-color-hue: 202;
	--_positive-color-hue: 119;
	--_negative-color-hue: 11;

	--_hold-color-hue: 54;
	--_transfer-color-hue: 227;
	--_job-color-hue: 209;

	/* DEFAULT STATES OPACITY */
	--_opacity--default: 0.8;
	--_opacity--hover: 1;
	--_opacity--active: 1;
	--_opacity--focus: 0.8;
	--_opacity--disabled: 0.4;

	/* BASIC HSL COLORS VALUES */
	--_accent-color: var(--_accent-color-hue), 100%, 50%;
	--_main-color: var(--_accent-color-hue), 20%, 99%;
	--_contrast-color: var(--_accent-color-hue), 20%, 1%;
	--_secondary-color: var(--_secondary-color-hue), 20%, 90%;
	--_secondary-color-50: var(--_secondary-color-hue), 22%, 96%;
	--_page-bg-color: var(--_page-bg-color-hue), 20%, 95%;
	--_header-color: var(--_page-bg-color-hue), 20%, 90%;
	--_positive-color: var(--_positive-color-hue), 60%, 40%;
	--_negative-color: var(--_negative-color-hue), 80%, 50%;
	--_icon-color: var(--_icon-color-hue), 100%, 15%;

	--_hold-color: var(--_hold-color-hue), 80%, 50%;
	--_transfer-color: var(--_transfer-color-hue), 80%, 50%;
	--_job-color: var(--_job-color-hue), 96%, 57%;

	/* MAIN COLORS */
	--accent-color: hsla(var(--_accent-color), 1);

	--main-color: hsla(var(--_main-color), 1);

	--contrast-color: hsla(var(--_contrast-color), 1);

	--secondary-color: hsla(var(--_secondary-color), 1);
	--secondary-color-50: hsla(var(--_secondary-color-50), 1);

	/* ICON COLORS */
	--icon-color-secondary: hsla(var(--_icon-color), 0.25);

	--icon-color--hover: hsla(var(--_icon-color), var(--_opacity--hover));

	--icon-color-accent: var(--accent-color);
	--icon-color-contrast: hsla(var(--_main-color), var(--_opacity--default));
	--icon-color-active: var(--icon-color--hover);
	--icon-color-disabled: hsla(var(--_icon-color), var(--_opacity--disabled));
	--icon-color-success: var(--true-color);
	--icon-color-danger: var(--false-color);
	--icon-color-transfer: var(--transfer-color);
	--icon-color-hold: var(--hold-color);
	--icon-color-secondary-50: var(--secondary-color-50);

	--page-bg-color: hsla(var(--_page-bg-color), 1);
	--header-color: hsla(var(--_header-color), 1);

	--accent-secondary-color: hsla(var(--_accent-color), 0.3);

	/* SEMANTIC COLORS */
	--disabled-color: hsl(var(--_contrast-color), var(--_opacity--disabled));

	--true-color: hsla(var(--_positive-color), var(--_opacity--default));
	--true--hover-color: hsla(var(--_positive-color), var(--_opacity--hover));

	--false-color: hsla(var(--_negative-color), var(--_opacity--default));
	--false--hover-color: hsla(var(--_negative-color), var(--_opacity--hover));

	--hold-color: hsla(var(--_hold-color), var(--_opacity--default));
	--hold--hover-color: hsla(var(--_hold-color), var(--_opacity--hover));

	--transfer-color: hsla(var(--_transfer-color), var(--_opacity--default));
	--transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover));

	--job-color: hsla(var(--_job-color), var(--_opacity--default));
	--job--hover-color: hsla(var(--_job-color), var(--_opacity--hover));

	--link-color: hsla(205, 90%, 45%, 1);
	--link--hover-color: hsla(205, 90%, 60%, 1);

	/* SUBORDINATE COLORS */
	--tag-bg-color: var(--accent-secondary-color);

	/* FORM STATES OPACITY */
	--form-opacity--default: var(--_opacity--default);
	--form-opacity--hover: var(--_opacity--hover);
	--form-opacity--active: var(--_opacity--active);
	--form-opacity--focus: var(--_opacity--focus);
	--form-opacity--disabled: var(--_opacity--disabled);

	--form-placeholder-opacity: 0.6;
	--form-placeholder-opacity--focus: 0.4;
	--form-border-opacity--disabled: 0.05;

	--form-opacity--ouline--default: 0.4;
	--form-opacity--ouline--hover: 0.7;

	/* FORM COLORS */
	--form-input-color: var(--contrast-color);
	/* user input color */

	--form-label-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);
	--form-label--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--hover)
	);
	--form-label--active-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--active)
	);
	--form-label--disabled-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--disabled)
	);

	--form-border-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);
	--form-border--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--hover)
	);
	--form-border--disabled-color: hsla(
		var(--_contrast-color),
		var(--form-border-opacity--disabled)
	);

	--form-placeholder-color: hsla(
		var(--_contrast-color),
		var(--form-placeholder-opacity)
	);
	--form-placeholder-color--focus: hsla(
		var(--_contrast-color),
		var(--form-placeholder-opacity--focus)
	);
	--form-placeholder-color--disabled: hsla(
		var(--_contrast-color),
		var(--form-opacity--disabled)
	);

	/* outline */
	--form-outline-label-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);

	--form-outline-border-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--ouline--default)
	);
	--form-outline-border--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--ouline--hover)
	);

	/* TEXT OPACITY */
	--text-opacity--default: var(--_opacity--default);
	--text-opacity----outline--default: 0.7;
	--text-opacity--disabled: 0.5;

	/* TEXT COLORS */
	--text-primary-color: hsla(
		var(--_contrast-color),
		var(--text-opacity--default)
	);
	--text-outline-color: hsla(
		var(--_contrast-color),
		var(--text-opacity----outline--default)
	);
	--text-contrast-color: hsla(var(--_main-color), var(--text-opacity--default));
	--text--disabled-color: hsla(
		var(--_contrast-color),
		var(--text-opacity--disabled)
	);

	/* CHAT COLORS */
	--_chat-client-color: var(--_accent-color);
	--_chat-client-opacity: 0.2;
	--_chat-agent-color: var(--_secondary-color-50);
	--_chat-agent-opacity: 1;

	--chat-client-message-bg-color: hsla(
		var(--_chat-client-color),
		var(--_chat-client-opacity)
	);
	--chat-agent-message-bg-color: hsla(
		var(--_chat-agent-color),
		var(--_chat-agent-opacity)
	);
	--chat-client-attachment-bg-color: hsla(
		var(--_chat-client-color),
		var(--_chat-client-opacity)
	);
	--chat-agent-attachment-bg-color: hsla(
		var(--_chat-agent-color),
		var(--_chat-agent-opacity)
	);
}
/* shared text field colors */
[data-v-b91fb69e]:root {
	/* TODO: move to separate helper-text component */
	/* helper */
	--wt-helper-text-color: var(--text-main-color);
	--wt-helper-text-disabled-color: var(--text-disabled-color);
	--wt-helper-text-invalid-color: var(--text-error-color);

	/* text */
	--wt-text-field-text-color: var(--black);

	/* placeholder */
	--wt-text-field-error-text-color: var(--error-color);
	--wt-text-field-placeholder-color: var(--grey-lighten-1);
	--wt-text-field-placeholder-error-color: var(--error-color);
	--wt-text-field-placeholder-disabled-color: var(--text-disabled-color);

	/* border */
	--wt-text-field-input-border-color: var(--grey-darken-1);
	--wt-text-field-input-border-disabled-color: var(--dp-16-surface-color);
	--wt-text-field-input-border-error-color: var(--error-color);

	/* input bg */
	--wt-text-field-input-background-disabled-color: var(--dp-16-surface-color);

	/* select */
	--wt-text-field-select-option-text-color: var(--text-main-color);
	--wt-text-field-select-option-text-hover-color: var(--primary-on-color);
	--wt-text-field-select-option-text-selected-color: var(--primary-on-color);

	--wt-text-field-select-option-wrapper-border-color: var(
		--dp-22-surface-color
	);
	--wt-text-field-select-option-background-color: var(--dp-22-surface-color);
	--wt-text-field-select-option-background-hover-color: var(
		--primary-light-color
	);
	--wt-text-field-select-option-background-selected-color: var(--primary-color);
}
:root.theme--dark[data-v-b91fb69e] {
	/* text */
	--wt-text-field-text-color: var(--white);

	--wt-text-field-input-border-color: var(--grey-lighten-1);
}
[data-v-b91fb69e]:root {
	/* dp colors */
	--dp-24-surface-color: hsl(0, 0%, 100%);
	--dp-23-surface-color: hsl(225, 20%, 99%);
	--dp-22-surface-color: hsl(225, 20%, 98%);
	--dp-21-surface-color: hsl(225, 20%, 97%);
	--dp-20-surface-color: hsl(225, 20%, 96%);
	--dp-19-surface-color: hsl(225, 20%, 95%);
	--dp-18-surface-color: hsl(225, 20%, 94%);
	--dp-17-surface-color: hsl(225, 20%, 93%);
	--dp-16-surface-color: hsl(225, 20%, 92%);
	--dp-15-surface-color: hsl(225, 20%, 91%);
	--dp-14-surface-color: hsl(225, 20%, 90%);
	--dp-13-surface-color: hsl(225, 20%, 89%);
	--dp-12-surface-color: hsl(225, 20%, 88%);
	--dp-11-surface-color: hsl(225, 20%, 87%);
	--dp-10-surface-color: hsl(225, 20%, 86%);
	--dp-9-surface-color: hsl(225, 20%, 85%);
	--dp-8-surface-color: hsl(225, 20%, 84%);
	--dp-7-surface-color: hsl(225, 20%, 83%);
	--dp-6-surface-color: hsl(225, 20%, 82%);
	--dp-5-surface-color: hsl(225, 20%, 81%);
	--dp-4-surface-color: hsl(225, 20%, 80%);
	--dp-3-surface-color: hsl(225, 20%, 79%);
	--dp-2-surface-color: hsl(225, 20%, 78%);
	--dp-1-surface-color: hsl(225, 20%, 77%);

	/* content wrapper */
	--content-wrapper-color: var(--p-content-background);
	--content-wrapper-hover-color: var(--p-content-hover-background);

	/* context menu */
	--context-menu-background-color: var(--content-wrapper-color);
	--context-menu-option-hover-color: var(--p-surface-50);
	--context-menu-option-disabled-color: var(--p-surface-100);
	--context-menu-option-text-color: var(--text-main-color);
	--context-menu-option-text-disabled-color: var(--text-disabled-color);

	/* success colors */
	--success-color: var(--green-darken-4);
	--success-hover-color: var(--green-darken-3);
	--success-light-color: var(--green-lighten-4);
	--success-on-color: var(--white);

	/* warning colors */
	--warning-color: var(--orange-accent-2);
	--warning-hover-color: var(--orange-accent-1);
	--warning-light-color: var(--orange-lighten-4);
	--warning-on-color: var(--black);

	/* error colors */
	--error-color: var(--red-accent-2);
	--error-hover-color: var(--red-lighten-2);
	--error-light-color: var(--red-lighten-4);
	--error-on-color: var(--white);

	/* info colors */
	--info-color: var(--blue-darken-1);
	--info-hover-color: var(--blue-lighten-1);
	--info-light-color: var(--blue-lighten-4);
	--info-on-color: var(--black);

	/* job colors */
	--job-color: var(--blue-darken-1);
	--job-hover-color: var(--blue-lighten-1);
	--job-light-color: var(--blue-lighten-4);
	--job-on-color: var(--black);

	/* chat colors */
	--chat-color: var(--indigo-accent-2);
	--chat-hover-color: var(--indigo-accent-1);
	--chat-light-color: var(--indigo-lighten-4);
	--chat-on-color: var(--black);

	/* transfer colors */
	--transfer-color: var(--indigo-lighten-1);
	--transfer-hover-color: var(--indigo-lighten-2);
	--transfer-light-color: var(--indigo-lighten-4);
	--transfer-on-color: var(--white);

	/* primary colors */
	--primary-color: var(--amber-accent-3);
	--primary-hover-color: var(--amber-accent-2);
	--primary-light-color: var(--amber-lighten-3);
	--primary-on-color: var(--black);

	/* secondary colors */
	--secondary-color: var(--dp-10-surface-color);
	--secondary-hover-color: var(--dp-14-surface-color);
	--secondary-light-color: var(--dp-16-surface-color);
	--secondary-on-color: var(--grey-darken-4);

	/* email colors */
	--email-color: var(--blue-darken-3);
	--email-hover-color: var(--blue-darken-2);
	--email-light-color: var(--blue-lighten-2);
	--email-on-color: var(--black);

	/* accent colors */
	--accent-color: var(--purple-lighten-1);
	--sub-accent-color: var(--indigo-darken-3);

	/* typography colors */
	--text-main-color: var(--grey-darken-3);
	--text-disabled-color: var(--grey-lighten-1);
	--text-error-color: var(--error-color);
	--text-success-color: var(--success-color);
	--text-link-color: var(--info-color);
	/* typography on colors */
	--text-on-brand-color: var(--white);
}
:root.theme--dark[data-v-b91fb69e] {
	/* dp colors */
	--dp-24-surface-color: hsl(225, 20%, 25%);
	--dp-23-surface-color: hsl(225, 20%, 24%);
	--dp-22-surface-color: hsl(225, 20%, 23%);
	--dp-21-surface-color: hsl(225, 20%, 22%);
	--dp-20-surface-color: hsl(225, 20%, 21%);
	--dp-19-surface-color: hsl(225, 20%, 20%);
	--dp-18-surface-color: hsl(225, 20%, 19%);
	--dp-17-surface-color: hsl(225, 20%, 18%);
	--dp-16-surface-color: hsl(225, 20%, 17%);
	--dp-15-surface-color: hsl(225, 20%, 16%);
	--dp-14-surface-color: hsl(225, 20%, 15%);
	--dp-13-surface-color: hsl(225, 20%, 14%);
	--dp-12-surface-color: hsl(225, 20%, 13%);
	--dp-11-surface-color: hsl(225, 20%, 12%);
	--dp-10-surface-color: hsl(225, 20%, 11%);
	--dp-9-surface-color: hsl(225, 20%, 10%);
	--dp-8-surface-color: hsl(225, 20%, 9%);
	--dp-7-surface-color: hsl(225, 20%, 8%);
	--dp-6-surface-color: hsl(225, 20%, 7%);
	--dp-5-surface-color: hsl(225, 20%, 6%);
	--dp-4-surface-color: hsl(225, 20%, 5%);
	--dp-3-surface-color: hsl(225, 20%, 4%);
	--dp-2-surface-color: hsl(225, 20%, 3%);
	--dp-1-surface-color: hsl(225, 20%, 2%);

	/* success colors */
	--success-color: var(--green-darken-4);
	--success-hover-color: var(--green-darken-3);
	--success-light-color: var(--green-lighten-3);
	--success-on-color: var(--black);

	/* warning colors */
	--warning-color: var(--orange-accent-2);
	--warning-hover-color: var(--orange-accent-1);
	--warning-light-color: var(--orange-lighten-3);
	--warning-on-color: var(--black);

	/* error colors */
	--error-color: var(--red-accent-2);
	--error-hover-color: var(--red-lighten-2);
	--error-light-color: var(--red-lighten-3);
	--error-on-color: var(--black);

	/* info colors */
	--info-color: var(--blue-darken-1);
	--info-hover-color: var(--blue-lighten-1);
	--info-light-color: var(--blue-lighten-3);
	--info-on-color: var(--white);

	/* job colors */
	--job-color: var(--blue-darken-1);
	--job-hover-color: var(--blue-lighten-1);
	--job-light-color: var(--blue-lighten-3);
	--job-on-color: var(--white);

	/* chat colors */
	--chat-color: var(--indigo-accent-2);
	--chat-hover-color: var(--indigo-accent-1);
	--chat-light-color: var(--indigo-lighten-3);
	--chat-on-color: var(--white);

	/* transfer colors */
	--transfer-color: var(--indigo-darken-1);
	--transfer-hover-color: var(--indigo-lighten-1);
	--transfer-light-color: var(--indigo-lighten-4);
	--transfer-on-color: var(--white);

	/* primary colors */
	--primary-color: var(--amber-darken-2);
	--primary-hover-color: var(--amber-darken-1);
	--primary-light-color: var(--amber-darken-4);
	--primary-on-color: var(--black);

	/* secondary colors */
	--secondary-on-color: var(--grey-lighten-4);

	/* email colors */
	--email-color: var(--blue-darken-3);
	--email-hover-color: var(--blue-darken-2);
	--email-light-color: var(--blue-lighten-1);
	--email-on-color: var(--white);

	/* accent colors */
	--accent-color: var(--purple-lighten-1);
	--sub-accent-color: var(--indigo-darken-3);

	/* typography colors */
	--text-main-color: var(--grey-lighten-3);
	--text-disabled-color: var(--grey-darken-1);
	--text-error-color: var(--error-color);
	--text-success-color: var(--success-color);
	--text-link-color: var(--info-color);
	/* typography on colors */
	--text-on-brand-color: var(--white);

	/* context menu */
	--context-menu-option-hover-color: var(--p-surface-900);
	--context-menu-option-disabled-color: var(--p-surface-850);
}
[data-v-b91fb69e]:root {
	--_elevation-color: hsla(0, 0%, 0%, 0.05);
	--elevation-1: 0px 0px 4px 1px var(--_elevation-color);
	--elevation-2: 0px 0px 6px 2px var(--_elevation-color);
	--elevation-3: 0px 0px 8px 3px var(--_elevation-color);
	--elevation-4: 0px 0px 10px 4px var(--_elevation-color);
	--elevation-5: 0px 0px 12px 5px var(--_elevation-color);
	--elevation-6: 0px 0px 14px 6px var(--_elevation-color);
	--elevation-7: 0px 0px 16px 7px var(--_elevation-color);
	--elevation-8: 0px 0px 18px 8px var(--_elevation-color);
	--elevation-9: 0px 0px 20px 9px var(--_elevation-color);
	--elevation-10: 0px 0px 22px 10px var(--_elevation-color);
}
[data-v-b91fb69e]:root {
	/* Start point */
	--_spacing-multiplicator: 8px;

	/* Spacings */
	--spacing-3xs: calc(var(--_spacing-multiplicator) / 4);
	--spacing-2xs: calc(var(--_spacing-multiplicator) / 2);
	--spacing-xs: calc(var(--_spacing-multiplicator) * 1);
	--spacing-sm: calc(var(--_spacing-multiplicator) * 2);
	--spacing-md: calc(var(--_spacing-multiplicator) * 3);
	--spacing-lg: calc(var(--_spacing-multiplicator) * 4);
	--spacing-xl: calc(var(--_spacing-multiplicator) * 5);
	--spacing-2xl: calc(var(--_spacing-multiplicator) * 6);
	--spacing-3xl: calc(var(--_spacing-multiplicator) * 7);
}
[data-v-b91fb69e]:root {
	--transition-fast: 0.3s;
	--transition-normal: 0.6s;
	--transition-slow: 0.9s;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Thin-B0oow3R9.woff2")
		format("woff2");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ThinItalic-Df5kGryu.woff2")
		format("woff2");
	font-weight: 100;
	font-style: italic;
	font-display: swap;
	font-display: swap;
	font-display: swap;
	font-display: swap;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraLight-BLVvTz6v.woff2")
		format("woff2");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraLightItalic-Cm43v-Vf.woff2")
		format("woff2");
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Light-De9MYPOT.woff2")
		format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-LightItalic-DV9n9KIB.woff2")
		format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Regular-Cu1XIIHs.woff2")
		format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Italic-DdaXnPiX.woff2")
		format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Medium-DJODbTHz.woff2")
		format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-MediumItalic-Dx3RkM4S.woff2")
		format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-SemiBold-DwmoiGAe.woff2")
		format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-SemiBoldItalic-DUAaODp3.woff2")
		format("woff2");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Bold-DYLVQlxQ.woff2")
		format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-BoldItalic-DSEOJb3S.woff2")
		format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraBold-CLYj8xrZ.woff2")
		format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraBoldItalic-DikM7EMV.woff2")
		format("woff2");
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Black-C-enK_Oz.woff2")
		format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-BlackItalic-D65VYM31.woff2")
		format("woff2");
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

/*
This font was added for use in wt-input-text in case we need to hide the input value,like in a password input,
but without type="password" on input. It was added because not all brawsers are support 'text-security: disc' property,
So this font changes text to discs in these cases
*/
@font-face {
	font-family: "text-security-disc";
	src: url("data:font/woff2;base64,d09GMgABAAAAAAMQAAoAAAAACAAAAALIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAggAKcHILBgABNgIkAwYEIAWJSAcvG0gHEZWcjBRfHNjNPraIGU7SkQoTFkXoFRjv8FUcbDmIj4fv117P3fcRQioFRseKQUaWwJVVVVWlqUSWQCqzAXDOVp+vqsnVapWIlhw7yBoEhhMnHFYCHMKOvkR03bf6e9V3k5C0pdB3/e9T0qkd4MMPltYAwwl4rBdKBw5Q6WQJiMe2JfXQzxqDHiJHyBCRoyWk9D0eokh2Ww9se/9MHLHYawD4n5f/Ls/b722ATVs377KRPE9jOdKY88cWRA5gIghJDQ1N8AfoA89ygvcYf4pg/Ec+TgiEgQwZEhIKKKCIIkoooYwyKqigiipqqKGOOhpooIkmWmihjTY66PxOyEABGSZiKqAAQnQ6B6/n1u98x4262u0Js8WuS9OPfJk+/cuR6bOAtTcIJOZcuOuj7bV/Kyl9h9f38fFYbrefcSYrI8lAQDMUDxExOyyGlfQ/vVsg0xGArgJ1t5MoVLEcA2Gq5ci0HECy2rnswoOiU55kl1xUjEQJdXtiFM3sEWm9lqWFmgZbjP05LRVBvbqdHux9wpyGnbGWEX6p5JEHp+lXirTnJ5QhZa5Rrsq9D67r+24QRrdzndcmBzUrQ9xXb6hp/3Kt1h1kLEFUI/CLVKdW/dqtdrVRNqpIyLr2KxU5WYVXmZuskh+VXqlluyjNMNPGBGcj6JOF0MC+M9Ucc48RhDxCB6QQzssN7C3m8bmbGCrG7VXU5FY+yGdUakVOvwKllMExtmsLwzMsVQFGpi5UbHxfXhb762Voh6fTcKeW03OxxicY73eTpa8bxhIzeWR+wnoJ6j/4kBejs2xf69j7pOSUzmzPCqNy4cojtlsLwpBhb++AtcBHQcpyGZgkYrGUBTwXn2/RF12BjlQTI1XSvANELqO18DPB+UIyNkJSZBsoX7wh7DlfsyVfTshpuSjLSv9H3fwD+a36nwAAkBFZ5aSOqp+7Bg==")
		format("woff2");
	font-weight: 100;
	font-style: normal;
}
.fade-enter-active[data-v-b91fb69e],
.fade-leave-active[data-v-b91fb69e] {
	transition: opacity var(--transition);
}
.fade-enter[data-v-b91fb69e],
.fade-leave-to[data-v-b91fb69e] {
	opacity: 0;
}
/*
  Classes for direct use in placeholder-like elements styling
   (e.g. vue-multiselect .multiselect__placeholder which is technically a span)
*/
.wt-placeholder[data-v-b91fb69e] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-color);
}
.wt-placeholder--disabled[data-v-b91fb69e] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-disabled-color);
}
.wt-placeholder--error[data-v-b91fb69e] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-error-color);
}
.d-none[data-v-b91fb69e] {
	display: none;
}
@media only screen and (max-width: 960px) {
.d-none-sm[data-v-b91fb69e] {
		display: none;
}
.d-block-sm[data-v-b91fb69e] {
		display: block;
}
}
@media only screen and (max-width: 600px) {
.d-none-xs[data-v-b91fb69e] {
		display: none;
}
.d-block-xs[data-v-b91fb69e] {
		display: block;
}
}
/* Component Variables - Centralized to avoid duplication */
/* This file imports all component-specific CSS variables once globally */
[data-v-b91fb69e]:root {
	--wt-app-header-min-height: 40px;
	--wt-app-header-padding: var(--spacing-xs) var(--spacing-sm);
	--wt-app-header-background: var(--dp-9-surface-color);

	--wt-app-header-content-gap: var(--spacing-sm);
	--wt-app-header-content-panel-margin: var(--spacing-2xs);
	--wt-app-header-content-bg-color: var(--content-wrapper-color);
	--wt-app-header-content-z-index: 11;

	--wt-app-navigator-max-height: 80vh;
	--wt-app-navigator-padding: var(--wt-app-header-content-gap);
	--wt-app-navigator-item-width: 128px;
	--wt-app-navigator-item-height: 135px;
	--wt-app-navigator-item-padding: var(--spacing-xs);
	--wt-app-navigator-item-gap: var(--wt-app-header-content-gap);
	--wt-app-navigator-item-border: 1px solid;
	--wt-app-navigator-item-border-color: var(--secondary-color);
	--wt-app-navigator-item-pic-size: 88px;
	--wt-app-navigator-item-border-color--hover: var(--primary-color);

	--wt-header-actions-min-width: 120px;
	--wt-header-actions-content-sections-gap: var(--spacing-lg);
	--wt-header-actions-padding: var(--wt-app-header-content-gap);
	--wt-header-actions-action-bg-color--hover: var(--secondary-color);
	--wt-header-actions-action-link-padding: var(--spacing-xs);
}
[data-v-b91fb69e]:root {
	--wt-avatar-size--size-xs: calc(var(--_spacing-multiplicator) * 3);
	--wt-avatar-size--size-sm: calc(var(--_spacing-multiplicator) * 4);
	--wt-avatar-size--size-md: calc(var(--_spacing-multiplicator) * 5);
	--wt-avatar-size--size-lg: calc(var(--_spacing-multiplicator) * 7);
	--wt-avatar-size--size-xl: calc(var(--_spacing-multiplicator) * 9);
	--wt-avatar-size--size-2xl: calc(var(--_spacing-multiplicator) * 12);
	--wt-avatar-size--size-3xl: calc(var(--_spacing-multiplicator) * 16);

	--wt-avatar-size: var(--wt-avatar-size--size-md);

	--online-color: var(--success-color);
	--dnd-color: var(--warning-color);
	--busy-color: var(--error-color);
	--offline-color: var(--disabled-color);
	--pause-color: var(--warning-color);

	--wt-avatar-text-color: var(--white);

	--wt-avatar-letters-p1-color: var(--red-lighten-2);
	--wt-avatar-letters-p2-color: var(--purple-lighten-2);
	--wt-avatar-letters-p3-color: var(--deep-purple-lighten-2);
	--wt-avatar-letters-p4-color: var(--indigo-lighten-2);
	--wt-avatar-letters-p5-color: var(--blue-lighten-1);
	--wt-avatar-letters-p6-color: var(--cyan-lighten-1);
	--wt-avatar-letters-p7-color: var(--teal-darken-3);
	--wt-avatar-letters-p8-color: var(--green-darken-2);
	--wt-avatar-letters-p9-color: var(--lime-darken-3);
	--wt-avatar-letters-p10-color: var(--yellow-darken-3);
	--wt-avatar-letters-p11-color: var(--amber-lighten-2);
	--wt-avatar-letters-p12-color: var(--orange-darken-1);
	--wt-avatar-letters-p13-color: var(--deep-purple-lighten-1);
}
:root.theme--dark[data-v-b91fb69e] {
	--wt-avatar-text-color: var(--black);
}
[data-v-b91fb69e]:root {
	--wt-badge-size: var(--spacing-xs);
}
[data-v-b91fb69e]:root {
	--breadcrumb-indicator-size: 4px;
	--breadcrumb-gap: var(--spacing-sm);
	--breadcrumb-dot-gap: var(--spacing-2xs);
	--breadcrumb-indicator-color: var(--icon-color);
	--breadcrumb-accent-indicator-color: var(--primary-color);
}
[data-v-b91fb69e]:root {
	--button-select-button-padding: var(--spacing-xs) var(--spacing-sm);

	--button-select-icon-button-padding: var(--spacing-xs);

	--button-select-buttons-gap: 1px;
}
[data-v-b91fb69e]:root {
	--btn-min-width: 90px;
	--btn-min-width--size-sm: 70px;
	--btn-padding: var(--spacing-xs) var(--spacing-sm);
	--btn-padding--size-sm: var(--spacing-2xs) var(--spacing-xs);
	/* COLORS */
	--btn-primary-color: var(--primary-color);
	--btn-primary-hover-color: var(--primary-hover-color);
	--btn-primary-text-color: var(--primary-on-color);

	--btn-secondary-color: var(--dp-10-surface-color);
	--btn-secondary-hover-color: var(--dp-14-surface-color);
	--btn-secondary-text-color: var(--grey-darken-4);

	--btn-success-color: var(--success-color);
	--btn-success-hover-color: var(--success-hover-color);
	--btn-success-text-color: var(--grey-lighten-5);

	--btn-info-color: var(--info-color);
	--btn-info-hover-color: var(--info-hover-color);
	--btn-info-text-color: var(--grey-lighten-5);

	--btn-job-color: var(--job-color);
	--btn-job-hover-color: var(--job-hover-color);
	--btn-job-text-color: var(--grey-lighten-5);

	--btn-error-color: var(--error-color);
	--btn-error-hover-color: var(--error-hover-color);
	--btn-error-text-color: var(--grey-lighten-5);

	--btn-transfer-color: var(--transfer-color);
	--btn-transfer-hover-color: var(--transfer-hover-color);
	--btn-transfer-text-color: var(--transfer-on-color);

	--btn-disabled-color: var(--dp-16-surface-color);
	--btn-disabled-text-color: var(--grey-darken-1);
}
:root.theme--dark[data-v-b91fb69e] {
	--btn-secondary-text-color: var(--grey-lighten-4);
}
[data-v-b91fb69e]:root {
	--wt-card-border-radius: var(--p-content-border-radius);
	--wt-card-padding: var(--spacing-sm);
}
[data-v-b91fb69e]:root {
	--checkbox-icon-margin: var(--spacing-xs);
}
[data-v-b91fb69e]:root {
	--chip-padding: var(--spacing-2xs) var(--spacing-sm);
	--chip-border-radius: var(--spacing-lg);

	--wt-chip-main-background-color: var(--primary-light-color);
	--wt-chip-main-text-color: var(--primary-on-color);

	--wt-chip-primary-background-color: var(--primary-color);
	--wt-chip-primary-text-color: var(--primary-on-color);

	--wt-chip-secondary-background-color: var(--secondary-color);
	--wt-chip-secondary-text-color: var(--secondary-on-color);

	--wt-chip-success-background-color: var(--success-color);
	--wt-chip-success-text-color: var(--success-on-color);

	--wt-chip-warning-background-color: var(--warning-color);
	--wt-chip-warning-text-color: var(--warning-on-color);

	--wt-chip-error-background-color: var(--error-color);
	--wt-chip-error-text-color: var(--error-on-color);

	--wt-chip-transfer-background-color: var(--transfer-color);
	--wt-chip-transfer-text-color: var(--transfer-on-color);
}
[data-v-b91fb69e]:root {
	--wt-context-menu-option-padding: var(--spacing-xs);

	--wt-context-menu-background-color: var(--context-menu-background-color);
	--wt-context-menu-option-text-color: var(--context-menu-option-text-color);
	--wt-context-menu-option-background-hover-color: var(
		--context-menu-option-hover-color
	);
	--wt-context-menu-option-background-disabled-color: var(
		--context-menu-option-disabled-color
	);
	--wt-context-menu-option-text-disabled-color: var(
		--context-menu-option-text-disabled-color
	);
}
:root {
&[data-v-b91fb69e]{
	/*General*/
	--dp-font-family: "Montserrat";
	--dp-border-radius: var(--border-radius);
	/*Configurable border-radius*/
	--dp-cell-border-radius: var(--border-radius);
	/*Specific border radius for the calendar cell*/

	/*Sizing*/
	--dp-button-heigh: 32px;
	/*Size for buttons in overlays*/
	--dp-month-year-row-height: 24px;
	/*Height of the month-year select row*/
	--dp-month-year-row-button-size: 24px;
	/*Specific height for the next/previous buttons*/
	--dp-button-icon-height: var(--icon-md-size);
	/*Icon sizing in buttons*/
	--dp-cell-size: 24px;
	/*Width and height of calendar cell*/
	--dp-cell-padding: var(--spacing-2xs);
	/*Padding in the cell*/
	--dp-common-padding: var(--spacing-xs);
	/*Common padding used*/
	--dp-input-icon-padding: calc(var(--icon-md-size) + 2 * var(--spacing-xs));
	/*Padding on the left side of the input if icon is present*/
	--dp-input-padding: calc(var(--spacing-xs) - 1px)
		calc(var(--icon-md-size) + 2 * var(--spacing-xs));
	/*Padding in the input*/
	/* --dp-menu-min-width: 260px; Adjust the min width of the menu */
	--dp-action-buttons-padding: 2px 5px;
	/*Adjust padding for the action buttons in action row*/
	--dp-row-maring: var(--spacing-3xs);
	/*Adjust the spacing between rows in the calendar*/
	--dp-calendar-header-cell-padding: 0.5rem;
	/*Adjust padding in calendar header cells*/
	--dp-two-calendars-spacing: 10px;
	/*Space between multiple calendars*/
	--dp-overlay-col-padding: 3px;
	/*Padding in the overlay column*/
	--dp-time-inc-dec-button-size: 24px;
	/*Sizing for arrow buttons in the time picker*/

	/*Font sizes*/
	--dp-font-size: 12px;
	/*Default font-size*/
	--dp-preview-font-size: 12px;
	/*Font size of the date preview in the action row*/
	--dp-time-font-size: 12px;
	/*Font size in the time picker*/

	/*Transitions*/
	--dp-animation-duration: var(--transition);
	/*Transition duration*/
	--dp-menu-appear-transition-timing: cubic-bezier(0.4, 0, 1, 1);
	/*Timing on menu appear animation*/
	--dp-transition-timing: ease-out;
	/*Timing on slide animations*/
	}
.dp__theme_light[data-v-b91fb69e] {
		--dp-background-color: var(--content-wrapper-color);
		--dp-text-color: var(--text-main-color);
		/* --dp-hover-color: var(--secondary-color-50); */
		/* --dp-hover-text-color: var(--contrast-color); */
		--dp-hover-icon-color: var(--icon-btn-hover-color);
		--dp-primary-color: var(--primary-color);
		--dp-primary-text-color: var(--primary-on-color);
		--dp-secondary-color: var(--secondary-color);
		--dp-border-color: var(--wt-text-field-input-border-color);
		--dp-menu-border-color: transparent;
		/* --dp-border-color-hover: var(--form-border--hover-color); */
		--dp-disabled-color: var(--wt-text-field-input-background-disabled-color);
		--dp-success-color: var(--success-color);
		--dp-icon-color: var(--icon-color);
		--dp-danger-color: var(--error-color);
		/* --dp-scroll-bar-background: #f3f3f3; */
		/* --dp-scroll-bar-color: #959595; */
		/* --dp-success-color-disabled: #a3d9b1; */
		/* --dp-highlight-color: rgba(25, 118, 210, 0.1); */
}
}
[data-v-b91fb69e]:root {
	--divider-border: 1px solid;
	--divider-border-color: var(--grey-lighten-4);
}
:root.theme--dark[data-v-b91fb69e] {
	--divider-border-color: var(--grey-darken-2);
}
[data-v-b91fb69e]:root {
	--wt-dual-panel-padding: var(--spacing-sm);
	--wt-dual-panel-section-padding: var(--spacing-sm);
	--wt-dual-panel-section-gap: var(--spacing-sm);

	--wt-dual-panel-background-color: var(--grey-lighten-5);
	--wt-dual-panel-content-wrapper-color: var(--content-wrapper-color);
}
:root.theme--dark[data-v-b91fb69e] {
	--wt-dual-panel-background-color: var(--grey-darken-4);
}
[data-v-b91fb69e]:root {
	--wt-dummy-text-color: var(--text-main-color);
}
[data-v-b91fb69e]:root {
	--wt-empty-min-width: 280px;
	--wt-empty-width: 600px;
	--wt-empty-max-width: 80vw;
}
[data-v-b91fb69e]:root {
	--wt-error-page-background-color: var(--content-wrapper-color);
	--wt-error-page-text-color: var(--text-main-color);
}
[data-v-b91fb69e]:root {
	--wt-expansion-panel-header-background-color: var(--dp-16-surface-color);
	--wt-expansion-panel-header-title-color: var(--text-main-color);
	--wt-expansion-panel-content-background-color: var(--content-wrapper-color);
	--wt-expansion-panel-content-text-color: var(--text-main-color);
}
[data-v-b91fb69e]:root {
	--headline-min-height: 40px; /* button/search-bar height */
	--headline-title-margin: var(--spacing-sm);
	--wt-headline-background-color: var(--content-wrapper-color);
}
[data-v-b91fb69e]:root {
	--icon-btn-hover-color: var(--grey-darken-5);
}
:root.theme--dark[data-v-b91fb69e] {
	--icon-btn-hover-color: var(--grey-lighten-5);
}
[data-v-b91fb69e]:root {
	--icon-8xl-size: 96px;
	--icon-7xl-size: 88px;
	--icon-6xl-size: 80px;
	--icon-5xl-size: 72px;
	--icon-4xl-size: 64px;
	--icon-3xl-size: 56px;
	--icon-2xl-size: 48px;
	--icon-xl-size: 40px;
	--icon-lg-size: 32px;
	--icon-md-size: 24px;
	--icon-sm-size: 16px;
	--icon-xs-size: 8px;

	--icon-color: var(--grey-darken-2);
	--icon-active-color: var(--grey-darken-4);
	--icon-primary-color: var(--p-primary-color);
	--icon-error-color: var(--p-error-color);
	--icon-success-color: var(--p-success-color);
	--icon-warning-color: var(--p-warn-color);
	--icon-on-dark-color: var(--white);
	--icon-on-light-color: var(--grey-darken-3);
	--icon-on-primary-color: var(--primary-on-color);
	--icon-info-color: var(--p-info-color);
	--icon-chat-color: var(--p-chat-color);
	--icon-transfer-color: var(--p-transfer-color);
	--icon-job-color: var(--p-task-color);
	--icon-disabled-color: var(--grey-lighten-4);
}
:root.theme--dark[data-v-b91fb69e] {
	--icon-color: var(--grey-lighten-2);
	--icon-active-color: var(--grey-lighten-4);
	--icon-disabled-color: var(--grey-darken-2);
}
[data-v-b91fb69e]:root {
	--wt-indicator-dot-size--size-sm: var(--spacing-xs);
	--wt-indicator-dot-size--size-md: var(--spacing-sm);
	--wt-indicator-dot-size: var(--wt-indicator-size--size-md);
	--wt-indicator-dot-offset: var(--spacing-2xs);

	--wt-indicator-text-margin: var(--spacing-2xs);

	--wt-indicator-text-color: var(--text-main-color);
	--wt-indicator-primary-color: var(--primary-color);
	--wt-indicator-secondary-color: var(--grey-lighten-3);
	--wt-indicator-disabled-color: var(--grey-lighten-4);
	--wt-indicator-success-color: var(--success-color);
	--wt-indicator-error-color: var(--error-color);
	--wt-indicator-transfer-color: var(--transfer-color);
	--wt-indicator-break-out-color: var(--warning-color);
	--wt-indicator-info-color: var(--info-color);
	--wt-indicator-final-status-color: var(--green-accent-4);
	--wt-indicator-initial-status-color: var(--red-accent-2);
	--wt-indicator-other-status-color: var(--orange-accent-2);
}
:root.theme--dark[data-v-b91fb69e] {
	--wt-indicator-secondary-color: var(--grey-darken-1);
	--wt-indicator-disabled-color: var(--grey-darken-2);
}
[data-v-b91fb69e]:root {
	--input-padding: calc(var(--spacing-xs) - 1px); /* - border */
	--input-border: 1px solid;
	--input-icon-margin: var(--spacing-xs);

	--input-after-wrapper-gap: var(--spacing-2xs);
}
[data-v-b91fb69e]:root {
	--wt-item-link-text-color: var(--text-main-color);
}
[data-v-b91fb69e]:root {
	--wt-label-padding: var(--spacing-2xs) var(--spacing-xs);

	--wt-label-color: var(--p-form-field-color);
	--wt-label-error-color: var(--p-error-color);
	--wt-label-disabled-color: var(--p-form-field-disabled-color);
}
[data-v-b91fb69e]:root {
	--load-bar-height: 6px;
	--load-bar-padding: 1px;
	--load-bar-border-radius: 50px;

	--wt-load-bar-primary-color: var(--primary-on-color);
	--wt-load-bar-error-color: var(--p-error-color);
	--wt-load-bar-warning-color: var(--p-warn-color);
	--wt-load-bar-success-color: var(--p-success-color);
	--wt-load-bar-info-color: var(--p-info-color);
}
[data-v-b91fb69e]:root {
	--loader-size: 44px;
	--loader-dot-size: 6px;
	--loader-animation-duration: 3s;

	--wt-loader-md-path-color: var(--grey-darken-2);
	--wt-loader-md-point-color: var(--primary-color);

	--wt-loader-sm-path-main-color: var(--grey-darken-2);
	--wt-loader-sm-path-icon-color: var(--icon-color);
	--wt-loader-sm-path-on-light-color: var(--icon-on-light-color);
	--wt-loader-sm-path-on-dark-color: var(--icon-on-dark-color);
}
:root.theme--dark[data-v-b91fb69e] {
	--wt-loader-md-path-color: var(--grey-lighten-2);

	--wt-loader-sm-path-main-color: var(--grey-lighten-2);
}
[data-v-b91fb69e]:root {
	--wt-logo-width: 84px;
	--wt-logo-height: 16px;
}
[data-v-b91fb69e]:root {
	--wt-navigation-bar-width: 340px;
	--wt-navigation-bar-z-index: 10;
	--wt-navigation-bar-padding: var(--spacing-sm);

	--wt-navigation-bar-header-padding: var(--spacing-xs);
	--wt-navigation-bar-app-pic-height: 24px;

	--wt-navigation-bar-list-padding: var(--wt-navigation-bar-padding);
	--wt-navigation-bar-link-padding: var(--wt-navigation-bar-padding);
	--wt-navigation-bar-subnav-padding-left: var(--spacing-lg);
	--wt-navigation-bar-active-expansion-flag-width: 5px;
	--wt-navigation-bar-active-expansion-name-max-width: calc(
		100% -
		var(--icon-md-size) -
		var(--spacing-xs)
	);

	--wt-navigation-bar-background-color: var(--dp-18-surface-color);
	--wt-navigation-bar-option-text-color: var(--text-main-color);
	--wt-navigation-bar-option-text-active-color: var(--primary-on-color);
	--wt-navigation-bar-option-background-color: var(
		--wt-navigation-bar-background-color
	);
	--wt-navigation-bar-option-background-hover-color: var(--dp-20-surface-color);
	--wt-navigation-bar-option-background-active-color: var(
		--primary-light-color
	);
	--wt-navigation-bar-expansion-ribbon-color: var(--primary-color);
}
[data-v-b91fb69e]:root {
	--notifications-bar-max-height: 60%;
	--notifications-bar-corner-margin: var(--spacing-sm);
	--notifications-bar-notifications-margin: 0 0 var(--spacing-xs) auto;
	--notifications-bar-z-index: 101;
}
[data-v-b91fb69e]:root {
	--page-wrapper-padding: var(--spacing-sm);
	--page-wrapper-section-padding: var(--spacing-sm);
	--page-wrapper-section-gap: var(--spacing-sm);

	--wt-page-wrapper-background-color: var(--p-surface-50);
	--wt-page-wrapper-content-wrapper-color: var(--content-wrapper-color);
	/* --content-wrapper-border-radius: var(--p-border-radius-lg); */
}
:root.theme--dark[data-v-b91fb69e] {
	--wt-page-wrapper-background-color: var(--p-surface-850);
}
[data-v-b91fb69e]:root {
	--pagination-gap: var(--spacing-xs);
	--pagination-size-input-width: 100px;
}
.wt-player[data-v-b91fb69e] {
	--plyr-color-main: var(--primary-color);
	--plyr-audio-control-color: var(--icon-color);
	--plyr-audio-control-color-hover: var(--icon-btn-hover-color);
	--plyr-audio-controls-background: var(--content-wrapper-color);
	--plyr-controls-icon-size: var(--icon-sm-size);
	--plyr-controls-icon-padding: var(--spacing-2xs);
	--plyr-audio-control-background-hover: transparent;
	--plyr-audio-progress-buffered-background: var(
		--dp-14-surface-color
	); /* loaded color */
	--wt-player-audio-progress-background: var(
		--wt-slider-background-color
	); /* not played color */
	--plyr-tooltip-background: var(--wt-tooltip-background-color);
	--plyr-tooltip-color: var(--wt-tooltip-text-color);
	/* --plyr-control-toggle-checked-background: var(--main-color); */
	--player-close-icon-transform-translate-x: var(--spacing-md);
	/* "-1 * var" for use the negative value of a variable */
	--player-close-icon-transform-translate-y: calc(-1 * var(--spacing-md));

	--wt-slider-border: 1px solid var(--secondary-color);
	--wt-slider-pointer-radius: 50%;
	--wt-slider-pointer-background-color: var(--dp-24-surface-color);
	--wt-slider-pointer-border-color: var(--dp-10-surface-color);
	--wt-slider-pointer-size: 16px;
}
[data-v-b91fb69e]:root {
	--popup-wrapper-z-index: 12;

	--popup-shadow-opacity: 0.8;
	--wt-popup-shadow-color: hsla(0, 0%, 0%, var(--popup-shadow-opacity));

	--wt-popup-size-xs: 300px;
	--wt-popup-size-sm: 500px;
	--wt-popup-size-md: 800px;
	--wt-popup-size-lg: 1140px;

	--popup-max-height: 90%;

	--wt-popup-background-color: var(--dp-24-surface-color);
	--popup-sections-gap: var(--spacing-xs);
	--popup-padding: var(--spacing-sm);

	--popup-header-padding: var(--spacing-xs);
	--wt-popup-header-background-color: var(--dp-18-surface-color);
	--wt-popup-header-text-color: var(--text-main-color);

	--popup-main-section-padding-right: var(--spacing-xs); /* scroll offset */

	--popup-actions-padding: var(--spacing-xs);
}
[data-v-b91fb69e]:root {
	--wt-progress-bar-height: 12px;
	--wt-progress-bar-padding: var(--spacing-3xs);
	--wt-progress-bar-border-radius: var(--wt-progress-bar-padding);

	--wt-progress-bar-background-color: var(--dp-1-surface-color);
	--wt-progress-bar-background-primary-color: var(--primary-color);
	--wt-progress-bar-background-secondary-color: var(--dp-20-surface-color);
	--wt-progress-bar-background-success-color: var(--success-color);
	--wt-progress-bar-background-error-color: var(--error-color);
	--wt-progress-bar-background-warning-color: var(--warning-color);
}
[data-v-b91fb69e]:root {
	--radio-icon-margin: var(--spacing-xs);
	--radio-checkmark-size: 18px;
	--radio-bullet-size: 8px;
	--radio-border: 2px solid;
}
[data-v-b91fb69e]:root {
	--rounded-action-border-size: 2px;
	--rounded-action-padding: calc(
		var(--spacing-xs) -
		var(--rounded-action-border-size)
	);

	--rounded-action-rounded-border-radius: var(--border-radius--pill);

	--rounded-action-bg-color: var(--dp-18-surface-color);
	--rounded-action-bg-hover-color: var(--dp-20-surface-color);

	--rounded-action-active-color: var(--dp-10-surface-color);
}
[data-v-b91fb69e]:root {
	--wt-search-bar-width: 270px;
}
[data-v-b91fb69e]:root {
	--wt-slider-pointer-size: 16px;
	--wt-slider-height: var(--wt-slider-pointer-size);

	--wt-slider-width: 100%;
	--wt-slider-input-height: 8px;
	--wt-slider-border: 1px solid var(--secondary-color);
	--wt-slider-background-color: var(--dp-1-surface-color);
	--wt-slider-background-completed-color: var(--primary-color);

	--wt-slider-pointer-background-color: var(--dp-24-surface-color);
	--wt-slider-pointer-background-hover-color: var(--dp-22-surface-color);
	--wt-slider-pointer-border-color: var(--dp-10-surface-color);

	--wt-slider-pointer-radius: 50%;

	--wt-slider-vertical-container-translation: translate(2px);
	--wt-slider-vertical-transform: translate(-100%, 0) rotate(-90deg);
	--wt-slider-vertical-transform-origin: 100% 0;
}
[data-v-b91fb69e]:root {
	--wt-status-select-padding: 0 calc(var(--icon-size-md) + var(--spacing-xs)) 0
		0; /* reset wt-select padding, but preserve arrow icon padding */

	--wt-status-select-option-text-color: var(--text-main-color);
	--wt-status-select-option-background-color: var(--dp-22-surface-color);
	--wt-status-select-option-background-hover-color: var(
		--secondary-light-color
	);
	/* --wt-status-select-option-background-selected-color: var(--primary-light-color); */

	--wt-status-select-background-color: var(
		--wt-status-select-option-background-color
	);
}
[data-v-b91fb69e]:root {
	--wt-stepper-divider-background-color: var(--secondary-color);
	--wt-stepper-divider-background-completed-color: var(--primary-color);
}
[data-v-b91fb69e]:root {
	--switcher-icon-margin: var(--spacing-xs);
	--switcher-width: 40px;
	--switcher-height: 22px;
	--switcher-cicle-size: 14px;
	--switcher-cicle-margin: 4px;
	--switcher-cicle-translateX: 17px;
	--switcher-border-radius: 24px;
	/* circle */
	--wt-switcher-circle-background-color-on: var(--grey-darken-3);
	--wt-switcher-circle-background-color-on-hover: var(--grey-darken-4);
	--wt-switcher-circle-background-color-on-disabled: var(--grey-lighten-3);

	--wt-switcher-circle-background-color-off: var(--grey-lighten-4);
	--wt-switcher-circle-background-color-off-hover: var(--grey-lighten-5);
	--wt-switcher-circle-background-color-off-disabled: var(--grey-lighten-3);
	/* background */
	--wt-switcher-background-color-on: var(--primary-color);
	--wt-switcher-background-color-on-hover: var(--primary-hover-color);
	--wt-switcher-background-color-on-disabled: var(--primary-light-color);

	--wt-switcher-background-color-off: var(--grey-darken-2);
	--wt-switcher-background-color-off-hover: var(--grey-darken-1);
	--wt-switcher-background-color-off-disabled: var(--grey-lighten-4);
}
:root.theme--dark[data-v-b91fb69e] {
	/* circle */
	--wt-switcher-circle-background-color-off: var(--grey-darken-4);
	--wt-switcher-circle-background-color-off-hover: var(--grey-darken-3);
	--wt-switcher-circle-background-color-off-disabled: var(--grey-darken-3);
	/* background */
	--wt-switcher-background-color-off: var(--grey-lighten-1);
	--wt-switcher-background-color-off-hover: var(--grey-lighten-2);
	--wt-switcher-background-color-off-disabled: var(--grey-darken-2);
}
[data-v-b91fb69e]:root {
	--table-actions-padding: var(--spacing-xs);
	--table-actions-icon-gap: var(--spacing-xs);
}
[data-v-b91fb69e]:root {
	--table-col-min-width: 140px;

	--table-head-sort-arrow-margin: var(--spacing-xs);
	--table-head-border: 1px solid;

	--table-min-height: 24px; /* 24px icon size or body-1 lh */
	--table-column-gap: var(--spacing-xs);
	--table-row-padding: var(--spacing-xs);

	--wt-table-head-border-color: var(--grey-lighten-1);
	--wt-table-head-background-color: var(--content-wrapper-color);
	--wt-table-primary-color: var(--content-wrapper-color);
	--wt-table-zebra-color: var(--dp-18-surface-color);
}
:root.theme--dark[data-v-b91fb69e] {
	--wt-table-head-border-color: var(--grey-darken-1);
}
[data-v-b91fb69e]:root {
	--tabs-underiline-height: 1px;
	--tabs-underiline-color: transparent;

	--tab-padding: var(--spacing-2xs);
	--tab-gap: var(--spacing-xs);
	--wt-tabs-text-color: var(--text-main-color);
	--wt-tabs-text-hover-color: var(--wt-tabs-text-color);
	--wt-tabs-text-active-color: var(--wt-tabs-text-color);
	--tab-border: 4px solid;
	--wt-tabs-underline-active-color: var(--primary-color);
	--tab-z-index: 1;
}
[data-v-b91fb69e]:root {
	--textarea-min-height: 100px;
	--textarea-padding: var(--input-padding);
}
[data-v-b91fb69e]:root {
	--timepicker-input-width: 80px;
	--timepicker-input-margin: var(--spacing-xs);
}
[data-v-b91fb69e]:root {
	--tooltip-padding: var(--spacing-2xs) var(--spacing-xs);

	--wt-tooltip-text-color: var(--text-main-color);
	--wt-tooltip-background-color: var(--dp-24-surface-color);

	--tooltip-elevation: var(--elevation-10);
}
[data-v-b91fb69e]:root {
	--wt-tree-item-active: var(--primary-light-color);
	--wt-tree-item-active-on: var(--grey-darken-4);

	--wt-tree-item-searched: var(--light-blue-lighten-4);
	--wt-tree-item-searched-on: var(--grey-darken-4);

	--wt-tree-item: var(--primary-light-color);
	--wt-tree-item-on: var(--grey-darken-1);

	--wt-tree-item-hover: var(--dp-24-surface-color);
	--wt-tree-item-hover-on: var(--grey-darken-1);
}
:root.theme--dark[data-v-b91fb69e] {
	--wt-tree-item-active: var(--primary-light-color);
	--wt-tree-item-active-on: var(--grey-lighten-4);

	--wt-tree-item-searched: var(--light-blue-lighten-2);
	--wt-tree-item-searched-on: var(--grey-darken-4);

	--wt-tree-item: var(--primary-light-color);
	--wt-tree-item-on: var(--grey-lighten-3);

	--wt-tree-item-hover-on: var(--grey-lighten-3);
}
[data-v-b91fb69e]:root {
	--wt-tree-table-col-min-witdh: var(--table-col-min-width);

	--wt-tree-table-head-sort-arrow-margin: var(--table-head-sort-arrow-margin);
	--wt-tree-table-head-border: var(--table-head-border);

	--wt-tree-table-min-height: var(--table-min-height);
	--wt-tree-table-column-gap: var(--table-column-gap);
	--wt-tree-table-row-padding: var(--table-row-padding);

	--wt-tree-table-head-border-color: var(--wt-table-head-border-color);
	--wt-tree-table-head-background-color: var(--wt-table-head-background-color);
	--wt-tree-table-primary-color: var(--wt-table-primary-color);
	--wt-tree-table-zebra-color: var(--wt-table-zebra-color);
}
:root.theme--dark[data-v-b91fb69e] {
	--wt-tree-table-head-border-color: var(--wt-table-head-border-color);
}
[data-v-b91fb69e]:root {
	--content-wrapper-padding: var(--spacing-xs);
	--content-wrapper-gap: var(--spacing-xs);
}
.table-page.wt-page-wrapper[data-v-b91fb69e] {
	width: 100%;
	height: 100%;
}
.table-page .wt-page-wrapper__main[data-v-b91fb69e],

.wt-page-wrapper__main[data-v-b91fb69e]:has(.table-section) {
	min-height: 0;
}
.table-section[data-v-b91fb69e] {
	display: flex;
	flex-direction: column;
	width: 100%;
	flex: 1;
	min-height: 0;
}
.table-section__table-wrapper[data-v-b91fb69e] {
	display: flex;
	flex: 1 1 100%;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	min-height: 0;
	gap: var(--spacing-sm);
}
.table-section__table-wrapper .table-wrapper__visible-scroll-wrapper[data-v-b91fb69e] {
	flex-grow: 1;
}
.table-section__table-wrapper .wt-pagination[data-v-b91fb69e] {
	margin-top: auto;
}
.table-section__visible-scroll-wrapper[data-v-b91fb69e] {
	overflow: visible;
	height: 100%;
}
.table-section__visible-scroll-wrapper .wt-table[data-v-b91fb69e] {
	overflow: visible;
}
.table-title[data-v-b91fb69e] {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: var(--spacing-sm) 0;
}
.table-title__title[data-v-b91fb69e] {
	font-family: "Montserrat", monospace;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-transform: none;
}
.table-title__title + .hint[data-v-b91fb69e] {
	top: -2px;
}
.table-title__actions-wrap[data-v-b91fb69e] {
	display: flex;
	align-items: center;
	gap: var(--table-actions-icon-gap);
}
.main-section-wrapper .wt-loader.wt-brand-loader[data-v-b91fb69e] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 1;
}
.table-wrapper--tab-table[data-v-b91fb69e] {
	position: relative;
}
.table-wrapper--tab-table .wt-loader.wt-brand-loader[data-v-b91fb69e] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 1;
}
.table-wrapper--tab-table .table-loading-wrapper[data-v-b91fb69e] {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	min-height: 0;
}
.opened-card[data-v-b91fb69e] {
	width: 100%;
}
.opened-card.wt-page-wrapper[data-v-b91fb69e],
.opened-card.wt-dual-panel[data-v-b91fb69e] {
	width: 100%;
}
.opened-card-tabs[data-v-b91fb69e] {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: var(--spacing-sm);
}
.opened-card-tabs__tab[data-v-b91fb69e] {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: var(--spacing-sm);
	min-height: 0;
}
.opened-card-header[data-v-b91fb69e] {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin: var(--spacing-sm) 0;
}
.opened-card-header__title[data-v-b91fb69e] {
	font-family: "Montserrat", monospace;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-transform: none;
}
.opened-card-header__title + .hint[data-v-b91fb69e] {
	top: -2px;
}
.opened-card-form[data-v-b91fb69e] {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.opened-card-input-grid[data-v-b91fb69e] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: minmax(auto, auto);
	align-items: flex-start;
	grid-column-gap: var(--spacing-sm);
	grid-row-gap: var(--spacing-sm);
}
.opened-card-input-grid--1-col[data-v-b91fb69e] {
	grid-template-columns: 1fr;
}
.opened-card-input-grid--w50[data-v-b91fb69e] {
	width: 50%;
}
.opened-card-input-grid--w100[data-v-b91fb69e] {
	width: 100%;
}
#wt-flow-diagram[data-v-b91fb69e] {
  --flow-light-level-12: 90%;
  --flow-icon-header-disabled-color: var(--grey-lighten-2);
  --flow-text-main-color: var(--black);
  --flow-text-tab-color: var(--black);
  --flow-connection-default-color: var(--black);
  --flow-connection-active-color: var(--black);
  --flow-on-dark-text-color: var(--grey-lighten-5);
  --flow-on-light-text-color: var(--grey-darken-3);
  --flow-conection-point-color: var(--dp-22-surface-color);
  --flow-conection-point-border-color: var(--dp-16-surface-color);
  --flow-connection-color: var(--grey-darken-1);
  --flow-connection-goto-color: var(--red-accent-2);
  --flow-connection-failover-color: var(--red-accent-2);
  --flow-connection-selected-color: var(--red-accent-4);
  --flow-calendar-header-bg-color: var(--cyan-lighten-3);
  --flow-execute-header-bg-color: var(--orange-lighten-2);
  --flow-function-header-bg-color: var(--orange-lighten-2);
  --flow-goto-header-bg-color: var(--red-darken-1);
  --flow-if-header-bg-color: var(--pink-lighten-2);
  --flow-i-frame-header-bg-color: var(--blue-lighten-1);
  --flow-js-header-bg-color: var(--amber-accent-3);
  --flow-math-header-bg-color: var(--deep-orange-accent-2);
  --flow-string-header-bg-color: var(--light-green-darken-3);
  --flow-mark-ivr-header-bg-color: var(--pink-accent-2);
  --flow-soft-sleep-header-bg-color: var(--light-blue-lighten-1);
  --flow-set-grantee-header-bg-color: var(--yellow-darken-2);
  --flow-schema-header-bg-color: var(--deep-orange-lighten-3);
  --flow-log-header-bg-color: var(--amber-lighten-1);
  --flow-start-header-bg-color: var(--green-darken-3);
  --flow-switch-header-bg-color: var(--purple-lighten-1);
  --flow-trigger-header-bg-color: var(--red-lighten-1);
  --flow-http-header-bg-color: var(--pink-lighten-2);
  --flow-custom-code-header-bg-color: var(--grey-lighten-4);
  --flow-export-var-header-bg-color: var(--indigo-lighten-3);
  --flow-set-var-header-bg-color: var(--amber-lighten-1);
  --flow-un-set-var-header-bg-color: var(--orange-lighten-3);
  --flow-list-header-bg-color: var(--light-blue-darken-3);
  --flow-list-add-header-bg-color: var(--light-blue-darken-1);
  --flow-get-email-header-bg-color: var(--cyan-darken-4);
  --flow-playback-header-bg-color: var(--orange-lighten-1);
  --flow-ring-ready-header-bg-color: var(--green-darken-3);
  --flow-pre-answer-header-bg-color: var(--green-darken-3);
  --flow-answer-header-bg-color: var(--green-darken-3);
  --flow-hangup-header-bg-color: var(--deep-orange-darken-2);
  --flow-sip-redirect-header-bg-color: var(--amber-lighten-3);
  --flow-ringback-header-bg-color: var(--green-darken-3);
  --flow-bridge-header-bg-color: var(--orange-lighten-2);
  --flow-conference-header-bg-color: var(--cyan-lighten-3);
  --flow-generate-link-header-bg-color: var(--indigo-accent-2);
  --flow-in-band-dtmf-header-bg-color: var(--yellow-lighten-2);
  --flow-flush-dtmf-header-bg-color: var(--pink-lighten-2);
  --flow-update-cid-header-bg-color: var(--orange-lighten-2);
  --flow-park-header-bg-color: var(--cyan-lighten-3);
  --flow-join-queue-header-bg-color: var(--deep-orange-lighten-1);
  --flow-record-file-header-bg-color: var(--green-lighten-3);
  --flow-record-session-header-bg-color: var(--green-lighten-2);
  --flow-tts-header-bg-color: var(--purple-darken-1);
  --flow-recv-message-header-bg-color: var(--blue-accent-4);
  --flow-send-text-header-bg-color: var(--orange-accent-3);
  --flow-send-tts-header-bg-color: var(--purple-darken-1);
  --flow-send-file-header-bg-color: var(--purple-accent-3);
  --flow-stt-header-bg-color: var(--orange-lighten-1);
  --flow-send-email-header-bg-color: var(--deep-orange-accent-2);
  --flow-send-message-header-bg-color: var(--blue-darken-1);
  --flow-broadcast-chat-message-header-bg-color: var(--blue-darken-2);
  --flow-classifier-header-bg-color: var(--deep-purple-lighten-2);
  --flow-menu-header-bg-color: var(--amber-lighten-3);
  --flow-plata-by-mono-header-bg-color: var(--deep-purple-darken-1);
  --flow-user-info-header-bg-color: var(--green-darken-2);
  --flow-member-info-header-bg-color: var(--purple-lighten-1);
  --flow-get-queue-agents-header-bg-color: var(--indigo-lighten-2);
  --flow-join-agent-header-bg-color: var(--deep-purple-lighten-2);
  --flow-callback-queue-header-bg-color: var(--lime-darken-2);
  --flow-patch-members-header-bg-color: var(--purple-lighten-1);
  --flow-form-textfield-header-bg-color: var(--light-blue-accent-4);
  --flow-form-text-header-bg-color: var(--light-blue-lighten-3);
  --flow-form-table-header-bg-color: var(--cyan-darken-2);
  --flow-form-select-header-bg-color: var(--light-blue-lighten-1);
  --flow-open-link-header-bg-color: var(--blue-lighten-1);
  --flow-form-select-service-header-bg-color: var(--amber-lighten-1);
  --flow-form-select-case-status-header-bg-color: var(--amber-lighten-1);
  --flow-form-datetime-picker-header-bg-color: var(--blue-lighten-2);
  --flow-form-rich-text-editor-header-bg-color: var(--light-blue-darken-4);
  --flow-generate-form-header-bg-color: var(--blue-accent-4);
  --flow-make-call-header-bg-color: var(--light-green-darken-4);
  --flow-form-select-from-object-header-bg-color: var(--indigo-lighten-1);
  --flow-attempt-result-header-bg-color: var(--red-lighten-2);
  --flow-form-file-header-bg-color: var(--blue-lighten-2);
  --flow-chat-history-header-bg-color: var(--amber-accent-2);
  --flow-while-header-bg-color: var(--deep-purple-darken-4);
  --flow-chat-ai-header-bg-color: var(--lime-darken-3);
  --flow-notification-header-bg-color: var(--pink-lighten-1);
  --flow-custom-module-header-bg-color: var(--deep-purple-darken-3);
}
.theme--dark #wt-flow-diagram[data-v-b91fb69e] {
  --flow-icon-header-disabled-color: var(--grey-darken-3);
  --flow-text-main-color: var(--white);
  --flow-text-tab-color: var(--white);
  --flow-connection-default-color: var(--white);
  --flow-connection-active-color: var(--black);
}
@layer wt-default, base, primevue, wt-typography;
/*
	@author HlukhovYe
	layer needed beacuse of manipulating primevue's default typography
	https://webitel.atlassian.net/browse/WTEL-8775?focusedCommentId=723773
*/
@layer wt-default {
[data-v-b91fb69e]:root {
    --transition: 0.2s;
    --box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    /* viewport breakpoints */
    --viewport-lg: 1904px;
    --viewport-md: 1264px;
    --viewport-sm: 960px;
    --viewport-xs: 600px;
}
html[data-v-b91fb69e] {
    height: 100%;
    font-size: 16px;
}
body[data-v-b91fb69e] {
    font-family: "Montserrat", monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-transform: none;
    margin: 0;
    height: 100%;
    min-height: 100%;
}
[data-v-b91fb69e] {
    box-sizing: border-box;
}
.theme--dark body[data-v-b91fb69e] {
    color-scheme: dark;
}
h1[data-v-b91fb69e],
  h2[data-v-b91fb69e],
  h3[data-v-b91fb69e],
  h4[data-v-b91fb69e],
  h5[data-v-b91fb69e],
  h6[data-v-b91fb69e],
  p[data-v-b91fb69e] {
    margin: 0;
    font-weight: normal;
}
  /* reset ul styles */
ul[data-v-b91fb69e] {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
iframe[data-v-b91fb69e] {
    outline: none;
    border: none;
}
a[data-v-b91fb69e] {
    color: #000;
    text-decoration: none;
}
.hidden[data-v-b91fb69e] {
    opacity: 0;
    pointer-events: none;
}
}
/*
	@author HlukhovYe
	reset input autofill styles https://webitel.atlassian.net/browse/WTEL-9005
*/
input[data-v-b91fb69e]:-webkit-autofill,
input[data-v-b91fb69e]:-webkit-autofill:hover,
input[data-v-b91fb69e]:-webkit-autofill:focus,
textarea[data-v-b91fb69e]:-webkit-autofill,
textarea[data-v-b91fb69e]:-webkit-autofill:hover,
textarea[data-v-b91fb69e]:-webkit-autofill:focus,
select[data-v-b91fb69e]:-webkit-autofill,
select[data-v-b91fb69e]:-webkit-autofill:hover,
select[data-v-b91fb69e]:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--p-inputtext-color);
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s; /* prevents an immediate color change */
}

/* https://github.com/Akryum/floating-vue/issues/488 */
.v-popper__arrow-container[data-v-b91fb69e] {
  display: none;
}
.config-form-grid[data-v-b91fb69e], .config-form-section-wrapper__main[data-v-b91fb69e], .config-form[data-v-b91fb69e] {
  display: grid;
  grid-row-gap: var(--spacing-xs);
}
.p-toggleswitch[data-v-b91fb69e] {
  flex-shrink: 0;
}

/*
xl: @media only screen and (min-width: $viewport-xl) {}
lg: @media only screen and (max-width: $viewport-xl) {}
md: @media only screen and (max-width: $viewport-lg) {}
sm: @media only screen and (max-width: $viewport-md) {}
xs: @media only screen and (max-width: $viewport-sm) {}
 */
#wt-flow-diagram[data-v-b91fb69e] {
  /* В компоненті `key-value-pair` присутні компоненти з бібліотеки `webitel.ui`,
   наприклад, `<wt-input-text>`, margin яких = 10px, тому у даному випадку я використав
   змінну `--body-block-margin` , яка також = 10px.
  Можна працювати по нових спейсінгах, але треба переписати компоненти, які є в бібліотеці*/
  --body-block-margin: 10px;
  --workspace-content-offset-top: var(--spacing-xs);
  --workspace-content-offset-bottom: var(--spacing-xs);
  --workspace-content-offset-side: var(--spacing-xs);
  --nodes-panel-width: 260px;
  --config-panel-width: -16px;
  --min-flow-toolbar-width: 491px;
  --flow-toolbar-height: 40px;
  --flow-pages-height: 56px;
  --zoom-panel-width: 227px;
  --zoom-panel-height: calc(2 * var(--spacing-sm) + var(--icon-md-size));
}
@media only screen and (max-width: 960px) {
#wt-flow-diagram[data-v-b91fb69e] {
    --flow-toolbar-height: 40px;
}
}
@media only screen and (max-width: 600px) {
#wt-flow-diagram[data-v-b91fb69e] {
    --flow-toolbar-height: 40px;
}
}
#wt-flow-diagram[data-v-b91fb69e] {
  --elevation-1: 0px 1px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-2: 0px 2px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-3: 0px 3px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-4: 0px 4px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-5: 0px 5px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-6: 0px 6px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-7: 0px 7px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-8: 0px 8px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-9: 0px 9px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-10: 0px 10px 10px hsla(0, 0%, 0%, 0.15);
}
.config-form-section-wrapper[data-v-b91fb69e] {
  min-width: 0;
}
.config-form-section-wrapper__header[data-v-b91fb69e] {
  margin-bottom: var(--spacing-xs);
}
.config-form-section-wrapper__footer[data-v-b91fb69e] {
  display: flex;
  margin-top: var(--spacing-xs);
}
.config-form-section-wrapper__footer--actions[data-v-b91fb69e] {
  gap: var(--spacing-xs);
}.config-form-section-wrapper[data-v-5f7574fc] .config-form-section-wrapper__footer {
  flex-direction: column;
}.editor__expand-action[data-v-99580502] {
  cursor: pointer;
  margin-left: var(--spacing-2xs);
}
.editor--expanded[data-v-99580502] {
  position: fixed;
  right: calc(var(--config-panel-width) + var(--workspace-content-offset-side) + var(--spacing-sm));
  bottom: var(--workspace-content-offset-bottom);
  z-index: 1;
  box-shadow: var(--elevation-5);
  border: 1px solid var(--secondary-color);
  border-radius: var(--border-radius);
  background-color: var(--content-wrapper-color);
  width: calc(100vw - (4 * var(--workspace-content-offset-side) + var(--nodes-panel-width) + var(--config-panel-width)));
  height: auto;
}
.editor--expanded.code-editor .code-editor__label[data-v-99580502], .editor--expanded.text-editor[data-v-99580502] .wt-label {
  margin-bottom: 0;
  border-bottom: 1px solid var(--secondary-color);
  padding: var(--spacing-xs);
}
.editor--expanded.code-editor .code-editor__editor[data-v-99580502] .codeflask, .editor--expanded.text-editor[data-v-99580502] .wt-textarea__textarea {
  box-shadow: none;
  border: none;
}
.editor--expanded.code-editor .code-editor-wrapper[data-v-99580502], .editor--expanded.text-editor[data-v-99580502] .wt-textarea__textarea {
  height: 400px;
}.node-header[data-v-c5d222c3] {
  display: grid;
  grid-template-columns: var(--spacing-md) auto var(--spacing-md);
  align-items: center;
  padding: var(--spacing-xs);
  border-radius: var(--border-radius);
  gap: var(--spacing-xs);
}
.node-header__title[data-v-c5d222c3] {
  text-align: left;
  word-break: break-word;
}
.node-header__title--on-dark[data-v-c5d222c3] {
  color: var(--flow-on-dark-text-color);
}
.node-header__title--on-light[data-v-c5d222c3] {
  color: var(--flow-on-light-text-color);
}
.node-header .node-header__close-icon[data-v-c5d222c3] {
  margin-left: auto;
}div[data-v-app]:has(.node.highlighted) {
  z-index: 10;
}
.node {
  padding: var(--spacing-xs);
  min-width: 130px;
  max-width: 260px;
  cursor: pointer;
  border-radius: var(--border-radius);
  background-color: var(--content-wrapper-color);
  box-shadow: var(--elevation-3);
  transition: background-color var(--transition) ease;
}
.node * {
  user-select: none;
  /* For modern browsers */
  -webkit-user-select: none;
  /* For Safari */
  -moz-user-select: none;
  /* For Firefox */
  -ms-user-select: none;
  /* For Internet Explorer/Edge */
}
.node.selected {
  outline: 3px solid red;
}
.node.highlighted {
  background-color: var(--wt-node-highlight-color);
}
.node.highlighted .node-input__title,
.node.highlighted .node-output__title {
  color: var(--flow-connection-active-color);
}
.node-close {
  position: absolute;
  top: -16px;
  right: -16px;
}
.wt-node-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
}
.wt-node-description {
  padding: var(--spacing-xs);
  background-color: var(--grey-lighten-2);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.node-context-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
}
.node-input,
.node-output {
  display: grid;
  align-items: center;
  border-bottom: 1px solid var(--secondary-color);
  grid-template-columns: var(--spacing-2xs) 1fr 145px 1fr var(--spacing-2xs);
  padding: var(--spacing-xs) 0;
  gap: var(--spacing-2xs);
}
.node-input :deep(.node-input__socket),
.node-output :deep(.node-input__socket) {
  width: 20px !important;
}
.node-input:last-of-type,
.node-output:last-of-type {
  border: none;
}
.node-input__info,
.node-output__info {
  display: flex;
  justify-content: end;
}
.node-input__title,
.node-output__title {
  max-width: 145px;
  text-transform: capitalize;
  text-align: center;
  word-break: break-all;
  justify-self: center;
  color: var(--flow-connection-default-color);
}
.node-input__custom-title,
.node-output__custom-title {
  text-transform: inherit !important;
}
.node-input__switcher,
.node-output__switcher {
  display: flex;
  justify-content: end;
}
.node-input__switcher .wt-switcher,
.node-output__switcher .wt-switcher {
  opacity: 0;
  transition: opacity var(--transition) ease;
}
.node-input:hover .node-output__switcher .wt-switcher,
.node-output:hover .node-output__switcher .wt-switcher {
  opacity: 1;
}
.node-input :deep(.socket),
.node-output :deep(.socket) {
  width: var(--icon-md-size);
  height: var(--icon-md-size);
  margin: 0;
  border: 10px solid var(--flow-conection-point-border-color);
  background: var(--flow-conection-point-color);
}
.node-input :deep(.socket):hover,
.node-output :deep(.socket):hover {
  border: 5px solid var(--flow-conection-point-border-color);
}
.node-input__socket {
  transform: translate(calc(-1 * var(--spacing-sm)));
  width: 20px !important;
  height: 20px !important;
}
.node-output__socket {
  width: 16px;
  height: 16px;
  transform: translate(var(--spacing-2xs));
}
.disable-view-nodes .node .node-close {
  display: none;
}
@layer wt-default, base, primevue, wt-typography;
/* 
	@author Palonnyi Oleksandr
	Must be first — locks cascade layer priority 
	before any content is loaded: wt-default < base < primevue < wt-typography.
	[WTEL-9107](https://webitel.atlassian.net/browse/WTEL-9107)

	link for complex comment https://webitel.atlassian.net/browse/WTEL-9107?focusedCommentId=740565
*/
[data-v-7a451ace]:root {
	--scrollbar-width: 10px;
	--scrollbar-height: 10px;
	--scrollbar-thumb-width: 10px;
	--scrollbar-bg-color: var(--p-surface-50);
	--scrollbar-thumb-color: var(--p-surface-150);
	--scrollbar-hover-thumb-color: var(--p-surface-250);
	--scrollbar-border-radius: var(--border-radius);
}
:root.theme--dark[data-v-7a451ace] {
	--scrollbar-bg-color: var(--p-surface-850);
	--scrollbar-thumb-color: var(--p-surface-700);
	--scrollbar-hover-thumb-color: var(--p-surface-800);
}
.wt-scrollbar[data-v-7a451ace] {
	/* scrollbar itself */
}
.wt-scrollbar[data-v-7a451ace]::-webkit-scrollbar {
	width: var(--scrollbar-width);
	height: var(--scrollbar-height);
	cursor: pointer;
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-bg-color);
}

/* scrollable element */
.wt-scrollbar[data-v-7a451ace]::-webkit-scrollbar-thumb {
	width: var(--scrollbar-thumb-width);
	height: var(--scrollbar-thumb-height);
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-thumb-color);
}
.wt-scrollbar[data-v-7a451ace]::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-hover-thumb-color);
}
.wt-distant-scrollbar[data-v-7a451ace]::-webkit-scrollbar {
	width: 14px;
	height: 18px;
	background-color: var(--scrollbar-bg-color);
}
.wt-distant-scrollbar[data-v-7a451ace]::-webkit-scrollbar-thumb {
	height: 2px;
	border: 4px solid rgba(0, 0, 0, 0);
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-thumb-color);
	background-clip: padding-box;
	/* -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05); */
}
[data-v-7a451ace]:root {
	--border-radius: var(--spacing-2xs);
	--border-radius--pill: 50px;
}
/*
NOTE:   text-transform: none; is set explicitly cause t-t is inherited from parent
 */

/* 
	@author HlukhovYe
	layer needed for overriding primevue's default typography for the components
	https://webitel.atlassian.net/browse/WTEL-8775?focusedCommentId=723773
*/
@layer wt-typography {
.typo-heading-1[data-v-7a451ace] {
		font-family: "Montserrat", monospace;
		font-size: 32px;
		font-weight: 600;
		line-height: 48px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-2[data-v-7a451ace] {
		font-family: "Montserrat", monospace;
		font-size: 24px;
		font-weight: 600;
		line-height: 40px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-3[data-v-7a451ace] {
		font-family: "Montserrat", monospace;
		font-size: 20px;
		font-weight: 600;
		line-height: 32px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-4[data-v-7a451ace] {
		font-family: "Montserrat", monospace;
		font-size: 16px;
		font-weight: 600;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-subtitle-1[data-v-7a451ace] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 500;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-subtitle-2[data-v-7a451ace] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-body-1[data-v-7a451ace] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 400;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.56px; */
		/* 0.04em */
}
.typo-body-1-bold[data-v-7a451ace] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 700;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.56px; */
		/* 0.04em */
}
.typo-body-2[data-v-7a451ace] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 400;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.16px; */
		/* 0.01em */
}
.typo-body-2-bold[data-v-7a451ace] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 700;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.16px; */
		/* 0.01em */
}
.typo-button--md[data-v-7a451ace] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 24px;
		text-transform: uppercase;
		/* letter-spacing: 0.96px; */
		/* 0.06em */
}
.typo-button--sm[data-v-7a451ace] {
		font-family: "Montserrat", monospace;
		font-size: 10px;
		font-weight: 500;
		line-height: 24px;
		text-transform: uppercase;
		/* letter-spacing: 0.96px; */
		/* 0.06em */
}
.typo-caption[data-v-7a451ace] {
		font-family: "Montserrat", monospace;
		font-size: 10px;
		font-weight: 400;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.48px; */
		/* 0.03em */
}
.typo-overline[data-v-7a451ace] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 20px;
		text-transform: uppercase;
		/* letter-spacing: 2.56px; */
		/* 0.16em */
}
}
[data-v-7a451ace]:root {
	/* LIGHTNESS */
	--lightness-lighten-5: 95%;
	--lightness-lighten-4: 90%;
	--lightness-lighten-3: 80%;
	--lightness-lighten-2: 70%;
	--lightness-lighten-1: 60%;

	--lightness-darken-1: 50%;
	--lightness-darken-2: 45%;
	--lightness-darken-3: 40%;
	--lightness-darken-4: 35%;

	--lightness-accent-1: 75%;
	--lightness-accent-2: 65%;
	--lightness-accent-3: 50%;
	--lightness-accent-4: 40%;

	/* SATURATION */
	--saturation-lighten-5: 92%;
	--saturation-lighten-4: 88%;
	--saturation-lighten-3: 90%;
	--saturation-lighten-2: 90%;
	--saturation-lighten-1: 90%;

	--saturation-darken-1: 75%;
	--saturation-darken-2: 75%;
	--saturation-darken-3: 75%;
	--saturation-darken-4: 75%;

	--saturation-accent-1: 91%;
	--saturation-accent-2: 90%;
	--saturation-accent-3: 97%;
	--saturation-accent-4: 97%;

	/* HUE */
	--hue-red: 0;
	--hue-pink: 337;
	--hue-purple: 291;
	--hue-deep-purple: 263;
	--hue-indigo: 232;
	--hue-blue: 209;
	--hue-light-blue: 202;
	--hue-cyan: 188;
	--hue-teal: 173;
	--hue-green: 121;
	--hue-light-green: 88;
	--hue-lime: 66;
	--hue-yellow: 54;
	--hue-amber: 43;
	--hue-orange: 32;
	--hue-deep-orange: 11;

	/* RED */
	--red-lighten-5: hsla(
		var(--hue-red),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--red-lighten-4: hsla(
		var(--hue-red),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--red-lighten-3: hsla(
		var(--hue-red),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--red-lighten-2: hsla(
		var(--hue-red),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--red-lighten-1: hsla(
		var(--hue-red),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--red-darken-4: hsla(
		var(--hue-red),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--red-darken-3: hsla(
		var(--hue-red),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--red-darken-2: hsla(
		var(--hue-red),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--red-darken-1: hsla(
		var(--hue-red),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--red-accent-4: hsla(
		var(--hue-red),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--red-accent-3: hsla(
		var(--hue-red),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--red-accent-2: hsla(
		var(--hue-red),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--red-accent-1: hsla(
		var(--hue-red),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* PINK */
	--pink-lighten-5: hsla(
		var(--hue-pink),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--pink-lighten-4: hsla(
		var(--hue-pink),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--pink-lighten-3: hsla(
		var(--hue-pink),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--pink-lighten-2: hsla(
		var(--hue-pink),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--pink-lighten-1: hsla(
		var(--hue-pink),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--pink-darken-4: hsla(
		var(--hue-pink),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--pink-darken-3: hsla(
		var(--hue-pink),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--pink-darken-2: hsla(
		var(--hue-pink),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--pink-darken-1: hsla(
		var(--hue-pink),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--pink-accent-4: hsla(
		var(--hue-pink),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--pink-accent-3: hsla(
		var(--hue-pink),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--pink-accent-2: hsla(
		var(--hue-pink),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--pink-accent-1: hsla(
		var(--hue-pink),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* PURPLE */
	--purple-lighten-5: hsla(
		var(--hue-purple),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--purple-lighten-4: hsla(
		var(--hue-purple),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--purple-lighten-3: hsla(
		var(--hue-purple),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--purple-lighten-2: hsla(
		var(--hue-purple),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--purple-lighten-1: hsla(
		var(--hue-purple),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--purple-darken-4: hsla(
		var(--hue-purple),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--purple-darken-3: hsla(
		var(--hue-purple),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--purple-darken-2: hsla(
		var(--hue-purple),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--purple-darken-1: hsla(
		var(--hue-purple),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--purple-accent-4: hsla(
		var(--hue-purple),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--purple-accent-3: hsla(
		var(--hue-purple),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--purple-accent-2: hsla(
		var(--hue-purple),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--purple-accent-1: hsla(
		var(--hue-purple),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* DEEP PURPLE */
	--deep-purple-lighten-5: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--deep-purple-lighten-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--deep-purple-lighten-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--deep-purple-lighten-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--deep-purple-lighten-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--deep-purple-darken-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--deep-purple-darken-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--deep-purple-darken-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--deep-purple-darken-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--deep-purple-accent-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--deep-purple-accent-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--deep-purple-accent-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--deep-purple-accent-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* INDIGO */
	--indigo-lighten-5: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--indigo-lighten-4: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--indigo-lighten-3: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--indigo-lighten-2: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--indigo-lighten-1: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--indigo-darken-4: hsla(
		var(--hue-indigo),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--indigo-darken-3: hsla(
		var(--hue-indigo),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--indigo-darken-2: hsla(
		var(--hue-indigo),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--indigo-darken-1: hsla(
		var(--hue-indigo),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--indigo-accent-4: hsla(
		var(--hue-indigo),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--indigo-accent-3: hsla(
		var(--hue-indigo),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--indigo-accent-2: hsla(
		var(--hue-indigo),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--indigo-accent-1: hsla(
		var(--hue-indigo),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* BLUE */
	--blue-lighten-5: hsla(
		var(--hue-blue),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--blue-lighten-4: hsla(
		var(--hue-blue),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--blue-lighten-3: hsla(
		var(--hue-blue),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--blue-lighten-2: hsla(
		var(--hue-blue),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--blue-lighten-1: hsla(
		var(--hue-blue),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--blue-darken-4: hsla(
		var(--hue-blue),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--blue-darken-3: hsla(
		var(--hue-blue),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--blue-darken-2: hsla(
		var(--hue-blue),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--blue-darken-1: hsla(
		var(--hue-blue),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--blue-accent-4: hsla(
		var(--hue-blue),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--blue-accent-3: hsla(
		var(--hue-blue),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--blue-accent-2: hsla(
		var(--hue-blue),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--blue-accent-1: hsla(
		var(--hue-blue),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIGHT BLUE */
	--light-blue-lighten-5: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--light-blue-lighten-4: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--light-blue-lighten-3: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--light-blue-lighten-2: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--light-blue-lighten-1: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--light-blue-darken-4: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--light-blue-darken-3: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--light-blue-darken-2: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--light-blue-darken-1: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--light-blue-accent-4: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--light-blue-accent-3: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--light-blue-accent-2: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--light-blue-accent-1: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* CYAN */
	--cyan-lighten-5: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--cyan-lighten-4: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--cyan-lighten-3: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--cyan-lighten-2: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--cyan-lighten-1: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--cyan-darken-4: hsla(
		var(--hue-cyan),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--cyan-darken-3: hsla(
		var(--hue-cyan),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--cyan-darken-2: hsla(
		var(--hue-cyan),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--cyan-darken-1: hsla(
		var(--hue-cyan),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--cyan-accent-4: hsla(
		var(--hue-cyan),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--cyan-accent-3: hsla(
		var(--hue-cyan),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--cyan-accent-2: hsla(
		var(--hue-cyan),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--cyan-accent-1: hsla(
		var(--hue-cyan),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* TEAL */
	--teal-lighten-5: hsla(
		var(--hue-teal),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--teal-lighten-4: hsla(
		var(--hue-teal),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--teal-lighten-3: hsla(
		var(--hue-teal),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--teal-lighten-2: hsla(
		var(--hue-teal),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--teal-lighten-1: hsla(
		var(--hue-teal),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--teal-darken-4: hsla(
		var(--hue-teal),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--teal-darken-3: hsla(
		var(--hue-teal),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--teal-darken-2: hsla(
		var(--hue-teal),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--teal-darken-1: hsla(
		var(--hue-teal),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--teal-accent-4: hsla(
		var(--hue-teal),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--teal-accent-3: hsla(
		var(--hue-teal),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--teal-accent-2: hsla(
		var(--hue-teal),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--teal-accent-1: hsla(
		var(--hue-teal),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* GREEN */
	--green-lighten-5: hsla(
		var(--hue-green),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--green-lighten-4: hsla(
		var(--hue-green),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--green-lighten-3: hsla(
		var(--hue-green),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--green-lighten-2: hsla(
		var(--hue-green),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--green-lighten-1: hsla(
		var(--hue-green),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--green-darken-4: hsla(
		var(--hue-green),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--green-darken-3: hsla(
		var(--hue-green),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--green-darken-2: hsla(
		var(--hue-green),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--green-darken-1: hsla(
		var(--hue-green),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--green-accent-4: hsla(
		var(--hue-green),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--green-accent-3: hsla(
		var(--hue-green),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--green-accent-2: hsla(
		var(--hue-green),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--green-accent-1: hsla(
		var(--hue-green),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIGHT GREEN */
	--light-green-lighten-5: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--light-green-lighten-4: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--light-green-lighten-3: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--light-green-lighten-2: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--light-green-lighten-1: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--light-green-darken-4: hsla(
		var(--hue-light-green),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--light-green-darken-3: hsla(
		var(--hue-light-green),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--light-green-darken-2: hsla(
		var(--hue-light-green),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--light-green-darken-1: hsla(
		var(--hue-light-green),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--light-green-accent-4: hsla(
		var(--hue-light-green),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--light-green-accent-3: hsla(
		var(--hue-light-green),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--light-green-accent-2: hsla(
		var(--hue-light-green),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--light-green-accent-1: hsla(
		var(--hue-light-green),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIME */
	--lime-lighten-5: hsla(
		var(--hue-lime),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--lime-lighten-4: hsla(
		var(--hue-lime),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--lime-lighten-3: hsla(
		var(--hue-lime),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--lime-lighten-2: hsla(
		var(--hue-lime),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--lime-lighten-1: hsla(
		var(--hue-lime),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--lime-darken-4: hsla(
		var(--hue-lime),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--lime-darken-3: hsla(
		var(--hue-lime),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--lime-darken-2: hsla(
		var(--hue-lime),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--lime-darken-1: hsla(
		var(--hue-lime),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--lime-accent-4: hsla(
		var(--hue-lime),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--lime-accent-3: hsla(
		var(--hue-lime),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--lime-accent-2: hsla(
		var(--hue-lime),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--lime-accent-1: hsla(
		var(--hue-lime),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* yellow */
	--yellow-lighten-5: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--yellow-lighten-4: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--yellow-lighten-3: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--yellow-lighten-2: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--yellow-lighten-1: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--yellow-darken-4: hsla(
		var(--hue-yellow),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--yellow-darken-3: hsla(
		var(--hue-yellow),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--yellow-darken-2: hsla(
		var(--hue-yellow),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--yellow-darken-1: hsla(
		var(--hue-yellow),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--yellow-accent-4: hsla(
		var(--hue-yellow),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--yellow-accent-3: hsla(
		var(--hue-yellow),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--yellow-accent-2: hsla(
		var(--hue-yellow),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--yellow-accent-1: hsla(
		var(--hue-yellow),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* amber */
	--amber-lighten-5: hsla(
		var(--hue-amber),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--amber-lighten-4: hsla(
		var(--hue-amber),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--amber-lighten-3: hsla(
		var(--hue-amber),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--amber-lighten-2: hsla(
		var(--hue-amber),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--amber-lighten-1: hsla(
		var(--hue-amber),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--amber-darken-4: hsla(
		var(--hue-amber),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--amber-darken-3: hsla(
		var(--hue-amber),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--amber-darken-2: hsla(
		var(--hue-amber),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--amber-darken-1: hsla(
		var(--hue-amber),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--amber-accent-4: hsla(
		var(--hue-amber),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--amber-accent-3: hsla(
		var(--hue-amber),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--amber-accent-2: hsla(
		var(--hue-amber),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--amber-accent-1: hsla(
		var(--hue-amber),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* orange */
	--orange-lighten-5: hsla(
		var(--hue-orange),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--orange-lighten-4: hsla(
		var(--hue-orange),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--orange-lighten-3: hsla(
		var(--hue-orange),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--orange-lighten-2: hsla(
		var(--hue-orange),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--orange-lighten-1: hsla(
		var(--hue-orange),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--orange-darken-4: hsla(
		var(--hue-orange),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--orange-darken-3: hsla(
		var(--hue-orange),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--orange-darken-2: hsla(
		var(--hue-orange),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--orange-darken-1: hsla(
		var(--hue-orange),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--orange-accent-4: hsla(
		var(--hue-orange),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--orange-accent-3: hsla(
		var(--hue-orange),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--orange-accent-2: hsla(
		var(--hue-orange),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--orange-accent-1: hsla(
		var(--hue-orange),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* deep-orange */
	--deep-orange-lighten-5: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--deep-orange-lighten-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--deep-orange-lighten-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--deep-orange-lighten-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--deep-orange-lighten-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--deep-orange-darken-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--deep-orange-darken-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--deep-orange-darken-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--deep-orange-darken-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--deep-orange-accent-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--deep-orange-accent-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--deep-orange-accent-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--deep-orange-accent-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* grey */

	--lightness-lighten-5-grey: 94%;
	--lightness-lighten-4-grey: 84%;
	--lightness-lighten-3-grey: 74%;
	--lightness-lighten-2-grey: 64%;
	--lightness-lighten-1-grey: 54%;

	--lightness-darken-1-grey: 44%;
	--lightness-darken-2-grey: 34%;
	--lightness-darken-3-grey: 24%;
	--lightness-darken-4-grey: 14%;
	--lightness-darken-5-grey: 4%;

	--saturation-grey: 20%;
	--hue-grey: 225;

	--grey-lighten-5: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-5-grey),
		1
	);
	--grey-lighten-4: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-4-grey),
		1
	);
	--grey-lighten-3: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-3-grey),
		1
	);
	--grey-lighten-2: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-2-grey),
		1
	);
	--grey-lighten-1: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-1-grey),
		1
	);

	--grey-darken-1: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-1-grey),
		1
	);
	--grey-darken-2: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-2-grey),
		1
	);
	--grey-darken-3: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-3-grey),
		1
	);
	--grey-darken-4: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-4-grey),
		1
	);
	--grey-darken-5: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-5-grey),
		1
	);

	--black: hsla(0, 0%, 0%, 1);
	--white: hsla(0, 0%, 100%, 1);
}
[data-v-7a451ace]:root {
	/* HSL COLORS HUE VALUE */
	--_accent-color-hue: 42;
	--_secondary-color-hue: 202;
	--_page-bg-color-hue: 209;
	--_icon-color-hue: 202;
	--_positive-color-hue: 119;
	--_negative-color-hue: 11;

	--_hold-color-hue: 54;
	--_transfer-color-hue: 227;
	--_job-color-hue: 209;

	/* DEFAULT STATES OPACITY */
	--_opacity--default: 0.8;
	--_opacity--hover: 1;
	--_opacity--active: 1;
	--_opacity--focus: 0.8;
	--_opacity--disabled: 0.4;

	/* BASIC HSL COLORS VALUES */
	--_accent-color: var(--_accent-color-hue), 100%, 50%;
	--_main-color: var(--_accent-color-hue), 20%, 99%;
	--_contrast-color: var(--_accent-color-hue), 20%, 1%;
	--_secondary-color: var(--_secondary-color-hue), 20%, 90%;
	--_secondary-color-50: var(--_secondary-color-hue), 22%, 96%;
	--_page-bg-color: var(--_page-bg-color-hue), 20%, 95%;
	--_header-color: var(--_page-bg-color-hue), 20%, 90%;
	--_positive-color: var(--_positive-color-hue), 60%, 40%;
	--_negative-color: var(--_negative-color-hue), 80%, 50%;
	--_icon-color: var(--_icon-color-hue), 100%, 15%;

	--_hold-color: var(--_hold-color-hue), 80%, 50%;
	--_transfer-color: var(--_transfer-color-hue), 80%, 50%;
	--_job-color: var(--_job-color-hue), 96%, 57%;

	/* MAIN COLORS */
	--accent-color: hsla(var(--_accent-color), 1);

	--main-color: hsla(var(--_main-color), 1);

	--contrast-color: hsla(var(--_contrast-color), 1);

	--secondary-color: hsla(var(--_secondary-color), 1);
	--secondary-color-50: hsla(var(--_secondary-color-50), 1);

	/* ICON COLORS */
	--icon-color-secondary: hsla(var(--_icon-color), 0.25);

	--icon-color--hover: hsla(var(--_icon-color), var(--_opacity--hover));

	--icon-color-accent: var(--accent-color);
	--icon-color-contrast: hsla(var(--_main-color), var(--_opacity--default));
	--icon-color-active: var(--icon-color--hover);
	--icon-color-disabled: hsla(var(--_icon-color), var(--_opacity--disabled));
	--icon-color-success: var(--true-color);
	--icon-color-danger: var(--false-color);
	--icon-color-transfer: var(--transfer-color);
	--icon-color-hold: var(--hold-color);
	--icon-color-secondary-50: var(--secondary-color-50);

	--page-bg-color: hsla(var(--_page-bg-color), 1);
	--header-color: hsla(var(--_header-color), 1);

	--accent-secondary-color: hsla(var(--_accent-color), 0.3);

	/* SEMANTIC COLORS */
	--disabled-color: hsl(var(--_contrast-color), var(--_opacity--disabled));

	--true-color: hsla(var(--_positive-color), var(--_opacity--default));
	--true--hover-color: hsla(var(--_positive-color), var(--_opacity--hover));

	--false-color: hsla(var(--_negative-color), var(--_opacity--default));
	--false--hover-color: hsla(var(--_negative-color), var(--_opacity--hover));

	--hold-color: hsla(var(--_hold-color), var(--_opacity--default));
	--hold--hover-color: hsla(var(--_hold-color), var(--_opacity--hover));

	--transfer-color: hsla(var(--_transfer-color), var(--_opacity--default));
	--transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover));

	--job-color: hsla(var(--_job-color), var(--_opacity--default));
	--job--hover-color: hsla(var(--_job-color), var(--_opacity--hover));

	--link-color: hsla(205, 90%, 45%, 1);
	--link--hover-color: hsla(205, 90%, 60%, 1);

	/* SUBORDINATE COLORS */
	--tag-bg-color: var(--accent-secondary-color);

	/* FORM STATES OPACITY */
	--form-opacity--default: var(--_opacity--default);
	--form-opacity--hover: var(--_opacity--hover);
	--form-opacity--active: var(--_opacity--active);
	--form-opacity--focus: var(--_opacity--focus);
	--form-opacity--disabled: var(--_opacity--disabled);

	--form-placeholder-opacity: 0.6;
	--form-placeholder-opacity--focus: 0.4;
	--form-border-opacity--disabled: 0.05;

	--form-opacity--ouline--default: 0.4;
	--form-opacity--ouline--hover: 0.7;

	/* FORM COLORS */
	--form-input-color: var(--contrast-color);
	/* user input color */

	--form-label-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);
	--form-label--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--hover)
	);
	--form-label--active-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--active)
	);
	--form-label--disabled-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--disabled)
	);

	--form-border-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);
	--form-border--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--hover)
	);
	--form-border--disabled-color: hsla(
		var(--_contrast-color),
		var(--form-border-opacity--disabled)
	);

	--form-placeholder-color: hsla(
		var(--_contrast-color),
		var(--form-placeholder-opacity)
	);
	--form-placeholder-color--focus: hsla(
		var(--_contrast-color),
		var(--form-placeholder-opacity--focus)
	);
	--form-placeholder-color--disabled: hsla(
		var(--_contrast-color),
		var(--form-opacity--disabled)
	);

	/* outline */
	--form-outline-label-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);

	--form-outline-border-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--ouline--default)
	);
	--form-outline-border--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--ouline--hover)
	);

	/* TEXT OPACITY */
	--text-opacity--default: var(--_opacity--default);
	--text-opacity----outline--default: 0.7;
	--text-opacity--disabled: 0.5;

	/* TEXT COLORS */
	--text-primary-color: hsla(
		var(--_contrast-color),
		var(--text-opacity--default)
	);
	--text-outline-color: hsla(
		var(--_contrast-color),
		var(--text-opacity----outline--default)
	);
	--text-contrast-color: hsla(var(--_main-color), var(--text-opacity--default));
	--text--disabled-color: hsla(
		var(--_contrast-color),
		var(--text-opacity--disabled)
	);

	/* CHAT COLORS */
	--_chat-client-color: var(--_accent-color);
	--_chat-client-opacity: 0.2;
	--_chat-agent-color: var(--_secondary-color-50);
	--_chat-agent-opacity: 1;

	--chat-client-message-bg-color: hsla(
		var(--_chat-client-color),
		var(--_chat-client-opacity)
	);
	--chat-agent-message-bg-color: hsla(
		var(--_chat-agent-color),
		var(--_chat-agent-opacity)
	);
	--chat-client-attachment-bg-color: hsla(
		var(--_chat-client-color),
		var(--_chat-client-opacity)
	);
	--chat-agent-attachment-bg-color: hsla(
		var(--_chat-agent-color),
		var(--_chat-agent-opacity)
	);
}
/* shared text field colors */
[data-v-7a451ace]:root {
	/* TODO: move to separate helper-text component */
	/* helper */
	--wt-helper-text-color: var(--text-main-color);
	--wt-helper-text-disabled-color: var(--text-disabled-color);
	--wt-helper-text-invalid-color: var(--text-error-color);

	/* text */
	--wt-text-field-text-color: var(--black);

	/* placeholder */
	--wt-text-field-error-text-color: var(--error-color);
	--wt-text-field-placeholder-color: var(--grey-lighten-1);
	--wt-text-field-placeholder-error-color: var(--error-color);
	--wt-text-field-placeholder-disabled-color: var(--text-disabled-color);

	/* border */
	--wt-text-field-input-border-color: var(--grey-darken-1);
	--wt-text-field-input-border-disabled-color: var(--dp-16-surface-color);
	--wt-text-field-input-border-error-color: var(--error-color);

	/* input bg */
	--wt-text-field-input-background-disabled-color: var(--dp-16-surface-color);

	/* select */
	--wt-text-field-select-option-text-color: var(--text-main-color);
	--wt-text-field-select-option-text-hover-color: var(--primary-on-color);
	--wt-text-field-select-option-text-selected-color: var(--primary-on-color);

	--wt-text-field-select-option-wrapper-border-color: var(
		--dp-22-surface-color
	);
	--wt-text-field-select-option-background-color: var(--dp-22-surface-color);
	--wt-text-field-select-option-background-hover-color: var(
		--primary-light-color
	);
	--wt-text-field-select-option-background-selected-color: var(--primary-color);
}
:root.theme--dark[data-v-7a451ace] {
	/* text */
	--wt-text-field-text-color: var(--white);

	--wt-text-field-input-border-color: var(--grey-lighten-1);
}
[data-v-7a451ace]:root {
	/* dp colors */
	--dp-24-surface-color: hsl(0, 0%, 100%);
	--dp-23-surface-color: hsl(225, 20%, 99%);
	--dp-22-surface-color: hsl(225, 20%, 98%);
	--dp-21-surface-color: hsl(225, 20%, 97%);
	--dp-20-surface-color: hsl(225, 20%, 96%);
	--dp-19-surface-color: hsl(225, 20%, 95%);
	--dp-18-surface-color: hsl(225, 20%, 94%);
	--dp-17-surface-color: hsl(225, 20%, 93%);
	--dp-16-surface-color: hsl(225, 20%, 92%);
	--dp-15-surface-color: hsl(225, 20%, 91%);
	--dp-14-surface-color: hsl(225, 20%, 90%);
	--dp-13-surface-color: hsl(225, 20%, 89%);
	--dp-12-surface-color: hsl(225, 20%, 88%);
	--dp-11-surface-color: hsl(225, 20%, 87%);
	--dp-10-surface-color: hsl(225, 20%, 86%);
	--dp-9-surface-color: hsl(225, 20%, 85%);
	--dp-8-surface-color: hsl(225, 20%, 84%);
	--dp-7-surface-color: hsl(225, 20%, 83%);
	--dp-6-surface-color: hsl(225, 20%, 82%);
	--dp-5-surface-color: hsl(225, 20%, 81%);
	--dp-4-surface-color: hsl(225, 20%, 80%);
	--dp-3-surface-color: hsl(225, 20%, 79%);
	--dp-2-surface-color: hsl(225, 20%, 78%);
	--dp-1-surface-color: hsl(225, 20%, 77%);

	/* content wrapper */
	--content-wrapper-color: var(--p-content-background);
	--content-wrapper-hover-color: var(--p-content-hover-background);

	/* context menu */
	--context-menu-background-color: var(--content-wrapper-color);
	--context-menu-option-hover-color: var(--p-surface-50);
	--context-menu-option-disabled-color: var(--p-surface-100);
	--context-menu-option-text-color: var(--text-main-color);
	--context-menu-option-text-disabled-color: var(--text-disabled-color);

	/* success colors */
	--success-color: var(--green-darken-4);
	--success-hover-color: var(--green-darken-3);
	--success-light-color: var(--green-lighten-4);
	--success-on-color: var(--white);

	/* warning colors */
	--warning-color: var(--orange-accent-2);
	--warning-hover-color: var(--orange-accent-1);
	--warning-light-color: var(--orange-lighten-4);
	--warning-on-color: var(--black);

	/* error colors */
	--error-color: var(--red-accent-2);
	--error-hover-color: var(--red-lighten-2);
	--error-light-color: var(--red-lighten-4);
	--error-on-color: var(--white);

	/* info colors */
	--info-color: var(--blue-darken-1);
	--info-hover-color: var(--blue-lighten-1);
	--info-light-color: var(--blue-lighten-4);
	--info-on-color: var(--black);

	/* job colors */
	--job-color: var(--blue-darken-1);
	--job-hover-color: var(--blue-lighten-1);
	--job-light-color: var(--blue-lighten-4);
	--job-on-color: var(--black);

	/* chat colors */
	--chat-color: var(--indigo-accent-2);
	--chat-hover-color: var(--indigo-accent-1);
	--chat-light-color: var(--indigo-lighten-4);
	--chat-on-color: var(--black);

	/* transfer colors */
	--transfer-color: var(--indigo-lighten-1);
	--transfer-hover-color: var(--indigo-lighten-2);
	--transfer-light-color: var(--indigo-lighten-4);
	--transfer-on-color: var(--white);

	/* primary colors */
	--primary-color: var(--amber-accent-3);
	--primary-hover-color: var(--amber-accent-2);
	--primary-light-color: var(--amber-lighten-3);
	--primary-on-color: var(--black);

	/* secondary colors */
	--secondary-color: var(--dp-10-surface-color);
	--secondary-hover-color: var(--dp-14-surface-color);
	--secondary-light-color: var(--dp-16-surface-color);
	--secondary-on-color: var(--grey-darken-4);

	/* email colors */
	--email-color: var(--blue-darken-3);
	--email-hover-color: var(--blue-darken-2);
	--email-light-color: var(--blue-lighten-2);
	--email-on-color: var(--black);

	/* accent colors */
	--accent-color: var(--purple-lighten-1);
	--sub-accent-color: var(--indigo-darken-3);

	/* typography colors */
	--text-main-color: var(--grey-darken-3);
	--text-disabled-color: var(--grey-lighten-1);
	--text-error-color: var(--error-color);
	--text-success-color: var(--success-color);
	--text-link-color: var(--info-color);
	/* typography on colors */
	--text-on-brand-color: var(--white);
}
:root.theme--dark[data-v-7a451ace] {
	/* dp colors */
	--dp-24-surface-color: hsl(225, 20%, 25%);
	--dp-23-surface-color: hsl(225, 20%, 24%);
	--dp-22-surface-color: hsl(225, 20%, 23%);
	--dp-21-surface-color: hsl(225, 20%, 22%);
	--dp-20-surface-color: hsl(225, 20%, 21%);
	--dp-19-surface-color: hsl(225, 20%, 20%);
	--dp-18-surface-color: hsl(225, 20%, 19%);
	--dp-17-surface-color: hsl(225, 20%, 18%);
	--dp-16-surface-color: hsl(225, 20%, 17%);
	--dp-15-surface-color: hsl(225, 20%, 16%);
	--dp-14-surface-color: hsl(225, 20%, 15%);
	--dp-13-surface-color: hsl(225, 20%, 14%);
	--dp-12-surface-color: hsl(225, 20%, 13%);
	--dp-11-surface-color: hsl(225, 20%, 12%);
	--dp-10-surface-color: hsl(225, 20%, 11%);
	--dp-9-surface-color: hsl(225, 20%, 10%);
	--dp-8-surface-color: hsl(225, 20%, 9%);
	--dp-7-surface-color: hsl(225, 20%, 8%);
	--dp-6-surface-color: hsl(225, 20%, 7%);
	--dp-5-surface-color: hsl(225, 20%, 6%);
	--dp-4-surface-color: hsl(225, 20%, 5%);
	--dp-3-surface-color: hsl(225, 20%, 4%);
	--dp-2-surface-color: hsl(225, 20%, 3%);
	--dp-1-surface-color: hsl(225, 20%, 2%);

	/* success colors */
	--success-color: var(--green-darken-4);
	--success-hover-color: var(--green-darken-3);
	--success-light-color: var(--green-lighten-3);
	--success-on-color: var(--black);

	/* warning colors */
	--warning-color: var(--orange-accent-2);
	--warning-hover-color: var(--orange-accent-1);
	--warning-light-color: var(--orange-lighten-3);
	--warning-on-color: var(--black);

	/* error colors */
	--error-color: var(--red-accent-2);
	--error-hover-color: var(--red-lighten-2);
	--error-light-color: var(--red-lighten-3);
	--error-on-color: var(--black);

	/* info colors */
	--info-color: var(--blue-darken-1);
	--info-hover-color: var(--blue-lighten-1);
	--info-light-color: var(--blue-lighten-3);
	--info-on-color: var(--white);

	/* job colors */
	--job-color: var(--blue-darken-1);
	--job-hover-color: var(--blue-lighten-1);
	--job-light-color: var(--blue-lighten-3);
	--job-on-color: var(--white);

	/* chat colors */
	--chat-color: var(--indigo-accent-2);
	--chat-hover-color: var(--indigo-accent-1);
	--chat-light-color: var(--indigo-lighten-3);
	--chat-on-color: var(--white);

	/* transfer colors */
	--transfer-color: var(--indigo-darken-1);
	--transfer-hover-color: var(--indigo-lighten-1);
	--transfer-light-color: var(--indigo-lighten-4);
	--transfer-on-color: var(--white);

	/* primary colors */
	--primary-color: var(--amber-darken-2);
	--primary-hover-color: var(--amber-darken-1);
	--primary-light-color: var(--amber-darken-4);
	--primary-on-color: var(--black);

	/* secondary colors */
	--secondary-on-color: var(--grey-lighten-4);

	/* email colors */
	--email-color: var(--blue-darken-3);
	--email-hover-color: var(--blue-darken-2);
	--email-light-color: var(--blue-lighten-1);
	--email-on-color: var(--white);

	/* accent colors */
	--accent-color: var(--purple-lighten-1);
	--sub-accent-color: var(--indigo-darken-3);

	/* typography colors */
	--text-main-color: var(--grey-lighten-3);
	--text-disabled-color: var(--grey-darken-1);
	--text-error-color: var(--error-color);
	--text-success-color: var(--success-color);
	--text-link-color: var(--info-color);
	/* typography on colors */
	--text-on-brand-color: var(--white);

	/* context menu */
	--context-menu-option-hover-color: var(--p-surface-900);
	--context-menu-option-disabled-color: var(--p-surface-850);
}
[data-v-7a451ace]:root {
	--_elevation-color: hsla(0, 0%, 0%, 0.05);
	--elevation-1: 0px 0px 4px 1px var(--_elevation-color);
	--elevation-2: 0px 0px 6px 2px var(--_elevation-color);
	--elevation-3: 0px 0px 8px 3px var(--_elevation-color);
	--elevation-4: 0px 0px 10px 4px var(--_elevation-color);
	--elevation-5: 0px 0px 12px 5px var(--_elevation-color);
	--elevation-6: 0px 0px 14px 6px var(--_elevation-color);
	--elevation-7: 0px 0px 16px 7px var(--_elevation-color);
	--elevation-8: 0px 0px 18px 8px var(--_elevation-color);
	--elevation-9: 0px 0px 20px 9px var(--_elevation-color);
	--elevation-10: 0px 0px 22px 10px var(--_elevation-color);
}
[data-v-7a451ace]:root {
	/* Start point */
	--_spacing-multiplicator: 8px;

	/* Spacings */
	--spacing-3xs: calc(var(--_spacing-multiplicator) / 4);
	--spacing-2xs: calc(var(--_spacing-multiplicator) / 2);
	--spacing-xs: calc(var(--_spacing-multiplicator) * 1);
	--spacing-sm: calc(var(--_spacing-multiplicator) * 2);
	--spacing-md: calc(var(--_spacing-multiplicator) * 3);
	--spacing-lg: calc(var(--_spacing-multiplicator) * 4);
	--spacing-xl: calc(var(--_spacing-multiplicator) * 5);
	--spacing-2xl: calc(var(--_spacing-multiplicator) * 6);
	--spacing-3xl: calc(var(--_spacing-multiplicator) * 7);
}
[data-v-7a451ace]:root {
	--transition-fast: 0.3s;
	--transition-normal: 0.6s;
	--transition-slow: 0.9s;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Thin-B0oow3R9.woff2")
		format("woff2");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ThinItalic-Df5kGryu.woff2")
		format("woff2");
	font-weight: 100;
	font-style: italic;
	font-display: swap;
	font-display: swap;
	font-display: swap;
	font-display: swap;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraLight-BLVvTz6v.woff2")
		format("woff2");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraLightItalic-Cm43v-Vf.woff2")
		format("woff2");
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Light-De9MYPOT.woff2")
		format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-LightItalic-DV9n9KIB.woff2")
		format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Regular-Cu1XIIHs.woff2")
		format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Italic-DdaXnPiX.woff2")
		format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Medium-DJODbTHz.woff2")
		format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-MediumItalic-Dx3RkM4S.woff2")
		format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-SemiBold-DwmoiGAe.woff2")
		format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-SemiBoldItalic-DUAaODp3.woff2")
		format("woff2");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Bold-DYLVQlxQ.woff2")
		format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-BoldItalic-DSEOJb3S.woff2")
		format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraBold-CLYj8xrZ.woff2")
		format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraBoldItalic-DikM7EMV.woff2")
		format("woff2");
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Black-C-enK_Oz.woff2")
		format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-BlackItalic-D65VYM31.woff2")
		format("woff2");
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

/*
This font was added for use in wt-input-text in case we need to hide the input value,like in a password input,
but without type="password" on input. It was added because not all brawsers are support 'text-security: disc' property,
So this font changes text to discs in these cases
*/
@font-face {
	font-family: "text-security-disc";
	src: url("data:font/woff2;base64,d09GMgABAAAAAAMQAAoAAAAACAAAAALIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAggAKcHILBgABNgIkAwYEIAWJSAcvG0gHEZWcjBRfHNjNPraIGU7SkQoTFkXoFRjv8FUcbDmIj4fv117P3fcRQioFRseKQUaWwJVVVVWlqUSWQCqzAXDOVp+vqsnVapWIlhw7yBoEhhMnHFYCHMKOvkR03bf6e9V3k5C0pdB3/e9T0qkd4MMPltYAwwl4rBdKBw5Q6WQJiMe2JfXQzxqDHiJHyBCRoyWk9D0eokh2Ww9se/9MHLHYawD4n5f/Ls/b722ATVs377KRPE9jOdKY88cWRA5gIghJDQ1N8AfoA89ygvcYf4pg/Ec+TgiEgQwZEhIKKKCIIkoooYwyKqigiipqqKGOOhpooIkmWmihjTY66PxOyEABGSZiKqAAQnQ6B6/n1u98x4262u0Js8WuS9OPfJk+/cuR6bOAtTcIJOZcuOuj7bV/Kyl9h9f38fFYbrefcSYrI8lAQDMUDxExOyyGlfQ/vVsg0xGArgJ1t5MoVLEcA2Gq5ci0HECy2rnswoOiU55kl1xUjEQJdXtiFM3sEWm9lqWFmgZbjP05LRVBvbqdHux9wpyGnbGWEX6p5JEHp+lXirTnJ5QhZa5Rrsq9D67r+24QRrdzndcmBzUrQ9xXb6hp/3Kt1h1kLEFUI/CLVKdW/dqtdrVRNqpIyLr2KxU5WYVXmZuskh+VXqlluyjNMNPGBGcj6JOF0MC+M9Ucc48RhDxCB6QQzssN7C3m8bmbGCrG7VXU5FY+yGdUakVOvwKllMExtmsLwzMsVQFGpi5UbHxfXhb762Voh6fTcKeW03OxxicY73eTpa8bxhIzeWR+wnoJ6j/4kBejs2xf69j7pOSUzmzPCqNy4cojtlsLwpBhb++AtcBHQcpyGZgkYrGUBTwXn2/RF12BjlQTI1XSvANELqO18DPB+UIyNkJSZBsoX7wh7DlfsyVfTshpuSjLSv9H3fwD+a36nwAAkBFZ5aSOqp+7Bg==")
		format("woff2");
	font-weight: 100;
	font-style: normal;
}
.fade-enter-active[data-v-7a451ace],
.fade-leave-active[data-v-7a451ace] {
	transition: opacity var(--transition);
}
.fade-enter[data-v-7a451ace],
.fade-leave-to[data-v-7a451ace] {
	opacity: 0;
}
/*
  Classes for direct use in placeholder-like elements styling
   (e.g. vue-multiselect .multiselect__placeholder which is technically a span)
*/
.wt-placeholder[data-v-7a451ace] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-color);
}
.wt-placeholder--disabled[data-v-7a451ace] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-disabled-color);
}
.wt-placeholder--error[data-v-7a451ace] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-error-color);
}
.d-none[data-v-7a451ace] {
	display: none;
}
@media only screen and (max-width: 960px) {
.d-none-sm[data-v-7a451ace] {
		display: none;
}
.d-block-sm[data-v-7a451ace] {
		display: block;
}
}
@media only screen and (max-width: 600px) {
.d-none-xs[data-v-7a451ace] {
		display: none;
}
.d-block-xs[data-v-7a451ace] {
		display: block;
}
}
/* Component Variables - Centralized to avoid duplication */
/* This file imports all component-specific CSS variables once globally */
[data-v-7a451ace]:root {
	--wt-app-header-min-height: 40px;
	--wt-app-header-padding: var(--spacing-xs) var(--spacing-sm);
	--wt-app-header-background: var(--dp-9-surface-color);

	--wt-app-header-content-gap: var(--spacing-sm);
	--wt-app-header-content-panel-margin: var(--spacing-2xs);
	--wt-app-header-content-bg-color: var(--content-wrapper-color);
	--wt-app-header-content-z-index: 11;

	--wt-app-navigator-max-height: 80vh;
	--wt-app-navigator-padding: var(--wt-app-header-content-gap);
	--wt-app-navigator-item-width: 128px;
	--wt-app-navigator-item-height: 135px;
	--wt-app-navigator-item-padding: var(--spacing-xs);
	--wt-app-navigator-item-gap: var(--wt-app-header-content-gap);
	--wt-app-navigator-item-border: 1px solid;
	--wt-app-navigator-item-border-color: var(--secondary-color);
	--wt-app-navigator-item-pic-size: 88px;
	--wt-app-navigator-item-border-color--hover: var(--primary-color);

	--wt-header-actions-min-width: 120px;
	--wt-header-actions-content-sections-gap: var(--spacing-lg);
	--wt-header-actions-padding: var(--wt-app-header-content-gap);
	--wt-header-actions-action-bg-color--hover: var(--secondary-color);
	--wt-header-actions-action-link-padding: var(--spacing-xs);
}
[data-v-7a451ace]:root {
	--wt-avatar-size--size-xs: calc(var(--_spacing-multiplicator) * 3);
	--wt-avatar-size--size-sm: calc(var(--_spacing-multiplicator) * 4);
	--wt-avatar-size--size-md: calc(var(--_spacing-multiplicator) * 5);
	--wt-avatar-size--size-lg: calc(var(--_spacing-multiplicator) * 7);
	--wt-avatar-size--size-xl: calc(var(--_spacing-multiplicator) * 9);
	--wt-avatar-size--size-2xl: calc(var(--_spacing-multiplicator) * 12);
	--wt-avatar-size--size-3xl: calc(var(--_spacing-multiplicator) * 16);

	--wt-avatar-size: var(--wt-avatar-size--size-md);

	--online-color: var(--success-color);
	--dnd-color: var(--warning-color);
	--busy-color: var(--error-color);
	--offline-color: var(--disabled-color);
	--pause-color: var(--warning-color);

	--wt-avatar-text-color: var(--white);

	--wt-avatar-letters-p1-color: var(--red-lighten-2);
	--wt-avatar-letters-p2-color: var(--purple-lighten-2);
	--wt-avatar-letters-p3-color: var(--deep-purple-lighten-2);
	--wt-avatar-letters-p4-color: var(--indigo-lighten-2);
	--wt-avatar-letters-p5-color: var(--blue-lighten-1);
	--wt-avatar-letters-p6-color: var(--cyan-lighten-1);
	--wt-avatar-letters-p7-color: var(--teal-darken-3);
	--wt-avatar-letters-p8-color: var(--green-darken-2);
	--wt-avatar-letters-p9-color: var(--lime-darken-3);
	--wt-avatar-letters-p10-color: var(--yellow-darken-3);
	--wt-avatar-letters-p11-color: var(--amber-lighten-2);
	--wt-avatar-letters-p12-color: var(--orange-darken-1);
	--wt-avatar-letters-p13-color: var(--deep-purple-lighten-1);
}
:root.theme--dark[data-v-7a451ace] {
	--wt-avatar-text-color: var(--black);
}
[data-v-7a451ace]:root {
	--wt-badge-size: var(--spacing-xs);
}
[data-v-7a451ace]:root {
	--breadcrumb-indicator-size: 4px;
	--breadcrumb-gap: var(--spacing-sm);
	--breadcrumb-dot-gap: var(--spacing-2xs);
	--breadcrumb-indicator-color: var(--icon-color);
	--breadcrumb-accent-indicator-color: var(--primary-color);
}
[data-v-7a451ace]:root {
	--button-select-button-padding: var(--spacing-xs) var(--spacing-sm);

	--button-select-icon-button-padding: var(--spacing-xs);

	--button-select-buttons-gap: 1px;
}
[data-v-7a451ace]:root {
	--btn-min-width: 90px;
	--btn-min-width--size-sm: 70px;
	--btn-padding: var(--spacing-xs) var(--spacing-sm);
	--btn-padding--size-sm: var(--spacing-2xs) var(--spacing-xs);
	/* COLORS */
	--btn-primary-color: var(--primary-color);
	--btn-primary-hover-color: var(--primary-hover-color);
	--btn-primary-text-color: var(--primary-on-color);

	--btn-secondary-color: var(--dp-10-surface-color);
	--btn-secondary-hover-color: var(--dp-14-surface-color);
	--btn-secondary-text-color: var(--grey-darken-4);

	--btn-success-color: var(--success-color);
	--btn-success-hover-color: var(--success-hover-color);
	--btn-success-text-color: var(--grey-lighten-5);

	--btn-info-color: var(--info-color);
	--btn-info-hover-color: var(--info-hover-color);
	--btn-info-text-color: var(--grey-lighten-5);

	--btn-job-color: var(--job-color);
	--btn-job-hover-color: var(--job-hover-color);
	--btn-job-text-color: var(--grey-lighten-5);

	--btn-error-color: var(--error-color);
	--btn-error-hover-color: var(--error-hover-color);
	--btn-error-text-color: var(--grey-lighten-5);

	--btn-transfer-color: var(--transfer-color);
	--btn-transfer-hover-color: var(--transfer-hover-color);
	--btn-transfer-text-color: var(--transfer-on-color);

	--btn-disabled-color: var(--dp-16-surface-color);
	--btn-disabled-text-color: var(--grey-darken-1);
}
:root.theme--dark[data-v-7a451ace] {
	--btn-secondary-text-color: var(--grey-lighten-4);
}
[data-v-7a451ace]:root {
	--wt-card-border-radius: var(--p-content-border-radius);
	--wt-card-padding: var(--spacing-sm);
}
[data-v-7a451ace]:root {
	--checkbox-icon-margin: var(--spacing-xs);
}
[data-v-7a451ace]:root {
	--chip-padding: var(--spacing-2xs) var(--spacing-sm);
	--chip-border-radius: var(--spacing-lg);

	--wt-chip-main-background-color: var(--primary-light-color);
	--wt-chip-main-text-color: var(--primary-on-color);

	--wt-chip-primary-background-color: var(--primary-color);
	--wt-chip-primary-text-color: var(--primary-on-color);

	--wt-chip-secondary-background-color: var(--secondary-color);
	--wt-chip-secondary-text-color: var(--secondary-on-color);

	--wt-chip-success-background-color: var(--success-color);
	--wt-chip-success-text-color: var(--success-on-color);

	--wt-chip-warning-background-color: var(--warning-color);
	--wt-chip-warning-text-color: var(--warning-on-color);

	--wt-chip-error-background-color: var(--error-color);
	--wt-chip-error-text-color: var(--error-on-color);

	--wt-chip-transfer-background-color: var(--transfer-color);
	--wt-chip-transfer-text-color: var(--transfer-on-color);
}
[data-v-7a451ace]:root {
	--wt-context-menu-option-padding: var(--spacing-xs);

	--wt-context-menu-background-color: var(--context-menu-background-color);
	--wt-context-menu-option-text-color: var(--context-menu-option-text-color);
	--wt-context-menu-option-background-hover-color: var(
		--context-menu-option-hover-color
	);
	--wt-context-menu-option-background-disabled-color: var(
		--context-menu-option-disabled-color
	);
	--wt-context-menu-option-text-disabled-color: var(
		--context-menu-option-text-disabled-color
	);
}
:root {
&[data-v-7a451ace]{
	/*General*/
	--dp-font-family: "Montserrat";
	--dp-border-radius: var(--border-radius);
	/*Configurable border-radius*/
	--dp-cell-border-radius: var(--border-radius);
	/*Specific border radius for the calendar cell*/

	/*Sizing*/
	--dp-button-heigh: 32px;
	/*Size for buttons in overlays*/
	--dp-month-year-row-height: 24px;
	/*Height of the month-year select row*/
	--dp-month-year-row-button-size: 24px;
	/*Specific height for the next/previous buttons*/
	--dp-button-icon-height: var(--icon-md-size);
	/*Icon sizing in buttons*/
	--dp-cell-size: 24px;
	/*Width and height of calendar cell*/
	--dp-cell-padding: var(--spacing-2xs);
	/*Padding in the cell*/
	--dp-common-padding: var(--spacing-xs);
	/*Common padding used*/
	--dp-input-icon-padding: calc(var(--icon-md-size) + 2 * var(--spacing-xs));
	/*Padding on the left side of the input if icon is present*/
	--dp-input-padding: calc(var(--spacing-xs) - 1px)
		calc(var(--icon-md-size) + 2 * var(--spacing-xs));
	/*Padding in the input*/
	/* --dp-menu-min-width: 260px; Adjust the min width of the menu */
	--dp-action-buttons-padding: 2px 5px;
	/*Adjust padding for the action buttons in action row*/
	--dp-row-maring: var(--spacing-3xs);
	/*Adjust the spacing between rows in the calendar*/
	--dp-calendar-header-cell-padding: 0.5rem;
	/*Adjust padding in calendar header cells*/
	--dp-two-calendars-spacing: 10px;
	/*Space between multiple calendars*/
	--dp-overlay-col-padding: 3px;
	/*Padding in the overlay column*/
	--dp-time-inc-dec-button-size: 24px;
	/*Sizing for arrow buttons in the time picker*/

	/*Font sizes*/
	--dp-font-size: 12px;
	/*Default font-size*/
	--dp-preview-font-size: 12px;
	/*Font size of the date preview in the action row*/
	--dp-time-font-size: 12px;
	/*Font size in the time picker*/

	/*Transitions*/
	--dp-animation-duration: var(--transition);
	/*Transition duration*/
	--dp-menu-appear-transition-timing: cubic-bezier(0.4, 0, 1, 1);
	/*Timing on menu appear animation*/
	--dp-transition-timing: ease-out;
	/*Timing on slide animations*/
	}
.dp__theme_light[data-v-7a451ace] {
		--dp-background-color: var(--content-wrapper-color);
		--dp-text-color: var(--text-main-color);
		/* --dp-hover-color: var(--secondary-color-50); */
		/* --dp-hover-text-color: var(--contrast-color); */
		--dp-hover-icon-color: var(--icon-btn-hover-color);
		--dp-primary-color: var(--primary-color);
		--dp-primary-text-color: var(--primary-on-color);
		--dp-secondary-color: var(--secondary-color);
		--dp-border-color: var(--wt-text-field-input-border-color);
		--dp-menu-border-color: transparent;
		/* --dp-border-color-hover: var(--form-border--hover-color); */
		--dp-disabled-color: var(--wt-text-field-input-background-disabled-color);
		--dp-success-color: var(--success-color);
		--dp-icon-color: var(--icon-color);
		--dp-danger-color: var(--error-color);
		/* --dp-scroll-bar-background: #f3f3f3; */
		/* --dp-scroll-bar-color: #959595; */
		/* --dp-success-color-disabled: #a3d9b1; */
		/* --dp-highlight-color: rgba(25, 118, 210, 0.1); */
}
}
[data-v-7a451ace]:root {
	--divider-border: 1px solid;
	--divider-border-color: var(--grey-lighten-4);
}
:root.theme--dark[data-v-7a451ace] {
	--divider-border-color: var(--grey-darken-2);
}
[data-v-7a451ace]:root {
	--wt-dual-panel-padding: var(--spacing-sm);
	--wt-dual-panel-section-padding: var(--spacing-sm);
	--wt-dual-panel-section-gap: var(--spacing-sm);

	--wt-dual-panel-background-color: var(--grey-lighten-5);
	--wt-dual-panel-content-wrapper-color: var(--content-wrapper-color);
}
:root.theme--dark[data-v-7a451ace] {
	--wt-dual-panel-background-color: var(--grey-darken-4);
}
[data-v-7a451ace]:root {
	--wt-dummy-text-color: var(--text-main-color);
}
[data-v-7a451ace]:root {
	--wt-empty-min-width: 280px;
	--wt-empty-width: 600px;
	--wt-empty-max-width: 80vw;
}
[data-v-7a451ace]:root {
	--wt-error-page-background-color: var(--content-wrapper-color);
	--wt-error-page-text-color: var(--text-main-color);
}
[data-v-7a451ace]:root {
	--wt-expansion-panel-header-background-color: var(--dp-16-surface-color);
	--wt-expansion-panel-header-title-color: var(--text-main-color);
	--wt-expansion-panel-content-background-color: var(--content-wrapper-color);
	--wt-expansion-panel-content-text-color: var(--text-main-color);
}
[data-v-7a451ace]:root {
	--headline-min-height: 40px; /* button/search-bar height */
	--headline-title-margin: var(--spacing-sm);
	--wt-headline-background-color: var(--content-wrapper-color);
}
[data-v-7a451ace]:root {
	--icon-btn-hover-color: var(--grey-darken-5);
}
:root.theme--dark[data-v-7a451ace] {
	--icon-btn-hover-color: var(--grey-lighten-5);
}
[data-v-7a451ace]:root {
	--icon-8xl-size: 96px;
	--icon-7xl-size: 88px;
	--icon-6xl-size: 80px;
	--icon-5xl-size: 72px;
	--icon-4xl-size: 64px;
	--icon-3xl-size: 56px;
	--icon-2xl-size: 48px;
	--icon-xl-size: 40px;
	--icon-lg-size: 32px;
	--icon-md-size: 24px;
	--icon-sm-size: 16px;
	--icon-xs-size: 8px;

	--icon-color: var(--grey-darken-2);
	--icon-active-color: var(--grey-darken-4);
	--icon-primary-color: var(--p-primary-color);
	--icon-error-color: var(--p-error-color);
	--icon-success-color: var(--p-success-color);
	--icon-warning-color: var(--p-warn-color);
	--icon-on-dark-color: var(--white);
	--icon-on-light-color: var(--grey-darken-3);
	--icon-on-primary-color: var(--primary-on-color);
	--icon-info-color: var(--p-info-color);
	--icon-chat-color: var(--p-chat-color);
	--icon-transfer-color: var(--p-transfer-color);
	--icon-job-color: var(--p-task-color);
	--icon-disabled-color: var(--grey-lighten-4);
}
:root.theme--dark[data-v-7a451ace] {
	--icon-color: var(--grey-lighten-2);
	--icon-active-color: var(--grey-lighten-4);
	--icon-disabled-color: var(--grey-darken-2);
}
[data-v-7a451ace]:root {
	--wt-indicator-dot-size--size-sm: var(--spacing-xs);
	--wt-indicator-dot-size--size-md: var(--spacing-sm);
	--wt-indicator-dot-size: var(--wt-indicator-size--size-md);
	--wt-indicator-dot-offset: var(--spacing-2xs);

	--wt-indicator-text-margin: var(--spacing-2xs);

	--wt-indicator-text-color: var(--text-main-color);
	--wt-indicator-primary-color: var(--primary-color);
	--wt-indicator-secondary-color: var(--grey-lighten-3);
	--wt-indicator-disabled-color: var(--grey-lighten-4);
	--wt-indicator-success-color: var(--success-color);
	--wt-indicator-error-color: var(--error-color);
	--wt-indicator-transfer-color: var(--transfer-color);
	--wt-indicator-break-out-color: var(--warning-color);
	--wt-indicator-info-color: var(--info-color);
	--wt-indicator-final-status-color: var(--green-accent-4);
	--wt-indicator-initial-status-color: var(--red-accent-2);
	--wt-indicator-other-status-color: var(--orange-accent-2);
}
:root.theme--dark[data-v-7a451ace] {
	--wt-indicator-secondary-color: var(--grey-darken-1);
	--wt-indicator-disabled-color: var(--grey-darken-2);
}
[data-v-7a451ace]:root {
	--input-padding: calc(var(--spacing-xs) - 1px); /* - border */
	--input-border: 1px solid;
	--input-icon-margin: var(--spacing-xs);

	--input-after-wrapper-gap: var(--spacing-2xs);
}
[data-v-7a451ace]:root {
	--wt-item-link-text-color: var(--text-main-color);
}
[data-v-7a451ace]:root {
	--wt-label-padding: var(--spacing-2xs) var(--spacing-xs);

	--wt-label-color: var(--p-form-field-color);
	--wt-label-error-color: var(--p-error-color);
	--wt-label-disabled-color: var(--p-form-field-disabled-color);
}
[data-v-7a451ace]:root {
	--load-bar-height: 6px;
	--load-bar-padding: 1px;
	--load-bar-border-radius: 50px;

	--wt-load-bar-primary-color: var(--primary-on-color);
	--wt-load-bar-error-color: var(--p-error-color);
	--wt-load-bar-warning-color: var(--p-warn-color);
	--wt-load-bar-success-color: var(--p-success-color);
	--wt-load-bar-info-color: var(--p-info-color);
}
[data-v-7a451ace]:root {
	--loader-size: 44px;
	--loader-dot-size: 6px;
	--loader-animation-duration: 3s;

	--wt-loader-md-path-color: var(--grey-darken-2);
	--wt-loader-md-point-color: var(--primary-color);

	--wt-loader-sm-path-main-color: var(--grey-darken-2);
	--wt-loader-sm-path-icon-color: var(--icon-color);
	--wt-loader-sm-path-on-light-color: var(--icon-on-light-color);
	--wt-loader-sm-path-on-dark-color: var(--icon-on-dark-color);
}
:root.theme--dark[data-v-7a451ace] {
	--wt-loader-md-path-color: var(--grey-lighten-2);

	--wt-loader-sm-path-main-color: var(--grey-lighten-2);
}
[data-v-7a451ace]:root {
	--wt-logo-width: 84px;
	--wt-logo-height: 16px;
}
[data-v-7a451ace]:root {
	--wt-navigation-bar-width: 340px;
	--wt-navigation-bar-z-index: 10;
	--wt-navigation-bar-padding: var(--spacing-sm);

	--wt-navigation-bar-header-padding: var(--spacing-xs);
	--wt-navigation-bar-app-pic-height: 24px;

	--wt-navigation-bar-list-padding: var(--wt-navigation-bar-padding);
	--wt-navigation-bar-link-padding: var(--wt-navigation-bar-padding);
	--wt-navigation-bar-subnav-padding-left: var(--spacing-lg);
	--wt-navigation-bar-active-expansion-flag-width: 5px;
	--wt-navigation-bar-active-expansion-name-max-width: calc(
		100% -
		var(--icon-md-size) -
		var(--spacing-xs)
	);

	--wt-navigation-bar-background-color: var(--dp-18-surface-color);
	--wt-navigation-bar-option-text-color: var(--text-main-color);
	--wt-navigation-bar-option-text-active-color: var(--primary-on-color);
	--wt-navigation-bar-option-background-color: var(
		--wt-navigation-bar-background-color
	);
	--wt-navigation-bar-option-background-hover-color: var(--dp-20-surface-color);
	--wt-navigation-bar-option-background-active-color: var(
		--primary-light-color
	);
	--wt-navigation-bar-expansion-ribbon-color: var(--primary-color);
}
[data-v-7a451ace]:root {
	--notifications-bar-max-height: 60%;
	--notifications-bar-corner-margin: var(--spacing-sm);
	--notifications-bar-notifications-margin: 0 0 var(--spacing-xs) auto;
	--notifications-bar-z-index: 101;
}
[data-v-7a451ace]:root {
	--page-wrapper-padding: var(--spacing-sm);
	--page-wrapper-section-padding: var(--spacing-sm);
	--page-wrapper-section-gap: var(--spacing-sm);

	--wt-page-wrapper-background-color: var(--p-surface-50);
	--wt-page-wrapper-content-wrapper-color: var(--content-wrapper-color);
	/* --content-wrapper-border-radius: var(--p-border-radius-lg); */
}
:root.theme--dark[data-v-7a451ace] {
	--wt-page-wrapper-background-color: var(--p-surface-850);
}
[data-v-7a451ace]:root {
	--pagination-gap: var(--spacing-xs);
	--pagination-size-input-width: 100px;
}
.wt-player[data-v-7a451ace] {
	--plyr-color-main: var(--primary-color);
	--plyr-audio-control-color: var(--icon-color);
	--plyr-audio-control-color-hover: var(--icon-btn-hover-color);
	--plyr-audio-controls-background: var(--content-wrapper-color);
	--plyr-controls-icon-size: var(--icon-sm-size);
	--plyr-controls-icon-padding: var(--spacing-2xs);
	--plyr-audio-control-background-hover: transparent;
	--plyr-audio-progress-buffered-background: var(
		--dp-14-surface-color
	); /* loaded color */
	--wt-player-audio-progress-background: var(
		--wt-slider-background-color
	); /* not played color */
	--plyr-tooltip-background: var(--wt-tooltip-background-color);
	--plyr-tooltip-color: var(--wt-tooltip-text-color);
	/* --plyr-control-toggle-checked-background: var(--main-color); */
	--player-close-icon-transform-translate-x: var(--spacing-md);
	/* "-1 * var" for use the negative value of a variable */
	--player-close-icon-transform-translate-y: calc(-1 * var(--spacing-md));

	--wt-slider-border: 1px solid var(--secondary-color);
	--wt-slider-pointer-radius: 50%;
	--wt-slider-pointer-background-color: var(--dp-24-surface-color);
	--wt-slider-pointer-border-color: var(--dp-10-surface-color);
	--wt-slider-pointer-size: 16px;
}
[data-v-7a451ace]:root {
	--popup-wrapper-z-index: 12;

	--popup-shadow-opacity: 0.8;
	--wt-popup-shadow-color: hsla(0, 0%, 0%, var(--popup-shadow-opacity));

	--wt-popup-size-xs: 300px;
	--wt-popup-size-sm: 500px;
	--wt-popup-size-md: 800px;
	--wt-popup-size-lg: 1140px;

	--popup-max-height: 90%;

	--wt-popup-background-color: var(--dp-24-surface-color);
	--popup-sections-gap: var(--spacing-xs);
	--popup-padding: var(--spacing-sm);

	--popup-header-padding: var(--spacing-xs);
	--wt-popup-header-background-color: var(--dp-18-surface-color);
	--wt-popup-header-text-color: var(--text-main-color);

	--popup-main-section-padding-right: var(--spacing-xs); /* scroll offset */

	--popup-actions-padding: var(--spacing-xs);
}
[data-v-7a451ace]:root {
	--wt-progress-bar-height: 12px;
	--wt-progress-bar-padding: var(--spacing-3xs);
	--wt-progress-bar-border-radius: var(--wt-progress-bar-padding);

	--wt-progress-bar-background-color: var(--dp-1-surface-color);
	--wt-progress-bar-background-primary-color: var(--primary-color);
	--wt-progress-bar-background-secondary-color: var(--dp-20-surface-color);
	--wt-progress-bar-background-success-color: var(--success-color);
	--wt-progress-bar-background-error-color: var(--error-color);
	--wt-progress-bar-background-warning-color: var(--warning-color);
}
[data-v-7a451ace]:root {
	--radio-icon-margin: var(--spacing-xs);
	--radio-checkmark-size: 18px;
	--radio-bullet-size: 8px;
	--radio-border: 2px solid;
}
[data-v-7a451ace]:root {
	--rounded-action-border-size: 2px;
	--rounded-action-padding: calc(
		var(--spacing-xs) -
		var(--rounded-action-border-size)
	);

	--rounded-action-rounded-border-radius: var(--border-radius--pill);

	--rounded-action-bg-color: var(--dp-18-surface-color);
	--rounded-action-bg-hover-color: var(--dp-20-surface-color);

	--rounded-action-active-color: var(--dp-10-surface-color);
}
[data-v-7a451ace]:root {
	--wt-search-bar-width: 270px;
}
[data-v-7a451ace]:root {
	--wt-slider-pointer-size: 16px;
	--wt-slider-height: var(--wt-slider-pointer-size);

	--wt-slider-width: 100%;
	--wt-slider-input-height: 8px;
	--wt-slider-border: 1px solid var(--secondary-color);
	--wt-slider-background-color: var(--dp-1-surface-color);
	--wt-slider-background-completed-color: var(--primary-color);

	--wt-slider-pointer-background-color: var(--dp-24-surface-color);
	--wt-slider-pointer-background-hover-color: var(--dp-22-surface-color);
	--wt-slider-pointer-border-color: var(--dp-10-surface-color);

	--wt-slider-pointer-radius: 50%;

	--wt-slider-vertical-container-translation: translate(2px);
	--wt-slider-vertical-transform: translate(-100%, 0) rotate(-90deg);
	--wt-slider-vertical-transform-origin: 100% 0;
}
[data-v-7a451ace]:root {
	--wt-status-select-padding: 0 calc(var(--icon-size-md) + var(--spacing-xs)) 0
		0; /* reset wt-select padding, but preserve arrow icon padding */

	--wt-status-select-option-text-color: var(--text-main-color);
	--wt-status-select-option-background-color: var(--dp-22-surface-color);
	--wt-status-select-option-background-hover-color: var(
		--secondary-light-color
	);
	/* --wt-status-select-option-background-selected-color: var(--primary-light-color); */

	--wt-status-select-background-color: var(
		--wt-status-select-option-background-color
	);
}
[data-v-7a451ace]:root {
	--wt-stepper-divider-background-color: var(--secondary-color);
	--wt-stepper-divider-background-completed-color: var(--primary-color);
}
[data-v-7a451ace]:root {
	--switcher-icon-margin: var(--spacing-xs);
	--switcher-width: 40px;
	--switcher-height: 22px;
	--switcher-cicle-size: 14px;
	--switcher-cicle-margin: 4px;
	--switcher-cicle-translateX: 17px;
	--switcher-border-radius: 24px;
	/* circle */
	--wt-switcher-circle-background-color-on: var(--grey-darken-3);
	--wt-switcher-circle-background-color-on-hover: var(--grey-darken-4);
	--wt-switcher-circle-background-color-on-disabled: var(--grey-lighten-3);

	--wt-switcher-circle-background-color-off: var(--grey-lighten-4);
	--wt-switcher-circle-background-color-off-hover: var(--grey-lighten-5);
	--wt-switcher-circle-background-color-off-disabled: var(--grey-lighten-3);
	/* background */
	--wt-switcher-background-color-on: var(--primary-color);
	--wt-switcher-background-color-on-hover: var(--primary-hover-color);
	--wt-switcher-background-color-on-disabled: var(--primary-light-color);

	--wt-switcher-background-color-off: var(--grey-darken-2);
	--wt-switcher-background-color-off-hover: var(--grey-darken-1);
	--wt-switcher-background-color-off-disabled: var(--grey-lighten-4);
}
:root.theme--dark[data-v-7a451ace] {
	/* circle */
	--wt-switcher-circle-background-color-off: var(--grey-darken-4);
	--wt-switcher-circle-background-color-off-hover: var(--grey-darken-3);
	--wt-switcher-circle-background-color-off-disabled: var(--grey-darken-3);
	/* background */
	--wt-switcher-background-color-off: var(--grey-lighten-1);
	--wt-switcher-background-color-off-hover: var(--grey-lighten-2);
	--wt-switcher-background-color-off-disabled: var(--grey-darken-2);
}
[data-v-7a451ace]:root {
	--table-actions-padding: var(--spacing-xs);
	--table-actions-icon-gap: var(--spacing-xs);
}
[data-v-7a451ace]:root {
	--table-col-min-width: 140px;

	--table-head-sort-arrow-margin: var(--spacing-xs);
	--table-head-border: 1px solid;

	--table-min-height: 24px; /* 24px icon size or body-1 lh */
	--table-column-gap: var(--spacing-xs);
	--table-row-padding: var(--spacing-xs);

	--wt-table-head-border-color: var(--grey-lighten-1);
	--wt-table-head-background-color: var(--content-wrapper-color);
	--wt-table-primary-color: var(--content-wrapper-color);
	--wt-table-zebra-color: var(--dp-18-surface-color);
}
:root.theme--dark[data-v-7a451ace] {
	--wt-table-head-border-color: var(--grey-darken-1);
}
[data-v-7a451ace]:root {
	--tabs-underiline-height: 1px;
	--tabs-underiline-color: transparent;

	--tab-padding: var(--spacing-2xs);
	--tab-gap: var(--spacing-xs);
	--wt-tabs-text-color: var(--text-main-color);
	--wt-tabs-text-hover-color: var(--wt-tabs-text-color);
	--wt-tabs-text-active-color: var(--wt-tabs-text-color);
	--tab-border: 4px solid;
	--wt-tabs-underline-active-color: var(--primary-color);
	--tab-z-index: 1;
}
[data-v-7a451ace]:root {
	--textarea-min-height: 100px;
	--textarea-padding: var(--input-padding);
}
[data-v-7a451ace]:root {
	--timepicker-input-width: 80px;
	--timepicker-input-margin: var(--spacing-xs);
}
[data-v-7a451ace]:root {
	--tooltip-padding: var(--spacing-2xs) var(--spacing-xs);

	--wt-tooltip-text-color: var(--text-main-color);
	--wt-tooltip-background-color: var(--dp-24-surface-color);

	--tooltip-elevation: var(--elevation-10);
}
[data-v-7a451ace]:root {
	--wt-tree-item-active: var(--primary-light-color);
	--wt-tree-item-active-on: var(--grey-darken-4);

	--wt-tree-item-searched: var(--light-blue-lighten-4);
	--wt-tree-item-searched-on: var(--grey-darken-4);

	--wt-tree-item: var(--primary-light-color);
	--wt-tree-item-on: var(--grey-darken-1);

	--wt-tree-item-hover: var(--dp-24-surface-color);
	--wt-tree-item-hover-on: var(--grey-darken-1);
}
:root.theme--dark[data-v-7a451ace] {
	--wt-tree-item-active: var(--primary-light-color);
	--wt-tree-item-active-on: var(--grey-lighten-4);

	--wt-tree-item-searched: var(--light-blue-lighten-2);
	--wt-tree-item-searched-on: var(--grey-darken-4);

	--wt-tree-item: var(--primary-light-color);
	--wt-tree-item-on: var(--grey-lighten-3);

	--wt-tree-item-hover-on: var(--grey-lighten-3);
}
[data-v-7a451ace]:root {
	--wt-tree-table-col-min-witdh: var(--table-col-min-width);

	--wt-tree-table-head-sort-arrow-margin: var(--table-head-sort-arrow-margin);
	--wt-tree-table-head-border: var(--table-head-border);

	--wt-tree-table-min-height: var(--table-min-height);
	--wt-tree-table-column-gap: var(--table-column-gap);
	--wt-tree-table-row-padding: var(--table-row-padding);

	--wt-tree-table-head-border-color: var(--wt-table-head-border-color);
	--wt-tree-table-head-background-color: var(--wt-table-head-background-color);
	--wt-tree-table-primary-color: var(--wt-table-primary-color);
	--wt-tree-table-zebra-color: var(--wt-table-zebra-color);
}
:root.theme--dark[data-v-7a451ace] {
	--wt-tree-table-head-border-color: var(--wt-table-head-border-color);
}
[data-v-7a451ace]:root {
	--content-wrapper-padding: var(--spacing-xs);
	--content-wrapper-gap: var(--spacing-xs);
}
.table-page.wt-page-wrapper[data-v-7a451ace] {
	width: 100%;
	height: 100%;
}
.table-page .wt-page-wrapper__main[data-v-7a451ace],

.wt-page-wrapper__main[data-v-7a451ace]:has(.table-section) {
	min-height: 0;
}
.table-section[data-v-7a451ace] {
	display: flex;
	flex-direction: column;
	width: 100%;
	flex: 1;
	min-height: 0;
}
.table-section__table-wrapper[data-v-7a451ace] {
	display: flex;
	flex: 1 1 100%;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	min-height: 0;
	gap: var(--spacing-sm);
}
.table-section__table-wrapper .table-wrapper__visible-scroll-wrapper[data-v-7a451ace] {
	flex-grow: 1;
}
.table-section__table-wrapper .wt-pagination[data-v-7a451ace] {
	margin-top: auto;
}
.table-section__visible-scroll-wrapper[data-v-7a451ace] {
	overflow: visible;
	height: 100%;
}
.table-section__visible-scroll-wrapper .wt-table[data-v-7a451ace] {
	overflow: visible;
}
.table-title[data-v-7a451ace] {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: var(--spacing-sm) 0;
}
.table-title__title[data-v-7a451ace] {
	font-family: "Montserrat", monospace;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-transform: none;
}
.table-title__title + .hint[data-v-7a451ace] {
	top: -2px;
}
.table-title__actions-wrap[data-v-7a451ace] {
	display: flex;
	align-items: center;
	gap: var(--table-actions-icon-gap);
}
.main-section-wrapper .wt-loader.wt-brand-loader[data-v-7a451ace] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 1;
}
.table-wrapper--tab-table[data-v-7a451ace] {
	position: relative;
}
.table-wrapper--tab-table .wt-loader.wt-brand-loader[data-v-7a451ace] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 1;
}
.table-wrapper--tab-table .table-loading-wrapper[data-v-7a451ace] {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	min-height: 0;
}
.opened-card[data-v-7a451ace] {
	width: 100%;
}
.opened-card.wt-page-wrapper[data-v-7a451ace],
.opened-card.wt-dual-panel[data-v-7a451ace] {
	width: 100%;
}
.opened-card-tabs[data-v-7a451ace] {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: var(--spacing-sm);
}
.opened-card-tabs__tab[data-v-7a451ace] {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: var(--spacing-sm);
	min-height: 0;
}
.opened-card-header[data-v-7a451ace] {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin: var(--spacing-sm) 0;
}
.opened-card-header__title[data-v-7a451ace] {
	font-family: "Montserrat", monospace;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-transform: none;
}
.opened-card-header__title + .hint[data-v-7a451ace] {
	top: -2px;
}
.opened-card-form[data-v-7a451ace] {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.opened-card-input-grid[data-v-7a451ace] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: minmax(auto, auto);
	align-items: flex-start;
	grid-column-gap: var(--spacing-sm);
	grid-row-gap: var(--spacing-sm);
}
.opened-card-input-grid--1-col[data-v-7a451ace] {
	grid-template-columns: 1fr;
}
.opened-card-input-grid--w50[data-v-7a451ace] {
	width: 50%;
}
.opened-card-input-grid--w100[data-v-7a451ace] {
	width: 100%;
}
/*
	@author HlukhovYe
	layer needed beacuse of manipulating primevue's default typography
	https://webitel.atlassian.net/browse/WTEL-8775?focusedCommentId=723773
*/
@layer wt-default {
[data-v-7a451ace]:root {
    --transition: 0.2s;
    --box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    /* viewport breakpoints */
    --viewport-lg: 1904px;
    --viewport-md: 1264px;
    --viewport-sm: 960px;
    --viewport-xs: 600px;
}
html[data-v-7a451ace] {
    height: 100%;
    font-size: 16px;
}
body[data-v-7a451ace] {
    font-family: "Montserrat", monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-transform: none;
    margin: 0;
    height: 100%;
    min-height: 100%;
}
[data-v-7a451ace] {
    box-sizing: border-box;
}
.theme--dark body[data-v-7a451ace] {
    color-scheme: dark;
}
h1[data-v-7a451ace],
  h2[data-v-7a451ace],
  h3[data-v-7a451ace],
  h4[data-v-7a451ace],
  h5[data-v-7a451ace],
  h6[data-v-7a451ace],
  p[data-v-7a451ace] {
    margin: 0;
    font-weight: normal;
}
  /* reset ul styles */
ul[data-v-7a451ace] {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
iframe[data-v-7a451ace] {
    outline: none;
    border: none;
}
a[data-v-7a451ace] {
    color: #000;
    text-decoration: none;
}
.hidden[data-v-7a451ace] {
    opacity: 0;
    pointer-events: none;
}
}
/*
	@author HlukhovYe
	reset input autofill styles https://webitel.atlassian.net/browse/WTEL-9005
*/
input[data-v-7a451ace]:-webkit-autofill,
input[data-v-7a451ace]:-webkit-autofill:hover,
input[data-v-7a451ace]:-webkit-autofill:focus,
textarea[data-v-7a451ace]:-webkit-autofill,
textarea[data-v-7a451ace]:-webkit-autofill:hover,
textarea[data-v-7a451ace]:-webkit-autofill:focus,
select[data-v-7a451ace]:-webkit-autofill,
select[data-v-7a451ace]:-webkit-autofill:hover,
select[data-v-7a451ace]:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--p-inputtext-color);
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s; /* prevents an immediate color change */
}

/* https://github.com/Akryum/floating-vue/issues/488 */
.v-popper__arrow-container[data-v-7a451ace] {
  display: none;
}
#wt-flow-diagram[data-v-7a451ace] {
  --flow-light-level-12: 90%;
  --flow-icon-header-disabled-color: var(--grey-lighten-2);
  --flow-text-main-color: var(--black);
  --flow-text-tab-color: var(--black);
  --flow-connection-default-color: var(--black);
  --flow-connection-active-color: var(--black);
  --flow-on-dark-text-color: var(--grey-lighten-5);
  --flow-on-light-text-color: var(--grey-darken-3);
  --flow-conection-point-color: var(--dp-22-surface-color);
  --flow-conection-point-border-color: var(--dp-16-surface-color);
  --flow-connection-color: var(--grey-darken-1);
  --flow-connection-goto-color: var(--red-accent-2);
  --flow-connection-failover-color: var(--red-accent-2);
  --flow-connection-selected-color: var(--red-accent-4);
  --flow-calendar-header-bg-color: var(--cyan-lighten-3);
  --flow-execute-header-bg-color: var(--orange-lighten-2);
  --flow-function-header-bg-color: var(--orange-lighten-2);
  --flow-goto-header-bg-color: var(--red-darken-1);
  --flow-if-header-bg-color: var(--pink-lighten-2);
  --flow-i-frame-header-bg-color: var(--blue-lighten-1);
  --flow-js-header-bg-color: var(--amber-accent-3);
  --flow-math-header-bg-color: var(--deep-orange-accent-2);
  --flow-string-header-bg-color: var(--light-green-darken-3);
  --flow-mark-ivr-header-bg-color: var(--pink-accent-2);
  --flow-soft-sleep-header-bg-color: var(--light-blue-lighten-1);
  --flow-set-grantee-header-bg-color: var(--yellow-darken-2);
  --flow-schema-header-bg-color: var(--deep-orange-lighten-3);
  --flow-log-header-bg-color: var(--amber-lighten-1);
  --flow-start-header-bg-color: var(--green-darken-3);
  --flow-switch-header-bg-color: var(--purple-lighten-1);
  --flow-trigger-header-bg-color: var(--red-lighten-1);
  --flow-http-header-bg-color: var(--pink-lighten-2);
  --flow-custom-code-header-bg-color: var(--grey-lighten-4);
  --flow-export-var-header-bg-color: var(--indigo-lighten-3);
  --flow-set-var-header-bg-color: var(--amber-lighten-1);
  --flow-un-set-var-header-bg-color: var(--orange-lighten-3);
  --flow-list-header-bg-color: var(--light-blue-darken-3);
  --flow-list-add-header-bg-color: var(--light-blue-darken-1);
  --flow-get-email-header-bg-color: var(--cyan-darken-4);
  --flow-playback-header-bg-color: var(--orange-lighten-1);
  --flow-ring-ready-header-bg-color: var(--green-darken-3);
  --flow-pre-answer-header-bg-color: var(--green-darken-3);
  --flow-answer-header-bg-color: var(--green-darken-3);
  --flow-hangup-header-bg-color: var(--deep-orange-darken-2);
  --flow-sip-redirect-header-bg-color: var(--amber-lighten-3);
  --flow-ringback-header-bg-color: var(--green-darken-3);
  --flow-bridge-header-bg-color: var(--orange-lighten-2);
  --flow-conference-header-bg-color: var(--cyan-lighten-3);
  --flow-generate-link-header-bg-color: var(--indigo-accent-2);
  --flow-in-band-dtmf-header-bg-color: var(--yellow-lighten-2);
  --flow-flush-dtmf-header-bg-color: var(--pink-lighten-2);
  --flow-update-cid-header-bg-color: var(--orange-lighten-2);
  --flow-park-header-bg-color: var(--cyan-lighten-3);
  --flow-join-queue-header-bg-color: var(--deep-orange-lighten-1);
  --flow-record-file-header-bg-color: var(--green-lighten-3);
  --flow-record-session-header-bg-color: var(--green-lighten-2);
  --flow-tts-header-bg-color: var(--purple-darken-1);
  --flow-recv-message-header-bg-color: var(--blue-accent-4);
  --flow-send-text-header-bg-color: var(--orange-accent-3);
  --flow-send-tts-header-bg-color: var(--purple-darken-1);
  --flow-send-file-header-bg-color: var(--purple-accent-3);
  --flow-stt-header-bg-color: var(--orange-lighten-1);
  --flow-send-email-header-bg-color: var(--deep-orange-accent-2);
  --flow-send-message-header-bg-color: var(--blue-darken-1);
  --flow-broadcast-chat-message-header-bg-color: var(--blue-darken-2);
  --flow-classifier-header-bg-color: var(--deep-purple-lighten-2);
  --flow-menu-header-bg-color: var(--amber-lighten-3);
  --flow-plata-by-mono-header-bg-color: var(--deep-purple-darken-1);
  --flow-user-info-header-bg-color: var(--green-darken-2);
  --flow-member-info-header-bg-color: var(--purple-lighten-1);
  --flow-get-queue-agents-header-bg-color: var(--indigo-lighten-2);
  --flow-join-agent-header-bg-color: var(--deep-purple-lighten-2);
  --flow-callback-queue-header-bg-color: var(--lime-darken-2);
  --flow-patch-members-header-bg-color: var(--purple-lighten-1);
  --flow-form-textfield-header-bg-color: var(--light-blue-accent-4);
  --flow-form-text-header-bg-color: var(--light-blue-lighten-3);
  --flow-form-table-header-bg-color: var(--cyan-darken-2);
  --flow-form-select-header-bg-color: var(--light-blue-lighten-1);
  --flow-open-link-header-bg-color: var(--blue-lighten-1);
  --flow-form-select-service-header-bg-color: var(--amber-lighten-1);
  --flow-form-select-case-status-header-bg-color: var(--amber-lighten-1);
  --flow-form-datetime-picker-header-bg-color: var(--blue-lighten-2);
  --flow-form-rich-text-editor-header-bg-color: var(--light-blue-darken-4);
  --flow-generate-form-header-bg-color: var(--blue-accent-4);
  --flow-make-call-header-bg-color: var(--light-green-darken-4);
  --flow-form-select-from-object-header-bg-color: var(--indigo-lighten-1);
  --flow-attempt-result-header-bg-color: var(--red-lighten-2);
  --flow-form-file-header-bg-color: var(--blue-lighten-2);
  --flow-chat-history-header-bg-color: var(--amber-accent-2);
  --flow-while-header-bg-color: var(--deep-purple-darken-4);
  --flow-chat-ai-header-bg-color: var(--lime-darken-3);
  --flow-notification-header-bg-color: var(--pink-lighten-1);
  --flow-custom-module-header-bg-color: var(--deep-purple-darken-3);
}
.theme--dark #wt-flow-diagram[data-v-7a451ace] {
  --flow-icon-header-disabled-color: var(--grey-darken-3);
  --flow-text-main-color: var(--white);
  --flow-text-tab-color: var(--white);
  --flow-connection-default-color: var(--white);
  --flow-connection-active-color: var(--black);
}
.config-form-grid[data-v-7a451ace], .config-form[data-v-7a451ace] {
  display: grid;
  grid-row-gap: var(--spacing-xs);
}
.p-toggleswitch[data-v-7a451ace] {
  flex-shrink: 0;
}

/*
xl: @media only screen and (min-width: $viewport-xl) {}
lg: @media only screen and (max-width: $viewport-xl) {}
md: @media only screen and (max-width: $viewport-lg) {}
sm: @media only screen and (max-width: $viewport-md) {}
xs: @media only screen and (max-width: $viewport-sm) {}
 */
#wt-flow-diagram[data-v-7a451ace] {
  /* В компоненті `key-value-pair` присутні компоненти з бібліотеки `webitel.ui`,
   наприклад, `<wt-input-text>`, margin яких = 10px, тому у даному випадку я використав
   змінну `--body-block-margin` , яка також = 10px.
  Можна працювати по нових спейсінгах, але треба переписати компоненти, які є в бібліотеці*/
  --body-block-margin: 10px;
  --workspace-content-offset-top: var(--spacing-xs);
  --workspace-content-offset-bottom: var(--spacing-xs);
  --workspace-content-offset-side: var(--spacing-xs);
  --nodes-panel-width: 260px;
  --config-panel-width: -16px;
  --min-flow-toolbar-width: 491px;
  --flow-toolbar-height: 40px;
  --flow-pages-height: 56px;
  --zoom-panel-width: 227px;
  --zoom-panel-height: calc(2 * var(--spacing-sm) + var(--icon-md-size));
}
@media only screen and (max-width: 960px) {
#wt-flow-diagram[data-v-7a451ace] {
    --flow-toolbar-height: 40px;
}
}
@media only screen and (max-width: 600px) {
#wt-flow-diagram[data-v-7a451ace] {
    --flow-toolbar-height: 40px;
}
}
#wt-flow-diagram[data-v-7a451ace] {
  --elevation-1: 0px 1px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-2: 0px 2px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-3: 0px 3px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-4: 0px 4px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-5: 0px 5px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-6: 0px 6px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-7: 0px 7px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-8: 0px 8px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-9: 0px 9px 10px hsla(0, 0%, 0%, 0.15);
  --elevation-10: 0px 10px 10px hsla(0, 0%, 0%, 0.15);
}
body[data-v-7a451ace],
html[data-v-7a451ace] {
  margin: 0;
  height: 100%;
  color: var(--text-main-color);
}
.workspace-container[data-v-7a451ace] {
  background-color: var(--wt-page-wrapper-background-color);
}
.editor__expand-action[data-v-7a451ace] {
  cursor: pointer;
  margin-left: var(--spacing-2xs);
}
.editor--expanded[data-v-7a451ace] {
  position: fixed;
  right: calc(var(--config-panel-width) + var(--workspace-content-offset-side) + var(--spacing-sm));
  bottom: var(--workspace-content-offset-bottom);
  z-index: 1;
  box-shadow: var(--elevation-5);
  border: 1px solid var(--secondary-color);
  border-radius: var(--border-radius);
  background-color: var(--content-wrapper-color);
  width: calc(100vw - (4 * var(--workspace-content-offset-side) + var(--nodes-panel-width) + var(--config-panel-width)));
  height: auto;
}
.editor--expanded.code-editor .code-editor__label[data-v-7a451ace], .editor--expanded.text-editor[data-v-7a451ace] .wt-label {
  margin-bottom: 0;
  border-bottom: 1px solid var(--secondary-color);
  padding: var(--spacing-xs);
}
.editor--expanded.code-editor .code-editor__editor[data-v-7a451ace] .codeflask, .editor--expanded.text-editor[data-v-7a451ace] .wt-textarea__textarea {
  box-shadow: none;
  border: none;
}
.editor--expanded.code-editor .code-editor-wrapper[data-v-7a451ace], .editor--expanded.text-editor[data-v-7a451ace] .wt-textarea__textarea {
  height: 400px;
}
.code-editor__label[data-v-7a451ace] {
  display: flex;
  justify-content: space-between;
}
.code-editor__label .code-editor__label-text[data-v-7a451ace] {
  display: flex;
  align-items: center;
}
.code-editor__label .wt-chip[data-v-7a451ace] {
  white-space: nowrap;
}
.code-editor-wrapper[data-v-7a451ace] {
  position: relative;
  height: 200px;
}
.code-editor-wrapper__error[data-v-7a451ace] {
  display: flex;
  grid-gap: var(--spacing-xs);
  position: absolute;
  z-index: 3;
  bottom: 4px;
  left: 4px;
  width: auto;
  min-width: auto;
  padding: 0;
  background-color: transparent;
  box-shadow: none;
}
.code-editor-wrapper .code-editor__editor[data-v-7a451ace] .codeflask {
  border: 1px solid var(--secondary-color);
  border-radius: var(--border-radius);
  box-shadow: var(--elevation-5);
}
.code-editor-wrapper .code-editor__editor[data-v-7a451ace] .codeflask__textarea {
  transition: var(--transition);
  color: var(--wt-text-field-placeholder-color);
  cursor: auto;
  /*
  The class is not ours, and has the styles which override a font-family,
  therefore I used font-family: inherit that the font was as in Admin app
  */
  font-family: inherit;
  caret-color: var(--wt-text-field-placeholder-color);
  background: var(--content-wrapper-color);
}
.code-editor-wrapper .code-editor__editor[data-v-7a451ace] .codeflask__pre {
  /*
  The class is not ours, and has the styles which override a font-family,
  therefore I used font-family: inherit that the font was as in Admin app
  */
  font-family: inherit;
  color: var(--text-main-color);
}
.code-editor-wrapper .code-editor__editor[data-v-7a451ace] .codeflask__code {
  /*
  The class is not ours, and has the styles which override a font-family,
  therefore I used font-family: inherit that the font was as in Admin app
  */
  font-family: inherit;
}
@layer wt-default, base, primevue, wt-typography;
/* 
	@author Palonnyi Oleksandr
	Must be first — locks cascade layer priority 
	before any content is loaded: wt-default < base < primevue < wt-typography.
	[WTEL-9107](https://webitel.atlassian.net/browse/WTEL-9107)

	link for complex comment https://webitel.atlassian.net/browse/WTEL-9107?focusedCommentId=740565
*/
[data-v-bdbe168f]:root {
	--scrollbar-width: 10px;
	--scrollbar-height: 10px;
	--scrollbar-thumb-width: 10px;
	--scrollbar-bg-color: var(--p-surface-50);
	--scrollbar-thumb-color: var(--p-surface-150);
	--scrollbar-hover-thumb-color: var(--p-surface-250);
	--scrollbar-border-radius: var(--border-radius);
}
:root.theme--dark[data-v-bdbe168f] {
	--scrollbar-bg-color: var(--p-surface-850);
	--scrollbar-thumb-color: var(--p-surface-700);
	--scrollbar-hover-thumb-color: var(--p-surface-800);
}
.wt-scrollbar[data-v-bdbe168f] {
	/* scrollbar itself */
}
.wt-scrollbar[data-v-bdbe168f]::-webkit-scrollbar {
	width: var(--scrollbar-width);
	height: var(--scrollbar-height);
	cursor: pointer;
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-bg-color);
}

/* scrollable element */
.wt-scrollbar[data-v-bdbe168f]::-webkit-scrollbar-thumb {
	width: var(--scrollbar-thumb-width);
	height: var(--scrollbar-thumb-height);
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-thumb-color);
}
.wt-scrollbar[data-v-bdbe168f]::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-hover-thumb-color);
}
.wt-distant-scrollbar[data-v-bdbe168f]::-webkit-scrollbar {
	width: 14px;
	height: 18px;
	background-color: var(--scrollbar-bg-color);
}
.wt-distant-scrollbar[data-v-bdbe168f]::-webkit-scrollbar-thumb {
	height: 2px;
	border: 4px solid rgba(0, 0, 0, 0);
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-thumb-color);
	background-clip: padding-box;
	/* -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05); */
}
[data-v-bdbe168f]:root {
	--border-radius: var(--spacing-2xs);
	--border-radius--pill: 50px;
}
/*
NOTE:   text-transform: none; is set explicitly cause t-t is inherited from parent
 */

/* 
	@author HlukhovYe
	layer needed for overriding primevue's default typography for the components
	https://webitel.atlassian.net/browse/WTEL-8775?focusedCommentId=723773
*/
@layer wt-typography {
.typo-heading-1[data-v-bdbe168f] {
		font-family: "Montserrat", monospace;
		font-size: 32px;
		font-weight: 600;
		line-height: 48px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-2[data-v-bdbe168f] {
		font-family: "Montserrat", monospace;
		font-size: 24px;
		font-weight: 600;
		line-height: 40px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-3[data-v-bdbe168f] {
		font-family: "Montserrat", monospace;
		font-size: 20px;
		font-weight: 600;
		line-height: 32px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-4[data-v-bdbe168f] {
		font-family: "Montserrat", monospace;
		font-size: 16px;
		font-weight: 600;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-subtitle-1[data-v-bdbe168f] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 500;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-subtitle-2[data-v-bdbe168f] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-body-1[data-v-bdbe168f] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 400;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.56px; */
		/* 0.04em */
}
.typo-body-1-bold[data-v-bdbe168f] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 700;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.56px; */
		/* 0.04em */
}
.typo-body-2[data-v-bdbe168f] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 400;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.16px; */
		/* 0.01em */
}
.typo-body-2-bold[data-v-bdbe168f] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 700;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.16px; */
		/* 0.01em */
}
.typo-button--md[data-v-bdbe168f] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 24px;
		text-transform: uppercase;
		/* letter-spacing: 0.96px; */
		/* 0.06em */
}
.typo-button--sm[data-v-bdbe168f] {
		font-family: "Montserrat", monospace;
		font-size: 10px;
		font-weight: 500;
		line-height: 24px;
		text-transform: uppercase;
		/* letter-spacing: 0.96px; */
		/* 0.06em */
}
.typo-caption[data-v-bdbe168f] {
		font-family: "Montserrat", monospace;
		font-size: 10px;
		font-weight: 400;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.48px; */
		/* 0.03em */
}
.typo-overline[data-v-bdbe168f] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 20px;
		text-transform: uppercase;
		/* letter-spacing: 2.56px; */
		/* 0.16em */
}
}
[data-v-bdbe168f]:root {
	/* LIGHTNESS */
	--lightness-lighten-5: 95%;
	--lightness-lighten-4: 90%;
	--lightness-lighten-3: 80%;
	--lightness-lighten-2: 70%;
	--lightness-lighten-1: 60%;

	--lightness-darken-1: 50%;
	--lightness-darken-2: 45%;
	--lightness-darken-3: 40%;
	--lightness-darken-4: 35%;

	--lightness-accent-1: 75%;
	--lightness-accent-2: 65%;
	--lightness-accent-3: 50%;
	--lightness-accent-4: 40%;

	/* SATURATION */
	--saturation-lighten-5: 92%;
	--saturation-lighten-4: 88%;
	--saturation-lighten-3: 90%;
	--saturation-lighten-2: 90%;
	--saturation-lighten-1: 90%;

	--saturation-darken-1: 75%;
	--saturation-darken-2: 75%;
	--saturation-darken-3: 75%;
	--saturation-darken-4: 75%;

	--saturation-accent-1: 91%;
	--saturation-accent-2: 90%;
	--saturation-accent-3: 97%;
	--saturation-accent-4: 97%;

	/* HUE */
	--hue-red: 0;
	--hue-pink: 337;
	--hue-purple: 291;
	--hue-deep-purple: 263;
	--hue-indigo: 232;
	--hue-blue: 209;
	--hue-light-blue: 202;
	--hue-cyan: 188;
	--hue-teal: 173;
	--hue-green: 121;
	--hue-light-green: 88;
	--hue-lime: 66;
	--hue-yellow: 54;
	--hue-amber: 43;
	--hue-orange: 32;
	--hue-deep-orange: 11;

	/* RED */
	--red-lighten-5: hsla(
		var(--hue-red),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--red-lighten-4: hsla(
		var(--hue-red),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--red-lighten-3: hsla(
		var(--hue-red),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--red-lighten-2: hsla(
		var(--hue-red),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--red-lighten-1: hsla(
		var(--hue-red),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--red-darken-4: hsla(
		var(--hue-red),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--red-darken-3: hsla(
		var(--hue-red),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--red-darken-2: hsla(
		var(--hue-red),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--red-darken-1: hsla(
		var(--hue-red),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--red-accent-4: hsla(
		var(--hue-red),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--red-accent-3: hsla(
		var(--hue-red),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--red-accent-2: hsla(
		var(--hue-red),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--red-accent-1: hsla(
		var(--hue-red),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* PINK */
	--pink-lighten-5: hsla(
		var(--hue-pink),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--pink-lighten-4: hsla(
		var(--hue-pink),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--pink-lighten-3: hsla(
		var(--hue-pink),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--pink-lighten-2: hsla(
		var(--hue-pink),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--pink-lighten-1: hsla(
		var(--hue-pink),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--pink-darken-4: hsla(
		var(--hue-pink),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--pink-darken-3: hsla(
		var(--hue-pink),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--pink-darken-2: hsla(
		var(--hue-pink),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--pink-darken-1: hsla(
		var(--hue-pink),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--pink-accent-4: hsla(
		var(--hue-pink),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--pink-accent-3: hsla(
		var(--hue-pink),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--pink-accent-2: hsla(
		var(--hue-pink),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--pink-accent-1: hsla(
		var(--hue-pink),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* PURPLE */
	--purple-lighten-5: hsla(
		var(--hue-purple),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--purple-lighten-4: hsla(
		var(--hue-purple),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--purple-lighten-3: hsla(
		var(--hue-purple),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--purple-lighten-2: hsla(
		var(--hue-purple),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--purple-lighten-1: hsla(
		var(--hue-purple),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--purple-darken-4: hsla(
		var(--hue-purple),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--purple-darken-3: hsla(
		var(--hue-purple),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--purple-darken-2: hsla(
		var(--hue-purple),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--purple-darken-1: hsla(
		var(--hue-purple),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--purple-accent-4: hsla(
		var(--hue-purple),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--purple-accent-3: hsla(
		var(--hue-purple),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--purple-accent-2: hsla(
		var(--hue-purple),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--purple-accent-1: hsla(
		var(--hue-purple),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* DEEP PURPLE */
	--deep-purple-lighten-5: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--deep-purple-lighten-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--deep-purple-lighten-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--deep-purple-lighten-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--deep-purple-lighten-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--deep-purple-darken-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--deep-purple-darken-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--deep-purple-darken-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--deep-purple-darken-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--deep-purple-accent-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--deep-purple-accent-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--deep-purple-accent-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--deep-purple-accent-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* INDIGO */
	--indigo-lighten-5: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--indigo-lighten-4: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--indigo-lighten-3: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--indigo-lighten-2: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--indigo-lighten-1: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--indigo-darken-4: hsla(
		var(--hue-indigo),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--indigo-darken-3: hsla(
		var(--hue-indigo),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--indigo-darken-2: hsla(
		var(--hue-indigo),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--indigo-darken-1: hsla(
		var(--hue-indigo),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--indigo-accent-4: hsla(
		var(--hue-indigo),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--indigo-accent-3: hsla(
		var(--hue-indigo),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--indigo-accent-2: hsla(
		var(--hue-indigo),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--indigo-accent-1: hsla(
		var(--hue-indigo),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* BLUE */
	--blue-lighten-5: hsla(
		var(--hue-blue),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--blue-lighten-4: hsla(
		var(--hue-blue),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--blue-lighten-3: hsla(
		var(--hue-blue),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--blue-lighten-2: hsla(
		var(--hue-blue),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--blue-lighten-1: hsla(
		var(--hue-blue),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--blue-darken-4: hsla(
		var(--hue-blue),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--blue-darken-3: hsla(
		var(--hue-blue),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--blue-darken-2: hsla(
		var(--hue-blue),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--blue-darken-1: hsla(
		var(--hue-blue),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--blue-accent-4: hsla(
		var(--hue-blue),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--blue-accent-3: hsla(
		var(--hue-blue),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--blue-accent-2: hsla(
		var(--hue-blue),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--blue-accent-1: hsla(
		var(--hue-blue),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIGHT BLUE */
	--light-blue-lighten-5: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--light-blue-lighten-4: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--light-blue-lighten-3: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--light-blue-lighten-2: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--light-blue-lighten-1: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--light-blue-darken-4: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--light-blue-darken-3: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--light-blue-darken-2: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--light-blue-darken-1: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--light-blue-accent-4: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--light-blue-accent-3: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--light-blue-accent-2: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--light-blue-accent-1: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* CYAN */
	--cyan-lighten-5: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--cyan-lighten-4: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--cyan-lighten-3: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--cyan-lighten-2: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--cyan-lighten-1: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--cyan-darken-4: hsla(
		var(--hue-cyan),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--cyan-darken-3: hsla(
		var(--hue-cyan),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--cyan-darken-2: hsla(
		var(--hue-cyan),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--cyan-darken-1: hsla(
		var(--hue-cyan),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--cyan-accent-4: hsla(
		var(--hue-cyan),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--cyan-accent-3: hsla(
		var(--hue-cyan),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--cyan-accent-2: hsla(
		var(--hue-cyan),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--cyan-accent-1: hsla(
		var(--hue-cyan),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* TEAL */
	--teal-lighten-5: hsla(
		var(--hue-teal),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--teal-lighten-4: hsla(
		var(--hue-teal),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--teal-lighten-3: hsla(
		var(--hue-teal),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--teal-lighten-2: hsla(
		var(--hue-teal),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--teal-lighten-1: hsla(
		var(--hue-teal),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--teal-darken-4: hsla(
		var(--hue-teal),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--teal-darken-3: hsla(
		var(--hue-teal),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--teal-darken-2: hsla(
		var(--hue-teal),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--teal-darken-1: hsla(
		var(--hue-teal),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--teal-accent-4: hsla(
		var(--hue-teal),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--teal-accent-3: hsla(
		var(--hue-teal),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--teal-accent-2: hsla(
		var(--hue-teal),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--teal-accent-1: hsla(
		var(--hue-teal),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* GREEN */
	--green-lighten-5: hsla(
		var(--hue-green),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--green-lighten-4: hsla(
		var(--hue-green),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--green-lighten-3: hsla(
		var(--hue-green),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--green-lighten-2: hsla(
		var(--hue-green),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--green-lighten-1: hsla(
		var(--hue-green),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--green-darken-4: hsla(
		var(--hue-green),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--green-darken-3: hsla(
		var(--hue-green),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--green-darken-2: hsla(
		var(--hue-green),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--green-darken-1: hsla(
		var(--hue-green),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--green-accent-4: hsla(
		var(--hue-green),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--green-accent-3: hsla(
		var(--hue-green),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--green-accent-2: hsla(
		var(--hue-green),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--green-accent-1: hsla(
		var(--hue-green),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIGHT GREEN */
	--light-green-lighten-5: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--light-green-lighten-4: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--light-green-lighten-3: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--light-green-lighten-2: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--light-green-lighten-1: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--light-green-darken-4: hsla(
		var(--hue-light-green),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--light-green-darken-3: hsla(
		var(--hue-light-green),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--light-green-darken-2: hsla(
		var(--hue-light-green),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--light-green-darken-1: hsla(
		var(--hue-light-green),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--light-green-accent-4: hsla(
		var(--hue-light-green),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--light-green-accent-3: hsla(
		var(--hue-light-green),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--light-green-accent-2: hsla(
		var(--hue-light-green),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--light-green-accent-1: hsla(
		var(--hue-light-green),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIME */
	--lime-lighten-5: hsla(
		var(--hue-lime),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--lime-lighten-4: hsla(
		var(--hue-lime),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--lime-lighten-3: hsla(
		var(--hue-lime),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--lime-lighten-2: hsla(
		var(--hue-lime),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--lime-lighten-1: hsla(
		var(--hue-lime),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--lime-darken-4: hsla(
		var(--hue-lime),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--lime-darken-3: hsla(
		var(--hue-lime),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--lime-darken-2: hsla(
		var(--hue-lime),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--lime-darken-1: hsla(
		var(--hue-lime),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--lime-accent-4: hsla(
		var(--hue-lime),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--lime-accent-3: hsla(
		var(--hue-lime),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--lime-accent-2: hsla(
		var(--hue-lime),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--lime-accent-1: hsla(
		var(--hue-lime),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* yellow */
	--yellow-lighten-5: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--yellow-lighten-4: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--yellow-lighten-3: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--yellow-lighten-2: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--yellow-lighten-1: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--yellow-darken-4: hsla(
		var(--hue-yellow),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--yellow-darken-3: hsla(
		var(--hue-yellow),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--yellow-darken-2: hsla(
		var(--hue-yellow),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--yellow-darken-1: hsla(
		var(--hue-yellow),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--yellow-accent-4: hsla(
		var(--hue-yellow),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--yellow-accent-3: hsla(
		var(--hue-yellow),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--yellow-accent-2: hsla(
		var(--hue-yellow),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--yellow-accent-1: hsla(
		var(--hue-yellow),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* amber */
	--amber-lighten-5: hsla(
		var(--hue-amber),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--amber-lighten-4: hsla(
		var(--hue-amber),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--amber-lighten-3: hsla(
		var(--hue-amber),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--amber-lighten-2: hsla(
		var(--hue-amber),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--amber-lighten-1: hsla(
		var(--hue-amber),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--amber-darken-4: hsla(
		var(--hue-amber),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--amber-darken-3: hsla(
		var(--hue-amber),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--amber-darken-2: hsla(
		var(--hue-amber),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--amber-darken-1: hsla(
		var(--hue-amber),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--amber-accent-4: hsla(
		var(--hue-amber),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--amber-accent-3: hsla(
		var(--hue-amber),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--amber-accent-2: hsla(
		var(--hue-amber),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--amber-accent-1: hsla(
		var(--hue-amber),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* orange */
	--orange-lighten-5: hsla(
		var(--hue-orange),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--orange-lighten-4: hsla(
		var(--hue-orange),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--orange-lighten-3: hsla(
		var(--hue-orange),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--orange-lighten-2: hsla(
		var(--hue-orange),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--orange-lighten-1: hsla(
		var(--hue-orange),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--orange-darken-4: hsla(
		var(--hue-orange),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--orange-darken-3: hsla(
		var(--hue-orange),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--orange-darken-2: hsla(
		var(--hue-orange),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--orange-darken-1: hsla(
		var(--hue-orange),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--orange-accent-4: hsla(
		var(--hue-orange),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--orange-accent-3: hsla(
		var(--hue-orange),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--orange-accent-2: hsla(
		var(--hue-orange),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--orange-accent-1: hsla(
		var(--hue-orange),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* deep-orange */
	--deep-orange-lighten-5: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--deep-orange-lighten-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--deep-orange-lighten-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--deep-orange-lighten-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--deep-orange-lighten-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--deep-orange-darken-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--deep-orange-darken-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--deep-orange-darken-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--deep-orange-darken-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--deep-orange-accent-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--deep-orange-accent-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--deep-orange-accent-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--deep-orange-accent-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* grey */

	--lightness-lighten-5-grey: 94%;
	--lightness-lighten-4-grey: 84%;
	--lightness-lighten-3-grey: 74%;
	--lightness-lighten-2-grey: 64%;
	--lightness-lighten-1-grey: 54%;

	--lightness-darken-1-grey: 44%;
	--lightness-darken-2-grey: 34%;
	--lightness-darken-3-grey: 24%;
	--lightness-darken-4-grey: 14%;
	--lightness-darken-5-grey: 4%;

	--saturation-grey: 20%;
	--hue-grey: 225;

	--grey-lighten-5: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-5-grey),
		1
	);
	--grey-lighten-4: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-4-grey),
		1
	);
	--grey-lighten-3: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-3-grey),
		1
	);
	--grey-lighten-2: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-2-grey),
		1
	);
	--grey-lighten-1: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-1-grey),
		1
	);

	--grey-darken-1: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-1-grey),
		1
	);
	--grey-darken-2: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-2-grey),
		1
	);
	--grey-darken-3: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-3-grey),
		1
	);
	--grey-darken-4: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-4-grey),
		1
	);
	--grey-darken-5: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-5-grey),
		1
	);

	--black: hsla(0, 0%, 0%, 1);
	--white: hsla(0, 0%, 100%, 1);
}
[data-v-bdbe168f]:root {
	/* HSL COLORS HUE VALUE */
	--_accent-color-hue: 42;
	--_secondary-color-hue: 202;
	--_page-bg-color-hue: 209;
	--_icon-color-hue: 202;
	--_positive-color-hue: 119;
	--_negative-color-hue: 11;

	--_hold-color-hue: 54;
	--_transfer-color-hue: 227;
	--_job-color-hue: 209;

	/* DEFAULT STATES OPACITY */
	--_opacity--default: 0.8;
	--_opacity--hover: 1;
	--_opacity--active: 1;
	--_opacity--focus: 0.8;
	--_opacity--disabled: 0.4;

	/* BASIC HSL COLORS VALUES */
	--_accent-color: var(--_accent-color-hue), 100%, 50%;
	--_main-color: var(--_accent-color-hue), 20%, 99%;
	--_contrast-color: var(--_accent-color-hue), 20%, 1%;
	--_secondary-color: var(--_secondary-color-hue), 20%, 90%;
	--_secondary-color-50: var(--_secondary-color-hue), 22%, 96%;
	--_page-bg-color: var(--_page-bg-color-hue), 20%, 95%;
	--_header-color: var(--_page-bg-color-hue), 20%, 90%;
	--_positive-color: var(--_positive-color-hue), 60%, 40%;
	--_negative-color: var(--_negative-color-hue), 80%, 50%;
	--_icon-color: var(--_icon-color-hue), 100%, 15%;

	--_hold-color: var(--_hold-color-hue), 80%, 50%;
	--_transfer-color: var(--_transfer-color-hue), 80%, 50%;
	--_job-color: var(--_job-color-hue), 96%, 57%;

	/* MAIN COLORS */
	--accent-color: hsla(var(--_accent-color), 1);

	--main-color: hsla(var(--_main-color), 1);

	--contrast-color: hsla(var(--_contrast-color), 1);

	--secondary-color: hsla(var(--_secondary-color), 1);
	--secondary-color-50: hsla(var(--_secondary-color-50), 1);

	/* ICON COLORS */
	--icon-color-secondary: hsla(var(--_icon-color), 0.25);

	--icon-color--hover: hsla(var(--_icon-color), var(--_opacity--hover));

	--icon-color-accent: var(--accent-color);
	--icon-color-contrast: hsla(var(--_main-color), var(--_opacity--default));
	--icon-color-active: var(--icon-color--hover);
	--icon-color-disabled: hsla(var(--_icon-color), var(--_opacity--disabled));
	--icon-color-success: var(--true-color);
	--icon-color-danger: var(--false-color);
	--icon-color-transfer: var(--transfer-color);
	--icon-color-hold: var(--hold-color);
	--icon-color-secondary-50: var(--secondary-color-50);

	--page-bg-color: hsla(var(--_page-bg-color), 1);
	--header-color: hsla(var(--_header-color), 1);

	--accent-secondary-color: hsla(var(--_accent-color), 0.3);

	/* SEMANTIC COLORS */
	--disabled-color: hsl(var(--_contrast-color), var(--_opacity--disabled));

	--true-color: hsla(var(--_positive-color), var(--_opacity--default));
	--true--hover-color: hsla(var(--_positive-color), var(--_opacity--hover));

	--false-color: hsla(var(--_negative-color), var(--_opacity--default));
	--false--hover-color: hsla(var(--_negative-color), var(--_opacity--hover));

	--hold-color: hsla(var(--_hold-color), var(--_opacity--default));
	--hold--hover-color: hsla(var(--_hold-color), var(--_opacity--hover));

	--transfer-color: hsla(var(--_transfer-color), var(--_opacity--default));
	--transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover));

	--job-color: hsla(var(--_job-color), var(--_opacity--default));
	--job--hover-color: hsla(var(--_job-color), var(--_opacity--hover));

	--link-color: hsla(205, 90%, 45%, 1);
	--link--hover-color: hsla(205, 90%, 60%, 1);

	/* SUBORDINATE COLORS */
	--tag-bg-color: var(--accent-secondary-color);

	/* FORM STATES OPACITY */
	--form-opacity--default: var(--_opacity--default);
	--form-opacity--hover: var(--_opacity--hover);
	--form-opacity--active: var(--_opacity--active);
	--form-opacity--focus: var(--_opacity--focus);
	--form-opacity--disabled: var(--_opacity--disabled);

	--form-placeholder-opacity: 0.6;
	--form-placeholder-opacity--focus: 0.4;
	--form-border-opacity--disabled: 0.05;

	--form-opacity--ouline--default: 0.4;
	--form-opacity--ouline--hover: 0.7;

	/* FORM COLORS */
	--form-input-color: var(--contrast-color);
	/* user input color */

	--form-label-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);
	--form-label--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--hover)
	);
	--form-label--active-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--active)
	);
	--form-label--disabled-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--disabled)
	);

	--form-border-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);
	--form-border--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--hover)
	);
	--form-border--disabled-color: hsla(
		var(--_contrast-color),
		var(--form-border-opacity--disabled)
	);

	--form-placeholder-color: hsla(
		var(--_contrast-color),
		var(--form-placeholder-opacity)
	);
	--form-placeholder-color--focus: hsla(
		var(--_contrast-color),
		var(--form-placeholder-opacity--focus)
	);
	--form-placeholder-color--disabled: hsla(
		var(--_contrast-color),
		var(--form-opacity--disabled)
	);

	/* outline */
	--form-outline-label-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);

	--form-outline-border-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--ouline--default)
	);
	--form-outline-border--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--ouline--hover)
	);

	/* TEXT OPACITY */
	--text-opacity--default: var(--_opacity--default);
	--text-opacity----outline--default: 0.7;
	--text-opacity--disabled: 0.5;

	/* TEXT COLORS */
	--text-primary-color: hsla(
		var(--_contrast-color),
		var(--text-opacity--default)
	);
	--text-outline-color: hsla(
		var(--_contrast-color),
		var(--text-opacity----outline--default)
	);
	--text-contrast-color: hsla(var(--_main-color), var(--text-opacity--default));
	--text--disabled-color: hsla(
		var(--_contrast-color),
		var(--text-opacity--disabled)
	);

	/* CHAT COLORS */
	--_chat-client-color: var(--_accent-color);
	--_chat-client-opacity: 0.2;
	--_chat-agent-color: var(--_secondary-color-50);
	--_chat-agent-opacity: 1;

	--chat-client-message-bg-color: hsla(
		var(--_chat-client-color),
		var(--_chat-client-opacity)
	);
	--chat-agent-message-bg-color: hsla(
		var(--_chat-agent-color),
		var(--_chat-agent-opacity)
	);
	--chat-client-attachment-bg-color: hsla(
		var(--_chat-client-color),
		var(--_chat-client-opacity)
	);
	--chat-agent-attachment-bg-color: hsla(
		var(--_chat-agent-color),
		var(--_chat-agent-opacity)
	);
}
/* shared text field colors */
[data-v-bdbe168f]:root {
	/* TODO: move to separate helper-text component */
	/* helper */
	--wt-helper-text-color: var(--text-main-color);
	--wt-helper-text-disabled-color: var(--text-disabled-color);
	--wt-helper-text-invalid-color: var(--text-error-color);

	/* text */
	--wt-text-field-text-color: var(--black);

	/* placeholder */
	--wt-text-field-error-text-color: var(--error-color);
	--wt-text-field-placeholder-color: var(--grey-lighten-1);
	--wt-text-field-placeholder-error-color: var(--error-color);
	--wt-text-field-placeholder-disabled-color: var(--text-disabled-color);

	/* border */
	--wt-text-field-input-border-color: var(--grey-darken-1);
	--wt-text-field-input-border-disabled-color: var(--dp-16-surface-color);
	--wt-text-field-input-border-error-color: var(--error-color);

	/* input bg */
	--wt-text-field-input-background-disabled-color: var(--dp-16-surface-color);

	/* select */
	--wt-text-field-select-option-text-color: var(--text-main-color);
	--wt-text-field-select-option-text-hover-color: var(--primary-on-color);
	--wt-text-field-select-option-text-selected-color: var(--primary-on-color);

	--wt-text-field-select-option-wrapper-border-color: var(
		--dp-22-surface-color
	);
	--wt-text-field-select-option-background-color: var(--dp-22-surface-color);
	--wt-text-field-select-option-background-hover-color: var(
		--primary-light-color
	);
	--wt-text-field-select-option-background-selected-color: var(--primary-color);
}
:root.theme--dark[data-v-bdbe168f] {
	/* text */
	--wt-text-field-text-color: var(--white);

	--wt-text-field-input-border-color: var(--grey-lighten-1);
}
[data-v-bdbe168f]:root {
	/* dp colors */
	--dp-24-surface-color: hsl(0, 0%, 100%);
	--dp-23-surface-color: hsl(225, 20%, 99%);
	--dp-22-surface-color: hsl(225, 20%, 98%);
	--dp-21-surface-color: hsl(225, 20%, 97%);
	--dp-20-surface-color: hsl(225, 20%, 96%);
	--dp-19-surface-color: hsl(225, 20%, 95%);
	--dp-18-surface-color: hsl(225, 20%, 94%);
	--dp-17-surface-color: hsl(225, 20%, 93%);
	--dp-16-surface-color: hsl(225, 20%, 92%);
	--dp-15-surface-color: hsl(225, 20%, 91%);
	--dp-14-surface-color: hsl(225, 20%, 90%);
	--dp-13-surface-color: hsl(225, 20%, 89%);
	--dp-12-surface-color: hsl(225, 20%, 88%);
	--dp-11-surface-color: hsl(225, 20%, 87%);
	--dp-10-surface-color: hsl(225, 20%, 86%);
	--dp-9-surface-color: hsl(225, 20%, 85%);
	--dp-8-surface-color: hsl(225, 20%, 84%);
	--dp-7-surface-color: hsl(225, 20%, 83%);
	--dp-6-surface-color: hsl(225, 20%, 82%);
	--dp-5-surface-color: hsl(225, 20%, 81%);
	--dp-4-surface-color: hsl(225, 20%, 80%);
	--dp-3-surface-color: hsl(225, 20%, 79%);
	--dp-2-surface-color: hsl(225, 20%, 78%);
	--dp-1-surface-color: hsl(225, 20%, 77%);

	/* content wrapper */
	--content-wrapper-color: var(--p-content-background);
	--content-wrapper-hover-color: var(--p-content-hover-background);

	/* context menu */
	--context-menu-background-color: var(--content-wrapper-color);
	--context-menu-option-hover-color: var(--p-surface-50);
	--context-menu-option-disabled-color: var(--p-surface-100);
	--context-menu-option-text-color: var(--text-main-color);
	--context-menu-option-text-disabled-color: var(--text-disabled-color);

	/* success colors */
	--success-color: var(--green-darken-4);
	--success-hover-color: var(--green-darken-3);
	--success-light-color: var(--green-lighten-4);
	--success-on-color: var(--white);

	/* warning colors */
	--warning-color: var(--orange-accent-2);
	--warning-hover-color: var(--orange-accent-1);
	--warning-light-color: var(--orange-lighten-4);
	--warning-on-color: var(--black);

	/* error colors */
	--error-color: var(--red-accent-2);
	--error-hover-color: var(--red-lighten-2);
	--error-light-color: var(--red-lighten-4);
	--error-on-color: var(--white);

	/* info colors */
	--info-color: var(--blue-darken-1);
	--info-hover-color: var(--blue-lighten-1);
	--info-light-color: var(--blue-lighten-4);
	--info-on-color: var(--black);

	/* job colors */
	--job-color: var(--blue-darken-1);
	--job-hover-color: var(--blue-lighten-1);
	--job-light-color: var(--blue-lighten-4);
	--job-on-color: var(--black);

	/* chat colors */
	--chat-color: var(--indigo-accent-2);
	--chat-hover-color: var(--indigo-accent-1);
	--chat-light-color: var(--indigo-lighten-4);
	--chat-on-color: var(--black);

	/* transfer colors */
	--transfer-color: var(--indigo-lighten-1);
	--transfer-hover-color: var(--indigo-lighten-2);
	--transfer-light-color: var(--indigo-lighten-4);
	--transfer-on-color: var(--white);

	/* primary colors */
	--primary-color: var(--amber-accent-3);
	--primary-hover-color: var(--amber-accent-2);
	--primary-light-color: var(--amber-lighten-3);
	--primary-on-color: var(--black);

	/* secondary colors */
	--secondary-color: var(--dp-10-surface-color);
	--secondary-hover-color: var(--dp-14-surface-color);
	--secondary-light-color: var(--dp-16-surface-color);
	--secondary-on-color: var(--grey-darken-4);

	/* email colors */
	--email-color: var(--blue-darken-3);
	--email-hover-color: var(--blue-darken-2);
	--email-light-color: var(--blue-lighten-2);
	--email-on-color: var(--black);

	/* accent colors */
	--accent-color: var(--purple-lighten-1);
	--sub-accent-color: var(--indigo-darken-3);

	/* typography colors */
	--text-main-color: var(--grey-darken-3);
	--text-disabled-color: var(--grey-lighten-1);
	--text-error-color: var(--error-color);
	--text-success-color: var(--success-color);
	--text-link-color: var(--info-color);
	/* typography on colors */
	--text-on-brand-color: var(--white);
}
:root.theme--dark[data-v-bdbe168f] {
	/* dp colors */
	--dp-24-surface-color: hsl(225, 20%, 25%);
	--dp-23-surface-color: hsl(225, 20%, 24%);
	--dp-22-surface-color: hsl(225, 20%, 23%);
	--dp-21-surface-color: hsl(225, 20%, 22%);
	--dp-20-surface-color: hsl(225, 20%, 21%);
	--dp-19-surface-color: hsl(225, 20%, 20%);
	--dp-18-surface-color: hsl(225, 20%, 19%);
	--dp-17-surface-color: hsl(225, 20%, 18%);
	--dp-16-surface-color: hsl(225, 20%, 17%);
	--dp-15-surface-color: hsl(225, 20%, 16%);
	--dp-14-surface-color: hsl(225, 20%, 15%);
	--dp-13-surface-color: hsl(225, 20%, 14%);
	--dp-12-surface-color: hsl(225, 20%, 13%);
	--dp-11-surface-color: hsl(225, 20%, 12%);
	--dp-10-surface-color: hsl(225, 20%, 11%);
	--dp-9-surface-color: hsl(225, 20%, 10%);
	--dp-8-surface-color: hsl(225, 20%, 9%);
	--dp-7-surface-color: hsl(225, 20%, 8%);
	--dp-6-surface-color: hsl(225, 20%, 7%);
	--dp-5-surface-color: hsl(225, 20%, 6%);
	--dp-4-surface-color: hsl(225, 20%, 5%);
	--dp-3-surface-color: hsl(225, 20%, 4%);
	--dp-2-surface-color: hsl(225, 20%, 3%);
	--dp-1-surface-color: hsl(225, 20%, 2%);

	/* success colors */
	--success-color: var(--green-darken-4);
	--success-hover-color: var(--green-darken-3);
	--success-light-color: var(--green-lighten-3);
	--success-on-color: var(--black);

	/* warning colors */
	--warning-color: var(--orange-accent-2);
	--warning-hover-color: var(--orange-accent-1);
	--warning-light-color: var(--orange-lighten-3);
	--warning-on-color: var(--black);

	/* error colors */
	--error-color: var(--red-accent-2);
	--error-hover-color: var(--red-lighten-2);
	--error-light-color: var(--red-lighten-3);
	--error-on-color: var(--black);

	/* info colors */
	--info-color: var(--blue-darken-1);
	--info-hover-color: var(--blue-lighten-1);
	--info-light-color: var(--blue-lighten-3);
	--info-on-color: var(--white);

	/* job colors */
	--job-color: var(--blue-darken-1);
	--job-hover-color: var(--blue-lighten-1);
	--job-light-color: var(--blue-lighten-3);
	--job-on-color: var(--white);

	/* chat colors */
	--chat-color: var(--indigo-accent-2);
	--chat-hover-color: var(--indigo-accent-1);
	--chat-light-color: var(--indigo-lighten-3);
	--chat-on-color: var(--white);

	/* transfer colors */
	--transfer-color: var(--indigo-darken-1);
	--transfer-hover-color: var(--indigo-lighten-1);
	--transfer-light-color: var(--indigo-lighten-4);
	--transfer-on-color: var(--white);

	/* primary colors */
	--primary-color: var(--amber-darken-2);
	--primary-hover-color: var(--amber-darken-1);
	--primary-light-color: var(--amber-darken-4);
	--primary-on-color: var(--black);

	/* secondary colors */
	--secondary-on-color: var(--grey-lighten-4);

	/* email colors */
	--email-color: var(--blue-darken-3);
	--email-hover-color: var(--blue-darken-2);
	--email-light-color: var(--blue-lighten-1);
	--email-on-color: var(--white);

	/* accent colors */
	--accent-color: var(--purple-lighten-1);
	--sub-accent-color: var(--indigo-darken-3);

	/* typography colors */
	--text-main-color: var(--grey-lighten-3);
	--text-disabled-color: var(--grey-darken-1);
	--text-error-color: var(--error-color);
	--text-success-color: var(--success-color);
	--text-link-color: var(--info-color);
	/* typography on colors */
	--text-on-brand-color: var(--white);

	/* context menu */
	--context-menu-option-hover-color: var(--p-surface-900);
	--context-menu-option-disabled-color: var(--p-surface-850);
}
[data-v-bdbe168f]:root {
	--_elevation-color: hsla(0, 0%, 0%, 0.05);
	--elevation-1: 0px 0px 4px 1px var(--_elevation-color);
	--elevation-2: 0px 0px 6px 2px var(--_elevation-color);
	--elevation-3: 0px 0px 8px 3px var(--_elevation-color);
	--elevation-4: 0px 0px 10px 4px var(--_elevation-color);
	--elevation-5: 0px 0px 12px 5px var(--_elevation-color);
	--elevation-6: 0px 0px 14px 6px var(--_elevation-color);
	--elevation-7: 0px 0px 16px 7px var(--_elevation-color);
	--elevation-8: 0px 0px 18px 8px var(--_elevation-color);
	--elevation-9: 0px 0px 20px 9px var(--_elevation-color);
	--elevation-10: 0px 0px 22px 10px var(--_elevation-color);
}
[data-v-bdbe168f]:root {
	/* Start point */
	--_spacing-multiplicator: 8px;

	/* Spacings */
	--spacing-3xs: calc(var(--_spacing-multiplicator) / 4);
	--spacing-2xs: calc(var(--_spacing-multiplicator) / 2);
	--spacing-xs: calc(var(--_spacing-multiplicator) * 1);
	--spacing-sm: calc(var(--_spacing-multiplicator) * 2);
	--spacing-md: calc(var(--_spacing-multiplicator) * 3);
	--spacing-lg: calc(var(--_spacing-multiplicator) * 4);
	--spacing-xl: calc(var(--_spacing-multiplicator) * 5);
	--spacing-2xl: calc(var(--_spacing-multiplicator) * 6);
	--spacing-3xl: calc(var(--_spacing-multiplicator) * 7);
}
[data-v-bdbe168f]:root {
	--transition-fast: 0.3s;
	--transition-normal: 0.6s;
	--transition-slow: 0.9s;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Thin-B0oow3R9.woff2")
		format("woff2");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ThinItalic-Df5kGryu.woff2")
		format("woff2");
	font-weight: 100;
	font-style: italic;
	font-display: swap;
	font-display: swap;
	font-display: swap;
	font-display: swap;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraLight-BLVvTz6v.woff2")
		format("woff2");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraLightItalic-Cm43v-Vf.woff2")
		format("woff2");
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Light-De9MYPOT.woff2")
		format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-LightItalic-DV9n9KIB.woff2")
		format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Regular-Cu1XIIHs.woff2")
		format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Italic-DdaXnPiX.woff2")
		format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Medium-DJODbTHz.woff2")
		format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-MediumItalic-Dx3RkM4S.woff2")
		format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-SemiBold-DwmoiGAe.woff2")
		format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-SemiBoldItalic-DUAaODp3.woff2")
		format("woff2");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Bold-DYLVQlxQ.woff2")
		format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-BoldItalic-DSEOJb3S.woff2")
		format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraBold-CLYj8xrZ.woff2")
		format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraBoldItalic-DikM7EMV.woff2")
		format("woff2");
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Black-C-enK_Oz.woff2")
		format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-BlackItalic-D65VYM31.woff2")
		format("woff2");
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

/*
This font was added for use in wt-input-text in case we need to hide the input value,like in a password input,
but without type="password" on input. It was added because not all brawsers are support 'text-security: disc' property,
So this font changes text to discs in these cases
*/
@font-face {
	font-family: "text-security-disc";
	src: url("data:font/woff2;base64,d09GMgABAAAAAAMQAAoAAAAACAAAAALIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAggAKcHILBgABNgIkAwYEIAWJSAcvG0gHEZWcjBRfHNjNPraIGU7SkQoTFkXoFRjv8FUcbDmIj4fv117P3fcRQioFRseKQUaWwJVVVVWlqUSWQCqzAXDOVp+vqsnVapWIlhw7yBoEhhMnHFYCHMKOvkR03bf6e9V3k5C0pdB3/e9T0qkd4MMPltYAwwl4rBdKBw5Q6WQJiMe2JfXQzxqDHiJHyBCRoyWk9D0eokh2Ww9se/9MHLHYawD4n5f/Ls/b722ATVs377KRPE9jOdKY88cWRA5gIghJDQ1N8AfoA89ygvcYf4pg/Ec+TgiEgQwZEhIKKKCIIkoooYwyKqigiipqqKGOOhpooIkmWmihjTY66PxOyEABGSZiKqAAQnQ6B6/n1u98x4262u0Js8WuS9OPfJk+/cuR6bOAtTcIJOZcuOuj7bV/Kyl9h9f38fFYbrefcSYrI8lAQDMUDxExOyyGlfQ/vVsg0xGArgJ1t5MoVLEcA2Gq5ci0HECy2rnswoOiU55kl1xUjEQJdXtiFM3sEWm9lqWFmgZbjP05LRVBvbqdHux9wpyGnbGWEX6p5JEHp+lXirTnJ5QhZa5Rrsq9D67r+24QRrdzndcmBzUrQ9xXb6hp/3Kt1h1kLEFUI/CLVKdW/dqtdrVRNqpIyLr2KxU5WYVXmZuskh+VXqlluyjNMNPGBGcj6JOF0MC+M9Ucc48RhDxCB6QQzssN7C3m8bmbGCrG7VXU5FY+yGdUakVOvwKllMExtmsLwzMsVQFGpi5UbHxfXhb762Voh6fTcKeW03OxxicY73eTpa8bxhIzeWR+wnoJ6j/4kBejs2xf69j7pOSUzmzPCqNy4cojtlsLwpBhb++AtcBHQcpyGZgkYrGUBTwXn2/RF12BjlQTI1XSvANELqO18DPB+UIyNkJSZBsoX7wh7DlfsyVfTshpuSjLSv9H3fwD+a36nwAAkBFZ5aSOqp+7Bg==")
		format("woff2");
	font-weight: 100;
	font-style: normal;
}
.fade-enter-active[data-v-bdbe168f],
.fade-leave-active[data-v-bdbe168f] {
	transition: opacity var(--transition);
}
.fade-enter[data-v-bdbe168f],
.fade-leave-to[data-v-bdbe168f] {
	opacity: 0;
}
/*
  Classes for direct use in placeholder-like elements styling
   (e.g. vue-multiselect .multiselect__placeholder which is technically a span)
*/
.wt-placeholder[data-v-bdbe168f] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-color);
}
.wt-placeholder--disabled[data-v-bdbe168f] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-disabled-color);
}
.wt-placeholder--error[data-v-bdbe168f] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-error-color);
}
.d-none[data-v-bdbe168f] {
	display: none;
}
@media only screen and (max-width: 960px) {
.d-none-sm[data-v-bdbe168f] {
		display: none;
}
.d-block-sm[data-v-bdbe168f] {
		display: block;
}
}
@media only screen and (max-width: 600px) {
.d-none-xs[data-v-bdbe168f] {
		display: none;
}
.d-block-xs[data-v-bdbe168f] {
		display: block;
}
}
/* Component Variables - Centralized to avoid duplication */
/* This file imports all component-specific CSS variables once globally */
[data-v-bdbe168f]:root {
	--wt-app-header-min-height: 40px;
	--wt-app-header-padding: var(--spacing-xs) var(--spacing-sm);
	--wt-app-header-background: var(--dp-9-surface-color);

	--wt-app-header-content-gap: var(--spacing-sm);
	--wt-app-header-content-panel-margin: var(--spacing-2xs);
	--wt-app-header-content-bg-color: var(--content-wrapper-color);
	--wt-app-header-content-z-index: 11;

	--wt-app-navigator-max-height: 80vh;
	--wt-app-navigator-padding: var(--wt-app-header-content-gap);
	--wt-app-navigator-item-width: 128px;
	--wt-app-navigator-item-height: 135px;
	--wt-app-navigator-item-padding: var(--spacing-xs);
	--wt-app-navigator-item-gap: var(--wt-app-header-content-gap);
	--wt-app-navigator-item-border: 1px solid;
	--wt-app-navigator-item-border-color: var(--secondary-color);
	--wt-app-navigator-item-pic-size: 88px;
	--wt-app-navigator-item-border-color--hover: var(--primary-color);

	--wt-header-actions-min-width: 120px;
	--wt-header-actions-content-sections-gap: var(--spacing-lg);
	--wt-header-actions-padding: var(--wt-app-header-content-gap);
	--wt-header-actions-action-bg-color--hover: var(--secondary-color);
	--wt-header-actions-action-link-padding: var(--spacing-xs);
}
[data-v-bdbe168f]:root {
	--wt-avatar-size--size-xs: calc(var(--_spacing-multiplicator) * 3);
	--wt-avatar-size--size-sm: calc(var(--_spacing-multiplicator) * 4);
	--wt-avatar-size--size-md: calc(var(--_spacing-multiplicator) * 5);
	--wt-avatar-size--size-lg: calc(var(--_spacing-multiplicator) * 7);
	--wt-avatar-size--size-xl: calc(var(--_spacing-multiplicator) * 9);
	--wt-avatar-size--size-2xl: calc(var(--_spacing-multiplicator) * 12);
	--wt-avatar-size--size-3xl: calc(var(--_spacing-multiplicator) * 16);

	--wt-avatar-size: var(--wt-avatar-size--size-md);

	--online-color: var(--success-color);
	--dnd-color: var(--warning-color);
	--busy-color: var(--error-color);
	--offline-color: var(--disabled-color);
	--pause-color: var(--warning-color);

	--wt-avatar-text-color: var(--white);

	--wt-avatar-letters-p1-color: var(--red-lighten-2);
	--wt-avatar-letters-p2-color: var(--purple-lighten-2);
	--wt-avatar-letters-p3-color: var(--deep-purple-lighten-2);
	--wt-avatar-letters-p4-color: var(--indigo-lighten-2);
	--wt-avatar-letters-p5-color: var(--blue-lighten-1);
	--wt-avatar-letters-p6-color: var(--cyan-lighten-1);
	--wt-avatar-letters-p7-color: var(--teal-darken-3);
	--wt-avatar-letters-p8-color: var(--green-darken-2);
	--wt-avatar-letters-p9-color: var(--lime-darken-3);
	--wt-avatar-letters-p10-color: var(--yellow-darken-3);
	--wt-avatar-letters-p11-color: var(--amber-lighten-2);
	--wt-avatar-letters-p12-color: var(--orange-darken-1);
	--wt-avatar-letters-p13-color: var(--deep-purple-lighten-1);
}
:root.theme--dark[data-v-bdbe168f] {
	--wt-avatar-text-color: var(--black);
}
[data-v-bdbe168f]:root {
	--wt-badge-size: var(--spacing-xs);
}
[data-v-bdbe168f]:root {
	--breadcrumb-indicator-size: 4px;
	--breadcrumb-gap: var(--spacing-sm);
	--breadcrumb-dot-gap: var(--spacing-2xs);
	--breadcrumb-indicator-color: var(--icon-color);
	--breadcrumb-accent-indicator-color: var(--primary-color);
}
[data-v-bdbe168f]:root {
	--button-select-button-padding: var(--spacing-xs) var(--spacing-sm);

	--button-select-icon-button-padding: var(--spacing-xs);

	--button-select-buttons-gap: 1px;
}
[data-v-bdbe168f]:root {
	--btn-min-width: 90px;
	--btn-min-width--size-sm: 70px;
	--btn-padding: var(--spacing-xs) var(--spacing-sm);
	--btn-padding--size-sm: var(--spacing-2xs) var(--spacing-xs);
	/* COLORS */
	--btn-primary-color: var(--primary-color);
	--btn-primary-hover-color: var(--primary-hover-color);
	--btn-primary-text-color: var(--primary-on-color);

	--btn-secondary-color: var(--dp-10-surface-color);
	--btn-secondary-hover-color: var(--dp-14-surface-color);
	--btn-secondary-text-color: var(--grey-darken-4);

	--btn-success-color: var(--success-color);
	--btn-success-hover-color: var(--success-hover-color);
	--btn-success-text-color: var(--grey-lighten-5);

	--btn-info-color: var(--info-color);
	--btn-info-hover-color: var(--info-hover-color);
	--btn-info-text-color: var(--grey-lighten-5);

	--btn-job-color: var(--job-color);
	--btn-job-hover-color: var(--job-hover-color);
	--btn-job-text-color: var(--grey-lighten-5);

	--btn-error-color: var(--error-color);
	--btn-error-hover-color: var(--error-hover-color);
	--btn-error-text-color: var(--grey-lighten-5);

	--btn-transfer-color: var(--transfer-color);
	--btn-transfer-hover-color: var(--transfer-hover-color);
	--btn-transfer-text-color: var(--transfer-on-color);

	--btn-disabled-color: var(--dp-16-surface-color);
	--btn-disabled-text-color: var(--grey-darken-1);
}
:root.theme--dark[data-v-bdbe168f] {
	--btn-secondary-text-color: var(--grey-lighten-4);
}
[data-v-bdbe168f]:root {
	--wt-card-border-radius: var(--p-content-border-radius);
	--wt-card-padding: var(--spacing-sm);
}
[data-v-bdbe168f]:root {
	--checkbox-icon-margin: var(--spacing-xs);
}
[data-v-bdbe168f]:root {
	--chip-padding: var(--spacing-2xs) var(--spacing-sm);
	--chip-border-radius: var(--spacing-lg);

	--wt-chip-main-background-color: var(--primary-light-color);
	--wt-chip-main-text-color: var(--primary-on-color);

	--wt-chip-primary-background-color: var(--primary-color);
	--wt-chip-primary-text-color: var(--primary-on-color);

	--wt-chip-secondary-background-color: var(--secondary-color);
	--wt-chip-secondary-text-color: var(--secondary-on-color);

	--wt-chip-success-background-color: var(--success-color);
	--wt-chip-success-text-color: var(--success-on-color);

	--wt-chip-warning-background-color: var(--warning-color);
	--wt-chip-warning-text-color: var(--warning-on-color);

	--wt-chip-error-background-color: var(--error-color);
	--wt-chip-error-text-color: var(--error-on-color);

	--wt-chip-transfer-background-color: var(--transfer-color);
	--wt-chip-transfer-text-color: var(--transfer-on-color);
}
[data-v-bdbe168f]:root {
	--wt-context-menu-option-padding: var(--spacing-xs);

	--wt-context-menu-background-color: var(--context-menu-background-color);
	--wt-context-menu-option-text-color: var(--context-menu-option-text-color);
	--wt-context-menu-option-background-hover-color: var(
		--context-menu-option-hover-color
	);
	--wt-context-menu-option-background-disabled-color: var(
		--context-menu-option-disabled-color
	);
	--wt-context-menu-option-text-disabled-color: var(
		--context-menu-option-text-disabled-color
	);
}
:root {
&[data-v-bdbe168f]{
	/*General*/
	--dp-font-family: "Montserrat";
	--dp-border-radius: var(--border-radius);
	/*Configurable border-radius*/
	--dp-cell-border-radius: var(--border-radius);
	/*Specific border radius for the calendar cell*/

	/*Sizing*/
	--dp-button-heigh: 32px;
	/*Size for buttons in overlays*/
	--dp-month-year-row-height: 24px;
	/*Height of the month-year select row*/
	--dp-month-year-row-button-size: 24px;
	/*Specific height for the next/previous buttons*/
	--dp-button-icon-height: var(--icon-md-size);
	/*Icon sizing in buttons*/
	--dp-cell-size: 24px;
	/*Width and height of calendar cell*/
	--dp-cell-padding: var(--spacing-2xs);
	/*Padding in the cell*/
	--dp-common-padding: var(--spacing-xs);
	/*Common padding used*/
	--dp-input-icon-padding: calc(var(--icon-md-size) + 2 * var(--spacing-xs));
	/*Padding on the left side of the input if icon is present*/
	--dp-input-padding: calc(var(--spacing-xs) - 1px)
		calc(var(--icon-md-size) + 2 * var(--spacing-xs));
	/*Padding in the input*/
	/* --dp-menu-min-width: 260px; Adjust the min width of the menu */
	--dp-action-buttons-padding: 2px 5px;
	/*Adjust padding for the action buttons in action row*/
	--dp-row-maring: var(--spacing-3xs);
	/*Adjust the spacing between rows in the calendar*/
	--dp-calendar-header-cell-padding: 0.5rem;
	/*Adjust padding in calendar header cells*/
	--dp-two-calendars-spacing: 10px;
	/*Space between multiple calendars*/
	--dp-overlay-col-padding: 3px;
	/*Padding in the overlay column*/
	--dp-time-inc-dec-button-size: 24px;
	/*Sizing for arrow buttons in the time picker*/

	/*Font sizes*/
	--dp-font-size: 12px;
	/*Default font-size*/
	--dp-preview-font-size: 12px;
	/*Font size of the date preview in the action row*/
	--dp-time-font-size: 12px;
	/*Font size in the time picker*/

	/*Transitions*/
	--dp-animation-duration: var(--transition);
	/*Transition duration*/
	--dp-menu-appear-transition-timing: cubic-bezier(0.4, 0, 1, 1);
	/*Timing on menu appear animation*/
	--dp-transition-timing: ease-out;
	/*Timing on slide animations*/
	}
.dp__theme_light[data-v-bdbe168f] {
		--dp-background-color: var(--content-wrapper-color);
		--dp-text-color: var(--text-main-color);
		/* --dp-hover-color: var(--secondary-color-50); */
		/* --dp-hover-text-color: var(--contrast-color); */
		--dp-hover-icon-color: var(--icon-btn-hover-color);
		--dp-primary-color: var(--primary-color);
		--dp-primary-text-color: var(--primary-on-color);
		--dp-secondary-color: var(--secondary-color);
		--dp-border-color: var(--wt-text-field-input-border-color);
		--dp-menu-border-color: transparent;
		/* --dp-border-color-hover: var(--form-border--hover-color); */
		--dp-disabled-color: var(--wt-text-field-input-background-disabled-color);
		--dp-success-color: var(--success-color);
		--dp-icon-color: var(--icon-color);
		--dp-danger-color: var(--error-color);
		/* --dp-scroll-bar-background: #f3f3f3; */
		/* --dp-scroll-bar-color: #959595; */
		/* --dp-success-color-disabled: #a3d9b1; */
		/* --dp-highlight-color: rgba(25, 118, 210, 0.1); */
}
}
[data-v-bdbe168f]:root {
	--divider-border: 1px solid;
	--divider-border-color: var(--grey-lighten-4);
}
:root.theme--dark[data-v-bdbe168f] {
	--divider-border-color: var(--grey-darken-2);
}
[data-v-bdbe168f]:root {
	--wt-dual-panel-padding: var(--spacing-sm);
	--wt-dual-panel-section-padding: var(--spacing-sm);
	--wt-dual-panel-section-gap: var(--spacing-sm);

	--wt-dual-panel-background-color: var(--grey-lighten-5);
	--wt-dual-panel-content-wrapper-color: var(--content-wrapper-color);
}
:root.theme--dark[data-v-bdbe168f] {
	--wt-dual-panel-background-color: var(--grey-darken-4);
}
[data-v-bdbe168f]:root {
	--wt-dummy-text-color: var(--text-main-color);
}
[data-v-bdbe168f]:root {
	--wt-empty-min-width: 280px;
	--wt-empty-width: 600px;
	--wt-empty-max-width: 80vw;
}
[data-v-bdbe168f]:root {
	--wt-error-page-background-color: var(--content-wrapper-color);
	--wt-error-page-text-color: var(--text-main-color);
}
[data-v-bdbe168f]:root {
	--wt-expansion-panel-header-background-color: var(--dp-16-surface-color);
	--wt-expansion-panel-header-title-color: var(--text-main-color);
	--wt-expansion-panel-content-background-color: var(--content-wrapper-color);
	--wt-expansion-panel-content-text-color: var(--text-main-color);
}
[data-v-bdbe168f]:root {
	--headline-min-height: 40px; /* button/search-bar height */
	--headline-title-margin: var(--spacing-sm);
	--wt-headline-background-color: var(--content-wrapper-color);
}
[data-v-bdbe168f]:root {
	--icon-btn-hover-color: var(--grey-darken-5);
}
:root.theme--dark[data-v-bdbe168f] {
	--icon-btn-hover-color: var(--grey-lighten-5);
}
[data-v-bdbe168f]:root {
	--icon-8xl-size: 96px;
	--icon-7xl-size: 88px;
	--icon-6xl-size: 80px;
	--icon-5xl-size: 72px;
	--icon-4xl-size: 64px;
	--icon-3xl-size: 56px;
	--icon-2xl-size: 48px;
	--icon-xl-size: 40px;
	--icon-lg-size: 32px;
	--icon-md-size: 24px;
	--icon-sm-size: 16px;
	--icon-xs-size: 8px;

	--icon-color: var(--grey-darken-2);
	--icon-active-color: var(--grey-darken-4);
	--icon-primary-color: var(--p-primary-color);
	--icon-error-color: var(--p-error-color);
	--icon-success-color: var(--p-success-color);
	--icon-warning-color: var(--p-warn-color);
	--icon-on-dark-color: var(--white);
	--icon-on-light-color: var(--grey-darken-3);
	--icon-on-primary-color: var(--primary-on-color);
	--icon-info-color: var(--p-info-color);
	--icon-chat-color: var(--p-chat-color);
	--icon-transfer-color: var(--p-transfer-color);
	--icon-job-color: var(--p-task-color);
	--icon-disabled-color: var(--grey-lighten-4);
}
:root.theme--dark[data-v-bdbe168f] {
	--icon-color: var(--grey-lighten-2);
	--icon-active-color: var(--grey-lighten-4);
	--icon-disabled-color: var(--grey-darken-2);
}
[data-v-bdbe168f]:root {
	--wt-indicator-dot-size--size-sm: var(--spacing-xs);
	--wt-indicator-dot-size--size-md: var(--spacing-sm);
	--wt-indicator-dot-size: var(--wt-indicator-size--size-md);
	--wt-indicator-dot-offset: var(--spacing-2xs);

	--wt-indicator-text-margin: var(--spacing-2xs);

	--wt-indicator-text-color: var(--text-main-color);
	--wt-indicator-primary-color: var(--primary-color);
	--wt-indicator-secondary-color: var(--grey-lighten-3);
	--wt-indicator-disabled-color: var(--grey-lighten-4);
	--wt-indicator-success-color: var(--success-color);
	--wt-indicator-error-color: var(--error-color);
	--wt-indicator-transfer-color: var(--transfer-color);
	--wt-indicator-break-out-color: var(--warning-color);
	--wt-indicator-info-color: var(--info-color);
	--wt-indicator-final-status-color: var(--green-accent-4);
	--wt-indicator-initial-status-color: var(--red-accent-2);
	--wt-indicator-other-status-color: var(--orange-accent-2);
}
:root.theme--dark[data-v-bdbe168f] {
	--wt-indicator-secondary-color: var(--grey-darken-1);
	--wt-indicator-disabled-color: var(--grey-darken-2);
}
[data-v-bdbe168f]:root {
	--input-padding: calc(var(--spacing-xs) - 1px); /* - border */
	--input-border: 1px solid;
	--input-icon-margin: var(--spacing-xs);

	--input-after-wrapper-gap: var(--spacing-2xs);
}
[data-v-bdbe168f]:root {
	--wt-item-link-text-color: var(--text-main-color);
}
[data-v-bdbe168f]:root {
	--wt-label-padding: var(--spacing-2xs) var(--spacing-xs);

	--wt-label-color: var(--p-form-field-color);
	--wt-label-error-color: var(--p-error-color);
	--wt-label-disabled-color: var(--p-form-field-disabled-color);
}
[data-v-bdbe168f]:root {
	--load-bar-height: 6px;
	--load-bar-padding: 1px;
	--load-bar-border-radius: 50px;

	--wt-load-bar-primary-color: var(--primary-on-color);
	--wt-load-bar-error-color: var(--p-error-color);
	--wt-load-bar-warning-color: var(--p-warn-color);
	--wt-load-bar-success-color: var(--p-success-color);
	--wt-load-bar-info-color: var(--p-info-color);
}
[data-v-bdbe168f]:root {
	--loader-size: 44px;
	--loader-dot-size: 6px;
	--loader-animation-duration: 3s;

	--wt-loader-md-path-color: var(--grey-darken-2);
	--wt-loader-md-point-color: var(--primary-color);

	--wt-loader-sm-path-main-color: var(--grey-darken-2);
	--wt-loader-sm-path-icon-color: var(--icon-color);
	--wt-loader-sm-path-on-light-color: var(--icon-on-light-color);
	--wt-loader-sm-path-on-dark-color: var(--icon-on-dark-color);
}
:root.theme--dark[data-v-bdbe168f] {
	--wt-loader-md-path-color: var(--grey-lighten-2);

	--wt-loader-sm-path-main-color: var(--grey-lighten-2);
}
[data-v-bdbe168f]:root {
	--wt-logo-width: 84px;
	--wt-logo-height: 16px;
}
[data-v-bdbe168f]:root {
	--wt-navigation-bar-width: 340px;
	--wt-navigation-bar-z-index: 10;
	--wt-navigation-bar-padding: var(--spacing-sm);

	--wt-navigation-bar-header-padding: var(--spacing-xs);
	--wt-navigation-bar-app-pic-height: 24px;

	--wt-navigation-bar-list-padding: var(--wt-navigation-bar-padding);
	--wt-navigation-bar-link-padding: var(--wt-navigation-bar-padding);
	--wt-navigation-bar-subnav-padding-left: var(--spacing-lg);
	--wt-navigation-bar-active-expansion-flag-width: 5px;
	--wt-navigation-bar-active-expansion-name-max-width: calc(
		100% -
		var(--icon-md-size) -
		var(--spacing-xs)
	);

	--wt-navigation-bar-background-color: var(--dp-18-surface-color);
	--wt-navigation-bar-option-text-color: var(--text-main-color);
	--wt-navigation-bar-option-text-active-color: var(--primary-on-color);
	--wt-navigation-bar-option-background-color: var(
		--wt-navigation-bar-background-color
	);
	--wt-navigation-bar-option-background-hover-color: var(--dp-20-surface-color);
	--wt-navigation-bar-option-background-active-color: var(
		--primary-light-color
	);
	--wt-navigation-bar-expansion-ribbon-color: var(--primary-color);
}
[data-v-bdbe168f]:root {
	--notifications-bar-max-height: 60%;
	--notifications-bar-corner-margin: var(--spacing-sm);
	--notifications-bar-notifications-margin: 0 0 var(--spacing-xs) auto;
	--notifications-bar-z-index: 101;
}
[data-v-bdbe168f]:root {
	--page-wrapper-padding: var(--spacing-sm);
	--page-wrapper-section-padding: var(--spacing-sm);
	--page-wrapper-section-gap: var(--spacing-sm);

	--wt-page-wrapper-background-color: var(--p-surface-50);
	--wt-page-wrapper-content-wrapper-color: var(--content-wrapper-color);
	/* --content-wrapper-border-radius: var(--p-border-radius-lg); */
}
:root.theme--dark[data-v-bdbe168f] {
	--wt-page-wrapper-background-color: var(--p-surface-850);
}
[data-v-bdbe168f]:root {
	--pagination-gap: var(--spacing-xs);
	--pagination-size-input-width: 100px;
}
.wt-player[data-v-bdbe168f] {
	--plyr-color-main: var(--primary-color);
	--plyr-audio-control-color: var(--icon-color);
	--plyr-audio-control-color-hover: var(--icon-btn-hover-color);
	--plyr-audio-controls-background: var(--content-wrapper-color);
	--plyr-controls-icon-size: var(--icon-sm-size);
	--plyr-controls-icon-padding: var(--spacing-2xs);
	--plyr-audio-control-background-hover: transparent;
	--plyr-audio-progress-buffered-background: var(
		--dp-14-surface-color
	); /* loaded color */
	--wt-player-audio-progress-background: var(
		--wt-slider-background-color
	); /* not played color */
	--plyr-tooltip-background: var(--wt-tooltip-background-color);
	--plyr-tooltip-color: var(--wt-tooltip-text-color);
	/* --plyr-control-toggle-checked-background: var(--main-color); */
	--player-close-icon-transform-translate-x: var(--spacing-md);
	/* "-1 * var" for use the negative value of a variable */
	--player-close-icon-transform-translate-y: calc(-1 * var(--spacing-md));

	--wt-slider-border: 1px solid var(--secondary-color);
	--wt-slider-pointer-radius: 50%;
	--wt-slider-pointer-background-color: var(--dp-24-surface-color);
	--wt-slider-pointer-border-color: var(--dp-10-surface-color);
	--wt-slider-pointer-size: 16px;
}
[data-v-bdbe168f]:root {
	--popup-wrapper-z-index: 12;

	--popup-shadow-opacity: 0.8;
	--wt-popup-shadow-color: hsla(0, 0%, 0%, var(--popup-shadow-opacity));

	--wt-popup-size-xs: 300px;
	--wt-popup-size-sm: 500px;
	--wt-popup-size-md: 800px;
	--wt-popup-size-lg: 1140px;

	--popup-max-height: 90%;

	--wt-popup-background-color: var(--dp-24-surface-color);
	--popup-sections-gap: var(--spacing-xs);
	--popup-padding: var(--spacing-sm);

	--popup-header-padding: var(--spacing-xs);
	--wt-popup-header-background-color: var(--dp-18-surface-color);
	--wt-popup-header-text-color: var(--text-main-color);

	--popup-main-section-padding-right: var(--spacing-xs); /* scroll offset */

	--popup-actions-padding: var(--spacing-xs);
}
[data-v-bdbe168f]:root {
	--wt-progress-bar-height: 12px;
	--wt-progress-bar-padding: var(--spacing-3xs);
	--wt-progress-bar-border-radius: var(--wt-progress-bar-padding);

	--wt-progress-bar-background-color: var(--dp-1-surface-color);
	--wt-progress-bar-background-primary-color: var(--primary-color);
	--wt-progress-bar-background-secondary-color: var(--dp-20-surface-color);
	--wt-progress-bar-background-success-color: var(--success-color);
	--wt-progress-bar-background-error-color: var(--error-color);
	--wt-progress-bar-background-warning-color: var(--warning-color);
}
[data-v-bdbe168f]:root {
	--radio-icon-margin: var(--spacing-xs);
	--radio-checkmark-size: 18px;
	--radio-bullet-size: 8px;
	--radio-border: 2px solid;
}
[data-v-bdbe168f]:root {
	--rounded-action-border-size: 2px;
	--rounded-action-padding: calc(
		var(--spacing-xs) -
		var(--rounded-action-border-size)
	);

	--rounded-action-rounded-border-radius: var(--border-radius--pill);

	--rounded-action-bg-color: var(--dp-18-surface-color);
	--rounded-action-bg-hover-color: var(--dp-20-surface-color);

	--rounded-action-active-color: var(--dp-10-surface-color);
}
[data-v-bdbe168f]:root {
	--wt-search-bar-width: 270px;
}
[data-v-bdbe168f]:root {
	--wt-slider-pointer-size: 16px;
	--wt-slider-height: var(--wt-slider-pointer-size);

	--wt-slider-width: 100%;
	--wt-slider-input-height: 8px;
	--wt-slider-border: 1px solid var(--secondary-color);
	--wt-slider-background-color: var(--dp-1-surface-color);
	--wt-slider-background-completed-color: var(--primary-color);

	--wt-slider-pointer-background-color: var(--dp-24-surface-color);
	--wt-slider-pointer-background-hover-color: var(--dp-22-surface-color);
	--wt-slider-pointer-border-color: var(--dp-10-surface-color);

	--wt-slider-pointer-radius: 50%;

	--wt-slider-vertical-container-translation: translate(2px);
	--wt-slider-vertical-transform: translate(-100%, 0) rotate(-90deg);
	--wt-slider-vertical-transform-origin: 100% 0;
}
[data-v-bdbe168f]:root {
	--wt-status-select-padding: 0 calc(var(--icon-size-md) + var(--spacing-xs)) 0
		0; /* reset wt-select padding, but preserve arrow icon padding */

	--wt-status-select-option-text-color: var(--text-main-color);
	--wt-status-select-option-background-color: var(--dp-22-surface-color);
	--wt-status-select-option-background-hover-color: var(
		--secondary-light-color
	);
	/* --wt-status-select-option-background-selected-color: var(--primary-light-color); */

	--wt-status-select-background-color: var(
		--wt-status-select-option-background-color
	);
}
[data-v-bdbe168f]:root {
	--wt-stepper-divider-background-color: var(--secondary-color);
	--wt-stepper-divider-background-completed-color: var(--primary-color);
}
[data-v-bdbe168f]:root {
	--switcher-icon-margin: var(--spacing-xs);
	--switcher-width: 40px;
	--switcher-height: 22px;
	--switcher-cicle-size: 14px;
	--switcher-cicle-margin: 4px;
	--switcher-cicle-translateX: 17px;
	--switcher-border-radius: 24px;
	/* circle */
	--wt-switcher-circle-background-color-on: var(--grey-darken-3);
	--wt-switcher-circle-background-color-on-hover: var(--grey-darken-4);
	--wt-switcher-circle-background-color-on-disabled: var(--grey-lighten-3);

	--wt-switcher-circle-background-color-off: var(--grey-lighten-4);
	--wt-switcher-circle-background-color-off-hover: var(--grey-lighten-5);
	--wt-switcher-circle-background-color-off-disabled: var(--grey-lighten-3);
	/* background */
	--wt-switcher-background-color-on: var(--primary-color);
	--wt-switcher-background-color-on-hover: var(--primary-hover-color);
	--wt-switcher-background-color-on-disabled: var(--primary-light-color);

	--wt-switcher-background-color-off: var(--grey-darken-2);
	--wt-switcher-background-color-off-hover: var(--grey-darken-1);
	--wt-switcher-background-color-off-disabled: var(--grey-lighten-4);
}
:root.theme--dark[data-v-bdbe168f] {
	/* circle */
	--wt-switcher-circle-background-color-off: var(--grey-darken-4);
	--wt-switcher-circle-background-color-off-hover: var(--grey-darken-3);
	--wt-switcher-circle-background-color-off-disabled: var(--grey-darken-3);
	/* background */
	--wt-switcher-background-color-off: var(--grey-lighten-1);
	--wt-switcher-background-color-off-hover: var(--grey-lighten-2);
	--wt-switcher-background-color-off-disabled: var(--grey-darken-2);
}
[data-v-bdbe168f]:root {
	--table-actions-padding: var(--spacing-xs);
	--table-actions-icon-gap: var(--spacing-xs);
}
[data-v-bdbe168f]:root {
	--table-col-min-width: 140px;

	--table-head-sort-arrow-margin: var(--spacing-xs);
	--table-head-border: 1px solid;

	--table-min-height: 24px; /* 24px icon size or body-1 lh */
	--table-column-gap: var(--spacing-xs);
	--table-row-padding: var(--spacing-xs);

	--wt-table-head-border-color: var(--grey-lighten-1);
	--wt-table-head-background-color: var(--content-wrapper-color);
	--wt-table-primary-color: var(--content-wrapper-color);
	--wt-table-zebra-color: var(--dp-18-surface-color);
}
:root.theme--dark[data-v-bdbe168f] {
	--wt-table-head-border-color: var(--grey-darken-1);
}
[data-v-bdbe168f]:root {
	--tabs-underiline-height: 1px;
	--tabs-underiline-color: transparent;

	--tab-padding: var(--spacing-2xs);
	--tab-gap: var(--spacing-xs);
	--wt-tabs-text-color: var(--text-main-color);
	--wt-tabs-text-hover-color: var(--wt-tabs-text-color);
	--wt-tabs-text-active-color: var(--wt-tabs-text-color);
	--tab-border: 4px solid;
	--wt-tabs-underline-active-color: var(--primary-color);
	--tab-z-index: 1;
}
[data-v-bdbe168f]:root {
	--textarea-min-height: 100px;
	--textarea-padding: var(--input-padding);
}
[data-v-bdbe168f]:root {
	--timepicker-input-width: 80px;
	--timepicker-input-margin: var(--spacing-xs);
}
[data-v-bdbe168f]:root {
	--tooltip-padding: var(--spacing-2xs) var(--spacing-xs);

	--wt-tooltip-text-color: var(--text-main-color);
	--wt-tooltip-background-color: var(--dp-24-surface-color);

	--tooltip-elevation: var(--elevation-10);
}
[data-v-bdbe168f]:root {
	--wt-tree-item-active: var(--primary-light-color);
	--wt-tree-item-active-on: var(--grey-darken-4);

	--wt-tree-item-searched: var(--light-blue-lighten-4);
	--wt-tree-item-searched-on: var(--grey-darken-4);

	--wt-tree-item: var(--primary-light-color);
	--wt-tree-item-on: var(--grey-darken-1);

	--wt-tree-item-hover: var(--dp-24-surface-color);
	--wt-tree-item-hover-on: var(--grey-darken-1);
}
:root.theme--dark[data-v-bdbe168f] {
	--wt-tree-item-active: var(--primary-light-color);
	--wt-tree-item-active-on: var(--grey-lighten-4);

	--wt-tree-item-searched: var(--light-blue-lighten-2);
	--wt-tree-item-searched-on: var(--grey-darken-4);

	--wt-tree-item: var(--primary-light-color);
	--wt-tree-item-on: var(--grey-lighten-3);

	--wt-tree-item-hover-on: var(--grey-lighten-3);
}
[data-v-bdbe168f]:root {
	--wt-tree-table-col-min-witdh: var(--table-col-min-width);

	--wt-tree-table-head-sort-arrow-margin: var(--table-head-sort-arrow-margin);
	--wt-tree-table-head-border: var(--table-head-border);

	--wt-tree-table-min-height: var(--table-min-height);
	--wt-tree-table-column-gap: var(--table-column-gap);
	--wt-tree-table-row-padding: var(--table-row-padding);

	--wt-tree-table-head-border-color: var(--wt-table-head-border-color);
	--wt-tree-table-head-background-color: var(--wt-table-head-background-color);
	--wt-tree-table-primary-color: var(--wt-table-primary-color);
	--wt-tree-table-zebra-color: var(--wt-table-zebra-color);
}
:root.theme--dark[data-v-bdbe168f] {
	--wt-tree-table-head-border-color: var(--wt-table-head-border-color);
}
[data-v-bdbe168f]:root {
	--content-wrapper-padding: var(--spacing-xs);
	--content-wrapper-gap: var(--spacing-xs);
}
.table-page.wt-page-wrapper[data-v-bdbe168f] {
	width: 100%;
	height: 100%;
}
.table-page .wt-page-wrapper__main[data-v-bdbe168f],

.wt-page-wrapper__main[data-v-bdbe168f]:has(.table-section) {
	min-height: 0;
}
.table-section[data-v-bdbe168f] {
	display: flex;
	flex-direction: column;
	width: 100%;
	flex: 1;
	min-height: 0;
}
.table-section__table-wrapper[data-v-bdbe168f] {
	display: flex;
	flex: 1 1 100%;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	min-height: 0;
	gap: var(--spacing-sm);
}
.table-section__table-wrapper .table-wrapper__visible-scroll-wrapper[data-v-bdbe168f] {
	flex-grow: 1;
}
.table-section__table-wrapper .wt-pagination[data-v-bdbe168f] {
	margin-top: auto;
}
.table-section__visible-scroll-wrapper[data-v-bdbe168f] {
	overflow: visible;
	height: 100%;
}
.table-section__visible-scroll-wrapper .wt-table[data-v-bdbe168f] {
	overflow: visible;
}
.table-title[data-v-bdbe168f] {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: var(--spacing-sm) 0;
}
.table-title__title[data-v-bdbe168f] {
	font-family: "Montserrat", monospace;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-transform: none;
}
.table-title__title + .hint[data-v-bdbe168f] {
	top: -2px;
}
.table-title__actions-wrap[data-v-bdbe168f] {
	display: flex;
	align-items: center;
	gap: var(--table-actions-icon-gap);
}
.main-section-wrapper .wt-loader.wt-brand-loader[data-v-bdbe168f] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 1;
}
.table-wrapper--tab-table[data-v-bdbe168f] {
	position: relative;
}
.table-wrapper--tab-table .wt-loader.wt-brand-loader[data-v-bdbe168f] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 1;
}
.table-wrapper--tab-table .table-loading-wrapper[data-v-bdbe168f] {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	min-height: 0;
}
.opened-card[data-v-bdbe168f] {
	width: 100%;
}
.opened-card.wt-page-wrapper[data-v-bdbe168f],
.opened-card.wt-dual-panel[data-v-bdbe168f] {
	width: 100%;
}
.opened-card-tabs[data-v-bdbe168f] {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: var(--spacing-sm);
}
.opened-card-tabs__tab[data-v-bdbe168f] {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: var(--spacing-sm);
	min-height: 0;
}
.opened-card-header[data-v-bdbe168f] {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin: var(--spacing-sm) 0;
}
.opened-card-header__title[data-v-bdbe168f] {
	font-family: "Montserrat", monospace;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-transform: none;
}
.opened-card-header__title + .hint[data-v-bdbe168f] {
	top: -2px;
}
.opened-card-form[data-v-bdbe168f] {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.opened-card-input-grid[data-v-bdbe168f] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: minmax(auto, auto);
	align-items: flex-start;
	grid-column-gap: var(--spacing-sm);
	grid-row-gap: var(--spacing-sm);
}
.opened-card-input-grid--1-col[data-v-bdbe168f] {
	grid-template-columns: 1fr;
}
.opened-card-input-grid--w50[data-v-bdbe168f] {
	width: 50%;
}
.opened-card-input-grid--w100[data-v-bdbe168f] {
	width: 100%;
}
/*
	@author HlukhovYe
	layer needed beacuse of manipulating primevue's default typography
	https://webitel.atlassian.net/browse/WTEL-8775?focusedCommentId=723773
*/
@layer wt-default {
[data-v-bdbe168f]:root {
    --transition: 0.2s;
    --box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    /* viewport breakpoints */
    --viewport-lg: 1904px;
    --viewport-md: 1264px;
    --viewport-sm: 960px;
    --viewport-xs: 600px;
}
html[data-v-bdbe168f] {
    height: 100%;
    font-size: 16px;
}
body[data-v-bdbe168f] {
    font-family: "Montserrat", monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-transform: none;
    margin: 0;
    height: 100%;
    min-height: 100%;
}
[data-v-bdbe168f] {
    box-sizing: border-box;
}
.theme--dark body[data-v-bdbe168f] {
    color-scheme: dark;
}
h1[data-v-bdbe168f],
  h2[data-v-bdbe168f],
  h3[data-v-bdbe168f],
  h4[data-v-bdbe168f],
  h5[data-v-bdbe168f],
  h6[data-v-bdbe168f],
  p[data-v-bdbe168f] {
    margin: 0;
    font-weight: normal;
}
  /* reset ul styles */
ul[data-v-bdbe168f] {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
iframe[data-v-bdbe168f] {
    outline: none;
    border: none;
}
a[data-v-bdbe168f] {
    color: #000;
    text-decoration: none;
}
.hidden[data-v-bdbe168f] {
    opacity: 0;
    pointer-events: none;
}
}
/*
	@author HlukhovYe
	reset input autofill styles https://webitel.atlassian.net/browse/WTEL-9005
*/
input[data-v-bdbe168f]:-webkit-autofill,
input[data-v-bdbe168f]:-webkit-autofill:hover,
input[data-v-bdbe168f]:-webkit-autofill:focus,
textarea[data-v-bdbe168f]:-webkit-autofill,
textarea[data-v-bdbe168f]:-webkit-autofill:hover,
textarea[data-v-bdbe168f]:-webkit-autofill:focus,
select[data-v-bdbe168f]:-webkit-autofill,
select[data-v-bdbe168f]:-webkit-autofill:hover,
select[data-v-bdbe168f]:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--p-inputtext-color);
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s; /* prevents an immediate color change */
}

/* https://github.com/Akryum/floating-vue/issues/488 */
.v-popper__arrow-container[data-v-bdbe168f] {
  display: none;
}
.config-form-grid[data-v-bdbe168f], .config-form[data-v-bdbe168f] {
  display: grid;
  grid-row-gap: var(--spacing-xs);
}
.p-toggleswitch[data-v-bdbe168f] {
  flex-shrink: 0;
}.config-form-section-item-title[data-v-49d95842] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}.config-form--park__lot .config-form--park__lot-range[data-v-badea393] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}
.config-form--park__lot .config-form--park__lot-range .wt-input[data-v-badea393] {
  flex: 1 0 calc(50% - var(--spacing-xs));
}.patch-members-patch__title-wrapper[data-v-9994f857] {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
}
.patch-members-patch__conditional-input-wrapper[data-v-9994f857] {
  display: flex;
  gap: var(--spacing-2xs);
}
.patch-members-patch__conditional-input-wrapper > .wt-icon-btn[data-v-9994f857] {
  height: fit-content;
  margin-top: 24px;
}
.patch-members-patch__conditional-input-wrapper .wt-input[data-v-9994f857],
.patch-members-patch__conditional-input-wrapper .combined-select-input[data-v-9994f857] {
  width: 100%;
}.get-didgits-or-get-speech-config-form-extension__delimiter[data-v-e31dcd96] {
  text-align: center;
}.wt-chip.playback-chip .playback-chips__chip-name[data-v-39d7d0be] {
  white-space: normal;
  word-break: break-all;
  overflow-wrap: break-word;
}.playback-draggable__chips-wrapper[data-v-54b527ad] {
  display: flex;
  flex-wrap: wrap;
  cursor: move;
  gap: var(--spacing-xs);
}/* Reset style in order to not have double paddings and other styling of
 included component config-form-section-item */
.combined-select-input[data-v-5cadac3c] {
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.combined-select-input[data-v-5cadac3c] .combined-select-input__chips-wrapper {
  display: none;
}.processing-form-fields__header-wrapper[data-v-972a1a87] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs);
}
.processing-form-fields__wrapper[data-v-972a1a87] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs);
}
.processing-form-fields__wrapper .processing-form-fields__input[data-v-972a1a87] {
  flex-grow: 1;
}.processing-form-filters__header-wrapper[data-v-20bf09bc] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs);
}
.processing-form-filters__wrapper[data-v-20bf09bc] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs);
}
.processing-form-filters__wrapper .processing-form-filters__input[data-v-20bf09bc] {
  flex-grow: 1;
}.form-table-response-json[data-v-e6e206a9] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.form-table-response-json__textarea-wrapper[data-v-e6e206a9] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}
.form-table-response-json__textarea[data-v-e6e206a9] .wt-textarea__wrapper textarea {
  height: 200px;
}.form-table-actions__wrapper[data-v-01fac353] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.form-table-actions__wrapper .wt-input[data-v-01fac353] {
  flex-grow: 1;
}
.form-table-actions__action-wrapper[data-v-01fac353] {
  display: flex;
  gap: var(--spacing-xs);
}
.form-table-actions__chips-wrapper[data-v-01fac353] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}
.form-table-actions__chip-name[data-v-01fac353] {
  word-break: break-all;
  overflow-wrap: break-word;
}.form-table-columns__wrapper[data-v-42708ab4] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.form-table-columns__wrapper .wt-input[data-v-42708ab4] {
  flex-grow: 1;
}.wt-indicator[data-v-a1f4cf78] {
  color: var(--text-primary-color);
}.wt-indicator[data-v-2b27fa7a] {
  color: var(--text-primary-color);
}.config-form__option[data-v-cfde3ce8] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}.wt-socket {
  width: var(--icon-sm-size);
  height: var(--icon-sm-size);
}

/* Animation */
@keyframes rotate {
to {
    transform: rotate(360deg);
}
}
/* Variables */
.loading {
  position: relative;
}
.loading__ring {
  background-color: var(--secondary-light-color);
  border: 2px solid var(--secondary-color);
  border-radius: 50%;
  position: absolute;
  width: var(--icon-sm-size);
  height: var(--icon-sm-size);
}

/* Loading Icon *//*! https://github.com/retejs/connection-plugin/commit/206ca0fd7fb82801ac45a0f7180ae05dff9ed901 */
.wt-connection[data-v-ddf0b570] {
  position: absolute;
  width: 9999px;
  height: 9999px;
  pointer-events: none;
}
.wt-connection .wt-connection-line path[data-v-ddf0b570] {
  stroke: var(--flow-connection-color);
}
.wt-connection--selected .wt-connection-line path[data-v-ddf0b570] {
  stroke: red !important;
}
.wt-connection--goto .wt-connection-line path[data-v-ddf0b570] {
  stroke: var(--flow-connection-goto-color) !important;
}
.wt-connection--failover .wt-connection-line path[data-v-ddf0b570] {
  stroke: var(--flow-connection-failover-color) !important;
}
.wt-connection-line[data-v-ddf0b570] {
  overflow: visible !important;
}
.wt-connection-line path[data-v-ddf0b570] {
  pointer-events: auto;
  fill: none;
  stroke-width: 5px;
  stroke: steelblue;
}#lasso {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#lasso polygon {
  stroke: rgba(108, 127, 233, 0.6784313725);
  stroke-dasharray: 10 5;
  stroke-width: 2;
  fill: rgba(144, 161, 255, 0.21);
  z-index: 5;
  animation: dash linear 1s infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 15;
  }
}.zoom-panel[data-v-8c94780d] {
  position: absolute;
  right: calc(var(--config-panel-width) + var(--workspace-content-offset-side) + var(--spacing-sm));
  bottom: var(--workspace-content-offset-bottom);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--zoom-panel-width);
  height: var(--zoom-panel-height);
  padding: var(--spacing-sm);
  border-radius: var(--border-radius);
  background-color: var(--content-wrapper-color);
  box-shadow: var(--elevation-1);
  gap: var(--spacing-xs);
}
.zoom-panel__percent[data-v-8c94780d] {
  flex: 0 0 37px;
}
.disable-view-nodes .node-header .node-header__close-icon[data-v-8c94780d] {
  display: none;
}[data-v-4db48597] .editor-background {
  position: absolute;
  top: -320000px;
  left: -320000px;
  z-index: -10000;
  background: var(--wt-page-wrapper-background-color);
  background-image: linear-gradient(var(--secondary-color), transparent 4px), linear-gradient(90deg, var(--secondary-color), transparent 4px), linear-gradient(var(--secondary-color), transparent 2px), linear-gradient(90deg, var(--secondary-color), transparent 2px);
  background-position: center center;
  background-size: 70px 70px, 70px 70px, 10px 10px, 10px 10px;
  width: 640000px;
  height: 640000px;
}
[data-v-4db48597] .editor-background.overlap {
  opacity: 0.75;
  z-index: 1;
}
.wt-canvas[data-v-4db48597] {
  width: 100%;
  height: 100%;
}
.wt-canvas[data-v-4db48597] .minimap {
  right: calc(var(--config-panel-width) + var(--workspace-content-offset-side) + var(--spacing-sm));
  bottom: calc(var(--workspace-content-offset-bottom) + var(--spacing-sm) + var(--zoom-panel-height));
  box-sizing: border-box;
  width: var(--zoom-panel-width);
  border-color: var(--secondary-color);
  border-radius: var(--border-radius);
  background: var(--content-wrapper-color);
}
.wt-canvas[data-v-4db48597] .minimap .mini-node {
  background: var(--secondary-color);
}
@layer wt-default, base, primevue, wt-typography;
/* 
	@author Palonnyi Oleksandr
	Must be first — locks cascade layer priority 
	before any content is loaded: wt-default < base < primevue < wt-typography.
	[WTEL-9107](https://webitel.atlassian.net/browse/WTEL-9107)

	link for complex comment https://webitel.atlassian.net/browse/WTEL-9107?focusedCommentId=740565
*/
[data-v-a5e612a9]:root {
	--scrollbar-width: 10px;
	--scrollbar-height: 10px;
	--scrollbar-thumb-width: 10px;
	--scrollbar-bg-color: var(--p-surface-50);
	--scrollbar-thumb-color: var(--p-surface-150);
	--scrollbar-hover-thumb-color: var(--p-surface-250);
	--scrollbar-border-radius: var(--border-radius);
}
:root.theme--dark[data-v-a5e612a9] {
	--scrollbar-bg-color: var(--p-surface-850);
	--scrollbar-thumb-color: var(--p-surface-700);
	--scrollbar-hover-thumb-color: var(--p-surface-800);
}
.wt-scrollbar[data-v-a5e612a9] {
	/* scrollbar itself */
}
.wt-scrollbar[data-v-a5e612a9]::-webkit-scrollbar {
	width: var(--scrollbar-width);
	height: var(--scrollbar-height);
	cursor: pointer;
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-bg-color);
}

/* scrollable element */
.wt-scrollbar[data-v-a5e612a9]::-webkit-scrollbar-thumb {
	width: var(--scrollbar-thumb-width);
	height: var(--scrollbar-thumb-height);
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-thumb-color);
}
.wt-scrollbar[data-v-a5e612a9]::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-hover-thumb-color);
}
.wt-distant-scrollbar[data-v-a5e612a9]::-webkit-scrollbar {
	width: 14px;
	height: 18px;
	background-color: var(--scrollbar-bg-color);
}
.wt-distant-scrollbar[data-v-a5e612a9]::-webkit-scrollbar-thumb {
	height: 2px;
	border: 4px solid rgba(0, 0, 0, 0);
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-thumb-color);
	background-clip: padding-box;
	/* -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05); */
}
[data-v-a5e612a9]:root {
	--border-radius: var(--spacing-2xs);
	--border-radius--pill: 50px;
}
/*
NOTE:   text-transform: none; is set explicitly cause t-t is inherited from parent
 */

/* 
	@author HlukhovYe
	layer needed for overriding primevue's default typography for the components
	https://webitel.atlassian.net/browse/WTEL-8775?focusedCommentId=723773
*/
@layer wt-typography {
.typo-heading-1[data-v-a5e612a9] {
		font-family: "Montserrat", monospace;
		font-size: 32px;
		font-weight: 600;
		line-height: 48px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-2[data-v-a5e612a9] {
		font-family: "Montserrat", monospace;
		font-size: 24px;
		font-weight: 600;
		line-height: 40px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-3[data-v-a5e612a9] {
		font-family: "Montserrat", monospace;
		font-size: 20px;
		font-weight: 600;
		line-height: 32px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-4[data-v-a5e612a9] {
		font-family: "Montserrat", monospace;
		font-size: 16px;
		font-weight: 600;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-subtitle-1[data-v-a5e612a9] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 500;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-subtitle-2[data-v-a5e612a9] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-body-1[data-v-a5e612a9] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 400;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.56px; */
		/* 0.04em */
}
.typo-body-1-bold[data-v-a5e612a9] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 700;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.56px; */
		/* 0.04em */
}
.typo-body-2[data-v-a5e612a9] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 400;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.16px; */
		/* 0.01em */
}
.typo-body-2-bold[data-v-a5e612a9] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 700;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.16px; */
		/* 0.01em */
}
.typo-button--md[data-v-a5e612a9] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 24px;
		text-transform: uppercase;
		/* letter-spacing: 0.96px; */
		/* 0.06em */
}
.typo-button--sm[data-v-a5e612a9] {
		font-family: "Montserrat", monospace;
		font-size: 10px;
		font-weight: 500;
		line-height: 24px;
		text-transform: uppercase;
		/* letter-spacing: 0.96px; */
		/* 0.06em */
}
.typo-caption[data-v-a5e612a9] {
		font-family: "Montserrat", monospace;
		font-size: 10px;
		font-weight: 400;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.48px; */
		/* 0.03em */
}
.typo-overline[data-v-a5e612a9] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 20px;
		text-transform: uppercase;
		/* letter-spacing: 2.56px; */
		/* 0.16em */
}
}
[data-v-a5e612a9]:root {
	/* LIGHTNESS */
	--lightness-lighten-5: 95%;
	--lightness-lighten-4: 90%;
	--lightness-lighten-3: 80%;
	--lightness-lighten-2: 70%;
	--lightness-lighten-1: 60%;

	--lightness-darken-1: 50%;
	--lightness-darken-2: 45%;
	--lightness-darken-3: 40%;
	--lightness-darken-4: 35%;

	--lightness-accent-1: 75%;
	--lightness-accent-2: 65%;
	--lightness-accent-3: 50%;
	--lightness-accent-4: 40%;

	/* SATURATION */
	--saturation-lighten-5: 92%;
	--saturation-lighten-4: 88%;
	--saturation-lighten-3: 90%;
	--saturation-lighten-2: 90%;
	--saturation-lighten-1: 90%;

	--saturation-darken-1: 75%;
	--saturation-darken-2: 75%;
	--saturation-darken-3: 75%;
	--saturation-darken-4: 75%;

	--saturation-accent-1: 91%;
	--saturation-accent-2: 90%;
	--saturation-accent-3: 97%;
	--saturation-accent-4: 97%;

	/* HUE */
	--hue-red: 0;
	--hue-pink: 337;
	--hue-purple: 291;
	--hue-deep-purple: 263;
	--hue-indigo: 232;
	--hue-blue: 209;
	--hue-light-blue: 202;
	--hue-cyan: 188;
	--hue-teal: 173;
	--hue-green: 121;
	--hue-light-green: 88;
	--hue-lime: 66;
	--hue-yellow: 54;
	--hue-amber: 43;
	--hue-orange: 32;
	--hue-deep-orange: 11;

	/* RED */
	--red-lighten-5: hsla(
		var(--hue-red),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--red-lighten-4: hsla(
		var(--hue-red),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--red-lighten-3: hsla(
		var(--hue-red),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--red-lighten-2: hsla(
		var(--hue-red),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--red-lighten-1: hsla(
		var(--hue-red),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--red-darken-4: hsla(
		var(--hue-red),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--red-darken-3: hsla(
		var(--hue-red),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--red-darken-2: hsla(
		var(--hue-red),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--red-darken-1: hsla(
		var(--hue-red),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--red-accent-4: hsla(
		var(--hue-red),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--red-accent-3: hsla(
		var(--hue-red),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--red-accent-2: hsla(
		var(--hue-red),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--red-accent-1: hsla(
		var(--hue-red),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* PINK */
	--pink-lighten-5: hsla(
		var(--hue-pink),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--pink-lighten-4: hsla(
		var(--hue-pink),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--pink-lighten-3: hsla(
		var(--hue-pink),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--pink-lighten-2: hsla(
		var(--hue-pink),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--pink-lighten-1: hsla(
		var(--hue-pink),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--pink-darken-4: hsla(
		var(--hue-pink),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--pink-darken-3: hsla(
		var(--hue-pink),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--pink-darken-2: hsla(
		var(--hue-pink),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--pink-darken-1: hsla(
		var(--hue-pink),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--pink-accent-4: hsla(
		var(--hue-pink),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--pink-accent-3: hsla(
		var(--hue-pink),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--pink-accent-2: hsla(
		var(--hue-pink),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--pink-accent-1: hsla(
		var(--hue-pink),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* PURPLE */
	--purple-lighten-5: hsla(
		var(--hue-purple),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--purple-lighten-4: hsla(
		var(--hue-purple),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--purple-lighten-3: hsla(
		var(--hue-purple),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--purple-lighten-2: hsla(
		var(--hue-purple),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--purple-lighten-1: hsla(
		var(--hue-purple),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--purple-darken-4: hsla(
		var(--hue-purple),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--purple-darken-3: hsla(
		var(--hue-purple),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--purple-darken-2: hsla(
		var(--hue-purple),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--purple-darken-1: hsla(
		var(--hue-purple),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--purple-accent-4: hsla(
		var(--hue-purple),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--purple-accent-3: hsla(
		var(--hue-purple),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--purple-accent-2: hsla(
		var(--hue-purple),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--purple-accent-1: hsla(
		var(--hue-purple),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* DEEP PURPLE */
	--deep-purple-lighten-5: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--deep-purple-lighten-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--deep-purple-lighten-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--deep-purple-lighten-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--deep-purple-lighten-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--deep-purple-darken-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--deep-purple-darken-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--deep-purple-darken-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--deep-purple-darken-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--deep-purple-accent-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--deep-purple-accent-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--deep-purple-accent-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--deep-purple-accent-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* INDIGO */
	--indigo-lighten-5: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--indigo-lighten-4: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--indigo-lighten-3: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--indigo-lighten-2: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--indigo-lighten-1: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--indigo-darken-4: hsla(
		var(--hue-indigo),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--indigo-darken-3: hsla(
		var(--hue-indigo),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--indigo-darken-2: hsla(
		var(--hue-indigo),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--indigo-darken-1: hsla(
		var(--hue-indigo),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--indigo-accent-4: hsla(
		var(--hue-indigo),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--indigo-accent-3: hsla(
		var(--hue-indigo),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--indigo-accent-2: hsla(
		var(--hue-indigo),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--indigo-accent-1: hsla(
		var(--hue-indigo),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* BLUE */
	--blue-lighten-5: hsla(
		var(--hue-blue),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--blue-lighten-4: hsla(
		var(--hue-blue),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--blue-lighten-3: hsla(
		var(--hue-blue),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--blue-lighten-2: hsla(
		var(--hue-blue),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--blue-lighten-1: hsla(
		var(--hue-blue),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--blue-darken-4: hsla(
		var(--hue-blue),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--blue-darken-3: hsla(
		var(--hue-blue),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--blue-darken-2: hsla(
		var(--hue-blue),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--blue-darken-1: hsla(
		var(--hue-blue),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--blue-accent-4: hsla(
		var(--hue-blue),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--blue-accent-3: hsla(
		var(--hue-blue),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--blue-accent-2: hsla(
		var(--hue-blue),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--blue-accent-1: hsla(
		var(--hue-blue),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIGHT BLUE */
	--light-blue-lighten-5: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--light-blue-lighten-4: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--light-blue-lighten-3: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--light-blue-lighten-2: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--light-blue-lighten-1: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--light-blue-darken-4: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--light-blue-darken-3: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--light-blue-darken-2: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--light-blue-darken-1: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--light-blue-accent-4: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--light-blue-accent-3: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--light-blue-accent-2: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--light-blue-accent-1: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* CYAN */
	--cyan-lighten-5: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--cyan-lighten-4: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--cyan-lighten-3: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--cyan-lighten-2: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--cyan-lighten-1: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--cyan-darken-4: hsla(
		var(--hue-cyan),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--cyan-darken-3: hsla(
		var(--hue-cyan),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--cyan-darken-2: hsla(
		var(--hue-cyan),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--cyan-darken-1: hsla(
		var(--hue-cyan),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--cyan-accent-4: hsla(
		var(--hue-cyan),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--cyan-accent-3: hsla(
		var(--hue-cyan),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--cyan-accent-2: hsla(
		var(--hue-cyan),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--cyan-accent-1: hsla(
		var(--hue-cyan),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* TEAL */
	--teal-lighten-5: hsla(
		var(--hue-teal),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--teal-lighten-4: hsla(
		var(--hue-teal),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--teal-lighten-3: hsla(
		var(--hue-teal),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--teal-lighten-2: hsla(
		var(--hue-teal),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--teal-lighten-1: hsla(
		var(--hue-teal),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--teal-darken-4: hsla(
		var(--hue-teal),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--teal-darken-3: hsla(
		var(--hue-teal),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--teal-darken-2: hsla(
		var(--hue-teal),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--teal-darken-1: hsla(
		var(--hue-teal),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--teal-accent-4: hsla(
		var(--hue-teal),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--teal-accent-3: hsla(
		var(--hue-teal),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--teal-accent-2: hsla(
		var(--hue-teal),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--teal-accent-1: hsla(
		var(--hue-teal),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* GREEN */
	--green-lighten-5: hsla(
		var(--hue-green),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--green-lighten-4: hsla(
		var(--hue-green),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--green-lighten-3: hsla(
		var(--hue-green),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--green-lighten-2: hsla(
		var(--hue-green),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--green-lighten-1: hsla(
		var(--hue-green),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--green-darken-4: hsla(
		var(--hue-green),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--green-darken-3: hsla(
		var(--hue-green),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--green-darken-2: hsla(
		var(--hue-green),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--green-darken-1: hsla(
		var(--hue-green),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--green-accent-4: hsla(
		var(--hue-green),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--green-accent-3: hsla(
		var(--hue-green),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--green-accent-2: hsla(
		var(--hue-green),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--green-accent-1: hsla(
		var(--hue-green),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIGHT GREEN */
	--light-green-lighten-5: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--light-green-lighten-4: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--light-green-lighten-3: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--light-green-lighten-2: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--light-green-lighten-1: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--light-green-darken-4: hsla(
		var(--hue-light-green),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--light-green-darken-3: hsla(
		var(--hue-light-green),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--light-green-darken-2: hsla(
		var(--hue-light-green),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--light-green-darken-1: hsla(
		var(--hue-light-green),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--light-green-accent-4: hsla(
		var(--hue-light-green),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--light-green-accent-3: hsla(
		var(--hue-light-green),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--light-green-accent-2: hsla(
		var(--hue-light-green),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--light-green-accent-1: hsla(
		var(--hue-light-green),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIME */
	--lime-lighten-5: hsla(
		var(--hue-lime),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--lime-lighten-4: hsla(
		var(--hue-lime),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--lime-lighten-3: hsla(
		var(--hue-lime),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--lime-lighten-2: hsla(
		var(--hue-lime),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--lime-lighten-1: hsla(
		var(--hue-lime),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--lime-darken-4: hsla(
		var(--hue-lime),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--lime-darken-3: hsla(
		var(--hue-lime),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--lime-darken-2: hsla(
		var(--hue-lime),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--lime-darken-1: hsla(
		var(--hue-lime),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--lime-accent-4: hsla(
		var(--hue-lime),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--lime-accent-3: hsla(
		var(--hue-lime),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--lime-accent-2: hsla(
		var(--hue-lime),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--lime-accent-1: hsla(
		var(--hue-lime),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* yellow */
	--yellow-lighten-5: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--yellow-lighten-4: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--yellow-lighten-3: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--yellow-lighten-2: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--yellow-lighten-1: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--yellow-darken-4: hsla(
		var(--hue-yellow),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--yellow-darken-3: hsla(
		var(--hue-yellow),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--yellow-darken-2: hsla(
		var(--hue-yellow),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--yellow-darken-1: hsla(
		var(--hue-yellow),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--yellow-accent-4: hsla(
		var(--hue-yellow),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--yellow-accent-3: hsla(
		var(--hue-yellow),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--yellow-accent-2: hsla(
		var(--hue-yellow),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--yellow-accent-1: hsla(
		var(--hue-yellow),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* amber */
	--amber-lighten-5: hsla(
		var(--hue-amber),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--amber-lighten-4: hsla(
		var(--hue-amber),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--amber-lighten-3: hsla(
		var(--hue-amber),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--amber-lighten-2: hsla(
		var(--hue-amber),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--amber-lighten-1: hsla(
		var(--hue-amber),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--amber-darken-4: hsla(
		var(--hue-amber),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--amber-darken-3: hsla(
		var(--hue-amber),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--amber-darken-2: hsla(
		var(--hue-amber),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--amber-darken-1: hsla(
		var(--hue-amber),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--amber-accent-4: hsla(
		var(--hue-amber),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--amber-accent-3: hsla(
		var(--hue-amber),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--amber-accent-2: hsla(
		var(--hue-amber),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--amber-accent-1: hsla(
		var(--hue-amber),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* orange */
	--orange-lighten-5: hsla(
		var(--hue-orange),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--orange-lighten-4: hsla(
		var(--hue-orange),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--orange-lighten-3: hsla(
		var(--hue-orange),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--orange-lighten-2: hsla(
		var(--hue-orange),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--orange-lighten-1: hsla(
		var(--hue-orange),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--orange-darken-4: hsla(
		var(--hue-orange),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--orange-darken-3: hsla(
		var(--hue-orange),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--orange-darken-2: hsla(
		var(--hue-orange),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--orange-darken-1: hsla(
		var(--hue-orange),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--orange-accent-4: hsla(
		var(--hue-orange),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--orange-accent-3: hsla(
		var(--hue-orange),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--orange-accent-2: hsla(
		var(--hue-orange),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--orange-accent-1: hsla(
		var(--hue-orange),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* deep-orange */
	--deep-orange-lighten-5: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--deep-orange-lighten-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--deep-orange-lighten-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--deep-orange-lighten-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--deep-orange-lighten-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--deep-orange-darken-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--deep-orange-darken-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--deep-orange-darken-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--deep-orange-darken-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--deep-orange-accent-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--deep-orange-accent-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--deep-orange-accent-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--deep-orange-accent-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* grey */

	--lightness-lighten-5-grey: 94%;
	--lightness-lighten-4-grey: 84%;
	--lightness-lighten-3-grey: 74%;
	--lightness-lighten-2-grey: 64%;
	--lightness-lighten-1-grey: 54%;

	--lightness-darken-1-grey: 44%;
	--lightness-darken-2-grey: 34%;
	--lightness-darken-3-grey: 24%;
	--lightness-darken-4-grey: 14%;
	--lightness-darken-5-grey: 4%;

	--saturation-grey: 20%;
	--hue-grey: 225;

	--grey-lighten-5: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-5-grey),
		1
	);
	--grey-lighten-4: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-4-grey),
		1
	);
	--grey-lighten-3: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-3-grey),
		1
	);
	--grey-lighten-2: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-2-grey),
		1
	);
	--grey-lighten-1: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-1-grey),
		1
	);

	--grey-darken-1: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-1-grey),
		1
	);
	--grey-darken-2: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-2-grey),
		1
	);
	--grey-darken-3: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-3-grey),
		1
	);
	--grey-darken-4: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-4-grey),
		1
	);
	--grey-darken-5: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-5-grey),
		1
	);

	--black: hsla(0, 0%, 0%, 1);
	--white: hsla(0, 0%, 100%, 1);
}
[data-v-a5e612a9]:root {
	/* HSL COLORS HUE VALUE */
	--_accent-color-hue: 42;
	--_secondary-color-hue: 202;
	--_page-bg-color-hue: 209;
	--_icon-color-hue: 202;
	--_positive-color-hue: 119;
	--_negative-color-hue: 11;

	--_hold-color-hue: 54;
	--_transfer-color-hue: 227;
	--_job-color-hue: 209;

	/* DEFAULT STATES OPACITY */
	--_opacity--default: 0.8;
	--_opacity--hover: 1;
	--_opacity--active: 1;
	--_opacity--focus: 0.8;
	--_opacity--disabled: 0.4;

	/* BASIC HSL COLORS VALUES */
	--_accent-color: var(--_accent-color-hue), 100%, 50%;
	--_main-color: var(--_accent-color-hue), 20%, 99%;
	--_contrast-color: var(--_accent-color-hue), 20%, 1%;
	--_secondary-color: var(--_secondary-color-hue), 20%, 90%;
	--_secondary-color-50: var(--_secondary-color-hue), 22%, 96%;
	--_page-bg-color: var(--_page-bg-color-hue), 20%, 95%;
	--_header-color: var(--_page-bg-color-hue), 20%, 90%;
	--_positive-color: var(--_positive-color-hue), 60%, 40%;
	--_negative-color: var(--_negative-color-hue), 80%, 50%;
	--_icon-color: var(--_icon-color-hue), 100%, 15%;

	--_hold-color: var(--_hold-color-hue), 80%, 50%;
	--_transfer-color: var(--_transfer-color-hue), 80%, 50%;
	--_job-color: var(--_job-color-hue), 96%, 57%;

	/* MAIN COLORS */
	--accent-color: hsla(var(--_accent-color), 1);

	--main-color: hsla(var(--_main-color), 1);

	--contrast-color: hsla(var(--_contrast-color), 1);

	--secondary-color: hsla(var(--_secondary-color), 1);
	--secondary-color-50: hsla(var(--_secondary-color-50), 1);

	/* ICON COLORS */
	--icon-color-secondary: hsla(var(--_icon-color), 0.25);

	--icon-color--hover: hsla(var(--_icon-color), var(--_opacity--hover));

	--icon-color-accent: var(--accent-color);
	--icon-color-contrast: hsla(var(--_main-color), var(--_opacity--default));
	--icon-color-active: var(--icon-color--hover);
	--icon-color-disabled: hsla(var(--_icon-color), var(--_opacity--disabled));
	--icon-color-success: var(--true-color);
	--icon-color-danger: var(--false-color);
	--icon-color-transfer: var(--transfer-color);
	--icon-color-hold: var(--hold-color);
	--icon-color-secondary-50: var(--secondary-color-50);

	--page-bg-color: hsla(var(--_page-bg-color), 1);
	--header-color: hsla(var(--_header-color), 1);

	--accent-secondary-color: hsla(var(--_accent-color), 0.3);

	/* SEMANTIC COLORS */
	--disabled-color: hsl(var(--_contrast-color), var(--_opacity--disabled));

	--true-color: hsla(var(--_positive-color), var(--_opacity--default));
	--true--hover-color: hsla(var(--_positive-color), var(--_opacity--hover));

	--false-color: hsla(var(--_negative-color), var(--_opacity--default));
	--false--hover-color: hsla(var(--_negative-color), var(--_opacity--hover));

	--hold-color: hsla(var(--_hold-color), var(--_opacity--default));
	--hold--hover-color: hsla(var(--_hold-color), var(--_opacity--hover));

	--transfer-color: hsla(var(--_transfer-color), var(--_opacity--default));
	--transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover));

	--job-color: hsla(var(--_job-color), var(--_opacity--default));
	--job--hover-color: hsla(var(--_job-color), var(--_opacity--hover));

	--link-color: hsla(205, 90%, 45%, 1);
	--link--hover-color: hsla(205, 90%, 60%, 1);

	/* SUBORDINATE COLORS */
	--tag-bg-color: var(--accent-secondary-color);

	/* FORM STATES OPACITY */
	--form-opacity--default: var(--_opacity--default);
	--form-opacity--hover: var(--_opacity--hover);
	--form-opacity--active: var(--_opacity--active);
	--form-opacity--focus: var(--_opacity--focus);
	--form-opacity--disabled: var(--_opacity--disabled);

	--form-placeholder-opacity: 0.6;
	--form-placeholder-opacity--focus: 0.4;
	--form-border-opacity--disabled: 0.05;

	--form-opacity--ouline--default: 0.4;
	--form-opacity--ouline--hover: 0.7;

	/* FORM COLORS */
	--form-input-color: var(--contrast-color);
	/* user input color */

	--form-label-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);
	--form-label--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--hover)
	);
	--form-label--active-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--active)
	);
	--form-label--disabled-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--disabled)
	);

	--form-border-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);
	--form-border--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--hover)
	);
	--form-border--disabled-color: hsla(
		var(--_contrast-color),
		var(--form-border-opacity--disabled)
	);

	--form-placeholder-color: hsla(
		var(--_contrast-color),
		var(--form-placeholder-opacity)
	);
	--form-placeholder-color--focus: hsla(
		var(--_contrast-color),
		var(--form-placeholder-opacity--focus)
	);
	--form-placeholder-color--disabled: hsla(
		var(--_contrast-color),
		var(--form-opacity--disabled)
	);

	/* outline */
	--form-outline-label-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);

	--form-outline-border-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--ouline--default)
	);
	--form-outline-border--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--ouline--hover)
	);

	/* TEXT OPACITY */
	--text-opacity--default: var(--_opacity--default);
	--text-opacity----outline--default: 0.7;
	--text-opacity--disabled: 0.5;

	/* TEXT COLORS */
	--text-primary-color: hsla(
		var(--_contrast-color),
		var(--text-opacity--default)
	);
	--text-outline-color: hsla(
		var(--_contrast-color),
		var(--text-opacity----outline--default)
	);
	--text-contrast-color: hsla(var(--_main-color), var(--text-opacity--default));
	--text--disabled-color: hsla(
		var(--_contrast-color),
		var(--text-opacity--disabled)
	);

	/* CHAT COLORS */
	--_chat-client-color: var(--_accent-color);
	--_chat-client-opacity: 0.2;
	--_chat-agent-color: var(--_secondary-color-50);
	--_chat-agent-opacity: 1;

	--chat-client-message-bg-color: hsla(
		var(--_chat-client-color),
		var(--_chat-client-opacity)
	);
	--chat-agent-message-bg-color: hsla(
		var(--_chat-agent-color),
		var(--_chat-agent-opacity)
	);
	--chat-client-attachment-bg-color: hsla(
		var(--_chat-client-color),
		var(--_chat-client-opacity)
	);
	--chat-agent-attachment-bg-color: hsla(
		var(--_chat-agent-color),
		var(--_chat-agent-opacity)
	);
}
/* shared text field colors */
[data-v-a5e612a9]:root {
	/* TODO: move to separate helper-text component */
	/* helper */
	--wt-helper-text-color: var(--text-main-color);
	--wt-helper-text-disabled-color: var(--text-disabled-color);
	--wt-helper-text-invalid-color: var(--text-error-color);

	/* text */
	--wt-text-field-text-color: var(--black);

	/* placeholder */
	--wt-text-field-error-text-color: var(--error-color);
	--wt-text-field-placeholder-color: var(--grey-lighten-1);
	--wt-text-field-placeholder-error-color: var(--error-color);
	--wt-text-field-placeholder-disabled-color: var(--text-disabled-color);

	/* border */
	--wt-text-field-input-border-color: var(--grey-darken-1);
	--wt-text-field-input-border-disabled-color: var(--dp-16-surface-color);
	--wt-text-field-input-border-error-color: var(--error-color);

	/* input bg */
	--wt-text-field-input-background-disabled-color: var(--dp-16-surface-color);

	/* select */
	--wt-text-field-select-option-text-color: var(--text-main-color);
	--wt-text-field-select-option-text-hover-color: var(--primary-on-color);
	--wt-text-field-select-option-text-selected-color: var(--primary-on-color);

	--wt-text-field-select-option-wrapper-border-color: var(
		--dp-22-surface-color
	);
	--wt-text-field-select-option-background-color: var(--dp-22-surface-color);
	--wt-text-field-select-option-background-hover-color: var(
		--primary-light-color
	);
	--wt-text-field-select-option-background-selected-color: var(--primary-color);
}
:root.theme--dark[data-v-a5e612a9] {
	/* text */
	--wt-text-field-text-color: var(--white);

	--wt-text-field-input-border-color: var(--grey-lighten-1);
}
[data-v-a5e612a9]:root {
	/* dp colors */
	--dp-24-surface-color: hsl(0, 0%, 100%);
	--dp-23-surface-color: hsl(225, 20%, 99%);
	--dp-22-surface-color: hsl(225, 20%, 98%);
	--dp-21-surface-color: hsl(225, 20%, 97%);
	--dp-20-surface-color: hsl(225, 20%, 96%);
	--dp-19-surface-color: hsl(225, 20%, 95%);
	--dp-18-surface-color: hsl(225, 20%, 94%);
	--dp-17-surface-color: hsl(225, 20%, 93%);
	--dp-16-surface-color: hsl(225, 20%, 92%);
	--dp-15-surface-color: hsl(225, 20%, 91%);
	--dp-14-surface-color: hsl(225, 20%, 90%);
	--dp-13-surface-color: hsl(225, 20%, 89%);
	--dp-12-surface-color: hsl(225, 20%, 88%);
	--dp-11-surface-color: hsl(225, 20%, 87%);
	--dp-10-surface-color: hsl(225, 20%, 86%);
	--dp-9-surface-color: hsl(225, 20%, 85%);
	--dp-8-surface-color: hsl(225, 20%, 84%);
	--dp-7-surface-color: hsl(225, 20%, 83%);
	--dp-6-surface-color: hsl(225, 20%, 82%);
	--dp-5-surface-color: hsl(225, 20%, 81%);
	--dp-4-surface-color: hsl(225, 20%, 80%);
	--dp-3-surface-color: hsl(225, 20%, 79%);
	--dp-2-surface-color: hsl(225, 20%, 78%);
	--dp-1-surface-color: hsl(225, 20%, 77%);

	/* content wrapper */
	--content-wrapper-color: var(--p-content-background);
	--content-wrapper-hover-color: var(--p-content-hover-background);

	/* context menu */
	--context-menu-background-color: var(--content-wrapper-color);
	--context-menu-option-hover-color: var(--p-surface-50);
	--context-menu-option-disabled-color: var(--p-surface-100);
	--context-menu-option-text-color: var(--text-main-color);
	--context-menu-option-text-disabled-color: var(--text-disabled-color);

	/* success colors */
	--success-color: var(--green-darken-4);
	--success-hover-color: var(--green-darken-3);
	--success-light-color: var(--green-lighten-4);
	--success-on-color: var(--white);

	/* warning colors */
	--warning-color: var(--orange-accent-2);
	--warning-hover-color: var(--orange-accent-1);
	--warning-light-color: var(--orange-lighten-4);
	--warning-on-color: var(--black);

	/* error colors */
	--error-color: var(--red-accent-2);
	--error-hover-color: var(--red-lighten-2);
	--error-light-color: var(--red-lighten-4);
	--error-on-color: var(--white);

	/* info colors */
	--info-color: var(--blue-darken-1);
	--info-hover-color: var(--blue-lighten-1);
	--info-light-color: var(--blue-lighten-4);
	--info-on-color: var(--black);

	/* job colors */
	--job-color: var(--blue-darken-1);
	--job-hover-color: var(--blue-lighten-1);
	--job-light-color: var(--blue-lighten-4);
	--job-on-color: var(--black);

	/* chat colors */
	--chat-color: var(--indigo-accent-2);
	--chat-hover-color: var(--indigo-accent-1);
	--chat-light-color: var(--indigo-lighten-4);
	--chat-on-color: var(--black);

	/* transfer colors */
	--transfer-color: var(--indigo-lighten-1);
	--transfer-hover-color: var(--indigo-lighten-2);
	--transfer-light-color: var(--indigo-lighten-4);
	--transfer-on-color: var(--white);

	/* primary colors */
	--primary-color: var(--amber-accent-3);
	--primary-hover-color: var(--amber-accent-2);
	--primary-light-color: var(--amber-lighten-3);
	--primary-on-color: var(--black);

	/* secondary colors */
	--secondary-color: var(--dp-10-surface-color);
	--secondary-hover-color: var(--dp-14-surface-color);
	--secondary-light-color: var(--dp-16-surface-color);
	--secondary-on-color: var(--grey-darken-4);

	/* email colors */
	--email-color: var(--blue-darken-3);
	--email-hover-color: var(--blue-darken-2);
	--email-light-color: var(--blue-lighten-2);
	--email-on-color: var(--black);

	/* accent colors */
	--accent-color: var(--purple-lighten-1);
	--sub-accent-color: var(--indigo-darken-3);

	/* typography colors */
	--text-main-color: var(--grey-darken-3);
	--text-disabled-color: var(--grey-lighten-1);
	--text-error-color: var(--error-color);
	--text-success-color: var(--success-color);
	--text-link-color: var(--info-color);
	/* typography on colors */
	--text-on-brand-color: var(--white);
}
:root.theme--dark[data-v-a5e612a9] {
	/* dp colors */
	--dp-24-surface-color: hsl(225, 20%, 25%);
	--dp-23-surface-color: hsl(225, 20%, 24%);
	--dp-22-surface-color: hsl(225, 20%, 23%);
	--dp-21-surface-color: hsl(225, 20%, 22%);
	--dp-20-surface-color: hsl(225, 20%, 21%);
	--dp-19-surface-color: hsl(225, 20%, 20%);
	--dp-18-surface-color: hsl(225, 20%, 19%);
	--dp-17-surface-color: hsl(225, 20%, 18%);
	--dp-16-surface-color: hsl(225, 20%, 17%);
	--dp-15-surface-color: hsl(225, 20%, 16%);
	--dp-14-surface-color: hsl(225, 20%, 15%);
	--dp-13-surface-color: hsl(225, 20%, 14%);
	--dp-12-surface-color: hsl(225, 20%, 13%);
	--dp-11-surface-color: hsl(225, 20%, 12%);
	--dp-10-surface-color: hsl(225, 20%, 11%);
	--dp-9-surface-color: hsl(225, 20%, 10%);
	--dp-8-surface-color: hsl(225, 20%, 9%);
	--dp-7-surface-color: hsl(225, 20%, 8%);
	--dp-6-surface-color: hsl(225, 20%, 7%);
	--dp-5-surface-color: hsl(225, 20%, 6%);
	--dp-4-surface-color: hsl(225, 20%, 5%);
	--dp-3-surface-color: hsl(225, 20%, 4%);
	--dp-2-surface-color: hsl(225, 20%, 3%);
	--dp-1-surface-color: hsl(225, 20%, 2%);

	/* success colors */
	--success-color: var(--green-darken-4);
	--success-hover-color: var(--green-darken-3);
	--success-light-color: var(--green-lighten-3);
	--success-on-color: var(--black);

	/* warning colors */
	--warning-color: var(--orange-accent-2);
	--warning-hover-color: var(--orange-accent-1);
	--warning-light-color: var(--orange-lighten-3);
	--warning-on-color: var(--black);

	/* error colors */
	--error-color: var(--red-accent-2);
	--error-hover-color: var(--red-lighten-2);
	--error-light-color: var(--red-lighten-3);
	--error-on-color: var(--black);

	/* info colors */
	--info-color: var(--blue-darken-1);
	--info-hover-color: var(--blue-lighten-1);
	--info-light-color: var(--blue-lighten-3);
	--info-on-color: var(--white);

	/* job colors */
	--job-color: var(--blue-darken-1);
	--job-hover-color: var(--blue-lighten-1);
	--job-light-color: var(--blue-lighten-3);
	--job-on-color: var(--white);

	/* chat colors */
	--chat-color: var(--indigo-accent-2);
	--chat-hover-color: var(--indigo-accent-1);
	--chat-light-color: var(--indigo-lighten-3);
	--chat-on-color: var(--white);

	/* transfer colors */
	--transfer-color: var(--indigo-darken-1);
	--transfer-hover-color: var(--indigo-lighten-1);
	--transfer-light-color: var(--indigo-lighten-4);
	--transfer-on-color: var(--white);

	/* primary colors */
	--primary-color: var(--amber-darken-2);
	--primary-hover-color: var(--amber-darken-1);
	--primary-light-color: var(--amber-darken-4);
	--primary-on-color: var(--black);

	/* secondary colors */
	--secondary-on-color: var(--grey-lighten-4);

	/* email colors */
	--email-color: var(--blue-darken-3);
	--email-hover-color: var(--blue-darken-2);
	--email-light-color: var(--blue-lighten-1);
	--email-on-color: var(--white);

	/* accent colors */
	--accent-color: var(--purple-lighten-1);
	--sub-accent-color: var(--indigo-darken-3);

	/* typography colors */
	--text-main-color: var(--grey-lighten-3);
	--text-disabled-color: var(--grey-darken-1);
	--text-error-color: var(--error-color);
	--text-success-color: var(--success-color);
	--text-link-color: var(--info-color);
	/* typography on colors */
	--text-on-brand-color: var(--white);

	/* context menu */
	--context-menu-option-hover-color: var(--p-surface-900);
	--context-menu-option-disabled-color: var(--p-surface-850);
}
[data-v-a5e612a9]:root {
	--_elevation-color: hsla(0, 0%, 0%, 0.05);
	--elevation-1: 0px 0px 4px 1px var(--_elevation-color);
	--elevation-2: 0px 0px 6px 2px var(--_elevation-color);
	--elevation-3: 0px 0px 8px 3px var(--_elevation-color);
	--elevation-4: 0px 0px 10px 4px var(--_elevation-color);
	--elevation-5: 0px 0px 12px 5px var(--_elevation-color);
	--elevation-6: 0px 0px 14px 6px var(--_elevation-color);
	--elevation-7: 0px 0px 16px 7px var(--_elevation-color);
	--elevation-8: 0px 0px 18px 8px var(--_elevation-color);
	--elevation-9: 0px 0px 20px 9px var(--_elevation-color);
	--elevation-10: 0px 0px 22px 10px var(--_elevation-color);
}
[data-v-a5e612a9]:root {
	/* Start point */
	--_spacing-multiplicator: 8px;

	/* Spacings */
	--spacing-3xs: calc(var(--_spacing-multiplicator) / 4);
	--spacing-2xs: calc(var(--_spacing-multiplicator) / 2);
	--spacing-xs: calc(var(--_spacing-multiplicator) * 1);
	--spacing-sm: calc(var(--_spacing-multiplicator) * 2);
	--spacing-md: calc(var(--_spacing-multiplicator) * 3);
	--spacing-lg: calc(var(--_spacing-multiplicator) * 4);
	--spacing-xl: calc(var(--_spacing-multiplicator) * 5);
	--spacing-2xl: calc(var(--_spacing-multiplicator) * 6);
	--spacing-3xl: calc(var(--_spacing-multiplicator) * 7);
}
[data-v-a5e612a9]:root {
	--transition-fast: 0.3s;
	--transition-normal: 0.6s;
	--transition-slow: 0.9s;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Thin-B0oow3R9.woff2")
		format("woff2");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ThinItalic-Df5kGryu.woff2")
		format("woff2");
	font-weight: 100;
	font-style: italic;
	font-display: swap;
	font-display: swap;
	font-display: swap;
	font-display: swap;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraLight-BLVvTz6v.woff2")
		format("woff2");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraLightItalic-Cm43v-Vf.woff2")
		format("woff2");
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Light-De9MYPOT.woff2")
		format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-LightItalic-DV9n9KIB.woff2")
		format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Regular-Cu1XIIHs.woff2")
		format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Italic-DdaXnPiX.woff2")
		format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Medium-DJODbTHz.woff2")
		format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-MediumItalic-Dx3RkM4S.woff2")
		format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-SemiBold-DwmoiGAe.woff2")
		format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-SemiBoldItalic-DUAaODp3.woff2")
		format("woff2");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Bold-DYLVQlxQ.woff2")
		format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-BoldItalic-DSEOJb3S.woff2")
		format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraBold-CLYj8xrZ.woff2")
		format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraBoldItalic-DikM7EMV.woff2")
		format("woff2");
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Black-C-enK_Oz.woff2")
		format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-BlackItalic-D65VYM31.woff2")
		format("woff2");
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

/*
This font was added for use in wt-input-text in case we need to hide the input value,like in a password input,
but without type="password" on input. It was added because not all brawsers are support 'text-security: disc' property,
So this font changes text to discs in these cases
*/
@font-face {
	font-family: "text-security-disc";
	src: url("data:font/woff2;base64,d09GMgABAAAAAAMQAAoAAAAACAAAAALIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAggAKcHILBgABNgIkAwYEIAWJSAcvG0gHEZWcjBRfHNjNPraIGU7SkQoTFkXoFRjv8FUcbDmIj4fv117P3fcRQioFRseKQUaWwJVVVVWlqUSWQCqzAXDOVp+vqsnVapWIlhw7yBoEhhMnHFYCHMKOvkR03bf6e9V3k5C0pdB3/e9T0qkd4MMPltYAwwl4rBdKBw5Q6WQJiMe2JfXQzxqDHiJHyBCRoyWk9D0eokh2Ww9se/9MHLHYawD4n5f/Ls/b722ATVs377KRPE9jOdKY88cWRA5gIghJDQ1N8AfoA89ygvcYf4pg/Ec+TgiEgQwZEhIKKKCIIkoooYwyKqigiipqqKGOOhpooIkmWmihjTY66PxOyEABGSZiKqAAQnQ6B6/n1u98x4262u0Js8WuS9OPfJk+/cuR6bOAtTcIJOZcuOuj7bV/Kyl9h9f38fFYbrefcSYrI8lAQDMUDxExOyyGlfQ/vVsg0xGArgJ1t5MoVLEcA2Gq5ci0HECy2rnswoOiU55kl1xUjEQJdXtiFM3sEWm9lqWFmgZbjP05LRVBvbqdHux9wpyGnbGWEX6p5JEHp+lXirTnJ5QhZa5Rrsq9D67r+24QRrdzndcmBzUrQ9xXb6hp/3Kt1h1kLEFUI/CLVKdW/dqtdrVRNqpIyLr2KxU5WYVXmZuskh+VXqlluyjNMNPGBGcj6JOF0MC+M9Ucc48RhDxCB6QQzssN7C3m8bmbGCrG7VXU5FY+yGdUakVOvwKllMExtmsLwzMsVQFGpi5UbHxfXhb762Voh6fTcKeW03OxxicY73eTpa8bxhIzeWR+wnoJ6j/4kBejs2xf69j7pOSUzmzPCqNy4cojtlsLwpBhb++AtcBHQcpyGZgkYrGUBTwXn2/RF12BjlQTI1XSvANELqO18DPB+UIyNkJSZBsoX7wh7DlfsyVfTshpuSjLSv9H3fwD+a36nwAAkBFZ5aSOqp+7Bg==")
		format("woff2");
	font-weight: 100;
	font-style: normal;
}
.fade-enter-active[data-v-a5e612a9],
.fade-leave-active[data-v-a5e612a9] {
	transition: opacity var(--transition);
}
.fade-enter[data-v-a5e612a9],
.fade-leave-to[data-v-a5e612a9] {
	opacity: 0;
}
/*
  Classes for direct use in placeholder-like elements styling
   (e.g. vue-multiselect .multiselect__placeholder which is technically a span)
*/
.wt-placeholder[data-v-a5e612a9] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-color);
}
.wt-placeholder--disabled[data-v-a5e612a9] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-disabled-color);
}
.wt-placeholder--error[data-v-a5e612a9] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-error-color);
}
.d-none[data-v-a5e612a9] {
	display: none;
}
@media only screen and (max-width: 960px) {
.d-none-sm[data-v-a5e612a9] {
		display: none;
}
.d-block-sm[data-v-a5e612a9] {
		display: block;
}
}
@media only screen and (max-width: 600px) {
.d-none-xs[data-v-a5e612a9] {
		display: none;
}
.d-block-xs[data-v-a5e612a9] {
		display: block;
}
}
/* Component Variables - Centralized to avoid duplication */
/* This file imports all component-specific CSS variables once globally */
[data-v-a5e612a9]:root {
	--wt-app-header-min-height: 40px;
	--wt-app-header-padding: var(--spacing-xs) var(--spacing-sm);
	--wt-app-header-background: var(--dp-9-surface-color);

	--wt-app-header-content-gap: var(--spacing-sm);
	--wt-app-header-content-panel-margin: var(--spacing-2xs);
	--wt-app-header-content-bg-color: var(--content-wrapper-color);
	--wt-app-header-content-z-index: 11;

	--wt-app-navigator-max-height: 80vh;
	--wt-app-navigator-padding: var(--wt-app-header-content-gap);
	--wt-app-navigator-item-width: 128px;
	--wt-app-navigator-item-height: 135px;
	--wt-app-navigator-item-padding: var(--spacing-xs);
	--wt-app-navigator-item-gap: var(--wt-app-header-content-gap);
	--wt-app-navigator-item-border: 1px solid;
	--wt-app-navigator-item-border-color: var(--secondary-color);
	--wt-app-navigator-item-pic-size: 88px;
	--wt-app-navigator-item-border-color--hover: var(--primary-color);

	--wt-header-actions-min-width: 120px;
	--wt-header-actions-content-sections-gap: var(--spacing-lg);
	--wt-header-actions-padding: var(--wt-app-header-content-gap);
	--wt-header-actions-action-bg-color--hover: var(--secondary-color);
	--wt-header-actions-action-link-padding: var(--spacing-xs);
}
[data-v-a5e612a9]:root {
	--wt-avatar-size--size-xs: calc(var(--_spacing-multiplicator) * 3);
	--wt-avatar-size--size-sm: calc(var(--_spacing-multiplicator) * 4);
	--wt-avatar-size--size-md: calc(var(--_spacing-multiplicator) * 5);
	--wt-avatar-size--size-lg: calc(var(--_spacing-multiplicator) * 7);
	--wt-avatar-size--size-xl: calc(var(--_spacing-multiplicator) * 9);
	--wt-avatar-size--size-2xl: calc(var(--_spacing-multiplicator) * 12);
	--wt-avatar-size--size-3xl: calc(var(--_spacing-multiplicator) * 16);

	--wt-avatar-size: var(--wt-avatar-size--size-md);

	--online-color: var(--success-color);
	--dnd-color: var(--warning-color);
	--busy-color: var(--error-color);
	--offline-color: var(--disabled-color);
	--pause-color: var(--warning-color);

	--wt-avatar-text-color: var(--white);

	--wt-avatar-letters-p1-color: var(--red-lighten-2);
	--wt-avatar-letters-p2-color: var(--purple-lighten-2);
	--wt-avatar-letters-p3-color: var(--deep-purple-lighten-2);
	--wt-avatar-letters-p4-color: var(--indigo-lighten-2);
	--wt-avatar-letters-p5-color: var(--blue-lighten-1);
	--wt-avatar-letters-p6-color: var(--cyan-lighten-1);
	--wt-avatar-letters-p7-color: var(--teal-darken-3);
	--wt-avatar-letters-p8-color: var(--green-darken-2);
	--wt-avatar-letters-p9-color: var(--lime-darken-3);
	--wt-avatar-letters-p10-color: var(--yellow-darken-3);
	--wt-avatar-letters-p11-color: var(--amber-lighten-2);
	--wt-avatar-letters-p12-color: var(--orange-darken-1);
	--wt-avatar-letters-p13-color: var(--deep-purple-lighten-1);
}
:root.theme--dark[data-v-a5e612a9] {
	--wt-avatar-text-color: var(--black);
}
[data-v-a5e612a9]:root {
	--wt-badge-size: var(--spacing-xs);
}
[data-v-a5e612a9]:root {
	--breadcrumb-indicator-size: 4px;
	--breadcrumb-gap: var(--spacing-sm);
	--breadcrumb-dot-gap: var(--spacing-2xs);
	--breadcrumb-indicator-color: var(--icon-color);
	--breadcrumb-accent-indicator-color: var(--primary-color);
}
[data-v-a5e612a9]:root {
	--button-select-button-padding: var(--spacing-xs) var(--spacing-sm);

	--button-select-icon-button-padding: var(--spacing-xs);

	--button-select-buttons-gap: 1px;
}
[data-v-a5e612a9]:root {
	--btn-min-width: 90px;
	--btn-min-width--size-sm: 70px;
	--btn-padding: var(--spacing-xs) var(--spacing-sm);
	--btn-padding--size-sm: var(--spacing-2xs) var(--spacing-xs);
	/* COLORS */
	--btn-primary-color: var(--primary-color);
	--btn-primary-hover-color: var(--primary-hover-color);
	--btn-primary-text-color: var(--primary-on-color);

	--btn-secondary-color: var(--dp-10-surface-color);
	--btn-secondary-hover-color: var(--dp-14-surface-color);
	--btn-secondary-text-color: var(--grey-darken-4);

	--btn-success-color: var(--success-color);
	--btn-success-hover-color: var(--success-hover-color);
	--btn-success-text-color: var(--grey-lighten-5);

	--btn-info-color: var(--info-color);
	--btn-info-hover-color: var(--info-hover-color);
	--btn-info-text-color: var(--grey-lighten-5);

	--btn-job-color: var(--job-color);
	--btn-job-hover-color: var(--job-hover-color);
	--btn-job-text-color: var(--grey-lighten-5);

	--btn-error-color: var(--error-color);
	--btn-error-hover-color: var(--error-hover-color);
	--btn-error-text-color: var(--grey-lighten-5);

	--btn-transfer-color: var(--transfer-color);
	--btn-transfer-hover-color: var(--transfer-hover-color);
	--btn-transfer-text-color: var(--transfer-on-color);

	--btn-disabled-color: var(--dp-16-surface-color);
	--btn-disabled-text-color: var(--grey-darken-1);
}
:root.theme--dark[data-v-a5e612a9] {
	--btn-secondary-text-color: var(--grey-lighten-4);
}
[data-v-a5e612a9]:root {
	--wt-card-border-radius: var(--p-content-border-radius);
	--wt-card-padding: var(--spacing-sm);
}
[data-v-a5e612a9]:root {
	--checkbox-icon-margin: var(--spacing-xs);
}
[data-v-a5e612a9]:root {
	--chip-padding: var(--spacing-2xs) var(--spacing-sm);
	--chip-border-radius: var(--spacing-lg);

	--wt-chip-main-background-color: var(--primary-light-color);
	--wt-chip-main-text-color: var(--primary-on-color);

	--wt-chip-primary-background-color: var(--primary-color);
	--wt-chip-primary-text-color: var(--primary-on-color);

	--wt-chip-secondary-background-color: var(--secondary-color);
	--wt-chip-secondary-text-color: var(--secondary-on-color);

	--wt-chip-success-background-color: var(--success-color);
	--wt-chip-success-text-color: var(--success-on-color);

	--wt-chip-warning-background-color: var(--warning-color);
	--wt-chip-warning-text-color: var(--warning-on-color);

	--wt-chip-error-background-color: var(--error-color);
	--wt-chip-error-text-color: var(--error-on-color);

	--wt-chip-transfer-background-color: var(--transfer-color);
	--wt-chip-transfer-text-color: var(--transfer-on-color);
}
[data-v-a5e612a9]:root {
	--wt-context-menu-option-padding: var(--spacing-xs);

	--wt-context-menu-background-color: var(--context-menu-background-color);
	--wt-context-menu-option-text-color: var(--context-menu-option-text-color);
	--wt-context-menu-option-background-hover-color: var(
		--context-menu-option-hover-color
	);
	--wt-context-menu-option-background-disabled-color: var(
		--context-menu-option-disabled-color
	);
	--wt-context-menu-option-text-disabled-color: var(
		--context-menu-option-text-disabled-color
	);
}
:root {
&[data-v-a5e612a9]{
	/*General*/
	--dp-font-family: "Montserrat";
	--dp-border-radius: var(--border-radius);
	/*Configurable border-radius*/
	--dp-cell-border-radius: var(--border-radius);
	/*Specific border radius for the calendar cell*/

	/*Sizing*/
	--dp-button-heigh: 32px;
	/*Size for buttons in overlays*/
	--dp-month-year-row-height: 24px;
	/*Height of the month-year select row*/
	--dp-month-year-row-button-size: 24px;
	/*Specific height for the next/previous buttons*/
	--dp-button-icon-height: var(--icon-md-size);
	/*Icon sizing in buttons*/
	--dp-cell-size: 24px;
	/*Width and height of calendar cell*/
	--dp-cell-padding: var(--spacing-2xs);
	/*Padding in the cell*/
	--dp-common-padding: var(--spacing-xs);
	/*Common padding used*/
	--dp-input-icon-padding: calc(var(--icon-md-size) + 2 * var(--spacing-xs));
	/*Padding on the left side of the input if icon is present*/
	--dp-input-padding: calc(var(--spacing-xs) - 1px)
		calc(var(--icon-md-size) + 2 * var(--spacing-xs));
	/*Padding in the input*/
	/* --dp-menu-min-width: 260px; Adjust the min width of the menu */
	--dp-action-buttons-padding: 2px 5px;
	/*Adjust padding for the action buttons in action row*/
	--dp-row-maring: var(--spacing-3xs);
	/*Adjust the spacing between rows in the calendar*/
	--dp-calendar-header-cell-padding: 0.5rem;
	/*Adjust padding in calendar header cells*/
	--dp-two-calendars-spacing: 10px;
	/*Space between multiple calendars*/
	--dp-overlay-col-padding: 3px;
	/*Padding in the overlay column*/
	--dp-time-inc-dec-button-size: 24px;
	/*Sizing for arrow buttons in the time picker*/

	/*Font sizes*/
	--dp-font-size: 12px;
	/*Default font-size*/
	--dp-preview-font-size: 12px;
	/*Font size of the date preview in the action row*/
	--dp-time-font-size: 12px;
	/*Font size in the time picker*/

	/*Transitions*/
	--dp-animation-duration: var(--transition);
	/*Transition duration*/
	--dp-menu-appear-transition-timing: cubic-bezier(0.4, 0, 1, 1);
	/*Timing on menu appear animation*/
	--dp-transition-timing: ease-out;
	/*Timing on slide animations*/
	}
.dp__theme_light[data-v-a5e612a9] {
		--dp-background-color: var(--content-wrapper-color);
		--dp-text-color: var(--text-main-color);
		/* --dp-hover-color: var(--secondary-color-50); */
		/* --dp-hover-text-color: var(--contrast-color); */
		--dp-hover-icon-color: var(--icon-btn-hover-color);
		--dp-primary-color: var(--primary-color);
		--dp-primary-text-color: var(--primary-on-color);
		--dp-secondary-color: var(--secondary-color);
		--dp-border-color: var(--wt-text-field-input-border-color);
		--dp-menu-border-color: transparent;
		/* --dp-border-color-hover: var(--form-border--hover-color); */
		--dp-disabled-color: var(--wt-text-field-input-background-disabled-color);
		--dp-success-color: var(--success-color);
		--dp-icon-color: var(--icon-color);
		--dp-danger-color: var(--error-color);
		/* --dp-scroll-bar-background: #f3f3f3; */
		/* --dp-scroll-bar-color: #959595; */
		/* --dp-success-color-disabled: #a3d9b1; */
		/* --dp-highlight-color: rgba(25, 118, 210, 0.1); */
}
}
[data-v-a5e612a9]:root {
	--divider-border: 1px solid;
	--divider-border-color: var(--grey-lighten-4);
}
:root.theme--dark[data-v-a5e612a9] {
	--divider-border-color: var(--grey-darken-2);
}
[data-v-a5e612a9]:root {
	--wt-dual-panel-padding: var(--spacing-sm);
	--wt-dual-panel-section-padding: var(--spacing-sm);
	--wt-dual-panel-section-gap: var(--spacing-sm);

	--wt-dual-panel-background-color: var(--grey-lighten-5);
	--wt-dual-panel-content-wrapper-color: var(--content-wrapper-color);
}
:root.theme--dark[data-v-a5e612a9] {
	--wt-dual-panel-background-color: var(--grey-darken-4);
}
[data-v-a5e612a9]:root {
	--wt-dummy-text-color: var(--text-main-color);
}
[data-v-a5e612a9]:root {
	--wt-empty-min-width: 280px;
	--wt-empty-width: 600px;
	--wt-empty-max-width: 80vw;
}
[data-v-a5e612a9]:root {
	--wt-error-page-background-color: var(--content-wrapper-color);
	--wt-error-page-text-color: var(--text-main-color);
}
[data-v-a5e612a9]:root {
	--wt-expansion-panel-header-background-color: var(--dp-16-surface-color);
	--wt-expansion-panel-header-title-color: var(--text-main-color);
	--wt-expansion-panel-content-background-color: var(--content-wrapper-color);
	--wt-expansion-panel-content-text-color: var(--text-main-color);
}
[data-v-a5e612a9]:root {
	--headline-min-height: 40px; /* button/search-bar height */
	--headline-title-margin: var(--spacing-sm);
	--wt-headline-background-color: var(--content-wrapper-color);
}
[data-v-a5e612a9]:root {
	--icon-btn-hover-color: var(--grey-darken-5);
}
:root.theme--dark[data-v-a5e612a9] {
	--icon-btn-hover-color: var(--grey-lighten-5);
}
[data-v-a5e612a9]:root {
	--icon-8xl-size: 96px;
	--icon-7xl-size: 88px;
	--icon-6xl-size: 80px;
	--icon-5xl-size: 72px;
	--icon-4xl-size: 64px;
	--icon-3xl-size: 56px;
	--icon-2xl-size: 48px;
	--icon-xl-size: 40px;
	--icon-lg-size: 32px;
	--icon-md-size: 24px;
	--icon-sm-size: 16px;
	--icon-xs-size: 8px;

	--icon-color: var(--grey-darken-2);
	--icon-active-color: var(--grey-darken-4);
	--icon-primary-color: var(--p-primary-color);
	--icon-error-color: var(--p-error-color);
	--icon-success-color: var(--p-success-color);
	--icon-warning-color: var(--p-warn-color);
	--icon-on-dark-color: var(--white);
	--icon-on-light-color: var(--grey-darken-3);
	--icon-on-primary-color: var(--primary-on-color);
	--icon-info-color: var(--p-info-color);
	--icon-chat-color: var(--p-chat-color);
	--icon-transfer-color: var(--p-transfer-color);
	--icon-job-color: var(--p-task-color);
	--icon-disabled-color: var(--grey-lighten-4);
}
:root.theme--dark[data-v-a5e612a9] {
	--icon-color: var(--grey-lighten-2);
	--icon-active-color: var(--grey-lighten-4);
	--icon-disabled-color: var(--grey-darken-2);
}
[data-v-a5e612a9]:root {
	--wt-indicator-dot-size--size-sm: var(--spacing-xs);
	--wt-indicator-dot-size--size-md: var(--spacing-sm);
	--wt-indicator-dot-size: var(--wt-indicator-size--size-md);
	--wt-indicator-dot-offset: var(--spacing-2xs);

	--wt-indicator-text-margin: var(--spacing-2xs);

	--wt-indicator-text-color: var(--text-main-color);
	--wt-indicator-primary-color: var(--primary-color);
	--wt-indicator-secondary-color: var(--grey-lighten-3);
	--wt-indicator-disabled-color: var(--grey-lighten-4);
	--wt-indicator-success-color: var(--success-color);
	--wt-indicator-error-color: var(--error-color);
	--wt-indicator-transfer-color: var(--transfer-color);
	--wt-indicator-break-out-color: var(--warning-color);
	--wt-indicator-info-color: var(--info-color);
	--wt-indicator-final-status-color: var(--green-accent-4);
	--wt-indicator-initial-status-color: var(--red-accent-2);
	--wt-indicator-other-status-color: var(--orange-accent-2);
}
:root.theme--dark[data-v-a5e612a9] {
	--wt-indicator-secondary-color: var(--grey-darken-1);
	--wt-indicator-disabled-color: var(--grey-darken-2);
}
[data-v-a5e612a9]:root {
	--input-padding: calc(var(--spacing-xs) - 1px); /* - border */
	--input-border: 1px solid;
	--input-icon-margin: var(--spacing-xs);

	--input-after-wrapper-gap: var(--spacing-2xs);
}
[data-v-a5e612a9]:root {
	--wt-item-link-text-color: var(--text-main-color);
}
[data-v-a5e612a9]:root {
	--wt-label-padding: var(--spacing-2xs) var(--spacing-xs);

	--wt-label-color: var(--p-form-field-color);
	--wt-label-error-color: var(--p-error-color);
	--wt-label-disabled-color: var(--p-form-field-disabled-color);
}
[data-v-a5e612a9]:root {
	--load-bar-height: 6px;
	--load-bar-padding: 1px;
	--load-bar-border-radius: 50px;

	--wt-load-bar-primary-color: var(--primary-on-color);
	--wt-load-bar-error-color: var(--p-error-color);
	--wt-load-bar-warning-color: var(--p-warn-color);
	--wt-load-bar-success-color: var(--p-success-color);
	--wt-load-bar-info-color: var(--p-info-color);
}
[data-v-a5e612a9]:root {
	--loader-size: 44px;
	--loader-dot-size: 6px;
	--loader-animation-duration: 3s;

	--wt-loader-md-path-color: var(--grey-darken-2);
	--wt-loader-md-point-color: var(--primary-color);

	--wt-loader-sm-path-main-color: var(--grey-darken-2);
	--wt-loader-sm-path-icon-color: var(--icon-color);
	--wt-loader-sm-path-on-light-color: var(--icon-on-light-color);
	--wt-loader-sm-path-on-dark-color: var(--icon-on-dark-color);
}
:root.theme--dark[data-v-a5e612a9] {
	--wt-loader-md-path-color: var(--grey-lighten-2);

	--wt-loader-sm-path-main-color: var(--grey-lighten-2);
}
[data-v-a5e612a9]:root {
	--wt-logo-width: 84px;
	--wt-logo-height: 16px;
}
[data-v-a5e612a9]:root {
	--wt-navigation-bar-width: 340px;
	--wt-navigation-bar-z-index: 10;
	--wt-navigation-bar-padding: var(--spacing-sm);

	--wt-navigation-bar-header-padding: var(--spacing-xs);
	--wt-navigation-bar-app-pic-height: 24px;

	--wt-navigation-bar-list-padding: var(--wt-navigation-bar-padding);
	--wt-navigation-bar-link-padding: var(--wt-navigation-bar-padding);
	--wt-navigation-bar-subnav-padding-left: var(--spacing-lg);
	--wt-navigation-bar-active-expansion-flag-width: 5px;
	--wt-navigation-bar-active-expansion-name-max-width: calc(
		100% -
		var(--icon-md-size) -
		var(--spacing-xs)
	);

	--wt-navigation-bar-background-color: var(--dp-18-surface-color);
	--wt-navigation-bar-option-text-color: var(--text-main-color);
	--wt-navigation-bar-option-text-active-color: var(--primary-on-color);
	--wt-navigation-bar-option-background-color: var(
		--wt-navigation-bar-background-color
	);
	--wt-navigation-bar-option-background-hover-color: var(--dp-20-surface-color);
	--wt-navigation-bar-option-background-active-color: var(
		--primary-light-color
	);
	--wt-navigation-bar-expansion-ribbon-color: var(--primary-color);
}
[data-v-a5e612a9]:root {
	--notifications-bar-max-height: 60%;
	--notifications-bar-corner-margin: var(--spacing-sm);
	--notifications-bar-notifications-margin: 0 0 var(--spacing-xs) auto;
	--notifications-bar-z-index: 101;
}
[data-v-a5e612a9]:root {
	--page-wrapper-padding: var(--spacing-sm);
	--page-wrapper-section-padding: var(--spacing-sm);
	--page-wrapper-section-gap: var(--spacing-sm);

	--wt-page-wrapper-background-color: var(--p-surface-50);
	--wt-page-wrapper-content-wrapper-color: var(--content-wrapper-color);
	/* --content-wrapper-border-radius: var(--p-border-radius-lg); */
}
:root.theme--dark[data-v-a5e612a9] {
	--wt-page-wrapper-background-color: var(--p-surface-850);
}
[data-v-a5e612a9]:root {
	--pagination-gap: var(--spacing-xs);
	--pagination-size-input-width: 100px;
}
.wt-player[data-v-a5e612a9] {
	--plyr-color-main: var(--primary-color);
	--plyr-audio-control-color: var(--icon-color);
	--plyr-audio-control-color-hover: var(--icon-btn-hover-color);
	--plyr-audio-controls-background: var(--content-wrapper-color);
	--plyr-controls-icon-size: var(--icon-sm-size);
	--plyr-controls-icon-padding: var(--spacing-2xs);
	--plyr-audio-control-background-hover: transparent;
	--plyr-audio-progress-buffered-background: var(
		--dp-14-surface-color
	); /* loaded color */
	--wt-player-audio-progress-background: var(
		--wt-slider-background-color
	); /* not played color */
	--plyr-tooltip-background: var(--wt-tooltip-background-color);
	--plyr-tooltip-color: var(--wt-tooltip-text-color);
	/* --plyr-control-toggle-checked-background: var(--main-color); */
	--player-close-icon-transform-translate-x: var(--spacing-md);
	/* "-1 * var" for use the negative value of a variable */
	--player-close-icon-transform-translate-y: calc(-1 * var(--spacing-md));

	--wt-slider-border: 1px solid var(--secondary-color);
	--wt-slider-pointer-radius: 50%;
	--wt-slider-pointer-background-color: var(--dp-24-surface-color);
	--wt-slider-pointer-border-color: var(--dp-10-surface-color);
	--wt-slider-pointer-size: 16px;
}
[data-v-a5e612a9]:root {
	--popup-wrapper-z-index: 12;

	--popup-shadow-opacity: 0.8;
	--wt-popup-shadow-color: hsla(0, 0%, 0%, var(--popup-shadow-opacity));

	--wt-popup-size-xs: 300px;
	--wt-popup-size-sm: 500px;
	--wt-popup-size-md: 800px;
	--wt-popup-size-lg: 1140px;

	--popup-max-height: 90%;

	--wt-popup-background-color: var(--dp-24-surface-color);
	--popup-sections-gap: var(--spacing-xs);
	--popup-padding: var(--spacing-sm);

	--popup-header-padding: var(--spacing-xs);
	--wt-popup-header-background-color: var(--dp-18-surface-color);
	--wt-popup-header-text-color: var(--text-main-color);

	--popup-main-section-padding-right: var(--spacing-xs); /* scroll offset */

	--popup-actions-padding: var(--spacing-xs);
}
[data-v-a5e612a9]:root {
	--wt-progress-bar-height: 12px;
	--wt-progress-bar-padding: var(--spacing-3xs);
	--wt-progress-bar-border-radius: var(--wt-progress-bar-padding);

	--wt-progress-bar-background-color: var(--dp-1-surface-color);
	--wt-progress-bar-background-primary-color: var(--primary-color);
	--wt-progress-bar-background-secondary-color: var(--dp-20-surface-color);
	--wt-progress-bar-background-success-color: var(--success-color);
	--wt-progress-bar-background-error-color: var(--error-color);
	--wt-progress-bar-background-warning-color: var(--warning-color);
}
[data-v-a5e612a9]:root {
	--radio-icon-margin: var(--spacing-xs);
	--radio-checkmark-size: 18px;
	--radio-bullet-size: 8px;
	--radio-border: 2px solid;
}
[data-v-a5e612a9]:root {
	--rounded-action-border-size: 2px;
	--rounded-action-padding: calc(
		var(--spacing-xs) -
		var(--rounded-action-border-size)
	);

	--rounded-action-rounded-border-radius: var(--border-radius--pill);

	--rounded-action-bg-color: var(--dp-18-surface-color);
	--rounded-action-bg-hover-color: var(--dp-20-surface-color);

	--rounded-action-active-color: var(--dp-10-surface-color);
}
[data-v-a5e612a9]:root {
	--wt-search-bar-width: 270px;
}
[data-v-a5e612a9]:root {
	--wt-slider-pointer-size: 16px;
	--wt-slider-height: var(--wt-slider-pointer-size);

	--wt-slider-width: 100%;
	--wt-slider-input-height: 8px;
	--wt-slider-border: 1px solid var(--secondary-color);
	--wt-slider-background-color: var(--dp-1-surface-color);
	--wt-slider-background-completed-color: var(--primary-color);

	--wt-slider-pointer-background-color: var(--dp-24-surface-color);
	--wt-slider-pointer-background-hover-color: var(--dp-22-surface-color);
	--wt-slider-pointer-border-color: var(--dp-10-surface-color);

	--wt-slider-pointer-radius: 50%;

	--wt-slider-vertical-container-translation: translate(2px);
	--wt-slider-vertical-transform: translate(-100%, 0) rotate(-90deg);
	--wt-slider-vertical-transform-origin: 100% 0;
}
[data-v-a5e612a9]:root {
	--wt-status-select-padding: 0 calc(var(--icon-size-md) + var(--spacing-xs)) 0
		0; /* reset wt-select padding, but preserve arrow icon padding */

	--wt-status-select-option-text-color: var(--text-main-color);
	--wt-status-select-option-background-color: var(--dp-22-surface-color);
	--wt-status-select-option-background-hover-color: var(
		--secondary-light-color
	);
	/* --wt-status-select-option-background-selected-color: var(--primary-light-color); */

	--wt-status-select-background-color: var(
		--wt-status-select-option-background-color
	);
}
[data-v-a5e612a9]:root {
	--wt-stepper-divider-background-color: var(--secondary-color);
	--wt-stepper-divider-background-completed-color: var(--primary-color);
}
[data-v-a5e612a9]:root {
	--switcher-icon-margin: var(--spacing-xs);
	--switcher-width: 40px;
	--switcher-height: 22px;
	--switcher-cicle-size: 14px;
	--switcher-cicle-margin: 4px;
	--switcher-cicle-translateX: 17px;
	--switcher-border-radius: 24px;
	/* circle */
	--wt-switcher-circle-background-color-on: var(--grey-darken-3);
	--wt-switcher-circle-background-color-on-hover: var(--grey-darken-4);
	--wt-switcher-circle-background-color-on-disabled: var(--grey-lighten-3);

	--wt-switcher-circle-background-color-off: var(--grey-lighten-4);
	--wt-switcher-circle-background-color-off-hover: var(--grey-lighten-5);
	--wt-switcher-circle-background-color-off-disabled: var(--grey-lighten-3);
	/* background */
	--wt-switcher-background-color-on: var(--primary-color);
	--wt-switcher-background-color-on-hover: var(--primary-hover-color);
	--wt-switcher-background-color-on-disabled: var(--primary-light-color);

	--wt-switcher-background-color-off: var(--grey-darken-2);
	--wt-switcher-background-color-off-hover: var(--grey-darken-1);
	--wt-switcher-background-color-off-disabled: var(--grey-lighten-4);
}
:root.theme--dark[data-v-a5e612a9] {
	/* circle */
	--wt-switcher-circle-background-color-off: var(--grey-darken-4);
	--wt-switcher-circle-background-color-off-hover: var(--grey-darken-3);
	--wt-switcher-circle-background-color-off-disabled: var(--grey-darken-3);
	/* background */
	--wt-switcher-background-color-off: var(--grey-lighten-1);
	--wt-switcher-background-color-off-hover: var(--grey-lighten-2);
	--wt-switcher-background-color-off-disabled: var(--grey-darken-2);
}
[data-v-a5e612a9]:root {
	--table-actions-padding: var(--spacing-xs);
	--table-actions-icon-gap: var(--spacing-xs);
}
[data-v-a5e612a9]:root {
	--table-col-min-width: 140px;

	--table-head-sort-arrow-margin: var(--spacing-xs);
	--table-head-border: 1px solid;

	--table-min-height: 24px; /* 24px icon size or body-1 lh */
	--table-column-gap: var(--spacing-xs);
	--table-row-padding: var(--spacing-xs);

	--wt-table-head-border-color: var(--grey-lighten-1);
	--wt-table-head-background-color: var(--content-wrapper-color);
	--wt-table-primary-color: var(--content-wrapper-color);
	--wt-table-zebra-color: var(--dp-18-surface-color);
}
:root.theme--dark[data-v-a5e612a9] {
	--wt-table-head-border-color: var(--grey-darken-1);
}
[data-v-a5e612a9]:root {
	--tabs-underiline-height: 1px;
	--tabs-underiline-color: transparent;

	--tab-padding: var(--spacing-2xs);
	--tab-gap: var(--spacing-xs);
	--wt-tabs-text-color: var(--text-main-color);
	--wt-tabs-text-hover-color: var(--wt-tabs-text-color);
	--wt-tabs-text-active-color: var(--wt-tabs-text-color);
	--tab-border: 4px solid;
	--wt-tabs-underline-active-color: var(--primary-color);
	--tab-z-index: 1;
}
[data-v-a5e612a9]:root {
	--textarea-min-height: 100px;
	--textarea-padding: var(--input-padding);
}
[data-v-a5e612a9]:root {
	--timepicker-input-width: 80px;
	--timepicker-input-margin: var(--spacing-xs);
}
[data-v-a5e612a9]:root {
	--tooltip-padding: var(--spacing-2xs) var(--spacing-xs);

	--wt-tooltip-text-color: var(--text-main-color);
	--wt-tooltip-background-color: var(--dp-24-surface-color);

	--tooltip-elevation: var(--elevation-10);
}
[data-v-a5e612a9]:root {
	--wt-tree-item-active: var(--primary-light-color);
	--wt-tree-item-active-on: var(--grey-darken-4);

	--wt-tree-item-searched: var(--light-blue-lighten-4);
	--wt-tree-item-searched-on: var(--grey-darken-4);

	--wt-tree-item: var(--primary-light-color);
	--wt-tree-item-on: var(--grey-darken-1);

	--wt-tree-item-hover: var(--dp-24-surface-color);
	--wt-tree-item-hover-on: var(--grey-darken-1);
}
:root.theme--dark[data-v-a5e612a9] {
	--wt-tree-item-active: var(--primary-light-color);
	--wt-tree-item-active-on: var(--grey-lighten-4);

	--wt-tree-item-searched: var(--light-blue-lighten-2);
	--wt-tree-item-searched-on: var(--grey-darken-4);

	--wt-tree-item: var(--primary-light-color);
	--wt-tree-item-on: var(--grey-lighten-3);

	--wt-tree-item-hover-on: var(--grey-lighten-3);
}
[data-v-a5e612a9]:root {
	--wt-tree-table-col-min-witdh: var(--table-col-min-width);

	--wt-tree-table-head-sort-arrow-margin: var(--table-head-sort-arrow-margin);
	--wt-tree-table-head-border: var(--table-head-border);

	--wt-tree-table-min-height: var(--table-min-height);
	--wt-tree-table-column-gap: var(--table-column-gap);
	--wt-tree-table-row-padding: var(--table-row-padding);

	--wt-tree-table-head-border-color: var(--wt-table-head-border-color);
	--wt-tree-table-head-background-color: var(--wt-table-head-background-color);
	--wt-tree-table-primary-color: var(--wt-table-primary-color);
	--wt-tree-table-zebra-color: var(--wt-table-zebra-color);
}
:root.theme--dark[data-v-a5e612a9] {
	--wt-tree-table-head-border-color: var(--wt-table-head-border-color);
}
[data-v-a5e612a9]:root {
	--content-wrapper-padding: var(--spacing-xs);
	--content-wrapper-gap: var(--spacing-xs);
}
.table-page.wt-page-wrapper[data-v-a5e612a9] {
	width: 100%;
	height: 100%;
}
.table-page .wt-page-wrapper__main[data-v-a5e612a9],

.wt-page-wrapper__main[data-v-a5e612a9]:has(.table-section) {
	min-height: 0;
}
.table-section[data-v-a5e612a9] {
	display: flex;
	flex-direction: column;
	width: 100%;
	flex: 1;
	min-height: 0;
}
.table-section__table-wrapper[data-v-a5e612a9] {
	display: flex;
	flex: 1 1 100%;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	min-height: 0;
	gap: var(--spacing-sm);
}
.table-section__table-wrapper .table-wrapper__visible-scroll-wrapper[data-v-a5e612a9] {
	flex-grow: 1;
}
.table-section__table-wrapper .wt-pagination[data-v-a5e612a9] {
	margin-top: auto;
}
.table-section__visible-scroll-wrapper[data-v-a5e612a9] {
	overflow: visible;
	height: 100%;
}
.table-section__visible-scroll-wrapper .wt-table[data-v-a5e612a9] {
	overflow: visible;
}
.table-title[data-v-a5e612a9] {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: var(--spacing-sm) 0;
}
.table-title__title[data-v-a5e612a9] {
	font-family: "Montserrat", monospace;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-transform: none;
}
.table-title__title + .hint[data-v-a5e612a9] {
	top: -2px;
}
.table-title__actions-wrap[data-v-a5e612a9] {
	display: flex;
	align-items: center;
	gap: var(--table-actions-icon-gap);
}
.main-section-wrapper .wt-loader.wt-brand-loader[data-v-a5e612a9] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 1;
}
.table-wrapper--tab-table[data-v-a5e612a9] {
	position: relative;
}
.table-wrapper--tab-table .wt-loader.wt-brand-loader[data-v-a5e612a9] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 1;
}
.table-wrapper--tab-table .table-loading-wrapper[data-v-a5e612a9] {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	min-height: 0;
}
.opened-card[data-v-a5e612a9] {
	width: 100%;
}
.opened-card.wt-page-wrapper[data-v-a5e612a9],
.opened-card.wt-dual-panel[data-v-a5e612a9] {
	width: 100%;
}
.opened-card-tabs[data-v-a5e612a9] {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: var(--spacing-sm);
}
.opened-card-tabs__tab[data-v-a5e612a9] {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: var(--spacing-sm);
	min-height: 0;
}
.opened-card-header[data-v-a5e612a9] {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin: var(--spacing-sm) 0;
}
.opened-card-header__title[data-v-a5e612a9] {
	font-family: "Montserrat", monospace;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-transform: none;
}
.opened-card-header__title + .hint[data-v-a5e612a9] {
	top: -2px;
}
.opened-card-form[data-v-a5e612a9] {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.opened-card-input-grid[data-v-a5e612a9] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: minmax(auto, auto);
	align-items: flex-start;
	grid-column-gap: var(--spacing-sm);
	grid-row-gap: var(--spacing-sm);
}
.opened-card-input-grid--1-col[data-v-a5e612a9] {
	grid-template-columns: 1fr;
}
.opened-card-input-grid--w50[data-v-a5e612a9] {
	width: 50%;
}
.opened-card-input-grid--w100[data-v-a5e612a9] {
	width: 100%;
}
/*
	@author HlukhovYe
	layer needed beacuse of manipulating primevue's default typography
	https://webitel.atlassian.net/browse/WTEL-8775?focusedCommentId=723773
*/
@layer wt-default {
[data-v-a5e612a9]:root {
    --transition: 0.2s;
    --box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    /* viewport breakpoints */
    --viewport-lg: 1904px;
    --viewport-md: 1264px;
    --viewport-sm: 960px;
    --viewport-xs: 600px;
}
html[data-v-a5e612a9] {
    height: 100%;
    font-size: 16px;
}
body[data-v-a5e612a9] {
    font-family: "Montserrat", monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-transform: none;
    margin: 0;
    height: 100%;
    min-height: 100%;
}
[data-v-a5e612a9] {
    box-sizing: border-box;
}
.theme--dark body[data-v-a5e612a9] {
    color-scheme: dark;
}
h1[data-v-a5e612a9],
  h2[data-v-a5e612a9],
  h3[data-v-a5e612a9],
  h4[data-v-a5e612a9],
  h5[data-v-a5e612a9],
  h6[data-v-a5e612a9],
  p[data-v-a5e612a9] {
    margin: 0;
    font-weight: normal;
}
  /* reset ul styles */
ul[data-v-a5e612a9] {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
iframe[data-v-a5e612a9] {
    outline: none;
    border: none;
}
a[data-v-a5e612a9] {
    color: #000;
    text-decoration: none;
}
.hidden[data-v-a5e612a9] {
    opacity: 0;
    pointer-events: none;
}
}
/*
	@author HlukhovYe
	reset input autofill styles https://webitel.atlassian.net/browse/WTEL-9005
*/
input[data-v-a5e612a9]:-webkit-autofill,
input[data-v-a5e612a9]:-webkit-autofill:hover,
input[data-v-a5e612a9]:-webkit-autofill:focus,
textarea[data-v-a5e612a9]:-webkit-autofill,
textarea[data-v-a5e612a9]:-webkit-autofill:hover,
textarea[data-v-a5e612a9]:-webkit-autofill:focus,
select[data-v-a5e612a9]:-webkit-autofill,
select[data-v-a5e612a9]:-webkit-autofill:hover,
select[data-v-a5e612a9]:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--p-inputtext-color);
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s; /* prevents an immediate color change */
}

/* https://github.com/Akryum/floating-vue/issues/488 */
.v-popper__arrow-container[data-v-a5e612a9] {
  display: none;
}
.overlay-wrapper[data-v-a5e612a9] {
  background: var(--white);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  justify-items: center;
  z-index: 10000;
}
.overlay-wrapper__image[data-v-a5e612a9] {
  margin-bottom: var(--spacing-lg);
}
.overlay-wrapper__title[data-v-a5e612a9] {
  text-align: center;
  margin-bottom: var(--spacing-sm);
  white-space: pre-line;
}
.overlay-wrapper__content[data-v-a5e612a9] {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.flow-save-filed-popup__wrapper[data-v-f0d1dd5d] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.flow-save-filed-popup__wrapper .wt-icon[data-v-f0d1dd5d] {
  margin-bottom: var(--spacing-sm);
}
.wt-dark-mode-switcher[data-v-5f9a2e84] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}.flow-edit-form-popup__form[data-v-ccc99968] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}.wt-icon-btn--disabled[data-v-28c31018] {
  --icon-disabled-color: var(--flow-icon-header-disabled-color) !important;
}.close-confirmation-popup__wrapper[data-v-16b216d3] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.close-confirmation-popup__wrapper .wt-icon[data-v-16b216d3] {
  margin-bottom: var(--spacing-sm);
}.flow-app-header.wt-app-header[data-v-c706bb27] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flow-app-header__flow-name[data-v-c706bb27] {
  color: var(--text-main-color);
  text-wrap: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.flow-app-header__logo-link[data-v-c706bb27] {
  display: flex;
  align-items: center;
}
.flow-app-header__actions[data-v-c706bb27] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.flow-app-header__flow-actions[data-v-c706bb27] {
  display: flex;
  gap: var(--spacing-xs);
}
.flow-app-header .delete-selected-action[data-v-c706bb27] {
  transition: opacity var(--transition) ease;
}
.flow-app-header .delete-selected-action.hidden[data-v-c706bb27] {
  opacity: 0;
  pointer-events: none;
}[data-v-a99bbb18] .config-form-section-wrapper__header {
  margin: 0;
}
.limit-config-form-common__wrapper[data-v-a99bbb18] {
  display: flex;
  flex-direction: column;
}
.limit-config-form-common__wrapper[data-v-a99bbb18] .wt-expansion-panel-header {
  display: none;
}
.limit-config-form-common__input[data-v-a99bbb18] {
  margin-bottom: var(--spacing-xs);
}[data-v-2b824b04] .config-form-section-wrapper__header {
  margin: 0;
}
.node-description-config-form__wrapper[data-v-2b824b04] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.node-description-config-form__wrapper[data-v-2b824b04] .wt-expansion-panel-header {
  display: none;
}
.node-description-config-form__textarea[data-v-2b824b04] {
  margin-bottom: var(--spacing-xs);
}
@layer wt-default, base, primevue, wt-typography;
/* 
	@author Palonnyi Oleksandr
	Must be first — locks cascade layer priority 
	before any content is loaded: wt-default < base < primevue < wt-typography.
	[WTEL-9107](https://webitel.atlassian.net/browse/WTEL-9107)

	link for complex comment https://webitel.atlassian.net/browse/WTEL-9107?focusedCommentId=740565
*/
[data-v-a4c8edd8]:root {
	--scrollbar-width: 10px;
	--scrollbar-height: 10px;
	--scrollbar-thumb-width: 10px;
	--scrollbar-bg-color: var(--p-surface-50);
	--scrollbar-thumb-color: var(--p-surface-150);
	--scrollbar-hover-thumb-color: var(--p-surface-250);
	--scrollbar-border-radius: var(--border-radius);
}
:root.theme--dark[data-v-a4c8edd8] {
	--scrollbar-bg-color: var(--p-surface-850);
	--scrollbar-thumb-color: var(--p-surface-700);
	--scrollbar-hover-thumb-color: var(--p-surface-800);
}
.wt-scrollbar[data-v-a4c8edd8] {
	/* scrollbar itself */
}
.wt-scrollbar[data-v-a4c8edd8]::-webkit-scrollbar {
	width: var(--scrollbar-width);
	height: var(--scrollbar-height);
	cursor: pointer;
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-bg-color);
}

/* scrollable element */
.wt-scrollbar[data-v-a4c8edd8]::-webkit-scrollbar-thumb {
	width: var(--scrollbar-thumb-width);
	height: var(--scrollbar-thumb-height);
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-thumb-color);
}
.wt-scrollbar[data-v-a4c8edd8]::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-hover-thumb-color);
}
.wt-distant-scrollbar[data-v-a4c8edd8]::-webkit-scrollbar {
	width: 14px;
	height: 18px;
	background-color: var(--scrollbar-bg-color);
}
.wt-distant-scrollbar[data-v-a4c8edd8]::-webkit-scrollbar-thumb {
	height: 2px;
	border: 4px solid rgba(0, 0, 0, 0);
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-thumb-color);
	background-clip: padding-box;
	/* -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05); */
}
[data-v-a4c8edd8]:root {
	--border-radius: var(--spacing-2xs);
	--border-radius--pill: 50px;
}
/*
NOTE:   text-transform: none; is set explicitly cause t-t is inherited from parent
 */

/* 
	@author HlukhovYe
	layer needed for overriding primevue's default typography for the components
	https://webitel.atlassian.net/browse/WTEL-8775?focusedCommentId=723773
*/
@layer wt-typography {
.typo-heading-1[data-v-a4c8edd8] {
		font-family: "Montserrat", monospace;
		font-size: 32px;
		font-weight: 600;
		line-height: 48px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-2[data-v-a4c8edd8] {
		font-family: "Montserrat", monospace;
		font-size: 24px;
		font-weight: 600;
		line-height: 40px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-3[data-v-a4c8edd8] {
		font-family: "Montserrat", monospace;
		font-size: 20px;
		font-weight: 600;
		line-height: 32px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-4[data-v-a4c8edd8] {
		font-family: "Montserrat", monospace;
		font-size: 16px;
		font-weight: 600;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-subtitle-1[data-v-a4c8edd8] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 500;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-subtitle-2[data-v-a4c8edd8] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-body-1[data-v-a4c8edd8] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 400;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.56px; */
		/* 0.04em */
}
.typo-body-1-bold[data-v-a4c8edd8] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 700;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.56px; */
		/* 0.04em */
}
.typo-body-2[data-v-a4c8edd8] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 400;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.16px; */
		/* 0.01em */
}
.typo-body-2-bold[data-v-a4c8edd8] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 700;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.16px; */
		/* 0.01em */
}
.typo-button--md[data-v-a4c8edd8] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 24px;
		text-transform: uppercase;
		/* letter-spacing: 0.96px; */
		/* 0.06em */
}
.typo-button--sm[data-v-a4c8edd8] {
		font-family: "Montserrat", monospace;
		font-size: 10px;
		font-weight: 500;
		line-height: 24px;
		text-transform: uppercase;
		/* letter-spacing: 0.96px; */
		/* 0.06em */
}
.typo-caption[data-v-a4c8edd8] {
		font-family: "Montserrat", monospace;
		font-size: 10px;
		font-weight: 400;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.48px; */
		/* 0.03em */
}
.typo-overline[data-v-a4c8edd8] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 20px;
		text-transform: uppercase;
		/* letter-spacing: 2.56px; */
		/* 0.16em */
}
}
[data-v-a4c8edd8]:root {
	/* LIGHTNESS */
	--lightness-lighten-5: 95%;
	--lightness-lighten-4: 90%;
	--lightness-lighten-3: 80%;
	--lightness-lighten-2: 70%;
	--lightness-lighten-1: 60%;

	--lightness-darken-1: 50%;
	--lightness-darken-2: 45%;
	--lightness-darken-3: 40%;
	--lightness-darken-4: 35%;

	--lightness-accent-1: 75%;
	--lightness-accent-2: 65%;
	--lightness-accent-3: 50%;
	--lightness-accent-4: 40%;

	/* SATURATION */
	--saturation-lighten-5: 92%;
	--saturation-lighten-4: 88%;
	--saturation-lighten-3: 90%;
	--saturation-lighten-2: 90%;
	--saturation-lighten-1: 90%;

	--saturation-darken-1: 75%;
	--saturation-darken-2: 75%;
	--saturation-darken-3: 75%;
	--saturation-darken-4: 75%;

	--saturation-accent-1: 91%;
	--saturation-accent-2: 90%;
	--saturation-accent-3: 97%;
	--saturation-accent-4: 97%;

	/* HUE */
	--hue-red: 0;
	--hue-pink: 337;
	--hue-purple: 291;
	--hue-deep-purple: 263;
	--hue-indigo: 232;
	--hue-blue: 209;
	--hue-light-blue: 202;
	--hue-cyan: 188;
	--hue-teal: 173;
	--hue-green: 121;
	--hue-light-green: 88;
	--hue-lime: 66;
	--hue-yellow: 54;
	--hue-amber: 43;
	--hue-orange: 32;
	--hue-deep-orange: 11;

	/* RED */
	--red-lighten-5: hsla(
		var(--hue-red),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--red-lighten-4: hsla(
		var(--hue-red),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--red-lighten-3: hsla(
		var(--hue-red),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--red-lighten-2: hsla(
		var(--hue-red),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--red-lighten-1: hsla(
		var(--hue-red),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--red-darken-4: hsla(
		var(--hue-red),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--red-darken-3: hsla(
		var(--hue-red),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--red-darken-2: hsla(
		var(--hue-red),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--red-darken-1: hsla(
		var(--hue-red),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--red-accent-4: hsla(
		var(--hue-red),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--red-accent-3: hsla(
		var(--hue-red),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--red-accent-2: hsla(
		var(--hue-red),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--red-accent-1: hsla(
		var(--hue-red),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* PINK */
	--pink-lighten-5: hsla(
		var(--hue-pink),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--pink-lighten-4: hsla(
		var(--hue-pink),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--pink-lighten-3: hsla(
		var(--hue-pink),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--pink-lighten-2: hsla(
		var(--hue-pink),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--pink-lighten-1: hsla(
		var(--hue-pink),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--pink-darken-4: hsla(
		var(--hue-pink),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--pink-darken-3: hsla(
		var(--hue-pink),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--pink-darken-2: hsla(
		var(--hue-pink),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--pink-darken-1: hsla(
		var(--hue-pink),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--pink-accent-4: hsla(
		var(--hue-pink),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--pink-accent-3: hsla(
		var(--hue-pink),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--pink-accent-2: hsla(
		var(--hue-pink),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--pink-accent-1: hsla(
		var(--hue-pink),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* PURPLE */
	--purple-lighten-5: hsla(
		var(--hue-purple),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--purple-lighten-4: hsla(
		var(--hue-purple),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--purple-lighten-3: hsla(
		var(--hue-purple),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--purple-lighten-2: hsla(
		var(--hue-purple),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--purple-lighten-1: hsla(
		var(--hue-purple),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--purple-darken-4: hsla(
		var(--hue-purple),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--purple-darken-3: hsla(
		var(--hue-purple),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--purple-darken-2: hsla(
		var(--hue-purple),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--purple-darken-1: hsla(
		var(--hue-purple),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--purple-accent-4: hsla(
		var(--hue-purple),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--purple-accent-3: hsla(
		var(--hue-purple),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--purple-accent-2: hsla(
		var(--hue-purple),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--purple-accent-1: hsla(
		var(--hue-purple),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* DEEP PURPLE */
	--deep-purple-lighten-5: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--deep-purple-lighten-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--deep-purple-lighten-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--deep-purple-lighten-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--deep-purple-lighten-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--deep-purple-darken-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--deep-purple-darken-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--deep-purple-darken-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--deep-purple-darken-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--deep-purple-accent-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--deep-purple-accent-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--deep-purple-accent-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--deep-purple-accent-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* INDIGO */
	--indigo-lighten-5: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--indigo-lighten-4: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--indigo-lighten-3: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--indigo-lighten-2: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--indigo-lighten-1: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--indigo-darken-4: hsla(
		var(--hue-indigo),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--indigo-darken-3: hsla(
		var(--hue-indigo),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--indigo-darken-2: hsla(
		var(--hue-indigo),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--indigo-darken-1: hsla(
		var(--hue-indigo),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--indigo-accent-4: hsla(
		var(--hue-indigo),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--indigo-accent-3: hsla(
		var(--hue-indigo),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--indigo-accent-2: hsla(
		var(--hue-indigo),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--indigo-accent-1: hsla(
		var(--hue-indigo),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* BLUE */
	--blue-lighten-5: hsla(
		var(--hue-blue),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--blue-lighten-4: hsla(
		var(--hue-blue),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--blue-lighten-3: hsla(
		var(--hue-blue),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--blue-lighten-2: hsla(
		var(--hue-blue),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--blue-lighten-1: hsla(
		var(--hue-blue),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--blue-darken-4: hsla(
		var(--hue-blue),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--blue-darken-3: hsla(
		var(--hue-blue),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--blue-darken-2: hsla(
		var(--hue-blue),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--blue-darken-1: hsla(
		var(--hue-blue),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--blue-accent-4: hsla(
		var(--hue-blue),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--blue-accent-3: hsla(
		var(--hue-blue),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--blue-accent-2: hsla(
		var(--hue-blue),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--blue-accent-1: hsla(
		var(--hue-blue),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIGHT BLUE */
	--light-blue-lighten-5: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--light-blue-lighten-4: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--light-blue-lighten-3: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--light-blue-lighten-2: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--light-blue-lighten-1: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--light-blue-darken-4: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--light-blue-darken-3: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--light-blue-darken-2: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--light-blue-darken-1: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--light-blue-accent-4: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--light-blue-accent-3: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--light-blue-accent-2: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--light-blue-accent-1: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* CYAN */
	--cyan-lighten-5: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--cyan-lighten-4: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--cyan-lighten-3: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--cyan-lighten-2: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--cyan-lighten-1: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--cyan-darken-4: hsla(
		var(--hue-cyan),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--cyan-darken-3: hsla(
		var(--hue-cyan),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--cyan-darken-2: hsla(
		var(--hue-cyan),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--cyan-darken-1: hsla(
		var(--hue-cyan),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--cyan-accent-4: hsla(
		var(--hue-cyan),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--cyan-accent-3: hsla(
		var(--hue-cyan),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--cyan-accent-2: hsla(
		var(--hue-cyan),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--cyan-accent-1: hsla(
		var(--hue-cyan),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* TEAL */
	--teal-lighten-5: hsla(
		var(--hue-teal),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--teal-lighten-4: hsla(
		var(--hue-teal),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--teal-lighten-3: hsla(
		var(--hue-teal),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--teal-lighten-2: hsla(
		var(--hue-teal),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--teal-lighten-1: hsla(
		var(--hue-teal),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--teal-darken-4: hsla(
		var(--hue-teal),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--teal-darken-3: hsla(
		var(--hue-teal),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--teal-darken-2: hsla(
		var(--hue-teal),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--teal-darken-1: hsla(
		var(--hue-teal),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--teal-accent-4: hsla(
		var(--hue-teal),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--teal-accent-3: hsla(
		var(--hue-teal),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--teal-accent-2: hsla(
		var(--hue-teal),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--teal-accent-1: hsla(
		var(--hue-teal),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* GREEN */
	--green-lighten-5: hsla(
		var(--hue-green),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--green-lighten-4: hsla(
		var(--hue-green),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--green-lighten-3: hsla(
		var(--hue-green),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--green-lighten-2: hsla(
		var(--hue-green),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--green-lighten-1: hsla(
		var(--hue-green),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--green-darken-4: hsla(
		var(--hue-green),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--green-darken-3: hsla(
		var(--hue-green),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--green-darken-2: hsla(
		var(--hue-green),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--green-darken-1: hsla(
		var(--hue-green),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--green-accent-4: hsla(
		var(--hue-green),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--green-accent-3: hsla(
		var(--hue-green),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--green-accent-2: hsla(
		var(--hue-green),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--green-accent-1: hsla(
		var(--hue-green),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIGHT GREEN */
	--light-green-lighten-5: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--light-green-lighten-4: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--light-green-lighten-3: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--light-green-lighten-2: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--light-green-lighten-1: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--light-green-darken-4: hsla(
		var(--hue-light-green),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--light-green-darken-3: hsla(
		var(--hue-light-green),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--light-green-darken-2: hsla(
		var(--hue-light-green),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--light-green-darken-1: hsla(
		var(--hue-light-green),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--light-green-accent-4: hsla(
		var(--hue-light-green),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--light-green-accent-3: hsla(
		var(--hue-light-green),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--light-green-accent-2: hsla(
		var(--hue-light-green),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--light-green-accent-1: hsla(
		var(--hue-light-green),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIME */
	--lime-lighten-5: hsla(
		var(--hue-lime),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--lime-lighten-4: hsla(
		var(--hue-lime),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--lime-lighten-3: hsla(
		var(--hue-lime),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--lime-lighten-2: hsla(
		var(--hue-lime),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--lime-lighten-1: hsla(
		var(--hue-lime),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--lime-darken-4: hsla(
		var(--hue-lime),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--lime-darken-3: hsla(
		var(--hue-lime),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--lime-darken-2: hsla(
		var(--hue-lime),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--lime-darken-1: hsla(
		var(--hue-lime),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--lime-accent-4: hsla(
		var(--hue-lime),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--lime-accent-3: hsla(
		var(--hue-lime),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--lime-accent-2: hsla(
		var(--hue-lime),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--lime-accent-1: hsla(
		var(--hue-lime),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* yellow */
	--yellow-lighten-5: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--yellow-lighten-4: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--yellow-lighten-3: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--yellow-lighten-2: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--yellow-lighten-1: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--yellow-darken-4: hsla(
		var(--hue-yellow),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--yellow-darken-3: hsla(
		var(--hue-yellow),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--yellow-darken-2: hsla(
		var(--hue-yellow),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--yellow-darken-1: hsla(
		var(--hue-yellow),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--yellow-accent-4: hsla(
		var(--hue-yellow),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--yellow-accent-3: hsla(
		var(--hue-yellow),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--yellow-accent-2: hsla(
		var(--hue-yellow),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--yellow-accent-1: hsla(
		var(--hue-yellow),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* amber */
	--amber-lighten-5: hsla(
		var(--hue-amber),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--amber-lighten-4: hsla(
		var(--hue-amber),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--amber-lighten-3: hsla(
		var(--hue-amber),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--amber-lighten-2: hsla(
		var(--hue-amber),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--amber-lighten-1: hsla(
		var(--hue-amber),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--amber-darken-4: hsla(
		var(--hue-amber),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--amber-darken-3: hsla(
		var(--hue-amber),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--amber-darken-2: hsla(
		var(--hue-amber),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--amber-darken-1: hsla(
		var(--hue-amber),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--amber-accent-4: hsla(
		var(--hue-amber),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--amber-accent-3: hsla(
		var(--hue-amber),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--amber-accent-2: hsla(
		var(--hue-amber),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--amber-accent-1: hsla(
		var(--hue-amber),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* orange */
	--orange-lighten-5: hsla(
		var(--hue-orange),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--orange-lighten-4: hsla(
		var(--hue-orange),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--orange-lighten-3: hsla(
		var(--hue-orange),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--orange-lighten-2: hsla(
		var(--hue-orange),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--orange-lighten-1: hsla(
		var(--hue-orange),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--orange-darken-4: hsla(
		var(--hue-orange),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--orange-darken-3: hsla(
		var(--hue-orange),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--orange-darken-2: hsla(
		var(--hue-orange),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--orange-darken-1: hsla(
		var(--hue-orange),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--orange-accent-4: hsla(
		var(--hue-orange),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--orange-accent-3: hsla(
		var(--hue-orange),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--orange-accent-2: hsla(
		var(--hue-orange),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--orange-accent-1: hsla(
		var(--hue-orange),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* deep-orange */
	--deep-orange-lighten-5: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--deep-orange-lighten-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--deep-orange-lighten-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--deep-orange-lighten-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--deep-orange-lighten-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--deep-orange-darken-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--deep-orange-darken-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--deep-orange-darken-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--deep-orange-darken-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--deep-orange-accent-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--deep-orange-accent-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--deep-orange-accent-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--deep-orange-accent-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* grey */

	--lightness-lighten-5-grey: 94%;
	--lightness-lighten-4-grey: 84%;
	--lightness-lighten-3-grey: 74%;
	--lightness-lighten-2-grey: 64%;
	--lightness-lighten-1-grey: 54%;

	--lightness-darken-1-grey: 44%;
	--lightness-darken-2-grey: 34%;
	--lightness-darken-3-grey: 24%;
	--lightness-darken-4-grey: 14%;
	--lightness-darken-5-grey: 4%;

	--saturation-grey: 20%;
	--hue-grey: 225;

	--grey-lighten-5: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-5-grey),
		1
	);
	--grey-lighten-4: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-4-grey),
		1
	);
	--grey-lighten-3: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-3-grey),
		1
	);
	--grey-lighten-2: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-2-grey),
		1
	);
	--grey-lighten-1: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-1-grey),
		1
	);

	--grey-darken-1: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-1-grey),
		1
	);
	--grey-darken-2: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-2-grey),
		1
	);
	--grey-darken-3: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-3-grey),
		1
	);
	--grey-darken-4: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-4-grey),
		1
	);
	--grey-darken-5: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-5-grey),
		1
	);

	--black: hsla(0, 0%, 0%, 1);
	--white: hsla(0, 0%, 100%, 1);
}
[data-v-a4c8edd8]:root {
	/* HSL COLORS HUE VALUE */
	--_accent-color-hue: 42;
	--_secondary-color-hue: 202;
	--_page-bg-color-hue: 209;
	--_icon-color-hue: 202;
	--_positive-color-hue: 119;
	--_negative-color-hue: 11;

	--_hold-color-hue: 54;
	--_transfer-color-hue: 227;
	--_job-color-hue: 209;

	/* DEFAULT STATES OPACITY */
	--_opacity--default: 0.8;
	--_opacity--hover: 1;
	--_opacity--active: 1;
	--_opacity--focus: 0.8;
	--_opacity--disabled: 0.4;

	/* BASIC HSL COLORS VALUES */
	--_accent-color: var(--_accent-color-hue), 100%, 50%;
	--_main-color: var(--_accent-color-hue), 20%, 99%;
	--_contrast-color: var(--_accent-color-hue), 20%, 1%;
	--_secondary-color: var(--_secondary-color-hue), 20%, 90%;
	--_secondary-color-50: var(--_secondary-color-hue), 22%, 96%;
	--_page-bg-color: var(--_page-bg-color-hue), 20%, 95%;
	--_header-color: var(--_page-bg-color-hue), 20%, 90%;
	--_positive-color: var(--_positive-color-hue), 60%, 40%;
	--_negative-color: var(--_negative-color-hue), 80%, 50%;
	--_icon-color: var(--_icon-color-hue), 100%, 15%;

	--_hold-color: var(--_hold-color-hue), 80%, 50%;
	--_transfer-color: var(--_transfer-color-hue), 80%, 50%;
	--_job-color: var(--_job-color-hue), 96%, 57%;

	/* MAIN COLORS */
	--accent-color: hsla(var(--_accent-color), 1);

	--main-color: hsla(var(--_main-color), 1);

	--contrast-color: hsla(var(--_contrast-color), 1);

	--secondary-color: hsla(var(--_secondary-color), 1);
	--secondary-color-50: hsla(var(--_secondary-color-50), 1);

	/* ICON COLORS */
	--icon-color-secondary: hsla(var(--_icon-color), 0.25);

	--icon-color--hover: hsla(var(--_icon-color), var(--_opacity--hover));

	--icon-color-accent: var(--accent-color);
	--icon-color-contrast: hsla(var(--_main-color), var(--_opacity--default));
	--icon-color-active: var(--icon-color--hover);
	--icon-color-disabled: hsla(var(--_icon-color), var(--_opacity--disabled));
	--icon-color-success: var(--true-color);
	--icon-color-danger: var(--false-color);
	--icon-color-transfer: var(--transfer-color);
	--icon-color-hold: var(--hold-color);
	--icon-color-secondary-50: var(--secondary-color-50);

	--page-bg-color: hsla(var(--_page-bg-color), 1);
	--header-color: hsla(var(--_header-color), 1);

	--accent-secondary-color: hsla(var(--_accent-color), 0.3);

	/* SEMANTIC COLORS */
	--disabled-color: hsl(var(--_contrast-color), var(--_opacity--disabled));

	--true-color: hsla(var(--_positive-color), var(--_opacity--default));
	--true--hover-color: hsla(var(--_positive-color), var(--_opacity--hover));

	--false-color: hsla(var(--_negative-color), var(--_opacity--default));
	--false--hover-color: hsla(var(--_negative-color), var(--_opacity--hover));

	--hold-color: hsla(var(--_hold-color), var(--_opacity--default));
	--hold--hover-color: hsla(var(--_hold-color), var(--_opacity--hover));

	--transfer-color: hsla(var(--_transfer-color), var(--_opacity--default));
	--transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover));

	--job-color: hsla(var(--_job-color), var(--_opacity--default));
	--job--hover-color: hsla(var(--_job-color), var(--_opacity--hover));

	--link-color: hsla(205, 90%, 45%, 1);
	--link--hover-color: hsla(205, 90%, 60%, 1);

	/* SUBORDINATE COLORS */
	--tag-bg-color: var(--accent-secondary-color);

	/* FORM STATES OPACITY */
	--form-opacity--default: var(--_opacity--default);
	--form-opacity--hover: var(--_opacity--hover);
	--form-opacity--active: var(--_opacity--active);
	--form-opacity--focus: var(--_opacity--focus);
	--form-opacity--disabled: var(--_opacity--disabled);

	--form-placeholder-opacity: 0.6;
	--form-placeholder-opacity--focus: 0.4;
	--form-border-opacity--disabled: 0.05;

	--form-opacity--ouline--default: 0.4;
	--form-opacity--ouline--hover: 0.7;

	/* FORM COLORS */
	--form-input-color: var(--contrast-color);
	/* user input color */

	--form-label-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);
	--form-label--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--hover)
	);
	--form-label--active-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--active)
	);
	--form-label--disabled-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--disabled)
	);

	--form-border-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);
	--form-border--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--hover)
	);
	--form-border--disabled-color: hsla(
		var(--_contrast-color),
		var(--form-border-opacity--disabled)
	);

	--form-placeholder-color: hsla(
		var(--_contrast-color),
		var(--form-placeholder-opacity)
	);
	--form-placeholder-color--focus: hsla(
		var(--_contrast-color),
		var(--form-placeholder-opacity--focus)
	);
	--form-placeholder-color--disabled: hsla(
		var(--_contrast-color),
		var(--form-opacity--disabled)
	);

	/* outline */
	--form-outline-label-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);

	--form-outline-border-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--ouline--default)
	);
	--form-outline-border--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--ouline--hover)
	);

	/* TEXT OPACITY */
	--text-opacity--default: var(--_opacity--default);
	--text-opacity----outline--default: 0.7;
	--text-opacity--disabled: 0.5;

	/* TEXT COLORS */
	--text-primary-color: hsla(
		var(--_contrast-color),
		var(--text-opacity--default)
	);
	--text-outline-color: hsla(
		var(--_contrast-color),
		var(--text-opacity----outline--default)
	);
	--text-contrast-color: hsla(var(--_main-color), var(--text-opacity--default));
	--text--disabled-color: hsla(
		var(--_contrast-color),
		var(--text-opacity--disabled)
	);

	/* CHAT COLORS */
	--_chat-client-color: var(--_accent-color);
	--_chat-client-opacity: 0.2;
	--_chat-agent-color: var(--_secondary-color-50);
	--_chat-agent-opacity: 1;

	--chat-client-message-bg-color: hsla(
		var(--_chat-client-color),
		var(--_chat-client-opacity)
	);
	--chat-agent-message-bg-color: hsla(
		var(--_chat-agent-color),
		var(--_chat-agent-opacity)
	);
	--chat-client-attachment-bg-color: hsla(
		var(--_chat-client-color),
		var(--_chat-client-opacity)
	);
	--chat-agent-attachment-bg-color: hsla(
		var(--_chat-agent-color),
		var(--_chat-agent-opacity)
	);
}
/* shared text field colors */
[data-v-a4c8edd8]:root {
	/* TODO: move to separate helper-text component */
	/* helper */
	--wt-helper-text-color: var(--text-main-color);
	--wt-helper-text-disabled-color: var(--text-disabled-color);
	--wt-helper-text-invalid-color: var(--text-error-color);

	/* text */
	--wt-text-field-text-color: var(--black);

	/* placeholder */
	--wt-text-field-error-text-color: var(--error-color);
	--wt-text-field-placeholder-color: var(--grey-lighten-1);
	--wt-text-field-placeholder-error-color: var(--error-color);
	--wt-text-field-placeholder-disabled-color: var(--text-disabled-color);

	/* border */
	--wt-text-field-input-border-color: var(--grey-darken-1);
	--wt-text-field-input-border-disabled-color: var(--dp-16-surface-color);
	--wt-text-field-input-border-error-color: var(--error-color);

	/* input bg */
	--wt-text-field-input-background-disabled-color: var(--dp-16-surface-color);

	/* select */
	--wt-text-field-select-option-text-color: var(--text-main-color);
	--wt-text-field-select-option-text-hover-color: var(--primary-on-color);
	--wt-text-field-select-option-text-selected-color: var(--primary-on-color);

	--wt-text-field-select-option-wrapper-border-color: var(
		--dp-22-surface-color
	);
	--wt-text-field-select-option-background-color: var(--dp-22-surface-color);
	--wt-text-field-select-option-background-hover-color: var(
		--primary-light-color
	);
	--wt-text-field-select-option-background-selected-color: var(--primary-color);
}
:root.theme--dark[data-v-a4c8edd8] {
	/* text */
	--wt-text-field-text-color: var(--white);

	--wt-text-field-input-border-color: var(--grey-lighten-1);
}
[data-v-a4c8edd8]:root {
	/* dp colors */
	--dp-24-surface-color: hsl(0, 0%, 100%);
	--dp-23-surface-color: hsl(225, 20%, 99%);
	--dp-22-surface-color: hsl(225, 20%, 98%);
	--dp-21-surface-color: hsl(225, 20%, 97%);
	--dp-20-surface-color: hsl(225, 20%, 96%);
	--dp-19-surface-color: hsl(225, 20%, 95%);
	--dp-18-surface-color: hsl(225, 20%, 94%);
	--dp-17-surface-color: hsl(225, 20%, 93%);
	--dp-16-surface-color: hsl(225, 20%, 92%);
	--dp-15-surface-color: hsl(225, 20%, 91%);
	--dp-14-surface-color: hsl(225, 20%, 90%);
	--dp-13-surface-color: hsl(225, 20%, 89%);
	--dp-12-surface-color: hsl(225, 20%, 88%);
	--dp-11-surface-color: hsl(225, 20%, 87%);
	--dp-10-surface-color: hsl(225, 20%, 86%);
	--dp-9-surface-color: hsl(225, 20%, 85%);
	--dp-8-surface-color: hsl(225, 20%, 84%);
	--dp-7-surface-color: hsl(225, 20%, 83%);
	--dp-6-surface-color: hsl(225, 20%, 82%);
	--dp-5-surface-color: hsl(225, 20%, 81%);
	--dp-4-surface-color: hsl(225, 20%, 80%);
	--dp-3-surface-color: hsl(225, 20%, 79%);
	--dp-2-surface-color: hsl(225, 20%, 78%);
	--dp-1-surface-color: hsl(225, 20%, 77%);

	/* content wrapper */
	--content-wrapper-color: var(--p-content-background);
	--content-wrapper-hover-color: var(--p-content-hover-background);

	/* context menu */
	--context-menu-background-color: var(--content-wrapper-color);
	--context-menu-option-hover-color: var(--p-surface-50);
	--context-menu-option-disabled-color: var(--p-surface-100);
	--context-menu-option-text-color: var(--text-main-color);
	--context-menu-option-text-disabled-color: var(--text-disabled-color);

	/* success colors */
	--success-color: var(--green-darken-4);
	--success-hover-color: var(--green-darken-3);
	--success-light-color: var(--green-lighten-4);
	--success-on-color: var(--white);

	/* warning colors */
	--warning-color: var(--orange-accent-2);
	--warning-hover-color: var(--orange-accent-1);
	--warning-light-color: var(--orange-lighten-4);
	--warning-on-color: var(--black);

	/* error colors */
	--error-color: var(--red-accent-2);
	--error-hover-color: var(--red-lighten-2);
	--error-light-color: var(--red-lighten-4);
	--error-on-color: var(--white);

	/* info colors */
	--info-color: var(--blue-darken-1);
	--info-hover-color: var(--blue-lighten-1);
	--info-light-color: var(--blue-lighten-4);
	--info-on-color: var(--black);

	/* job colors */
	--job-color: var(--blue-darken-1);
	--job-hover-color: var(--blue-lighten-1);
	--job-light-color: var(--blue-lighten-4);
	--job-on-color: var(--black);

	/* chat colors */
	--chat-color: var(--indigo-accent-2);
	--chat-hover-color: var(--indigo-accent-1);
	--chat-light-color: var(--indigo-lighten-4);
	--chat-on-color: var(--black);

	/* transfer colors */
	--transfer-color: var(--indigo-lighten-1);
	--transfer-hover-color: var(--indigo-lighten-2);
	--transfer-light-color: var(--indigo-lighten-4);
	--transfer-on-color: var(--white);

	/* primary colors */
	--primary-color: var(--amber-accent-3);
	--primary-hover-color: var(--amber-accent-2);
	--primary-light-color: var(--amber-lighten-3);
	--primary-on-color: var(--black);

	/* secondary colors */
	--secondary-color: var(--dp-10-surface-color);
	--secondary-hover-color: var(--dp-14-surface-color);
	--secondary-light-color: var(--dp-16-surface-color);
	--secondary-on-color: var(--grey-darken-4);

	/* email colors */
	--email-color: var(--blue-darken-3);
	--email-hover-color: var(--blue-darken-2);
	--email-light-color: var(--blue-lighten-2);
	--email-on-color: var(--black);

	/* accent colors */
	--accent-color: var(--purple-lighten-1);
	--sub-accent-color: var(--indigo-darken-3);

	/* typography colors */
	--text-main-color: var(--grey-darken-3);
	--text-disabled-color: var(--grey-lighten-1);
	--text-error-color: var(--error-color);
	--text-success-color: var(--success-color);
	--text-link-color: var(--info-color);
	/* typography on colors */
	--text-on-brand-color: var(--white);
}
:root.theme--dark[data-v-a4c8edd8] {
	/* dp colors */
	--dp-24-surface-color: hsl(225, 20%, 25%);
	--dp-23-surface-color: hsl(225, 20%, 24%);
	--dp-22-surface-color: hsl(225, 20%, 23%);
	--dp-21-surface-color: hsl(225, 20%, 22%);
	--dp-20-surface-color: hsl(225, 20%, 21%);
	--dp-19-surface-color: hsl(225, 20%, 20%);
	--dp-18-surface-color: hsl(225, 20%, 19%);
	--dp-17-surface-color: hsl(225, 20%, 18%);
	--dp-16-surface-color: hsl(225, 20%, 17%);
	--dp-15-surface-color: hsl(225, 20%, 16%);
	--dp-14-surface-color: hsl(225, 20%, 15%);
	--dp-13-surface-color: hsl(225, 20%, 14%);
	--dp-12-surface-color: hsl(225, 20%, 13%);
	--dp-11-surface-color: hsl(225, 20%, 12%);
	--dp-10-surface-color: hsl(225, 20%, 11%);
	--dp-9-surface-color: hsl(225, 20%, 10%);
	--dp-8-surface-color: hsl(225, 20%, 9%);
	--dp-7-surface-color: hsl(225, 20%, 8%);
	--dp-6-surface-color: hsl(225, 20%, 7%);
	--dp-5-surface-color: hsl(225, 20%, 6%);
	--dp-4-surface-color: hsl(225, 20%, 5%);
	--dp-3-surface-color: hsl(225, 20%, 4%);
	--dp-2-surface-color: hsl(225, 20%, 3%);
	--dp-1-surface-color: hsl(225, 20%, 2%);

	/* success colors */
	--success-color: var(--green-darken-4);
	--success-hover-color: var(--green-darken-3);
	--success-light-color: var(--green-lighten-3);
	--success-on-color: var(--black);

	/* warning colors */
	--warning-color: var(--orange-accent-2);
	--warning-hover-color: var(--orange-accent-1);
	--warning-light-color: var(--orange-lighten-3);
	--warning-on-color: var(--black);

	/* error colors */
	--error-color: var(--red-accent-2);
	--error-hover-color: var(--red-lighten-2);
	--error-light-color: var(--red-lighten-3);
	--error-on-color: var(--black);

	/* info colors */
	--info-color: var(--blue-darken-1);
	--info-hover-color: var(--blue-lighten-1);
	--info-light-color: var(--blue-lighten-3);
	--info-on-color: var(--white);

	/* job colors */
	--job-color: var(--blue-darken-1);
	--job-hover-color: var(--blue-lighten-1);
	--job-light-color: var(--blue-lighten-3);
	--job-on-color: var(--white);

	/* chat colors */
	--chat-color: var(--indigo-accent-2);
	--chat-hover-color: var(--indigo-accent-1);
	--chat-light-color: var(--indigo-lighten-3);
	--chat-on-color: var(--white);

	/* transfer colors */
	--transfer-color: var(--indigo-darken-1);
	--transfer-hover-color: var(--indigo-lighten-1);
	--transfer-light-color: var(--indigo-lighten-4);
	--transfer-on-color: var(--white);

	/* primary colors */
	--primary-color: var(--amber-darken-2);
	--primary-hover-color: var(--amber-darken-1);
	--primary-light-color: var(--amber-darken-4);
	--primary-on-color: var(--black);

	/* secondary colors */
	--secondary-on-color: var(--grey-lighten-4);

	/* email colors */
	--email-color: var(--blue-darken-3);
	--email-hover-color: var(--blue-darken-2);
	--email-light-color: var(--blue-lighten-1);
	--email-on-color: var(--white);

	/* accent colors */
	--accent-color: var(--purple-lighten-1);
	--sub-accent-color: var(--indigo-darken-3);

	/* typography colors */
	--text-main-color: var(--grey-lighten-3);
	--text-disabled-color: var(--grey-darken-1);
	--text-error-color: var(--error-color);
	--text-success-color: var(--success-color);
	--text-link-color: var(--info-color);
	/* typography on colors */
	--text-on-brand-color: var(--white);

	/* context menu */
	--context-menu-option-hover-color: var(--p-surface-900);
	--context-menu-option-disabled-color: var(--p-surface-850);
}
[data-v-a4c8edd8]:root {
	--_elevation-color: hsla(0, 0%, 0%, 0.05);
	--elevation-1: 0px 0px 4px 1px var(--_elevation-color);
	--elevation-2: 0px 0px 6px 2px var(--_elevation-color);
	--elevation-3: 0px 0px 8px 3px var(--_elevation-color);
	--elevation-4: 0px 0px 10px 4px var(--_elevation-color);
	--elevation-5: 0px 0px 12px 5px var(--_elevation-color);
	--elevation-6: 0px 0px 14px 6px var(--_elevation-color);
	--elevation-7: 0px 0px 16px 7px var(--_elevation-color);
	--elevation-8: 0px 0px 18px 8px var(--_elevation-color);
	--elevation-9: 0px 0px 20px 9px var(--_elevation-color);
	--elevation-10: 0px 0px 22px 10px var(--_elevation-color);
}
[data-v-a4c8edd8]:root {
	/* Start point */
	--_spacing-multiplicator: 8px;

	/* Spacings */
	--spacing-3xs: calc(var(--_spacing-multiplicator) / 4);
	--spacing-2xs: calc(var(--_spacing-multiplicator) / 2);
	--spacing-xs: calc(var(--_spacing-multiplicator) * 1);
	--spacing-sm: calc(var(--_spacing-multiplicator) * 2);
	--spacing-md: calc(var(--_spacing-multiplicator) * 3);
	--spacing-lg: calc(var(--_spacing-multiplicator) * 4);
	--spacing-xl: calc(var(--_spacing-multiplicator) * 5);
	--spacing-2xl: calc(var(--_spacing-multiplicator) * 6);
	--spacing-3xl: calc(var(--_spacing-multiplicator) * 7);
}
[data-v-a4c8edd8]:root {
	--transition-fast: 0.3s;
	--transition-normal: 0.6s;
	--transition-slow: 0.9s;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Thin-B0oow3R9.woff2")
		format("woff2");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ThinItalic-Df5kGryu.woff2")
		format("woff2");
	font-weight: 100;
	font-style: italic;
	font-display: swap;
	font-display: swap;
	font-display: swap;
	font-display: swap;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraLight-BLVvTz6v.woff2")
		format("woff2");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraLightItalic-Cm43v-Vf.woff2")
		format("woff2");
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Light-De9MYPOT.woff2")
		format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-LightItalic-DV9n9KIB.woff2")
		format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Regular-Cu1XIIHs.woff2")
		format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Italic-DdaXnPiX.woff2")
		format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Medium-DJODbTHz.woff2")
		format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-MediumItalic-Dx3RkM4S.woff2")
		format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-SemiBold-DwmoiGAe.woff2")
		format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-SemiBoldItalic-DUAaODp3.woff2")
		format("woff2");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Bold-DYLVQlxQ.woff2")
		format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-BoldItalic-DSEOJb3S.woff2")
		format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraBold-CLYj8xrZ.woff2")
		format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraBoldItalic-DikM7EMV.woff2")
		format("woff2");
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Black-C-enK_Oz.woff2")
		format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-BlackItalic-D65VYM31.woff2")
		format("woff2");
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

/*
This font was added for use in wt-input-text in case we need to hide the input value,like in a password input,
but without type="password" on input. It was added because not all brawsers are support 'text-security: disc' property,
So this font changes text to discs in these cases
*/
@font-face {
	font-family: "text-security-disc";
	src: url("data:font/woff2;base64,d09GMgABAAAAAAMQAAoAAAAACAAAAALIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAggAKcHILBgABNgIkAwYEIAWJSAcvG0gHEZWcjBRfHNjNPraIGU7SkQoTFkXoFRjv8FUcbDmIj4fv117P3fcRQioFRseKQUaWwJVVVVWlqUSWQCqzAXDOVp+vqsnVapWIlhw7yBoEhhMnHFYCHMKOvkR03bf6e9V3k5C0pdB3/e9T0qkd4MMPltYAwwl4rBdKBw5Q6WQJiMe2JfXQzxqDHiJHyBCRoyWk9D0eokh2Ww9se/9MHLHYawD4n5f/Ls/b722ATVs377KRPE9jOdKY88cWRA5gIghJDQ1N8AfoA89ygvcYf4pg/Ec+TgiEgQwZEhIKKKCIIkoooYwyKqigiipqqKGOOhpooIkmWmihjTY66PxOyEABGSZiKqAAQnQ6B6/n1u98x4262u0Js8WuS9OPfJk+/cuR6bOAtTcIJOZcuOuj7bV/Kyl9h9f38fFYbrefcSYrI8lAQDMUDxExOyyGlfQ/vVsg0xGArgJ1t5MoVLEcA2Gq5ci0HECy2rnswoOiU55kl1xUjEQJdXtiFM3sEWm9lqWFmgZbjP05LRVBvbqdHux9wpyGnbGWEX6p5JEHp+lXirTnJ5QhZa5Rrsq9D67r+24QRrdzndcmBzUrQ9xXb6hp/3Kt1h1kLEFUI/CLVKdW/dqtdrVRNqpIyLr2KxU5WYVXmZuskh+VXqlluyjNMNPGBGcj6JOF0MC+M9Ucc48RhDxCB6QQzssN7C3m8bmbGCrG7VXU5FY+yGdUakVOvwKllMExtmsLwzMsVQFGpi5UbHxfXhb762Voh6fTcKeW03OxxicY73eTpa8bxhIzeWR+wnoJ6j/4kBejs2xf69j7pOSUzmzPCqNy4cojtlsLwpBhb++AtcBHQcpyGZgkYrGUBTwXn2/RF12BjlQTI1XSvANELqO18DPB+UIyNkJSZBsoX7wh7DlfsyVfTshpuSjLSv9H3fwD+a36nwAAkBFZ5aSOqp+7Bg==")
		format("woff2");
	font-weight: 100;
	font-style: normal;
}
.fade-enter-active[data-v-a4c8edd8],
.fade-leave-active[data-v-a4c8edd8] {
	transition: opacity var(--transition);
}
.fade-enter[data-v-a4c8edd8],
.fade-leave-to[data-v-a4c8edd8] {
	opacity: 0;
}
/*
  Classes for direct use in placeholder-like elements styling
   (e.g. vue-multiselect .multiselect__placeholder which is technically a span)
*/
.wt-placeholder[data-v-a4c8edd8] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-color);
}
.wt-placeholder--disabled[data-v-a4c8edd8] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-disabled-color);
}
.wt-placeholder--error[data-v-a4c8edd8] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-error-color);
}
.d-none[data-v-a4c8edd8] {
	display: none;
}
@media only screen and (max-width: 960px) {
.d-none-sm[data-v-a4c8edd8] {
		display: none;
}
.d-block-sm[data-v-a4c8edd8] {
		display: block;
}
}
@media only screen and (max-width: 600px) {
.d-none-xs[data-v-a4c8edd8] {
		display: none;
}
.d-block-xs[data-v-a4c8edd8] {
		display: block;
}
}
/* Component Variables - Centralized to avoid duplication */
/* This file imports all component-specific CSS variables once globally */
[data-v-a4c8edd8]:root {
	--wt-app-header-min-height: 40px;
	--wt-app-header-padding: var(--spacing-xs) var(--spacing-sm);
	--wt-app-header-background: var(--dp-9-surface-color);

	--wt-app-header-content-gap: var(--spacing-sm);
	--wt-app-header-content-panel-margin: var(--spacing-2xs);
	--wt-app-header-content-bg-color: var(--content-wrapper-color);
	--wt-app-header-content-z-index: 11;

	--wt-app-navigator-max-height: 80vh;
	--wt-app-navigator-padding: var(--wt-app-header-content-gap);
	--wt-app-navigator-item-width: 128px;
	--wt-app-navigator-item-height: 135px;
	--wt-app-navigator-item-padding: var(--spacing-xs);
	--wt-app-navigator-item-gap: var(--wt-app-header-content-gap);
	--wt-app-navigator-item-border: 1px solid;
	--wt-app-navigator-item-border-color: var(--secondary-color);
	--wt-app-navigator-item-pic-size: 88px;
	--wt-app-navigator-item-border-color--hover: var(--primary-color);

	--wt-header-actions-min-width: 120px;
	--wt-header-actions-content-sections-gap: var(--spacing-lg);
	--wt-header-actions-padding: var(--wt-app-header-content-gap);
	--wt-header-actions-action-bg-color--hover: var(--secondary-color);
	--wt-header-actions-action-link-padding: var(--spacing-xs);
}
[data-v-a4c8edd8]:root {
	--wt-avatar-size--size-xs: calc(var(--_spacing-multiplicator) * 3);
	--wt-avatar-size--size-sm: calc(var(--_spacing-multiplicator) * 4);
	--wt-avatar-size--size-md: calc(var(--_spacing-multiplicator) * 5);
	--wt-avatar-size--size-lg: calc(var(--_spacing-multiplicator) * 7);
	--wt-avatar-size--size-xl: calc(var(--_spacing-multiplicator) * 9);
	--wt-avatar-size--size-2xl: calc(var(--_spacing-multiplicator) * 12);
	--wt-avatar-size--size-3xl: calc(var(--_spacing-multiplicator) * 16);

	--wt-avatar-size: var(--wt-avatar-size--size-md);

	--online-color: var(--success-color);
	--dnd-color: var(--warning-color);
	--busy-color: var(--error-color);
	--offline-color: var(--disabled-color);
	--pause-color: var(--warning-color);

	--wt-avatar-text-color: var(--white);

	--wt-avatar-letters-p1-color: var(--red-lighten-2);
	--wt-avatar-letters-p2-color: var(--purple-lighten-2);
	--wt-avatar-letters-p3-color: var(--deep-purple-lighten-2);
	--wt-avatar-letters-p4-color: var(--indigo-lighten-2);
	--wt-avatar-letters-p5-color: var(--blue-lighten-1);
	--wt-avatar-letters-p6-color: var(--cyan-lighten-1);
	--wt-avatar-letters-p7-color: var(--teal-darken-3);
	--wt-avatar-letters-p8-color: var(--green-darken-2);
	--wt-avatar-letters-p9-color: var(--lime-darken-3);
	--wt-avatar-letters-p10-color: var(--yellow-darken-3);
	--wt-avatar-letters-p11-color: var(--amber-lighten-2);
	--wt-avatar-letters-p12-color: var(--orange-darken-1);
	--wt-avatar-letters-p13-color: var(--deep-purple-lighten-1);
}
:root.theme--dark[data-v-a4c8edd8] {
	--wt-avatar-text-color: var(--black);
}
[data-v-a4c8edd8]:root {
	--wt-badge-size: var(--spacing-xs);
}
[data-v-a4c8edd8]:root {
	--breadcrumb-indicator-size: 4px;
	--breadcrumb-gap: var(--spacing-sm);
	--breadcrumb-dot-gap: var(--spacing-2xs);
	--breadcrumb-indicator-color: var(--icon-color);
	--breadcrumb-accent-indicator-color: var(--primary-color);
}
[data-v-a4c8edd8]:root {
	--button-select-button-padding: var(--spacing-xs) var(--spacing-sm);

	--button-select-icon-button-padding: var(--spacing-xs);

	--button-select-buttons-gap: 1px;
}
[data-v-a4c8edd8]:root {
	--btn-min-width: 90px;
	--btn-min-width--size-sm: 70px;
	--btn-padding: var(--spacing-xs) var(--spacing-sm);
	--btn-padding--size-sm: var(--spacing-2xs) var(--spacing-xs);
	/* COLORS */
	--btn-primary-color: var(--primary-color);
	--btn-primary-hover-color: var(--primary-hover-color);
	--btn-primary-text-color: var(--primary-on-color);

	--btn-secondary-color: var(--dp-10-surface-color);
	--btn-secondary-hover-color: var(--dp-14-surface-color);
	--btn-secondary-text-color: var(--grey-darken-4);

	--btn-success-color: var(--success-color);
	--btn-success-hover-color: var(--success-hover-color);
	--btn-success-text-color: var(--grey-lighten-5);

	--btn-info-color: var(--info-color);
	--btn-info-hover-color: var(--info-hover-color);
	--btn-info-text-color: var(--grey-lighten-5);

	--btn-job-color: var(--job-color);
	--btn-job-hover-color: var(--job-hover-color);
	--btn-job-text-color: var(--grey-lighten-5);

	--btn-error-color: var(--error-color);
	--btn-error-hover-color: var(--error-hover-color);
	--btn-error-text-color: var(--grey-lighten-5);

	--btn-transfer-color: var(--transfer-color);
	--btn-transfer-hover-color: var(--transfer-hover-color);
	--btn-transfer-text-color: var(--transfer-on-color);

	--btn-disabled-color: var(--dp-16-surface-color);
	--btn-disabled-text-color: var(--grey-darken-1);
}
:root.theme--dark[data-v-a4c8edd8] {
	--btn-secondary-text-color: var(--grey-lighten-4);
}
[data-v-a4c8edd8]:root {
	--wt-card-border-radius: var(--p-content-border-radius);
	--wt-card-padding: var(--spacing-sm);
}
[data-v-a4c8edd8]:root {
	--checkbox-icon-margin: var(--spacing-xs);
}
[data-v-a4c8edd8]:root {
	--chip-padding: var(--spacing-2xs) var(--spacing-sm);
	--chip-border-radius: var(--spacing-lg);

	--wt-chip-main-background-color: var(--primary-light-color);
	--wt-chip-main-text-color: var(--primary-on-color);

	--wt-chip-primary-background-color: var(--primary-color);
	--wt-chip-primary-text-color: var(--primary-on-color);

	--wt-chip-secondary-background-color: var(--secondary-color);
	--wt-chip-secondary-text-color: var(--secondary-on-color);

	--wt-chip-success-background-color: var(--success-color);
	--wt-chip-success-text-color: var(--success-on-color);

	--wt-chip-warning-background-color: var(--warning-color);
	--wt-chip-warning-text-color: var(--warning-on-color);

	--wt-chip-error-background-color: var(--error-color);
	--wt-chip-error-text-color: var(--error-on-color);

	--wt-chip-transfer-background-color: var(--transfer-color);
	--wt-chip-transfer-text-color: var(--transfer-on-color);
}
[data-v-a4c8edd8]:root {
	--wt-context-menu-option-padding: var(--spacing-xs);

	--wt-context-menu-background-color: var(--context-menu-background-color);
	--wt-context-menu-option-text-color: var(--context-menu-option-text-color);
	--wt-context-menu-option-background-hover-color: var(
		--context-menu-option-hover-color
	);
	--wt-context-menu-option-background-disabled-color: var(
		--context-menu-option-disabled-color
	);
	--wt-context-menu-option-text-disabled-color: var(
		--context-menu-option-text-disabled-color
	);
}
:root {
&[data-v-a4c8edd8]{
	/*General*/
	--dp-font-family: "Montserrat";
	--dp-border-radius: var(--border-radius);
	/*Configurable border-radius*/
	--dp-cell-border-radius: var(--border-radius);
	/*Specific border radius for the calendar cell*/

	/*Sizing*/
	--dp-button-heigh: 32px;
	/*Size for buttons in overlays*/
	--dp-month-year-row-height: 24px;
	/*Height of the month-year select row*/
	--dp-month-year-row-button-size: 24px;
	/*Specific height for the next/previous buttons*/
	--dp-button-icon-height: var(--icon-md-size);
	/*Icon sizing in buttons*/
	--dp-cell-size: 24px;
	/*Width and height of calendar cell*/
	--dp-cell-padding: var(--spacing-2xs);
	/*Padding in the cell*/
	--dp-common-padding: var(--spacing-xs);
	/*Common padding used*/
	--dp-input-icon-padding: calc(var(--icon-md-size) + 2 * var(--spacing-xs));
	/*Padding on the left side of the input if icon is present*/
	--dp-input-padding: calc(var(--spacing-xs) - 1px)
		calc(var(--icon-md-size) + 2 * var(--spacing-xs));
	/*Padding in the input*/
	/* --dp-menu-min-width: 260px; Adjust the min width of the menu */
	--dp-action-buttons-padding: 2px 5px;
	/*Adjust padding for the action buttons in action row*/
	--dp-row-maring: var(--spacing-3xs);
	/*Adjust the spacing between rows in the calendar*/
	--dp-calendar-header-cell-padding: 0.5rem;
	/*Adjust padding in calendar header cells*/
	--dp-two-calendars-spacing: 10px;
	/*Space between multiple calendars*/
	--dp-overlay-col-padding: 3px;
	/*Padding in the overlay column*/
	--dp-time-inc-dec-button-size: 24px;
	/*Sizing for arrow buttons in the time picker*/

	/*Font sizes*/
	--dp-font-size: 12px;
	/*Default font-size*/
	--dp-preview-font-size: 12px;
	/*Font size of the date preview in the action row*/
	--dp-time-font-size: 12px;
	/*Font size in the time picker*/

	/*Transitions*/
	--dp-animation-duration: var(--transition);
	/*Transition duration*/
	--dp-menu-appear-transition-timing: cubic-bezier(0.4, 0, 1, 1);
	/*Timing on menu appear animation*/
	--dp-transition-timing: ease-out;
	/*Timing on slide animations*/
	}
.dp__theme_light[data-v-a4c8edd8] {
		--dp-background-color: var(--content-wrapper-color);
		--dp-text-color: var(--text-main-color);
		/* --dp-hover-color: var(--secondary-color-50); */
		/* --dp-hover-text-color: var(--contrast-color); */
		--dp-hover-icon-color: var(--icon-btn-hover-color);
		--dp-primary-color: var(--primary-color);
		--dp-primary-text-color: var(--primary-on-color);
		--dp-secondary-color: var(--secondary-color);
		--dp-border-color: var(--wt-text-field-input-border-color);
		--dp-menu-border-color: transparent;
		/* --dp-border-color-hover: var(--form-border--hover-color); */
		--dp-disabled-color: var(--wt-text-field-input-background-disabled-color);
		--dp-success-color: var(--success-color);
		--dp-icon-color: var(--icon-color);
		--dp-danger-color: var(--error-color);
		/* --dp-scroll-bar-background: #f3f3f3; */
		/* --dp-scroll-bar-color: #959595; */
		/* --dp-success-color-disabled: #a3d9b1; */
		/* --dp-highlight-color: rgba(25, 118, 210, 0.1); */
}
}
[data-v-a4c8edd8]:root {
	--divider-border: 1px solid;
	--divider-border-color: var(--grey-lighten-4);
}
:root.theme--dark[data-v-a4c8edd8] {
	--divider-border-color: var(--grey-darken-2);
}
[data-v-a4c8edd8]:root {
	--wt-dual-panel-padding: var(--spacing-sm);
	--wt-dual-panel-section-padding: var(--spacing-sm);
	--wt-dual-panel-section-gap: var(--spacing-sm);

	--wt-dual-panel-background-color: var(--grey-lighten-5);
	--wt-dual-panel-content-wrapper-color: var(--content-wrapper-color);
}
:root.theme--dark[data-v-a4c8edd8] {
	--wt-dual-panel-background-color: var(--grey-darken-4);
}
[data-v-a4c8edd8]:root {
	--wt-dummy-text-color: var(--text-main-color);
}
[data-v-a4c8edd8]:root {
	--wt-empty-min-width: 280px;
	--wt-empty-width: 600px;
	--wt-empty-max-width: 80vw;
}
[data-v-a4c8edd8]:root {
	--wt-error-page-background-color: var(--content-wrapper-color);
	--wt-error-page-text-color: var(--text-main-color);
}
[data-v-a4c8edd8]:root {
	--wt-expansion-panel-header-background-color: var(--dp-16-surface-color);
	--wt-expansion-panel-header-title-color: var(--text-main-color);
	--wt-expansion-panel-content-background-color: var(--content-wrapper-color);
	--wt-expansion-panel-content-text-color: var(--text-main-color);
}
[data-v-a4c8edd8]:root {
	--headline-min-height: 40px; /* button/search-bar height */
	--headline-title-margin: var(--spacing-sm);
	--wt-headline-background-color: var(--content-wrapper-color);
}
[data-v-a4c8edd8]:root {
	--icon-btn-hover-color: var(--grey-darken-5);
}
:root.theme--dark[data-v-a4c8edd8] {
	--icon-btn-hover-color: var(--grey-lighten-5);
}
[data-v-a4c8edd8]:root {
	--icon-8xl-size: 96px;
	--icon-7xl-size: 88px;
	--icon-6xl-size: 80px;
	--icon-5xl-size: 72px;
	--icon-4xl-size: 64px;
	--icon-3xl-size: 56px;
	--icon-2xl-size: 48px;
	--icon-xl-size: 40px;
	--icon-lg-size: 32px;
	--icon-md-size: 24px;
	--icon-sm-size: 16px;
	--icon-xs-size: 8px;

	--icon-color: var(--grey-darken-2);
	--icon-active-color: var(--grey-darken-4);
	--icon-primary-color: var(--p-primary-color);
	--icon-error-color: var(--p-error-color);
	--icon-success-color: var(--p-success-color);
	--icon-warning-color: var(--p-warn-color);
	--icon-on-dark-color: var(--white);
	--icon-on-light-color: var(--grey-darken-3);
	--icon-on-primary-color: var(--primary-on-color);
	--icon-info-color: var(--p-info-color);
	--icon-chat-color: var(--p-chat-color);
	--icon-transfer-color: var(--p-transfer-color);
	--icon-job-color: var(--p-task-color);
	--icon-disabled-color: var(--grey-lighten-4);
}
:root.theme--dark[data-v-a4c8edd8] {
	--icon-color: var(--grey-lighten-2);
	--icon-active-color: var(--grey-lighten-4);
	--icon-disabled-color: var(--grey-darken-2);
}
[data-v-a4c8edd8]:root {
	--wt-indicator-dot-size--size-sm: var(--spacing-xs);
	--wt-indicator-dot-size--size-md: var(--spacing-sm);
	--wt-indicator-dot-size: var(--wt-indicator-size--size-md);
	--wt-indicator-dot-offset: var(--spacing-2xs);

	--wt-indicator-text-margin: var(--spacing-2xs);

	--wt-indicator-text-color: var(--text-main-color);
	--wt-indicator-primary-color: var(--primary-color);
	--wt-indicator-secondary-color: var(--grey-lighten-3);
	--wt-indicator-disabled-color: var(--grey-lighten-4);
	--wt-indicator-success-color: var(--success-color);
	--wt-indicator-error-color: var(--error-color);
	--wt-indicator-transfer-color: var(--transfer-color);
	--wt-indicator-break-out-color: var(--warning-color);
	--wt-indicator-info-color: var(--info-color);
	--wt-indicator-final-status-color: var(--green-accent-4);
	--wt-indicator-initial-status-color: var(--red-accent-2);
	--wt-indicator-other-status-color: var(--orange-accent-2);
}
:root.theme--dark[data-v-a4c8edd8] {
	--wt-indicator-secondary-color: var(--grey-darken-1);
	--wt-indicator-disabled-color: var(--grey-darken-2);
}
[data-v-a4c8edd8]:root {
	--input-padding: calc(var(--spacing-xs) - 1px); /* - border */
	--input-border: 1px solid;
	--input-icon-margin: var(--spacing-xs);

	--input-after-wrapper-gap: var(--spacing-2xs);
}
[data-v-a4c8edd8]:root {
	--wt-item-link-text-color: var(--text-main-color);
}
[data-v-a4c8edd8]:root {
	--wt-label-padding: var(--spacing-2xs) var(--spacing-xs);

	--wt-label-color: var(--p-form-field-color);
	--wt-label-error-color: var(--p-error-color);
	--wt-label-disabled-color: var(--p-form-field-disabled-color);
}
[data-v-a4c8edd8]:root {
	--load-bar-height: 6px;
	--load-bar-padding: 1px;
	--load-bar-border-radius: 50px;

	--wt-load-bar-primary-color: var(--primary-on-color);
	--wt-load-bar-error-color: var(--p-error-color);
	--wt-load-bar-warning-color: var(--p-warn-color);
	--wt-load-bar-success-color: var(--p-success-color);
	--wt-load-bar-info-color: var(--p-info-color);
}
[data-v-a4c8edd8]:root {
	--loader-size: 44px;
	--loader-dot-size: 6px;
	--loader-animation-duration: 3s;

	--wt-loader-md-path-color: var(--grey-darken-2);
	--wt-loader-md-point-color: var(--primary-color);

	--wt-loader-sm-path-main-color: var(--grey-darken-2);
	--wt-loader-sm-path-icon-color: var(--icon-color);
	--wt-loader-sm-path-on-light-color: var(--icon-on-light-color);
	--wt-loader-sm-path-on-dark-color: var(--icon-on-dark-color);
}
:root.theme--dark[data-v-a4c8edd8] {
	--wt-loader-md-path-color: var(--grey-lighten-2);

	--wt-loader-sm-path-main-color: var(--grey-lighten-2);
}
[data-v-a4c8edd8]:root {
	--wt-logo-width: 84px;
	--wt-logo-height: 16px;
}
[data-v-a4c8edd8]:root {
	--wt-navigation-bar-width: 340px;
	--wt-navigation-bar-z-index: 10;
	--wt-navigation-bar-padding: var(--spacing-sm);

	--wt-navigation-bar-header-padding: var(--spacing-xs);
	--wt-navigation-bar-app-pic-height: 24px;

	--wt-navigation-bar-list-padding: var(--wt-navigation-bar-padding);
	--wt-navigation-bar-link-padding: var(--wt-navigation-bar-padding);
	--wt-navigation-bar-subnav-padding-left: var(--spacing-lg);
	--wt-navigation-bar-active-expansion-flag-width: 5px;
	--wt-navigation-bar-active-expansion-name-max-width: calc(
		100% -
		var(--icon-md-size) -
		var(--spacing-xs)
	);

	--wt-navigation-bar-background-color: var(--dp-18-surface-color);
	--wt-navigation-bar-option-text-color: var(--text-main-color);
	--wt-navigation-bar-option-text-active-color: var(--primary-on-color);
	--wt-navigation-bar-option-background-color: var(
		--wt-navigation-bar-background-color
	);
	--wt-navigation-bar-option-background-hover-color: var(--dp-20-surface-color);
	--wt-navigation-bar-option-background-active-color: var(
		--primary-light-color
	);
	--wt-navigation-bar-expansion-ribbon-color: var(--primary-color);
}
[data-v-a4c8edd8]:root {
	--notifications-bar-max-height: 60%;
	--notifications-bar-corner-margin: var(--spacing-sm);
	--notifications-bar-notifications-margin: 0 0 var(--spacing-xs) auto;
	--notifications-bar-z-index: 101;
}
[data-v-a4c8edd8]:root {
	--page-wrapper-padding: var(--spacing-sm);
	--page-wrapper-section-padding: var(--spacing-sm);
	--page-wrapper-section-gap: var(--spacing-sm);

	--wt-page-wrapper-background-color: var(--p-surface-50);
	--wt-page-wrapper-content-wrapper-color: var(--content-wrapper-color);
	/* --content-wrapper-border-radius: var(--p-border-radius-lg); */
}
:root.theme--dark[data-v-a4c8edd8] {
	--wt-page-wrapper-background-color: var(--p-surface-850);
}
[data-v-a4c8edd8]:root {
	--pagination-gap: var(--spacing-xs);
	--pagination-size-input-width: 100px;
}
.wt-player[data-v-a4c8edd8] {
	--plyr-color-main: var(--primary-color);
	--plyr-audio-control-color: var(--icon-color);
	--plyr-audio-control-color-hover: var(--icon-btn-hover-color);
	--plyr-audio-controls-background: var(--content-wrapper-color);
	--plyr-controls-icon-size: var(--icon-sm-size);
	--plyr-controls-icon-padding: var(--spacing-2xs);
	--plyr-audio-control-background-hover: transparent;
	--plyr-audio-progress-buffered-background: var(
		--dp-14-surface-color
	); /* loaded color */
	--wt-player-audio-progress-background: var(
		--wt-slider-background-color
	); /* not played color */
	--plyr-tooltip-background: var(--wt-tooltip-background-color);
	--plyr-tooltip-color: var(--wt-tooltip-text-color);
	/* --plyr-control-toggle-checked-background: var(--main-color); */
	--player-close-icon-transform-translate-x: var(--spacing-md);
	/* "-1 * var" for use the negative value of a variable */
	--player-close-icon-transform-translate-y: calc(-1 * var(--spacing-md));

	--wt-slider-border: 1px solid var(--secondary-color);
	--wt-slider-pointer-radius: 50%;
	--wt-slider-pointer-background-color: var(--dp-24-surface-color);
	--wt-slider-pointer-border-color: var(--dp-10-surface-color);
	--wt-slider-pointer-size: 16px;
}
[data-v-a4c8edd8]:root {
	--popup-wrapper-z-index: 12;

	--popup-shadow-opacity: 0.8;
	--wt-popup-shadow-color: hsla(0, 0%, 0%, var(--popup-shadow-opacity));

	--wt-popup-size-xs: 300px;
	--wt-popup-size-sm: 500px;
	--wt-popup-size-md: 800px;
	--wt-popup-size-lg: 1140px;

	--popup-max-height: 90%;

	--wt-popup-background-color: var(--dp-24-surface-color);
	--popup-sections-gap: var(--spacing-xs);
	--popup-padding: var(--spacing-sm);

	--popup-header-padding: var(--spacing-xs);
	--wt-popup-header-background-color: var(--dp-18-surface-color);
	--wt-popup-header-text-color: var(--text-main-color);

	--popup-main-section-padding-right: var(--spacing-xs); /* scroll offset */

	--popup-actions-padding: var(--spacing-xs);
}
[data-v-a4c8edd8]:root {
	--wt-progress-bar-height: 12px;
	--wt-progress-bar-padding: var(--spacing-3xs);
	--wt-progress-bar-border-radius: var(--wt-progress-bar-padding);

	--wt-progress-bar-background-color: var(--dp-1-surface-color);
	--wt-progress-bar-background-primary-color: var(--primary-color);
	--wt-progress-bar-background-secondary-color: var(--dp-20-surface-color);
	--wt-progress-bar-background-success-color: var(--success-color);
	--wt-progress-bar-background-error-color: var(--error-color);
	--wt-progress-bar-background-warning-color: var(--warning-color);
}
[data-v-a4c8edd8]:root {
	--radio-icon-margin: var(--spacing-xs);
	--radio-checkmark-size: 18px;
	--radio-bullet-size: 8px;
	--radio-border: 2px solid;
}
[data-v-a4c8edd8]:root {
	--rounded-action-border-size: 2px;
	--rounded-action-padding: calc(
		var(--spacing-xs) -
		var(--rounded-action-border-size)
	);

	--rounded-action-rounded-border-radius: var(--border-radius--pill);

	--rounded-action-bg-color: var(--dp-18-surface-color);
	--rounded-action-bg-hover-color: var(--dp-20-surface-color);

	--rounded-action-active-color: var(--dp-10-surface-color);
}
[data-v-a4c8edd8]:root {
	--wt-search-bar-width: 270px;
}
[data-v-a4c8edd8]:root {
	--wt-slider-pointer-size: 16px;
	--wt-slider-height: var(--wt-slider-pointer-size);

	--wt-slider-width: 100%;
	--wt-slider-input-height: 8px;
	--wt-slider-border: 1px solid var(--secondary-color);
	--wt-slider-background-color: var(--dp-1-surface-color);
	--wt-slider-background-completed-color: var(--primary-color);

	--wt-slider-pointer-background-color: var(--dp-24-surface-color);
	--wt-slider-pointer-background-hover-color: var(--dp-22-surface-color);
	--wt-slider-pointer-border-color: var(--dp-10-surface-color);

	--wt-slider-pointer-radius: 50%;

	--wt-slider-vertical-container-translation: translate(2px);
	--wt-slider-vertical-transform: translate(-100%, 0) rotate(-90deg);
	--wt-slider-vertical-transform-origin: 100% 0;
}
[data-v-a4c8edd8]:root {
	--wt-status-select-padding: 0 calc(var(--icon-size-md) + var(--spacing-xs)) 0
		0; /* reset wt-select padding, but preserve arrow icon padding */

	--wt-status-select-option-text-color: var(--text-main-color);
	--wt-status-select-option-background-color: var(--dp-22-surface-color);
	--wt-status-select-option-background-hover-color: var(
		--secondary-light-color
	);
	/* --wt-status-select-option-background-selected-color: var(--primary-light-color); */

	--wt-status-select-background-color: var(
		--wt-status-select-option-background-color
	);
}
[data-v-a4c8edd8]:root {
	--wt-stepper-divider-background-color: var(--secondary-color);
	--wt-stepper-divider-background-completed-color: var(--primary-color);
}
[data-v-a4c8edd8]:root {
	--switcher-icon-margin: var(--spacing-xs);
	--switcher-width: 40px;
	--switcher-height: 22px;
	--switcher-cicle-size: 14px;
	--switcher-cicle-margin: 4px;
	--switcher-cicle-translateX: 17px;
	--switcher-border-radius: 24px;
	/* circle */
	--wt-switcher-circle-background-color-on: var(--grey-darken-3);
	--wt-switcher-circle-background-color-on-hover: var(--grey-darken-4);
	--wt-switcher-circle-background-color-on-disabled: var(--grey-lighten-3);

	--wt-switcher-circle-background-color-off: var(--grey-lighten-4);
	--wt-switcher-circle-background-color-off-hover: var(--grey-lighten-5);
	--wt-switcher-circle-background-color-off-disabled: var(--grey-lighten-3);
	/* background */
	--wt-switcher-background-color-on: var(--primary-color);
	--wt-switcher-background-color-on-hover: var(--primary-hover-color);
	--wt-switcher-background-color-on-disabled: var(--primary-light-color);

	--wt-switcher-background-color-off: var(--grey-darken-2);
	--wt-switcher-background-color-off-hover: var(--grey-darken-1);
	--wt-switcher-background-color-off-disabled: var(--grey-lighten-4);
}
:root.theme--dark[data-v-a4c8edd8] {
	/* circle */
	--wt-switcher-circle-background-color-off: var(--grey-darken-4);
	--wt-switcher-circle-background-color-off-hover: var(--grey-darken-3);
	--wt-switcher-circle-background-color-off-disabled: var(--grey-darken-3);
	/* background */
	--wt-switcher-background-color-off: var(--grey-lighten-1);
	--wt-switcher-background-color-off-hover: var(--grey-lighten-2);
	--wt-switcher-background-color-off-disabled: var(--grey-darken-2);
}
[data-v-a4c8edd8]:root {
	--table-actions-padding: var(--spacing-xs);
	--table-actions-icon-gap: var(--spacing-xs);
}
[data-v-a4c8edd8]:root {
	--table-col-min-width: 140px;

	--table-head-sort-arrow-margin: var(--spacing-xs);
	--table-head-border: 1px solid;

	--table-min-height: 24px; /* 24px icon size or body-1 lh */
	--table-column-gap: var(--spacing-xs);
	--table-row-padding: var(--spacing-xs);

	--wt-table-head-border-color: var(--grey-lighten-1);
	--wt-table-head-background-color: var(--content-wrapper-color);
	--wt-table-primary-color: var(--content-wrapper-color);
	--wt-table-zebra-color: var(--dp-18-surface-color);
}
:root.theme--dark[data-v-a4c8edd8] {
	--wt-table-head-border-color: var(--grey-darken-1);
}
[data-v-a4c8edd8]:root {
	--tabs-underiline-height: 1px;
	--tabs-underiline-color: transparent;

	--tab-padding: var(--spacing-2xs);
	--tab-gap: var(--spacing-xs);
	--wt-tabs-text-color: var(--text-main-color);
	--wt-tabs-text-hover-color: var(--wt-tabs-text-color);
	--wt-tabs-text-active-color: var(--wt-tabs-text-color);
	--tab-border: 4px solid;
	--wt-tabs-underline-active-color: var(--primary-color);
	--tab-z-index: 1;
}
[data-v-a4c8edd8]:root {
	--textarea-min-height: 100px;
	--textarea-padding: var(--input-padding);
}
[data-v-a4c8edd8]:root {
	--timepicker-input-width: 80px;
	--timepicker-input-margin: var(--spacing-xs);
}
[data-v-a4c8edd8]:root {
	--tooltip-padding: var(--spacing-2xs) var(--spacing-xs);

	--wt-tooltip-text-color: var(--text-main-color);
	--wt-tooltip-background-color: var(--dp-24-surface-color);

	--tooltip-elevation: var(--elevation-10);
}
[data-v-a4c8edd8]:root {
	--wt-tree-item-active: var(--primary-light-color);
	--wt-tree-item-active-on: var(--grey-darken-4);

	--wt-tree-item-searched: var(--light-blue-lighten-4);
	--wt-tree-item-searched-on: var(--grey-darken-4);

	--wt-tree-item: var(--primary-light-color);
	--wt-tree-item-on: var(--grey-darken-1);

	--wt-tree-item-hover: var(--dp-24-surface-color);
	--wt-tree-item-hover-on: var(--grey-darken-1);
}
:root.theme--dark[data-v-a4c8edd8] {
	--wt-tree-item-active: var(--primary-light-color);
	--wt-tree-item-active-on: var(--grey-lighten-4);

	--wt-tree-item-searched: var(--light-blue-lighten-2);
	--wt-tree-item-searched-on: var(--grey-darken-4);

	--wt-tree-item: var(--primary-light-color);
	--wt-tree-item-on: var(--grey-lighten-3);

	--wt-tree-item-hover-on: var(--grey-lighten-3);
}
[data-v-a4c8edd8]:root {
	--wt-tree-table-col-min-witdh: var(--table-col-min-width);

	--wt-tree-table-head-sort-arrow-margin: var(--table-head-sort-arrow-margin);
	--wt-tree-table-head-border: var(--table-head-border);

	--wt-tree-table-min-height: var(--table-min-height);
	--wt-tree-table-column-gap: var(--table-column-gap);
	--wt-tree-table-row-padding: var(--table-row-padding);

	--wt-tree-table-head-border-color: var(--wt-table-head-border-color);
	--wt-tree-table-head-background-color: var(--wt-table-head-background-color);
	--wt-tree-table-primary-color: var(--wt-table-primary-color);
	--wt-tree-table-zebra-color: var(--wt-table-zebra-color);
}
:root.theme--dark[data-v-a4c8edd8] {
	--wt-tree-table-head-border-color: var(--wt-table-head-border-color);
}
[data-v-a4c8edd8]:root {
	--content-wrapper-padding: var(--spacing-xs);
	--content-wrapper-gap: var(--spacing-xs);
}
.table-page.wt-page-wrapper[data-v-a4c8edd8] {
	width: 100%;
	height: 100%;
}
.table-page .wt-page-wrapper__main[data-v-a4c8edd8],

.wt-page-wrapper__main[data-v-a4c8edd8]:has(.table-section) {
	min-height: 0;
}
.table-section[data-v-a4c8edd8] {
	display: flex;
	flex-direction: column;
	width: 100%;
	flex: 1;
	min-height: 0;
}
.table-section__table-wrapper[data-v-a4c8edd8] {
	display: flex;
	flex: 1 1 100%;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	min-height: 0;
	gap: var(--spacing-sm);
}
.table-section__table-wrapper .table-wrapper__visible-scroll-wrapper[data-v-a4c8edd8] {
	flex-grow: 1;
}
.table-section__table-wrapper .wt-pagination[data-v-a4c8edd8] {
	margin-top: auto;
}
.table-section__visible-scroll-wrapper[data-v-a4c8edd8] {
	overflow: visible;
	height: 100%;
}
.table-section__visible-scroll-wrapper .wt-table[data-v-a4c8edd8] {
	overflow: visible;
}
.table-title[data-v-a4c8edd8] {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: var(--spacing-sm) 0;
}
.table-title__title[data-v-a4c8edd8] {
	font-family: "Montserrat", monospace;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-transform: none;
}
.table-title__title + .hint[data-v-a4c8edd8] {
	top: -2px;
}
.table-title__actions-wrap[data-v-a4c8edd8] {
	display: flex;
	align-items: center;
	gap: var(--table-actions-icon-gap);
}
.main-section-wrapper .wt-loader.wt-brand-loader[data-v-a4c8edd8] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 1;
}
.table-wrapper--tab-table[data-v-a4c8edd8] {
	position: relative;
}
.table-wrapper--tab-table .wt-loader.wt-brand-loader[data-v-a4c8edd8] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 1;
}
.table-wrapper--tab-table .table-loading-wrapper[data-v-a4c8edd8] {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	min-height: 0;
}
.opened-card[data-v-a4c8edd8] {
	width: 100%;
}
.opened-card.wt-page-wrapper[data-v-a4c8edd8],
.opened-card.wt-dual-panel[data-v-a4c8edd8] {
	width: 100%;
}
.opened-card-tabs[data-v-a4c8edd8] {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: var(--spacing-sm);
}
.opened-card-tabs__tab[data-v-a4c8edd8] {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: var(--spacing-sm);
	min-height: 0;
}
.opened-card-header[data-v-a4c8edd8] {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin: var(--spacing-sm) 0;
}
.opened-card-header__title[data-v-a4c8edd8] {
	font-family: "Montserrat", monospace;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-transform: none;
}
.opened-card-header__title + .hint[data-v-a4c8edd8] {
	top: -2px;
}
.opened-card-form[data-v-a4c8edd8] {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.opened-card-input-grid[data-v-a4c8edd8] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: minmax(auto, auto);
	align-items: flex-start;
	grid-column-gap: var(--spacing-sm);
	grid-row-gap: var(--spacing-sm);
}
.opened-card-input-grid--1-col[data-v-a4c8edd8] {
	grid-template-columns: 1fr;
}
.opened-card-input-grid--w50[data-v-a4c8edd8] {
	width: 50%;
}
.opened-card-input-grid--w100[data-v-a4c8edd8] {
	width: 100%;
}
/*
	@author HlukhovYe
	layer needed beacuse of manipulating primevue's default typography
	https://webitel.atlassian.net/browse/WTEL-8775?focusedCommentId=723773
*/
@layer wt-default {
[data-v-a4c8edd8]:root {
    --transition: 0.2s;
    --box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    /* viewport breakpoints */
    --viewport-lg: 1904px;
    --viewport-md: 1264px;
    --viewport-sm: 960px;
    --viewport-xs: 600px;
}
html[data-v-a4c8edd8] {
    height: 100%;
    font-size: 16px;
}
body[data-v-a4c8edd8] {
    font-family: "Montserrat", monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-transform: none;
    margin: 0;
    height: 100%;
    min-height: 100%;
}
[data-v-a4c8edd8] {
    box-sizing: border-box;
}
.theme--dark body[data-v-a4c8edd8] {
    color-scheme: dark;
}
h1[data-v-a4c8edd8],
  h2[data-v-a4c8edd8],
  h3[data-v-a4c8edd8],
  h4[data-v-a4c8edd8],
  h5[data-v-a4c8edd8],
  h6[data-v-a4c8edd8],
  p[data-v-a4c8edd8] {
    margin: 0;
    font-weight: normal;
}
  /* reset ul styles */
ul[data-v-a4c8edd8] {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
iframe[data-v-a4c8edd8] {
    outline: none;
    border: none;
}
a[data-v-a4c8edd8] {
    color: #000;
    text-decoration: none;
}
.hidden[data-v-a4c8edd8] {
    opacity: 0;
    pointer-events: none;
}
}
/*
	@author HlukhovYe
	reset input autofill styles https://webitel.atlassian.net/browse/WTEL-9005
*/
input[data-v-a4c8edd8]:-webkit-autofill,
input[data-v-a4c8edd8]:-webkit-autofill:hover,
input[data-v-a4c8edd8]:-webkit-autofill:focus,
textarea[data-v-a4c8edd8]:-webkit-autofill,
textarea[data-v-a4c8edd8]:-webkit-autofill:hover,
textarea[data-v-a4c8edd8]:-webkit-autofill:focus,
select[data-v-a4c8edd8]:-webkit-autofill,
select[data-v-a4c8edd8]:-webkit-autofill:hover,
select[data-v-a4c8edd8]:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--p-inputtext-color);
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s; /* prevents an immediate color change */
}

/* https://github.com/Akryum/floating-vue/issues/488 */
.v-popper__arrow-container[data-v-a4c8edd8] {
  display: none;
}
.side-panel[data-v-a4c8edd8] {
  display: flex;
  position: fixed;
  top: calc(var(--flow-toolbar-height) + var(--flow-pages-height) + var(--spacing-xs));
  bottom: var(--spacing-xs);
  flex-direction: column;
  gap: var(--spacing-xs);
  box-sizing: border-box;
  box-shadow: var(--elevation-5);
  border-radius: var(--border-radius);
  background-color: var(--content-wrapper-color);
  padding: var(--spacing-xs);
  overflow: auto;
}
.the-config-panel[data-v-a4c8edd8] {
  right: var(--workspace-content-offset-side);
  width: var(--config-panel-width);
  will-change: width;
}
.the-config-panel__config-form[data-v-a4c8edd8] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.side-panel__resize-area[data-v-a4c8edd8] {
  position: fixed;
  width: 6px;
  cursor: w-resize;
  top: 0;
  right: calc(var(--config-panel-width) - var(--spacing-xs) + var(--workspace-content-offset-side));
  bottom: var(--spacing-xs);
  transform: translateX(-50%);
}.navbar-page[data-v-60ca12d9] {
  max-width: 270px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-xs);
  gap: var(--spacing-xs);
  border-radius: var(--border-radius);
  color: var(--flow-text-tab-color);
  flex-shrink: 0;
  text-wrap: nowrap;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  transition: flex-grow var(--transition) ease;
}
.navbar-page__delete-btn[data-v-60ca12d9] {
  opacity: 0;
  transition: opacity var(--transition) ease;
}
.navbar-page__icon[data-v-60ca12d9] {
  flex-shrink: 0;
}
.navbar-page:hover .navbar-page__delete-btn[data-v-60ca12d9] {
  opacity: 1;
}
.navbar-page[data-v-60ca12d9]:not(.navbar-page--active):hover {
  background: var(--secondary-light-color);
}
.navbar-page--active[data-v-60ca12d9] {
  cursor: auto;
  overflow: visible;
  background: var(--primary-light-color);
}
.navbar-page__input-name[data-v-60ca12d9] {
  background: transparent;
  border: none;
  padding: 0;
  width: fit-content;
  cursor: pointer;
}
.navbar-page__input-name--active[data-v-60ca12d9] {
  cursor: text;
}
.navbar-page__input-name[data-v-60ca12d9]:focus {
  outline: none;
  cursor: text;
}
@layer wt-default, base, primevue, wt-typography;
/* 
	@author Palonnyi Oleksandr
	Must be first — locks cascade layer priority 
	before any content is loaded: wt-default < base < primevue < wt-typography.
	[WTEL-9107](https://webitel.atlassian.net/browse/WTEL-9107)

	link for complex comment https://webitel.atlassian.net/browse/WTEL-9107?focusedCommentId=740565
*/
[data-v-39745b50]:root {
	--scrollbar-width: 10px;
	--scrollbar-height: 10px;
	--scrollbar-thumb-width: 10px;
	--scrollbar-bg-color: var(--p-surface-50);
	--scrollbar-thumb-color: var(--p-surface-150);
	--scrollbar-hover-thumb-color: var(--p-surface-250);
	--scrollbar-border-radius: var(--border-radius);
}
:root.theme--dark[data-v-39745b50] {
	--scrollbar-bg-color: var(--p-surface-850);
	--scrollbar-thumb-color: var(--p-surface-700);
	--scrollbar-hover-thumb-color: var(--p-surface-800);
}
.wt-scrollbar[data-v-39745b50] {
	/* scrollbar itself */
}
.wt-scrollbar[data-v-39745b50]::-webkit-scrollbar {
	width: var(--scrollbar-width);
	height: var(--scrollbar-height);
	cursor: pointer;
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-bg-color);
}

/* scrollable element */
.wt-scrollbar[data-v-39745b50]::-webkit-scrollbar-thumb {
	width: var(--scrollbar-thumb-width);
	height: var(--scrollbar-thumb-height);
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-thumb-color);
}
.wt-scrollbar[data-v-39745b50]::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-hover-thumb-color);
}
.wt-distant-scrollbar[data-v-39745b50]::-webkit-scrollbar {
	width: 14px;
	height: 18px;
	background-color: var(--scrollbar-bg-color);
}
.wt-distant-scrollbar[data-v-39745b50]::-webkit-scrollbar-thumb {
	height: 2px;
	border: 4px solid rgba(0, 0, 0, 0);
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-thumb-color);
	background-clip: padding-box;
	/* -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05); */
}
[data-v-39745b50]:root {
	--border-radius: var(--spacing-2xs);
	--border-radius--pill: 50px;
}
/*
NOTE:   text-transform: none; is set explicitly cause t-t is inherited from parent
 */

/* 
	@author HlukhovYe
	layer needed for overriding primevue's default typography for the components
	https://webitel.atlassian.net/browse/WTEL-8775?focusedCommentId=723773
*/
@layer wt-typography {
.typo-heading-1[data-v-39745b50] {
		font-family: "Montserrat", monospace;
		font-size: 32px;
		font-weight: 600;
		line-height: 48px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-2[data-v-39745b50] {
		font-family: "Montserrat", monospace;
		font-size: 24px;
		font-weight: 600;
		line-height: 40px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-3[data-v-39745b50] {
		font-family: "Montserrat", monospace;
		font-size: 20px;
		font-weight: 600;
		line-height: 32px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-4[data-v-39745b50] {
		font-family: "Montserrat", monospace;
		font-size: 16px;
		font-weight: 600;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-subtitle-1[data-v-39745b50] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 500;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-subtitle-2[data-v-39745b50] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-body-1[data-v-39745b50] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 400;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.56px; */
		/* 0.04em */
}
.typo-body-1-bold[data-v-39745b50] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 700;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.56px; */
		/* 0.04em */
}
.typo-body-2[data-v-39745b50] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 400;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.16px; */
		/* 0.01em */
}
.typo-body-2-bold[data-v-39745b50] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 700;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.16px; */
		/* 0.01em */
}
.typo-button--md[data-v-39745b50] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 24px;
		text-transform: uppercase;
		/* letter-spacing: 0.96px; */
		/* 0.06em */
}
.typo-button--sm[data-v-39745b50] {
		font-family: "Montserrat", monospace;
		font-size: 10px;
		font-weight: 500;
		line-height: 24px;
		text-transform: uppercase;
		/* letter-spacing: 0.96px; */
		/* 0.06em */
}
.typo-caption[data-v-39745b50] {
		font-family: "Montserrat", monospace;
		font-size: 10px;
		font-weight: 400;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.48px; */
		/* 0.03em */
}
.typo-overline[data-v-39745b50] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 20px;
		text-transform: uppercase;
		/* letter-spacing: 2.56px; */
		/* 0.16em */
}
}
[data-v-39745b50]:root {
	/* LIGHTNESS */
	--lightness-lighten-5: 95%;
	--lightness-lighten-4: 90%;
	--lightness-lighten-3: 80%;
	--lightness-lighten-2: 70%;
	--lightness-lighten-1: 60%;

	--lightness-darken-1: 50%;
	--lightness-darken-2: 45%;
	--lightness-darken-3: 40%;
	--lightness-darken-4: 35%;

	--lightness-accent-1: 75%;
	--lightness-accent-2: 65%;
	--lightness-accent-3: 50%;
	--lightness-accent-4: 40%;

	/* SATURATION */
	--saturation-lighten-5: 92%;
	--saturation-lighten-4: 88%;
	--saturation-lighten-3: 90%;
	--saturation-lighten-2: 90%;
	--saturation-lighten-1: 90%;

	--saturation-darken-1: 75%;
	--saturation-darken-2: 75%;
	--saturation-darken-3: 75%;
	--saturation-darken-4: 75%;

	--saturation-accent-1: 91%;
	--saturation-accent-2: 90%;
	--saturation-accent-3: 97%;
	--saturation-accent-4: 97%;

	/* HUE */
	--hue-red: 0;
	--hue-pink: 337;
	--hue-purple: 291;
	--hue-deep-purple: 263;
	--hue-indigo: 232;
	--hue-blue: 209;
	--hue-light-blue: 202;
	--hue-cyan: 188;
	--hue-teal: 173;
	--hue-green: 121;
	--hue-light-green: 88;
	--hue-lime: 66;
	--hue-yellow: 54;
	--hue-amber: 43;
	--hue-orange: 32;
	--hue-deep-orange: 11;

	/* RED */
	--red-lighten-5: hsla(
		var(--hue-red),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--red-lighten-4: hsla(
		var(--hue-red),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--red-lighten-3: hsla(
		var(--hue-red),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--red-lighten-2: hsla(
		var(--hue-red),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--red-lighten-1: hsla(
		var(--hue-red),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--red-darken-4: hsla(
		var(--hue-red),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--red-darken-3: hsla(
		var(--hue-red),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--red-darken-2: hsla(
		var(--hue-red),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--red-darken-1: hsla(
		var(--hue-red),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--red-accent-4: hsla(
		var(--hue-red),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--red-accent-3: hsla(
		var(--hue-red),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--red-accent-2: hsla(
		var(--hue-red),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--red-accent-1: hsla(
		var(--hue-red),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* PINK */
	--pink-lighten-5: hsla(
		var(--hue-pink),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--pink-lighten-4: hsla(
		var(--hue-pink),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--pink-lighten-3: hsla(
		var(--hue-pink),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--pink-lighten-2: hsla(
		var(--hue-pink),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--pink-lighten-1: hsla(
		var(--hue-pink),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--pink-darken-4: hsla(
		var(--hue-pink),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--pink-darken-3: hsla(
		var(--hue-pink),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--pink-darken-2: hsla(
		var(--hue-pink),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--pink-darken-1: hsla(
		var(--hue-pink),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--pink-accent-4: hsla(
		var(--hue-pink),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--pink-accent-3: hsla(
		var(--hue-pink),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--pink-accent-2: hsla(
		var(--hue-pink),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--pink-accent-1: hsla(
		var(--hue-pink),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* PURPLE */
	--purple-lighten-5: hsla(
		var(--hue-purple),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--purple-lighten-4: hsla(
		var(--hue-purple),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--purple-lighten-3: hsla(
		var(--hue-purple),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--purple-lighten-2: hsla(
		var(--hue-purple),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--purple-lighten-1: hsla(
		var(--hue-purple),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--purple-darken-4: hsla(
		var(--hue-purple),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--purple-darken-3: hsla(
		var(--hue-purple),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--purple-darken-2: hsla(
		var(--hue-purple),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--purple-darken-1: hsla(
		var(--hue-purple),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--purple-accent-4: hsla(
		var(--hue-purple),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--purple-accent-3: hsla(
		var(--hue-purple),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--purple-accent-2: hsla(
		var(--hue-purple),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--purple-accent-1: hsla(
		var(--hue-purple),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* DEEP PURPLE */
	--deep-purple-lighten-5: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--deep-purple-lighten-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--deep-purple-lighten-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--deep-purple-lighten-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--deep-purple-lighten-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--deep-purple-darken-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--deep-purple-darken-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--deep-purple-darken-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--deep-purple-darken-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--deep-purple-accent-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--deep-purple-accent-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--deep-purple-accent-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--deep-purple-accent-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* INDIGO */
	--indigo-lighten-5: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--indigo-lighten-4: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--indigo-lighten-3: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--indigo-lighten-2: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--indigo-lighten-1: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--indigo-darken-4: hsla(
		var(--hue-indigo),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--indigo-darken-3: hsla(
		var(--hue-indigo),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--indigo-darken-2: hsla(
		var(--hue-indigo),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--indigo-darken-1: hsla(
		var(--hue-indigo),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--indigo-accent-4: hsla(
		var(--hue-indigo),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--indigo-accent-3: hsla(
		var(--hue-indigo),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--indigo-accent-2: hsla(
		var(--hue-indigo),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--indigo-accent-1: hsla(
		var(--hue-indigo),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* BLUE */
	--blue-lighten-5: hsla(
		var(--hue-blue),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--blue-lighten-4: hsla(
		var(--hue-blue),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--blue-lighten-3: hsla(
		var(--hue-blue),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--blue-lighten-2: hsla(
		var(--hue-blue),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--blue-lighten-1: hsla(
		var(--hue-blue),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--blue-darken-4: hsla(
		var(--hue-blue),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--blue-darken-3: hsla(
		var(--hue-blue),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--blue-darken-2: hsla(
		var(--hue-blue),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--blue-darken-1: hsla(
		var(--hue-blue),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--blue-accent-4: hsla(
		var(--hue-blue),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--blue-accent-3: hsla(
		var(--hue-blue),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--blue-accent-2: hsla(
		var(--hue-blue),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--blue-accent-1: hsla(
		var(--hue-blue),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIGHT BLUE */
	--light-blue-lighten-5: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--light-blue-lighten-4: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--light-blue-lighten-3: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--light-blue-lighten-2: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--light-blue-lighten-1: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--light-blue-darken-4: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--light-blue-darken-3: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--light-blue-darken-2: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--light-blue-darken-1: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--light-blue-accent-4: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--light-blue-accent-3: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--light-blue-accent-2: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--light-blue-accent-1: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* CYAN */
	--cyan-lighten-5: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--cyan-lighten-4: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--cyan-lighten-3: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--cyan-lighten-2: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--cyan-lighten-1: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--cyan-darken-4: hsla(
		var(--hue-cyan),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--cyan-darken-3: hsla(
		var(--hue-cyan),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--cyan-darken-2: hsla(
		var(--hue-cyan),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--cyan-darken-1: hsla(
		var(--hue-cyan),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--cyan-accent-4: hsla(
		var(--hue-cyan),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--cyan-accent-3: hsla(
		var(--hue-cyan),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--cyan-accent-2: hsla(
		var(--hue-cyan),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--cyan-accent-1: hsla(
		var(--hue-cyan),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* TEAL */
	--teal-lighten-5: hsla(
		var(--hue-teal),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--teal-lighten-4: hsla(
		var(--hue-teal),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--teal-lighten-3: hsla(
		var(--hue-teal),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--teal-lighten-2: hsla(
		var(--hue-teal),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--teal-lighten-1: hsla(
		var(--hue-teal),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--teal-darken-4: hsla(
		var(--hue-teal),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--teal-darken-3: hsla(
		var(--hue-teal),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--teal-darken-2: hsla(
		var(--hue-teal),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--teal-darken-1: hsla(
		var(--hue-teal),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--teal-accent-4: hsla(
		var(--hue-teal),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--teal-accent-3: hsla(
		var(--hue-teal),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--teal-accent-2: hsla(
		var(--hue-teal),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--teal-accent-1: hsla(
		var(--hue-teal),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* GREEN */
	--green-lighten-5: hsla(
		var(--hue-green),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--green-lighten-4: hsla(
		var(--hue-green),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--green-lighten-3: hsla(
		var(--hue-green),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--green-lighten-2: hsla(
		var(--hue-green),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--green-lighten-1: hsla(
		var(--hue-green),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--green-darken-4: hsla(
		var(--hue-green),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--green-darken-3: hsla(
		var(--hue-green),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--green-darken-2: hsla(
		var(--hue-green),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--green-darken-1: hsla(
		var(--hue-green),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--green-accent-4: hsla(
		var(--hue-green),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--green-accent-3: hsla(
		var(--hue-green),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--green-accent-2: hsla(
		var(--hue-green),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--green-accent-1: hsla(
		var(--hue-green),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIGHT GREEN */
	--light-green-lighten-5: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--light-green-lighten-4: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--light-green-lighten-3: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--light-green-lighten-2: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--light-green-lighten-1: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--light-green-darken-4: hsla(
		var(--hue-light-green),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--light-green-darken-3: hsla(
		var(--hue-light-green),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--light-green-darken-2: hsla(
		var(--hue-light-green),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--light-green-darken-1: hsla(
		var(--hue-light-green),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--light-green-accent-4: hsla(
		var(--hue-light-green),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--light-green-accent-3: hsla(
		var(--hue-light-green),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--light-green-accent-2: hsla(
		var(--hue-light-green),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--light-green-accent-1: hsla(
		var(--hue-light-green),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIME */
	--lime-lighten-5: hsla(
		var(--hue-lime),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--lime-lighten-4: hsla(
		var(--hue-lime),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--lime-lighten-3: hsla(
		var(--hue-lime),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--lime-lighten-2: hsla(
		var(--hue-lime),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--lime-lighten-1: hsla(
		var(--hue-lime),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--lime-darken-4: hsla(
		var(--hue-lime),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--lime-darken-3: hsla(
		var(--hue-lime),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--lime-darken-2: hsla(
		var(--hue-lime),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--lime-darken-1: hsla(
		var(--hue-lime),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--lime-accent-4: hsla(
		var(--hue-lime),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--lime-accent-3: hsla(
		var(--hue-lime),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--lime-accent-2: hsla(
		var(--hue-lime),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--lime-accent-1: hsla(
		var(--hue-lime),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* yellow */
	--yellow-lighten-5: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--yellow-lighten-4: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--yellow-lighten-3: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--yellow-lighten-2: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--yellow-lighten-1: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--yellow-darken-4: hsla(
		var(--hue-yellow),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--yellow-darken-3: hsla(
		var(--hue-yellow),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--yellow-darken-2: hsla(
		var(--hue-yellow),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--yellow-darken-1: hsla(
		var(--hue-yellow),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--yellow-accent-4: hsla(
		var(--hue-yellow),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--yellow-accent-3: hsla(
		var(--hue-yellow),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--yellow-accent-2: hsla(
		var(--hue-yellow),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--yellow-accent-1: hsla(
		var(--hue-yellow),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* amber */
	--amber-lighten-5: hsla(
		var(--hue-amber),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--amber-lighten-4: hsla(
		var(--hue-amber),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--amber-lighten-3: hsla(
		var(--hue-amber),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--amber-lighten-2: hsla(
		var(--hue-amber),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--amber-lighten-1: hsla(
		var(--hue-amber),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--amber-darken-4: hsla(
		var(--hue-amber),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--amber-darken-3: hsla(
		var(--hue-amber),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--amber-darken-2: hsla(
		var(--hue-amber),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--amber-darken-1: hsla(
		var(--hue-amber),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--amber-accent-4: hsla(
		var(--hue-amber),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--amber-accent-3: hsla(
		var(--hue-amber),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--amber-accent-2: hsla(
		var(--hue-amber),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--amber-accent-1: hsla(
		var(--hue-amber),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* orange */
	--orange-lighten-5: hsla(
		var(--hue-orange),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--orange-lighten-4: hsla(
		var(--hue-orange),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--orange-lighten-3: hsla(
		var(--hue-orange),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--orange-lighten-2: hsla(
		var(--hue-orange),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--orange-lighten-1: hsla(
		var(--hue-orange),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--orange-darken-4: hsla(
		var(--hue-orange),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--orange-darken-3: hsla(
		var(--hue-orange),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--orange-darken-2: hsla(
		var(--hue-orange),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--orange-darken-1: hsla(
		var(--hue-orange),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--orange-accent-4: hsla(
		var(--hue-orange),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--orange-accent-3: hsla(
		var(--hue-orange),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--orange-accent-2: hsla(
		var(--hue-orange),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--orange-accent-1: hsla(
		var(--hue-orange),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* deep-orange */
	--deep-orange-lighten-5: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--deep-orange-lighten-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--deep-orange-lighten-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--deep-orange-lighten-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--deep-orange-lighten-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--deep-orange-darken-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--deep-orange-darken-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--deep-orange-darken-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--deep-orange-darken-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--deep-orange-accent-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--deep-orange-accent-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--deep-orange-accent-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--deep-orange-accent-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* grey */

	--lightness-lighten-5-grey: 94%;
	--lightness-lighten-4-grey: 84%;
	--lightness-lighten-3-grey: 74%;
	--lightness-lighten-2-grey: 64%;
	--lightness-lighten-1-grey: 54%;

	--lightness-darken-1-grey: 44%;
	--lightness-darken-2-grey: 34%;
	--lightness-darken-3-grey: 24%;
	--lightness-darken-4-grey: 14%;
	--lightness-darken-5-grey: 4%;

	--saturation-grey: 20%;
	--hue-grey: 225;

	--grey-lighten-5: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-5-grey),
		1
	);
	--grey-lighten-4: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-4-grey),
		1
	);
	--grey-lighten-3: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-3-grey),
		1
	);
	--grey-lighten-2: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-2-grey),
		1
	);
	--grey-lighten-1: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-1-grey),
		1
	);

	--grey-darken-1: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-1-grey),
		1
	);
	--grey-darken-2: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-2-grey),
		1
	);
	--grey-darken-3: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-3-grey),
		1
	);
	--grey-darken-4: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-4-grey),
		1
	);
	--grey-darken-5: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-5-grey),
		1
	);

	--black: hsla(0, 0%, 0%, 1);
	--white: hsla(0, 0%, 100%, 1);
}
[data-v-39745b50]:root {
	/* HSL COLORS HUE VALUE */
	--_accent-color-hue: 42;
	--_secondary-color-hue: 202;
	--_page-bg-color-hue: 209;
	--_icon-color-hue: 202;
	--_positive-color-hue: 119;
	--_negative-color-hue: 11;

	--_hold-color-hue: 54;
	--_transfer-color-hue: 227;
	--_job-color-hue: 209;

	/* DEFAULT STATES OPACITY */
	--_opacity--default: 0.8;
	--_opacity--hover: 1;
	--_opacity--active: 1;
	--_opacity--focus: 0.8;
	--_opacity--disabled: 0.4;

	/* BASIC HSL COLORS VALUES */
	--_accent-color: var(--_accent-color-hue), 100%, 50%;
	--_main-color: var(--_accent-color-hue), 20%, 99%;
	--_contrast-color: var(--_accent-color-hue), 20%, 1%;
	--_secondary-color: var(--_secondary-color-hue), 20%, 90%;
	--_secondary-color-50: var(--_secondary-color-hue), 22%, 96%;
	--_page-bg-color: var(--_page-bg-color-hue), 20%, 95%;
	--_header-color: var(--_page-bg-color-hue), 20%, 90%;
	--_positive-color: var(--_positive-color-hue), 60%, 40%;
	--_negative-color: var(--_negative-color-hue), 80%, 50%;
	--_icon-color: var(--_icon-color-hue), 100%, 15%;

	--_hold-color: var(--_hold-color-hue), 80%, 50%;
	--_transfer-color: var(--_transfer-color-hue), 80%, 50%;
	--_job-color: var(--_job-color-hue), 96%, 57%;

	/* MAIN COLORS */
	--accent-color: hsla(var(--_accent-color), 1);

	--main-color: hsla(var(--_main-color), 1);

	--contrast-color: hsla(var(--_contrast-color), 1);

	--secondary-color: hsla(var(--_secondary-color), 1);
	--secondary-color-50: hsla(var(--_secondary-color-50), 1);

	/* ICON COLORS */
	--icon-color-secondary: hsla(var(--_icon-color), 0.25);

	--icon-color--hover: hsla(var(--_icon-color), var(--_opacity--hover));

	--icon-color-accent: var(--accent-color);
	--icon-color-contrast: hsla(var(--_main-color), var(--_opacity--default));
	--icon-color-active: var(--icon-color--hover);
	--icon-color-disabled: hsla(var(--_icon-color), var(--_opacity--disabled));
	--icon-color-success: var(--true-color);
	--icon-color-danger: var(--false-color);
	--icon-color-transfer: var(--transfer-color);
	--icon-color-hold: var(--hold-color);
	--icon-color-secondary-50: var(--secondary-color-50);

	--page-bg-color: hsla(var(--_page-bg-color), 1);
	--header-color: hsla(var(--_header-color), 1);

	--accent-secondary-color: hsla(var(--_accent-color), 0.3);

	/* SEMANTIC COLORS */
	--disabled-color: hsl(var(--_contrast-color), var(--_opacity--disabled));

	--true-color: hsla(var(--_positive-color), var(--_opacity--default));
	--true--hover-color: hsla(var(--_positive-color), var(--_opacity--hover));

	--false-color: hsla(var(--_negative-color), var(--_opacity--default));
	--false--hover-color: hsla(var(--_negative-color), var(--_opacity--hover));

	--hold-color: hsla(var(--_hold-color), var(--_opacity--default));
	--hold--hover-color: hsla(var(--_hold-color), var(--_opacity--hover));

	--transfer-color: hsla(var(--_transfer-color), var(--_opacity--default));
	--transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover));

	--job-color: hsla(var(--_job-color), var(--_opacity--default));
	--job--hover-color: hsla(var(--_job-color), var(--_opacity--hover));

	--link-color: hsla(205, 90%, 45%, 1);
	--link--hover-color: hsla(205, 90%, 60%, 1);

	/* SUBORDINATE COLORS */
	--tag-bg-color: var(--accent-secondary-color);

	/* FORM STATES OPACITY */
	--form-opacity--default: var(--_opacity--default);
	--form-opacity--hover: var(--_opacity--hover);
	--form-opacity--active: var(--_opacity--active);
	--form-opacity--focus: var(--_opacity--focus);
	--form-opacity--disabled: var(--_opacity--disabled);

	--form-placeholder-opacity: 0.6;
	--form-placeholder-opacity--focus: 0.4;
	--form-border-opacity--disabled: 0.05;

	--form-opacity--ouline--default: 0.4;
	--form-opacity--ouline--hover: 0.7;

	/* FORM COLORS */
	--form-input-color: var(--contrast-color);
	/* user input color */

	--form-label-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);
	--form-label--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--hover)
	);
	--form-label--active-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--active)
	);
	--form-label--disabled-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--disabled)
	);

	--form-border-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);
	--form-border--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--hover)
	);
	--form-border--disabled-color: hsla(
		var(--_contrast-color),
		var(--form-border-opacity--disabled)
	);

	--form-placeholder-color: hsla(
		var(--_contrast-color),
		var(--form-placeholder-opacity)
	);
	--form-placeholder-color--focus: hsla(
		var(--_contrast-color),
		var(--form-placeholder-opacity--focus)
	);
	--form-placeholder-color--disabled: hsla(
		var(--_contrast-color),
		var(--form-opacity--disabled)
	);

	/* outline */
	--form-outline-label-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);

	--form-outline-border-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--ouline--default)
	);
	--form-outline-border--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--ouline--hover)
	);

	/* TEXT OPACITY */
	--text-opacity--default: var(--_opacity--default);
	--text-opacity----outline--default: 0.7;
	--text-opacity--disabled: 0.5;

	/* TEXT COLORS */
	--text-primary-color: hsla(
		var(--_contrast-color),
		var(--text-opacity--default)
	);
	--text-outline-color: hsla(
		var(--_contrast-color),
		var(--text-opacity----outline--default)
	);
	--text-contrast-color: hsla(var(--_main-color), var(--text-opacity--default));
	--text--disabled-color: hsla(
		var(--_contrast-color),
		var(--text-opacity--disabled)
	);

	/* CHAT COLORS */
	--_chat-client-color: var(--_accent-color);
	--_chat-client-opacity: 0.2;
	--_chat-agent-color: var(--_secondary-color-50);
	--_chat-agent-opacity: 1;

	--chat-client-message-bg-color: hsla(
		var(--_chat-client-color),
		var(--_chat-client-opacity)
	);
	--chat-agent-message-bg-color: hsla(
		var(--_chat-agent-color),
		var(--_chat-agent-opacity)
	);
	--chat-client-attachment-bg-color: hsla(
		var(--_chat-client-color),
		var(--_chat-client-opacity)
	);
	--chat-agent-attachment-bg-color: hsla(
		var(--_chat-agent-color),
		var(--_chat-agent-opacity)
	);
}
/* shared text field colors */
[data-v-39745b50]:root {
	/* TODO: move to separate helper-text component */
	/* helper */
	--wt-helper-text-color: var(--text-main-color);
	--wt-helper-text-disabled-color: var(--text-disabled-color);
	--wt-helper-text-invalid-color: var(--text-error-color);

	/* text */
	--wt-text-field-text-color: var(--black);

	/* placeholder */
	--wt-text-field-error-text-color: var(--error-color);
	--wt-text-field-placeholder-color: var(--grey-lighten-1);
	--wt-text-field-placeholder-error-color: var(--error-color);
	--wt-text-field-placeholder-disabled-color: var(--text-disabled-color);

	/* border */
	--wt-text-field-input-border-color: var(--grey-darken-1);
	--wt-text-field-input-border-disabled-color: var(--dp-16-surface-color);
	--wt-text-field-input-border-error-color: var(--error-color);

	/* input bg */
	--wt-text-field-input-background-disabled-color: var(--dp-16-surface-color);

	/* select */
	--wt-text-field-select-option-text-color: var(--text-main-color);
	--wt-text-field-select-option-text-hover-color: var(--primary-on-color);
	--wt-text-field-select-option-text-selected-color: var(--primary-on-color);

	--wt-text-field-select-option-wrapper-border-color: var(
		--dp-22-surface-color
	);
	--wt-text-field-select-option-background-color: var(--dp-22-surface-color);
	--wt-text-field-select-option-background-hover-color: var(
		--primary-light-color
	);
	--wt-text-field-select-option-background-selected-color: var(--primary-color);
}
:root.theme--dark[data-v-39745b50] {
	/* text */
	--wt-text-field-text-color: var(--white);

	--wt-text-field-input-border-color: var(--grey-lighten-1);
}
[data-v-39745b50]:root {
	/* dp colors */
	--dp-24-surface-color: hsl(0, 0%, 100%);
	--dp-23-surface-color: hsl(225, 20%, 99%);
	--dp-22-surface-color: hsl(225, 20%, 98%);
	--dp-21-surface-color: hsl(225, 20%, 97%);
	--dp-20-surface-color: hsl(225, 20%, 96%);
	--dp-19-surface-color: hsl(225, 20%, 95%);
	--dp-18-surface-color: hsl(225, 20%, 94%);
	--dp-17-surface-color: hsl(225, 20%, 93%);
	--dp-16-surface-color: hsl(225, 20%, 92%);
	--dp-15-surface-color: hsl(225, 20%, 91%);
	--dp-14-surface-color: hsl(225, 20%, 90%);
	--dp-13-surface-color: hsl(225, 20%, 89%);
	--dp-12-surface-color: hsl(225, 20%, 88%);
	--dp-11-surface-color: hsl(225, 20%, 87%);
	--dp-10-surface-color: hsl(225, 20%, 86%);
	--dp-9-surface-color: hsl(225, 20%, 85%);
	--dp-8-surface-color: hsl(225, 20%, 84%);
	--dp-7-surface-color: hsl(225, 20%, 83%);
	--dp-6-surface-color: hsl(225, 20%, 82%);
	--dp-5-surface-color: hsl(225, 20%, 81%);
	--dp-4-surface-color: hsl(225, 20%, 80%);
	--dp-3-surface-color: hsl(225, 20%, 79%);
	--dp-2-surface-color: hsl(225, 20%, 78%);
	--dp-1-surface-color: hsl(225, 20%, 77%);

	/* content wrapper */
	--content-wrapper-color: var(--p-content-background);
	--content-wrapper-hover-color: var(--p-content-hover-background);

	/* context menu */
	--context-menu-background-color: var(--content-wrapper-color);
	--context-menu-option-hover-color: var(--p-surface-50);
	--context-menu-option-disabled-color: var(--p-surface-100);
	--context-menu-option-text-color: var(--text-main-color);
	--context-menu-option-text-disabled-color: var(--text-disabled-color);

	/* success colors */
	--success-color: var(--green-darken-4);
	--success-hover-color: var(--green-darken-3);
	--success-light-color: var(--green-lighten-4);
	--success-on-color: var(--white);

	/* warning colors */
	--warning-color: var(--orange-accent-2);
	--warning-hover-color: var(--orange-accent-1);
	--warning-light-color: var(--orange-lighten-4);
	--warning-on-color: var(--black);

	/* error colors */
	--error-color: var(--red-accent-2);
	--error-hover-color: var(--red-lighten-2);
	--error-light-color: var(--red-lighten-4);
	--error-on-color: var(--white);

	/* info colors */
	--info-color: var(--blue-darken-1);
	--info-hover-color: var(--blue-lighten-1);
	--info-light-color: var(--blue-lighten-4);
	--info-on-color: var(--black);

	/* job colors */
	--job-color: var(--blue-darken-1);
	--job-hover-color: var(--blue-lighten-1);
	--job-light-color: var(--blue-lighten-4);
	--job-on-color: var(--black);

	/* chat colors */
	--chat-color: var(--indigo-accent-2);
	--chat-hover-color: var(--indigo-accent-1);
	--chat-light-color: var(--indigo-lighten-4);
	--chat-on-color: var(--black);

	/* transfer colors */
	--transfer-color: var(--indigo-lighten-1);
	--transfer-hover-color: var(--indigo-lighten-2);
	--transfer-light-color: var(--indigo-lighten-4);
	--transfer-on-color: var(--white);

	/* primary colors */
	--primary-color: var(--amber-accent-3);
	--primary-hover-color: var(--amber-accent-2);
	--primary-light-color: var(--amber-lighten-3);
	--primary-on-color: var(--black);

	/* secondary colors */
	--secondary-color: var(--dp-10-surface-color);
	--secondary-hover-color: var(--dp-14-surface-color);
	--secondary-light-color: var(--dp-16-surface-color);
	--secondary-on-color: var(--grey-darken-4);

	/* email colors */
	--email-color: var(--blue-darken-3);
	--email-hover-color: var(--blue-darken-2);
	--email-light-color: var(--blue-lighten-2);
	--email-on-color: var(--black);

	/* accent colors */
	--accent-color: var(--purple-lighten-1);
	--sub-accent-color: var(--indigo-darken-3);

	/* typography colors */
	--text-main-color: var(--grey-darken-3);
	--text-disabled-color: var(--grey-lighten-1);
	--text-error-color: var(--error-color);
	--text-success-color: var(--success-color);
	--text-link-color: var(--info-color);
	/* typography on colors */
	--text-on-brand-color: var(--white);
}
:root.theme--dark[data-v-39745b50] {
	/* dp colors */
	--dp-24-surface-color: hsl(225, 20%, 25%);
	--dp-23-surface-color: hsl(225, 20%, 24%);
	--dp-22-surface-color: hsl(225, 20%, 23%);
	--dp-21-surface-color: hsl(225, 20%, 22%);
	--dp-20-surface-color: hsl(225, 20%, 21%);
	--dp-19-surface-color: hsl(225, 20%, 20%);
	--dp-18-surface-color: hsl(225, 20%, 19%);
	--dp-17-surface-color: hsl(225, 20%, 18%);
	--dp-16-surface-color: hsl(225, 20%, 17%);
	--dp-15-surface-color: hsl(225, 20%, 16%);
	--dp-14-surface-color: hsl(225, 20%, 15%);
	--dp-13-surface-color: hsl(225, 20%, 14%);
	--dp-12-surface-color: hsl(225, 20%, 13%);
	--dp-11-surface-color: hsl(225, 20%, 12%);
	--dp-10-surface-color: hsl(225, 20%, 11%);
	--dp-9-surface-color: hsl(225, 20%, 10%);
	--dp-8-surface-color: hsl(225, 20%, 9%);
	--dp-7-surface-color: hsl(225, 20%, 8%);
	--dp-6-surface-color: hsl(225, 20%, 7%);
	--dp-5-surface-color: hsl(225, 20%, 6%);
	--dp-4-surface-color: hsl(225, 20%, 5%);
	--dp-3-surface-color: hsl(225, 20%, 4%);
	--dp-2-surface-color: hsl(225, 20%, 3%);
	--dp-1-surface-color: hsl(225, 20%, 2%);

	/* success colors */
	--success-color: var(--green-darken-4);
	--success-hover-color: var(--green-darken-3);
	--success-light-color: var(--green-lighten-3);
	--success-on-color: var(--black);

	/* warning colors */
	--warning-color: var(--orange-accent-2);
	--warning-hover-color: var(--orange-accent-1);
	--warning-light-color: var(--orange-lighten-3);
	--warning-on-color: var(--black);

	/* error colors */
	--error-color: var(--red-accent-2);
	--error-hover-color: var(--red-lighten-2);
	--error-light-color: var(--red-lighten-3);
	--error-on-color: var(--black);

	/* info colors */
	--info-color: var(--blue-darken-1);
	--info-hover-color: var(--blue-lighten-1);
	--info-light-color: var(--blue-lighten-3);
	--info-on-color: var(--white);

	/* job colors */
	--job-color: var(--blue-darken-1);
	--job-hover-color: var(--blue-lighten-1);
	--job-light-color: var(--blue-lighten-3);
	--job-on-color: var(--white);

	/* chat colors */
	--chat-color: var(--indigo-accent-2);
	--chat-hover-color: var(--indigo-accent-1);
	--chat-light-color: var(--indigo-lighten-3);
	--chat-on-color: var(--white);

	/* transfer colors */
	--transfer-color: var(--indigo-darken-1);
	--transfer-hover-color: var(--indigo-lighten-1);
	--transfer-light-color: var(--indigo-lighten-4);
	--transfer-on-color: var(--white);

	/* primary colors */
	--primary-color: var(--amber-darken-2);
	--primary-hover-color: var(--amber-darken-1);
	--primary-light-color: var(--amber-darken-4);
	--primary-on-color: var(--black);

	/* secondary colors */
	--secondary-on-color: var(--grey-lighten-4);

	/* email colors */
	--email-color: var(--blue-darken-3);
	--email-hover-color: var(--blue-darken-2);
	--email-light-color: var(--blue-lighten-1);
	--email-on-color: var(--white);

	/* accent colors */
	--accent-color: var(--purple-lighten-1);
	--sub-accent-color: var(--indigo-darken-3);

	/* typography colors */
	--text-main-color: var(--grey-lighten-3);
	--text-disabled-color: var(--grey-darken-1);
	--text-error-color: var(--error-color);
	--text-success-color: var(--success-color);
	--text-link-color: var(--info-color);
	/* typography on colors */
	--text-on-brand-color: var(--white);

	/* context menu */
	--context-menu-option-hover-color: var(--p-surface-900);
	--context-menu-option-disabled-color: var(--p-surface-850);
}
[data-v-39745b50]:root {
	--_elevation-color: hsla(0, 0%, 0%, 0.05);
	--elevation-1: 0px 0px 4px 1px var(--_elevation-color);
	--elevation-2: 0px 0px 6px 2px var(--_elevation-color);
	--elevation-3: 0px 0px 8px 3px var(--_elevation-color);
	--elevation-4: 0px 0px 10px 4px var(--_elevation-color);
	--elevation-5: 0px 0px 12px 5px var(--_elevation-color);
	--elevation-6: 0px 0px 14px 6px var(--_elevation-color);
	--elevation-7: 0px 0px 16px 7px var(--_elevation-color);
	--elevation-8: 0px 0px 18px 8px var(--_elevation-color);
	--elevation-9: 0px 0px 20px 9px var(--_elevation-color);
	--elevation-10: 0px 0px 22px 10px var(--_elevation-color);
}
[data-v-39745b50]:root {
	/* Start point */
	--_spacing-multiplicator: 8px;

	/* Spacings */
	--spacing-3xs: calc(var(--_spacing-multiplicator) / 4);
	--spacing-2xs: calc(var(--_spacing-multiplicator) / 2);
	--spacing-xs: calc(var(--_spacing-multiplicator) * 1);
	--spacing-sm: calc(var(--_spacing-multiplicator) * 2);
	--spacing-md: calc(var(--_spacing-multiplicator) * 3);
	--spacing-lg: calc(var(--_spacing-multiplicator) * 4);
	--spacing-xl: calc(var(--_spacing-multiplicator) * 5);
	--spacing-2xl: calc(var(--_spacing-multiplicator) * 6);
	--spacing-3xl: calc(var(--_spacing-multiplicator) * 7);
}
[data-v-39745b50]:root {
	--transition-fast: 0.3s;
	--transition-normal: 0.6s;
	--transition-slow: 0.9s;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Thin-B0oow3R9.woff2")
		format("woff2");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ThinItalic-Df5kGryu.woff2")
		format("woff2");
	font-weight: 100;
	font-style: italic;
	font-display: swap;
	font-display: swap;
	font-display: swap;
	font-display: swap;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraLight-BLVvTz6v.woff2")
		format("woff2");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraLightItalic-Cm43v-Vf.woff2")
		format("woff2");
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Light-De9MYPOT.woff2")
		format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-LightItalic-DV9n9KIB.woff2")
		format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Regular-Cu1XIIHs.woff2")
		format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Italic-DdaXnPiX.woff2")
		format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Medium-DJODbTHz.woff2")
		format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-MediumItalic-Dx3RkM4S.woff2")
		format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-SemiBold-DwmoiGAe.woff2")
		format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-SemiBoldItalic-DUAaODp3.woff2")
		format("woff2");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Bold-DYLVQlxQ.woff2")
		format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-BoldItalic-DSEOJb3S.woff2")
		format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraBold-CLYj8xrZ.woff2")
		format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraBoldItalic-DikM7EMV.woff2")
		format("woff2");
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Black-C-enK_Oz.woff2")
		format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-BlackItalic-D65VYM31.woff2")
		format("woff2");
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

/*
This font was added for use in wt-input-text in case we need to hide the input value,like in a password input,
but without type="password" on input. It was added because not all brawsers are support 'text-security: disc' property,
So this font changes text to discs in these cases
*/
@font-face {
	font-family: "text-security-disc";
	src: url("data:font/woff2;base64,d09GMgABAAAAAAMQAAoAAAAACAAAAALIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAggAKcHILBgABNgIkAwYEIAWJSAcvG0gHEZWcjBRfHNjNPraIGU7SkQoTFkXoFRjv8FUcbDmIj4fv117P3fcRQioFRseKQUaWwJVVVVWlqUSWQCqzAXDOVp+vqsnVapWIlhw7yBoEhhMnHFYCHMKOvkR03bf6e9V3k5C0pdB3/e9T0qkd4MMPltYAwwl4rBdKBw5Q6WQJiMe2JfXQzxqDHiJHyBCRoyWk9D0eokh2Ww9se/9MHLHYawD4n5f/Ls/b722ATVs377KRPE9jOdKY88cWRA5gIghJDQ1N8AfoA89ygvcYf4pg/Ec+TgiEgQwZEhIKKKCIIkoooYwyKqigiipqqKGOOhpooIkmWmihjTY66PxOyEABGSZiKqAAQnQ6B6/n1u98x4262u0Js8WuS9OPfJk+/cuR6bOAtTcIJOZcuOuj7bV/Kyl9h9f38fFYbrefcSYrI8lAQDMUDxExOyyGlfQ/vVsg0xGArgJ1t5MoVLEcA2Gq5ci0HECy2rnswoOiU55kl1xUjEQJdXtiFM3sEWm9lqWFmgZbjP05LRVBvbqdHux9wpyGnbGWEX6p5JEHp+lXirTnJ5QhZa5Rrsq9D67r+24QRrdzndcmBzUrQ9xXb6hp/3Kt1h1kLEFUI/CLVKdW/dqtdrVRNqpIyLr2KxU5WYVXmZuskh+VXqlluyjNMNPGBGcj6JOF0MC+M9Ucc48RhDxCB6QQzssN7C3m8bmbGCrG7VXU5FY+yGdUakVOvwKllMExtmsLwzMsVQFGpi5UbHxfXhb762Voh6fTcKeW03OxxicY73eTpa8bxhIzeWR+wnoJ6j/4kBejs2xf69j7pOSUzmzPCqNy4cojtlsLwpBhb++AtcBHQcpyGZgkYrGUBTwXn2/RF12BjlQTI1XSvANELqO18DPB+UIyNkJSZBsoX7wh7DlfsyVfTshpuSjLSv9H3fwD+a36nwAAkBFZ5aSOqp+7Bg==")
		format("woff2");
	font-weight: 100;
	font-style: normal;
}
.fade-enter-active[data-v-39745b50],
.fade-leave-active[data-v-39745b50] {
	transition: opacity var(--transition);
}
.fade-enter[data-v-39745b50],
.fade-leave-to[data-v-39745b50] {
	opacity: 0;
}
/*
  Classes for direct use in placeholder-like elements styling
   (e.g. vue-multiselect .multiselect__placeholder which is technically a span)
*/
.wt-placeholder[data-v-39745b50] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-color);
}
.wt-placeholder--disabled[data-v-39745b50] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-disabled-color);
}
.wt-placeholder--error[data-v-39745b50] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-error-color);
}
.d-none[data-v-39745b50] {
	display: none;
}
@media only screen and (max-width: 960px) {
.d-none-sm[data-v-39745b50] {
		display: none;
}
.d-block-sm[data-v-39745b50] {
		display: block;
}
}
@media only screen and (max-width: 600px) {
.d-none-xs[data-v-39745b50] {
		display: none;
}
.d-block-xs[data-v-39745b50] {
		display: block;
}
}
/* Component Variables - Centralized to avoid duplication */
/* This file imports all component-specific CSS variables once globally */
[data-v-39745b50]:root {
	--wt-app-header-min-height: 40px;
	--wt-app-header-padding: var(--spacing-xs) var(--spacing-sm);
	--wt-app-header-background: var(--dp-9-surface-color);

	--wt-app-header-content-gap: var(--spacing-sm);
	--wt-app-header-content-panel-margin: var(--spacing-2xs);
	--wt-app-header-content-bg-color: var(--content-wrapper-color);
	--wt-app-header-content-z-index: 11;

	--wt-app-navigator-max-height: 80vh;
	--wt-app-navigator-padding: var(--wt-app-header-content-gap);
	--wt-app-navigator-item-width: 128px;
	--wt-app-navigator-item-height: 135px;
	--wt-app-navigator-item-padding: var(--spacing-xs);
	--wt-app-navigator-item-gap: var(--wt-app-header-content-gap);
	--wt-app-navigator-item-border: 1px solid;
	--wt-app-navigator-item-border-color: var(--secondary-color);
	--wt-app-navigator-item-pic-size: 88px;
	--wt-app-navigator-item-border-color--hover: var(--primary-color);

	--wt-header-actions-min-width: 120px;
	--wt-header-actions-content-sections-gap: var(--spacing-lg);
	--wt-header-actions-padding: var(--wt-app-header-content-gap);
	--wt-header-actions-action-bg-color--hover: var(--secondary-color);
	--wt-header-actions-action-link-padding: var(--spacing-xs);
}
[data-v-39745b50]:root {
	--wt-avatar-size--size-xs: calc(var(--_spacing-multiplicator) * 3);
	--wt-avatar-size--size-sm: calc(var(--_spacing-multiplicator) * 4);
	--wt-avatar-size--size-md: calc(var(--_spacing-multiplicator) * 5);
	--wt-avatar-size--size-lg: calc(var(--_spacing-multiplicator) * 7);
	--wt-avatar-size--size-xl: calc(var(--_spacing-multiplicator) * 9);
	--wt-avatar-size--size-2xl: calc(var(--_spacing-multiplicator) * 12);
	--wt-avatar-size--size-3xl: calc(var(--_spacing-multiplicator) * 16);

	--wt-avatar-size: var(--wt-avatar-size--size-md);

	--online-color: var(--success-color);
	--dnd-color: var(--warning-color);
	--busy-color: var(--error-color);
	--offline-color: var(--disabled-color);
	--pause-color: var(--warning-color);

	--wt-avatar-text-color: var(--white);

	--wt-avatar-letters-p1-color: var(--red-lighten-2);
	--wt-avatar-letters-p2-color: var(--purple-lighten-2);
	--wt-avatar-letters-p3-color: var(--deep-purple-lighten-2);
	--wt-avatar-letters-p4-color: var(--indigo-lighten-2);
	--wt-avatar-letters-p5-color: var(--blue-lighten-1);
	--wt-avatar-letters-p6-color: var(--cyan-lighten-1);
	--wt-avatar-letters-p7-color: var(--teal-darken-3);
	--wt-avatar-letters-p8-color: var(--green-darken-2);
	--wt-avatar-letters-p9-color: var(--lime-darken-3);
	--wt-avatar-letters-p10-color: var(--yellow-darken-3);
	--wt-avatar-letters-p11-color: var(--amber-lighten-2);
	--wt-avatar-letters-p12-color: var(--orange-darken-1);
	--wt-avatar-letters-p13-color: var(--deep-purple-lighten-1);
}
:root.theme--dark[data-v-39745b50] {
	--wt-avatar-text-color: var(--black);
}
[data-v-39745b50]:root {
	--wt-badge-size: var(--spacing-xs);
}
[data-v-39745b50]:root {
	--breadcrumb-indicator-size: 4px;
	--breadcrumb-gap: var(--spacing-sm);
	--breadcrumb-dot-gap: var(--spacing-2xs);
	--breadcrumb-indicator-color: var(--icon-color);
	--breadcrumb-accent-indicator-color: var(--primary-color);
}
[data-v-39745b50]:root {
	--button-select-button-padding: var(--spacing-xs) var(--spacing-sm);

	--button-select-icon-button-padding: var(--spacing-xs);

	--button-select-buttons-gap: 1px;
}
[data-v-39745b50]:root {
	--btn-min-width: 90px;
	--btn-min-width--size-sm: 70px;
	--btn-padding: var(--spacing-xs) var(--spacing-sm);
	--btn-padding--size-sm: var(--spacing-2xs) var(--spacing-xs);
	/* COLORS */
	--btn-primary-color: var(--primary-color);
	--btn-primary-hover-color: var(--primary-hover-color);
	--btn-primary-text-color: var(--primary-on-color);

	--btn-secondary-color: var(--dp-10-surface-color);
	--btn-secondary-hover-color: var(--dp-14-surface-color);
	--btn-secondary-text-color: var(--grey-darken-4);

	--btn-success-color: var(--success-color);
	--btn-success-hover-color: var(--success-hover-color);
	--btn-success-text-color: var(--grey-lighten-5);

	--btn-info-color: var(--info-color);
	--btn-info-hover-color: var(--info-hover-color);
	--btn-info-text-color: var(--grey-lighten-5);

	--btn-job-color: var(--job-color);
	--btn-job-hover-color: var(--job-hover-color);
	--btn-job-text-color: var(--grey-lighten-5);

	--btn-error-color: var(--error-color);
	--btn-error-hover-color: var(--error-hover-color);
	--btn-error-text-color: var(--grey-lighten-5);

	--btn-transfer-color: var(--transfer-color);
	--btn-transfer-hover-color: var(--transfer-hover-color);
	--btn-transfer-text-color: var(--transfer-on-color);

	--btn-disabled-color: var(--dp-16-surface-color);
	--btn-disabled-text-color: var(--grey-darken-1);
}
:root.theme--dark[data-v-39745b50] {
	--btn-secondary-text-color: var(--grey-lighten-4);
}
[data-v-39745b50]:root {
	--wt-card-border-radius: var(--p-content-border-radius);
	--wt-card-padding: var(--spacing-sm);
}
[data-v-39745b50]:root {
	--checkbox-icon-margin: var(--spacing-xs);
}
[data-v-39745b50]:root {
	--chip-padding: var(--spacing-2xs) var(--spacing-sm);
	--chip-border-radius: var(--spacing-lg);

	--wt-chip-main-background-color: var(--primary-light-color);
	--wt-chip-main-text-color: var(--primary-on-color);

	--wt-chip-primary-background-color: var(--primary-color);
	--wt-chip-primary-text-color: var(--primary-on-color);

	--wt-chip-secondary-background-color: var(--secondary-color);
	--wt-chip-secondary-text-color: var(--secondary-on-color);

	--wt-chip-success-background-color: var(--success-color);
	--wt-chip-success-text-color: var(--success-on-color);

	--wt-chip-warning-background-color: var(--warning-color);
	--wt-chip-warning-text-color: var(--warning-on-color);

	--wt-chip-error-background-color: var(--error-color);
	--wt-chip-error-text-color: var(--error-on-color);

	--wt-chip-transfer-background-color: var(--transfer-color);
	--wt-chip-transfer-text-color: var(--transfer-on-color);
}
[data-v-39745b50]:root {
	--wt-context-menu-option-padding: var(--spacing-xs);

	--wt-context-menu-background-color: var(--context-menu-background-color);
	--wt-context-menu-option-text-color: var(--context-menu-option-text-color);
	--wt-context-menu-option-background-hover-color: var(
		--context-menu-option-hover-color
	);
	--wt-context-menu-option-background-disabled-color: var(
		--context-menu-option-disabled-color
	);
	--wt-context-menu-option-text-disabled-color: var(
		--context-menu-option-text-disabled-color
	);
}
:root {
&[data-v-39745b50]{
	/*General*/
	--dp-font-family: "Montserrat";
	--dp-border-radius: var(--border-radius);
	/*Configurable border-radius*/
	--dp-cell-border-radius: var(--border-radius);
	/*Specific border radius for the calendar cell*/

	/*Sizing*/
	--dp-button-heigh: 32px;
	/*Size for buttons in overlays*/
	--dp-month-year-row-height: 24px;
	/*Height of the month-year select row*/
	--dp-month-year-row-button-size: 24px;
	/*Specific height for the next/previous buttons*/
	--dp-button-icon-height: var(--icon-md-size);
	/*Icon sizing in buttons*/
	--dp-cell-size: 24px;
	/*Width and height of calendar cell*/
	--dp-cell-padding: var(--spacing-2xs);
	/*Padding in the cell*/
	--dp-common-padding: var(--spacing-xs);
	/*Common padding used*/
	--dp-input-icon-padding: calc(var(--icon-md-size) + 2 * var(--spacing-xs));
	/*Padding on the left side of the input if icon is present*/
	--dp-input-padding: calc(var(--spacing-xs) - 1px)
		calc(var(--icon-md-size) + 2 * var(--spacing-xs));
	/*Padding in the input*/
	/* --dp-menu-min-width: 260px; Adjust the min width of the menu */
	--dp-action-buttons-padding: 2px 5px;
	/*Adjust padding for the action buttons in action row*/
	--dp-row-maring: var(--spacing-3xs);
	/*Adjust the spacing between rows in the calendar*/
	--dp-calendar-header-cell-padding: 0.5rem;
	/*Adjust padding in calendar header cells*/
	--dp-two-calendars-spacing: 10px;
	/*Space between multiple calendars*/
	--dp-overlay-col-padding: 3px;
	/*Padding in the overlay column*/
	--dp-time-inc-dec-button-size: 24px;
	/*Sizing for arrow buttons in the time picker*/

	/*Font sizes*/
	--dp-font-size: 12px;
	/*Default font-size*/
	--dp-preview-font-size: 12px;
	/*Font size of the date preview in the action row*/
	--dp-time-font-size: 12px;
	/*Font size in the time picker*/

	/*Transitions*/
	--dp-animation-duration: var(--transition);
	/*Transition duration*/
	--dp-menu-appear-transition-timing: cubic-bezier(0.4, 0, 1, 1);
	/*Timing on menu appear animation*/
	--dp-transition-timing: ease-out;
	/*Timing on slide animations*/
	}
.dp__theme_light[data-v-39745b50] {
		--dp-background-color: var(--content-wrapper-color);
		--dp-text-color: var(--text-main-color);
		/* --dp-hover-color: var(--secondary-color-50); */
		/* --dp-hover-text-color: var(--contrast-color); */
		--dp-hover-icon-color: var(--icon-btn-hover-color);
		--dp-primary-color: var(--primary-color);
		--dp-primary-text-color: var(--primary-on-color);
		--dp-secondary-color: var(--secondary-color);
		--dp-border-color: var(--wt-text-field-input-border-color);
		--dp-menu-border-color: transparent;
		/* --dp-border-color-hover: var(--form-border--hover-color); */
		--dp-disabled-color: var(--wt-text-field-input-background-disabled-color);
		--dp-success-color: var(--success-color);
		--dp-icon-color: var(--icon-color);
		--dp-danger-color: var(--error-color);
		/* --dp-scroll-bar-background: #f3f3f3; */
		/* --dp-scroll-bar-color: #959595; */
		/* --dp-success-color-disabled: #a3d9b1; */
		/* --dp-highlight-color: rgba(25, 118, 210, 0.1); */
}
}
[data-v-39745b50]:root {
	--divider-border: 1px solid;
	--divider-border-color: var(--grey-lighten-4);
}
:root.theme--dark[data-v-39745b50] {
	--divider-border-color: var(--grey-darken-2);
}
[data-v-39745b50]:root {
	--wt-dual-panel-padding: var(--spacing-sm);
	--wt-dual-panel-section-padding: var(--spacing-sm);
	--wt-dual-panel-section-gap: var(--spacing-sm);

	--wt-dual-panel-background-color: var(--grey-lighten-5);
	--wt-dual-panel-content-wrapper-color: var(--content-wrapper-color);
}
:root.theme--dark[data-v-39745b50] {
	--wt-dual-panel-background-color: var(--grey-darken-4);
}
[data-v-39745b50]:root {
	--wt-dummy-text-color: var(--text-main-color);
}
[data-v-39745b50]:root {
	--wt-empty-min-width: 280px;
	--wt-empty-width: 600px;
	--wt-empty-max-width: 80vw;
}
[data-v-39745b50]:root {
	--wt-error-page-background-color: var(--content-wrapper-color);
	--wt-error-page-text-color: var(--text-main-color);
}
[data-v-39745b50]:root {
	--wt-expansion-panel-header-background-color: var(--dp-16-surface-color);
	--wt-expansion-panel-header-title-color: var(--text-main-color);
	--wt-expansion-panel-content-background-color: var(--content-wrapper-color);
	--wt-expansion-panel-content-text-color: var(--text-main-color);
}
[data-v-39745b50]:root {
	--headline-min-height: 40px; /* button/search-bar height */
	--headline-title-margin: var(--spacing-sm);
	--wt-headline-background-color: var(--content-wrapper-color);
}
[data-v-39745b50]:root {
	--icon-btn-hover-color: var(--grey-darken-5);
}
:root.theme--dark[data-v-39745b50] {
	--icon-btn-hover-color: var(--grey-lighten-5);
}
[data-v-39745b50]:root {
	--icon-8xl-size: 96px;
	--icon-7xl-size: 88px;
	--icon-6xl-size: 80px;
	--icon-5xl-size: 72px;
	--icon-4xl-size: 64px;
	--icon-3xl-size: 56px;
	--icon-2xl-size: 48px;
	--icon-xl-size: 40px;
	--icon-lg-size: 32px;
	--icon-md-size: 24px;
	--icon-sm-size: 16px;
	--icon-xs-size: 8px;

	--icon-color: var(--grey-darken-2);
	--icon-active-color: var(--grey-darken-4);
	--icon-primary-color: var(--p-primary-color);
	--icon-error-color: var(--p-error-color);
	--icon-success-color: var(--p-success-color);
	--icon-warning-color: var(--p-warn-color);
	--icon-on-dark-color: var(--white);
	--icon-on-light-color: var(--grey-darken-3);
	--icon-on-primary-color: var(--primary-on-color);
	--icon-info-color: var(--p-info-color);
	--icon-chat-color: var(--p-chat-color);
	--icon-transfer-color: var(--p-transfer-color);
	--icon-job-color: var(--p-task-color);
	--icon-disabled-color: var(--grey-lighten-4);
}
:root.theme--dark[data-v-39745b50] {
	--icon-color: var(--grey-lighten-2);
	--icon-active-color: var(--grey-lighten-4);
	--icon-disabled-color: var(--grey-darken-2);
}
[data-v-39745b50]:root {
	--wt-indicator-dot-size--size-sm: var(--spacing-xs);
	--wt-indicator-dot-size--size-md: var(--spacing-sm);
	--wt-indicator-dot-size: var(--wt-indicator-size--size-md);
	--wt-indicator-dot-offset: var(--spacing-2xs);

	--wt-indicator-text-margin: var(--spacing-2xs);

	--wt-indicator-text-color: var(--text-main-color);
	--wt-indicator-primary-color: var(--primary-color);
	--wt-indicator-secondary-color: var(--grey-lighten-3);
	--wt-indicator-disabled-color: var(--grey-lighten-4);
	--wt-indicator-success-color: var(--success-color);
	--wt-indicator-error-color: var(--error-color);
	--wt-indicator-transfer-color: var(--transfer-color);
	--wt-indicator-break-out-color: var(--warning-color);
	--wt-indicator-info-color: var(--info-color);
	--wt-indicator-final-status-color: var(--green-accent-4);
	--wt-indicator-initial-status-color: var(--red-accent-2);
	--wt-indicator-other-status-color: var(--orange-accent-2);
}
:root.theme--dark[data-v-39745b50] {
	--wt-indicator-secondary-color: var(--grey-darken-1);
	--wt-indicator-disabled-color: var(--grey-darken-2);
}
[data-v-39745b50]:root {
	--input-padding: calc(var(--spacing-xs) - 1px); /* - border */
	--input-border: 1px solid;
	--input-icon-margin: var(--spacing-xs);

	--input-after-wrapper-gap: var(--spacing-2xs);
}
[data-v-39745b50]:root {
	--wt-item-link-text-color: var(--text-main-color);
}
[data-v-39745b50]:root {
	--wt-label-padding: var(--spacing-2xs) var(--spacing-xs);

	--wt-label-color: var(--p-form-field-color);
	--wt-label-error-color: var(--p-error-color);
	--wt-label-disabled-color: var(--p-form-field-disabled-color);
}
[data-v-39745b50]:root {
	--load-bar-height: 6px;
	--load-bar-padding: 1px;
	--load-bar-border-radius: 50px;

	--wt-load-bar-primary-color: var(--primary-on-color);
	--wt-load-bar-error-color: var(--p-error-color);
	--wt-load-bar-warning-color: var(--p-warn-color);
	--wt-load-bar-success-color: var(--p-success-color);
	--wt-load-bar-info-color: var(--p-info-color);
}
[data-v-39745b50]:root {
	--loader-size: 44px;
	--loader-dot-size: 6px;
	--loader-animation-duration: 3s;

	--wt-loader-md-path-color: var(--grey-darken-2);
	--wt-loader-md-point-color: var(--primary-color);

	--wt-loader-sm-path-main-color: var(--grey-darken-2);
	--wt-loader-sm-path-icon-color: var(--icon-color);
	--wt-loader-sm-path-on-light-color: var(--icon-on-light-color);
	--wt-loader-sm-path-on-dark-color: var(--icon-on-dark-color);
}
:root.theme--dark[data-v-39745b50] {
	--wt-loader-md-path-color: var(--grey-lighten-2);

	--wt-loader-sm-path-main-color: var(--grey-lighten-2);
}
[data-v-39745b50]:root {
	--wt-logo-width: 84px;
	--wt-logo-height: 16px;
}
[data-v-39745b50]:root {
	--wt-navigation-bar-width: 340px;
	--wt-navigation-bar-z-index: 10;
	--wt-navigation-bar-padding: var(--spacing-sm);

	--wt-navigation-bar-header-padding: var(--spacing-xs);
	--wt-navigation-bar-app-pic-height: 24px;

	--wt-navigation-bar-list-padding: var(--wt-navigation-bar-padding);
	--wt-navigation-bar-link-padding: var(--wt-navigation-bar-padding);
	--wt-navigation-bar-subnav-padding-left: var(--spacing-lg);
	--wt-navigation-bar-active-expansion-flag-width: 5px;
	--wt-navigation-bar-active-expansion-name-max-width: calc(
		100% -
		var(--icon-md-size) -
		var(--spacing-xs)
	);

	--wt-navigation-bar-background-color: var(--dp-18-surface-color);
	--wt-navigation-bar-option-text-color: var(--text-main-color);
	--wt-navigation-bar-option-text-active-color: var(--primary-on-color);
	--wt-navigation-bar-option-background-color: var(
		--wt-navigation-bar-background-color
	);
	--wt-navigation-bar-option-background-hover-color: var(--dp-20-surface-color);
	--wt-navigation-bar-option-background-active-color: var(
		--primary-light-color
	);
	--wt-navigation-bar-expansion-ribbon-color: var(--primary-color);
}
[data-v-39745b50]:root {
	--notifications-bar-max-height: 60%;
	--notifications-bar-corner-margin: var(--spacing-sm);
	--notifications-bar-notifications-margin: 0 0 var(--spacing-xs) auto;
	--notifications-bar-z-index: 101;
}
[data-v-39745b50]:root {
	--page-wrapper-padding: var(--spacing-sm);
	--page-wrapper-section-padding: var(--spacing-sm);
	--page-wrapper-section-gap: var(--spacing-sm);

	--wt-page-wrapper-background-color: var(--p-surface-50);
	--wt-page-wrapper-content-wrapper-color: var(--content-wrapper-color);
	/* --content-wrapper-border-radius: var(--p-border-radius-lg); */
}
:root.theme--dark[data-v-39745b50] {
	--wt-page-wrapper-background-color: var(--p-surface-850);
}
[data-v-39745b50]:root {
	--pagination-gap: var(--spacing-xs);
	--pagination-size-input-width: 100px;
}
.wt-player[data-v-39745b50] {
	--plyr-color-main: var(--primary-color);
	--plyr-audio-control-color: var(--icon-color);
	--plyr-audio-control-color-hover: var(--icon-btn-hover-color);
	--plyr-audio-controls-background: var(--content-wrapper-color);
	--plyr-controls-icon-size: var(--icon-sm-size);
	--plyr-controls-icon-padding: var(--spacing-2xs);
	--plyr-audio-control-background-hover: transparent;
	--plyr-audio-progress-buffered-background: var(
		--dp-14-surface-color
	); /* loaded color */
	--wt-player-audio-progress-background: var(
		--wt-slider-background-color
	); /* not played color */
	--plyr-tooltip-background: var(--wt-tooltip-background-color);
	--plyr-tooltip-color: var(--wt-tooltip-text-color);
	/* --plyr-control-toggle-checked-background: var(--main-color); */
	--player-close-icon-transform-translate-x: var(--spacing-md);
	/* "-1 * var" for use the negative value of a variable */
	--player-close-icon-transform-translate-y: calc(-1 * var(--spacing-md));

	--wt-slider-border: 1px solid var(--secondary-color);
	--wt-slider-pointer-radius: 50%;
	--wt-slider-pointer-background-color: var(--dp-24-surface-color);
	--wt-slider-pointer-border-color: var(--dp-10-surface-color);
	--wt-slider-pointer-size: 16px;
}
[data-v-39745b50]:root {
	--popup-wrapper-z-index: 12;

	--popup-shadow-opacity: 0.8;
	--wt-popup-shadow-color: hsla(0, 0%, 0%, var(--popup-shadow-opacity));

	--wt-popup-size-xs: 300px;
	--wt-popup-size-sm: 500px;
	--wt-popup-size-md: 800px;
	--wt-popup-size-lg: 1140px;

	--popup-max-height: 90%;

	--wt-popup-background-color: var(--dp-24-surface-color);
	--popup-sections-gap: var(--spacing-xs);
	--popup-padding: var(--spacing-sm);

	--popup-header-padding: var(--spacing-xs);
	--wt-popup-header-background-color: var(--dp-18-surface-color);
	--wt-popup-header-text-color: var(--text-main-color);

	--popup-main-section-padding-right: var(--spacing-xs); /* scroll offset */

	--popup-actions-padding: var(--spacing-xs);
}
[data-v-39745b50]:root {
	--wt-progress-bar-height: 12px;
	--wt-progress-bar-padding: var(--spacing-3xs);
	--wt-progress-bar-border-radius: var(--wt-progress-bar-padding);

	--wt-progress-bar-background-color: var(--dp-1-surface-color);
	--wt-progress-bar-background-primary-color: var(--primary-color);
	--wt-progress-bar-background-secondary-color: var(--dp-20-surface-color);
	--wt-progress-bar-background-success-color: var(--success-color);
	--wt-progress-bar-background-error-color: var(--error-color);
	--wt-progress-bar-background-warning-color: var(--warning-color);
}
[data-v-39745b50]:root {
	--radio-icon-margin: var(--spacing-xs);
	--radio-checkmark-size: 18px;
	--radio-bullet-size: 8px;
	--radio-border: 2px solid;
}
[data-v-39745b50]:root {
	--rounded-action-border-size: 2px;
	--rounded-action-padding: calc(
		var(--spacing-xs) -
		var(--rounded-action-border-size)
	);

	--rounded-action-rounded-border-radius: var(--border-radius--pill);

	--rounded-action-bg-color: var(--dp-18-surface-color);
	--rounded-action-bg-hover-color: var(--dp-20-surface-color);

	--rounded-action-active-color: var(--dp-10-surface-color);
}
[data-v-39745b50]:root {
	--wt-search-bar-width: 270px;
}
[data-v-39745b50]:root {
	--wt-slider-pointer-size: 16px;
	--wt-slider-height: var(--wt-slider-pointer-size);

	--wt-slider-width: 100%;
	--wt-slider-input-height: 8px;
	--wt-slider-border: 1px solid var(--secondary-color);
	--wt-slider-background-color: var(--dp-1-surface-color);
	--wt-slider-background-completed-color: var(--primary-color);

	--wt-slider-pointer-background-color: var(--dp-24-surface-color);
	--wt-slider-pointer-background-hover-color: var(--dp-22-surface-color);
	--wt-slider-pointer-border-color: var(--dp-10-surface-color);

	--wt-slider-pointer-radius: 50%;

	--wt-slider-vertical-container-translation: translate(2px);
	--wt-slider-vertical-transform: translate(-100%, 0) rotate(-90deg);
	--wt-slider-vertical-transform-origin: 100% 0;
}
[data-v-39745b50]:root {
	--wt-status-select-padding: 0 calc(var(--icon-size-md) + var(--spacing-xs)) 0
		0; /* reset wt-select padding, but preserve arrow icon padding */

	--wt-status-select-option-text-color: var(--text-main-color);
	--wt-status-select-option-background-color: var(--dp-22-surface-color);
	--wt-status-select-option-background-hover-color: var(
		--secondary-light-color
	);
	/* --wt-status-select-option-background-selected-color: var(--primary-light-color); */

	--wt-status-select-background-color: var(
		--wt-status-select-option-background-color
	);
}
[data-v-39745b50]:root {
	--wt-stepper-divider-background-color: var(--secondary-color);
	--wt-stepper-divider-background-completed-color: var(--primary-color);
}
[data-v-39745b50]:root {
	--switcher-icon-margin: var(--spacing-xs);
	--switcher-width: 40px;
	--switcher-height: 22px;
	--switcher-cicle-size: 14px;
	--switcher-cicle-margin: 4px;
	--switcher-cicle-translateX: 17px;
	--switcher-border-radius: 24px;
	/* circle */
	--wt-switcher-circle-background-color-on: var(--grey-darken-3);
	--wt-switcher-circle-background-color-on-hover: var(--grey-darken-4);
	--wt-switcher-circle-background-color-on-disabled: var(--grey-lighten-3);

	--wt-switcher-circle-background-color-off: var(--grey-lighten-4);
	--wt-switcher-circle-background-color-off-hover: var(--grey-lighten-5);
	--wt-switcher-circle-background-color-off-disabled: var(--grey-lighten-3);
	/* background */
	--wt-switcher-background-color-on: var(--primary-color);
	--wt-switcher-background-color-on-hover: var(--primary-hover-color);
	--wt-switcher-background-color-on-disabled: var(--primary-light-color);

	--wt-switcher-background-color-off: var(--grey-darken-2);
	--wt-switcher-background-color-off-hover: var(--grey-darken-1);
	--wt-switcher-background-color-off-disabled: var(--grey-lighten-4);
}
:root.theme--dark[data-v-39745b50] {
	/* circle */
	--wt-switcher-circle-background-color-off: var(--grey-darken-4);
	--wt-switcher-circle-background-color-off-hover: var(--grey-darken-3);
	--wt-switcher-circle-background-color-off-disabled: var(--grey-darken-3);
	/* background */
	--wt-switcher-background-color-off: var(--grey-lighten-1);
	--wt-switcher-background-color-off-hover: var(--grey-lighten-2);
	--wt-switcher-background-color-off-disabled: var(--grey-darken-2);
}
[data-v-39745b50]:root {
	--table-actions-padding: var(--spacing-xs);
	--table-actions-icon-gap: var(--spacing-xs);
}
[data-v-39745b50]:root {
	--table-col-min-width: 140px;

	--table-head-sort-arrow-margin: var(--spacing-xs);
	--table-head-border: 1px solid;

	--table-min-height: 24px; /* 24px icon size or body-1 lh */
	--table-column-gap: var(--spacing-xs);
	--table-row-padding: var(--spacing-xs);

	--wt-table-head-border-color: var(--grey-lighten-1);
	--wt-table-head-background-color: var(--content-wrapper-color);
	--wt-table-primary-color: var(--content-wrapper-color);
	--wt-table-zebra-color: var(--dp-18-surface-color);
}
:root.theme--dark[data-v-39745b50] {
	--wt-table-head-border-color: var(--grey-darken-1);
}
[data-v-39745b50]:root {
	--tabs-underiline-height: 1px;
	--tabs-underiline-color: transparent;

	--tab-padding: var(--spacing-2xs);
	--tab-gap: var(--spacing-xs);
	--wt-tabs-text-color: var(--text-main-color);
	--wt-tabs-text-hover-color: var(--wt-tabs-text-color);
	--wt-tabs-text-active-color: var(--wt-tabs-text-color);
	--tab-border: 4px solid;
	--wt-tabs-underline-active-color: var(--primary-color);
	--tab-z-index: 1;
}
[data-v-39745b50]:root {
	--textarea-min-height: 100px;
	--textarea-padding: var(--input-padding);
}
[data-v-39745b50]:root {
	--timepicker-input-width: 80px;
	--timepicker-input-margin: var(--spacing-xs);
}
[data-v-39745b50]:root {
	--tooltip-padding: var(--spacing-2xs) var(--spacing-xs);

	--wt-tooltip-text-color: var(--text-main-color);
	--wt-tooltip-background-color: var(--dp-24-surface-color);

	--tooltip-elevation: var(--elevation-10);
}
[data-v-39745b50]:root {
	--wt-tree-item-active: var(--primary-light-color);
	--wt-tree-item-active-on: var(--grey-darken-4);

	--wt-tree-item-searched: var(--light-blue-lighten-4);
	--wt-tree-item-searched-on: var(--grey-darken-4);

	--wt-tree-item: var(--primary-light-color);
	--wt-tree-item-on: var(--grey-darken-1);

	--wt-tree-item-hover: var(--dp-24-surface-color);
	--wt-tree-item-hover-on: var(--grey-darken-1);
}
:root.theme--dark[data-v-39745b50] {
	--wt-tree-item-active: var(--primary-light-color);
	--wt-tree-item-active-on: var(--grey-lighten-4);

	--wt-tree-item-searched: var(--light-blue-lighten-2);
	--wt-tree-item-searched-on: var(--grey-darken-4);

	--wt-tree-item: var(--primary-light-color);
	--wt-tree-item-on: var(--grey-lighten-3);

	--wt-tree-item-hover-on: var(--grey-lighten-3);
}
[data-v-39745b50]:root {
	--wt-tree-table-col-min-witdh: var(--table-col-min-width);

	--wt-tree-table-head-sort-arrow-margin: var(--table-head-sort-arrow-margin);
	--wt-tree-table-head-border: var(--table-head-border);

	--wt-tree-table-min-height: var(--table-min-height);
	--wt-tree-table-column-gap: var(--table-column-gap);
	--wt-tree-table-row-padding: var(--table-row-padding);

	--wt-tree-table-head-border-color: var(--wt-table-head-border-color);
	--wt-tree-table-head-background-color: var(--wt-table-head-background-color);
	--wt-tree-table-primary-color: var(--wt-table-primary-color);
	--wt-tree-table-zebra-color: var(--wt-table-zebra-color);
}
:root.theme--dark[data-v-39745b50] {
	--wt-tree-table-head-border-color: var(--wt-table-head-border-color);
}
[data-v-39745b50]:root {
	--content-wrapper-padding: var(--spacing-xs);
	--content-wrapper-gap: var(--spacing-xs);
}
.table-page.wt-page-wrapper[data-v-39745b50] {
	width: 100%;
	height: 100%;
}
.table-page .wt-page-wrapper__main[data-v-39745b50],

.wt-page-wrapper__main[data-v-39745b50]:has(.table-section) {
	min-height: 0;
}
.table-section[data-v-39745b50] {
	display: flex;
	flex-direction: column;
	width: 100%;
	flex: 1;
	min-height: 0;
}
.table-section__table-wrapper[data-v-39745b50] {
	display: flex;
	flex: 1 1 100%;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	min-height: 0;
	gap: var(--spacing-sm);
}
.table-section__table-wrapper .table-wrapper__visible-scroll-wrapper[data-v-39745b50] {
	flex-grow: 1;
}
.table-section__table-wrapper .wt-pagination[data-v-39745b50] {
	margin-top: auto;
}
.table-section__visible-scroll-wrapper[data-v-39745b50] {
	overflow: visible;
	height: 100%;
}
.table-section__visible-scroll-wrapper .wt-table[data-v-39745b50] {
	overflow: visible;
}
.table-title[data-v-39745b50] {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: var(--spacing-sm) 0;
}
.table-title__title[data-v-39745b50] {
	font-family: "Montserrat", monospace;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-transform: none;
}
.table-title__title + .hint[data-v-39745b50] {
	top: -2px;
}
.table-title__actions-wrap[data-v-39745b50] {
	display: flex;
	align-items: center;
	gap: var(--table-actions-icon-gap);
}
.main-section-wrapper .wt-loader.wt-brand-loader[data-v-39745b50] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 1;
}
.table-wrapper--tab-table[data-v-39745b50] {
	position: relative;
}
.table-wrapper--tab-table .wt-loader.wt-brand-loader[data-v-39745b50] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 1;
}
.table-wrapper--tab-table .table-loading-wrapper[data-v-39745b50] {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	min-height: 0;
}
.opened-card[data-v-39745b50] {
	width: 100%;
}
.opened-card.wt-page-wrapper[data-v-39745b50],
.opened-card.wt-dual-panel[data-v-39745b50] {
	width: 100%;
}
.opened-card-tabs[data-v-39745b50] {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: var(--spacing-sm);
}
.opened-card-tabs__tab[data-v-39745b50] {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: var(--spacing-sm);
	min-height: 0;
}
.opened-card-header[data-v-39745b50] {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin: var(--spacing-sm) 0;
}
.opened-card-header__title[data-v-39745b50] {
	font-family: "Montserrat", monospace;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-transform: none;
}
.opened-card-header__title + .hint[data-v-39745b50] {
	top: -2px;
}
.opened-card-form[data-v-39745b50] {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.opened-card-input-grid[data-v-39745b50] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: minmax(auto, auto);
	align-items: flex-start;
	grid-column-gap: var(--spacing-sm);
	grid-row-gap: var(--spacing-sm);
}
.opened-card-input-grid--1-col[data-v-39745b50] {
	grid-template-columns: 1fr;
}
.opened-card-input-grid--w50[data-v-39745b50] {
	width: 50%;
}
.opened-card-input-grid--w100[data-v-39745b50] {
	width: 100%;
}
/*
	@author HlukhovYe
	layer needed beacuse of manipulating primevue's default typography
	https://webitel.atlassian.net/browse/WTEL-8775?focusedCommentId=723773
*/
@layer wt-default {
[data-v-39745b50]:root {
    --transition: 0.2s;
    --box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    /* viewport breakpoints */
    --viewport-lg: 1904px;
    --viewport-md: 1264px;
    --viewport-sm: 960px;
    --viewport-xs: 600px;
}
html[data-v-39745b50] {
    height: 100%;
    font-size: 16px;
}
body[data-v-39745b50] {
    font-family: "Montserrat", monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-transform: none;
    margin: 0;
    height: 100%;
    min-height: 100%;
}
[data-v-39745b50] {
    box-sizing: border-box;
}
.theme--dark body[data-v-39745b50] {
    color-scheme: dark;
}
h1[data-v-39745b50],
  h2[data-v-39745b50],
  h3[data-v-39745b50],
  h4[data-v-39745b50],
  h5[data-v-39745b50],
  h6[data-v-39745b50],
  p[data-v-39745b50] {
    margin: 0;
    font-weight: normal;
}
  /* reset ul styles */
ul[data-v-39745b50] {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
iframe[data-v-39745b50] {
    outline: none;
    border: none;
}
a[data-v-39745b50] {
    color: #000;
    text-decoration: none;
}
.hidden[data-v-39745b50] {
    opacity: 0;
    pointer-events: none;
}
}
/*
	@author HlukhovYe
	reset input autofill styles https://webitel.atlassian.net/browse/WTEL-9005
*/
input[data-v-39745b50]:-webkit-autofill,
input[data-v-39745b50]:-webkit-autofill:hover,
input[data-v-39745b50]:-webkit-autofill:focus,
textarea[data-v-39745b50]:-webkit-autofill,
textarea[data-v-39745b50]:-webkit-autofill:hover,
textarea[data-v-39745b50]:-webkit-autofill:focus,
select[data-v-39745b50]:-webkit-autofill,
select[data-v-39745b50]:-webkit-autofill:hover,
select[data-v-39745b50]:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--p-inputtext-color);
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s; /* prevents an immediate color change */
}

/* https://github.com/Akryum/floating-vue/issues/488 */
.v-popper__arrow-container[data-v-39745b50] {
  display: none;
}
.the-pages-navbar[data-v-39745b50] {
  position: absolute;
  top: var(--flow-toolbar-height);
  left: 0;
  right: 0;
  display: flex;
  padding: var(--spacing-xs);
  background: var(--content-wrapper-color);
  gap: var(--spacing-xs);
  align-items: flex-start;
}
.the-pages-navbar__add-page[data-v-39745b50] {
  padding: var(--spacing-xs);
  background: var(--secondary-color);
  border-radius: var(--border-radius);
}
.the-pages-navbar__pages-wrapper[data-v-39745b50] {
  padding-bottom: var(--spacing-2xs);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs);
  max-width: 100%;
  overflow-x: auto;
}
.the-pages-navbar__page-item[data-v-39745b50] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}.registries-tag[data-v-d090b660] {
  padding: var(--spacing-xs);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--border-radius);
  gap: var(--spacing-2xs);
}
.registries-tag.highlighted[data-v-d090b660] {
  background-color: var(--secondary-light-color);
}
.registries-tag--name-wrapper[data-v-d090b660] {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 88px;
}
.registries-tag--is-editing[data-v-d090b660] {
  padding: 0;
}
.registries-tag__input[data-v-d090b660] {
  width: 100%;
}
.registries-tag__name[data-v-d090b660] {
  color: var(--link-color);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.registries-tag__name[data-v-d090b660]:hover {
  color: var(--link-hover-color);
}
.registries-tag__actions[data-v-d090b660] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-xs);
}
.registries-tag__edit-button[data-v-d090b660] {
  opacity: 0;
  transition: opacity var(--transition) ease;
}
.registries-tag:hover .registries-tag__edit-button[data-v-d090b660] {
  opacity: 1;
}.registries-manager[data-v-61ecfdae] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.registries-manager__title-wrapper[data-v-61ecfdae] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
}
.registries-manager__wrapper[data-v-61ecfdae] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}.flow-type[data-v-f20741c6] {
  padding: 0 var(--spacing-sm);
}
.flow-type[data-v-f20741c6]:first-letter {
  text-transform: capitalize;
}
.wt-nodes-panel[data-v-f20741c6] {
  display: flex;
  flex-direction: column;
  margin-top: var(--spacing-xs);
  gap: var(--spacing-xs);
}
.wt-nodes-panel__node-header[data-v-f20741c6] {
  cursor: pointer;
}
@layer wt-default, base, primevue, wt-typography;
/* 
	@author Palonnyi Oleksandr
	Must be first — locks cascade layer priority 
	before any content is loaded: wt-default < base < primevue < wt-typography.
	[WTEL-9107](https://webitel.atlassian.net/browse/WTEL-9107)

	link for complex comment https://webitel.atlassian.net/browse/WTEL-9107?focusedCommentId=740565
*/
[data-v-7bb2b533]:root {
	--scrollbar-width: 10px;
	--scrollbar-height: 10px;
	--scrollbar-thumb-width: 10px;
	--scrollbar-bg-color: var(--p-surface-50);
	--scrollbar-thumb-color: var(--p-surface-150);
	--scrollbar-hover-thumb-color: var(--p-surface-250);
	--scrollbar-border-radius: var(--border-radius);
}
:root.theme--dark[data-v-7bb2b533] {
	--scrollbar-bg-color: var(--p-surface-850);
	--scrollbar-thumb-color: var(--p-surface-700);
	--scrollbar-hover-thumb-color: var(--p-surface-800);
}
.wt-scrollbar[data-v-7bb2b533] {
	/* scrollbar itself */
}
.wt-scrollbar[data-v-7bb2b533]::-webkit-scrollbar {
	width: var(--scrollbar-width);
	height: var(--scrollbar-height);
	cursor: pointer;
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-bg-color);
}

/* scrollable element */
.wt-scrollbar[data-v-7bb2b533]::-webkit-scrollbar-thumb {
	width: var(--scrollbar-thumb-width);
	height: var(--scrollbar-thumb-height);
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-thumb-color);
}
.wt-scrollbar[data-v-7bb2b533]::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-hover-thumb-color);
}
.wt-distant-scrollbar[data-v-7bb2b533]::-webkit-scrollbar {
	width: 14px;
	height: 18px;
	background-color: var(--scrollbar-bg-color);
}
.wt-distant-scrollbar[data-v-7bb2b533]::-webkit-scrollbar-thumb {
	height: 2px;
	border: 4px solid rgba(0, 0, 0, 0);
	border-radius: var(--scrollbar-border-radius);
	background-color: var(--scrollbar-thumb-color);
	background-clip: padding-box;
	/* -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05); */
}
[data-v-7bb2b533]:root {
	--border-radius: var(--spacing-2xs);
	--border-radius--pill: 50px;
}
/*
NOTE:   text-transform: none; is set explicitly cause t-t is inherited from parent
 */

/* 
	@author HlukhovYe
	layer needed for overriding primevue's default typography for the components
	https://webitel.atlassian.net/browse/WTEL-8775?focusedCommentId=723773
*/
@layer wt-typography {
.typo-heading-1[data-v-7bb2b533] {
		font-family: "Montserrat", monospace;
		font-size: 32px;
		font-weight: 600;
		line-height: 48px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-2[data-v-7bb2b533] {
		font-family: "Montserrat", monospace;
		font-size: 24px;
		font-weight: 600;
		line-height: 40px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-3[data-v-7bb2b533] {
		font-family: "Montserrat", monospace;
		font-size: 20px;
		font-weight: 600;
		line-height: 32px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-heading-4[data-v-7bb2b533] {
		font-family: "Montserrat", monospace;
		font-size: 16px;
		font-weight: 600;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-subtitle-1[data-v-7bb2b533] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 500;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-subtitle-2[data-v-7bb2b533] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.28px; */
		/* 0.02em */
}
.typo-body-1[data-v-7bb2b533] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 400;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.56px; */
		/* 0.04em */
}
.typo-body-1-bold[data-v-7bb2b533] {
		font-family: "Montserrat", monospace;
		font-size: 14px;
		font-weight: 700;
		line-height: 24px;
		text-transform: none;
		/* letter-spacing: 0.56px; */
		/* 0.04em */
}
.typo-body-2[data-v-7bb2b533] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 400;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.16px; */
		/* 0.01em */
}
.typo-body-2-bold[data-v-7bb2b533] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 700;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.16px; */
		/* 0.01em */
}
.typo-button--md[data-v-7bb2b533] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 24px;
		text-transform: uppercase;
		/* letter-spacing: 0.96px; */
		/* 0.06em */
}
.typo-button--sm[data-v-7bb2b533] {
		font-family: "Montserrat", monospace;
		font-size: 10px;
		font-weight: 500;
		line-height: 24px;
		text-transform: uppercase;
		/* letter-spacing: 0.96px; */
		/* 0.06em */
}
.typo-caption[data-v-7bb2b533] {
		font-family: "Montserrat", monospace;
		font-size: 10px;
		font-weight: 400;
		line-height: 16px;
		text-transform: none;
		/* letter-spacing: 0.48px; */
		/* 0.03em */
}
.typo-overline[data-v-7bb2b533] {
		font-family: "Montserrat", monospace;
		font-size: 12px;
		font-weight: 500;
		line-height: 20px;
		text-transform: uppercase;
		/* letter-spacing: 2.56px; */
		/* 0.16em */
}
}
[data-v-7bb2b533]:root {
	/* LIGHTNESS */
	--lightness-lighten-5: 95%;
	--lightness-lighten-4: 90%;
	--lightness-lighten-3: 80%;
	--lightness-lighten-2: 70%;
	--lightness-lighten-1: 60%;

	--lightness-darken-1: 50%;
	--lightness-darken-2: 45%;
	--lightness-darken-3: 40%;
	--lightness-darken-4: 35%;

	--lightness-accent-1: 75%;
	--lightness-accent-2: 65%;
	--lightness-accent-3: 50%;
	--lightness-accent-4: 40%;

	/* SATURATION */
	--saturation-lighten-5: 92%;
	--saturation-lighten-4: 88%;
	--saturation-lighten-3: 90%;
	--saturation-lighten-2: 90%;
	--saturation-lighten-1: 90%;

	--saturation-darken-1: 75%;
	--saturation-darken-2: 75%;
	--saturation-darken-3: 75%;
	--saturation-darken-4: 75%;

	--saturation-accent-1: 91%;
	--saturation-accent-2: 90%;
	--saturation-accent-3: 97%;
	--saturation-accent-4: 97%;

	/* HUE */
	--hue-red: 0;
	--hue-pink: 337;
	--hue-purple: 291;
	--hue-deep-purple: 263;
	--hue-indigo: 232;
	--hue-blue: 209;
	--hue-light-blue: 202;
	--hue-cyan: 188;
	--hue-teal: 173;
	--hue-green: 121;
	--hue-light-green: 88;
	--hue-lime: 66;
	--hue-yellow: 54;
	--hue-amber: 43;
	--hue-orange: 32;
	--hue-deep-orange: 11;

	/* RED */
	--red-lighten-5: hsla(
		var(--hue-red),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--red-lighten-4: hsla(
		var(--hue-red),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--red-lighten-3: hsla(
		var(--hue-red),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--red-lighten-2: hsla(
		var(--hue-red),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--red-lighten-1: hsla(
		var(--hue-red),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--red-darken-4: hsla(
		var(--hue-red),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--red-darken-3: hsla(
		var(--hue-red),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--red-darken-2: hsla(
		var(--hue-red),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--red-darken-1: hsla(
		var(--hue-red),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--red-accent-4: hsla(
		var(--hue-red),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--red-accent-3: hsla(
		var(--hue-red),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--red-accent-2: hsla(
		var(--hue-red),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--red-accent-1: hsla(
		var(--hue-red),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* PINK */
	--pink-lighten-5: hsla(
		var(--hue-pink),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--pink-lighten-4: hsla(
		var(--hue-pink),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--pink-lighten-3: hsla(
		var(--hue-pink),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--pink-lighten-2: hsla(
		var(--hue-pink),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--pink-lighten-1: hsla(
		var(--hue-pink),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--pink-darken-4: hsla(
		var(--hue-pink),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--pink-darken-3: hsla(
		var(--hue-pink),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--pink-darken-2: hsla(
		var(--hue-pink),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--pink-darken-1: hsla(
		var(--hue-pink),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--pink-accent-4: hsla(
		var(--hue-pink),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--pink-accent-3: hsla(
		var(--hue-pink),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--pink-accent-2: hsla(
		var(--hue-pink),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--pink-accent-1: hsla(
		var(--hue-pink),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* PURPLE */
	--purple-lighten-5: hsla(
		var(--hue-purple),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--purple-lighten-4: hsla(
		var(--hue-purple),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--purple-lighten-3: hsla(
		var(--hue-purple),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--purple-lighten-2: hsla(
		var(--hue-purple),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--purple-lighten-1: hsla(
		var(--hue-purple),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--purple-darken-4: hsla(
		var(--hue-purple),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--purple-darken-3: hsla(
		var(--hue-purple),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--purple-darken-2: hsla(
		var(--hue-purple),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--purple-darken-1: hsla(
		var(--hue-purple),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--purple-accent-4: hsla(
		var(--hue-purple),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--purple-accent-3: hsla(
		var(--hue-purple),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--purple-accent-2: hsla(
		var(--hue-purple),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--purple-accent-1: hsla(
		var(--hue-purple),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* DEEP PURPLE */
	--deep-purple-lighten-5: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--deep-purple-lighten-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--deep-purple-lighten-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--deep-purple-lighten-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--deep-purple-lighten-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--deep-purple-darken-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--deep-purple-darken-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--deep-purple-darken-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--deep-purple-darken-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--deep-purple-accent-4: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--deep-purple-accent-3: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--deep-purple-accent-2: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--deep-purple-accent-1: hsla(
		var(--hue-deep-purple),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* INDIGO */
	--indigo-lighten-5: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--indigo-lighten-4: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--indigo-lighten-3: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--indigo-lighten-2: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--indigo-lighten-1: hsla(
		var(--hue-indigo),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--indigo-darken-4: hsla(
		var(--hue-indigo),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--indigo-darken-3: hsla(
		var(--hue-indigo),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--indigo-darken-2: hsla(
		var(--hue-indigo),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--indigo-darken-1: hsla(
		var(--hue-indigo),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--indigo-accent-4: hsla(
		var(--hue-indigo),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--indigo-accent-3: hsla(
		var(--hue-indigo),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--indigo-accent-2: hsla(
		var(--hue-indigo),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--indigo-accent-1: hsla(
		var(--hue-indigo),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* BLUE */
	--blue-lighten-5: hsla(
		var(--hue-blue),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--blue-lighten-4: hsla(
		var(--hue-blue),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--blue-lighten-3: hsla(
		var(--hue-blue),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--blue-lighten-2: hsla(
		var(--hue-blue),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--blue-lighten-1: hsla(
		var(--hue-blue),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--blue-darken-4: hsla(
		var(--hue-blue),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--blue-darken-3: hsla(
		var(--hue-blue),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--blue-darken-2: hsla(
		var(--hue-blue),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--blue-darken-1: hsla(
		var(--hue-blue),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--blue-accent-4: hsla(
		var(--hue-blue),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--blue-accent-3: hsla(
		var(--hue-blue),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--blue-accent-2: hsla(
		var(--hue-blue),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--blue-accent-1: hsla(
		var(--hue-blue),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIGHT BLUE */
	--light-blue-lighten-5: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--light-blue-lighten-4: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--light-blue-lighten-3: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--light-blue-lighten-2: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--light-blue-lighten-1: hsla(
		var(--hue-light-blue),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--light-blue-darken-4: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--light-blue-darken-3: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--light-blue-darken-2: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--light-blue-darken-1: hsla(
		var(--hue-light-blue),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--light-blue-accent-4: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--light-blue-accent-3: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--light-blue-accent-2: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--light-blue-accent-1: hsla(
		var(--hue-light-blue),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* CYAN */
	--cyan-lighten-5: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--cyan-lighten-4: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--cyan-lighten-3: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--cyan-lighten-2: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--cyan-lighten-1: hsla(
		var(--hue-cyan),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--cyan-darken-4: hsla(
		var(--hue-cyan),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--cyan-darken-3: hsla(
		var(--hue-cyan),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--cyan-darken-2: hsla(
		var(--hue-cyan),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--cyan-darken-1: hsla(
		var(--hue-cyan),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--cyan-accent-4: hsla(
		var(--hue-cyan),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--cyan-accent-3: hsla(
		var(--hue-cyan),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--cyan-accent-2: hsla(
		var(--hue-cyan),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--cyan-accent-1: hsla(
		var(--hue-cyan),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* TEAL */
	--teal-lighten-5: hsla(
		var(--hue-teal),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--teal-lighten-4: hsla(
		var(--hue-teal),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--teal-lighten-3: hsla(
		var(--hue-teal),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--teal-lighten-2: hsla(
		var(--hue-teal),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--teal-lighten-1: hsla(
		var(--hue-teal),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--teal-darken-4: hsla(
		var(--hue-teal),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--teal-darken-3: hsla(
		var(--hue-teal),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--teal-darken-2: hsla(
		var(--hue-teal),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--teal-darken-1: hsla(
		var(--hue-teal),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--teal-accent-4: hsla(
		var(--hue-teal),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--teal-accent-3: hsla(
		var(--hue-teal),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--teal-accent-2: hsla(
		var(--hue-teal),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--teal-accent-1: hsla(
		var(--hue-teal),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* GREEN */
	--green-lighten-5: hsla(
		var(--hue-green),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--green-lighten-4: hsla(
		var(--hue-green),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--green-lighten-3: hsla(
		var(--hue-green),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--green-lighten-2: hsla(
		var(--hue-green),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--green-lighten-1: hsla(
		var(--hue-green),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--green-darken-4: hsla(
		var(--hue-green),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--green-darken-3: hsla(
		var(--hue-green),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--green-darken-2: hsla(
		var(--hue-green),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--green-darken-1: hsla(
		var(--hue-green),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--green-accent-4: hsla(
		var(--hue-green),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--green-accent-3: hsla(
		var(--hue-green),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--green-accent-2: hsla(
		var(--hue-green),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--green-accent-1: hsla(
		var(--hue-green),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIGHT GREEN */
	--light-green-lighten-5: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--light-green-lighten-4: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--light-green-lighten-3: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--light-green-lighten-2: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--light-green-lighten-1: hsla(
		var(--hue-light-green),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--light-green-darken-4: hsla(
		var(--hue-light-green),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--light-green-darken-3: hsla(
		var(--hue-light-green),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--light-green-darken-2: hsla(
		var(--hue-light-green),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--light-green-darken-1: hsla(
		var(--hue-light-green),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--light-green-accent-4: hsla(
		var(--hue-light-green),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--light-green-accent-3: hsla(
		var(--hue-light-green),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--light-green-accent-2: hsla(
		var(--hue-light-green),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--light-green-accent-1: hsla(
		var(--hue-light-green),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* LIME */
	--lime-lighten-5: hsla(
		var(--hue-lime),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--lime-lighten-4: hsla(
		var(--hue-lime),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--lime-lighten-3: hsla(
		var(--hue-lime),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--lime-lighten-2: hsla(
		var(--hue-lime),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--lime-lighten-1: hsla(
		var(--hue-lime),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--lime-darken-4: hsla(
		var(--hue-lime),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--lime-darken-3: hsla(
		var(--hue-lime),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--lime-darken-2: hsla(
		var(--hue-lime),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--lime-darken-1: hsla(
		var(--hue-lime),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--lime-accent-4: hsla(
		var(--hue-lime),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--lime-accent-3: hsla(
		var(--hue-lime),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--lime-accent-2: hsla(
		var(--hue-lime),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--lime-accent-1: hsla(
		var(--hue-lime),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* yellow */
	--yellow-lighten-5: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--yellow-lighten-4: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--yellow-lighten-3: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--yellow-lighten-2: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--yellow-lighten-1: hsla(
		var(--hue-yellow),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--yellow-darken-4: hsla(
		var(--hue-yellow),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--yellow-darken-3: hsla(
		var(--hue-yellow),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--yellow-darken-2: hsla(
		var(--hue-yellow),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--yellow-darken-1: hsla(
		var(--hue-yellow),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--yellow-accent-4: hsla(
		var(--hue-yellow),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--yellow-accent-3: hsla(
		var(--hue-yellow),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--yellow-accent-2: hsla(
		var(--hue-yellow),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--yellow-accent-1: hsla(
		var(--hue-yellow),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* amber */
	--amber-lighten-5: hsla(
		var(--hue-amber),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--amber-lighten-4: hsla(
		var(--hue-amber),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--amber-lighten-3: hsla(
		var(--hue-amber),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--amber-lighten-2: hsla(
		var(--hue-amber),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--amber-lighten-1: hsla(
		var(--hue-amber),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--amber-darken-4: hsla(
		var(--hue-amber),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--amber-darken-3: hsla(
		var(--hue-amber),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--amber-darken-2: hsla(
		var(--hue-amber),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--amber-darken-1: hsla(
		var(--hue-amber),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--amber-accent-4: hsla(
		var(--hue-amber),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--amber-accent-3: hsla(
		var(--hue-amber),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--amber-accent-2: hsla(
		var(--hue-amber),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--amber-accent-1: hsla(
		var(--hue-amber),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* orange */
	--orange-lighten-5: hsla(
		var(--hue-orange),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--orange-lighten-4: hsla(
		var(--hue-orange),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--orange-lighten-3: hsla(
		var(--hue-orange),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--orange-lighten-2: hsla(
		var(--hue-orange),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--orange-lighten-1: hsla(
		var(--hue-orange),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--orange-darken-4: hsla(
		var(--hue-orange),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--orange-darken-3: hsla(
		var(--hue-orange),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--orange-darken-2: hsla(
		var(--hue-orange),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--orange-darken-1: hsla(
		var(--hue-orange),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--orange-accent-4: hsla(
		var(--hue-orange),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--orange-accent-3: hsla(
		var(--hue-orange),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--orange-accent-2: hsla(
		var(--hue-orange),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--orange-accent-1: hsla(
		var(--hue-orange),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* deep-orange */
	--deep-orange-lighten-5: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-5),
		var(--lightness-lighten-5),
		1
	);
	--deep-orange-lighten-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-4),
		var(--lightness-lighten-4),
		1
	);
	--deep-orange-lighten-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-3),
		var(--lightness-lighten-3),
		1
	);
	--deep-orange-lighten-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-2),
		var(--lightness-lighten-2),
		1
	);
	--deep-orange-lighten-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-lighten-1),
		var(--lightness-lighten-1),
		1
	);

	--deep-orange-darken-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-4),
		var(--lightness-darken-4),
		1
	);
	--deep-orange-darken-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-3),
		var(--lightness-darken-3),
		1
	);
	--deep-orange-darken-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-2),
		var(--lightness-darken-2),
		1
	);
	--deep-orange-darken-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-darken-1),
		var(--lightness-darken-1),
		1
	);

	--deep-orange-accent-4: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-4),
		var(--lightness-accent-4),
		1
	);
	--deep-orange-accent-3: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-3),
		var(--lightness-accent-3),
		1
	);
	--deep-orange-accent-2: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-2),
		var(--lightness-accent-2),
		1
	);
	--deep-orange-accent-1: hsla(
		var(--hue-deep-orange),
		var(--saturation-accent-1),
		var(--lightness-accent-1),
		1
	);

	/* grey */

	--lightness-lighten-5-grey: 94%;
	--lightness-lighten-4-grey: 84%;
	--lightness-lighten-3-grey: 74%;
	--lightness-lighten-2-grey: 64%;
	--lightness-lighten-1-grey: 54%;

	--lightness-darken-1-grey: 44%;
	--lightness-darken-2-grey: 34%;
	--lightness-darken-3-grey: 24%;
	--lightness-darken-4-grey: 14%;
	--lightness-darken-5-grey: 4%;

	--saturation-grey: 20%;
	--hue-grey: 225;

	--grey-lighten-5: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-5-grey),
		1
	);
	--grey-lighten-4: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-4-grey),
		1
	);
	--grey-lighten-3: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-3-grey),
		1
	);
	--grey-lighten-2: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-2-grey),
		1
	);
	--grey-lighten-1: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-lighten-1-grey),
		1
	);

	--grey-darken-1: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-1-grey),
		1
	);
	--grey-darken-2: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-2-grey),
		1
	);
	--grey-darken-3: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-3-grey),
		1
	);
	--grey-darken-4: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-4-grey),
		1
	);
	--grey-darken-5: hsla(
		var(--hue-grey),
		var(--saturation-grey),
		var(--lightness-darken-5-grey),
		1
	);

	--black: hsla(0, 0%, 0%, 1);
	--white: hsla(0, 0%, 100%, 1);
}
[data-v-7bb2b533]:root {
	/* HSL COLORS HUE VALUE */
	--_accent-color-hue: 42;
	--_secondary-color-hue: 202;
	--_page-bg-color-hue: 209;
	--_icon-color-hue: 202;
	--_positive-color-hue: 119;
	--_negative-color-hue: 11;

	--_hold-color-hue: 54;
	--_transfer-color-hue: 227;
	--_job-color-hue: 209;

	/* DEFAULT STATES OPACITY */
	--_opacity--default: 0.8;
	--_opacity--hover: 1;
	--_opacity--active: 1;
	--_opacity--focus: 0.8;
	--_opacity--disabled: 0.4;

	/* BASIC HSL COLORS VALUES */
	--_accent-color: var(--_accent-color-hue), 100%, 50%;
	--_main-color: var(--_accent-color-hue), 20%, 99%;
	--_contrast-color: var(--_accent-color-hue), 20%, 1%;
	--_secondary-color: var(--_secondary-color-hue), 20%, 90%;
	--_secondary-color-50: var(--_secondary-color-hue), 22%, 96%;
	--_page-bg-color: var(--_page-bg-color-hue), 20%, 95%;
	--_header-color: var(--_page-bg-color-hue), 20%, 90%;
	--_positive-color: var(--_positive-color-hue), 60%, 40%;
	--_negative-color: var(--_negative-color-hue), 80%, 50%;
	--_icon-color: var(--_icon-color-hue), 100%, 15%;

	--_hold-color: var(--_hold-color-hue), 80%, 50%;
	--_transfer-color: var(--_transfer-color-hue), 80%, 50%;
	--_job-color: var(--_job-color-hue), 96%, 57%;

	/* MAIN COLORS */
	--accent-color: hsla(var(--_accent-color), 1);

	--main-color: hsla(var(--_main-color), 1);

	--contrast-color: hsla(var(--_contrast-color), 1);

	--secondary-color: hsla(var(--_secondary-color), 1);
	--secondary-color-50: hsla(var(--_secondary-color-50), 1);

	/* ICON COLORS */
	--icon-color-secondary: hsla(var(--_icon-color), 0.25);

	--icon-color--hover: hsla(var(--_icon-color), var(--_opacity--hover));

	--icon-color-accent: var(--accent-color);
	--icon-color-contrast: hsla(var(--_main-color), var(--_opacity--default));
	--icon-color-active: var(--icon-color--hover);
	--icon-color-disabled: hsla(var(--_icon-color), var(--_opacity--disabled));
	--icon-color-success: var(--true-color);
	--icon-color-danger: var(--false-color);
	--icon-color-transfer: var(--transfer-color);
	--icon-color-hold: var(--hold-color);
	--icon-color-secondary-50: var(--secondary-color-50);

	--page-bg-color: hsla(var(--_page-bg-color), 1);
	--header-color: hsla(var(--_header-color), 1);

	--accent-secondary-color: hsla(var(--_accent-color), 0.3);

	/* SEMANTIC COLORS */
	--disabled-color: hsl(var(--_contrast-color), var(--_opacity--disabled));

	--true-color: hsla(var(--_positive-color), var(--_opacity--default));
	--true--hover-color: hsla(var(--_positive-color), var(--_opacity--hover));

	--false-color: hsla(var(--_negative-color), var(--_opacity--default));
	--false--hover-color: hsla(var(--_negative-color), var(--_opacity--hover));

	--hold-color: hsla(var(--_hold-color), var(--_opacity--default));
	--hold--hover-color: hsla(var(--_hold-color), var(--_opacity--hover));

	--transfer-color: hsla(var(--_transfer-color), var(--_opacity--default));
	--transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover));

	--job-color: hsla(var(--_job-color), var(--_opacity--default));
	--job--hover-color: hsla(var(--_job-color), var(--_opacity--hover));

	--link-color: hsla(205, 90%, 45%, 1);
	--link--hover-color: hsla(205, 90%, 60%, 1);

	/* SUBORDINATE COLORS */
	--tag-bg-color: var(--accent-secondary-color);

	/* FORM STATES OPACITY */
	--form-opacity--default: var(--_opacity--default);
	--form-opacity--hover: var(--_opacity--hover);
	--form-opacity--active: var(--_opacity--active);
	--form-opacity--focus: var(--_opacity--focus);
	--form-opacity--disabled: var(--_opacity--disabled);

	--form-placeholder-opacity: 0.6;
	--form-placeholder-opacity--focus: 0.4;
	--form-border-opacity--disabled: 0.05;

	--form-opacity--ouline--default: 0.4;
	--form-opacity--ouline--hover: 0.7;

	/* FORM COLORS */
	--form-input-color: var(--contrast-color);
	/* user input color */

	--form-label-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);
	--form-label--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--hover)
	);
	--form-label--active-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--active)
	);
	--form-label--disabled-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--disabled)
	);

	--form-border-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);
	--form-border--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--hover)
	);
	--form-border--disabled-color: hsla(
		var(--_contrast-color),
		var(--form-border-opacity--disabled)
	);

	--form-placeholder-color: hsla(
		var(--_contrast-color),
		var(--form-placeholder-opacity)
	);
	--form-placeholder-color--focus: hsla(
		var(--_contrast-color),
		var(--form-placeholder-opacity--focus)
	);
	--form-placeholder-color--disabled: hsla(
		var(--_contrast-color),
		var(--form-opacity--disabled)
	);

	/* outline */
	--form-outline-label-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--default)
	);

	--form-outline-border-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--ouline--default)
	);
	--form-outline-border--hover-color: hsla(
		var(--_contrast-color),
		var(--form-opacity--ouline--hover)
	);

	/* TEXT OPACITY */
	--text-opacity--default: var(--_opacity--default);
	--text-opacity----outline--default: 0.7;
	--text-opacity--disabled: 0.5;

	/* TEXT COLORS */
	--text-primary-color: hsla(
		var(--_contrast-color),
		var(--text-opacity--default)
	);
	--text-outline-color: hsla(
		var(--_contrast-color),
		var(--text-opacity----outline--default)
	);
	--text-contrast-color: hsla(var(--_main-color), var(--text-opacity--default));
	--text--disabled-color: hsla(
		var(--_contrast-color),
		var(--text-opacity--disabled)
	);

	/* CHAT COLORS */
	--_chat-client-color: var(--_accent-color);
	--_chat-client-opacity: 0.2;
	--_chat-agent-color: var(--_secondary-color-50);
	--_chat-agent-opacity: 1;

	--chat-client-message-bg-color: hsla(
		var(--_chat-client-color),
		var(--_chat-client-opacity)
	);
	--chat-agent-message-bg-color: hsla(
		var(--_chat-agent-color),
		var(--_chat-agent-opacity)
	);
	--chat-client-attachment-bg-color: hsla(
		var(--_chat-client-color),
		var(--_chat-client-opacity)
	);
	--chat-agent-attachment-bg-color: hsla(
		var(--_chat-agent-color),
		var(--_chat-agent-opacity)
	);
}
/* shared text field colors */
[data-v-7bb2b533]:root {
	/* TODO: move to separate helper-text component */
	/* helper */
	--wt-helper-text-color: var(--text-main-color);
	--wt-helper-text-disabled-color: var(--text-disabled-color);
	--wt-helper-text-invalid-color: var(--text-error-color);

	/* text */
	--wt-text-field-text-color: var(--black);

	/* placeholder */
	--wt-text-field-error-text-color: var(--error-color);
	--wt-text-field-placeholder-color: var(--grey-lighten-1);
	--wt-text-field-placeholder-error-color: var(--error-color);
	--wt-text-field-placeholder-disabled-color: var(--text-disabled-color);

	/* border */
	--wt-text-field-input-border-color: var(--grey-darken-1);
	--wt-text-field-input-border-disabled-color: var(--dp-16-surface-color);
	--wt-text-field-input-border-error-color: var(--error-color);

	/* input bg */
	--wt-text-field-input-background-disabled-color: var(--dp-16-surface-color);

	/* select */
	--wt-text-field-select-option-text-color: var(--text-main-color);
	--wt-text-field-select-option-text-hover-color: var(--primary-on-color);
	--wt-text-field-select-option-text-selected-color: var(--primary-on-color);

	--wt-text-field-select-option-wrapper-border-color: var(
		--dp-22-surface-color
	);
	--wt-text-field-select-option-background-color: var(--dp-22-surface-color);
	--wt-text-field-select-option-background-hover-color: var(
		--primary-light-color
	);
	--wt-text-field-select-option-background-selected-color: var(--primary-color);
}
:root.theme--dark[data-v-7bb2b533] {
	/* text */
	--wt-text-field-text-color: var(--white);

	--wt-text-field-input-border-color: var(--grey-lighten-1);
}
[data-v-7bb2b533]:root {
	/* dp colors */
	--dp-24-surface-color: hsl(0, 0%, 100%);
	--dp-23-surface-color: hsl(225, 20%, 99%);
	--dp-22-surface-color: hsl(225, 20%, 98%);
	--dp-21-surface-color: hsl(225, 20%, 97%);
	--dp-20-surface-color: hsl(225, 20%, 96%);
	--dp-19-surface-color: hsl(225, 20%, 95%);
	--dp-18-surface-color: hsl(225, 20%, 94%);
	--dp-17-surface-color: hsl(225, 20%, 93%);
	--dp-16-surface-color: hsl(225, 20%, 92%);
	--dp-15-surface-color: hsl(225, 20%, 91%);
	--dp-14-surface-color: hsl(225, 20%, 90%);
	--dp-13-surface-color: hsl(225, 20%, 89%);
	--dp-12-surface-color: hsl(225, 20%, 88%);
	--dp-11-surface-color: hsl(225, 20%, 87%);
	--dp-10-surface-color: hsl(225, 20%, 86%);
	--dp-9-surface-color: hsl(225, 20%, 85%);
	--dp-8-surface-color: hsl(225, 20%, 84%);
	--dp-7-surface-color: hsl(225, 20%, 83%);
	--dp-6-surface-color: hsl(225, 20%, 82%);
	--dp-5-surface-color: hsl(225, 20%, 81%);
	--dp-4-surface-color: hsl(225, 20%, 80%);
	--dp-3-surface-color: hsl(225, 20%, 79%);
	--dp-2-surface-color: hsl(225, 20%, 78%);
	--dp-1-surface-color: hsl(225, 20%, 77%);

	/* content wrapper */
	--content-wrapper-color: var(--p-content-background);
	--content-wrapper-hover-color: var(--p-content-hover-background);

	/* context menu */
	--context-menu-background-color: var(--content-wrapper-color);
	--context-menu-option-hover-color: var(--p-surface-50);
	--context-menu-option-disabled-color: var(--p-surface-100);
	--context-menu-option-text-color: var(--text-main-color);
	--context-menu-option-text-disabled-color: var(--text-disabled-color);

	/* success colors */
	--success-color: var(--green-darken-4);
	--success-hover-color: var(--green-darken-3);
	--success-light-color: var(--green-lighten-4);
	--success-on-color: var(--white);

	/* warning colors */
	--warning-color: var(--orange-accent-2);
	--warning-hover-color: var(--orange-accent-1);
	--warning-light-color: var(--orange-lighten-4);
	--warning-on-color: var(--black);

	/* error colors */
	--error-color: var(--red-accent-2);
	--error-hover-color: var(--red-lighten-2);
	--error-light-color: var(--red-lighten-4);
	--error-on-color: var(--white);

	/* info colors */
	--info-color: var(--blue-darken-1);
	--info-hover-color: var(--blue-lighten-1);
	--info-light-color: var(--blue-lighten-4);
	--info-on-color: var(--black);

	/* job colors */
	--job-color: var(--blue-darken-1);
	--job-hover-color: var(--blue-lighten-1);
	--job-light-color: var(--blue-lighten-4);
	--job-on-color: var(--black);

	/* chat colors */
	--chat-color: var(--indigo-accent-2);
	--chat-hover-color: var(--indigo-accent-1);
	--chat-light-color: var(--indigo-lighten-4);
	--chat-on-color: var(--black);

	/* transfer colors */
	--transfer-color: var(--indigo-lighten-1);
	--transfer-hover-color: var(--indigo-lighten-2);
	--transfer-light-color: var(--indigo-lighten-4);
	--transfer-on-color: var(--white);

	/* primary colors */
	--primary-color: var(--amber-accent-3);
	--primary-hover-color: var(--amber-accent-2);
	--primary-light-color: var(--amber-lighten-3);
	--primary-on-color: var(--black);

	/* secondary colors */
	--secondary-color: var(--dp-10-surface-color);
	--secondary-hover-color: var(--dp-14-surface-color);
	--secondary-light-color: var(--dp-16-surface-color);
	--secondary-on-color: var(--grey-darken-4);

	/* email colors */
	--email-color: var(--blue-darken-3);
	--email-hover-color: var(--blue-darken-2);
	--email-light-color: var(--blue-lighten-2);
	--email-on-color: var(--black);

	/* accent colors */
	--accent-color: var(--purple-lighten-1);
	--sub-accent-color: var(--indigo-darken-3);

	/* typography colors */
	--text-main-color: var(--grey-darken-3);
	--text-disabled-color: var(--grey-lighten-1);
	--text-error-color: var(--error-color);
	--text-success-color: var(--success-color);
	--text-link-color: var(--info-color);
	/* typography on colors */
	--text-on-brand-color: var(--white);
}
:root.theme--dark[data-v-7bb2b533] {
	/* dp colors */
	--dp-24-surface-color: hsl(225, 20%, 25%);
	--dp-23-surface-color: hsl(225, 20%, 24%);
	--dp-22-surface-color: hsl(225, 20%, 23%);
	--dp-21-surface-color: hsl(225, 20%, 22%);
	--dp-20-surface-color: hsl(225, 20%, 21%);
	--dp-19-surface-color: hsl(225, 20%, 20%);
	--dp-18-surface-color: hsl(225, 20%, 19%);
	--dp-17-surface-color: hsl(225, 20%, 18%);
	--dp-16-surface-color: hsl(225, 20%, 17%);
	--dp-15-surface-color: hsl(225, 20%, 16%);
	--dp-14-surface-color: hsl(225, 20%, 15%);
	--dp-13-surface-color: hsl(225, 20%, 14%);
	--dp-12-surface-color: hsl(225, 20%, 13%);
	--dp-11-surface-color: hsl(225, 20%, 12%);
	--dp-10-surface-color: hsl(225, 20%, 11%);
	--dp-9-surface-color: hsl(225, 20%, 10%);
	--dp-8-surface-color: hsl(225, 20%, 9%);
	--dp-7-surface-color: hsl(225, 20%, 8%);
	--dp-6-surface-color: hsl(225, 20%, 7%);
	--dp-5-surface-color: hsl(225, 20%, 6%);
	--dp-4-surface-color: hsl(225, 20%, 5%);
	--dp-3-surface-color: hsl(225, 20%, 4%);
	--dp-2-surface-color: hsl(225, 20%, 3%);
	--dp-1-surface-color: hsl(225, 20%, 2%);

	/* success colors */
	--success-color: var(--green-darken-4);
	--success-hover-color: var(--green-darken-3);
	--success-light-color: var(--green-lighten-3);
	--success-on-color: var(--black);

	/* warning colors */
	--warning-color: var(--orange-accent-2);
	--warning-hover-color: var(--orange-accent-1);
	--warning-light-color: var(--orange-lighten-3);
	--warning-on-color: var(--black);

	/* error colors */
	--error-color: var(--red-accent-2);
	--error-hover-color: var(--red-lighten-2);
	--error-light-color: var(--red-lighten-3);
	--error-on-color: var(--black);

	/* info colors */
	--info-color: var(--blue-darken-1);
	--info-hover-color: var(--blue-lighten-1);
	--info-light-color: var(--blue-lighten-3);
	--info-on-color: var(--white);

	/* job colors */
	--job-color: var(--blue-darken-1);
	--job-hover-color: var(--blue-lighten-1);
	--job-light-color: var(--blue-lighten-3);
	--job-on-color: var(--white);

	/* chat colors */
	--chat-color: var(--indigo-accent-2);
	--chat-hover-color: var(--indigo-accent-1);
	--chat-light-color: var(--indigo-lighten-3);
	--chat-on-color: var(--white);

	/* transfer colors */
	--transfer-color: var(--indigo-darken-1);
	--transfer-hover-color: var(--indigo-lighten-1);
	--transfer-light-color: var(--indigo-lighten-4);
	--transfer-on-color: var(--white);

	/* primary colors */
	--primary-color: var(--amber-darken-2);
	--primary-hover-color: var(--amber-darken-1);
	--primary-light-color: var(--amber-darken-4);
	--primary-on-color: var(--black);

	/* secondary colors */
	--secondary-on-color: var(--grey-lighten-4);

	/* email colors */
	--email-color: var(--blue-darken-3);
	--email-hover-color: var(--blue-darken-2);
	--email-light-color: var(--blue-lighten-1);
	--email-on-color: var(--white);

	/* accent colors */
	--accent-color: var(--purple-lighten-1);
	--sub-accent-color: var(--indigo-darken-3);

	/* typography colors */
	--text-main-color: var(--grey-lighten-3);
	--text-disabled-color: var(--grey-darken-1);
	--text-error-color: var(--error-color);
	--text-success-color: var(--success-color);
	--text-link-color: var(--info-color);
	/* typography on colors */
	--text-on-brand-color: var(--white);

	/* context menu */
	--context-menu-option-hover-color: var(--p-surface-900);
	--context-menu-option-disabled-color: var(--p-surface-850);
}
[data-v-7bb2b533]:root {
	--_elevation-color: hsla(0, 0%, 0%, 0.05);
	--elevation-1: 0px 0px 4px 1px var(--_elevation-color);
	--elevation-2: 0px 0px 6px 2px var(--_elevation-color);
	--elevation-3: 0px 0px 8px 3px var(--_elevation-color);
	--elevation-4: 0px 0px 10px 4px var(--_elevation-color);
	--elevation-5: 0px 0px 12px 5px var(--_elevation-color);
	--elevation-6: 0px 0px 14px 6px var(--_elevation-color);
	--elevation-7: 0px 0px 16px 7px var(--_elevation-color);
	--elevation-8: 0px 0px 18px 8px var(--_elevation-color);
	--elevation-9: 0px 0px 20px 9px var(--_elevation-color);
	--elevation-10: 0px 0px 22px 10px var(--_elevation-color);
}
[data-v-7bb2b533]:root {
	/* Start point */
	--_spacing-multiplicator: 8px;

	/* Spacings */
	--spacing-3xs: calc(var(--_spacing-multiplicator) / 4);
	--spacing-2xs: calc(var(--_spacing-multiplicator) / 2);
	--spacing-xs: calc(var(--_spacing-multiplicator) * 1);
	--spacing-sm: calc(var(--_spacing-multiplicator) * 2);
	--spacing-md: calc(var(--_spacing-multiplicator) * 3);
	--spacing-lg: calc(var(--_spacing-multiplicator) * 4);
	--spacing-xl: calc(var(--_spacing-multiplicator) * 5);
	--spacing-2xl: calc(var(--_spacing-multiplicator) * 6);
	--spacing-3xl: calc(var(--_spacing-multiplicator) * 7);
}
[data-v-7bb2b533]:root {
	--transition-fast: 0.3s;
	--transition-normal: 0.6s;
	--transition-slow: 0.9s;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Thin-B0oow3R9.woff2")
		format("woff2");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ThinItalic-Df5kGryu.woff2")
		format("woff2");
	font-weight: 100;
	font-style: italic;
	font-display: swap;
	font-display: swap;
	font-display: swap;
	font-display: swap;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraLight-BLVvTz6v.woff2")
		format("woff2");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraLightItalic-Cm43v-Vf.woff2")
		format("woff2");
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Light-De9MYPOT.woff2")
		format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-LightItalic-DV9n9KIB.woff2")
		format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Regular-Cu1XIIHs.woff2")
		format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Italic-DdaXnPiX.woff2")
		format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Medium-DJODbTHz.woff2")
		format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-MediumItalic-Dx3RkM4S.woff2")
		format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-SemiBold-DwmoiGAe.woff2")
		format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-SemiBoldItalic-DUAaODp3.woff2")
		format("woff2");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Bold-DYLVQlxQ.woff2")
		format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-BoldItalic-DSEOJb3S.woff2")
		format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraBold-CLYj8xrZ.woff2")
		format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-ExtraBoldItalic-DikM7EMV.woff2")
		format("woff2");
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-Black-C-enK_Oz.woff2")
		format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/flow/assets/Montserrat-BlackItalic-D65VYM31.woff2")
		format("woff2");
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

/*
This font was added for use in wt-input-text in case we need to hide the input value,like in a password input,
but without type="password" on input. It was added because not all brawsers are support 'text-security: disc' property,
So this font changes text to discs in these cases
*/
@font-face {
	font-family: "text-security-disc";
	src: url("data:font/woff2;base64,d09GMgABAAAAAAMQAAoAAAAACAAAAALIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAggAKcHILBgABNgIkAwYEIAWJSAcvG0gHEZWcjBRfHNjNPraIGU7SkQoTFkXoFRjv8FUcbDmIj4fv117P3fcRQioFRseKQUaWwJVVVVWlqUSWQCqzAXDOVp+vqsnVapWIlhw7yBoEhhMnHFYCHMKOvkR03bf6e9V3k5C0pdB3/e9T0qkd4MMPltYAwwl4rBdKBw5Q6WQJiMe2JfXQzxqDHiJHyBCRoyWk9D0eokh2Ww9se/9MHLHYawD4n5f/Ls/b722ATVs377KRPE9jOdKY88cWRA5gIghJDQ1N8AfoA89ygvcYf4pg/Ec+TgiEgQwZEhIKKKCIIkoooYwyKqigiipqqKGOOhpooIkmWmihjTY66PxOyEABGSZiKqAAQnQ6B6/n1u98x4262u0Js8WuS9OPfJk+/cuR6bOAtTcIJOZcuOuj7bV/Kyl9h9f38fFYbrefcSYrI8lAQDMUDxExOyyGlfQ/vVsg0xGArgJ1t5MoVLEcA2Gq5ci0HECy2rnswoOiU55kl1xUjEQJdXtiFM3sEWm9lqWFmgZbjP05LRVBvbqdHux9wpyGnbGWEX6p5JEHp+lXirTnJ5QhZa5Rrsq9D67r+24QRrdzndcmBzUrQ9xXb6hp/3Kt1h1kLEFUI/CLVKdW/dqtdrVRNqpIyLr2KxU5WYVXmZuskh+VXqlluyjNMNPGBGcj6JOF0MC+M9Ucc48RhDxCB6QQzssN7C3m8bmbGCrG7VXU5FY+yGdUakVOvwKllMExtmsLwzMsVQFGpi5UbHxfXhb762Voh6fTcKeW03OxxicY73eTpa8bxhIzeWR+wnoJ6j/4kBejs2xf69j7pOSUzmzPCqNy4cojtlsLwpBhb++AtcBHQcpyGZgkYrGUBTwXn2/RF12BjlQTI1XSvANELqO18DPB+UIyNkJSZBsoX7wh7DlfsyVfTshpuSjLSv9H3fwD+a36nwAAkBFZ5aSOqp+7Bg==")
		format("woff2");
	font-weight: 100;
	font-style: normal;
}
.fade-enter-active[data-v-7bb2b533],
.fade-leave-active[data-v-7bb2b533] {
	transition: opacity var(--transition);
}
.fade-enter[data-v-7bb2b533],
.fade-leave-to[data-v-7bb2b533] {
	opacity: 0;
}
/*
  Classes for direct use in placeholder-like elements styling
   (e.g. vue-multiselect .multiselect__placeholder which is technically a span)
*/
.wt-placeholder[data-v-7bb2b533] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-color);
}
.wt-placeholder--disabled[data-v-7bb2b533] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-disabled-color);
}
.wt-placeholder--error[data-v-7bb2b533] {
	transition: var(--transition);
	color: var(--wt-text-field-placeholder-error-color);
}
.d-none[data-v-7bb2b533] {
	display: none;
}
@media only screen and (max-width: 960px) {
.d-none-sm[data-v-7bb2b533] {
		display: none;
}
.d-block-sm[data-v-7bb2b533] {
		display: block;
}
}
@media only screen and (max-width: 600px) {
.d-none-xs[data-v-7bb2b533] {
		display: none;
}
.d-block-xs[data-v-7bb2b533] {
		display: block;
}
}
/* Component Variables - Centralized to avoid duplication */
/* This file imports all component-specific CSS variables once globally */
[data-v-7bb2b533]:root {
	--wt-app-header-min-height: 40px;
	--wt-app-header-padding: var(--spacing-xs) var(--spacing-sm);
	--wt-app-header-background: var(--dp-9-surface-color);

	--wt-app-header-content-gap: var(--spacing-sm);
	--wt-app-header-content-panel-margin: var(--spacing-2xs);
	--wt-app-header-content-bg-color: var(--content-wrapper-color);
	--wt-app-header-content-z-index: 11;

	--wt-app-navigator-max-height: 80vh;
	--wt-app-navigator-padding: var(--wt-app-header-content-gap);
	--wt-app-navigator-item-width: 128px;
	--wt-app-navigator-item-height: 135px;
	--wt-app-navigator-item-padding: var(--spacing-xs);
	--wt-app-navigator-item-gap: var(--wt-app-header-content-gap);
	--wt-app-navigator-item-border: 1px solid;
	--wt-app-navigator-item-border-color: var(--secondary-color);
	--wt-app-navigator-item-pic-size: 88px;
	--wt-app-navigator-item-border-color--hover: var(--primary-color);

	--wt-header-actions-min-width: 120px;
	--wt-header-actions-content-sections-gap: var(--spacing-lg);
	--wt-header-actions-padding: var(--wt-app-header-content-gap);
	--wt-header-actions-action-bg-color--hover: var(--secondary-color);
	--wt-header-actions-action-link-padding: var(--spacing-xs);
}
[data-v-7bb2b533]:root {
	--wt-avatar-size--size-xs: calc(var(--_spacing-multiplicator) * 3);
	--wt-avatar-size--size-sm: calc(var(--_spacing-multiplicator) * 4);
	--wt-avatar-size--size-md: calc(var(--_spacing-multiplicator) * 5);
	--wt-avatar-size--size-lg: calc(var(--_spacing-multiplicator) * 7);
	--wt-avatar-size--size-xl: calc(var(--_spacing-multiplicator) * 9);
	--wt-avatar-size--size-2xl: calc(var(--_spacing-multiplicator) * 12);
	--wt-avatar-size--size-3xl: calc(var(--_spacing-multiplicator) * 16);

	--wt-avatar-size: var(--wt-avatar-size--size-md);

	--online-color: var(--success-color);
	--dnd-color: var(--warning-color);
	--busy-color: var(--error-color);
	--offline-color: var(--disabled-color);
	--pause-color: var(--warning-color);

	--wt-avatar-text-color: var(--white);

	--wt-avatar-letters-p1-color: var(--red-lighten-2);
	--wt-avatar-letters-p2-color: var(--purple-lighten-2);
	--wt-avatar-letters-p3-color: var(--deep-purple-lighten-2);
	--wt-avatar-letters-p4-color: var(--indigo-lighten-2);
	--wt-avatar-letters-p5-color: var(--blue-lighten-1);
	--wt-avatar-letters-p6-color: var(--cyan-lighten-1);
	--wt-avatar-letters-p7-color: var(--teal-darken-3);
	--wt-avatar-letters-p8-color: var(--green-darken-2);
	--wt-avatar-letters-p9-color: var(--lime-darken-3);
	--wt-avatar-letters-p10-color: var(--yellow-darken-3);
	--wt-avatar-letters-p11-color: var(--amber-lighten-2);
	--wt-avatar-letters-p12-color: var(--orange-darken-1);
	--wt-avatar-letters-p13-color: var(--deep-purple-lighten-1);
}
:root.theme--dark[data-v-7bb2b533] {
	--wt-avatar-text-color: var(--black);
}
[data-v-7bb2b533]:root {
	--wt-badge-size: var(--spacing-xs);
}
[data-v-7bb2b533]:root {
	--breadcrumb-indicator-size: 4px;
	--breadcrumb-gap: var(--spacing-sm);
	--breadcrumb-dot-gap: var(--spacing-2xs);
	--breadcrumb-indicator-color: var(--icon-color);
	--breadcrumb-accent-indicator-color: var(--primary-color);
}
[data-v-7bb2b533]:root {
	--button-select-button-padding: var(--spacing-xs) var(--spacing-sm);

	--button-select-icon-button-padding: var(--spacing-xs);

	--button-select-buttons-gap: 1px;
}
[data-v-7bb2b533]:root {
	--btn-min-width: 90px;
	--btn-min-width--size-sm: 70px;
	--btn-padding: var(--spacing-xs) var(--spacing-sm);
	--btn-padding--size-sm: var(--spacing-2xs) var(--spacing-xs);
	/* COLORS */
	--btn-primary-color: var(--primary-color);
	--btn-primary-hover-color: var(--primary-hover-color);
	--btn-primary-text-color: var(--primary-on-color);

	--btn-secondary-color: var(--dp-10-surface-color);
	--btn-secondary-hover-color: var(--dp-14-surface-color);
	--btn-secondary-text-color: var(--grey-darken-4);

	--btn-success-color: var(--success-color);
	--btn-success-hover-color: var(--success-hover-color);
	--btn-success-text-color: var(--grey-lighten-5);

	--btn-info-color: var(--info-color);
	--btn-info-hover-color: var(--info-hover-color);
	--btn-info-text-color: var(--grey-lighten-5);

	--btn-job-color: var(--job-color);
	--btn-job-hover-color: var(--job-hover-color);
	--btn-job-text-color: var(--grey-lighten-5);

	--btn-error-color: var(--error-color);
	--btn-error-hover-color: var(--error-hover-color);
	--btn-error-text-color: var(--grey-lighten-5);

	--btn-transfer-color: var(--transfer-color);
	--btn-transfer-hover-color: var(--transfer-hover-color);
	--btn-transfer-text-color: var(--transfer-on-color);

	--btn-disabled-color: var(--dp-16-surface-color);
	--btn-disabled-text-color: var(--grey-darken-1);
}
:root.theme--dark[data-v-7bb2b533] {
	--btn-secondary-text-color: var(--grey-lighten-4);
}
[data-v-7bb2b533]:root {
	--wt-card-border-radius: var(--p-content-border-radius);
	--wt-card-padding: var(--spacing-sm);
}
[data-v-7bb2b533]:root {
	--checkbox-icon-margin: var(--spacing-xs);
}
[data-v-7bb2b533]:root {
	--chip-padding: var(--spacing-2xs) var(--spacing-sm);
	--chip-border-radius: var(--spacing-lg);

	--wt-chip-main-background-color: var(--primary-light-color);
	--wt-chip-main-text-color: var(--primary-on-color);

	--wt-chip-primary-background-color: var(--primary-color);
	--wt-chip-primary-text-color: var(--primary-on-color);

	--wt-chip-secondary-background-color: var(--secondary-color);
	--wt-chip-secondary-text-color: var(--secondary-on-color);

	--wt-chip-success-background-color: var(--success-color);
	--wt-chip-success-text-color: var(--success-on-color);

	--wt-chip-warning-background-color: var(--warning-color);
	--wt-chip-warning-text-color: var(--warning-on-color);

	--wt-chip-error-background-color: var(--error-color);
	--wt-chip-error-text-color: var(--error-on-color);

	--wt-chip-transfer-background-color: var(--transfer-color);
	--wt-chip-transfer-text-color: var(--transfer-on-color);
}
[data-v-7bb2b533]:root {
	--wt-context-menu-option-padding: var(--spacing-xs);

	--wt-context-menu-background-color: var(--context-menu-background-color);
	--wt-context-menu-option-text-color: var(--context-menu-option-text-color);
	--wt-context-menu-option-background-hover-color: var(
		--context-menu-option-hover-color
	);
	--wt-context-menu-option-background-disabled-color: var(
		--context-menu-option-disabled-color
	);
	--wt-context-menu-option-text-disabled-color: var(
		--context-menu-option-text-disabled-color
	);
}
:root {
&[data-v-7bb2b533]{
	/*General*/
	--dp-font-family: "Montserrat";
	--dp-border-radius: var(--border-radius);
	/*Configurable border-radius*/
	--dp-cell-border-radius: var(--border-radius);
	/*Specific border radius for the calendar cell*/

	/*Sizing*/
	--dp-button-heigh: 32px;
	/*Size for buttons in overlays*/
	--dp-month-year-row-height: 24px;
	/*Height of the month-year select row*/
	--dp-month-year-row-button-size: 24px;
	/*Specific height for the next/previous buttons*/
	--dp-button-icon-height: var(--icon-md-size);
	/*Icon sizing in buttons*/
	--dp-cell-size: 24px;
	/*Width and height of calendar cell*/
	--dp-cell-padding: var(--spacing-2xs);
	/*Padding in the cell*/
	--dp-common-padding: var(--spacing-xs);
	/*Common padding used*/
	--dp-input-icon-padding: calc(var(--icon-md-size) + 2 * var(--spacing-xs));
	/*Padding on the left side of the input if icon is present*/
	--dp-input-padding: calc(var(--spacing-xs) - 1px)
		calc(var(--icon-md-size) + 2 * var(--spacing-xs));
	/*Padding in the input*/
	/* --dp-menu-min-width: 260px; Adjust the min width of the menu */
	--dp-action-buttons-padding: 2px 5px;
	/*Adjust padding for the action buttons in action row*/
	--dp-row-maring: var(--spacing-3xs);
	/*Adjust the spacing between rows in the calendar*/
	--dp-calendar-header-cell-padding: 0.5rem;
	/*Adjust padding in calendar header cells*/
	--dp-two-calendars-spacing: 10px;
	/*Space between multiple calendars*/
	--dp-overlay-col-padding: 3px;
	/*Padding in the overlay column*/
	--dp-time-inc-dec-button-size: 24px;
	/*Sizing for arrow buttons in the time picker*/

	/*Font sizes*/
	--dp-font-size: 12px;
	/*Default font-size*/
	--dp-preview-font-size: 12px;
	/*Font size of the date preview in the action row*/
	--dp-time-font-size: 12px;
	/*Font size in the time picker*/

	/*Transitions*/
	--dp-animation-duration: var(--transition);
	/*Transition duration*/
	--dp-menu-appear-transition-timing: cubic-bezier(0.4, 0, 1, 1);
	/*Timing on menu appear animation*/
	--dp-transition-timing: ease-out;
	/*Timing on slide animations*/
	}
.dp__theme_light[data-v-7bb2b533] {
		--dp-background-color: var(--content-wrapper-color);
		--dp-text-color: var(--text-main-color);
		/* --dp-hover-color: var(--secondary-color-50); */
		/* --dp-hover-text-color: var(--contrast-color); */
		--dp-hover-icon-color: var(--icon-btn-hover-color);
		--dp-primary-color: var(--primary-color);
		--dp-primary-text-color: var(--primary-on-color);
		--dp-secondary-color: var(--secondary-color);
		--dp-border-color: var(--wt-text-field-input-border-color);
		--dp-menu-border-color: transparent;
		/* --dp-border-color-hover: var(--form-border--hover-color); */
		--dp-disabled-color: var(--wt-text-field-input-background-disabled-color);
		--dp-success-color: var(--success-color);
		--dp-icon-color: var(--icon-color);
		--dp-danger-color: var(--error-color);
		/* --dp-scroll-bar-background: #f3f3f3; */
		/* --dp-scroll-bar-color: #959595; */
		/* --dp-success-color-disabled: #a3d9b1; */
		/* --dp-highlight-color: rgba(25, 118, 210, 0.1); */
}
}
[data-v-7bb2b533]:root {
	--divider-border: 1px solid;
	--divider-border-color: var(--grey-lighten-4);
}
:root.theme--dark[data-v-7bb2b533] {
	--divider-border-color: var(--grey-darken-2);
}
[data-v-7bb2b533]:root {
	--wt-dual-panel-padding: var(--spacing-sm);
	--wt-dual-panel-section-padding: var(--spacing-sm);
	--wt-dual-panel-section-gap: var(--spacing-sm);

	--wt-dual-panel-background-color: var(--grey-lighten-5);
	--wt-dual-panel-content-wrapper-color: var(--content-wrapper-color);
}
:root.theme--dark[data-v-7bb2b533] {
	--wt-dual-panel-background-color: var(--grey-darken-4);
}
[data-v-7bb2b533]:root {
	--wt-dummy-text-color: var(--text-main-color);
}
[data-v-7bb2b533]:root {
	--wt-empty-min-width: 280px;
	--wt-empty-width: 600px;
	--wt-empty-max-width: 80vw;
}
[data-v-7bb2b533]:root {
	--wt-error-page-background-color: var(--content-wrapper-color);
	--wt-error-page-text-color: var(--text-main-color);
}
[data-v-7bb2b533]:root {
	--wt-expansion-panel-header-background-color: var(--dp-16-surface-color);
	--wt-expansion-panel-header-title-color: var(--text-main-color);
	--wt-expansion-panel-content-background-color: var(--content-wrapper-color);
	--wt-expansion-panel-content-text-color: var(--text-main-color);
}
[data-v-7bb2b533]:root {
	--headline-min-height: 40px; /* button/search-bar height */
	--headline-title-margin: var(--spacing-sm);
	--wt-headline-background-color: var(--content-wrapper-color);
}
[data-v-7bb2b533]:root {
	--icon-btn-hover-color: var(--grey-darken-5);
}
:root.theme--dark[data-v-7bb2b533] {
	--icon-btn-hover-color: var(--grey-lighten-5);
}
[data-v-7bb2b533]:root {
	--icon-8xl-size: 96px;
	--icon-7xl-size: 88px;
	--icon-6xl-size: 80px;
	--icon-5xl-size: 72px;
	--icon-4xl-size: 64px;
	--icon-3xl-size: 56px;
	--icon-2xl-size: 48px;
	--icon-xl-size: 40px;
	--icon-lg-size: 32px;
	--icon-md-size: 24px;
	--icon-sm-size: 16px;
	--icon-xs-size: 8px;

	--icon-color: var(--grey-darken-2);
	--icon-active-color: var(--grey-darken-4);
	--icon-primary-color: var(--p-primary-color);
	--icon-error-color: var(--p-error-color);
	--icon-success-color: var(--p-success-color);
	--icon-warning-color: var(--p-warn-color);
	--icon-on-dark-color: var(--white);
	--icon-on-light-color: var(--grey-darken-3);
	--icon-on-primary-color: var(--primary-on-color);
	--icon-info-color: var(--p-info-color);
	--icon-chat-color: var(--p-chat-color);
	--icon-transfer-color: var(--p-transfer-color);
	--icon-job-color: var(--p-task-color);
	--icon-disabled-color: var(--grey-lighten-4);
}
:root.theme--dark[data-v-7bb2b533] {
	--icon-color: var(--grey-lighten-2);
	--icon-active-color: var(--grey-lighten-4);
	--icon-disabled-color: var(--grey-darken-2);
}
[data-v-7bb2b533]:root {
	--wt-indicator-dot-size--size-sm: var(--spacing-xs);
	--wt-indicator-dot-size--size-md: var(--spacing-sm);
	--wt-indicator-dot-size: var(--wt-indicator-size--size-md);
	--wt-indicator-dot-offset: var(--spacing-2xs);

	--wt-indicator-text-margin: var(--spacing-2xs);

	--wt-indicator-text-color: var(--text-main-color);
	--wt-indicator-primary-color: var(--primary-color);
	--wt-indicator-secondary-color: var(--grey-lighten-3);
	--wt-indicator-disabled-color: var(--grey-lighten-4);
	--wt-indicator-success-color: var(--success-color);
	--wt-indicator-error-color: var(--error-color);
	--wt-indicator-transfer-color: var(--transfer-color);
	--wt-indicator-break-out-color: var(--warning-color);
	--wt-indicator-info-color: var(--info-color);
	--wt-indicator-final-status-color: var(--green-accent-4);
	--wt-indicator-initial-status-color: var(--red-accent-2);
	--wt-indicator-other-status-color: var(--orange-accent-2);
}
:root.theme--dark[data-v-7bb2b533] {
	--wt-indicator-secondary-color: var(--grey-darken-1);
	--wt-indicator-disabled-color: var(--grey-darken-2);
}
[data-v-7bb2b533]:root {
	--input-padding: calc(var(--spacing-xs) - 1px); /* - border */
	--input-border: 1px solid;
	--input-icon-margin: var(--spacing-xs);

	--input-after-wrapper-gap: var(--spacing-2xs);
}
[data-v-7bb2b533]:root {
	--wt-item-link-text-color: var(--text-main-color);
}
[data-v-7bb2b533]:root {
	--wt-label-padding: var(--spacing-2xs) var(--spacing-xs);

	--wt-label-color: var(--p-form-field-color);
	--wt-label-error-color: var(--p-error-color);
	--wt-label-disabled-color: var(--p-form-field-disabled-color);
}
[data-v-7bb2b533]:root {
	--load-bar-height: 6px;
	--load-bar-padding: 1px;
	--load-bar-border-radius: 50px;

	--wt-load-bar-primary-color: var(--primary-on-color);
	--wt-load-bar-error-color: var(--p-error-color);
	--wt-load-bar-warning-color: var(--p-warn-color);
	--wt-load-bar-success-color: var(--p-success-color);
	--wt-load-bar-info-color: var(--p-info-color);
}
[data-v-7bb2b533]:root {
	--loader-size: 44px;
	--loader-dot-size: 6px;
	--loader-animation-duration: 3s;

	--wt-loader-md-path-color: var(--grey-darken-2);
	--wt-loader-md-point-color: var(--primary-color);

	--wt-loader-sm-path-main-color: var(--grey-darken-2);
	--wt-loader-sm-path-icon-color: var(--icon-color);
	--wt-loader-sm-path-on-light-color: var(--icon-on-light-color);
	--wt-loader-sm-path-on-dark-color: var(--icon-on-dark-color);
}
:root.theme--dark[data-v-7bb2b533] {
	--wt-loader-md-path-color: var(--grey-lighten-2);

	--wt-loader-sm-path-main-color: var(--grey-lighten-2);
}
[data-v-7bb2b533]:root {
	--wt-logo-width: 84px;
	--wt-logo-height: 16px;
}
[data-v-7bb2b533]:root {
	--wt-navigation-bar-width: 340px;
	--wt-navigation-bar-z-index: 10;
	--wt-navigation-bar-padding: var(--spacing-sm);

	--wt-navigation-bar-header-padding: var(--spacing-xs);
	--wt-navigation-bar-app-pic-height: 24px;

	--wt-navigation-bar-list-padding: var(--wt-navigation-bar-padding);
	--wt-navigation-bar-link-padding: var(--wt-navigation-bar-padding);
	--wt-navigation-bar-subnav-padding-left: var(--spacing-lg);
	--wt-navigation-bar-active-expansion-flag-width: 5px;
	--wt-navigation-bar-active-expansion-name-max-width: calc(
		100% -
		var(--icon-md-size) -
		var(--spacing-xs)
	);

	--wt-navigation-bar-background-color: var(--dp-18-surface-color);
	--wt-navigation-bar-option-text-color: var(--text-main-color);
	--wt-navigation-bar-option-text-active-color: var(--primary-on-color);
	--wt-navigation-bar-option-background-color: var(
		--wt-navigation-bar-background-color
	);
	--wt-navigation-bar-option-background-hover-color: var(--dp-20-surface-color);
	--wt-navigation-bar-option-background-active-color: var(
		--primary-light-color
	);
	--wt-navigation-bar-expansion-ribbon-color: var(--primary-color);
}
[data-v-7bb2b533]:root {
	--notifications-bar-max-height: 60%;
	--notifications-bar-corner-margin: var(--spacing-sm);
	--notifications-bar-notifications-margin: 0 0 var(--spacing-xs) auto;
	--notifications-bar-z-index: 101;
}
[data-v-7bb2b533]:root {
	--page-wrapper-padding: var(--spacing-sm);
	--page-wrapper-section-padding: var(--spacing-sm);
	--page-wrapper-section-gap: var(--spacing-sm);

	--wt-page-wrapper-background-color: var(--p-surface-50);
	--wt-page-wrapper-content-wrapper-color: var(--content-wrapper-color);
	/* --content-wrapper-border-radius: var(--p-border-radius-lg); */
}
:root.theme--dark[data-v-7bb2b533] {
	--wt-page-wrapper-background-color: var(--p-surface-850);
}
[data-v-7bb2b533]:root {
	--pagination-gap: var(--spacing-xs);
	--pagination-size-input-width: 100px;
}
.wt-player[data-v-7bb2b533] {
	--plyr-color-main: var(--primary-color);
	--plyr-audio-control-color: var(--icon-color);
	--plyr-audio-control-color-hover: var(--icon-btn-hover-color);
	--plyr-audio-controls-background: var(--content-wrapper-color);
	--plyr-controls-icon-size: var(--icon-sm-size);
	--plyr-controls-icon-padding: var(--spacing-2xs);
	--plyr-audio-control-background-hover: transparent;
	--plyr-audio-progress-buffered-background: var(
		--dp-14-surface-color
	); /* loaded color */
	--wt-player-audio-progress-background: var(
		--wt-slider-background-color
	); /* not played color */
	--plyr-tooltip-background: var(--wt-tooltip-background-color);
	--plyr-tooltip-color: var(--wt-tooltip-text-color);
	/* --plyr-control-toggle-checked-background: var(--main-color); */
	--player-close-icon-transform-translate-x: var(--spacing-md);
	/* "-1 * var" for use the negative value of a variable */
	--player-close-icon-transform-translate-y: calc(-1 * var(--spacing-md));

	--wt-slider-border: 1px solid var(--secondary-color);
	--wt-slider-pointer-radius: 50%;
	--wt-slider-pointer-background-color: var(--dp-24-surface-color);
	--wt-slider-pointer-border-color: var(--dp-10-surface-color);
	--wt-slider-pointer-size: 16px;
}
[data-v-7bb2b533]:root {
	--popup-wrapper-z-index: 12;

	--popup-shadow-opacity: 0.8;
	--wt-popup-shadow-color: hsla(0, 0%, 0%, var(--popup-shadow-opacity));

	--wt-popup-size-xs: 300px;
	--wt-popup-size-sm: 500px;
	--wt-popup-size-md: 800px;
	--wt-popup-size-lg: 1140px;

	--popup-max-height: 90%;

	--wt-popup-background-color: var(--dp-24-surface-color);
	--popup-sections-gap: var(--spacing-xs);
	--popup-padding: var(--spacing-sm);

	--popup-header-padding: var(--spacing-xs);
	--wt-popup-header-background-color: var(--dp-18-surface-color);
	--wt-popup-header-text-color: var(--text-main-color);

	--popup-main-section-padding-right: var(--spacing-xs); /* scroll offset */

	--popup-actions-padding: var(--spacing-xs);
}
[data-v-7bb2b533]:root {
	--wt-progress-bar-height: 12px;
	--wt-progress-bar-padding: var(--spacing-3xs);
	--wt-progress-bar-border-radius: var(--wt-progress-bar-padding);

	--wt-progress-bar-background-color: var(--dp-1-surface-color);
	--wt-progress-bar-background-primary-color: var(--primary-color);
	--wt-progress-bar-background-secondary-color: var(--dp-20-surface-color);
	--wt-progress-bar-background-success-color: var(--success-color);
	--wt-progress-bar-background-error-color: var(--error-color);
	--wt-progress-bar-background-warning-color: var(--warning-color);
}
[data-v-7bb2b533]:root {
	--radio-icon-margin: var(--spacing-xs);
	--radio-checkmark-size: 18px;
	--radio-bullet-size: 8px;
	--radio-border: 2px solid;
}
[data-v-7bb2b533]:root {
	--rounded-action-border-size: 2px;
	--rounded-action-padding: calc(
		var(--spacing-xs) -
		var(--rounded-action-border-size)
	);

	--rounded-action-rounded-border-radius: var(--border-radius--pill);

	--rounded-action-bg-color: var(--dp-18-surface-color);
	--rounded-action-bg-hover-color: var(--dp-20-surface-color);

	--rounded-action-active-color: var(--dp-10-surface-color);
}
[data-v-7bb2b533]:root {
	--wt-search-bar-width: 270px;
}
[data-v-7bb2b533]:root {
	--wt-slider-pointer-size: 16px;
	--wt-slider-height: var(--wt-slider-pointer-size);

	--wt-slider-width: 100%;
	--wt-slider-input-height: 8px;
	--wt-slider-border: 1px solid var(--secondary-color);
	--wt-slider-background-color: var(--dp-1-surface-color);
	--wt-slider-background-completed-color: var(--primary-color);

	--wt-slider-pointer-background-color: var(--dp-24-surface-color);
	--wt-slider-pointer-background-hover-color: var(--dp-22-surface-color);
	--wt-slider-pointer-border-color: var(--dp-10-surface-color);

	--wt-slider-pointer-radius: 50%;

	--wt-slider-vertical-container-translation: translate(2px);
	--wt-slider-vertical-transform: translate(-100%, 0) rotate(-90deg);
	--wt-slider-vertical-transform-origin: 100% 0;
}
[data-v-7bb2b533]:root {
	--wt-status-select-padding: 0 calc(var(--icon-size-md) + var(--spacing-xs)) 0
		0; /* reset wt-select padding, but preserve arrow icon padding */

	--wt-status-select-option-text-color: var(--text-main-color);
	--wt-status-select-option-background-color: var(--dp-22-surface-color);
	--wt-status-select-option-background-hover-color: var(
		--secondary-light-color
	);
	/* --wt-status-select-option-background-selected-color: var(--primary-light-color); */

	--wt-status-select-background-color: var(
		--wt-status-select-option-background-color
	);
}
[data-v-7bb2b533]:root {
	--wt-stepper-divider-background-color: var(--secondary-color);
	--wt-stepper-divider-background-completed-color: var(--primary-color);
}
[data-v-7bb2b533]:root {
	--switcher-icon-margin: var(--spacing-xs);
	--switcher-width: 40px;
	--switcher-height: 22px;
	--switcher-cicle-size: 14px;
	--switcher-cicle-margin: 4px;
	--switcher-cicle-translateX: 17px;
	--switcher-border-radius: 24px;
	/* circle */
	--wt-switcher-circle-background-color-on: var(--grey-darken-3);
	--wt-switcher-circle-background-color-on-hover: var(--grey-darken-4);
	--wt-switcher-circle-background-color-on-disabled: var(--grey-lighten-3);

	--wt-switcher-circle-background-color-off: var(--grey-lighten-4);
	--wt-switcher-circle-background-color-off-hover: var(--grey-lighten-5);
	--wt-switcher-circle-background-color-off-disabled: var(--grey-lighten-3);
	/* background */
	--wt-switcher-background-color-on: var(--primary-color);
	--wt-switcher-background-color-on-hover: var(--primary-hover-color);
	--wt-switcher-background-color-on-disabled: var(--primary-light-color);

	--wt-switcher-background-color-off: var(--grey-darken-2);
	--wt-switcher-background-color-off-hover: var(--grey-darken-1);
	--wt-switcher-background-color-off-disabled: var(--grey-lighten-4);
}
:root.theme--dark[data-v-7bb2b533] {
	/* circle */
	--wt-switcher-circle-background-color-off: var(--grey-darken-4);
	--wt-switcher-circle-background-color-off-hover: var(--grey-darken-3);
	--wt-switcher-circle-background-color-off-disabled: var(--grey-darken-3);
	/* background */
	--wt-switcher-background-color-off: var(--grey-lighten-1);
	--wt-switcher-background-color-off-hover: var(--grey-lighten-2);
	--wt-switcher-background-color-off-disabled: var(--grey-darken-2);
}
[data-v-7bb2b533]:root {
	--table-actions-padding: var(--spacing-xs);
	--table-actions-icon-gap: var(--spacing-xs);
}
[data-v-7bb2b533]:root {
	--table-col-min-width: 140px;

	--table-head-sort-arrow-margin: var(--spacing-xs);
	--table-head-border: 1px solid;

	--table-min-height: 24px; /* 24px icon size or body-1 lh */
	--table-column-gap: var(--spacing-xs);
	--table-row-padding: var(--spacing-xs);

	--wt-table-head-border-color: var(--grey-lighten-1);
	--wt-table-head-background-color: var(--content-wrapper-color);
	--wt-table-primary-color: var(--content-wrapper-color);
	--wt-table-zebra-color: var(--dp-18-surface-color);
}
:root.theme--dark[data-v-7bb2b533] {
	--wt-table-head-border-color: var(--grey-darken-1);
}
[data-v-7bb2b533]:root {
	--tabs-underiline-height: 1px;
	--tabs-underiline-color: transparent;

	--tab-padding: var(--spacing-2xs);
	--tab-gap: var(--spacing-xs);
	--wt-tabs-text-color: var(--text-main-color);
	--wt-tabs-text-hover-color: var(--wt-tabs-text-color);
	--wt-tabs-text-active-color: var(--wt-tabs-text-color);
	--tab-border: 4px solid;
	--wt-tabs-underline-active-color: var(--primary-color);
	--tab-z-index: 1;
}
[data-v-7bb2b533]:root {
	--textarea-min-height: 100px;
	--textarea-padding: var(--input-padding);
}
[data-v-7bb2b533]:root {
	--timepicker-input-width: 80px;
	--timepicker-input-margin: var(--spacing-xs);
}
[data-v-7bb2b533]:root {
	--tooltip-padding: var(--spacing-2xs) var(--spacing-xs);

	--wt-tooltip-text-color: var(--text-main-color);
	--wt-tooltip-background-color: var(--dp-24-surface-color);

	--tooltip-elevation: var(--elevation-10);
}
[data-v-7bb2b533]:root {
	--wt-tree-item-active: var(--primary-light-color);
	--wt-tree-item-active-on: var(--grey-darken-4);

	--wt-tree-item-searched: var(--light-blue-lighten-4);
	--wt-tree-item-searched-on: var(--grey-darken-4);

	--wt-tree-item: var(--primary-light-color);
	--wt-tree-item-on: var(--grey-darken-1);

	--wt-tree-item-hover: var(--dp-24-surface-color);
	--wt-tree-item-hover-on: var(--grey-darken-1);
}
:root.theme--dark[data-v-7bb2b533] {
	--wt-tree-item-active: var(--primary-light-color);
	--wt-tree-item-active-on: var(--grey-lighten-4);

	--wt-tree-item-searched: var(--light-blue-lighten-2);
	--wt-tree-item-searched-on: var(--grey-darken-4);

	--wt-tree-item: var(--primary-light-color);
	--wt-tree-item-on: var(--grey-lighten-3);

	--wt-tree-item-hover-on: var(--grey-lighten-3);
}
[data-v-7bb2b533]:root {
	--wt-tree-table-col-min-witdh: var(--table-col-min-width);

	--wt-tree-table-head-sort-arrow-margin: var(--table-head-sort-arrow-margin);
	--wt-tree-table-head-border: var(--table-head-border);

	--wt-tree-table-min-height: var(--table-min-height);
	--wt-tree-table-column-gap: var(--table-column-gap);
	--wt-tree-table-row-padding: var(--table-row-padding);

	--wt-tree-table-head-border-color: var(--wt-table-head-border-color);
	--wt-tree-table-head-background-color: var(--wt-table-head-background-color);
	--wt-tree-table-primary-color: var(--wt-table-primary-color);
	--wt-tree-table-zebra-color: var(--wt-table-zebra-color);
}
:root.theme--dark[data-v-7bb2b533] {
	--wt-tree-table-head-border-color: var(--wt-table-head-border-color);
}
[data-v-7bb2b533]:root {
	--content-wrapper-padding: var(--spacing-xs);
	--content-wrapper-gap: var(--spacing-xs);
}
.table-page.wt-page-wrapper[data-v-7bb2b533] {
	width: 100%;
	height: 100%;
}
.table-page .wt-page-wrapper__main[data-v-7bb2b533],

.wt-page-wrapper__main[data-v-7bb2b533]:has(.table-section) {
	min-height: 0;
}
.table-section[data-v-7bb2b533] {
	display: flex;
	flex-direction: column;
	width: 100%;
	flex: 1;
	min-height: 0;
}
.table-section__table-wrapper[data-v-7bb2b533] {
	display: flex;
	flex: 1 1 100%;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	min-height: 0;
	gap: var(--spacing-sm);
}
.table-section__table-wrapper .table-wrapper__visible-scroll-wrapper[data-v-7bb2b533] {
	flex-grow: 1;
}
.table-section__table-wrapper .wt-pagination[data-v-7bb2b533] {
	margin-top: auto;
}
.table-section__visible-scroll-wrapper[data-v-7bb2b533] {
	overflow: visible;
	height: 100%;
}
.table-section__visible-scroll-wrapper .wt-table[data-v-7bb2b533] {
	overflow: visible;
}
.table-title[data-v-7bb2b533] {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: var(--spacing-sm) 0;
}
.table-title__title[data-v-7bb2b533] {
	font-family: "Montserrat", monospace;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-transform: none;
}
.table-title__title + .hint[data-v-7bb2b533] {
	top: -2px;
}
.table-title__actions-wrap[data-v-7bb2b533] {
	display: flex;
	align-items: center;
	gap: var(--table-actions-icon-gap);
}
.main-section-wrapper .wt-loader.wt-brand-loader[data-v-7bb2b533] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 1;
}
.table-wrapper--tab-table[data-v-7bb2b533] {
	position: relative;
}
.table-wrapper--tab-table .wt-loader.wt-brand-loader[data-v-7bb2b533] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 1;
}
.table-wrapper--tab-table .table-loading-wrapper[data-v-7bb2b533] {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	min-height: 0;
}
.opened-card[data-v-7bb2b533] {
	width: 100%;
}
.opened-card.wt-page-wrapper[data-v-7bb2b533],
.opened-card.wt-dual-panel[data-v-7bb2b533] {
	width: 100%;
}
.opened-card-tabs[data-v-7bb2b533] {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: var(--spacing-sm);
}
.opened-card-tabs__tab[data-v-7bb2b533] {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: var(--spacing-sm);
	min-height: 0;
}
.opened-card-header[data-v-7bb2b533] {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin: var(--spacing-sm) 0;
}
.opened-card-header__title[data-v-7bb2b533] {
	font-family: "Montserrat", monospace;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-transform: none;
}
.opened-card-header__title + .hint[data-v-7bb2b533] {
	top: -2px;
}
.opened-card-form[data-v-7bb2b533] {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.opened-card-input-grid[data-v-7bb2b533] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: minmax(auto, auto);
	align-items: flex-start;
	grid-column-gap: var(--spacing-sm);
	grid-row-gap: var(--spacing-sm);
}
.opened-card-input-grid--1-col[data-v-7bb2b533] {
	grid-template-columns: 1fr;
}
.opened-card-input-grid--w50[data-v-7bb2b533] {
	width: 50%;
}
.opened-card-input-grid--w100[data-v-7bb2b533] {
	width: 100%;
}
/*
	@author HlukhovYe
	layer needed beacuse of manipulating primevue's default typography
	https://webitel.atlassian.net/browse/WTEL-8775?focusedCommentId=723773
*/
@layer wt-default {
[data-v-7bb2b533]:root {
    --transition: 0.2s;
    --box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    /* viewport breakpoints */
    --viewport-lg: 1904px;
    --viewport-md: 1264px;
    --viewport-sm: 960px;
    --viewport-xs: 600px;
}
html[data-v-7bb2b533] {
    height: 100%;
    font-size: 16px;
}
body[data-v-7bb2b533] {
    font-family: "Montserrat", monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-transform: none;
    margin: 0;
    height: 100%;
    min-height: 100%;
}
[data-v-7bb2b533] {
    box-sizing: border-box;
}
.theme--dark body[data-v-7bb2b533] {
    color-scheme: dark;
}
h1[data-v-7bb2b533],
  h2[data-v-7bb2b533],
  h3[data-v-7bb2b533],
  h4[data-v-7bb2b533],
  h5[data-v-7bb2b533],
  h6[data-v-7bb2b533],
  p[data-v-7bb2b533] {
    margin: 0;
    font-weight: normal;
}
  /* reset ul styles */
ul[data-v-7bb2b533] {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
iframe[data-v-7bb2b533] {
    outline: none;
    border: none;
}
a[data-v-7bb2b533] {
    color: #000;
    text-decoration: none;
}
.hidden[data-v-7bb2b533] {
    opacity: 0;
    pointer-events: none;
}
}
/*
	@author HlukhovYe
	reset input autofill styles https://webitel.atlassian.net/browse/WTEL-9005
*/
input[data-v-7bb2b533]:-webkit-autofill,
input[data-v-7bb2b533]:-webkit-autofill:hover,
input[data-v-7bb2b533]:-webkit-autofill:focus,
textarea[data-v-7bb2b533]:-webkit-autofill,
textarea[data-v-7bb2b533]:-webkit-autofill:hover,
textarea[data-v-7bb2b533]:-webkit-autofill:focus,
select[data-v-7bb2b533]:-webkit-autofill,
select[data-v-7bb2b533]:-webkit-autofill:hover,
select[data-v-7bb2b533]:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--p-inputtext-color);
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s; /* prevents an immediate color change */
}

/* https://github.com/Akryum/floating-vue/issues/488 */
.v-popper__arrow-container[data-v-7bb2b533] {
  display: none;
}
.side-panel[data-v-7bb2b533] {
  display: flex;
  position: fixed;
  top: calc(var(--flow-toolbar-height) + var(--flow-pages-height) + var(--spacing-xs));
  bottom: var(--spacing-xs);
  flex-direction: column;
  gap: var(--spacing-xs);
  box-sizing: border-box;
  box-shadow: var(--elevation-5);
  border-radius: var(--border-radius);
  background-color: var(--content-wrapper-color);
  padding: var(--spacing-xs);
  overflow: auto;
}
.service-panel[data-v-7bb2b533] {
  width: 288px;
  left: var(--spacing-xs);
  transition: height 0.5s ease;
}
.side-panel__tabs-wrapper[data-v-7bb2b533] {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.side-panel--collapsed[data-v-7bb2b533] {
  bottom: auto;
}
.side-panel--collapsed .side-panel__title-wrapper[data-v-7bb2b533] {
  margin: 0;
}
.side-panel--collapsed[data-v-7bb2b533] .service-wrapper {
  display: none;
}.the-workspace[data-v-77b7ca55] {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}
.the-workspace--has-loading[data-v-77b7ca55] {
  background: rgb(255, 255, 255) !important;
}
.header-wrapper[data-v-77b7ca55] {
  position: relative;
  z-index: 1;
}
.the-canvas[data-v-77b7ca55] {
  flex-grow: 1;
}
.v-enter-active[data-v-77b7ca55],
.v-leave-active[data-v-77b7ca55] {
  transition: opacity 1s ease;
}
.v-enter-from[data-v-77b7ca55],
.v-leave-to[data-v-77b7ca55] {
  opacity: 0;
}