/*!******************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/index/index.css ***!
  \******************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap);
/*!*********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/aiChat/ai_chat.css ***!
  \*********************************************************************************/
/* AI Chat Terminal Styling */

/* Events wrapper for animated border */
.ai-events-wrapper {
	position: relative;
	border-radius: 8px;
	overflow: hidden;

	/* Fixed height - wrapper does NOT scroll, only terminal content scrolls */
	height: 350px;

	/* Ensure wrapper itself doesn't grow or scroll */
	display: flex;
	flex-direction: column;
}

/* Bottom progress animation on wrapper (not terminal) so it doesn't scroll */

/* Animation is positioned at the bottom of the wrapper's viewport, not content */
.ai-events-wrapper.ai-processing::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(
		90deg,
		#667eea 0%,
		#764ba2 20%,
		#f093fb 40%,
		#4facfe 60%,
		#667eea 80%,
		#764ba2 100%
	);
	background-size: 300% 100%;
	border-radius: 0 0 8px 8px;
	animation: ai-progress-bottom 1.5s linear infinite;
	z-index: 10;
	box-shadow: 0 0 8px rgba(102, 126, 234, 0.6);
	pointer-events: none;

	/* Animation stays fixed at bottom of wrapper viewport */

	/* Wrapper has fixed height, so this stays in place */
}

.ai-events-wrapper.ai-processing::before {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 8px;
	height: 7px;
	background: #ffffff;
	border-radius: 50%;
	animation: ai-dot-bottom 1.5s ease-in-out infinite;
	z-index: 11;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
	pointer-events: none;
}

/* Agent Summary - Special Highlighting (works for all agent phases) */
.agent-summary,
.component-research-summary {
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
	border: 2px solid #55abd3;
	border-radius: 8px;
	padding: 12px;
	margin: 8px 0;
	box-shadow: 0 2px 8px rgba(14, 165, 233, 0.2);
}

.agent-summary-header,
.component-research-header {
	font-size: 13px;
	font-weight: 700;
	color: #0369a1;
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 2px solid #0ea5e9;
}

.agent-summary-field,
.component-research-field {
	font-size: 11px;
	color: #0c4a6e;
	margin: 6px 0;
	line-height: 1.5;
}

.agent-summary-field strong,
.component-research-field strong {
	color: #075985;
	font-weight: 600;
}

.agent-summary-section,
.component-research-section {
	font-size: 11px;
	color: #0c4a6e;
	margin: 8px 0;
	padding: 8px;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 4px;
	border-left: 3px solid #0ea5e9;
}

.agent-summary-section strong,
.component-research-section strong {
	color: #075985;
	font-weight: 600;
	display: block;
	margin-bottom: 6px;
}

.agent-summary-nested,
.component-research-nested {
	font-size: 10px;
	color: #164e63;
	margin: 4px 0;
	margin-left: 12px;
	line-height: 1.4;
}

/* Events container - styled like ai-chat-form with scroll */
.ai-events-terminal {
	background-color: #e9e9e9;
	color: #6b7280;
	font-family:
		system-ui,
		-apple-system,
		sans-serif;
	font-size: 11px;
	line-height: 1.4;
	padding: 12px;
	border: none;
	border-radius: 6px;
	overflow: hidden auto;
	white-space: pre-wrap;
	word-wrap: break-word;
	scroll-behavior: smooth;
	position: relative;
	z-index: 2;
	background-clip: padding-box;
	user-select: text;

	/* Fill wrapper using flex - wrapper has fixed height */
	flex: 1;
	min-height: 0;

	/* Ensure terminal scrolls independently of border */

	/* Content can grow and scroll, but wrapper stays fixed at 350px */
}

/* Bottom progress animation moved to wrapper level (see above) */

@keyframes ai-progress-bottom {
	0% {
		background-position: 0% 50%;
		box-shadow: 0 0 8px rgba(102, 126, 234, 0.6);
	}

	25% {
		box-shadow: 0 0 12px rgba(118, 75, 162, 0.8);
	}

	50% {
		box-shadow: 0 0 15px rgba(240, 147, 251, 0.9);
	}

	75% {
		box-shadow: 0 0 12px rgba(79, 172, 254, 0.8);
	}

	100% {
		background-position: 300% 50%;
		box-shadow: 0 0 8px rgba(102, 126, 234, 0.6);
	}
}

@keyframes ai-dot-bottom {
	0% {
		left: 0;
		transform: scale(1);
		opacity: 1;
	}

	25% {
		transform: scale(1.2);
		opacity: 0.8;
	}

	50% {
		left: 50%;
		transform: scale(1.5);
		opacity: 1;
	}

	75% {
		transform: scale(1.2);
		opacity: 0.8;
	}

	100% {
		left: calc(100% - 8px);
		transform: scale(1);
		opacity: 1;
	}
}

/* Send button - matching DRC refresh button style */
.ai-send-btn {
	width: auto;
	height: 40px;
	padding: 12px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
}

/* Cancel button - red */
.ai-cancel-btn {
	width: auto;
	height: 40px;
	padding: 12px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: all 0.3s ease;
}

/* Make cancel button more prominent when processing (not disabled) */
.ai-cancel-btn:not(:disabled) {
	background-color: #dc2626 !important;
	color: white !important;
	box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
	animation: cancel-pulse 2s ease-in-out infinite;
}

.ai-cancel-btn:not(:disabled):hover {
	background-color: #b91c1c !important;
	box-shadow: 0 6px 16px rgba(220, 38, 38, 0.6);
	transform: scale(1.05);
}

@keyframes cancel-pulse {
	0%,
	100% {
		box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
	}

	50% {
		box-shadow: 0 6px 20px rgba(220, 38, 38, 0.6);
	}
}

/* Animation for processing state - glass reflection effect */
.ai-processing {
	position: relative;
	overflow-x: hidden;

	/* Allow text selection even during processing */
	user-select: text;
}

.ai-processing::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	animation: glass-reflection 2s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}

@keyframes glass-reflection {
	0% {
		left: -100%;
	}

	50% {
		left: 100%;
	}

	100% {
		left: 100%;
	}
}

/* Glow Border Animation - Conic Gradient Rotating Border */
.ai-processing-border {
	height: 100%;
	width: 100%;
	position: absolute;
	overflow: hidden;
	z-index: 0;
	border-radius: 10px;
	top: 0;
	left: 0;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.3s ease;

	/* Border is fixed to wrapper viewport, terminal content scrolls independently */
}

.ai-processing-border::before {
	content: "";
	z-index: -2;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
	position: absolute;
	width: 99999px;
	height: 99999px;
	background-repeat: no-repeat;
	background-position: 0 0;

	/* border color - vibrant colors for white background */
	background-image: conic-gradient(
		rgb(255, 14, 14),
		#002fff,
		#25004c,
		#f093fb,
		#6c0080,
		rgba(0, 0, 0, 0) 30%
	);

	/* change speed here */
	animation: rotate 3s linear(-0.43 8.02%, 1.37 88.64%) infinite;
}

.ai-processing-border::after {
	content: "";
	position: absolute;
	z-index: -1;

	/* border width */
	left: 5px;
	top: 5px;

	/* double the px from the border width left */
	width: calc(100% - 10px);
	height: calc(100% - 10px);

	/* bg color */
	background: #ffffff;

	/* box border radius */
	border-radius: 7px;
}

.ai-processing-border.hidden {
	opacity: 0;
	pointer-events: none;
}

.ai-processing-border.hidden::before {
	animation-play-state: paused;
}

@keyframes rotate {
	100% {
		transform: translate(-50%, -50%) rotate(1turn);
	}
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
	.ai-processing-border::before {
		animation: none;
		opacity: 0.5;
	}
}

/* Make text selectable - always enabled */

/* Less specific selectors first */
.ai-events-terminal,
.ai-events-terminal * {
	user-select: text;
}

/* More specific selectors after */
#ai-events-container,
#ai-events-container * {
	user-select: text;
}

/* Enable text selection in activity container */
.ai-chat-activity-container {
	user-select: text;
}

/* Enable text selection in form and make it taller */
#ai-chat-form {
	user-select: text;
	min-height: 120px;
}

#ai-chat-form textarea {
	user-select: text;
}

/* Terminal empty state */
.terminal-empty {
	color: #9ca3af;
	font-family:
		system-ui,
		-apple-system,
		sans-serif;
	font-size: 11px;
	padding: 8px;
	position: relative;
	z-index: 2;
}

/* Terminal line */
.terminal-line {
	color: #6b7280;
	font-family:
		system-ui,
		-apple-system,
		sans-serif;
	font-size: 11px;
	line-height: 1.4;
	padding: 2px 0;
	white-space: pre-wrap;
	word-wrap: break-word;
	position: relative;
	z-index: 2;
}

/* Legacy event styles (kept for compatibility) */
.event {
	margin-bottom: 10px;
	padding: 10px;
	border-left: 4px solid #007bff;
	background: white;
	border-radius: 4px;
}

.event.thought {
	border-left-color: #17a2b8;
}

.event.action {
	border-left-color: #ffc107;
}

.event.observation {
	border-left-color: #28a745;
}

.event.complete {
	border-left-color: #28a745;
	font-weight: bold;
}

.event.error {
	border-left-color: #dc3545;
	background-color: #f8d7da;
}

/* Canvas animation during AI agent processing */
#drawn-layer.ai-processing-active {
	pointer-events: none !important;
	user-select: none !important;
	cursor: wait !important;
}

#drawn-layer.ai-processing-active > *[data-type] {
	animation: ai-processing-shine 3s ease-in-out infinite;
}

@keyframes ai-processing-shine {
	0% {
		filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
		stroke-width: 0.5;
		stroke: rgba(100, 150, 255, 0.3);
		opacity: 1;
	}

	25% {
		filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5))
			drop-shadow(2px 2px 4px rgba(100, 150, 255, 0.4));
		stroke-width: 0.8;
		stroke: rgba(100, 150, 255, 0.5);
		opacity: 1;
	}

	50% {
		filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7))
			drop-shadow(4px 4px 6px rgba(100, 150, 255, 0.5));
		stroke-width: 1;
		stroke: rgba(100, 150, 255, 0.6);
		opacity: 1;
	}

	75% {
		filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5))
			drop-shadow(2px 2px 4px rgba(100, 150, 255, 0.4));
		stroke-width: 0.8;
		stroke: rgba(100, 150, 255, 0.5);
		opacity: 1;
	}

	100% {
		filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
		stroke-width: 0.5;
		stroke: rgba(100, 150, 255, 0.3);
		opacity: 1;
	}
}

/*!***************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/layouts/drawing_size.css ***!
  \***************************************************************************************/
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
}

.popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fffdfd;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	padding: 20px;
	z-index: 1000;
	width: 300px;
}

.drawing-size-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 15px;
}

.custom-drawing-text-box {
	width: 95%;
	height: 25px;
}

.drawing-size-button {
	display: flex;
	justify-content: center;
	gap: 20px;
	padding: 10px;
}

.custom-button {
	width: 110px;
}

.drawing-size-container {
	display: flex;
	align-items: center;
}

.drawing-size-label {
	color: #000000;
	font-size: smaller;
	font-weight: bolder;
}

/*!*******************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/newDocument/new_document.css ***!
  \*******************************************************************************************/
.new-document-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.new-document-item {
	display: flex;
	flex-direction: column;
}

.new-document-label {
	color: black;
	font-weight: bolder;
	font-size: smaller;
	margin-bottom: 10px;
}

.cust-text-box {
	width: 98%;
	height: 25px;
}

.new-document-button {
	display: flex;
	justify-content: center;
	padding: 10px;
	margin-top: -15px;
}

/*!*********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/openDocument/open_document.css ***!
  \*********************************************************************************************/
.open-sheet-popup {
	width: 1000px;

	/* height: 600px; */
}

.no-data {
	text-align: center;
	font-size: 16px;
	color: #666666;
	position: absolute;
	left: 435px;
}

.search-input {
	border-radius: 14px;
	width: 230px;
}

.search-bar {
	display: flex;
	justify-content: center;
	height: 27px;
	gap: 10px;
	margin: 10px;
}

.open-document-content {
	border: none;
	display: grid;
	gap: 16px;

	/* grid-template-columns: repeat(4, 1fr); */
	height: 55vh;
	overflow-y: auto;
	padding: 7px;
	scroll-behavior: smooth;
}

.custom-open-dialog {
	padding: 0;
}

.open-document-content::-webkit-scrollbar {
	width: 8px;
}

.open-document-content::-webkit-scrollbar-track {
	background: #f5f5f5;
	border-radius: 4px;
}

.open-document-content::-webkit-scrollbar-thumb {
	background-color: #888888;
	border-radius: 4px;
	border: 2px solid #f5f5f5;
}

.open-document-content::-webkit-scrollbar-thumb:hover {
	background-color: #555555;
}

.open-doc-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(312px, 1fr));
	margin: 0 auto;
	width: fit-content;
	height: fit-content;
	max-width: 1000px;
}

.open-doc-card {
	border-radius: 6px;
	box-shadow: 7px 3px 4px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	transition: transform 0.2s ease-in-out;
}

.open-doc-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	cursor: pointer;
}

.open-doc-header {
	padding: 12px;
	border-bottom: 1px solid #eeeeee;
	background: linear-gradient(1deg, #8091e742, #d174cb2f, #f5efef);
}

.open-doc-title {
	margin: 0;
	color: #333333;
	font-size: 16px;
	font-weight: 600;
}

.open-doc-part-number {
	margin: 3px 0 0;
	color: #666666;
	font-size: 13px;
}

.open-doc-image-container {
	width: 100%;
	height: 160px;
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f8f9fa;
}

.open-doc-image {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.open-doc-footer {
	background: #fafad2;
	border-top: 1px solid #eeeeee;
	color: #444242;
	display: flex;
	font-size: 10px;
	justify-content: space-between;
	padding: 8px;
}

.open-doc-date-label {
	font-size: 10px;
	font-weight: 700;
}

/*!*********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/propertyFile/property_file.css ***!
  \*********************************************************************************************/
.dialog-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
}

.info-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.info-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.info-label {
	color: #666666;
	font-size: 13px;
	font-weight: 500;
}

.info-value {
	color: #1a1a1a;
	font-size: 14px;
	font-weight: 500;
	padding: 4px 0;
}

.modified-time-container {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.time-since {
	color: #999999;
	font-size: 12px;
	font-weight: 400;
	font-style: italic;
}

.stats-container {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid #eeeeee;
	grid-column: span 2;
}

.stats-header {
	color: #1a1a1a;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 16px;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	background: #f8f9fa;
	padding: 16px;
	border-radius: 8px;
}

.stats-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: white;
	padding: 12px 16px;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.stats-label {
	color: #666666;
	font-size: 13px;
	font-weight: 500;
}

.stats-value {
	color: #1a1a1a;
	font-size: 14px;
	font-weight: 600;
}

/*!***************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/propertyManager/property_manager.css ***!
  \***************************************************************************************************/
.property-panel-wrapper {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border-radius: 1rem;
}

.property-panel-sections-container {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.property-panel-wrapper:has(.property-panel-section-content.hidden:last-child) {
	padding-bottom: 0.5rem;
	width: 100%;
}

.property-panel-section:has(.property-panel-section-content.hidden:last-child)
	.property-panel-header {
	padding-bottom: 0.5rem;
	width: 100%;
}

.property-panel-section {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1rem;
}

.property-panel-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: rgba(241, 245, 248, 1);

	/* your new color */
	padding-left: 0.5rem;
	color: #2c2c34 !important;
}

.property-panel-section-header:hover {
	background-color: rgba(82, 72, 199, 0.07);
	color: #2c2c34 !important;
}

.property-panel-section-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: #2c2c34;
	line-height: 2.25rem;
}

.property-panel-section-header:hover .property-panel-section-title {
	color: #2c2c34 !important;
}

.property-panel-section-title .property-panel-section-subtitle {
	font-weight: 400 !important;
	font-size: 0.875rem;
	color: #2c2c34;
	position: relative;
	left: -6px;
}

.path-arrow-icon {
	width: 14px;
	display: inline;
	height: 14px;
	margin: 0 2px;
	vertical-align: middle;
}

.property-panel-collapse-btn {
	padding: 0.5rem;
	border-radius: 0.25rem;
	background: transparent;
	cursor: pointer;
}

.property-panel-collapse-btn:hover {
	background: #e5e7eb;
}

.property-panel-section-content {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-left: 0.5rem;
	padding-bottom: 1rem;
}

.property-panel-section-content.hidden {
	display: none !important;
}

.property-panel-row {
	display: flex;
	align-items: baseline;
	gap: 0.375rem;
	position: relative;
	padding-bottom: 0.5rem;
}

.property-panel-label {
	width: 10rem;
	font-size: 0.875rem;
	color: rgba(91, 91, 91, 1);
	font-weight: 400;
}

.property-panel-input-wrapper {
	position: relative;
	overflow: visible !important;
	flex: 1;
}

.property-panel-input-text-box {
	height: 32px;
	width: 185px;
	font-size: 14px;
	padding: 3px;
	border-radius: 12px;
	color: var(--typography-text-dark-primary-body);
	background: var(--table-header-bg);
	border: 1px solid var(--table-border);
}

.property-panel-input-text-box,
.property-panel-input-text-box input {
	padding: 6px !important;
}

.property-panel-input-text-box::placeholder {
	color: var(--breadcrumb-text-breadcrumb-txt-inactive);
}

.property-panel-input-text-box:hover {
	border: 1px solid var(--breadcrumb-text-breadcrumb-txt-inactive);
}

.property-panel-input-text-box:active {
	border: 1px solid var(--table-border);

	/* keep consistent */
}

.property-panel-input-text-box:focus {
	outline: none !important;
	border-color: #64b5f6;
	box-shadow: none;
}

.property-section-header {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.property-section-header svg {
	margin: 0;
}

.property-panel-input-text-box:disabled {
	color: var(--typography-text-dark-primary-body);
	background: var(--table-header-bg);
	border: 1px solid var(--table-border);
}

.property-panel-input-text-box-read-only {
	color: var(--typography-text-dark-primary-body);
	background: var(--table-header-bg);
	border: 1px solid var(--table-border);
}

.property-panel-input-text-box.error {
	border: 1px solid var(--input-box-error-state-border);
}

.property-panel-input-text-box.warning {
	border: 1px solid var(--input-box-warning-state-border);
}

.property-panel-unit {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.875rem;
	color: #6b7280;
}

.property-panel-icon-btn {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	padding: 0.25rem;
	border-radius: 0.25rem;
	cursor: pointer;
	background: transparent;
}

.property-panel-icon-btn.hidden {
	display: none !important;
	visibility: hidden;
	opacity: 0;
}

.property-panel-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 0.25rem;
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	max-height: 180px;
	overflow-y: auto;
	z-index: 10;
}

.property-panel-dropdown-arrow {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: auto;
	cursor: pointer;
}

.property-panel-path-display {
	flex: 1;
	padding: 0.5rem;
	border-radius: 0.5rem 0;
	font-size: 0.875rem;
	color: #111827;
	margin: 0;
}

.property-input-label {
	padding-bottom: 0 !important;
}

.property-panel-core-type {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 3px 8px;
	height: 30px;
	width: 185px;
	font-size: 14px;
	border-radius: 8px;
	color: var(--typography-text-dark-primary-body);
	background: var(--table-header-bg);
	border: 1px solid var(--table-border);
	cursor: pointer;
}

.property-panel-core-type:hover {
	border-color: var(--breadcrumb-text-breadcrumb-txt-inactive);
}

.property-panel-core-type:focus-within {
	box-shadow: 0 0 0 4px var(--input-box-focus-border);
}

.property-panel-core-type-text {
	font-size: 0.875rem;
	color: #111827;
}

.dropdown-search {
	padding: 0.5rem;
	border-bottom: 1px solid #e5e7eb;
}

.dropdown-search input {
	width: 100%;
	padding: 0.5rem;
	font-size: 0.875rem;
	border-radius: 0.375rem;
	border: 1px solid #d1d5db;
	outline: none;
}

.dropdown-search input:focus {
	border-color: #6559f1;
	box-shadow: 0 0 0 2px rgba(101, 89, 241, 0.2);
}

.dropdown-option {
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	color: #374151;
	cursor: pointer;
}

.dropdown-option:hover {
	background: #f3f4f6;
}

.dropdown-empty {
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	color: #9ca3af;
}

.property-panel-card-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 8px 0;
}

.property-panel-card {
	display: flex;
	align-items: center;
	background: #ffffff;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.05);
	padding: 12px;
	gap: 12px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.property-panel-card-left {
	flex: 0 0 84px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.symbol {
	width: 56px;
	height: 56px;
}

.symbol-missing {
	font-size: 10px;
	color: #777777;
}

.property-panel-card-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.partnumber {
	font-size: 14px;
	font-weight: 400;
	color: rgba(82, 72, 199, 1);
}

.chips {
	display: flex;
	gap: 8px;
	margin-top: 2px;
}

.chip {
	background: rgba(82, 72, 199, 0.07);
	border-radius: 4px;
	padding: 4px 8px;
	font-size: 12px;
	color: rgba(91, 91, 91, 1);
}

.desc {
	color: #4a4a4a;
	font-size: 13px;
	line-height: 1.3;
}

.property-panel-no-data {
	text-align: center;
	width: 100%;
	padding: 8px;
	color: rgba(91, 91, 91, 1);
	font-size: 0.875rem;
}

.symbol-wrapper img {
	display: none;
	width: 100%;
	height: auto;
}

.symbol-wrapper img.active {
	display: block;
}

.symbol-wrapper {
	background: rgba(82, 72, 199, 0.07);
	border-radius: 10px;
	padding: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: visible;
	width: 84px;
	height: 84px;
}

.switch-arrows.switch-arrows-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 4px;
	visibility: hidden;
	opacity: 0;
	transition:
		visibility 0s,
		opacity 0.3s linear;
	pointer-events: none;
	left: -5px;
	right: -5px;
}

.symbol-wrapper:hover .switch-arrows.switch-arrows-overlay {
	visibility: visible;
	opacity: 1;
}

.arrow-btn {
	z-index: 10;
	width: 16px;
	height: 16px;
	cursor: pointer;
	pointer-events: auto;
}

.arrow-left {
	margin-left: -10px;
}

.arrow-right {
	margin-right: -10px;
}

.arrow-index {
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 10px;
	color: #4a4a4a;
	pointer-events: none;
}

.switch-arrows {
	display: none;
}

.switch-arrows-overlay img.arrow-btn {
	display: block;
	z-index: 100;
	width: 24px;
	height: 24px;
	cursor: pointer;
	pointer-events: auto;
}

.property-panel-column {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.property-panel-path-time {
	flex: 1;
	padding: 0.5rem;
	border-radius: 0.5rem 0;
	font-size: 0.875rem;
	color: #87878d;
}

/* Base: enable scrolling */
.property-panel-scrollbar {
	overflow-y: auto;
	scrollbar-width: none; /* thin indicator */
	border-radius: 10px;
}

/* For Chrome, Edge, Safari */
.property-panel-scrollbar::-webkit-scrollbar {
	display: none;
}

.property-panel-scrollbar:hover {
	scrollbar-width: thin; /* Firefox */
	scrollbar-color: #d3d5d9 transparent;
}

.property-panel-scrollbar:active {
	scrollbar-color: #96989b transparent;
}

.property-panel-scrollbar:hover::-webkit-scrollbar {
	display: block;
	width: 6px;
}

.property-panel-scrollbar::-webkit-scrollbar-thumb {
	background: linear-gradient(to bottom, #d3d5d9, #8c8c8c);
	border-radius: 10px;
}

/* Hover style (optional) */
.property-panel-scrollbar::-webkit-scrollbar-thumb:hover {
	background: #8c8c8c;
}

/* Hide up/down arrow buttons */
.property-panel-scrollbar::-webkit-scrollbar-button {
	display: none;
	width: 0;
	height: 0;
}

.partnumber-wrapper {
	display: flex;
	align-items: center;
	gap: 4px;
}

.partnumber-display {
	color: rgba(82, 72, 199, 1);
}

.property-panel-scrollbar:hover::-webkit-scrollbar-thumb:hover {
	background: #8c8c8c;
}

#wire-partnumber-suggestions .pn {
	color: #2c2c34;
}

#wire-partnumber-suggestions .csa {
	color: #999999;
}

#wire-partnumber-suggestions .color {
	color: #999999;
}

#wire-partnumber-suggestions {
	white-space: nowrap !important;
	overflow: visible auto !important;
	min-width: 260px;
	position: absolute !important;
	z-index: 99999 !important;
}

#wire-partnumber-suggestions > div {
	white-space: nowrap !important;
	display: flex;
	align-items: center;
	gap: 6px;
}

/*!********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/client/styles/styles.css ***!
  \********************************************************************************/
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-300: oklch(80.8% 0.114 19.571);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-800: oklch(44.4% 0.177 26.899);
    --color-red-900: oklch(39.6% 0.141 25.723);
    --color-orange-500: oklch(70.5% 0.213 47.604);
    --color-amber-50: oklch(98.7% 0.022 95.277);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-yellow-100: oklch(97.3% 0.071 103.193);
    --color-yellow-300: oklch(90.5% 0.182 98.111);
    --color-yellow-400: oklch(85.2% 0.199 91.936);
    --color-yellow-900: oklch(42.1% 0.095 57.708);
    --color-green-50: oklch(98.2% 0.018 155.826);
    --color-green-300: oklch(87.1% 0.15 154.449);
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --color-green-800: oklch(44.8% 0.119 151.328);
    --color-green-900: oklch(39.3% 0.095 152.535);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-blue-50: oklch(97% 0.014 254.604);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-200: oklch(88.2% 0.059 254.128);
    --color-blue-400: oklch(70.7% 0.165 254.624);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-900: oklch(37.9% 0.146 265.522);
    --color-indigo-50: oklch(96.2% 0.018 272.314);
    --color-indigo-100: oklch(93% 0.034 272.788);
    --color-indigo-500: oklch(58.5% 0.233 277.117);
    --color-indigo-600: oklch(51.1% 0.262 276.966);
    --color-indigo-700: oklch(45.7% 0.24 277.023);
    --color-purple-500: oklch(62.7% 0.265 303.9);
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-gray-950: oklch(13% 0.028 261.692);
    --color-zinc-300: oklch(87.1% 0.006 286.286);
    --color-zinc-700: oklch(37% 0.013 285.805);
    --color-zinc-800: oklch(27.4% 0.006 286.033);
    --color-neutral-800: oklch(26.9% 0 0);
    --color-stone-300: oklch(86.9% 0.005 56.366);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-wide: 0.025em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }
  .-top-2 {
    top: calc(var(--spacing) * -2);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-0\.5 {
    top: calc(var(--spacing) * 0.5);
  }
  .top-1\.75 {
    top: calc(var(--spacing) * 1.75);
  }
  .top-1\/2 {
    top: calc(1/2 * 100%);
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .top-9 {
    top: calc(var(--spacing) * 9);
  }
  .top-12 {
    top: calc(var(--spacing) * 12);
  }
  .top-16 {
    top: calc(var(--spacing) * 16);
  }
  .top-\[3px\] {
    top: 3px;
  }
  .top-\[8px\] {
    top: 8px;
  }
  .top-\[29\.33px\] {
    top: 29.33px;
  }
  .top-\[40px\] {
    top: 40px;
  }
  .top-\[50px\] {
    top: 50px;
  }
  .top-\[65\%\] {
    top: 65%;
  }
  .top-\[calc\(var\(--header-height\)\)\] {
    top: calc(var(--header-height));
  }
  .top-\[calc\(var\(--header-height\)\+8px\)\] {
    top: calc(var(--header-height) + 8px);
  }
  .top-\[calc\(var\(--header-height\)\+40px\)\] {
    top: calc(var(--header-height) + 40px);
  }
  .top-full {
    top: 100%;
  }
  .-right-2 {
    right: calc(var(--spacing) * -2);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-0\.5 {
    right: calc(var(--spacing) * 0.5);
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-3 {
    right: calc(var(--spacing) * 3);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .right-6 {
    right: calc(var(--spacing) * 6);
  }
  .right-19 {
    right: calc(var(--spacing) * 19);
  }
  .right-\[-8px\] {
    right: -8px;
  }
  .right-\[51px\] {
    right: 51px;
  }
  .-bottom-1 {
    bottom: calc(var(--spacing) * -1);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }
  .bottom-\[-4px\] {
    bottom: -4px;
  }
  .-left-1 {
    left: calc(var(--spacing) * -1);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-8 {
    left: calc(var(--spacing) * 8);
  }
  .left-\[-8px\] {
    left: -8px;
  }
  .left-\[8px\] {
    left: 8px;
  }
  .left-\[29\.33px\] {
    left: 29.33px;
  }
  .left-\[58px\] {
    left: 58px;
  }
  .left-\[60px\] {
    left: 60px;
  }
  .left-\[95px\] {
    left: 95px;
  }
  .z-0 {
    z-index: 0;
  }
  .z-1 {
    z-index: 1;
  }
  .z-9 {
    z-index: 9;
  }
  .z-10 {
    z-index: 10;
  }
  .z-15 {
    z-index: 15;
  }
  .z-20 {
    z-index: 20;
  }
  .z-30 {
    z-index: 30;
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .z-100 {
    z-index: 100;
  }
  .z-\[10\] {
    z-index: 10;
  }
  .z-\[1001\] {
    z-index: 1001;
  }
  .z-\[9999\] {
    z-index: 9999;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .m-0 {
    margin: calc(var(--spacing) * 0);
  }
  .m-1 {
    margin: calc(var(--spacing) * 1);
  }
  .m-2 {
    margin: calc(var(--spacing) * 2);
  }
  .m-4 {
    margin: calc(var(--spacing) * 4);
  }
  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }
  .mx-5 {
    margin-inline: calc(var(--spacing) * 5);
  }
  .mx-\[4px\] {
    margin-inline: 4px;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }
  .my-1\.5 {
    margin-block: calc(var(--spacing) * 1.5);
  }
  .my-3 {
    margin-block: calc(var(--spacing) * 3);
  }
  .my-5 {
    margin-block: calc(var(--spacing) * 5);
  }
  .my-8 {
    margin-block: calc(var(--spacing) * 8);
  }
  .my-auto {
    margin-block: auto;
  }
  .mt-0 {
    margin-top: calc(var(--spacing) * 0);
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-\[50px\] {
    margin-top: 50px;
  }
  .mr-0 {
    margin-right: calc(var(--spacing) * 0);
  }
  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }
  .mr-\[3px\] {
    margin-right: 3px;
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }
  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }
  .ml-5 {
    margin-left: calc(var(--spacing) * 5);
  }
  .ml-16 {
    margin-left: calc(var(--spacing) * 16);
  }
  .ml-64 {
    margin-left: calc(var(--spacing) * 64);
  }
  .ml-auto {
    margin-left: auto;
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }
  .h-0 {
    height: calc(var(--spacing) * 0);
  }
  .h-1 {
    height: calc(var(--spacing) * 1);
  }
  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-7 {
    height: calc(var(--spacing) * 7);
  }
  .h-7\.5 {
    height: calc(var(--spacing) * 7.5);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-10\.5 {
    height: calc(var(--spacing) * 10.5);
  }
  .h-11 {
    height: calc(var(--spacing) * 11);
  }
  .h-11\.5 {
    height: calc(var(--spacing) * 11.5);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-20 {
    height: calc(var(--spacing) * 20);
  }
  .h-24 {
    height: calc(var(--spacing) * 24);
  }
  .h-64 {
    height: calc(var(--spacing) * 64);
  }
  .h-81 {
    height: calc(var(--spacing) * 81);
  }
  .h-100 {
    height: calc(var(--spacing) * 100);
  }
  .h-\[1px\] {
    height: 1px;
  }
  .h-\[2px\] {
    height: 2px;
  }
  .h-\[5px\] {
    height: 5px;
  }
  .h-\[16px\] {
    height: 16px;
  }
  .h-\[22px\] {
    height: 22px;
  }
  .h-\[25px\] {
    height: 25px;
  }
  .h-\[30px\] {
    height: 30px;
  }
  .h-\[40px\] {
    height: 40px;
  }
  .h-\[42px\] {
    height: 42px;
  }
  .h-\[72px\] {
    height: 72px;
  }
  .h-\[80\%\] {
    height: 80%;
  }
  .h-\[82px\] {
    height: 82px;
  }
  .h-\[90\%\] {
    height: 90%;
  }
  .h-\[97\%\] {
    height: 97%;
  }
  .h-\[152px\] {
    height: 152px;
  }
  .h-\[calc\(100vh-98px\)\] {
    height: calc(100vh - 98px);
  }
  .h-\[calc\(100vh-340px\)\] {
    height: calc(100vh - 340px);
  }
  .h-fit {
    height: fit-content;
  }
  .h-full {
    height: 100%;
  }
  .h-px {
    height: 1px;
  }
  .h-screen {
    height: 100vh;
  }
  .max-h-0 {
    max-height: calc(var(--spacing) * 0);
  }
  .max-h-4\/6 {
    max-height: calc(4/6 * 100%);
  }
  .max-h-5\/6 {
    max-height: calc(5/6 * 100%);
  }
  .max-h-50 {
    max-height: calc(var(--spacing) * 50);
  }
  .max-h-60 {
    max-height: calc(var(--spacing) * 60);
  }
  .max-h-96 {
    max-height: calc(var(--spacing) * 96);
  }
  .max-h-100 {
    max-height: calc(var(--spacing) * 100);
  }
  .max-h-\[20vh\] {
    max-height: 20vh;
  }
  .max-h-\[70vh\] {
    max-height: 70vh;
  }
  .max-h-\[90vh\] {
    max-height: 90vh;
  }
  .max-h-\[300px\] {
    max-height: 300px;
  }
  .max-h-\[550px\] {
    max-height: 550px;
  }
  .max-h-\[calc\(100vh-160px\)\] {
    max-height: calc(100vh - 160px);
  }
  .max-h-\[calc\(100vh-190px\)\] {
    max-height: calc(100vh - 190px);
  }
  .max-h-\[calc\(100vh-252px\)\] {
    max-height: calc(100vh - 252px);
  }
  .max-h-\[calc\(100vh-255px\)\] {
    max-height: calc(100vh - 255px);
  }
  .max-h-\[calc\(100vh-335px\)\] {
    max-height: calc(100vh - 335px);
  }
  .min-h-3 {
    min-height: calc(var(--spacing) * 3);
  }
  .min-h-5 {
    min-height: calc(var(--spacing) * 5);
  }
  .min-h-55 {
    min-height: calc(var(--spacing) * 55);
  }
  .min-h-\[10px\] {
    min-height: 10px;
  }
  .min-h-\[32px\] {
    min-height: 32px;
  }
  .min-h-\[80px\] {
    min-height: 80px;
  }
  .min-h-\[550px\] {
    min-height: 550px;
  }
  .min-h-full {
    min-height: 100%;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-0 {
    width: calc(var(--spacing) * 0);
  }
  .w-1 {
    width: calc(var(--spacing) * 1);
  }
  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }
  .w-2 {
    width: calc(var(--spacing) * 2);
  }
  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-11 {
    width: calc(var(--spacing) * 11);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-25 {
    width: calc(var(--spacing) * 25);
  }
  .w-28 {
    width: calc(var(--spacing) * 28);
  }
  .w-32 {
    width: calc(var(--spacing) * 32);
  }
  .w-34 {
    width: calc(var(--spacing) * 34);
  }
  .w-36 {
    width: calc(var(--spacing) * 36);
  }
  .w-40 {
    width: calc(var(--spacing) * 40);
  }
  .w-45 {
    width: calc(var(--spacing) * 45);
  }
  .w-48 {
    width: calc(var(--spacing) * 48);
  }
  .w-50 {
    width: calc(var(--spacing) * 50);
  }
  .w-52 {
    width: calc(var(--spacing) * 52);
  }
  .w-56 {
    width: calc(var(--spacing) * 56);
  }
  .w-64 {
    width: calc(var(--spacing) * 64);
  }
  .w-68 {
    width: calc(var(--spacing) * 68);
  }
  .w-69 {
    width: calc(var(--spacing) * 69);
  }
  .w-70 {
    width: calc(var(--spacing) * 70);
  }
  .w-72 {
    width: calc(var(--spacing) * 72);
  }
  .w-75 {
    width: calc(var(--spacing) * 75);
  }
  .w-80 {
    width: calc(var(--spacing) * 80);
  }
  .w-96 {
    width: calc(var(--spacing) * 96);
  }
  .w-100 {
    width: calc(var(--spacing) * 100);
  }
  .w-112 {
    width: calc(var(--spacing) * 112);
  }
  .w-125 {
    width: calc(var(--spacing) * 125);
  }
  .w-167 {
    width: calc(var(--spacing) * 167);
  }
  .w-188 {
    width: calc(var(--spacing) * 188);
  }
  .w-200 {
    width: calc(var(--spacing) * 200);
  }
  .w-250 {
    width: calc(var(--spacing) * 250);
  }
  .w-\[7px\] {
    width: 7px;
  }
  .w-\[8px\] {
    width: 8px;
  }
  .w-\[10\%\] {
    width: 10%;
  }
  .w-\[12\%\] {
    width: 12%;
  }
  .w-\[25px\] {
    width: 25px;
  }
  .w-\[30px\] {
    width: 30px;
  }
  .w-\[35\%\] {
    width: 35%;
  }
  .w-\[38px\] {
    width: 38px;
  }
  .w-\[65\%\] {
    width: 65%;
  }
  .w-\[85\%\] {
    width: 85%;
  }
  .w-\[92px\] {
    width: 92px;
  }
  .w-\[94\.5\%\] {
    width: 94.5%;
  }
  .w-\[167px\] {
    width: 167px;
  }
  .w-\[180px\] {
    width: 180px;
  }
  .w-\[320px\] {
    width: 320px;
  }
  .w-\[340px\] {
    width: 340px;
  }
  .w-\[496px\] {
    width: 496px;
  }
  .w-\[590px\] {
    width: 590px;
  }
  .w-\[620px\] {
    width: 620px;
  }
  .w-\[calc\(100vw-250px\)\] {
    width: calc(100vw - 250px);
  }
  .w-auto {
    width: auto;
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .w-px {
    width: 1px;
  }
  .w-screen {
    width: 100vw;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-5xl {
    max-width: var(--container-5xl);
  }
  .max-w-115 {
    max-width: calc(var(--spacing) * 115);
  }
  .max-w-\[55rem\] {
    max-width: 55rem;
  }
  .max-w-\[100px\] {
    max-width: 100px;
  }
  .max-w-\[275px\] {
    max-width: 275px;
  }
  .max-w-\[310px\] {
    max-width: 310px;
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .min-w-\[110px\] {
    min-width: 110px;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .table-fixed {
    table-layout: fixed;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .origin-top-left {
    transform-origin: top left;
  }
  .origin-top-right {
    transform-origin: top right;
  }
  .-translate-x-5 {
    --tw-translate-x: calc(var(--spacing) * -5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-0 {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-3 {
    --tw-translate-x: calc(var(--spacing) * 3);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-\[340px\] {
    --tw-translate-x: 340px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-\[50\%\] {
    --tw-translate-y: calc(50% * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-90 {
    --tw-scale-x: 90%;
    --tw-scale-y: 90%;
    --tw-scale-z: 90%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-95 {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .-rotate-180 {
    rotate: calc(180deg * -1);
  }
  .rotate-0 {
    rotate: 0deg;
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .rotate-270 {
    rotate: 270deg;
  }
  .rotate-360 {
    rotate: 360deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-pulse {
    animation: var(--animate-pulse);
  }
  .animate-spin {
    animation: var(--animate-spin);
  }
  .cursor-col-resize {
    cursor: col-resize;
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .resize-none {
    resize: none;
  }
  .appearance-none {
    appearance: none;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-\[1fr_auto_1fr\] {
    grid-template-columns: 1fr auto 1fr;
  }
  .grid-cols-\[2fr_1\.5fr_1fr_40px\] {
    grid-template-columns: 2fr 1.5fr 1fr 40px;
  }
  .grid-cols-\[repeat\(auto-fill\,minmax\(60px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fill,minmax(60px,1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .content-center {
    align-content: center;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-evenly {
    justify-content: space-evenly;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .justify-items-start {
    justify-items: start;
  }
  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }
  .gap-0\.5 {
    gap: calc(var(--spacing) * 0.5);
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-7 {
    gap: calc(var(--spacing) * 7);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }
  .gap-14 {
    gap: calc(var(--spacing) * 14);
  }
  .gap-16 {
    gap: calc(var(--spacing) * 16);
  }
  .gap-25 {
    gap: calc(var(--spacing) * 25);
  }
  .gap-\[5px\] {
    gap: 5px;
  }
  .gap-\[58px\] {
    gap: 58px;
  }
  .space-y-1 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .gap-x-8 {
    column-gap: calc(var(--spacing) * 8);
  }
  .space-x-1 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-2 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-3 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .gap-y-6 {
    row-gap: calc(var(--spacing) * 6);
  }
  .self-start {
    align-self: flex-start;
  }
  .self-stretch {
    align-self: stretch;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-scroll {
    overflow: scroll;
  }
  .overflow-visible {
    overflow: visible;
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .overflow-y-scroll {
    overflow-y: scroll;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-\[4px\] {
    border-radius: 4px;
  }
  .rounded-\[8px\] {
    border-radius: 8px;
  }
  .rounded-\[12px\] {
    border-radius: 12px;
  }
  .rounded-\[29\.23px\] {
    border-radius: 29.23px;
  }
  .rounded-\[30px\] {
    border-radius: 30px;
  }
  .rounded-\[34px\] {
    border-radius: 34px;
  }
  .rounded-\[240px\] {
    border-radius: 240px;
  }
  .rounded-\[var\(--button-radius-btn-radius-sm\,12px\)\] {
    border-radius: var(--button-radius-btn-radius-sm,12px);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .rounded-xs {
    border-radius: var(--radius-xs);
  }
  .rounded-t-lg {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
  }
  .rounded-t-xl {
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
  }
  .rounded-l {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
  }
  .rounded-l-\[12px\] {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
  }
  .rounded-l-lg {
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
  }
  .rounded-tl-2xl {
    border-top-left-radius: var(--radius-2xl);
  }
  .rounded-r-\[12px\] {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  .rounded-r-lg {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
  }
  .rounded-r-xl {
    border-top-right-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
  }
  .rounded-tr-2xl {
    border-top-right-radius: var(--radius-2xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }
  .border-\[0\] {
    border-style: var(--tw-border-style);
    border-width: 0;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }
  .border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-none {
    --tw-border-style: none;
    border-style: none;
  }
  .border-solid {
    --tw-border-style: solid;
    border-style: solid;
  }
  .border-\[\#202028\] {
    border-color: #202028;
  }
  .border-\[\#575757\] {
    border-color: #575757;
  }
  .border-\[\#B2B2B2\] {
    border-color: #B2B2B2;
  }
  .border-\[\#D3D5D9\] {
    border-color: #D3D5D9;
  }
  .border-\[\#DDDFE3\] {
    border-color: #DDDFE3;
  }
  .border-\[rgba\(211\,213\,217\,0\.5\)\] {
    border-color: rgba(211,213,217,0.5);
  }
  .border-\[var\(--button-states-low-outline-btn-outline\,\#D3D5D9\)\] {
    border-color: var(--button-states-low-outline-btn-outline,#D3D5D9);
  }
  .border-amber-500 {
    border-color: var(--color-amber-500);
  }
  .border-black\/10 {
    border-color: color-mix(in srgb, #000 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
  }
  .border-blue-500 {
    border-color: var(--color-blue-500);
  }
  .border-gray-100 {
    border-color: var(--color-gray-100);
  }
  .border-gray-200 {
    border-color: var(--color-gray-200);
  }
  .border-gray-300 {
    border-color: var(--color-gray-300);
  }
  .border-gray-400 {
    border-color: var(--color-gray-400);
  }
  .border-green-400\/30 {
    border-color: color-mix(in srgb, oklch(79.2% 0.209 151.711) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-green-400) 30%, transparent);
    }
  }
  .border-green-500 {
    border-color: var(--color-green-500);
  }
  .border-red-400\/30 {
    border-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-400) 30%, transparent);
    }
  }
  .border-red-500 {
    border-color: var(--color-red-500);
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-white {
    border-color: var(--color-white);
  }
  .border-white\/20 {
    border-color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }
  .border-white\/30 {
    border-color: color-mix(in srgb, #fff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }
  .border-yellow-400\/30 {
    border-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yellow-400) 30%, transparent);
    }
  }
  .border-zinc-700 {
    border-color: var(--color-zinc-700);
  }
  .border-b-\[\#E5E7EB\] {
    border-bottom-color: #E5E7EB;
  }
  .border-b-\[color\:var\(--Navigation-Schematic-Toolbar-Toolbar-border-tree-border-default\,\#DDDFE3\)\] {
    border-bottom-color: var(--Navigation-Schematic-Toolbar-Toolbar-border-tree-border-default,#DDDFE3);
  }
  .\!bg-red-300 {
    background-color: var(--color-red-300) !important;
  }
  .bg-\[\#000000ad\] {
    background-color: #000000ad;
  }
  .bg-\[\#1C1C1E\] {
    background-color: #1C1C1E;
  }
  .bg-\[\#3C3F43\] {
    background-color: #3C3F43;
  }
  .bg-\[\#3F379D\] {
    background-color: #3F379D;
  }
  .bg-\[\#555D67\] {
    background-color: #555D67;
  }
  .bg-\[\#5248C7\] {
    background-color: #5248C7;
  }
  .bg-\[\#6559F1\] {
    background-color: #6559F1;
  }
  .bg-\[\#C1BDF9\] {
    background-color: #C1BDF9;
  }
  .bg-\[\#D3D5D9\] {
    background-color: #D3D5D9;
  }
  .bg-\[\#E4E8FF\] {
    background-color: #E4E8FF;
  }
  .bg-\[\#F1F5F8\] {
    background-color: #F1F5F8;
  }
  .bg-\[\#F3F4F6\] {
    background-color: #F3F4F6;
  }
  .bg-\[\#F8FAFC\] {
    background-color: #F8FAFC;
  }
  .bg-\[\#FFF\] {
    background-color: #FFF;
  }
  .bg-\[\#f5f5f5\] {
    background-color: #f5f5f5;
  }
  .bg-\[color\:var\(--Tooltip-divider-tooltip-divider\,\#DDDFE3\)\] {
    background-color: var(--Tooltip-divider-tooltip-divider,#DDDFE3);
  }
  .bg-\[rgba\(0\,0\,0\,0\.28\)\] {
    background-color: rgba(0,0,0,0.28);
  }
  .bg-\[rgba\(11\,11\,11\,0\.14\)\] {
    background-color: rgba(11,11,11,0.14);
  }
  .bg-\[rgba\(193\,189\,249\,0\.5\)\] {
    background-color: rgba(193,189,249,0.5);
  }
  .bg-\[rgba\(211\,213\,217\,0\.5\)\] {
    background-color: rgba(211,213,217,0.5);
  }
  .bg-\[rgba\(211\,213\,217\,0\.20\)\] {
    background-color: rgba(211,213,217,0.20);
  }
  .bg-\[rgba\(255\,255\,255\,0\.01\)\] {
    background-color: rgba(255,255,255,0.01);
  }
  .bg-\[rgba\(255\,255\,255\,0\.20\)\] {
    background-color: rgba(255,255,255,0.20);
  }
  .bg-\[var\(--button-states-low-outline-btn-bg\)\] {
    background-color: var(--button-states-low-outline-btn-bg);
  }
  .bg-\[var\(--button-states-low-outline-btn-bg\,\#FFF\)\] {
    background-color: var(--button-states-low-outline-btn-bg,#FFF);
  }
  .bg-amber-50 {
    background-color: var(--color-amber-50);
  }
  .bg-amber-50\/20 {
    background-color: color-mix(in srgb, oklch(98.7% 0.022 95.277) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-50) 20%, transparent);
    }
  }
  .bg-black {
    background-color: var(--color-black);
  }
  .bg-black\/5 {
    background-color: color-mix(in srgb, #000 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
    }
  }
  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }
  .bg-blue-50\/20 {
    background-color: color-mix(in srgb, oklch(97% 0.014 254.604) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-50) 20%, transparent);
    }
  }
  .bg-blue-100 {
    background-color: var(--color-blue-100);
  }
  .bg-blue-500 {
    background-color: var(--color-blue-500);
  }
  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }
  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }
  .bg-gray-50\/20 {
    background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-50) 20%, transparent);
    }
  }
  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }
  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }
  .bg-gray-300 {
    background-color: var(--color-gray-300);
  }
  .bg-gray-400 {
    background-color: var(--color-gray-400);
  }
  .bg-gray-600 {
    background-color: var(--color-gray-600);
  }
  .bg-gray-700 {
    background-color: var(--color-gray-700);
  }
  .bg-gray-900 {
    background-color: var(--color-gray-900);
  }
  .bg-gray-900\/50 {
    background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-900) 50%, transparent);
    }
  }
  .bg-gray-900\/75 {
    background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-900) 75%, transparent);
    }
  }
  .bg-green-50 {
    background-color: var(--color-green-50);
  }
  .bg-green-400 {
    background-color: var(--color-green-400);
  }
  .bg-green-500 {
    background-color: var(--color-green-500);
  }
  .bg-green-500\/20 {
    background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
    }
  }
  .bg-green-900\/20 {
    background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-green-900) 20%, transparent);
    }
  }
  .bg-indigo-100 {
    background-color: var(--color-indigo-100);
  }
  .bg-indigo-600 {
    background-color: var(--color-indigo-600);
  }
  .bg-neutral-800 {
    background-color: var(--color-neutral-800);
  }
  .bg-orange-500 {
    background-color: var(--color-orange-500);
  }
  .bg-purple-500 {
    background-color: var(--color-purple-500);
  }
  .bg-red-300 {
    background-color: var(--color-red-300);
  }
  .bg-red-500 {
    background-color: var(--color-red-500);
  }
  .bg-red-500\/20 {
    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
    }
  }
  .bg-red-500\/30 {
    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
    }
  }
  .bg-red-600 {
    background-color: var(--color-red-600);
  }
  .bg-red-900\/20 {
    background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);
    }
  }
  .bg-slate-100 {
    background-color: var(--color-slate-100);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/10 {
    background-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .bg-white\/20 {
    background-color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }
  .bg-yellow-100 {
    background-color: var(--color-yellow-100);
  }
  .bg-yellow-400 {
    background-color: var(--color-yellow-400);
  }
  .bg-yellow-900\/20 {
    background-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yellow-900) 20%, transparent);
    }
  }
  .bg-zinc-800 {
    background-color: var(--color-zinc-800);
  }
  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-none {
    background-image: none;
  }
  .from-blue-50\/30 {
    --tw-gradient-from: color-mix(in srgb, oklch(97% 0.014 254.604) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-blue-50) 30%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-blue-500 {
    --tw-gradient-from: var(--color-blue-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-indigo-50\/20 {
    --tw-gradient-to: color-mix(in srgb, oklch(96.2% 0.018 272.314) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-indigo-50) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-indigo-600 {
    --tw-gradient-to: var(--color-indigo-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .fill-current {
    fill: currentcolor;
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .p-0 {
    padding: calc(var(--spacing) * 0);
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-3\.5 {
    padding: calc(var(--spacing) * 3.5);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .p-\[2px\] {
    padding: 2px;
  }
  .p-\[10px\] {
    padding: 10px;
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-7 {
    padding-inline: calc(var(--spacing) * 7);
  }
  .px-14 {
    padding-inline: calc(var(--spacing) * 14);
  }
  .px-15 {
    padding-inline: calc(var(--spacing) * 15);
  }
  .px-17 {
    padding-inline: calc(var(--spacing) * 17);
  }
  .px-20 {
    padding-inline: calc(var(--spacing) * 20);
  }
  .px-\[6px\] {
    padding-inline: 6px;
  }
  .px-\[18px\] {
    padding-inline: 18px;
  }
  .px-\[39\%\] {
    padding-inline: 39%;
  }
  .px-px {
    padding-inline: 1px;
  }
  .py-0 {
    padding-block: calc(var(--spacing) * 0);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .py-\[2\.80px\] {
    padding-block: 2.80px;
  }
  .py-\[2px\] {
    padding-block: 2px;
  }
  .py-\[5\%\] {
    padding-block: 5%;
  }
  .py-px {
    padding-block: 1px;
  }
  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }
  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }
  .pt-13 {
    padding-top: calc(var(--spacing) * 13);
  }
  .pt-24 {
    padding-top: calc(var(--spacing) * 24);
  }
  .pt-40 {
    padding-top: calc(var(--spacing) * 40);
  }
  .pt-\[3px\] {
    padding-top: 3px;
  }
  .pr-0 {
    padding-right: calc(var(--spacing) * 0);
  }
  .pr-1 {
    padding-right: calc(var(--spacing) * 1);
  }
  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }
  .pr-2\.5 {
    padding-right: calc(var(--spacing) * 2.5);
  }
  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pr-5 {
    padding-right: calc(var(--spacing) * 5);
  }
  .pr-7 {
    padding-right: calc(var(--spacing) * 7);
  }
  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }
  .pr-10 {
    padding-right: calc(var(--spacing) * 10);
  }
  .pr-20 {
    padding-right: calc(var(--spacing) * 20);
  }
  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }
  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }
  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }
  .pb-100 {
    padding-bottom: calc(var(--spacing) * 100);
  }
  .pb-px {
    padding-bottom: 1px;
  }
  .pl-0 {
    padding-left: calc(var(--spacing) * 0);
  }
  .pl-1\.5 {
    padding-left: calc(var(--spacing) * 1.5);
  }
  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-3\.5 {
    padding-left: calc(var(--spacing) * 3.5);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }
  .pl-10 {
    padding-left: calc(var(--spacing) * 10);
  }
  .pl-16 {
    padding-left: calc(var(--spacing) * 16);
  }
  .pl-20 {
    padding-left: calc(var(--spacing) * 20);
  }
  .text-center {
    text-align: center;
  }
  .text-justify {
    text-align: justify;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .text-start {
    text-align: start;
  }
  .align-middle {
    vertical-align: middle;
  }
  .font-\[\'IBM_Plex_Sans\'\] {
    font-family: 'IBM Plex Sans';
  }
  .font-\[\'Segoe_UI\'\] {
    font-family: 'Segoe UI';
  }
  .font-sans {
    font-family: var(--font-sans);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[8\.50px\] {
    font-size: 8.50px;
  }
  .text-\[8px\] {
    font-size: 8px;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[12px\] {
    font-size: 12px;
  }
  .text-\[14px\] {
    font-size: 14px;
  }
  .text-\[18px\] {
    font-size: 18px;
  }
  .text-\[22px\] {
    font-size: 22px;
  }
  .text-\[39px\] {
    font-size: 39px;
  }
  .leading-3 {
    --tw-leading: calc(var(--spacing) * 3);
    line-height: calc(var(--spacing) * 3);
  }
  .leading-4 {
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }
  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }
  .leading-9 {
    --tw-leading: calc(var(--spacing) * 9);
    line-height: calc(var(--spacing) * 9);
  }
  .leading-10 {
    --tw-leading: calc(var(--spacing) * 10);
    line-height: calc(var(--spacing) * 10);
  }
  .leading-\[8\.50px\] {
    --tw-leading: 8.50px;
    line-height: 8.50px;
  }
  .leading-\[22px\] {
    --tw-leading: 22px;
    line-height: 22px;
  }
  .leading-\[26px\] {
    --tw-leading: 26px;
    line-height: 26px;
  }
  .leading-\[36px\] {
    --tw-leading: 36px;
    line-height: 36px;
  }
  .leading-loose {
    --tw-leading: var(--leading-loose);
    line-height: var(--leading-loose);
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-normal {
    --tw-leading: var(--leading-normal);
    line-height: var(--leading-normal);
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-light {
    --tw-font-weight: var(--font-weight-light);
    font-weight: var(--font-weight-light);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .text-ellipsis {
    text-overflow: ellipsis;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .text-\[\#2C2C34\] {
    color: #2C2C34;
  }
  .text-\[\#999\] {
    color: #999;
  }
  .text-\[\#5248C7\] {
    color: #5248C7;
  }
  .text-\[\#5248c7\] {
    color: #5248c7;
  }
  .text-\[\#D9D9D9\] {
    color: #D9D9D9;
  }
  .text-\[color\:var\(--Table-text-table-header\,\#2C2C34\)\] {
    color: var(--Table-text-table-header,#2C2C34);
  }
  .text-\[color\:var\(--typography-text-dark-disabled\,\#999\)\] {
    color: var(--typography-text-dark-disabled,#999);
  }
  .text-\[var\(--button-states-low-outline-btn-txt\)\] {
    color: var(--button-states-low-outline-btn-txt);
  }
  .text-amber-400 {
    color: var(--color-amber-400);
  }
  .text-black {
    color: var(--color-black);
  }
  .text-blue-500 {
    color: var(--color-blue-500);
  }
  .text-blue-600 {
    color: var(--color-blue-600);
  }
  .text-blue-700 {
    color: var(--color-blue-700);
  }
  .text-emerald-500 {
    color: var(--color-emerald-500);
  }
  .text-gray-300 {
    color: var(--color-gray-300);
  }
  .text-gray-400 {
    color: var(--color-gray-400);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-600 {
    color: var(--color-gray-600);
  }
  .text-gray-700 {
    color: var(--color-gray-700);
  }
  .text-gray-800 {
    color: var(--color-gray-800);
  }
  .text-gray-900 {
    color: var(--color-gray-900);
  }
  .text-green-300 {
    color: var(--color-green-300);
  }
  .text-green-400 {
    color: var(--color-green-400);
  }
  .text-green-500 {
    color: var(--color-green-500);
  }
  .text-green-800 {
    color: var(--color-green-800);
  }
  .text-indigo-600 {
    color: var(--color-indigo-600);
  }
  .text-orange-500 {
    color: var(--color-orange-500);
  }
  .text-purple-500 {
    color: var(--color-purple-500);
  }
  .text-red-300 {
    color: var(--color-red-300);
  }
  .text-red-400 {
    color: var(--color-red-400);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-red-600 {
    color: var(--color-red-600);
  }
  .text-red-800 {
    color: var(--color-red-800);
  }
  .text-white {
    color: var(--color-white);
  }
  .text-white\/50 {
    color: color-mix(in srgb, #fff 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }
  .text-white\/60 {
    color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .text-white\/70 {
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }
  .text-white\/80 {
    color: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .text-yellow-300 {
    color: var(--color-yellow-300);
  }
  .capitalize {
    text-transform: capitalize;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .not-italic {
    font-style: normal;
  }
  .no-underline {
    text-decoration-line: none;
  }
  .underline {
    text-decoration-line: underline;
  }
  .placeholder-gray-500 {
    &::placeholder {
      color: var(--color-gray-500);
    }
  }
  .placeholder-white\/70 {
    &::placeholder {
      color: color-mix(in srgb, #fff 70%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-white) 70%, transparent);
      }
    }
  }
  .accent-\[\#202028\] {
    accent-color: #202028;
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-10 {
    opacity: 10%;
  }
  .opacity-12 {
    opacity: 12%;
  }
  .opacity-20 {
    opacity: 20%;
  }
  .opacity-25 {
    opacity: 25%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-75 {
    opacity: 75%;
  }
  .opacity-80 {
    opacity: 80%;
  }
  .opacity-90 {
    opacity: 90%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[\.\.\.\] {
    --tw-shadow: ...;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_0_8px_0_rgba\(27\,46\,93\,0\.10\)\] {
    --tw-shadow: 0 0 8px 0 var(--tw-shadow-color, rgba(27,46,93,0.10));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_1px_3px_0_rgba\(0\,0\,0\,0\.1\)\,0_1px_2px_-1px_rgba\(0\,0\,0\,0\.1\)\] {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0,0,0,0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgba(0,0,0,0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0px_-1px_0px_0px_rgba\(201\,87\,53\,1\.00\)\] {
    --tw-shadow: 0px -1px 0px 0px var(--tw-shadow-color, rgba(201,87,53,1.00));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0px_0px_10px_0px_rgba\(32\,32\,40\,0\.15\)\] {
    --tw-shadow: 0px 0px 10px 0px var(--tw-shadow-color, rgba(32,32,40,0.15));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0px_1px_0px_0px_rgba\(97\,0\,0\,1\.00\)\] {
    --tw-shadow: 0px 1px 0px 0px var(--tw-shadow-color, rgba(97,0,0,1.00));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[2px_2px_12px_2px_rgba\(32\,32\,40\,0\.15\)\] {
    --tw-shadow: 2px 2px 12px 2px var(--tw-shadow-color, rgba(32,32,40,0.15));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[2px_2px_12px_2px_var\(--shadows-color-shadow-A\,rgba\(32\,32\,40\,0\.15\)\)\] {
    --tw-shadow: 2px 2px 12px 2px var(--tw-shadow-color, var(--shadows-color-shadow-A,rgba(32,32,40,0.15)));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[6px_6px_22px_6px_rgba\(32\,32\,40\,0\.15\)\] {
    --tw-shadow: 6px 6px 22px 6px var(--tw-shadow-color, rgba(32,32,40,0.15));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow\/glow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-0 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-blue-500\/25 {
    --tw-shadow-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 25%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .ring-black {
    --tw-ring-color: var(--color-black);
  }
  .ring-black\/40 {
    --tw-ring-color: color-mix(in srgb, #000 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }
  .ring-green-300 {
    --tw-ring-color: var(--color-green-300);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .outline-0 {
    outline-style: var(--tw-outline-style);
    outline-width: 0px;
  }
  .outline-1 {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .outline-2 {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }
  .outline-offset-\[-1px\] {
    outline-offset: -1px;
  }
  .outline-offset-\[-2px\] {
    outline-offset: -2px;
  }
  .outline-offset-\[-3px\] {
    outline-offset: -3px;
  }
  .outline-\[var\(--button-states-low-outline-btn-outline\)\] {
    outline-color: var(--button-states-low-outline-btn-outline);
  }
  .outline-amber-500 {
    outline-color: var(--color-amber-500);
  }
  .outline-black\/5 {
    outline-color: color-mix(in srgb, #000 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      outline-color: color-mix(in oklab, var(--color-black) 5%, transparent);
    }
  }
  .outline-black\/10 {
    outline-color: color-mix(in srgb, #000 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      outline-color: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
  }
  .outline-blue-500 {
    outline-color: var(--color-blue-500);
  }
  .outline-gray-200 {
    outline-color: var(--color-gray-200);
  }
  .outline-gray-400 {
    outline-color: var(--color-gray-400);
  }
  .outline-green-500 {
    outline-color: var(--color-green-500);
  }
  .outline-red-500 {
    outline-color: var(--color-red-500);
  }
  .outline-stone-300 {
    outline-color: var(--color-stone-300);
  }
  .outline-white\/5 {
    outline-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      outline-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }
  .outline-white\/30 {
    outline-color: color-mix(in srgb, #fff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      outline-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }
  .outline-zinc-300\/40 {
    outline-color: color-mix(in srgb, oklch(87.1% 0.006 286.286) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      outline-color: color-mix(in oklab, var(--color-zinc-300) 40%, transparent);
    }
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-100 {
    --tw-duration: 100ms;
    transition-duration: 100ms;
  }
  .duration-150 {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .select-text {
    -webkit-user-select: text;
    user-select: text;
  }
  .group-hover\:visible {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        visibility: visible;
      }
    }
  }
  .group-hover\:flex {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        display: flex;
      }
    }
  }
  .group-hover\:scale-110 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\:bg-gray-100 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .group-hover\:tracking-wide {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-tracking: var(--tracking-wide);
        letter-spacing: var(--tracking-wide);
      }
    }
  }
  .group-hover\:opacity-100 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .group-hover\:brightness-0 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-brightness: brightness(0%);
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
      }
    }
  }
  .group-hover\:saturate-100 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-saturate: saturate(100%);
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
      }
    }
  }
  .group-hover\:\[filter\:invert\(23\%\)_sepia\(98\%\)_saturate\(5843\%\)_hue-rotate\(357deg\)_brightness\(98\%\)_contrast\(110\%\)\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        filter: invert(23%) sepia(98%) saturate(5843%) hue-rotate(357deg) brightness(98%) contrast(110%);
      }
    }
  }
  .group-hover\/delete\:brightness-0 {
    &:is(:where(.group\/delete):hover *) {
      @media (hover: hover) {
        --tw-brightness: brightness(0%);
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
      }
    }
  }
  .group-hover\/delete\:saturate-100 {
    &:is(:where(.group\/delete):hover *) {
      @media (hover: hover) {
        --tw-saturate: saturate(100%);
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
      }
    }
  }
  .group-hover\/delete\:\[filter\:invert\(23\%\)_sepia\(98\%\)_saturate\(5843\%\)_hue-rotate\(357deg\)_brightness\(98\%\)_contrast\(110\%\)\] {
    &:is(:where(.group\/delete):hover *) {
      @media (hover: hover) {
        filter: invert(23%) sepia(98%) saturate(5843%) hue-rotate(357deg) brightness(98%) contrast(110%);
      }
    }
  }
  .peer-checked\:flex {
    &:is(:where(.peer):checked ~ *) {
      display: flex;
    }
  }
  .peer-checked\:bg-black {
    &:is(:where(.peer):checked ~ *) {
      background-color: var(--color-black);
    }
  }
  .peer-checked\:bg-blue-500 {
    &:is(:where(.peer):checked ~ *) {
      background-color: var(--color-blue-500);
    }
  }
  .selection\:select-all {
    & *::selection {
      -webkit-user-select: all;
      user-select: all;
    }
    &::selection {
      -webkit-user-select: all;
      user-select: all;
    }
  }
  .checked\:border-transparent {
    &:checked {
      border-color: transparent;
    }
  }
  .checked\:bg-blue-500 {
    &:checked {
      background-color: var(--color-blue-500);
    }
  }
  .hover\:-translate-y-0\.5 {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * -0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:scale-110 {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:scale-\[1\.02\] {
    &:hover {
      @media (hover: hover) {
        scale: 1.02;
      }
    }
  }
  .hover\:cursor-pointer {
    &:hover {
      @media (hover: hover) {
        cursor: pointer;
      }
    }
  }
  .hover\:rounded-md {
    &:hover {
      @media (hover: hover) {
        border-radius: var(--radius-md);
      }
    }
  }
  .hover\:border-\[\#EF5350\] {
    &:hover {
      @media (hover: hover) {
        border-color: #EF5350;
      }
    }
  }
  .hover\:border-amber-400 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-amber-400);
      }
    }
  }
  .hover\:border-blue-400 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-blue-400);
      }
    }
  }
  .hover\:border-gray-50 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-gray-50);
      }
    }
  }
  .hover\:border-gray-300 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-gray-300);
      }
    }
  }
  .hover\:border-gray-400 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-gray-400);
      }
    }
  }
  .hover\:border-white\/50 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #fff 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 50%, transparent);
        }
      }
    }
  }
  .hover\:bg-\[\#F1F2F5\] {
    &:hover {
      @media (hover: hover) {
        background-color: #F1F2F5;
      }
    }
  }
  .hover\:bg-\[\#FEE\] {
    &:hover {
      @media (hover: hover) {
        background-color: #FEE;
      }
    }
  }
  .hover\:bg-\[\#d4d3d3\] {
    &:hover {
      @media (hover: hover) {
        background-color: #d4d3d3;
      }
    }
  }
  .hover\:bg-\[rgba\(0\,0\,0\,0\.28\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: rgba(0,0,0,0.28);
      }
    }
  }
  .hover\:bg-\[rgba\(193\,189\,249\,0\.7\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: rgba(193,189,249,0.7);
      }
    }
  }
  .hover\:bg-\[rgba\(211\,213\,217\,0\.5\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: rgba(211,213,217,0.5);
      }
    }
  }
  .hover\:bg-\[rgba\(255\,235\,238\,0\.5\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: rgba(255,235,238,0.5);
      }
    }
  }
  .hover\:bg-\[rgba\(255\,235\,238\,0\.25\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: rgba(255,235,238,0.25);
      }
    }
  }
  .hover\:bg-black\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #000 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
        }
      }
    }
  }
  .hover\:bg-blue-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .hover\:bg-blue-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .hover\:bg-gray-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .hover\:bg-gray-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .hover\:bg-gray-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .hover\:bg-gray-300 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-300);
      }
    }
  }
  .hover\:bg-gray-950 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-950);
      }
    }
  }
  .hover\:bg-green-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-50);
      }
    }
  }
  .hover\:bg-indigo-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-indigo-700);
      }
    }
  }
  .hover\:bg-red-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
  }
  .hover\:bg-red-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-600);
      }
    }
  }
  .hover\:bg-red-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-700);
      }
    }
  }
  .hover\:bg-slate-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-50);
      }
    }
  }
  .hover\:bg-white {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-white);
      }
    }
  }
  .hover\:bg-white\/5 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
  }
  .hover\:bg-white\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
  }
  .hover\:bg-white\/20 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
        }
      }
    }
  }
  .hover\:px-2 {
    &:hover {
      @media (hover: hover) {
        padding-inline: calc(var(--spacing) * 2);
      }
    }
  }
  .hover\:py-1 {
    &:hover {
      @media (hover: hover) {
        padding-block: calc(var(--spacing) * 1);
      }
    }
  }
  .hover\:tracking-wide {
    &:hover {
      @media (hover: hover) {
        --tw-tracking: var(--tracking-wide);
        letter-spacing: var(--tracking-wide);
      }
    }
  }
  .hover\:text-\[\#EF5350\] {
    &:hover {
      @media (hover: hover) {
        color: #EF5350;
      }
    }
  }
  .hover\:text-\[var\(--button-states-danger-outline-btn-txt\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--button-states-danger-outline-btn-txt);
      }
    }
  }
  .hover\:text-blue-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-700);
      }
    }
  }
  .hover\:text-gray-100 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-100);
      }
    }
  }
  .hover\:text-gray-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-600);
      }
    }
  }
  .hover\:text-gray-800 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-800);
      }
    }
  }
  .hover\:text-green-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-green-700);
      }
    }
  }
  .hover\:text-red-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-700);
      }
    }
  }
  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .hover\:no-underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: none;
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .hover\:opacity-70 {
    &:hover {
      @media (hover: hover) {
        opacity: 70%;
      }
    }
  }
  .hover\:opacity-100 {
    &:hover {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .hover\:shadow-2xl {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-\[0px_-2px_0px_0px_rgba\(201\,87\,53\,1\.00\)\] {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0px -2px 0px 0px var(--tw-shadow-color, rgba(201,87,53,1.00));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-\[0px_2px_0px_0px_rgba\(97\,0\,0\,1\.00\)\] {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0px 2px 0px 0px var(--tw-shadow-color, rgba(97,0,0,1.00));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-lg {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-xl {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:ring-2 {
    &:hover {
      @media (hover: hover) {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-white\/10 {
    &:hover {
      @media (hover: hover) {
        --tw-shadow-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-white) 10%, transparent) var(--tw-shadow-alpha), transparent);
        }
      }
    }
  }
  .hover\:shadow-white\/20 {
    &:hover {
      @media (hover: hover) {
        --tw-shadow-color: color-mix(in srgb, #fff 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-white) 20%, transparent) var(--tw-shadow-alpha), transparent);
        }
      }
    }
  }
  .hover\:ring-blue-200 {
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: var(--color-blue-200);
      }
    }
  }
  .hover\:outline-\[var\(--button-states-danger-outline-btn-outline\)\] {
    &:hover {
      @media (hover: hover) {
        outline-color: var(--button-states-danger-outline-btn-outline);
      }
    }
  }
  .hover\:backdrop-blur-md {
    &:hover {
      @media (hover: hover) {
        --tw-backdrop-blur: blur(var(--blur-md));
        -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
        backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
      }
    }
  }
  .focus\:border-amber-400 {
    &:focus {
      border-color: var(--color-amber-400);
    }
  }
  .focus\:border-blue-400 {
    &:focus {
      border-color: var(--color-blue-400);
    }
  }
  .focus\:border-blue-500 {
    &:focus {
      border-color: var(--color-blue-500);
    }
  }
  .focus\:border-gray-300 {
    &:focus {
      border-color: var(--color-gray-300);
    }
  }
  .focus\:border-indigo-500 {
    &:focus {
      border-color: var(--color-indigo-500);
    }
  }
  .focus\:border-white\/50 {
    &:focus {
      border-color: color-mix(in srgb, #fff 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-white) 50%, transparent);
      }
    }
  }
  .focus\:ring {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-2 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-3 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-\[\#6366F1\] {
    &:focus {
      --tw-ring-color: #6366F1;
    }
  }
  .focus\:ring-amber-500\/30 {
    &:focus {
      --tw-ring-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
      }
    }
  }
  .focus\:ring-blue-200 {
    &:focus {
      --tw-ring-color: var(--color-blue-200);
    }
  }
  .focus\:ring-blue-500 {
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .focus\:ring-blue-500\/20 {
    &:focus {
      --tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
      }
    }
  }
  .focus\:ring-blue-500\/30 {
    &:focus {
      --tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 30%, transparent);
      }
    }
  }
  .focus\:ring-gray-400\/30 {
    &:focus {
      --tw-ring-color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-gray-400) 30%, transparent);
      }
    }
  }
  .focus\:ring-indigo-500 {
    &:focus {
      --tw-ring-color: var(--color-indigo-500);
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .active\:bg-\[rgba\(0\,0\,0\,0\.44\)\] {
    &:active {
      background-color: rgba(0,0,0,0.44);
    }
  }
  .active\:bg-\[rgba\(255\,235\,238\,0\.75\)\] {
    &:active {
      background-color: rgba(255,235,238,0.75);
    }
  }
  .active\:text-\[var\(--button-states-danger-outline-btn-txt\)\] {
    &:active {
      color: var(--button-states-danger-outline-btn-txt);
    }
  }
  .active\:outline-\[var\(--button-states-danger-outline-btn-outline\)\] {
    &:active {
      outline-color: var(--button-states-danger-outline-btn-outline);
    }
  }
  .disabled\:transform-none {
    &:disabled {
      transform: none;
    }
  }
  .disabled\:cursor-not-allowed {
    &:disabled {
      cursor: not-allowed;
    }
  }
  .disabled\:bg-gray-400 {
    &:disabled {
      background-color: var(--color-gray-400);
    }
  }
  .disabled\:text-gray-500 {
    &:disabled {
      color: var(--color-gray-500);
    }
  }
  .disabled\:opacity-50 {
    &:disabled {
      opacity: 50%;
    }
  }
  .sm\:top-1 {
    @media (width >= 40rem) {
      top: calc(var(--spacing) * 1);
    }
  }
  .sm\:right-1 {
    @media (width >= 40rem) {
      right: calc(var(--spacing) * 1);
    }
  }
  .sm\:my-8 {
    @media (width >= 40rem) {
      margin-block: calc(var(--spacing) * 8);
    }
  }
  .sm\:mt-6 {
    @media (width >= 40rem) {
      margin-top: calc(var(--spacing) * 6);
    }
  }
  .sm\:mr-2 {
    @media (width >= 40rem) {
      margin-right: calc(var(--spacing) * 2);
    }
  }
  .sm\:grid {
    @media (width >= 40rem) {
      display: grid;
    }
  }
  .sm\:inline {
    @media (width >= 40rem) {
      display: inline;
    }
  }
  .sm\:h-2 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 2);
    }
  }
  .sm\:h-4 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 4);
    }
  }
  .sm\:h-5 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 5);
    }
  }
  .sm\:h-8 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 8);
    }
  }
  .sm\:w-2 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 2);
    }
  }
  .sm\:w-4 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 4);
    }
  }
  .sm\:w-5 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 5);
    }
  }
  .sm\:w-8 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 8);
    }
  }
  .sm\:w-full {
    @media (width >= 40rem) {
      width: 100%;
    }
  }
  .sm\:max-w-3xl {
    @media (width >= 40rem) {
      max-width: var(--container-3xl);
    }
  }
  .sm\:max-w-\[200px\] {
    @media (width >= 40rem) {
      max-width: 200px;
    }
  }
  .sm\:max-w-lg {
    @media (width >= 40rem) {
      max-width: var(--container-lg);
    }
  }
  .sm\:grid-flow-row-dense {
    @media (width >= 40rem) {
      grid-auto-flow: row dense;
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:items-center {
    @media (width >= 40rem) {
      align-items: center;
    }
  }
  .sm\:gap-2 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .sm\:gap-3 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .sm\:gap-4 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .sm\:p-0 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 0);
    }
  }
  .sm\:px-6 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .sm\:pr-4 {
    @media (width >= 40rem) {
      padding-right: calc(var(--spacing) * 4);
    }
  }
  .sm\:pl-3 {
    @media (width >= 40rem) {
      padding-left: calc(var(--spacing) * 3);
    }
  }
  .sm\:pl-10 {
    @media (width >= 40rem) {
      padding-left: calc(var(--spacing) * 10);
    }
  }
  .sm\:text-sm {
    @media (width >= 40rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:static {
    @media (width >= 64rem) {
      position: static;
    }
  }
  .lg\:max-w-none {
    @media (width >= 64rem) {
      max-width: none;
    }
  }
  .lg\:grid-cols-2 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .lg\:flex-row {
    @media (width >= 64rem) {
      flex-direction: row;
    }
  }
  .\32 xl\:absolute {
    @media (width >= 96rem) {
      position: absolute;
    }
  }
  .\32 xl\:left-1\/2 {
    @media (width >= 96rem) {
      left: calc(1/2 * 100%);
    }
  }
  .\32 xl\:flex {
    @media (width >= 96rem) {
      display: flex;
    }
  }
  .\32 xl\:hidden {
    @media (width >= 96rem) {
      display: none;
    }
  }
  .\32 xl\:-translate-x-1\/2 {
    @media (width >= 96rem) {
      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .\32 xl\:transform {
    @media (width >= 96rem) {
      transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
    }
  }
  .dark\:bg-blue-900\/20 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
      }
    }
  }
  .dark\:text-blue-400 {
    &:where(.dark, .dark *) {
      color: var(--color-blue-400);
    }
  }
}
@layer base {
  body {
    background-color: var(--color-white);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-900);
    }
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  h1,	h2,	h3,	h4,	h5,	h6 {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  p {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
}
.body-color {
  background-color: var(--content-bg-color);
}
.svg-icon {
  filter: var(--svg-icon-filter);
}
.sidebar-svg-icon {
  filter: var(--sidebar-svg-icon-filter);
}
.primary-text-color {
  color: var(--primary-text-color);
}
.secondary-text-color {
  color: var(--secondary-text-color);
}
.tertiary-text-color {
  color: var(--tertiary-text-color);
}
.border-bottom-bg-color {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-bottom-color: var(--card-color-border-color);
}
.primary-page-header {
  background: var(--document-component-frame-comp-bg);
}
.modified-time {
  justify-content: center;
  text-align: center;
  font-family: 'IBM Plex Sans';
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-leading: calc(var(--spacing) * 3);
  line-height: calc(var(--spacing) * 3);
  color: var(--secondary-text-color);
}
tbody {
  counter-reset: row-number;
}
tbody tr.serial-no {
  counter-increment: row-number;
}
tbody tr.serial-no td.serial-no-col::before {
  content: counter(row-number);
}
@layer primitives {
  :root {
    --color-system-gray-gray-100: #d7d7d7;
    --color-system-gray-gray-900: #1c1c1c;
    --color-system-gray-black: #000000;
    --color-system-gray-gray-200: #b7b7b7;
    --color-system-gray-gray-400: #6f6f6f;
    --color-system-gray-gray-600: #4e4e4e;
    --color-system-gray-gray-700: #3d3d3d;
    --color-system-gray-gray-800: #313131;
    --color-system-gray-white: #ffffff;
    --color-system-gray-gray-300: #999999;
    --color-system-gray-gray-500: #5d5d5d;
    --color-system-dark-gray-blue: #16191e;
    --color-system-red-orange: #d6311a;
    --color-system-gray-gray-50: #f6f7f9;
    --color-system-white-nutral-100: #f5f5f5;
    --color-system-cool-gray: #33343d;
    --color-system-blue-gray: #464648;
    --form-state-default-bg: #f8f9fc;
    --form-border-deault: #dddfe3;
    --card-hover-default-bg: #c1bdf914;
    --input-box-focus-border: #c1bdf980;
    --radius-r-000: 0px;
    --radius-r-020: 20px;
    --radius-r-024: 24px;
    --radius-r-028: 28px;
    --radius-r-032: 32px;
    --radius-r-036: 36px;
    --radius-r-040: 40px;
    --radius-r-080: 80px;
    --radius-r-120: 120px;
    --radius-r-240: 240px;
    --radius-r-008: 8px;
    --spacing-space-004: 4px;
    --spacing-space-008: 8px;
    --spacing-space-012: 12px;
    --spacing-space-016: 16px;
    --spacing-space-020: 20px;
    --spacing-space-024: 24px;
    --spacing-space-028: 28px;
    --spacing-space-032: 32px;
    --radius-r-004: 4px;
    --radius-r-016: 16px;
    --radius-r-012: 12px;
    --radius-r-002: 2px;
    --border-border-w-01: 1px;
    --border-border-w-02: 2px;
    --border-border-w-03: 3px;
    --border-border-w-04: 4px;
    --border-border-w-05: 5px;
    --color-system-red-half-values-red-25: rgb(255, 235, 238, 0.25);
    --color-system-red-half-values-red-50: rgba(255, 235, 238, 0.5);
    --color-system-red-half-values-red-75: rgb(255, 235, 238, 0.75);
    --color-system-red-red-400: #e57373;
    --color-system-red-red-500: #ef5350;
    --color-system-red-red-600: #f44336;
    --color-system-red-red-700: #e53935;
    --color-system-red-red-800: #d32f2f;
    --color-system-red-red-900: #c62828;
    --color-system-red-red-950: #b71c1c;
    --color-system-orange-half-values-orange-25: rgb(251, 233, 231, 0.25);
    --color-system-orange-half-values-orange-50: rgb(251, 233, 231, 0.5);
    --color-system-orange-half-values-orange-75: rgb(251, 233, 231, 0.75);
    --color-system-orange-orange-400: #ff8a65;
    --color-system-orange-orange-500: #ff7043;
    --color-system-orange-orange-600: #ff5722;
    --color-system-orange-orange-700: #f4511e;
    --color-system-orange-orange-800: #e64a19;
    --color-system-orange-orange-900: #d84315;
    --color-system-orange-orange-950: #bf360c;
    --color-system-yellow-yellow-100: #fef6c7;
    --color-system-yellow-yellow-200: #fee573;
    --color-system-yellow-yellow-300: #fdd635;
    --color-system-yellow-yellow-400: #fccc31;
    --color-system-yellow-yellow-500: #fbbf2d;
    --color-system-yellow-yellow-600: #fab429;
    --color-system-yellow-yellow-700: #f9a825;
    --color-system-yellow-yellow-800: #de941b;
    --color-system-yellow-yellow-900: #c37f10;
    --color-system-yellow-yellow-950: #a56805;
    --color-system-green-green-100: #e8f5e9;
    --color-system-green-green-200: #c8e6c9;
    --color-system-green-green-300: #a5d6a7;
    --color-system-green-green-400: #81c784;
    --color-system-green-green-500: #66bb6a;
    --color-system-green-green-600: #4caf50;
    --color-system-green-green-700: #43a047;
    --color-system-green-green-800: #388e3c;
    --color-system-green-green-900: #2e7d32;
    --color-system-green-green-950: #1b5e20;
    --color-system-teal-teal-100: #c8fff4;
    --color-system-teal-teal-200: #70efde;
    --color-system-teal-teal-300: #03dac6;
    --color-system-teal-teal-400: #00c4b4;
    --color-system-teal-teal-500: #00b3a6;
    --color-system-teal-teal-600: #01a299;
    --color-system-teal-teal-700: #019592;
    --color-system-teal-teal-800: #018786;
    --color-system-teal-teal-900: #017374;
    --color-system-teal-teal-950: #005457;
    --color-system-cyan-cyan-100: #cff4fc;
    --color-system-cyan-cyan-200: #9eeaf9;
    --color-system-cyan-cyan-300: #6edff6;
    --color-system-cyan-cyan-400: #3dd5f3;
    --color-system-cyan-cyan-500: #0dcaf0;
    --color-system-cyan-cyan-600: #0aa2c0;
    --color-system-cyan-cyan-700: #087990;
    --color-system-cyan-cyan-800: #055160;
    --color-system-cyan-cyan-900: #032830;
    --color-system-cyan-cyan-950: #001a20;
    --color-system-blue-blue-100: #e3f2fd;
    --color-system-blue-blue-200: #bbdefb;
    --color-system-blue-blue-300: #90caf9;
    --color-system-blue-blue-400: #64b5f6;
    --color-system-blue-blue-500: #44a6f4;
    --color-system-blue-blue-600: #2196f3;
    --color-system-blue-blue-700: #1e88e5;
    --color-system-blue-blue-800: #1976d2;
    --color-system-blue-blue-900: #1565c0;
    --color-system-blue-blue-950: #0d47a1;
    --color-system-indigo-indigo-100: #e8eaf6;
    --color-system-indigo-indigo-200: #cbdbf5;
    --color-system-indigo-indigo-300: #9fa8da;
    --color-system-indigo-indigo-400: #7986cb;
    --color-system-indigo-indigo-500: #5c6bc0;
    --color-system-indigo-indigo-600: #3f51b5;
    --color-system-indigo-indigo-700: #3949ab;
    --color-system-indigo-indigo-800: #303f9f;
    --color-system-indigo-indigo-900: #283593;
    --color-system-indigo-indigo-950: #1a237e;
    --color-system-purple-purple-100: #e0defc;
    --color-system-purple-purple-200: #c1bdf9;
    --color-system-purple-purple-200-40: #c1bdf940;
    --color-system-purple-purple-300: #a39bf7;
    --color-system-purple-purple-400: #847af4;
    --color-system-purple-purple-500: #6559f1;
    --color-system-purple-purple-600: #5248c7;
    --color-system-purple-purple-700: #3f379d;
    --color-system-purple-purple-800: #2b2574;
    --color-system-purple-purple-900: #18144a;
    --color-system-purple-purple-950: #0f0c35;
    --color-system-pink-pink-100: #f7d6e6;
    --color-system-pink-pink-200: #efadce;
    --color-system-pink-pink-300: #e685b5;
    --color-system-pink-pink-400: #de5c9d;
    --color-system-pink-pink-500: #d63384;
    --color-system-pink-pink-600: #ab296a;
    --color-system-pink-pink-700: #801f4f;
    --color-system-pink-pink-800: #561435;
    --color-system-pink-pink-900: #2b0a1a;
    --color-system-pink-pink-950: #1b020e;
    --opacity-opacity-10: 0.1;
    --opacity-opacity-20: 0.2;
    --opacity-opacity-30: 0.3;
    --opacity-opacity-40: 0.4;
    --opacity-opacity-50: 0.5;
    --opacity-opacity-60: 0.6;
    --opacity-opacity-70: 0.7;
    --opacity-opacity-80: 0.8;
    --opacity-opacity-90: 0.9;
    --border-border-w-06: 6px;
    --border-border-w-07: 7px;
    --border-border-w-08: 8px;
    --border-border-w-09: 9px;
    --border-border-w-10: 10px;
    --font-system-font-size-font-size-016: 16px;
    --font-system-line-height-line-height-000: 0px;
    --font-system-line-height-line-height-012: 12px;
    --font-system-line-height-line-height-014: 14px;
    --font-system-font-size-font-size-018: 18px;
    --font-system-font-size-font-size-020: 20px;
    --font-system-font-size-font-size-022: 22px;
    --font-system-font-size-font-size-024: 24px;
    --font-system-font-size-font-size-026: 26px;
    --font-system-font-size-font-size-028: 28px;
    --font-system-font-size-font-size-030: 30px;
    --font-system-font-size-font-size-032: 32px;
    --font-system-font-size-font-size-034: 34px;
    --font-system-font-size-font-size-036: 36px;
    --font-system-font-size-font-size-038: 38px;
    --font-system-font-size-font-size-040: 40px;
    --font-system-font-size-font-size-042: 42px;
    --font-system-font-size-font-size-044: 44px;
    --font-system-font-size-font-size-046: 46px;
    --font-system-font-size-font-size-048: 48px;
    --font-system-font-size-font-size-050: 50px;
    --font-system-font-size-font-size-014: 14px;
    --font-system-font-size-font-size-012: 12px;
    --font-system-line-height-line-height-016: 16px;
    --font-system-line-height-line-height-018: 18px;
    --font-system-line-height-line-height-020: 20px;
    --font-system-line-height-line-height-022: 22px;
    --font-system-line-height-line-height-024: 24px;
    --font-system-line-height-line-height-026: 26px;
    --font-system-line-height-line-height-028: 28px;
    --font-system-line-height-line-height-030: 30px;
    --font-system-line-height-line-height-032: 32px;
    --font-system-line-height-line-height-034: 34px;
    --font-system-line-height-line-height-036: 36px;
    --font-system-line-height-line-height-038: 38px;
    --font-system-line-height-line-height-040: 40px;
    --opacity-opacity-15: 0.15;
    --opacity-opacity-25: 0.25;
    --opacity-opacity-35: 0.35;
    --opacity-opacity-45: 0.45;
    --opacity-opacity-55: 0.55;
    --opacity-opacity-65: 0.65;
    --opacity-opacity-75: 0.75;
    --opacity-opacity-85: 0.85;
    --opacity-opacity-95: 0.95;
    --opacity-opacity-05: 0.05;
    --opacity-opacity-1: 1px;
    --font-system-line-height-line-height-042: 42px;
    --font-system-line-height-line-height-044: 44px;
    --font-system-line-height-line-height-046: 46px;
    --font-system-line-height-line-height-048: 48px;
    --font-system-line-height-line-height-050: 50px;
    --font-system-line-height-line-height-052: 52px;
    --font-system-line-height-line-height-054: 54px;
    --font-system-line-height-line-height-056: 56px;
    --font-system-line-height-line-height-058: 58px;
    --font-system-line-height-line-height-060: 60px;
    --spacing-space-064: 64px;
    --spacing-space-128: 128px;
    --spacing-space-256: 256px;
    --spacing-space-600: 600px;
    --color-system-blue-half-values-blue-25: rgb(227, 242, 253, 0.25);
    --color-system-blue-half-values-blue-50: rgb(227, 242, 253, 0.5);
    --color-system-blue-half-values-blue-75: rgb(227, 242, 253, 0.75);
    --color-system-indigo-half-values-indigo-25: rgb(232, 234, 246, 0.25);
    --color-system-indigo-half-values-indigo-50: rgb(232, 234, 246, 0.5);
    --color-system-indigo-half-values-indigo-75: rgb(232, 234, 246, 0.75);
    --color-system-purple-half-values-purple-25: rgb(193, 189, 249, 0.25);
    --color-system-purple-half-values-purple-50: rgb(193, 189, 249, 0.5);
    --color-system-purple-half-values-purple-75: rgb(193, 189, 249, 0.75);
    --color-system-pink-half-values-pink-25: rgb(247, 214, 230, 0.25);
    --color-system-pink-half-values-pink-50: rgb(247, 214, 230, 0.5);
    --color-system-pink-half-values-pink-75: rgb(247, 214, 230, 0.75);
    --color-system-gray-half-values-gray-25: rgb(227, 228, 229, 0.25);
    --color-system-gray-half-values-gray-50: rgb(227, 228, 229, 0.5);
    --color-system-gray-half-values-gray-75: rgb(227, 228, 229, 0.75);
    --color-system-yellow-half-values-yellow-25: rgb(255, 253, 231, 0.25);
    --color-system-yellow-half-values-yellow-50: rgb(255, 253, 231, 0.5);
    --color-system-yellow-half-values-yellow-75: rgb(255, 253, 231, 0.75);
    --color-system-green-half-values-green-25: rgb(232, 245, 233, 0.25);
    --color-system-green-half-values-green-50: rgb(232, 245, 233, 0.5);
    --color-system-green-half-values-green-75: rgb(232, 245, 233, 0.75);
    --color-system-teal-half-values-teal-25: rgb(200, 255, 244, 0.25);
    --color-system-teal-half-values-teal-50: rgb(200, 255, 244, 0.5);
    --color-system-teal-half-values-teal-75: rgb(200, 255, 244, 0.75);
    --color-system-cyan-half-values-cyan-25: rgb(207, 244, 252, 0.25);
    --color-system-cyan-half-values-cyan-50: rgb(207, 244, 252, 0.5);
    --color-system-cyan-half-values-cyan-75: rgb(207, 244, 252, 0.75);
    --color-system-cyan-half-values-cyan-125: #9eeaf9;
    --color-system-teal-half-values-teal-125: #70efde;
    --color-system-green-half-values-green-125: #c8e6c9;
    --color-system-yellow-half-values-yellow-125: #fff9c4;
    --color-system-orange-half-values-orange-125: #ffccbc;
    --color-system-red-half-values-red-125: #ffcdd2;
    --color-system-pink-half-values-pink-125: #f7d6e6;
    --color-system-purple-half-values-purple-125: #d1cdfb;
    --color-system-indigo-half-values-indigo-125: #c5cae9;
    --color-system-blue-half-values-blue-125: #bbdefb;
    --color-system-gray-half-values-gray-125: #c7c9cb;
    --color-system-gray-white-000: #ffffff;
    --border-border-w-00: 0px;
    --shadow-shadow-2: 2px;
    --shadow-shadow-4: 4px;
    --shadow-shadow-6: 6px;
    --shadow-shadow-8: 8px;
    --shadow-shadow-10: 10px;
    --shadow-shadow-12: 12px;
    --shadow-shadow-14: 14px;
    --shadow-shadow-16: 16px;
    --shadow-shadow-18: 18px;
    --shadow-shadow-20: 20px;
    --shadow-shadow-22: 22px;
    --shadow-shadow-24: 24px;
    --shadow-shadow-26: 26px;
    --color-system-gray-half-values-gray-925: rgb(23, 24, 25, 0.25);
    --color-system-gray-half-values-gray-950: rgb(23, 24, 25, 0.5);
    --color-system-gray-half-values-gray-975: rgb(23, 24, 25, 0.75);
    --shadow-shadow-28: 28px;
    --shadow-shadow-30: 30px;
    --shadow-shadow-0: 0px;
    --color-system-gray-half-values-gray-910: rgb(23, 24, 25, 0.15);
    --color-system-document-range-page-white-000: #ffffff;
    --color-system-document-range-page-025: #f8fafc;
    --color-system-document-range-page-050: #e7e9ed;
    --color-system-document-range-page-400: #63636a;
    --color-system-document-range-half-values-page-25: rgb(211, 213, 217, 0.25);
    --color-system-document-range-half-values-page-50: rgb(211, 213, 217, 0.5);
    --color-system-document-range-half-values-page-75: rgb(211, 213, 217, 0.75);
    --color-system-document-range-half-values-page-910: rgb(32, 32, 40, 0.15);
    --color-system-document-range-half-values-page-925: rgb(32, 32, 40, 0.25);
    --color-system-document-range-half-values-page-950: rgb(32, 32, 40, 0.5);
    --color-system-document-range-half-values-page-975: rgb(32, 32, 40, 0.75);
    --color-system-document-range-page-500: #57575e;
    --color-system-document-range-page-600: #47474f;
    --color-system-document-range-page-700: #383840;
    --color-system-document-range-page-800: #2c2c34;
    --color-system-document-range-page-900: #202028;
    --color-system-document-range-page-black: #000000;
    --color-system-document-range-page-075: #dddfe3;
    --color-system-document-range-page-100: #d3d5d9;
    --color-system-document-range-page-125: #cecfd4;
    --color-system-document-range-page-150: #c0c1c6;
    --color-system-document-range-page-000: #f3f5f8;
    --radius-r-006: 6px;
    --radius-r-010: 10px;
    --radius-r-014: 14px;
    --radius-r-018: 18px;
    --radius-r-022: 22px;
    --radius-r-026: 26px;
    --color-system-document-range-page-300: #87878d;
    --color-system-document-range-page-200: #a7a8ad;
    --color-system-red-red-100: #f9e6e6;
    --color-system-red-red-200: #efc8c8;
    --color-system-red-red-300: #e6acac;
    --color-system-document-range-half-values-page-905: rgb(32, 32, 40, 0.05);
    --color-system-yellow-yellow-050: #fefbe2;
    --color-system-blue-blue-975: #00245c;
    --color-system-indigo-indigo-975: #060e5f;
    --color-system-purple-purple-975: #050320;
    --color-system-red-red-975: #740303;
    --color-system-orange-orange-975: #6b1900;
    --color-system-green-green-975: #083b0b;
    --color-system-yellow-yellow-975: #663f00;
    --color-system-teal-teal-975: #01393b;
    --color-system-cyan-cyan-975: #001114;
    --color-system-pink-pink-975: #0f0007;
    --border-border-w-005: 0.5px;
    --color-system-document-range-half-values-page-000: rgba(255, 255, 255, 0.01);
    --color-system-document-range-half-values-page-black-000: rgba(0, 0, 0, 0.05);
    --color-system-document-range-half-values-page-black-0000: rgba(0, 0, 0, 0.1);
    --text-muted-gray-light: #7e7e8f;
    --text-muted-blue-light: #1e2132;
    --color-system-document-range-page-black-20: rgb(0, 0, 0, 0.2);
    --color-system-document-range-page-white-20: rgba(255, 255, 255, 0.2);
    --color-system-document-range-page-400-20: rgb(99, 99, 105, 0.2);
    --color-system-blue-half-values-blue-200-40: rgb(187, 222, 251, 0.4);
    --color-system-document-range-half-values-page-black-075: rgb(0, 0, 0, 0.75);
    --color-system-green-500-half-value-50: rgba(102, 187, 106, 0.5);
    --color-system-yellow-500-half-value-50: rgba(252, 204, 49, 0.5);
    --color-system-violet-violet-100: #e0d7f4;
    --color-system-violet-violet-200: #c2afe9;
    --color-system-violet-violet-300: #a386de;
    --color-system-violet-violet-400: #855cd3;
    --color-system-violet-violet-500: #6733c8;
    --color-system-violet-violet-600: #52299f;
    --color-system-violet-violet-700: #3d1f76;
    --color-system-violet-violet-800: #28144d;
    --color-system-violet-violet-900: #140a25;
    --color-system-violet-violet-950: #0a0212;
    --color-system-violet-violet-500-20: rgb(103, 51, 200, 0.2);
    --color-system-violet-violet-200-50: rgb(195, 176, 232, 0.5);
  }
}
@layer primitives {
  :root {
    --radius-default-radius: var(--radius-r-012);
    --radius-default-radius-lg: var(--radius-r-016);
    --radius-default-radius-sm: var(--radius-r-004);
    --padding-padding-x-padding-x: var(--spacing-space-012);
    --padding-padding-x-padding-x-lg: var(--spacing-space-020);
    --padding-padding-x-padding-sm-x: var(--spacing-space-004);
    --padding-padding-y-padding-y: var(--spacing-space-012);
    --padding-padding-y-padding-y-lg: var(--spacing-space-020);
    --padding-padding-y-padding-y-sm-x: var(--spacing-space-004);
    --border-border-width-rg: var(--border-border-w-02);
    --color-system-primary-primary-100: var(--color-system-purple-half-values-purple-125);
    --color-system-secondary-secondary-100: var(--color-system-blue-blue-100);
    --color-system-warning-warning-100: var(--color-system-yellow-yellow-100);
    --color-system-danger-danger-025: var(--color-system-red-half-values-red-25);
    --color-system-success-success-100: var(--color-system-green-green-100);
    --color-system-info-info-100: var(--color-system-blue-blue-100);
    --fonts-colors-type-dark-primary-heading: var(--color-system-document-range-page-black);
    --color-system-primary-primary-200: var(--color-system-purple-purple-300);
    --color-system-primary-primary-300: var(--color-system-purple-purple-400);
    --color-system-primary-primary-400: var(--color-system-purple-purple-500);
    --color-system-primary-primary-500: var(--color-system-purple-purple-600);
    --color-system-primary-primary-600: var(--color-system-purple-purple-700);
    --color-system-primary-primary-700: var(--color-system-purple-purple-800);
    --color-system-primary-primary-800: var(--color-system-purple-purple-900);
    --color-system-primary-primary-900: var(--color-system-purple-purple-950);
    --fonts-colors-type-dark-muted: var(--color-system-document-range-page-200);
    --color-system-background-primary-background: var(--color-system-gray-white);
    --color-system-secondary-secondary-200: var(--color-system-blue-blue-200);
    --color-system-secondary-secondary-300: var(--color-system-blue-blue-300);
    --color-system-secondary-secondary-400: var(--color-system-blue-blue-400);
    --color-system-secondary-secondary-500: var(--color-system-blue-blue-500);
    --color-system-secondary-secondary-600: var(--color-system-blue-blue-600);
    --color-system-secondary-secondary-700: var(--color-system-blue-blue-700);
    --color-system-secondary-secondary-800: var(--color-system-blue-blue-800);
    --color-system-secondary-secondary-900: var(--color-system-blue-blue-900);
    --color-system-warning-warning-200: var(--color-system-yellow-yellow-200);
    --color-system-warning-warning-300: var(--color-system-yellow-yellow-300);
    --color-system-warning-warning-400: var(--color-system-yellow-yellow-400);
    --color-system-warning-warning-500-p: var(--color-system-yellow-yellow-500);
    --color-system-warning-warning-600: var(--color-system-yellow-yellow-600);
    --color-system-warning-warning-700: var(--color-system-yellow-yellow-700);
    --color-system-warning-warning-800: var(--color-system-yellow-yellow-800);
    --color-system-warning-warning-900: var(--color-system-yellow-yellow-900);
    --color-system-danger-danger-075: var(--color-system-red-half-values-red-75);
    --color-system-danger-danger-400: var(--color-system-red-red-400);
    --color-system-danger-danger-500: var(--color-system-red-red-500);
    --color-system-danger-danger-050: var(--color-system-red-half-values-red-50);
    --color-system-danger-danger-600: var(--color-system-red-red-600);
    --color-system-danger-danger-700: var(--color-system-red-red-700);
    --color-system-danger-danger-800-p: var(--color-system-red-red-800);
    --color-system-danger-danger-900: var(--color-system-red-red-900);
    --color-system-info-info-200: var(--color-system-blue-blue-200);
    --color-system-info-info-300: var(--color-system-blue-blue-300);
    --color-system-info-info-400: var(--color-system-blue-blue-400);
    --color-system-info-info-700: var(--color-system-blue-blue-700);
    --color-system-info-info-800: var(--color-system-blue-blue-800);
    --color-system-info-info-900: var(--color-system-blue-blue-900);
    --color-system-info-info-500-p: var(--color-system-blue-blue-500);
    --color-system-info-info-600: var(--color-system-blue-blue-600);
    --color-system-success-success-200: var(--color-system-green-green-200);
    --color-system-success-success-300: var(--color-system-green-green-300);
    --color-system-success-success-400-p: var(--color-system-green-green-400);
    --color-system-success-success-700: var(--color-system-green-green-700);
    --color-system-success-success-800: var(--color-system-green-green-800);
    --color-system-success-success-900: var(--color-system-green-green-900);
    --color-system-success-success-500: var(--color-system-green-green-500);
    --color-system-success-success-600: var(--color-system-green-green-600);
    --fonts-colors-type-dark-primary-body: var(--color-system-document-range-page-800);
    --fonts-colors-type-dark-secondary-body: var(--color-system-document-range-page-700);
    --document-primary-card: var(--color-system-gray-white);
    --document-secondary-card: var(--color-system-gray-gray-100);
    --document-tertiary-card: var(--color-system-gray-gray-200);
    --color-system-background-secondary-background: var(--color-system-gray-gray-100);
    --color-system-background-tertiary-background: var(--color-system-gray-gray-300);
    --fonts-colors-type-dark-tertiary-body: var(--color-system-document-range-page-500);
    --radius-default-radius-xl: var(--radius-r-020);
    --radius-default-radius-xxl: var(--radius-r-120);
    --color-system-primary-variables-action-primary-emphasis: var(
			--color-system-primary-primary-300
		);
    --color-system-secondary-variables-action-secondary-emphasis: var(
			--color-system-secondary-secondary-700
		);
    --color-system-success-variables-action-success-emphasis: var(
			--color-system-success-success-900
		);
    --color-system-info-variables-action-info-emphasis: var(--color-system-info-info-900);
    --color-system-warning-variables-action-warning-emphasis: var(
			--color-system-warning-warning-900
		);
    --color-system-danger-variables-action-danger-emphasis: var(
			--color-system-danger-danger-900
		);
    --fonts-colors-type-dark-secondary-heading: var(--color-system-document-range-page-800);
    --padding-padding-y-padding-y-xl: var(--spacing-space-032);
    --padding-padding-y-padding-y-xxl: var(--spacing-space-128);
    --padding-padding-x-padding-x-xl: var(--spacing-space-032);
    --padding-padding-x-padding-x-xxl: var(--spacing-space-128);
    --padding-padding-between-padding-between-sm: var(--spacing-space-004);
    --padding-padding-between-padding-between: var(--spacing-space-012);
    --padding-padding-between-padding-between-lg: var(--spacing-space-020);
    --padding-padding-between-padding-between-xl: var(--spacing-space-032);
    --padding-padding-between-padding-between-xxl: var(--spacing-space-128);
    --color-system-disabled-disabled-100: var(--color-system-gray-half-values-gray-50);
    --color-system-disabled-disabled-200: var(--color-system-gray-half-values-gray-125);
    --color-system-disabled-disabled-300: var(--color-system-gray-gray-300);
    --color-system-disabled-disabled-400: var(--color-system-gray-gray-400);
    --color-system-disabled-disabled-500: var(--color-system-gray-gray-500);
    --color-system-disabled-disabled-600: var(--color-system-gray-gray-600);
    --color-system-disabled-disabled-700: var(--color-system-gray-gray-700);
    --color-system-disabled-disabled-800: var(--color-system-gray-gray-800);
    --color-system-disabled-disabled-900: var(--color-system-gray-gray-900);
    --border-border-width-lg: var(--border-border-w-03);
    --color-system-disabled-variables-action-disabled-emphasis: var(
			--color-system-disabled-disabled-300
		);
    --color-system-primary-variables-action-primary-active: var(
			--color-system-primary-primary-700
		);
    --color-system-secondary-variables-action-secondary-active: var(
			--color-system-secondary-secondary-600
		);
    --color-system-success-variables-action-success-active: var(
			--color-system-success-success-600
		);
    --color-system-info-variables-action-info-active: var(--color-system-info-info-700);
    --color-system-warning-variables-action-warning-active: var(
			--color-system-warning-warning-700
		);
    --color-system-danger-variables-action-danger-active: var(--color-system-danger-danger-700);
    --color-system-danger-variables-action-danger-hover: var(--color-system-danger-danger-600);
    --color-system-warning-variables-action-warning-hover: var(
			--color-system-warning-warning-600
		);
    --color-system-info-variables-action-info-hover: var(--color-system-info-info-600);
    --color-system-success-variables-action-success-hover: var(
			--color-system-success-success-500
		);
    --color-system-secondary-variables-action-secondary-hover: var(
			--color-system-secondary-secondary-500
		);
    --color-system-disabled-variables-action-disabled-hover: var(
			--color-system-disabled-disabled-200
		);
    --color-system-primary-variables-action-primary-hover: var(
			--color-system-primary-primary-600
		);
    --color-system-primary-variables-action-primary: var(--color-system-primary-primary-500);
    --color-system-disabled-variables-action-disabled: var(
			--color-system-disabled-disabled-100
		);
    --fonts-colors-type-light-primary: var(--color-system-document-range-page-000);
    --fonts-colors-type-light-secondary: var(--color-system-document-range-page-300);
    --fonts-colors-type-light-muted: var(--color-system-document-range-page-600);
    --fonts-colors-type-actions-dark-primary: var(
			--color-system-primary-variables-action-primary-dark
		);
    --fonts-colors-type-actions-dark-secondary: var(
			--color-system-secondary-variables-action-secondary-dark
		);
    --fonts-colors-type-actions-dark-info: var(--color-system-info-variables-action-info-dark);
    --fonts-colors-type-actions-dark-success: var(
			--color-system-success-variables-action-success-dark
		);
    --fonts-colors-type-actions-dark-warning: var(
			--color-system-warning-variables-action-warning-dark
		);
    --fonts-colors-type-actions-dark-danger: var(
			--color-system-danger-variables-action-danger-dark
		);
    --color-system-secondary-variables-action-secondary: var(
			--color-system-secondary-secondary-400
		);
    --color-system-success-variables-action-success: var(--color-system-success-success-400-p);
    --color-system-info-variables-action-info: var(--color-system-info-info-500-p);
    --color-system-warning-variables-action-warning: var(--color-system-warning-warning-500-p);
    --color-system-danger-variables-action-danger: var(--color-system-danger-danger-500);
    --color-system-primary-variables-focus-primary-focus: var(
			--color-system-primary-primary-050
		);
    --color-system-primary-variables-focus-primary-focus-emphasis: var(
			--color-system-primary-primary-400
		);
    --color-system-disabled-variables-focus-disabled-focus: var(
			--color-system-disabled-disabled-100
		);
    --color-system-disabled-variables-focus-disabled-focus-emphasis: var(
			--color-system-disabled-disabled-200
		);
    --color-system-secondary-variables-focus-secondary-focus: var(
			--color-system-secondary-secondary-100
		);
    --color-system-secondary-variables-focus-secondary-focus-emphasis: var(
			--color-system-secondary-secondary-500
		);
    --color-system-success-variables-focus-success-focus: var(
			--color-system-success-success-100
		);
    --color-system-success-variables-focus-success-focus-emphasis: var(
			--color-system-success-success-200
		);
    --color-system-info-variables-focus-info-focus: var(--color-system-info-info-100);
    --color-system-info-variables-focus-info-focus-emphasis: var(--color-system-info-info-400);
    --color-system-warning-variables-focus-warning-focus: var(
			--color-system-warning-warning-100
		);
    --color-system-warning-variables-focus-warning-focus-emphasis: var(
			--color-system-warning-warning-400
		);
    --color-system-danger-variables-focus-danger-focus: var(--color-system-danger-danger-025);
    --color-system-danger-variables-focus-danger-focus-emphasis: var(
			--color-system-danger-danger-400
		);
    --focus-focus-width: var(--border-border-w-04);
    --focus-focus-width-lg: var(--border-border-w-06);
    --focus-focus-width-sm: var(--border-border-w-02);
    --document-bg-primary: var(--color-system-indigo-indigo-100);
    --document-emphasis-bg: var(--color-system-cyan-cyan-100);
    --document-emphasis-primary: var(--color-system-blue-blue-500);
    --document-emphasis-seondary: var(--color-system-blue-blue-200);
    --radius-default-radius-circle: var(--radius-r-240);
    --border-border-width-na: var(--border-border-w-00);
    --radius-default-radius-x-sm: var(--radius-r-002);
    --color-system-background-page-background: var(--color-system-gray-gray-200);
    --border-border-width-sm: var(--border-border-w-01);
    --radius-default-radius-x-na: var(--radius-r-000);
    --shadows-color-shadow-a: var(--color-system-document-range-half-values-page-910);
    --document-branded-a: #f00c02;
    --color-system-subtle-variables-action-subtle: var(--color-system-subtle-subtle-100);
    --color-system-subtle-variables-action-subtle-emphasis: var(
			--color-system-subtle-subtle-200
		);
    --color-system-subtle-variables-action-subtle-hover: var(--color-system-subtle-subtle-300);
    --color-system-subtle-variables-action-subtle-active: var(--color-system-subtle-subtle-500);
    --color-system-subtle-variables-focus-subtle-focus: var(--color-system-subtle-subtle-025);
    --color-system-subtle-variables-focus-subtle-focus-emphasis: var(
			--color-system-subtle-subtle-100
		);
    --color-system-subtle-subtle-100: var(--color-system-document-range-page-100);
    --color-system-subtle-subtle-200: var(--color-system-document-range-page-200);
    --color-system-subtle-subtle-300: var(--color-system-document-range-page-300);
    --color-system-subtle-subtle-400: var(--color-system-document-range-page-400);
    --color-system-subtle-subtle-500: var(--color-system-document-range-page-500);
    --color-system-subtle-subtle-600: var(--color-system-document-range-page-600);
    --color-system-subtle-subtle-700: var(--color-system-document-range-page-700);
    --color-system-subtle-subtle-800: var(--color-system-document-range-page-800);
    --color-system-subtle-subtle-900: var(--color-system-document-range-page-900);
    --color-system-subtle-subtle-125: var(--color-system-document-range-page-125);
    --color-system-subtle-subtle-025: var(--color-system-document-range-page-025);
    --color-system-subtle-subtle-050: var(--color-system-document-range-page-050);
    --color-system-subtle-subtle-075: var(--color-system-document-range-page-075);
    --border-border-border-10: var(--color-system-subtle-subtle-100);
    --border-border-border-20: var(--color-system-subtle-subtle-200);
    --color-system-subtle-subtle-000: var(--color-system-document-range-page-white-000);
    --border-border-border-30: var(--color-system-disabled-disabled-300);
    --color-system-primary-primary-050: var(--color-system-purple-half-values-purple-50);
    --color-system-primary-primary-075: var(--color-system-purple-half-values-purple-75);
    --color-system-primary-primary-125: var(--color-system-purple-purple-200);
    --color-system-primary-primary-025: var(--color-system-purple-half-values-purple-25);
    --border-border-border-05: var(--color-system-subtle-subtle-075);
    --fonts-colors-type-dark-disabled: var(--color-system-document-range-page-125);
    --color-system-subtle-variables-focus-subtle-focus-hover: var(
			--color-system-subtle-subtle-050
		);
    --color-system-subtle-variables-focus-subtle-focus-active: var(
			--color-system-subtle-subtle-075
		);
    --color-system-primary-variables-focus-primary-focus-hover: var(
			--color-system-primary-primary-075
		);
    --color-system-primary-variables-focus-primary-focus-active: var(
			--color-system-primary-primary-100
		);
    --color-system-secondary-variables-focus-secondary-focus-hover: var(
			--color-system-secondary-secondary-200
		);
    --color-system-secondary-variables-focus-secondary-focus-active: var(
			--color-system-secondary-secondary-300
		);
    --color-system-success-variables-focus-success-focus-hover: var(
			--color-system-success-success-200
		);
    --color-system-success-variables-focus-success-focus-active: var(
			--color-system-success-success-300
		);
    --color-system-info-variables-focus-info-focus-hover: var(--color-system-info-info-200);
    --color-system-info-variables-focus-info-focus-active: var(--color-system-info-info-300);
    --color-system-warning-variables-focus-warning-focus-hover: var(
			--color-system-warning-warning-200
		);
    --color-system-warning-variables-focus-warning-focus-active: var(
			--color-system-warning-warning-300
		);
    --color-system-danger-variables-focus-danger-focus-hover: var(
			--color-system-danger-danger-050
		);
    --color-system-danger-variables-focus-danger-focus-active: var(
			--color-system-danger-danger-075
		);
    --border-border-border-40: var(--color-system-subtle-subtle-400);
    --border-border-border-flag: var(--color-system-subtle-subtle-500);
    --fonts-colors-type-actions-light-primary: var(
			--color-system-primary-variables-focus-primary-focus
		);
    --fonts-colors-type-actions-light-secondary: var(
			--color-system-secondary-variables-focus-secondary-focus
		);
    --fonts-colors-type-actions-light-info: var(--color-system-info-variables-focus-info-focus);
    --fonts-colors-type-actions-light-success: var(
			--color-system-success-variables-focus-success-focus-emphasis
		);
    --fonts-colors-type-actions-light-warning: var(
			--color-system-warning-variables-focus-warning-focus
		);
    --fonts-colors-type-actions-light-danger: var(
			--color-system-danger-variables-focus-danger-focus
		);
    --radius-nested-nested-radius-x-na: var(--radius-r-000);
    --radius-nested-nested-radius-x-sm: var(--radius-r-000);
    --radius-nested-nested-radius-sm: var(--radius-r-000);
    --radius-nested-nested-radius: var(--radius-r-008);
    --radius-nested-nested-radius-lg: var(--radius-r-012);
    --radius-nested-nested-radius-xl: var(--radius-r-016);
    --radius-nested-nested-radius-xxl: var(--radius-r-120);
    --radius-nested-nested-radius-circle: var(--radius-r-240);
    --shadows-color-shadow-b: var(--color-system-gray-half-values-gray-950);
    --shadows-color-shadow-c: var(--color-system-gray-half-values-gray-950);
    --border-colors-dark-primary: var(--color-system-primary-variables-action-primary);
    --border-colors-dark-secondary: var(--color-system-secondary-variables-action-secondary);
    --border-colors-dark-info: var(--color-system-info-variables-action-info-emphasis);
    --border-colors-dark-success: var(--color-system-success-variables-action-success-emphasis);
    --border-colors-dark-warning: var(--color-system-warning-variables-action-warning-emphasis);
    --border-colors-dark-danger: var(--color-system-danger-variables-action-danger-emphasis);
    --border-colors-light-primary: var(--color-system-primary-variables-focus-primary-focus);
    --border-colors-light-secondary: var(
			--color-system-secondary-variables-focus-secondary-focus
		);
    --border-colors-light-info: var(--color-system-info-variables-focus-info-focus-emphasis);
    --border-colors-light-success: var(
			--color-system-success-variables-focus-success-focus-emphasis
		);
    --border-colors-light-warning: var(
			--color-system-warning-variables-focus-warning-focus-emphasis
		);
    --border-colors-light-danger: var(--color-system-danger-variables-focus-danger-focus);
    --color-system-danger-danger-100: var(--color-system-red-red-100);
    --color-system-danger-danger-200: var(--color-system-red-red-200);
    --color-system-danger-danger-300: var(--color-system-red-red-300);
    --document-branded-b: #f00c02;
    --document-branded-c: #740500;
    --color-system-subtle-variables-focus-subtle-focus-dark: var(
			--color-system-subtle-subtle-975
		);
    --color-system-primary-variables-action-primary-dark: var(
			--color-system-primary-primary-975
		);
    --color-system-secondary-variables-action-secondary-dark: var(
			--color-system-secondary-secondary-975
		);
    --color-system-success-variables-action-success-dark: var(
			--color-system-success-success-975
		);
    --color-system-info-variables-action-info-dark: var(--color-system-info-info-975);
    --color-system-warning-variables-action-warning-dark: var(
			--color-system-warning-warning-975
		);
    --color-system-danger-variables-action-danger-dark: var(--color-system-danger-danger-975);
    --color-system-danger-danger-975: var(--color-system-red-red-975);
    --color-system-warning-warning-975: var(--color-system-yellow-yellow-975);
    --color-system-info-info-975: var(--color-system-blue-blue-975);
    --color-system-success-success-975: var(--color-system-green-green-975);
    --color-system-secondary-secondary-975: var(--color-system-blue-blue-975);
    --color-system-subtle-subtle-975: var(--color-system-document-range-page-black);
    --color-system-primary-primary-975: var(--color-system-purple-purple-975);
    --fonts-colors-type-actions-default-primary: var(
			--color-system-primary-variables-action-primary
		);
    --fonts-colors-type-actions-default-secondary: var(
			--color-system-secondary-variables-action-secondary
		);
    --fonts-colors-type-actions-default-info: var(--color-system-info-variables-action-info);
    --fonts-colors-type-actions-default-success: var(
			--color-system-success-variables-action-success
		);
    --fonts-colors-type-actions-default-warning: var(
			--color-system-warning-variables-action-warning
		);
    --fonts-colors-type-actions-default-danger: var(
			--color-system-danger-variables-action-danger
		);
    --fonts-colors-type-dark-disabled-overlay: var(--color-system-document-range-page-200);
    --padding-padding-x-padding-sm: var(--spacing-space-008);
    --padding-padding-y-padding-y-sm: var(--spacing-space-008);
    --color-system-secondary-secondary-075: var(--color-system-blue-half-values-blue-75);
    --color-system-secondary-secondary-050: var(--color-system-blue-half-values-blue-50);
    --color-system-secondary-secondary-025: var(--color-system-blue-half-values-blue-25);
    --border-border-width-x-sm: var(--border-border-w-005);
    --color-system-subtle-subtle-0000: var(--color-system-document-range-half-values-page-000);
    --color-system-subtle-subtle-1000: var(
			--color-system-document-range-half-values-page-black-000
		);
    --color-system-subtle-subtle-1050: var(
			--color-system-document-range-half-values-page-black-0000
		);
    --fonts-colors-type-dark-subtle: var(--color-system-document-range-page-100);
  }
}
@layer components {
  :root {
    color-scheme: light;
    --svg-icon-filter: invert(0);
    --sidebar-svg-icon-filter: invert(1);
    --header-primary-color: var(--color-system-dark-gray-blue);
    --header-secondary-color: var(--color-system-red-orange);
    --sidebar-bg-color: var(--color-system-dark-gray-blue);
    --sidebar-text-color: var(--color-system-gray-white);
    --content-bg-color: var(--color-system-gray-gray-50);
    --typography-text-dark-sub-content-text: var(--text-muted-gray-light);
    --typography-text-dark-sub-content-metric: var(--text-muted-blue-light);
    --document-component-frame-comp-bg: var(--color-system-gray-white);
    --breadcrumb-text-breadcrumb-txt-active: var(--color-system-document-range-page-800);
    --breadcrumb-icon-breadcrumb-icon-active: var(--color-system-document-range-page-800);
    --breadcrumb-text-breadcrumb-txt-inactive: var(--color-system-document-range-page-200);
    --breadcrumb-icon-breadcrumb-icon-inactive: var(--color-system-document-range-page-125);
    --typography-text-dark-primary-heading: var(--color-system-document-range-page-black);
    --card-color: var(--color-system-gray-white);
    --card-color-hover: var(--color-system-white-nutral-100);
    --card-color-text-color: var(--color-system-gray-black);
    --card-color-border-color: var(--color-system-gray-gray-100);
    --input-box-color-border-color: var(--color-system-gray-gray-300);
    --primary-text-color: var(--color-system-gray-black);
    --secondary-text-color: var(--color-system-gray-gray-300);
    --tertiary-text-color: var(--color-system-blue-blue-700);
    --task-tag-color: var(--color-system-purple-purple-200);
    --task-filter-active-bg: var(--color-system-purple-purple-200-40);
    --typography-text-dark-primary-body: var(--color-system-document-range-page-800);
    --button-custom-primary-color-bg: var(--color-system-blue-blue-700);
    --button-custom-secondary-color-bg: var(--color-system-gray-white-000);
    --button-custom-default-color-text: var(--color-system-document-range-page-white-000);
    --button-custom-secondary-color-text: var(--color-system-document-range-page-black);
    --button-custom-secondary-color-outline: var(--color-system-document-range-page-100);
    --button-custom-tertiary-color-outline-focus: var(--color-system-orange-orange-900);
    --button-custom-primary-color-bg-hover: var(--color-system-blue-blue-500);
    --button-custom-secondary-color-bg-hover: var(--color-system-document-range-page-075);
    --status-indicator-color-bg: var(--color-system-document-range-page-black-20);
    --priority-indicator-color-bg: var(--color-system-violet-violet-500-20);
    --upgrade-button-color-bg: var(--color-system-gray-white-000);
    --dashboard-header-color-bg: var(--color-system-gray-gray-800);
    --dialog-modal-color-bg: var(--color-system-document-range-half-values-page-black-075);
    --dialog-form-modal-title-color-bg: var(--color-system-document-range-page-white-000);
    --dialog-form-modal-title-color-text: var(--color-system-document-range-page-black);
    --filter-bg: var(--color-system-white-nutral-100);
    --filter-text-color: var(--color-system-gray-gray-600);
    --filter-frame-bg-color: var(--color-system-gray-white);
    --filter-hover: var(--color-system-white-nutral-100);
    --filter-checkbox-bg: var(--color-system-gray-black);
    --filter-checkbox-icon: invert(0);
    --document-status-indicator-color-bg-active: var(--color-system-green-500-half-value-50);
    --document-status-indicator-color-bg-archive: var(--color-system-yellow-500-half-value-50);
    --border-color: var(--color-system-gray-gray-100);
    --dropdown-hover-bg-color: var(--color-system-gray-gray-100);
    --table-header-bg: var(--form-state-default-bg);
    --table-border: var(--form-border-deault);
    --input-box-active-state-border: var(--color-system-blue-blue-400);
    --input-box-error-state-border: var(--color-system-red-red-500);
    --input-box-warning-state-border: var(--color-system-yellow-yellow-500);
    --task-filter-text-color: var(--color-system-purple-purple-600);
    --document-component-frame-state-primary-border: var(--document-branded-a);
    --document-component-frame-state-primary-weight: var(--border-border-w-05);
    --button-radius-btn-radius: var(--radius-default-radius);
    --button-radius-btn-radius-sm: var(--radius-default-radius);
    --button-radius-btn-radius-lg: var(--radius-default-radius);
    --document-frame-space-spacing-x: var(--padding-padding-x-padding-x-lg);
    --document-frame-space-spacing-y: var(--padding-padding-y-padding-y-lg);
    --document-frame-space-spacing-between: var(--padding-padding-between-padding-between-xxl);
    --document-component-frame-comp-radius: var(--radius-r-018);
    --document-frame-space-page-design: var(--padding-padding-x-padding-x-lg);
    --alert-radius-alert-radiuseses: var(--radius-default-radius);
    --alert-space-padding-y-alert-padding-y: var(--padding-padding-y-padding-y-sm);
    --alert-space-padding-x-alert-padding-x: var(--padding-padding-x-padding-x);
    --alert-states-success-subtle-success-s-bg: var(--color-system-success-success-100);
    --alert-states-success-emphasis-alert-success-border: var(
			--color-system-success-success-400-p
		);
    --alert-states-success-subtle-alert-success-icon: var(
			--typography-icon-colors-dark-success
		);
    --alert-states-info-subtle-alert-info-s-bg: var(--color-system-info-info-100);
    --alert-states-info-emphasis-alert-info-border: var(--color-system-info-info-500-p);
    --alert-states-info-subtle-alert-info-icon: var(--typography-icon-colors-dark-info);
    --alert-states-warning-subtle-alert-warning-s-bg: var(--color-system-warning-warning-100);
    --alert-states-warning-emphasis-alert-warning-border: var(
			--color-system-warning-warning-800
		);
    --alert-states-warning-subtle-alert-warning-icon: var(
			--typography-icon-colors-dark-warning
		);
    --alert-states-danger-subtle-alert-danger-s-bg: var(--color-system-danger-danger-075);
    --alert-states-danger-emphasis-alert-danger-border: var(--color-system-danger-danger-500);
    --alert-states-danger-subtle-alert-danger-icon: var(--typography-icon-colors-dark-danger);
    --typography-text-dark-secondary-heading: var(--fonts-colors-type-dark-secondary-heading);
    --typography-text-dark-secondary-body: var(--fonts-colors-type-dark-secondary-body);
    --typography-text-dark-tertiary-body: var(--fonts-colors-type-dark-tertiary-body);
    --typography-text-dark-disabled: var(
			--color-system-disabled-variables-action-disabled-emphasis
		);
    --alert-space-padding-between-alert-padding-between: var(
			--padding-padding-between-padding-between
		);
    --document-component-title-title-border: var(--border-border-width-rg);
    --document-component-title-title-space-between: var(
			--padding-padding-between-padding-between
		);
    --document-component-title-header: var(--fonts-colors-type-dark-primary-heading);
    --document-component-title-title-border-color: var(--border-border-border-10);
    --document-component-title-title-space-y: var(--padding-padding-y-padding-y-lg);
    --typography-icon-dark-secondary: var(--fonts-colors-type-dark-muted);
    --typography-text-light-primary-heading: var(--fonts-colors-type-light-primary);
    --typography-text-light-secondary-heading: var(--fonts-colors-type-light-secondary);
    --typography-text-light-disabled: var(--fonts-colors-type-light-muted);
    --typography-icon-light-primary: var(--fonts-colors-type-light-primary);
    --typography-icon-light-secondary: var(--fonts-colors-type-light-secondary);
    --typography-icon-light-disabled: var(--fonts-colors-type-light-muted);
    --button-states-high-btn-bg: var(--color-system-primary-variables-action-primary);
    --button-states-high-btn-bg-hover: var(
			--color-system-primary-variables-action-primary-hover
		);
    --button-states-high-btn-bg-active: var(
			--color-system-primary-variables-action-primary-active
		);
    --button-states-high-btn-bg-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --button-states-high-btn-focus: var(--color-system-primary-variables-focus-primary-focus);
    --button-states-high-btn-txt: var(--fonts-colors-type-light-primary);
    --button-states-high-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
    --button-focus-btn-focus-width: var(--focus-focus-width);
    --button-states-low-btn-bg: var(--color-system-subtle-subtle-075);
    --button-states-low-btn-bg-hover: var(--color-system-subtle-subtle-100);
    --button-states-low-btn-bg-active: var(--color-system-subtle-subtle-200);
    --button-states-low-btn-bg-disabled: var(--color-system-disabled-variables-action-disabled);
    --button-states-low-btn-focus: var(--color-system-subtle-subtle-050);
    --button-states-low-btn-txt: var(--fonts-colors-type-dark-primary-body);
    --button-states-low-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
    --button-states-danger-btn-bg: var(--color-system-danger-variables-action-danger);
    --button-states-danger-btn-bg-hover: var(
			--color-system-danger-variables-action-danger-hover
		);
    --button-states-danger-btn-bg-active: var(
			--color-system-danger-variables-action-danger-active
		);
    --button-states-danger-btn-bg-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --button-states-danger-btn-focus: var(
			--color-system-danger-variables-focus-danger-focus-active
		);
    --button-states-danger-btn-txt: var(--fonts-colors-type-light-primary);
    --button-states-danger-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
    --document-frame-frame-bg: var(--color-system-document-range-page-900);
    --document-frame-content-example-bg: var(--color-system-document-range-page-025);
    --document-frame-frame-radius: var(--radius-r-028);
    --alert-border-alert-border-width: var(--border-border-width-na);
    --button-states-high-outline-btn-outline: var(--color-system-primary-primary-500);
    --button-states-high-outline-btn-outline-hover: var(--color-system-primary-primary-500);
    --button-states-high-outline-btn-outline-active: var(--color-system-primary-primary-500);
    --button-states-high-outline-btn-focus: var(--color-system-primary-primary-075);
    --button-states-high-outline-btn-txt: var(--fonts-colors-type-light-primary);
    --button-states-high-outline-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
    --button-icon-btn-icon-pho: var(--typography-icon-pho);
    --typography-icon-pho: var(--generic-states-divider-pho);
    --button-icon-btn-icon-invert: var(--typography-icon-light-primary);
    --button-states-high-outline-btn-bg: var(--color-system-primary-primary-300);
    --button-states-high-outline-btn-bg-hover: var(--color-system-primary-primary-400);
    --button-states-high-outline-btn-bg-active: var(--color-system-primary-primary-500);
    --button-border-btn-border-width: var(--border-border-width-rg);
    --button-states-low-outline-btn-outline: var(--color-system-subtle-subtle-100);
    --button-states-low-outline-btn-bg: var(--color-system-subtle-subtle-000);
    --button-states-low-outline-btn-outline-hover: var(--color-system-subtle-subtle-200);
    --button-states-low-outline-btn-bg-hover: var(--color-system-subtle-subtle-025);
    --button-states-low-outline-btn-outline-active: var(--color-system-subtle-subtle-200);
    --button-states-low-outline-btn-bg-active: var(--color-system-subtle-subtle-075);
    --button-states-low-outline-btn-focus: var(--color-system-subtle-subtle-050);
    --button-states-low-outline-btn-txt: var(--fonts-colors-type-dark-primary-body);
    --button-states-low-outline-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
    --button-states-danger-outline-btn-outline: var(
			--color-system-danger-variables-action-danger
		);
    --button-states-danger-outline-btn-bg: var(--color-system-danger-danger-025);
    --button-states-danger-outline-btn-outline-hover: var(
			--color-system-danger-variables-action-danger-hover
		);
    --button-states-danger-outline-btn-bg-hover: var(
			--color-system-danger-variables-focus-danger-focus
		);
    --button-states-danger-outline-btn-outline-active: var(
			--color-system-danger-variables-action-danger
		);
    --button-states-danger-outline-btn-bg-active: var(
			--color-system-danger-variables-focus-danger-focus-active
		);
    --button-states-danger-outline-btn-focus: var(
			--color-system-danger-variables-focus-danger-focus-active
		);
    --button-states-danger-outline-btn-txt: var(--color-system-danger-variables-action-danger);
    --button-states-danger-outline-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
    --button-states-text-btn-txt: var(--color-system-primary-variables-action-primary);
    --button-states-text-btn-txt-hover: var(
			--color-system-primary-variables-action-primary-hover
		);
    --button-states-text-btn-txt-active: var(
			--color-system-primary-variables-action-primary-active
		);
    --button-states-text-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
    --badge-radius-badge-radiuses: var(--radius-default-radius-sm);
    --badge-states-primary-subtle-badge-primary-bg: var(
			--color-system-primary-variables-focus-primary-focus-hover
		);
    --badge-states-primary-subtle-badge-primary-txt: var(--typography-text-dark-primary-body);
    --badge-states-primary-default-badge-primary-bg: var(
			--color-system-primary-variables-action-primary
		);
    --badge-states-primary-default-badge-primary-txt: var(
			--typography-text-light-primary-heading
		);
    --badge-states-warning-default-badge-warning-bg: var(
			--color-system-warning-variables-action-warning
		);
    --badge-states-warning-default-badge-warning-txt: var(--typography-text-dark-primary-body);
    --badge-states-danger-default-badge-danger-bg: var(
			--color-system-danger-variables-action-danger-emphasis
		);
    --badge-states-danger-default-badge-danger-txt: var(
			--typography-text-light-primary-heading
		);
    --badge-states-secondary-default-badge-secondary-bg: var(
			--color-system-secondary-variables-action-secondary
		);
    --badge-states-secondary-default-badge-secondary-txt: var(
			--typography-text-light-primary-heading
		);
    --badge-border-badge-border-width: var(--border-border-width-na);
    --checkbox-icon-chck-box-icon-primary: var(--typography-icon-light-primary);
    --checkbox-space-padding-y-chck-box-padding-y: var(--padding-padding-y-padding-y);
    --checkbox-space-padding-x-chck-box-padding-x: var(--padding-padding-x-padding-x);
    --checkbox-space-padding-between-chck-box-padding-between-sm: var(
			--padding-padding-between-padding-between
		);
    --checkbox-radius-chck-box-radius-sm: var(--radius-default-radius-x-sm);
    --checkbox-focus-chck-box-focus-width: var(--focus-focus-width);
    --checkbox-radius-chck-box-focus-radius: var(--radius-default-radius-circle);
    --checkbox-border-chck-box-border-width: var(--border-border-width-rg);
    --checkbox-states-primary-chck-box-bg: var(--color-system-subtle-subtle-900);
    --checkbox-states-primary-chck-box-bg-active: var(--color-system-subtle-subtle-900);
    --checkbox-states-disabled-chck-box-bg-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --checkbox-states-primary-chck-box-focus: var(
			--color-system-subtle-variables-focus-subtle-focus-active
		);
    --checkbox-states-primary-chck-box-txt: var(--fonts-colors-type-dark-primary-body);
    --checkbox-states-disabled-chck-box-txt-disabled: var(--fonts-colors-type-dark-disabled);
    --checkbox-states-disabled-chck-box-border-disabled: var(
			--color-system-disabled-variables-action-disabled-hover
		);
    --checkbox-states-primary-chck-box-border: var(--color-system-subtle-subtle-900);
    --checkbox-states-primary-chck-box-hover: var(
			--color-system-subtle-variables-focus-subtle-focus-active
		);
    --radio-states-primary-radio-bg: var(--color-system-primary-variables-action-primary);
    --radio-states-primary-radio-border: var(--color-system-primary-variables-action-primary);
    --radio-states-primary-radio-hover: var(
			--color-system-primary-variables-focus-primary-focus
		);
    --radio-states-disabled-radio-bg-disabled: var(
			--color-system-disabled-variables-action-disabled-emphasis
		);
    --radio-states-primary-radio-focus: var(
			--color-system-primary-variables-focus-primary-focus-emphasis
		);
    --radio-states-disabled-radio-border-disabled: var(
			--color-system-disabled-variables-action-disabled-emphasis
		);
    --radio-states-primary-radio-txt: var(--fonts-colors-type-dark-primary-body);
    --radio-states-disabled-radio-txt-disabled: var(--fonts-colors-type-dark-tertiary-body);
    --radio-space-padding-y-radio-padding-y: var(--padding-padding-y-padding-y);
    --radio-space-padding-x-radio-padding-x: var(--padding-padding-x-padding-sm-x);
    --radio-space-padding-between-radio-padding-between: var(
			--padding-padding-between-padding-between-lg
		);
    --radio-radius-radio-radius-sm: var(--radius-default-radius-sm);
    --radio-focus-radio-focus-width: var(--focus-focus-width);
    --radio-radius-radio-focus-radius: var(--radius-default-radius-circle);
    --radio-border-radio-border-width: var(--border-border-width-rg);
    --breadcrumb-space-padding-y-breadcrumb-padding-y: var(--padding-padding-y-padding-y);
    --breadcrumb-space-padding-x-breadcrumb-padding-x: var(--padding-padding-x-padding-x);
    --breadcrumb-space-padding-between-breadcrumb-padding-between: var(
			--padding-padding-between-padding-between
		);
    --toast-radius-toast-radiuseses: var(--radius-default-radius);
    --toast-states-success-toast-success-header-bg: var(
			--color-system-success-variables-action-success
		);
    --toast-states-success-toast-success-body-bg: var(
			--color-system-background-primary-background
		);
    --toast-states-info-toast-info-header-bg: var(--color-system-info-variables-action-info);
    --toast-states-warning-toast-warning-header-bg: var(
			--color-system-warning-variables-action-warning
		);
    --toast-states-danger-toast-danger-header-bg: var(
			--color-system-danger-variables-action-danger
		);
    --toast-space-padding-between-toast-padding-between: var(
			--padding-padding-between-padding-between
		);
    --toast-states-default-toast-default-header-bg: var(--color-system-subtle-subtle-025);
    --toast-states-default-toast-default-body-bg: var(
			--color-system-background-primary-background
		);
    --toast-icon-toast-icon-primary: var(--color-system-document-range-page-800);
    --toast-text-toast-default-txt: var(--fonts-colors-type-dark-primary-body);
    --toast-text-toast-time-txt: var(--fonts-colors-type-dark-tertiary-body);
    --toast-states-info-toast-info-body-bg1: var(--color-system-background-primary-background);
    --toast-states-warning-toast-warning-body-bg: var(
			--color-system-background-primary-background
		);
    --toast-states-danger-toast-danger-body-bg: var(
			--color-system-background-primary-background
		);
    --breadcrumb-text-breadcrumb-txt-divider: var(--fonts-colors-type-light-secondary);
    --alert-icon-alert-general-icon-default: var(--color-system-document-range-page-800);
    --radio-states-disabled-radio-bg-disabled-hover: var(
			--color-system-disabled-variables-focus-disabled-focus
		);
    --radio-states-disabled-radio-bg-disabled-active: var(
			--color-system-disabled-variables-focus-disabled-focus-emphasis
		);
    --tooltip-space-padding-y-tooltip-padding-y: var(--padding-padding-y-padding-y);
    --tooltip-radius-tooltip-radius: var(--radius-default-radius);
    --tooltip-space-padding-x-tooltip-padding-x: var(--padding-padding-x-padding-x);
    --tooltip-states-light-tooltip-bg-light: var(--color-system-subtle-subtle-000);
    --tooltip-text-tooltip-default-txt-dark: var(--fonts-colors-type-dark-primary-body);
    --tooltip-states-dark-tooltip-bg-dark: var(--color-system-subtle-subtle-700);
    --tooltip-space-padding-between-toast-padding-between: var(
			--padding-padding-between-padding-between
		);
    --stepper-states-active-stepper-active-step-txt: var(--fonts-colors-type-light-primary);
    --stepper-states-active-stepper-active-icon: var(--typography-icon-light-primary);
    --stepper-states-todo-stepper-todo-icon: var(--color-system-document-range-page-800);
    --stepper-states-todo-stepper-todo-step-txt: var(--fonts-colors-type-dark-primary-body);
    --stepper-space-padding-y-stepper-padding-y: var(--padding-padding-y-padding-y);
    --stepper-space-padding-x-stepper-padding-x: var(--padding-padding-x-padding-x);
    --stepper-space-padding-between-stepper-padding-between: var(
			--padding-padding-between-padding-between
		);
    --stepper-states-active-stepper-active-bg: var(
			--color-system-primary-variables-action-primary
		);
    --stepper-states-todo-stepper-todo-bg: var(
			--color-system-disabled-variables-action-disabled-emphasis
		);
    --stepper-radius-stepper-focus-radius: var(--radius-default-radius-circle);
    --stepper-states-active-stepper-active-txt: var(--fonts-colors-type-dark-primary-body);
    --stepper-states-todo-stepper-todo-txt: var(--fonts-colors-type-dark-tertiary-body);
    --stepper-states-complete-stepper-complete-step-txt: var(--fonts-colors-type-dark-muted);
    --stepper-states-complete-stepper-complete-bg: var(
			--color-system-disabled-variables-action-disabled
		);
    --stepper-states-complete-stepper-complete-txt: var(--fonts-colors-type-dark-primary-body);
    --stepper-states-complete-stepper-complete-icon: var(
			--color-system-document-range-page-800
		);
    --stepper-border-stepper-border-width: var(--border-border-width-sm);
    --stepper-border-stepper-complete-stroke: var(--border-border-border-10);
    --stepper-border-stepper-todo-stroke: var(--border-border-border-30);
    --document-frame-title-breadcrumb-icon: var(--document-branded-a);
    --document-tekna-element: #ff8500;
    --document-frame-title-doc-title-radius: var(--radius-r-022);
    --document-frame-footer-footer-bg: var(--color-system-document-range-page-025);
    --form-space-padding-y-form-padding-y: var(--padding-padding-y-padding-y);
    --form-radius-form-radiuseses: var(--radius-default-radius);
    --form-icon-default-form-icon-primary: var(--color-system-document-range-page-800);
    --form-border-form-border-width: var(--border-border-width-sm);
    --form-space-padding-x-form-padding-x: var(--padding-padding-x-padding-x);
    --form-states-default-form-default-bg: var(--color-system-subtle-subtle-025);
    --form-states-default-form-default-bg-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --form-text-form-default-txt: var(--fonts-colors-type-dark-primary-body);
    --form-focus-form-border-focus: var(--color-system-primary-variables-focus-primary-focus);
    --form-border-form-border-warning: var(--color-system-warning-variables-action-warning);
    --form-border-form-border-danger: var(--color-system-danger-variables-action-danger);
    --form-space-padding-between-form-padding-between: var(
			--padding-padding-between-padding-between
		);
    --form-text-form-disabled-txt: var(--fonts-colors-type-dark-disabled-overlay);
    --alert-states-success-emphasis-alert-success-bg: var(
			--color-system-success-variables-action-success
		);
    --alert-states-info-emphasis-alert-info-f-bg: var(
			--color-system-info-variables-action-info
		);
    --alert-states-warning-emphasis-alert-warning-f-bg: var(
			--color-system-warning-variables-action-warning
		);
    --alert-states-danger-emphasis-alert-danger-f-bg: var(
			--color-system-danger-variables-action-danger
		);
    --switch-state-primary-switch-active: var(--color-system-primary-variables-action-primary);
    --switch-state-primary-switch-inactive-focus: var(
			--color-system-subtle-variables-focus-subtle-focus-hover
		);
    --switch-state-primary-switch-focus: var(
			--color-system-primary-variables-focus-primary-focus-hover
		);
    --switch-state-handle-switch-handle-primary: var(--color-system-gray-white);
    --switch-space-padding-y-switch-padding-y: var(--padding-padding-y-padding-y-sm-x);
    --switch-space-padding-x-switch-padding-x: var(--padding-padding-x-padding-sm-x);
    --switch-radius-switch-radius: var(--radius-default-radius-circle);
    --switch-focus-switch-focus-width: var(--focus-focus-width);
    --tags-icon-tag-icon-default: var(--color-system-document-range-page-800);
    --tags-space-padding-y-tag-padding-y: var(--padding-padding-y-padding-y-sm-x);
    --tags-space-padding-x-tag-padding-x: var(--padding-padding-x-padding-sm);
    --tags-space-padding-between-tag-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
    --tags-focus-tag-focus-width: var(--focus-focus-width);
    --tags-radius-tag-radius: var(--radius-default-radius-xl);
    --tags-border-tag-border-width: var(--border-border-width-sm);
    --tags-states-primary-tag-bg: var(--color-system-primary-variables-action-primary);
    --tags-states-primary-tag-bg-hover: var(
			--color-system-primary-variables-action-primary-hover
		);
    --tags-states-primary-subtle-tag-bg: var(
			--color-system-primary-variables-focus-primary-focus
		);
    --tags-states-primary-subtle-tag-bg-hover: var(
			--color-system-primary-variables-focus-primary-focus-hover
		);
    --tags-states-secondary-tag-bg: var(--color-system-secondary-variables-action-secondary);
    --tags-states-secondary-subtle-tag-bg: var(
			--color-system-secondary-variables-focus-secondary-focus
		);
    --tags-states-secondary-subtle-tag-bg-hover: var(
			--color-system-secondary-variables-focus-secondary-focus-hover
		);
    --tags-states-secondary-tag-bg-hover: var(
			--color-system-secondary-variables-action-secondary-hover
		);
    --tags-states-default-tag-bg: var(--color-system-subtle-variables-action-subtle);
    --tags-states-default-tag-bg-hover: var(
			--color-system-subtle-variables-action-subtle-hover
		);
    --tags-states-default-subtle-tag-bg: var(
			--color-system-subtle-variables-focus-subtle-focus
		);
    --tags-states-default-subtle-tag-bg-hover: var(
			--color-system-subtle-variables-focus-subtle-focus-hover
		);
    --tags-text-tag-txt-default: var(--typography-text-dark-primary-body);
    --tags-text-tag-txt-invert: var(--typography-text-light-primary-heading);
    --tags-icon-tag-icon-invert: var(--typography-icon-light-primary);
    --switch-state-primary-switch-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --switch-state-handle-switch-handle-radius: var(--radius-default-radius-circle);
    --switch-state-primary-switch-inactive: var(--color-system-subtle-variables-action-subtle);
    --toast-text-toast-default-txt-invert: var(--fonts-colors-type-light-primary);
    --toast-icon-toast-icon-invert: var(--typography-icon-light-primary);
    --toast-text-toast-time-txt-invert: var(--fonts-colors-type-light-primary);
    --form-text-form-txt-dng: var(--fonts-colors-type-actions-default-danger);
    --form-text-form-txt-warning: var(--fonts-colors-type-actions-default-warning);
    --form-icon-default-form-icon-secondary: var(--typography-icon-dark-secondary);
    --form-text-form-txt-ghost: #e2d9f3;
    --form-icon-invert-form-icon-primary: var(--typography-icon-light-primary);
    --form-icon-invert-form-icon-secondary: var(--typography-icon-light-secondary);
    --form-border-form-border-default: var(--border-border-border-05);
    --form-focus-form-focus-width: var(--focus-focus-width);
    --button-radius-icon-btn-radius: var(--radius-nested-nested-radius);
    --selections-text-selection-txt-default: var(--typography-text-dark-primary-body);
    --selections-text-selection-txt-invert: var(--typography-text-light-primary-heading);
    --selections-space-padding-y-selection-padding-y: var(--padding-padding-y-padding-y-sm-x);
    --selections-space-padding-x-selection-padding-x: var(--padding-padding-x-padding-sm-x);
    --selections-space-padding-between-selection-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
    --selections-radius-selection-btn-radius: var(--radius-nested-nested-radius);
    --selections-border-selection-border-width-default: var(--border-border-width-sm);
    --selections-states-background-selection-bg: var(--color-system-subtle-subtle-025);
    --selections-states-default-selection-default: var(--color-system-subtle-subtle-025);
    --selections-states-default-selection-default-hover: var(--color-system-subtle-subtle-050);
    --selections-states-active-selection-active-bg: var(
			--color-system-primary-variables-action-primary-hover
		);
    --selections-states-active-selection-active-bg-hover: var(
			--color-system-primary-variables-action-primary-hover
		);
    --selections-radius-selection-radius: var(--radius-default-radius);
    --range-icon-range-icon-default: var(--color-system-document-range-page-800);
    --range-icon-range-icon-invert: var(--typography-icon-light-primary);
    --range-text-range-txt-default: var(--typography-text-dark-primary-body);
    --range-space-padding-y-range-padding-y: var(--padding-padding-y-padding-y-sm-x);
    --range-space-padding-x-range-padding-x: var(--padding-padding-x-padding-sm-x);
    --range-space-padding-between-range-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
    --range-radius-range-radius: var(--radius-default-radius-sm);
    --range-radius-range-btn-radius: var(--radius-default-radius-sm);
    --range-focus-range-focus-width: var(--focus-focus-width);
    --range-border-range-border-width: var(--border-border-width-rg);
    --range-states-background-range-bg: var(--color-system-disabled-variables-action-disabled);
    --range-states-default-range-bg: var(--color-system-disabled-disabled-200);
    --range-states-default-range-bg-hover: var(
			--color-system-primary-variables-action-primary-emphasis
		);
    --range-states-default-range-focus: var(
			--color-system-primary-variables-focus-primary-focus
		);
    --range-states-active-range-bg: var(--color-system-primary-variables-action-primary);
    --range-states-active-range-bg-hover: var(
			--color-system-primary-variables-focus-primary-focus-emphasis
		);
    --range-states-active-range-focus: var(
			--color-system-primary-variables-focus-primary-focus
		);
    --tabs-icon-tab-icon-default: var(--color-system-document-range-page-800);
    --tabs-icon-tab-icon-active: var(--fonts-colors-type-actions-default-primary);
    --tabs-space-padding-y-tab-padding-y: var(--padding-padding-y-padding-y-sm-x);
    --tabs-space-padding-x-tab-padding-x: var(--padding-padding-x-padding-sm-x);
    --tabs-space-padding-between-tab-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
    --tabs-radius-tab-radius: var(--radius-default-radius-sm);
    --tabs-focus-tab-focus-width: var(--focus-focus-width);
    --tabs-border-tab-border-width-default: var(--border-border-width-rg);
    --tabs-border-tab-border-default: var(--border-border-border-10);
    --tabs-border-tab-border-width-active: var(--border-border-width-rg);
    --tabs-border-tab-border-active: var(--border-colors-dark-primary);
    --tabs-text-tab-txt-default: var(--color-system-document-range-page-800);
    --tabs-text-tab-txt-active: var(--fonts-colors-type-actions-default-primary);
    --modal-space-padding-y-modal-padding-y: var(--padding-padding-y-padding-y);
    --modal-radius-modal-radiuseses: var(--radius-default-radius-lg);
    --modal-icon-modal-icon-primary: var(--color-system-document-range-page-800);
    --modal-icon-modal-icon-invert: var(--typography-icon-light-primary);
    --modal-border-modal-border-width: var(--border-border-width-sm);
    --modal-space-padding-x-modal-padding-x: var(--padding-padding-x-padding-x);
    --modal-states-default-modal-default-body-bg: var(
			--color-system-background-primary-background
		);
    --modal-text-modal-default-txt: var(--fonts-colors-type-dark-primary-body);
    --modal-text-modal-default-txt-invert: var(--fonts-colors-type-light-primary);
    --modal-space-padding-between-modal-padding-between: var(
			--padding-padding-between-padding-between
		);
    --modal-text-modal-title-txt: var(--fonts-colors-type-dark-primary-heading);
    --modal-border-modal-border: var(--typography-text-dark-disabled);
    --switch-focus-switch-border-width: var(--radius-default-radius-sm);
    --pagination-states-primary-pagination-a-active: var(
			--color-system-primary-variables-action-primary
		);
    --pagination-states-primary-pagination-a-default: var(
			--color-system-primary-variables-focus-primary-focus-emphasis
		);
    --pagination-states-primary-pagination-a-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --pagination-space-padding-y-pagination-padding-y: var(--padding-padding-y-padding-y-sm-x);
    --pagination-space-padding-x-pagination-padding-x: var(--padding-padding-x-padding-sm-x);
    --pagination-radius-pagination-handle-a-radius: var(--radius-default-radius-circle);
    --pagination-focus-pagination-focus-width: var(--focus-focus-width);
    --pagination-focus-pagination-border-width: var(--radius-default-radius-sm);
    --pagination-radius-pagination-border: var(--color-system-subtle-subtle-200);
    --pagination-text-pagination-txt-default: var(--typography-text-dark-primary-body);
    --pagination-text-pagination-txt-invert: var(--typography-text-light-primary-heading);
    --pagination-icon-pagination-icon-default: var(--color-system-document-range-page-800);
    --pagination-icon-pagination-icon-invert: var(--typography-icon-light-primary);
    --pagination-icon-pagination-icon-disabled: var(--color-system-document-range-page-125);
    --pagination-states-primary-pagination-b-active: var(--color-system-subtle-subtle-075);
    --pagination-states-primary-pagination-b-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --pagination-text-pagination-txt-disabled: var(--typography-text-dark-disabled);
    --pagination-radius-pagination-handle-b-radius: var(--radius-default-radius);
    --selections-border-selection-border-width-active: var(--border-border-width-rg);
    --selections-border-selection-border-default: var(--border-border-width-sm);
    --selections-border-selection-border-active: var(--border-border-width-rg);
    --selections-states-default-selection-border-default: var(--border-border-border-20);
    --selections-states-active-selection-border-active: var(
			--color-system-primary-variables-action-primary
		);
    --selections-states-active-selection-border-bg-active: var(
			--color-system-document-range-page-white-000
		);
    --switch-text-switch-title-txt: var(--fonts-colors-type-dark-primary-body);
    --switch-text-switch-default-txt: var(--fonts-colors-type-dark-secondary-body);
    --switch-text-switch-default-txt-disabled: var(--fonts-colors-type-dark-disabled);
    --switch-text-switch-title-txt-disabled: var(--fonts-colors-type-dark-disabled);
    --pagination-space-padding-between-pagination-padding-between: var(
			--padding-padding-between-padding-between
		);
    --badge-states-primary-subtle-badge-primary-icon: var(
			--color-system-document-range-page-800
		);
    --badge-states-primary-default-badge-primary-icon: var(--typography-icon-light-primary);
    --badge-states-secondary-default-badge-secondary-icon: var(--typography-icon-light-primary);
    --badge-states-warning-default-badge-warning-icon: var(--typography-text-dark-primary-body);
    --badge-states-danger-default-badge-danger-icon: var(--typography-icon-light-primary);
    --avatar-radius-avatar-radiuseses-sm: var(--radius-default-radius-circle);
    --avatar-icon-avatar-general-icon: var(--color-system-document-range-page-800);
    --avatar-icon-avatar-general-icon-invert: var(--color-system-document-range-page-800);
    --avatar-states-high-avatar-high-bg: var(
			--color-system-primary-variables-focus-primary-focus-emphasis
		);
    --avatar-states-medium-avatar-medium-bg: var(
			--color-system-primary-variables-focus-primary-focus
		);
    --avatar-states-low-avatar-low-bg: var(--color-system-subtle-variables-action-subtle);
    --avatar-text-avatar-default-txt: var(--fonts-colors-type-dark-primary-body);
    --avatar-text-avatar-default-txt-invert: var(--fonts-colors-type-dark-primary-body);
    --avatar-radius-avatar-radiuseses-md: var(--radius-default-radius-circle);
    --avatar-radius-avatar-radiuseses-lg: var(--radius-default-radius-circle);
    --card-radius-card-radiuseses: var(--radius-default-radius-lg);
    --card-states-emphassis-card-emphasis-body-bg: var(--color-system-subtle-subtle-025);
    --card-radius-card-default-txt: var(--fonts-colors-type-light-primary);
    --card-states-subtle-card-subtle-body-bg: var(--color-system-subtle-subtle-025);
    --list-text-list-txt-list-item: var(--color-system-document-range-page-800);
    --list-text-list-txt-title: var(--fonts-colors-type-dark-primary-body);
    --list-border-list-border-default: var(--border-border-border-05);
    --list-icon-list-icon-default: var(--color-system-document-range-page-800);
    --list-space-padding-y-list-padding-y: var(--padding-padding-y-padding-y-sm-x);
    --list-space-padding-x-list-padding-x: var(--padding-padding-x-padding-sm-x);
    --list-space-padding-between-list-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
    --list-radius-list-radius: var(--radius-default-radius-sm);
    --list-focus-list-focus-width: var(--focus-focus-width);
    --list-border-list-border-width-default: var(--border-border-width-sm);
    --list-text-list-txt-list-item-content: var(--typography-icon-dark-secondary);
    --list-list-background-default: var(--color-system-subtle-subtle-000);
    --comment-radius-comment-radiuseses-lg: var(--radius-default-radius-circle);
    --comment-text-comment-username-txt: var(--fonts-colors-type-dark-tertiary-body);
    --comment-icon-comment-general-icon: var(--typography-icon-light-secondary);
    --comment-text-comment-time-txt: var(--fonts-colors-type-dark-muted);
    --comment-text-comment-comment-txt: var(--fonts-colors-type-dark-primary-body);
    --calendar-states-date-calendar-default: var(--color-system-document-range-page-white-000);
    --calendar-states-date-calendar-hover: var(--color-system-subtle-variables-action-subtle);
    --calendar-states-date-calendar-active-center: var(--color-system-subtle-subtle-025);
    --calendar-states-date-calendar-active-end: var(
			--color-system-primary-variables-focus-primary-focus-emphasis
		);
    --calendar-text-calendar-txt-date-active: var(--typography-text-dark-primary-body);
    --calendar-text-calendar-txt-month: var(--typography-text-dark-primary-body);
    --calendar-text-calendar-txt-week: var(--typography-text-dark-tertiary-body);
    --calendar-icon-calendar-icon-default: var(--color-system-document-range-page-800);
    --calendar-radius-calendar-date-radius: var(--radius-default-radius);
    --calendar-radius-calendar-radius: var(--radius-default-radius-lg);
    --calendar-focus-pagination-focus-width: var(--focus-focus-width);
    --calendar-focus-pagination-border-width: var(--radius-default-radius-sm);
    --calendar-text-calendar-txt-date-default: var(--typography-text-dark-primary-body);
    --calendar-states-date-calendar-bg: var(--color-system-subtle-subtle-000);
    --calendar-text-calendar-txt-date-inactive: var(--typography-text-dark-disabled);
    --calendar-radius-calendar-active-date-radius: var(--radius-default-radius-x-na);
    --calendar-text-calendar-txt-date-selected: var(--typography-text-light-primary-heading);
    --calendar-calendar-border-width: var(--border-border-width-rg);
    --calendar-calendar-border: var(--color-system-primary-variables-action-primary);
    --calendar-radius-calendar-current-date: var(--radius-default-radius-circle);
    --rating-states-primary-rating-active: var(--color-system-yellow-yellow-300);
    --rating-states-primary-rating-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --badge-states-success-default-badge-success-bg: var(
			--color-system-success-variables-action-success
		);
    --badge-states-success-default-badge-success-txt: var(--typography-text-dark-primary-body);
    --badge-states-success-default-badge-success-icon: var(
			--color-system-document-range-page-800
		);
    --carousel-states-date-carousel-default: var(--color-system-subtle-subtle-075);
    --carousel-states-date-carousel-active: var(--color-system-primary-primary-900);
    --carousel-text-carousel-txt-date-default: var(--typography-text-dark-primary-body);
    --carousel-text-carousel-txt-date-active: var(--typography-text-dark-primary-body);
    --carousel-icon-carousel-icon-default: var(--color-system-document-range-page-800);
    --carousel-radius-carousel-date-radius: var(--radius-default-radius);
    --carousel-radius-carousel-current-date: var(--radius-default-radius-circle);
    --carousel-radius-carousel-active-date-radius: var(--radius-default-radius-x-na);
    --carousel-radius-carousel-radius: var(--radius-default-radius-lg);
    --carousel-focus-carousel-focus-width: var(--focus-focus-width);
    --carousel-focus-carousel-border-width: var(--radius-default-radius-sm);
    --carousel-carousel-border: var(--color-system-primary-variables-action-primary);
    --carousel-carousel-border-width: var(--border-border-width-rg);
    --pagination-text-pagination-txt-active: var(--typography-text-dark-primary-body);
    --calendar-states-date-calendar-current: var(
			--color-system-primary-variables-action-primary
		);
    --calendar-text-calendar-txt-date-current: var(--typography-text-light-primary-heading);
    --table-states-primary-title-row-active: var(--color-system-subtle-subtle-075);
    --table-states-primary-title-row-hover: var(--color-system-subtle-subtle-050);
    --table-states-primary-title-row-default: var(--color-system-subtle-subtle-025);
    --table-states-primary-row-row-default: var(--color-system-subtle-subtle-000);
    --table-states-primary-row-row-hover: var(--color-system-subtle-subtle-050);
    --table-text-table-header: var(--typography-text-dark-primary-body);
    --table-text-table-txt-default: var(--typography-text-dark-primary-body);
    --table-text-table-txt-disabled: var(--typography-text-dark-disabled);
    --table-text-table-txt-invert: var(--typography-text-light-primary-heading);
    --table-icon-table-icon-default: var(--color-system-document-range-page-800);
    --table-icon-table-icon-disabled: var(--color-system-document-range-page-125);
    --table-icon-table-icon-invert: var(--typography-icon-light-primary);
    --table-radius-table-radius: var(--radius-default-radius-lg);
    --table-border-table-border: var(--border-border-border-05);
    --table-focus-table-focus-width: var(--focus-focus-width);
    --table-border-table-border-width-row: var(--border-border-width-sm);
    --table-states-primary-row-row-active: var(--color-system-subtle-subtle-075);
    --table-text-table-txt-action-btn: var(--button-states-text-btn-txt);
    --table-states-primary-table-bg: var(--color-system-subtle-subtle-000);
    --table-states-primary-table-header: var(--color-system-subtle-subtle-000);
    --table-states-primary-table-footer: var(--color-system-subtle-subtle-000);
    --button-states-medium-btn-bg: var(--color-system-primary-primary-050);
    --button-states-medium-btn-bg-hover: var(--color-system-primary-primary-075);
    --button-states-medium-btn-bg-active: var(--color-system-primary-primary-125);
    --button-states-medium-btn-bg-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --button-states-medium-btn-focus: var(--color-system-primary-primary-050);
    --button-states-medium-btn-txt: var(--fonts-colors-type-actions-default-primary);
    --button-states-medium-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
    --button-states-medium-outline-btn-outline: var(--color-system-primary-primary-200);
    --button-states-medium-outline-btn-bg: var(--color-system-primary-primary-025);
    --button-states-medium-outline-btn-outline-hover: var(--color-system-primary-primary-200);
    --button-states-medium-outline-btn-bg-hover: var(--color-system-primary-primary-050);
    --button-states-medium-outline-btn-outline-active: var(--color-system-primary-primary-200);
    --button-states-medium-outline-btn-bg-active: var(--color-system-primary-primary-050);
    --button-states-medium-outline-btn-focus: var(--color-system-primary-primary-050);
    --button-states-medium-outline-btn-txt: var(--fonts-colors-type-actions-default-primary);
    --button-states-medium-outline-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
    --button-states-high-outline-btn-outline-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --badge-states-danger-subtle-badge-danger-bg: var(--color-system-danger-danger-200);
    --badge-states-warning-subtle-badge-warning-bg: var(
			--color-system-warning-variables-focus-warning-focus-hover
		);
    --badge-states-success-subtle-badge-success-bg: var(--color-system-success-success-200);
    --badge-states-secondary-subtle-badge-secondary-bg: var(
			--color-system-secondary-variables-focus-secondary-focus-hover
		);
    --badge-states-success-subtle-badge-success-txt: var(--typography-text-colors-dark-success);
    --badge-states-success-subtle-badge-success-icon: var(
			--typography-icon-colors-dark-success
		);
    --badge-states-secondary-subtle-badge-secondary-txt: var(
			--typography-text-colors-dark-secondary
		);
    --badge-states-secondary-subtle-badge-secondary-icon: var(
			--typography-icon-colors-dark-secondary
		);
    --badge-states-danger-subtle-badge-danger-txt: var(--typography-text-colors-dark-danger);
    --badge-states-danger-subtle-badge-danger-icon: var(--typography-icon-colors-dark-danger);
    --badge-states-warning-subtle-badge-warning-txt: var(--typography-text-colors-dark-warning);
    --badge-states-warning-subtle-badge-warning-icon: var(
			--typography-text-colors-dark-warning
		);
    --badge-states-primary-subtle-badge-primary-border: var(
			--color-system-primary-variables-focus-primary-focus-active
		);
    --badge-states-secondary-subtle-badge-secondary-border: var(
			--color-system-secondary-variables-focus-secondary-focus-hover
		);
    --badge-states-success-subtle-badge-secondary-border: var(
			--color-system-success-success-300
		);
    --badge-states-warning-subtle-badge-secondary-border: var(
			--color-system-warning-variables-focus-warning-focus-active
		);
    --badge-states-danger-subtle-badge-secondary-border: var(--color-system-danger-danger-400);
    --table-text-table-txt-sub-text: var(--typography-text-dark-tertiary-body);
    --dropdown-dropdown-radius-dropdown-radius: var(--radius-default-radius);
    --dropdown-dropdown-border-dropdown-border-width: var(--border-border-width-sm);
    --dropdown-dropdown-border-dropdown-complete-stroke: var(--border-border-border-10);
    --dropdown-dropdown-border-dropdown-border: var(--border-border-border-30);
    --dropdown-dropdown-states-dropdown-bg: var(--color-system-subtle-subtle-000);
    --dropdown-dropdown-states-dropdown-default: var(
			--color-system-document-range-page-white-000
		);
    --dropdown-dropdown-states-dropdown-hover: var(--color-system-subtle-subtle-025);
    --dropdown-dropdown-states-dropdown-active: var(--color-system-subtle-subtle-050);
    --dropdown-dropdown-text-dropdown-default-txt: var(--typography-text-dark-primary-body);
    --dropdown-dropdown-text-dropdown-active-txt: var(--typography-text-dark-primary-body);
    --dropdown-dropdown-text-dropdown-disabled-txt: var(
			--color-system-disabled-variables-action-disabled-emphasis
		);
    --dropdown-dropdown-radius-dropdown-radius-active: var(--radius-nested-nested-radius);
    --tree-text-tree-txt-title: var(--fonts-colors-type-dark-primary-body);
    --tree-text-tree-txt-list-item: var(--typography-text-dark-tertiary-body);
    --tree-text-tree-txt-list-item-content: var(--fonts-colors-type-dark-muted);
    --tree-border-tree-border-default: var(--border-border-border-05);
    --tree-icon-tree-icon-active: var(--color-system-document-range-page-800);
    --tree-state-tree-background: var(--color-system-subtle-subtle-000);
    --tree-radius-branch-radius: var(--radius-default-radius);
    --tree-border-tree-border-width-default: var(--border-border-width-na);
    --tree-border-tree-border-width-active: var(--border-border-width-na);
    --tree-state-branch-default: var(--color-system-subtle-subtle-000);
    --tree-state-branch-hover: var(--color-system-subtle-subtle-025);
    --tree-state-branch-active: var(--color-system-subtle-subtle-000);
    --tree-icon-tree-icon-dropdown: var(--typography-icon-dark-secondary);
    --tree-space-padding-between-branch-padding-between-default: var(
			--padding-padding-between-padding-between-sm
		);
    --tree-space-padding-y-branch-padding-y-default: var(--padding-padding-y-padding-y);
    --process-indicator-text-process-txt-default: var(--typography-text-dark-primary-body);
    --process-indicator-icon-process-a-icon-default: var(
			--typography-icon-colors-default-secondary
		);
    --process-indicator-radius-process-a-handle-a-radius: var(--radius-default-radius);
    --process-indicator-icon-process-a-icon-background: var(--color-system-subtle-subtle-075);
    --navigation-states-background-navigation-footer-bg: var(
			--navigation-states-background-navigation-bg-light
		);
    --navigation-states-background-navigation-header-bg: var(
			--color-system-document-range-page-025
		);
    --navigation-text-navigation-txt-header: var(--typography-text-dark-primary-body);
    --navigation-text-navigation-txt-default: var(--typography-text-dark-primary-body);
    --navigation-text-navigation-txt-sub-text: var(--typography-text-dark-tertiary-body);
    --navigation-text-navigation-txt-disabled: var(--typography-text-dark-disabled);
    --navigation-text-navigation-txt-invert: var(--typography-text-light-primary-heading);
    --navigation-icon-navigation-icon-default: var(--color-system-document-range-page-800);
    --navigation-icon-navigation-icon-disabled: var(--color-system-document-range-page-125);
    --navigation-icon-navigation-icon-invert: var(--typography-icon-light-primary);
    --navigation-radius-navigation-sm: var(--radius-default-radius-lg);
    --navigation-focus-navigation-focus-width: var(--focus-focus-width);
    --navigation-focus-navigation-border-width: var(--radius-default-radius-sm);
    --navigation-states-background-navigation-subheader-bg: var(
			--navigation-states-background-navigation-bg-light
		);
    --navigation-primary-flyout-side-nav-background: var(--color-system-subtle-subtle-300);
    --navigation-primary-flyout-side-nav-default: var(--color-system-subtle-subtle-025);
    --navigation-primary-flyout-side-nav-hover: var(--color-system-subtle-subtle-050);
    --navigation-primary-flyout-side-nav-active: var(--color-system-subtle-subtle-075);
    --navigation-primary-flyout-text-side-nav-txt-title: var(
			--fonts-colors-type-dark-primary-body
		);
    --navigation-primary-flyout-text-side-nav-txt-list-item: var(
			--typography-icon-dark-secondary
		);
    --navigation-primary-flyout-border-side-nav-stroke-default: var(--border-border-border-20);
    --navigation-primary-flyout-icon-side-nav-icon-content: var(
			--color-system-document-range-page-800
		);
    --navigation-primary-flyout-icon-side-nav-icon-dropdown: var(
			--color-system-document-range-page-800
		);
    --navigation-primary-flyout-radius-side-nav-radius: var(--radius-default-radius-sm);
    --navigation-primary-flyout-border-side-nav-border-width-default: var(
			--border-border-width-rg
		);
    --navigation-primary-flyout-border-side-nav-border-width-active: var(
			--border-border-width-rg
		);
    --navigation-primary-flyout-spacing-padding-between-side-nav-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
    --navigation-primary-flyout-spacing-padding-y-side-nav-padding-y: var(
			--padding-padding-y-padding-y
		);
    --navigation-primary-flyout-icon-side-nav-icon-pho: var(--typography-icon-pho);
    --search-space-padding-y-search-padding-y: var(--padding-padding-y-padding-y);
    --search-radius-search-radiuseses: var(--radius-default-radius);
    --search-space-padding-x-search-padding-x: var(--padding-padding-x-padding-x);
    --search-text-search-default-txt: var(--fonts-colors-type-dark-muted);
    --search-state-search-bg: var(--color-system-subtle-subtle-025);
    --search-space-padding-between-search-padding-between: var(
			--padding-padding-between-padding-between
		);
    --search-border-search-border: var(--form-border-form-border-default);
    --search-border-search-border-width: var(--border-border-width-sm);
    --search-text-search-inactive-txt: var(--fonts-colors-type-dark-muted);
    --tabs-border-tab-border-default-hover: var(--border-border-border-20);
    --pagination-states-primary-pagination-b-default-hover: var(
			--color-system-subtle-subtle-050
		);
    --pagination-states-primary-pagination-b-default: var(--color-system-subtle-subtle-000);
    --pagination-states-primary-pagination-b-active-hover: var(
			--color-system-subtle-subtle-100
		);
    --list-list-background-hover: var(--color-system-subtle-subtle-025);
    --tabs-states-tab-bg-default: var(--color-system-subtle-subtle-000);
    --tabs-states-tab-bg-active: var(--color-system-subtle-subtle-000);
    --tabs-states-tab-bg-default-hover: var(--color-system-subtle-subtle-025);
    --tabs-states-tab-bg-active-hover: var(--color-system-subtle-subtle-025);
    --table-states-primary-title-cell-active: var(--color-system-subtle-subtle-075);
    --table-states-primary-row-cell-active: var(--color-system-subtle-subtle-025);
    --document-component-frame-state-supporting-weight: var(--border-border-w-02);
    --document-component-frame-state-supporting-border: var(--document-branded-c);
    --badge-states-subtle-default-badge-subtle-bg: var(--color-system-subtle-subtle-300);
    --badge-states-subtle-default-badge-subtle-txt: var(
			--typography-text-light-primary-heading
		);
    --badge-states-subtle-default-badge-subtle-icon: var(--typography-icon-light-primary);
    --badge-states-subtle-subtle-badge-subtle-bg: var(--color-system-subtle-subtle-075);
    --badge-states-subtle-subtle-badge-subtle-border: var(--color-system-subtle-subtle-500);
    --badge-states-subtle-subtle-badge-subtle-txt: var(--typography-text-dark-primary-body);
    --badge-states-subtle-subtle-badge-subtle-icon: var(--color-system-document-range-page-800);
    --navigation-schematic-toolbar-toolbar-space-padding-y-toolbar-padding-y: var(
			--padding-padding-y-padding-y
		);
    --navigation-schematic-toolbar-tool-radius-tool-radius: var(--radius-default-radius);
    --navigation-schematic-toolbar-toolbar-space-padding-x-toolbar-padding-x: var(
			--padding-padding-x-padding-x
		);
    --navigation-schematic-toolbar-tool-text-tool-default-txt: var(
			--fonts-colors-type-dark-primary-body
		);
    --navigation-schematic-toolbar-toolbar-space-padding-between-toolbar-padding-between: var(
			--padding-padding-between-padding-between
		);
    --navigation-schematic-toolbar-tool-icon-tool-icon-primary: var(
			--color-system-document-range-page-800
		);
    --navigation-schematic-toolbar-tool-icon-tool-icon-invert: var(
			--typography-icon-light-primary
		);
    --navigation-schematic-toolbar-tool-states-light-tool-bg: var(
			--color-system-subtle-subtle-000
		);
    --navigation-schematic-toolbar-tool-states-light-tool-bg-hvr: var(
			--color-system-subtle-subtle-050
		);
    --navigation-schematic-toolbar-tool-states-light-tool-bg-active: var(
			--color-system-subtle-subtle-075
		);
    --navigation-schematic-toolbar-tool-states-light-tool-bg-selected: var(
			--color-system-primary-variables-action-primary
		);
    --canvas-radius-canvas-radiuseses: var(--radius-default-radius-x-na);
    --canvas-states-emphassis-canvas-body-bg: var(--color-system-subtle-subtle-025);
    --canvas-states-subtle-card-subtle-body-bg: var(--color-system-subtle-subtle-025);
    --canvas-text-card-default-txt: var(--fonts-colors-type-light-primary);
    --canvas-border-canvas-border-width-complete: var(--border-border-width-sm);
    --canvas-border-canvas-complete-border: var(--color-system-subtle-subtle-075);
    --canvas-border-canvas-border: var(--color-system-subtle-subtle-050);
    --canvas-border-canvas-border-width: 0.5px;
    --canvas-states-dots-canvas-complete-border: var(--color-system-subtle-subtle-125);
    --badge-states-bold-default-badge-bold-bg: var(--color-system-subtle-subtle-700);
    --badge-states-bold-default-badge-bold-txt: var(--typography-text-light-primary-heading);
    --badge-states-bold-default-badge-bold-icon: var(--typography-icon-light-primary);
    --badge-states-bold-subtle-badge-bold-bg: var(--color-system-subtle-subtle-400);
    --badge-states-bold-subtle-badge-bold-border: var(--color-system-subtle-subtle-400);
    --badge-states-bold-subtle-badge-bold-txt: var(--typography-text-light-primary-heading);
    --badge-states-bold-subtle-badge-bold-icon: var(--typography-icon-light-primary);
    --selections-states-background-selection-border: var(--border-border-border-05);
    --typography-text-colors-dark-primary: var(--fonts-colors-type-actions-dark-primary);
    --typography-text-colors-dark-secondary: var(--fonts-colors-type-actions-dark-secondary);
    --typography-text-colors-dark-info: var(--fonts-colors-type-actions-dark-info);
    --typography-text-colors-dark-success: var(--fonts-colors-type-actions-dark-success);
    --typography-text-colors-dark-warning: var(--fonts-colors-type-actions-dark-warning);
    --typography-text-colors-dark-danger: var(--fonts-colors-type-actions-dark-danger);
    --typography-icon-colors-dark-primary: var(--fonts-colors-type-actions-dark-primary);
    --typography-icon-colors-dark-secondary: var(--fonts-colors-type-actions-dark-secondary);
    --typography-icon-colors-dark-info: var(--fonts-colors-type-actions-dark-info);
    --typography-icon-colors-dark-success: var(--fonts-colors-type-actions-dark-success);
    --typography-icon-colors-dark-warning: var(--fonts-colors-type-actions-dark-warning);
    --typography-icon-colors-dark-danger: var(--fonts-colors-type-actions-dark-danger);
    --typography-text-colors-light-primary: var(--fonts-colors-type-actions-light-primary);
    --typography-text-colors-light-secondary: var(--fonts-colors-type-actions-light-secondary);
    --typography-text-colors-light-info: var(--fonts-colors-type-actions-light-info);
    --typography-text-colors-light-success: var(--fonts-colors-type-actions-light-success);
    --typography-text-colors-light-warning: var(--fonts-colors-type-actions-light-warning);
    --typography-text-colors-light-danger: var(--fonts-colors-type-actions-light-danger);
    --typography-icon-colors-light-primary: var(--fonts-colors-type-actions-light-primary);
    --typography-icon-colors-light-secondary: var(--fonts-colors-type-actions-light-secondary);
    --typography-icon-colors-light-info: var(--fonts-colors-type-actions-light-info);
    --typography-icon-colors-light-success: var(--fonts-colors-type-actions-light-success);
    --typography-icon-colors-light-warning: var(--fonts-colors-type-actions-light-warning);
    --typography-icon-colors-light-danger: var(--fonts-colors-type-actions-light-danger);
    --accordion-text-accordion-txt-title: var(--fonts-colors-type-dark-primary-body);
    --accordion-text-accordion-txt-list-item: var(--color-system-document-range-page-800);
    --accordion-text-accordion-txt-list-item-content: var(--typography-icon-dark-secondary);
    --accordion-stroke-accordion-border-default: var(--border-border-border-20);
    --accordion-icon-accordion-icon-default: var(--color-system-document-range-page-800);
    --accordion-space-padding-y-accordion-padding-y: var(--padding-padding-y-padding-y-sm-x);
    --accordion-accordion-background-default: var(--color-system-subtle-subtle-000);
    --accordion-accordion-background-hover: var(--color-system-subtle-subtle-025);
    --accordion-space-padding-x-accordion-padding-x: var(--padding-padding-x-padding-sm-x);
    --accordion-space-padding-between-accordion-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
    --accordion-radius-accordion-radius: var(--radius-default-radius-sm);
    --accordion-focus-accordion-focus-width: var(--focus-focus-width);
    --accordion-border-width-accordion-border-width-default: var(--border-border-width-rg);
    --accordion-border-width-accordion-border-width-active: var(--border-border-width-rg);
    --tooltip-text-tooltip-default-txt-light: var(--fonts-colors-type-light-primary);
    --button-radius-btn-radius-x-sm: var(--radius-default-radius-sm);
    --button-states-medium-outline-btn-outline-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --button-states-low-outline-btn-outline-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --button-states-danger-outline-btn-outline-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --tags-border-tag-border: var(--color-system-subtle-subtle-400);
    --carousel-border-carousel-border-width: var(--border-border-width-rg);
    --checkbox-text-checkbox-txt-default: var(--typography-text-dark-primary-body);
    --checkbox-text-checkbox-txt-light: var(--typography-text-dark-primary-body);
    --pagination-border-pagination-border-width-default: var(--border-border-width-rg);
    --pagination-border-pagination-border-width-active: var(--border-border-width-rg);
    --pagination-border-pagination-border-default: var(--border-border-border-20);
    --process-indicator-border-border-width-default: var(--border-border-width-rg);
    --process-indicator-border-border-default: var(--border-border-border-20);
    --radio-text-radio-txt: var(--typography-text-dark-primary-body);
    --search-icon-search-icon-default: var(--color-system-document-range-page-800);
    --search-icon-search-icon-invert: var(--typography-icon-light-primary);
    --document-frame-title-frame-title: var(--fonts-colors-type-dark-primary-heading);
    --document-frame-footer-footer-txt: var(--fonts-colors-type-dark-tertiary-body);
    --document-frame-content-example-txt: var(--typography-text-dark-tertiary-body);
    --document-frame-content-example-txt-header: var(--fonts-colors-type-dark-primary-body);
    --document-frame-title-frame-paragraph: var(--fonts-colors-type-dark-secondary-body);
    --document-document-components: #b644b4;
    --document-frame-title-breadcrumb-bg: var(--color-system-document-range-page-white-000);
    --document-frame-title-title-bg: var(--color-system-document-range-half-values-page-25);
    --process-indicator-text-process-txt-content: var(--typography-text-dark-tertiary-body);
    --alert-text-dark-alert-txt-title-default: var(--fonts-colors-type-dark-primary-heading);
    --alert-text-dark-alert-txt-title-invert: var(--fonts-colors-type-light-primary);
    --alert-icon-alert-general-icon-invert: var(--typography-icon-light-primary);
    --generic-states-divider-generic-border: var(--border-border-border-10);
    --card-radius-card-title-txt: var(--fonts-colors-type-dark-primary-body);
    --card-text-card-txt-title: var(--fonts-colors-type-dark-primary-body);
    --card-text-card-txt-list-item: var(--color-system-document-range-page-800);
    --card-text-card-txt-list-item-content: var(--typography-icon-dark-secondary);
    --card-icon-card-icon-default: var(--color-system-document-range-page-800);
    --card-border-card-border-width-default: var(--border-border-width-sm);
    --card-border-card-divider-default: var(--border-border-border-10);
    --card-border-card-border-default: var(--border-border-border-10);
    --card-border-card-divider-width: var(--border-border-width-sm);
    --tree-border-tree-border-active: var(--border-border-border-05);
    --form-icon-default-form-icon-disabled: var(--color-system-document-range-page-125);
    --form-border-form-border-hover: var(--border-border-border-20);
    --form-border-form-border-active: var(--border-colors-dark-secondary);
    --button-radius-sub-btn-radius: var(--radius-default-radius-circle);
    --navigation-schematic-toolbar-tool-states-light-tool-bg-selected-hvr: var(
			--color-system-primary-variables-action-primary-hover
		);
    --search-border-search-border-hover: var(--form-border-form-border-hover);
    --navigation-primary-acitivty-radius-notification-radiuseses: var(
			--radius-default-radius-lg
		);
    --navigation-primary-acitivty-border-notification-divider-default: var(
			--border-border-border-05
		);
    --navigation-primary-acitivty-border-notification-divider-width: var(
			--border-border-width-sm
		);
    --navigation-primary-acitivty-text-notification-txt-title: var(
			--fonts-colors-type-dark-primary-body
		);
    --navigation-primary-acitivty-text-notification-txt-content: var(
			--typography-text-dark-tertiary-body
		);
    --navigation-primary-acitivty-icon-notification-icon-default: var(
			--color-system-document-range-page-800
		);
    --navigation-primary-acitivty-radius-notification-default-txt: var(
			--fonts-colors-type-dark-primary-body
		);
    --navigation-primary-acitivty-radius-notification-title-txt: var(
			--fonts-colors-type-dark-primary-heading
		);
    --navigation-primary-acitivty-states-emphassis-notification-default-bg: var(
			--color-system-subtle-subtle-025
		);
    --navigation-primary-acitivty-radius-notification-sub: var(
			--fonts-colors-type-dark-tertiary-body
		);
    --navigation-primary-acitivty-icon-notification-content-icon: var(
			--typography-icon-dark-secondary
		);
    --navigation-primary-acitivty-states-emphassis-notification-new-bg: var(
			--color-system-secondary-secondary-025
		);
    --navigation-primary-acitivty-icon-notification-new-icon: var(
			--typography-icon-colors-default-info
		);
    --generic-states-divider-pho: var(--document-branded-a);
    --typography-icon-colors-default-primary: var(--fonts-colors-type-actions-default-primary);
    --typography-icon-colors-default-secondary: var(
			--fonts-colors-type-actions-default-secondary
		);
    --typography-icon-colors-default-info: var(--fonts-colors-type-actions-default-info);
    --typography-icon-colors-default-success: var(--fonts-colors-type-actions-default-success);
    --typography-icon-colors-default-warning: var(--fonts-colors-type-actions-default-warning);
    --typography-icon-colors-default-danger: var(--fonts-colors-type-actions-default-danger);
    --typography-text-colors-default-primary: var(--fonts-colors-type-actions-default-primary);
    --typography-text-colors-default-secondary: var(
			--fonts-colors-type-actions-default-secondary
		);
    --typography-text-colors-default-info: var(--fonts-colors-type-actions-default-info);
    --typography-text-colors-default-success: var(--fonts-colors-type-actions-default-success);
    --typography-text-colors-default-warning: var(--fonts-colors-type-actions-default-warning);
    --typography-text-colors-default-danger: var(--fonts-colors-type-actions-default-danger);
    --navigation-primary-acitivty-icon-notification-new-icon-error: var(
			--typography-icon-colors-default-danger
		);
    --navigation-primary-acitivty-states-emphassis-notification-new-bg-error: var(
			--color-system-danger-danger-050
		);
    --table-space-cells-padding-y-table-padding-y: var(--padding-padding-y-padding-y-sm);
    --table-space-cells-padding-x-table-padding-x: var(--padding-padding-x-padding-x);
    --table-space-cells-padding-between-table-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
    --table-border-table-border-width-cell: var(--border-border-width-sm);
    --navigation-schematic-toolbar-toolbar-radius-tool-radius: var(--radius-default-radius);
    --navigation-schematic-toolbar-toolbar-radius-toolbar-radius: var(--radius-default-radius);
    --navigation-schematic-toolbar-toolbar-states-primary-toolbar-bg: var(
			--color-system-subtle-subtle-000
		);
    --navigation-schematic-toolbar-tool-divider-tool-divider: var(--border-border-border-05);
    --navigation-schematic-toolbar-toolbar-icon-toolbar-icon-primary: var(
			--color-system-document-range-page-800
		);
    --navigation-schematic-toolbar-toolbar-icon-toolbar-icon-invert: var(
			--typography-icon-light-primary
		);
    --navigation-schematic-toolbar-toolbar-border-tree-border-default: var(
			--border-border-border-05
		);
    --navigation-schematic-toolbar-toolbar-border-tree-border-active: var(
			--border-border-border-05
		);
    --navigation-schematic-toolbar-toolbar-border-tree-border-width-default: var(
			--border-border-width-na
		);
    --navigation-schematic-toolbar-toolbar-border-tree-border-width-active: var(
			--border-border-width-na
		);
    --navigation-schematic-toolbar-tool-divider-tool-divider-width: var(
			--border-border-width-x-sm
		);
    --navigation-schematic-toolbar-tool-border-tool-border: var(--border-border-border-05);
    --navigation-schematic-toolbar-tool-border-tool-border-width: var(
			--radius-default-radius-x-na
		);
    --navigation-schematic-toolbar-tool-space-padding-y-tool-padding-y: var(
			--padding-padding-y-padding-y-sm
		);
    --navigation-schematic-toolbar-tool-space-padding-x-tool-padding-x: var(
			--padding-padding-x-padding-sm
		);
    --navigation-schematic-toolbar-tool-space-padding-between-tool-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
    --button-icon-btn-icon-default: var(--color-system-document-range-page-800);
    --navigation-primary-flyout-spacing-padding-x-side-nav-padding-x: var(
			--padding-padding-x-padding-x
		);
    --tooltip-divider-tooltip-divider: var(--border-border-border-05);
    --tooltip-divider-tooltip-divider-width: var(--border-border-width-sm);
    --tooltip-divider-tooltip-divider-invert: var(--border-border-border-flag);
    --tooltip-icon-tooltip-icon-primary: var(--color-system-document-range-page-800);
    --tooltip-icon-tooltip-icon-invert: var(--typography-icon-light-primary);
    --tooltip-states-light-tooltip-action-light-default: var(--color-system-subtle-subtle-000);
    --tooltip-states-light-tooltip-action-light-hover: var(--color-system-subtle-subtle-025);
    --tooltip-states-dark-tooltip-action-dark-default: var(--color-system-subtle-subtle-700);
    --tooltip-states-dark-tooltip-action-dark-hover: var(--color-system-subtle-subtle-800);
    --tooltip-radius-tooltip-action-radius: var(--radius-nested-nested-radius);
    --navigation-schematic-layer-panel-color-primary-layerpanel-bg: var(
			--color-system-subtle-subtle-000
		);
    --navigation-schematic-layer-panel-text-layerpanel-txt-default: var(
			--typography-text-dark-primary-body
		);
    --navigation-schematic-layer-panel-icon-layerpanel-icon-default: var(
			--color-system-document-range-page-800
		);
    --navigation-schematic-layer-panel-icon-layerpanel-icon-disabled: var(
			--color-system-document-range-page-125
		);
    --navigation-schematic-layer-panel-icon-layerpanel-icon-invert: var(
			--typography-icon-light-primary
		);
    --navigation-schematic-layer-panel-radius-layerpanel-radius: var(--radius-default-radius);
    --navigation-schematic-layer-panel-focus-layerpanel-focus-width: var(--focus-focus-width);
    --navigation-schematic-layer-panel-border-layerpanel-border-width: var(
			--radius-default-radius-sm
		);
    --navigation-schematic-layer-panel-spacing-padding-between-side-nav-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
    --navigation-schematic-layer-panel-spacing-padding-y-side-nav-padding-y: var(
			--padding-padding-y-padding-y
		);
    --navigation-schematic-layer-panel-border-layerpanel-border-default: var(
			--border-border-border-05
		);
    --navigation-schematic-layer-panel-spacing-padding-x-side-nav-padding-x: var(
			--padding-padding-x-padding-x
		);
    --tree-space-padding-y-branch-padding-y-small: var(--padding-padding-y-padding-y-sm);
    --tree-space-padding-between-branch-padding-between-small: var(
			--padding-padding-between-padding-between-sm
		);
    --tree-radius-branch-radius-small: var(--radius-default-radius-sm);
    --navigation-schematic-layer-panel-divider-layerpanel-divider-default: var(
			--border-border-border-05
		);
    --navigation-schematic-layer-panel-divider-layerpanel-border-width: var(
			--radius-default-radius-sm
		);
    --navigation-schematic-toolbar-toolbar-radius-toolbar-rounded: var(
			--radius-default-radius-circle
		);
    --navigation-schematic-toolbar-toolbar-radius-toolbar-radius-na: var(
			--radius-default-radius-x-na
		);
    --navigation-primary-side-navigation-menu-item-default: var(
			--color-system-subtle-subtle-000
		);
    --navigation-primary-side-navigation-menu-item-hover: var(--color-system-subtle-subtle-025);
    --navigation-primary-side-navigation-menu-item-active: var(
			--color-system-subtle-subtle-900
		);
    --navigation-primary-side-navigation-spacing-padding-between-menu-item-between-icon: var(
			--padding-padding-between-padding-between
		);
    --navigation-primary-side-navigation-spacing-padding-y-menu-item-padding-y: var(
			--padding-padding-y-padding-y
		);
    --navigation-primary-side-navigation-radius-menu-item-radius: var(
			--radius-default-radius-sm
		);
    --navigation-primary-side-navigation-border-menu-item-stroke-default: var(
			--border-border-border-20
		);
    --navigation-primary-side-navigation-text-menu-item-txt: var(
			--fonts-colors-type-dark-primary-body
		);
    --navigation-primary-side-navigation-icon-menu-item: var(
			--color-system-document-range-page-800
		);
    --navigation-primary-side-navigation-icon-menu-item-icon-pho: var(--typography-icon-pho);
    --navigation-primary-side-navigation-border-menu-item-border-width-default: var(
			--border-border-width-rg
		);
    --navigation-primary-side-navigation-border-menu-item-border-width-active: var(
			--border-border-width-rg
		);
    --navigation-primary-side-navigation-spacing-padding-x-menu-item-padding-x: var(
			--padding-padding-x-padding-x
		);
    --navigation-primary-side-navigation-spacing-padding-between-menu-item-between-drop: var(
			--padding-padding-between-padding-between-sm
		);
    --button-states-icon-button-low-btn-bg: var(--color-system-subtle-subtle-0000);
    --button-states-icon-button-low-btn-bg-hover: var(--color-system-subtle-subtle-1000);
    --button-states-icon-button-low-btn-bg-active: var(--color-system-subtle-subtle-1050);
    --button-states-icon-button-low-btn-bg-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --button-states-icon-button-low-btn-focus: var(--color-system-subtle-subtle-075);
    --button-states-icon-button-low-outline-btn-outline: var(--color-system-subtle-subtle-100);
    --button-states-icon-button-low-outline-btn-bg: var(--color-system-subtle-subtle-0000);
    --button-states-icon-button-low-outline-btn-outline-hover: var(
			--color-system-subtle-subtle-200
		);
    --button-states-icon-button-low-outline-btn-bg-hover: var(--color-system-subtle-subtle-025);
    --button-states-icon-button-low-outline-btn-outline-active: var(
			--color-system-subtle-subtle-200
		);
    --button-states-icon-button-low-outline-btn-bg-active: var(
			--color-system-subtle-subtle-075
		);
    --button-states-icon-button-low-outline-btn-outline-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --button-states-icon-button-low-outline-btn-focus: var(--color-system-subtle-subtle-050);
    --button-states-icon-button-icon-btn-icon-pho: var(--typography-icon-pho);
    --button-states-icon-button-icon-btn-icon-default: var(
			--color-system-document-range-page-800
		);
    --button-states-icon-button-icon-btn-icon-invert: var(--typography-icon-light-primary);
    --navigation-states-background-navigation-bg-light: var(--color-system-subtle-subtle-0000);
    --navigation-states-background-navigation-flyout-bg: var(
			--navigation-states-background-navigation-bg-light
		);
    --navigation-states-background-navigation-dropdown-bg: var(
			--navigation-states-background-navigation-bg-light
		);
    --navigation-border-navigation-border-default: var(--border-border-border-05);
    --navigation-border-navigation-border-width: var(--radius-default-radius-sm);
    --navigation-states-background-navigation-toolbar-bg: var(
			--navigation-states-background-navigation-bg-dark
		);
    --navigation-radius-navigation-radius: var(--radius-default-radius-lg);
    --navigation-radius-navigation-radius-lg: var(--radius-default-radius-lg);
    --alert-general-default-bg: var(--color-system-subtle-subtle-000);
    --button-icon-btn-icon-pop: var(--typography-icon-colors-default-primary);
    --button-states-icon-button-icon-btn-icon-pop: var(
			--typography-icon-colors-default-primary
		);
    --navigation-states-background-navigation-bg-dark: var(--color-system-subtle-subtle-800);
    --navigation-schematic-toolbar-tool-states-dark-tool-bg: var(
			--color-system-subtle-subtle-900
		);
    --navigation-schematic-toolbar-tool-states-dark-tool-bg-hvr: var(
			--color-system-subtle-subtle-975
		);
    --navigation-schematic-toolbar-tool-states-dark-tool-bg-active: var(
			--color-system-subtle-subtle-975
		);
    --navigation-schematic-toolbar-tool-states-dark-tool-bg-selected: var(
			--color-system-primary-variables-action-primary
		);
    --navigation-schematic-toolbar-tool-states-dark-tool-bg-selected-hvr: var(
			--color-system-primary-variables-action-primary-hover
		);
    --card-icon-card-icon-invert: var(--typography-icon-light-primary);
    --card-icon-card-icon-pop: var(--typography-icon-colors-default-primary);
    --card-icon-card-icon-bg: var(--color-system-subtle-subtle-000);
    --card-text-card-txt-subtle: var(--typography-icon-dark-secondary);
    --card-icon-card-sub-icon: var(--typography-icon-dark-secondary);
    --card-icon-card-icon-bg-active: var(
			--color-system-primary-variables-focus-primary-focus-active
		);
    --badge-states-background-na-default-badge-na-bg: var(--color-system-subtle-subtle-0000);
    --badge-states-background-na-default-badge-na-txt: var(--typography-text-dark-primary-body);
    --badge-states-background-na-default-badge-na-icon: var(
			--color-system-document-range-page-800
		);
    --badge-states-background-na-subtle-badge-na-bg: var(--color-system-subtle-subtle-025);
    --badge-states-background-na-subtle-badge-na-border: var(--color-system-subtle-subtle-200);
    --badge-states-background-na-subtle-badge-na-txt: var(--typography-text-dark-primary-body);
    --badge-states-background-na-subtle-badge-na-icon: var(
			--color-system-document-range-page-800
		);
    --navigation-primary-side-navigation-text-menu-item-txt-invert: var(
			--fonts-colors-type-light-primary
		);
    --navigation-primary-side-navigation-icon-menu-item-invert: var(
			--color-system-document-range-page-800
		);
    --navigation-schematic-toolbar-tool-states-light-tool-bg-selected-active: var(
			--color-system-primary-variables-action-primary-active
		);
    --tree-icon-tree-icon-inactive: var(--typography-icon-dark-tertiary);
    --typography-icon-dark-tertiary: var(--fonts-colors-type-dark-subtle);
  }
  .dark {
    color-scheme: dark;
    --svg-icon-filter: invert(1);
    --sidebar-svg-icon-filter: invert(1);
    --header-primary-color: var(--color-system-dark-gray-blue);
    --header-secondary-color: var(--color-system-red-orange);
    --sidebar-bg-color: var(--color-system-dark-gray-blue);
    --sidebar-text-color: var(--color-system-gray-white);
    --content-bg-color: var(--color-system-dark-gray-blue);
    --shadow-comp-header-border: ;
    --breadcrumb-icon-breadcrumb-icon-active: #f3f5f8;
    --typography-text-dark-sub-content-metric: var(--color-system-document-range-page-025);
    --document-component-frame-comp-bg: var(--color-system-document-range-page-900);
    --breadcrumb-text-breadcrumb-txt-active: var(--color-system-document-range-page-100);
    --breadcrumb-text-breadcrumb-txt-inactive: var(--color-system-gray-gray-400);
    --breadcrumb-icon-breadcrumb-icon-inactive: var(--color-system-document-range-page-500);
    --typography-text-dark-primary-heading: var(--color-system-gray-white);
    --card-color: var(--color-system-gray-gray-900);
    --card-color-hover: var(--color-system-gray-gray-700);
    --card-color-text-color: #f3f5f8;
    --card-color-border-color: var(--color-system-gray-gray-300);
    --input-box-color-border-color: var(--color-system-gray-gray-500);
    --primary-text-color: var(--color-system-gray-white);
    --secondary-text-color: var(--color-system-gray-gray-300);
    --tertiary-text-color: var(--color-system-blue-blue-100);
    --task-tag-color: var(--color-system-blue-half-values-blue-200-40);
    --typography-text-dark-primary-body: var(--color-system-document-range-page-000);
    --button-custom-primary-color-bg: var(--color-system-blue-blue-800);
    --button-custom-secondary-color-bg: var(--color-system-document-range-page-black);
    --button-custom-default-color-text: var(--color-system-gray-white-000);
    --button-custom-secondary-color-text: var(--color-system-gray-white-000);
    --button-custom-secondary-color-outline: var(--color-system-document-range-page-700);
    --button-custom-tertiary-color-outline-focus: var(--color-system-orange-orange-900);
    --button-custom-primary-color-bg-hover: var(--color-system-blue-blue-600);
    --button-custom-secondary-color-bg-hover: var(--color-system-document-range-page-700);
    --upgrade-button-color-bg: var(--color-system-gray-white-000);
    --dashboard-header-color-bg: var(--color-system-gray-gray-800);
    --dialog-modal-color-bg: var(--color-system-document-range-half-values-page-black-075);
    --dialog-form-modal-title-color-bg: var(--color-system-document-range-page-black);
    --dialog-form-modal-title-color-text: var(--color-system-document-range-page-white-000);
    --filter-bg: var(--color-system-cool-gray);
    --filter-text-color: var(--color-system-gray-gray-50);
    --filter-frame-bg-color: var(--color-system-gray-gray-600);
    --filter-hover: var(--color-system-blue-gray);
    --filter-checkbox-bg: var(--color-system-gray-white);
    --filter-checkbox-icon: invert(0%) brightness(35%) contrast(120%);
    --status-indicator-color-bg: var(--color-system-document-range-page-white-20);
    --priority-indicator-color-bg: var(--color-system-violet-violet-200-50);
    --document-status-indicator-color-bg-active: var(--color-system-green-500-half-value-50);
    --document-status-indicator-color-bg-archive: var(--color-system-yellow-500-half-value-50);
    --border-color: var(--color-system-gray-gray-800);
    --dropdown-hover-bg-color: var(--color-system-gray-gray-600);
    --document-component-frame-state-primary-border: var(--document-branded-a);
    --document-component-frame-state-primary-weight: var(--border-border-w-05);
    --button-radius-btn-radius: var(--radius-default-radius);
    --button-radius-btn-radius-sm: var(--radius-default-radius);
    --button-radius-btn-radius-lg: var(--radius-default-radius);
    --document-frame-space-spacing-x: var(--padding-padding-x-padding-x-lg);
    --document-frame-space-spacing-y: var(--padding-padding-y-padding-y-lg);
    --document-frame-space-spacing-between: var(--padding-padding-between-padding-between-xxl);
    --document-component-frame-comp-radius: var(--radius-r-018);
    --document-frame-space-page-design: var(--padding-padding-x-padding-x-lg);
    --alert-radius-alert-radiuseses: var(--radius-default-radius);
    --alert-space-padding-y-alert-padding-y: var(--padding-padding-y-padding-y-sm);
    --alert-space-padding-x-alert-padding-x: var(--padding-padding-x-padding-x);
    --alert-states-success-subtle-success-s-bg: var(--color-system-success-success-900);
    --alert-states-success-emphasis-alert-success-border: var(
			--color-system-success-success-400-p
		);
    --alert-states-success-subtle-alert-success-icon: var(
			--typography-icon-colors-dark-success
		);
    --alert-states-info-subtle-alert-info-s-bg: var(--color-system-info-info-900);
    --alert-states-info-emphasis-alert-info-border: var(--color-system-info-info-500-p);
    --alert-states-info-subtle-alert-info-icon: var(--typography-icon-colors-dark-info);
    --alert-states-warning-subtle-alert-warning-s-bg: var(--color-system-warning-warning-900);
    --alert-states-warning-emphasis-alert-warning-border: var(
			--color-system-warning-warning-800
		);
    --alert-states-warning-subtle-alert-warning-icon: var(
			--typography-icon-colors-dark-warning
		);
    --alert-states-danger-subtle-alert-danger-s-bg: var(--color-system-danger-danger-900);
    --alert-states-danger-emphasis-alert-danger-border: var(--color-system-danger-danger-500);
    --alert-states-danger-subtle-alert-danger-icon: var(--typography-icon-colors-dark-danger);
    --typography-text-dark-secondary-heading: #cecfd4;
    --typography-text-dark-secondary-body: #a7a8ad;
    --typography-text-dark-tertiary-body: #87878d;
    --typography-text-dark-disabled: #47474f;
    --alert-space-padding-between-alert-padding-between: var(
			--padding-padding-between-padding-between
		);
    --document-component-title-title-border: var(--border-border-width-rg);
    --document-component-title-title-space-between: var(
			--padding-padding-between-padding-between
		);
    --document-component-title-header: var(--fonts-colors-type-dark-primary-heading);
    --document-component-title-title-border-color: var(--border-border-border-10);
    --document-component-title-title-space-y: var(--padding-padding-y-padding-y-lg);
    --typography-icon-dark-secondary: var(--fonts-colors-type-dark-muted);
    --typography-text-light-primary-heading: var(--fonts-colors-type-light-primary);
    --typography-text-light-secondary-heading: var(--fonts-colors-type-light-secondary);
    --typography-text-light-disabled: var(--fonts-colors-type-light-muted);
    --typography-icon-light-primary: var(--fonts-colors-type-light-primary);
    --typography-icon-light-secondary: var(--fonts-colors-type-light-secondary);
    --typography-icon-light-disabled: var(--fonts-colors-type-light-muted);
    --button-states-high-btn-bg: var(--color-system-primary-primary-700);
    --button-states-high-btn-bg-hover: var(--color-system-primary-primary-600);
    --button-states-high-btn-bg-active: var(--color-system-primary-primary-800);
    --button-states-high-btn-bg-disabled: var(--color-system-disabled-disabled-700);
    --button-states-high-btn-focus: var(--color-system-primary-variables-focus-primary-focus);
    --button-states-high-btn-txt: var(--color-system-gray-white);
    --button-states-high-btn-txt-disabled: #87878d;
    --button-focus-btn-focus-width: var(--focus-focus-width);
    --button-states-low-btn-bg: var(--color-system-document-range-page-800);
    --button-states-low-btn-bg-hover: var(--color-system-document-range-page-700);
    --button-states-low-btn-bg-active: var(--color-system-document-range-page-600);
    --button-states-low-btn-bg-disabled: var(--color-system-disabled-disabled-700);
    --button-states-low-btn-focus: var(--color-system-subtle-subtle-050);
    --button-states-low-btn-txt: #f3f5f8;
    --button-states-low-btn-txt-disabled: #87878d;
    --button-states-danger-btn-bg: var(--color-system-danger-danger-700);
    --button-states-danger-btn-bg-hover: var(--color-system-danger-danger-600);
    --button-states-danger-btn-bg-active: var(--color-system-danger-danger-800-p);
    --button-states-danger-btn-bg-disabled: var(--color-system-disabled-disabled-700);
    --button-states-danger-btn-focus: var(
			--color-system-danger-variables-focus-danger-focus-active
		);
    --button-states-danger-btn-txt: var(--color-system-gray-white);
    --button-states-danger-btn-txt-disabled: #87878d;
    --document-frame-frame-bg: var(--color-system-document-range-page-900);
    --document-frame-content-example-bg: var(--color-system-document-range-page-800);
    --document-frame-frame-radius: var(--radius-r-028);
    --alert-border-alert-border-width: var(--border-border-width-na);
    --button-states-high-outline-btn-outline: var(--color-system-primary-primary-500);
    --button-states-high-outline-btn-outline-hover: var(--color-system-primary-primary-500);
    --button-states-high-outline-btn-outline-active: var(--color-system-primary-primary-500);
    --button-states-high-outline-btn-focus: var(--color-system-primary-primary-075);
    --button-states-high-outline-btn-txt: var(--fonts-colors-type-light-primary);
    --button-states-high-outline-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
    --button-icon-btn-icon-pho: var(--typography-icon-pho);
    --typography-icon-pho: var(--generic-states-divider-pho);
    --button-icon-btn-icon-invert: var(--typography-icon-light-primary);
    --button-states-high-outline-btn-bg: transparent;
    --button-states-high-outline-btn-bg-hover: var(--color-system-primary-primary-900);
    --button-states-high-outline-btn-bg-active: var(--color-system-primary-primary-800);
    --button-border-btn-border-width: var(--border-border-width-rg);
    --button-states-low-outline-btn-outline: var(--color-system-subtle-subtle-300);
    --button-states-low-outline-btn-bg: transparent;
    --button-states-low-outline-btn-outline-hover: var(--color-system-subtle-subtle-200);
    --button-states-low-outline-btn-bg-hover: var(--color-system-subtle-subtle-800);
    --button-states-low-outline-btn-outline-active: var(--color-system-subtle-subtle-200);
    --button-states-low-outline-btn-bg-active: var(--color-system-subtle-subtle-700);
    --button-states-low-outline-btn-focus: var(--color-system-subtle-subtle-050);
    --button-states-low-outline-btn-txt: var(--fonts-colors-type-dark-primary-body);
    --button-states-low-outline-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
    --button-states-danger-outline-btn-outline: var(
			--color-system-danger-variables-action-danger
		);
    --button-states-danger-outline-btn-bg: transparent;
    --button-states-danger-outline-btn-outline-hover: var(
			--color-system-danger-variables-action-danger-hover
		);
    --button-states-danger-outline-btn-bg-hover: var(--color-system-danger-danger-900);
    --button-states-danger-outline-btn-outline-active: var(
			--color-system-danger-variables-action-danger
		);
    --button-states-danger-outline-btn-bg-active: var(--color-system-danger-danger-800);
    --button-states-danger-outline-btn-focus: var(
			--color-system-danger-variables-focus-danger-focus-active
		);
    --button-states-danger-outline-btn-txt: var(--color-system-danger-variables-action-danger);
    --button-states-danger-outline-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
    --button-states-text-btn-txt: var(--color-system-primary-variables-action-primary);
    --button-states-text-btn-txt-hover: var(
			--color-system-primary-variables-action-primary-hover
		);
    --button-states-text-btn-txt-active: var(
			--color-system-primary-variables-action-primary-active
		);
    --button-states-text-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
    --badge-radius-badge-radiuses: var(--radius-default-radius-sm);
    --badge-states-primary-subtle-badge-primary-bg: var(--color-system-primary-primary-900);
    --badge-states-primary-subtle-badge-primary-txt: var(--typography-text-dark-primary-body);
    --badge-states-primary-default-badge-primary-bg: var(--color-system-primary-primary-700);
    --badge-states-primary-default-badge-primary-txt: var(--color-system-gray-white);
    --badge-states-warning-default-badge-warning-bg: var(--color-system-warning-warning-800);
    --badge-states-warning-default-badge-warning-txt: var(--color-system-gray-white);
    --badge-states-danger-default-badge-danger-bg: var(--color-system-danger-danger-800-p);
    --badge-states-danger-default-badge-danger-txt: var(--color-system-gray-white);
    --badge-states-secondary-default-badge-secondary-bg: var(
			--color-system-secondary-secondary-800
		);
    --badge-states-secondary-default-badge-secondary-txt: var(--color-system-gray-white);
    --badge-border-badge-border-width: var(--border-border-width-na);
    --checkbox-icon-chck-box-icon-primary: var(--typography-icon-light-primary);
    --checkbox-space-padding-y-chck-box-padding-y: var(--padding-padding-y-padding-y);
    --checkbox-space-padding-x-chck-box-padding-x: var(--padding-padding-x-padding-x);
    --checkbox-space-padding-between-chck-box-padding-between-sm: var(
			--padding-padding-between-padding-between
		);
    --checkbox-radius-chck-box-radius-sm: var(--radius-default-radius-x-sm);
    --checkbox-focus-chck-box-focus-width: var(--focus-focus-width);
    --checkbox-radius-chck-box-focus-radius: var(--radius-default-radius-circle);
    --checkbox-border-chck-box-border-width: var(--border-border-width-rg);
    --checkbox-states-primary-chck-box-bg: var(--color-system-subtle-subtle-900);
    --checkbox-states-primary-chck-box-bg-active: var(--color-system-subtle-subtle-900);
    --checkbox-states-disabled-chck-box-bg-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --checkbox-states-primary-chck-box-focus: var(
			--color-system-subtle-variables-focus-subtle-focus-active
		);
    --checkbox-states-primary-chck-box-txt: var(--fonts-colors-type-dark-primary-body);
    --checkbox-states-disabled-chck-box-txt-disabled: var(--fonts-colors-type-dark-disabled);
    --checkbox-states-disabled-chck-box-border-disabled: var(
			--color-system-disabled-variables-action-disabled-hover
		);
    --checkbox-states-primary-chck-box-border: var(--color-system-subtle-subtle-900);
    --checkbox-states-primary-chck-box-hover: var(
			--color-system-subtle-variables-focus-subtle-focus-active
		);
    --radio-states-primary-radio-bg: var(--color-system-primary-variables-action-primary);
    --radio-states-primary-radio-border: var(--color-system-primary-variables-action-primary);
    --radio-states-primary-radio-hover: var(
			--color-system-primary-variables-focus-primary-focus
		);
    --radio-states-disabled-radio-bg-disabled: var(
			--color-system-disabled-variables-action-disabled-emphasis
		);
    --radio-states-primary-radio-focus: var(
			--color-system-primary-variables-focus-primary-focus-emphasis
		);
    --radio-states-disabled-radio-border-disabled: var(
			--color-system-disabled-variables-action-disabled-emphasis
		);
    --radio-states-primary-radio-txt: var(--fonts-colors-type-dark-primary-body);
    --radio-states-disabled-radio-txt-disabled: var(--fonts-colors-type-dark-tertiary-body);
    --radio-space-padding-y-radio-padding-y: var(--padding-padding-y-padding-y);
    --radio-space-padding-x-radio-padding-x: var(--padding-padding-x-padding-sm-x);
    --radio-space-padding-between-radio-padding-between: var(
			--padding-padding-between-padding-between-lg
		);
    --radio-radius-radio-radius-sm: var(--radius-default-radius-sm);
    --radio-focus-radio-focus-width: var(--focus-focus-width);
    --radio-radius-radio-focus-radius: var(--radius-default-radius-circle);
    --radio-border-radio-border-width: var(--border-border-width-rg);
    --breadcrumb-space-padding-y-breadcrumb-padding-y: var(--padding-padding-y-padding-y);
    --breadcrumb-space-padding-x-breadcrumb-padding-x: var(--padding-padding-x-padding-x);
    --breadcrumb-space-padding-between-breadcrumb-padding-between: var(
			--padding-padding-between-padding-between
		);
    --toast-radius-toast-radiuseses: var(--radius-default-radius);
    --toast-states-success-toast-success-header-bg: var(
			--color-system-success-variables-action-success
		);
    --toast-states-success-toast-success-body-bg: var(--color-system-document-range-page-800);
    --toast-states-info-toast-info-header-bg: var(--color-system-info-variables-action-info);
    --toast-states-warning-toast-warning-header-bg: var(
			--color-system-warning-variables-action-warning
		);
    --toast-states-danger-toast-danger-header-bg: var(
			--color-system-danger-variables-action-danger
		);
    --toast-space-padding-between-toast-padding-between: var(
			--padding-padding-between-padding-between
		);
    --toast-states-default-toast-default-header-bg: var(--color-system-subtle-subtle-700);
    --toast-states-default-toast-default-body-bg: var(--color-system-document-range-page-800);
    --toast-icon-toast-icon-primary: var(--color-system-document-range-page-800);
    --toast-text-toast-default-txt: var(--fonts-colors-type-dark-primary-body);
    --toast-text-toast-time-txt: var(--fonts-colors-type-dark-tertiary-body);
    --toast-states-info-toast-info-body-bg1: var(--color-system-document-range-page-800);
    --toast-states-warning-toast-warning-body-bg: var(--color-system-document-range-page-800);
    --toast-states-danger-toast-danger-body-bg: var(--color-system-document-range-page-800);
    --breadcrumb-text-breadcrumb-txt-divider: var(--fonts-colors-type-light-secondary);
    --alert-icon-alert-general-icon-default: var(--color-system-document-range-page-800);
    --radio-states-disabled-radio-bg-disabled-hover: var(
			--color-system-disabled-variables-focus-disabled-focus
		);
    --radio-states-disabled-radio-bg-disabled-active: var(
			--color-system-disabled-variables-focus-disabled-focus-emphasis
		);
    --tooltip-space-padding-y-tooltip-padding-y: var(--padding-padding-y-padding-y);
    --tooltip-radius-tooltip-radius: var(--radius-default-radius);
    --tooltip-space-padding-x-tooltip-padding-x: var(--padding-padding-x-padding-x);
    --tooltip-states-light-tooltip-bg-light: var(--color-system-subtle-subtle-900);
    --tooltip-text-tooltip-default-txt-dark: var(--fonts-colors-type-dark-primary-body);
    --tooltip-states-dark-tooltip-bg-dark: var(--color-system-subtle-subtle-700);
    --tooltip-space-padding-between-toast-padding-between: var(
			--padding-padding-between-padding-between
		);
    --stepper-states-active-stepper-active-step-txt: var(--fonts-colors-type-light-primary);
    --stepper-states-active-stepper-active-icon: var(--typography-icon-light-primary);
    --stepper-states-todo-stepper-todo-icon: var(--color-system-document-range-page-800);
    --stepper-states-todo-stepper-todo-step-txt: var(--fonts-colors-type-dark-primary-body);
    --stepper-space-padding-y-stepper-padding-y: var(--padding-padding-y-padding-y);
    --stepper-space-padding-x-stepper-padding-x: var(--padding-padding-x-padding-x);
    --stepper-space-padding-between-stepper-padding-between: var(
			--padding-padding-between-padding-between
		);
    --stepper-states-active-stepper-active-bg: var(
			--color-system-primary-variables-action-primary
		);
    --stepper-states-todo-stepper-todo-bg: var(
			--color-system-disabled-variables-action-disabled-emphasis
		);
    --stepper-radius-stepper-focus-radius: var(--radius-default-radius-circle);
    --stepper-states-active-stepper-active-txt: var(--fonts-colors-type-dark-primary-body);
    --stepper-states-todo-stepper-todo-txt: var(--fonts-colors-type-dark-tertiary-body);
    --stepper-states-complete-stepper-complete-step-txt: var(--fonts-colors-type-dark-muted);
    --stepper-states-complete-stepper-complete-bg: var(
			--color-system-disabled-variables-action-disabled
		);
    --stepper-states-complete-stepper-complete-txt: var(--fonts-colors-type-dark-primary-body);
    --stepper-states-complete-stepper-complete-icon: var(
			--color-system-document-range-page-800
		);
    --stepper-border-stepper-border-width: var(--border-border-width-sm);
    --stepper-border-stepper-complete-stroke: var(--border-border-border-10);
    --stepper-border-stepper-todo-stroke: var(--border-border-border-30);
    --document-frame-title-breadcrumb-icon: var(--document-branded-a);
    --document-tekna-element: #ff8500;
    --document-frame-title-doc-title-radius: var(--radius-r-022);
    --document-frame-footer-footer-bg: var(--color-system-document-range-page-800);
    --form-space-padding-y-form-padding-y: var(--padding-padding-y-padding-y);
    --form-radius-form-radiuseses: var(--radius-default-radius);
    --form-icon-default-form-icon-primary: var(--color-system-document-range-page-800);
    --form-border-form-border-width: var(--border-border-width-sm);
    --form-space-padding-x-form-padding-x: var(--padding-padding-x-padding-x);
    --form-states-default-form-default-bg: var(--color-system-document-range-page-800);
    --form-states-default-form-default-bg-disabled: var(--color-system-disabled-disabled-700);
    --form-text-form-default-txt: #f3f5f8;
    --form-focus-form-border-focus: var(--color-system-primary-variables-focus-primary-focus);
    --form-border-form-border-warning: var(--color-system-warning-variables-action-warning);
    --form-border-form-border-danger: var(--color-system-danger-variables-action-danger);
    --form-space-padding-between-form-padding-between: var(
			--padding-padding-between-padding-between
		);
    --form-text-form-disabled-txt: #47474f;
    --alert-states-success-emphasis-alert-success-bg: var(
			--color-system-success-variables-action-success
		);
    --alert-states-info-emphasis-alert-info-f-bg: var(
			--color-system-info-variables-action-info
		);
    --alert-states-warning-emphasis-alert-warning-f-bg: var(
			--color-system-warning-variables-action-warning
		);
    --alert-states-danger-emphasis-alert-danger-f-bg: var(
			--color-system-danger-variables-action-danger
		);
    --switch-state-primary-switch-active: var(--color-system-primary-variables-action-primary);
    --switch-state-primary-switch-inactive-focus: var(
			--color-system-subtle-variables-focus-subtle-focus-hover
		);
    --switch-state-primary-switch-focus: var(
			--color-system-primary-variables-focus-primary-focus-hover
		);
    --switch-state-handle-switch-handle-primary: var(--color-system-gray-white);
    --switch-space-padding-y-switch-padding-y: var(--padding-padding-y-padding-y-sm-x);
    --switch-space-padding-x-switch-padding-x: var(--padding-padding-x-padding-sm-x);
    --switch-radius-switch-radius: var(--radius-default-radius-circle);
    --switch-focus-switch-focus-width: var(--focus-focus-width);
    --tags-icon-tag-icon-default: var(--color-system-document-range-page-800);
    --tags-space-padding-y-tag-padding-y: var(--padding-padding-y-padding-y-sm-x);
    --tags-space-padding-x-tag-padding-x: var(--padding-padding-x-padding-sm);
    --tags-space-padding-between-tag-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
    --tags-focus-tag-focus-width: var(--focus-focus-width);
    --tags-radius-tag-radius: var(--radius-default-radius-xl);
    --tags-border-tag-border-width: var(--border-border-width-sm);
    --tags-states-primary-tag-bg: var(--color-system-primary-variables-action-primary);
    --tags-states-primary-tag-bg-hover: var(
			--color-system-primary-variables-action-primary-hover
		);
    --tags-states-primary-subtle-tag-bg: var(--color-system-primary-primary-900);
    --tags-states-primary-subtle-tag-bg-hover: var(--color-system-primary-primary-800);
    --tags-states-secondary-tag-bg: var(--color-system-secondary-variables-action-secondary);
    --tags-states-secondary-subtle-tag-bg: var(--color-system-secondary-secondary-900);
    --tags-states-secondary-subtle-tag-bg-hover: var(--color-system-secondary-secondary-800);
    --tags-states-secondary-tag-bg-hover: var(
			--color-system-secondary-variables-action-secondary-hover
		);
    --tags-states-default-tag-bg: var(--color-system-subtle-subtle-700);
    --tags-states-default-tag-bg-hover: var(--color-system-subtle-subtle-600);
    --tags-states-default-subtle-tag-bg: var(--color-system-subtle-subtle-800);
    --tags-states-default-subtle-tag-bg-hover: var(--color-system-subtle-subtle-700);
    --tags-text-tag-txt-default: var(--typography-text-dark-primary-body);
    --tags-text-tag-txt-invert: var(--typography-text-light-primary-heading);
    --tags-icon-tag-icon-invert: var(--typography-icon-light-primary);
    --switch-state-primary-switch-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --switch-state-handle-switch-handle-radius: var(--radius-default-radius-circle);
    --switch-state-primary-switch-inactive: var(--color-system-subtle-subtle-700);
    --toast-text-toast-default-txt-invert: var(--fonts-colors-type-light-primary);
    --toast-icon-toast-icon-invert: var(--typography-icon-light-primary);
    --toast-text-toast-time-txt-invert: var(--fonts-colors-type-light-primary);
    --form-text-form-txt-dng: var(--fonts-colors-type-actions-default-danger);
    --form-text-form-txt-warning: var(--fonts-colors-type-actions-default-warning);
    --form-icon-default-form-icon-secondary: var(--typography-icon-dark-secondary);
    --form-text-form-txt-ghost: #e2d9f3;
    --form-icon-invert-form-icon-primary: var(--typography-icon-light-primary);
    --form-icon-invert-form-icon-secondary: var(--typography-icon-light-secondary);
    --form-border-form-border-default: var(--border-border-border-20);
    --form-focus-form-focus-width: var(--focus-focus-width);
    --button-radius-icon-btn-radius: var(--radius-nested-nested-radius);
    --selections-text-selection-txt-default: var(--typography-text-dark-primary-body);
    --selections-text-selection-txt-invert: var(--typography-text-light-primary-heading);
    --selections-space-padding-y-selection-padding-y: var(--padding-padding-y-padding-y-sm-x);
    --selections-space-padding-x-selection-padding-x: var(--padding-padding-x-padding-sm-x);
    --selections-space-padding-between-selection-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
    --selections-radius-selection-btn-radius: var(--radius-nested-nested-radius);
    --selections-border-selection-border-width-default: var(--border-border-width-sm);
    --selections-states-background-selection-bg: var(--color-system-subtle-subtle-800);
    --selections-states-default-selection-default: var(--color-system-subtle-subtle-800);
    --selections-states-default-selection-default-hover: var(--color-system-subtle-subtle-700);
    --selections-states-active-selection-active-bg: var(
			--color-system-primary-variables-action-primary-hover
		);
    --selections-states-active-selection-active-bg-hover: var(
			--color-system-primary-variables-action-primary-hover
		);
    --selections-radius-selection-radius: var(--radius-default-radius);
    --range-icon-range-icon-default: var(--color-system-document-range-page-800);
    --range-icon-range-icon-invert: var(--typography-icon-light-primary);
    --range-text-range-txt-default: var(--typography-text-dark-primary-body);
    --range-space-padding-y-range-padding-y: var(--padding-padding-y-padding-y-sm-x);
    --range-space-padding-x-range-padding-x: var(--padding-padding-x-padding-sm-x);
    --range-space-padding-between-range-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
    --range-radius-range-radius: var(--radius-default-radius-sm);
    --range-radius-range-btn-radius: var(--radius-default-radius-sm);
    --range-focus-range-focus-width: var(--focus-focus-width);
    --range-border-range-border-width: var(--border-border-width-rg);
    --range-states-background-range-bg: var(--color-system-disabled-variables-action-disabled);
    --range-states-default-range-bg: var(--color-system-disabled-disabled-200);
    --range-states-default-range-bg-hover: var(
			--color-system-primary-variables-action-primary-emphasis
		);
    --range-states-default-range-focus: var(
			--color-system-primary-variables-focus-primary-focus
		);
    --range-states-active-range-bg: var(--color-system-primary-variables-action-primary);
    --range-states-active-range-bg-hover: var(
			--color-system-primary-variables-focus-primary-focus-emphasis
		);
    --range-states-active-range-focus: var(
			--color-system-primary-variables-focus-primary-focus
		);
    --tabs-icon-tab-icon-default: var(--color-system-document-range-page-800);
    --tabs-icon-tab-icon-active: var(--fonts-colors-type-actions-default-primary);
    --tabs-space-padding-y-tab-padding-y: var(--padding-padding-y-padding-y-sm-x);
    --tabs-space-padding-x-tab-padding-x: var(--padding-padding-x-padding-sm-x);
    --tabs-space-padding-between-tab-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
    --tabs-radius-tab-radius: var(--radius-default-radius-sm);
    --tabs-focus-tab-focus-width: var(--focus-focus-width);
    --tabs-border-tab-border-width-default: var(--border-border-width-rg);
    --tabs-border-tab-border-default: var(--border-border-border-10);
    --tabs-border-tab-border-width-active: var(--border-border-width-rg);
    --tabs-border-tab-border-active: var(--border-colors-dark-primary);
    --tabs-text-tab-txt-default: var(--color-system-document-range-page-800);
    --tabs-text-tab-txt-active: var(--fonts-colors-type-actions-default-primary);
    --modal-space-padding-y-modal-padding-y: var(--padding-padding-y-padding-y);
    --modal-radius-modal-radiuseses: var(--radius-default-radius-lg);
    --modal-icon-modal-icon-primary: var(--color-system-document-range-page-800);
    --modal-icon-modal-icon-invert: var(--typography-icon-light-primary);
    --modal-border-modal-border-width: var(--border-border-width-sm);
    --modal-space-padding-x-modal-padding-x: var(--padding-padding-x-padding-x);
    --modal-states-default-modal-default-body-bg: var(--color-system-document-range-page-900);
    --modal-text-modal-default-txt: #f3f5f8;
    --modal-text-modal-default-txt-invert: var(--color-system-gray-white);
    --modal-space-padding-between-modal-padding-between: var(
			--padding-padding-between-padding-between
		);
    --modal-text-modal-title-txt: var(--color-system-gray-white);
    --modal-border-modal-border: var(--typography-text-dark-disabled);
    --switch-focus-switch-border-width: var(--radius-default-radius-sm);
    --pagination-states-primary-pagination-a-active: var(
			--color-system-primary-variables-action-primary
		);
    --pagination-states-primary-pagination-a-default: var(
			--color-system-primary-variables-focus-primary-focus-emphasis
		);
    --pagination-states-primary-pagination-a-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --pagination-space-padding-y-pagination-padding-y: var(--padding-padding-y-padding-y-sm-x);
    --pagination-space-padding-x-pagination-padding-x: var(--padding-padding-x-padding-sm-x);
    --pagination-radius-pagination-handle-a-radius: var(--radius-default-radius-circle);
    --pagination-focus-pagination-focus-width: var(--focus-focus-width);
    --pagination-focus-pagination-border-width: var(--radius-default-radius-sm);
    --pagination-radius-pagination-border: var(--color-system-subtle-subtle-200);
    --pagination-text-pagination-txt-default: var(--typography-text-dark-primary-body);
    --pagination-text-pagination-txt-invert: var(--typography-text-light-primary-heading);
    --pagination-icon-pagination-icon-default: var(--color-system-document-range-page-800);
    --pagination-icon-pagination-icon-invert: var(--typography-icon-light-primary);
    --pagination-icon-pagination-icon-disabled: var(--color-system-document-range-page-125);
    --pagination-states-primary-pagination-b-active: var(--color-system-subtle-subtle-700);
    --pagination-states-primary-pagination-b-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --pagination-text-pagination-txt-disabled: var(--typography-text-dark-disabled);
    --pagination-radius-pagination-handle-b-radius: var(--radius-default-radius);
    --selections-border-selection-border-width-active: var(--border-border-width-rg);
    --selections-border-selection-border-default: var(--border-border-width-sm);
    --selections-border-selection-border-active: var(--border-border-width-rg);
    --selections-states-default-selection-border-default: var(--border-border-border-20);
    --selections-states-active-selection-border-active: var(
			--color-system-primary-variables-action-primary
		);
    --selections-states-active-selection-border-bg-active: var(
			--color-system-document-range-page-white-000
		);
    --switch-text-switch-title-txt: var(--fonts-colors-type-dark-primary-body);
    --switch-text-switch-default-txt: var(--fonts-colors-type-dark-secondary-body);
    --switch-text-switch-default-txt-disabled: var(--fonts-colors-type-dark-disabled);
    --switch-text-switch-title-txt-disabled: var(--fonts-colors-type-dark-disabled);
    --pagination-space-padding-between-pagination-padding-between: var(
			--padding-padding-between-padding-between
		);
    --badge-states-primary-subtle-badge-primary-icon: var(
			--color-system-document-range-page-800
		);
    --badge-states-primary-default-badge-primary-icon: var(--typography-icon-light-primary);
    --badge-states-secondary-default-badge-secondary-icon: var(--typography-icon-light-primary);
    --badge-states-warning-default-badge-warning-icon: var(--typography-text-dark-primary-body);
    --badge-states-danger-default-badge-danger-icon: var(--typography-icon-light-primary);
    --avatar-radius-avatar-radiuseses-sm: var(--radius-default-radius-circle);
    --avatar-icon-avatar-general-icon: var(--color-system-document-range-page-800);
    --avatar-icon-avatar-general-icon-invert: var(--color-system-document-range-page-800);
    --avatar-states-high-avatar-high-bg: var(
			--color-system-primary-variables-focus-primary-focus-emphasis
		);
    --avatar-states-medium-avatar-medium-bg: var(
			--color-system-primary-variables-focus-primary-focus
		);
    --avatar-states-low-avatar-low-bg: var(--color-system-subtle-variables-action-subtle);
    --avatar-text-avatar-default-txt: var(--fonts-colors-type-dark-primary-body);
    --avatar-text-avatar-default-txt-invert: var(--fonts-colors-type-dark-primary-body);
    --avatar-radius-avatar-radiuseses-md: var(--radius-default-radius-circle);
    --avatar-radius-avatar-radiuseses-lg: var(--radius-default-radius-circle);
    --card-radius-card-radiuseses: var(--radius-default-radius-lg);
    --card-states-emphassis-card-emphasis-body-bg: var(--color-system-subtle-subtle-800);
    --card-radius-card-default-txt: var(--fonts-colors-type-light-primary);
    --card-states-subtle-card-subtle-body-bg: var(--color-system-subtle-subtle-800);
    --list-text-list-txt-list-item: var(--color-system-document-range-page-800);
    --list-text-list-txt-title: var(--fonts-colors-type-dark-primary-body);
    --list-border-list-border-default: var(--border-border-border-20);
    --list-icon-list-icon-default: var(--color-system-document-range-page-800);
    --list-space-padding-y-list-padding-y: var(--padding-padding-y-padding-y-sm-x);
    --list-space-padding-x-list-padding-x: var(--padding-padding-x-padding-sm-x);
    --list-space-padding-between-list-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
    --list-radius-list-radius: var(--radius-default-radius-sm);
    --list-focus-list-focus-width: var(--focus-focus-width);
    --list-border-list-border-width-default: var(--border-border-width-sm);
    --list-text-list-txt-list-item-content: var(--typography-icon-dark-secondary);
    --list-list-background-default: var(--color-system-document-range-page-900);
    --comment-radius-comment-radiuseses-lg: var(--radius-default-radius-circle);
    --comment-text-comment-username-txt: var(--fonts-colors-type-dark-tertiary-body);
    --comment-icon-comment-general-icon: var(--typography-icon-light-secondary);
    --comment-text-comment-time-txt: var(--fonts-colors-type-dark-muted);
    --comment-text-comment-comment-txt: var(--fonts-colors-type-dark-primary-body);
    --calendar-states-date-calendar-default: var(--color-system-document-range-page-white-000);
    --calendar-states-date-calendar-hover: var(--color-system-subtle-variables-action-subtle);
    --calendar-states-date-calendar-active-center: var(--color-system-subtle-subtle-025);
    --calendar-states-date-calendar-active-end: var(
			--color-system-primary-variables-focus-primary-focus-emphasis
		);
    --calendar-text-calendar-txt-date-active: var(--typography-text-dark-primary-body);
    --calendar-text-calendar-txt-month: var(--typography-text-dark-primary-body);
    --calendar-text-calendar-txt-week: var(--typography-text-dark-tertiary-body);
    --calendar-icon-calendar-icon-default: var(--color-system-document-range-page-800);
    --calendar-radius-calendar-date-radius: var(--radius-default-radius);
    --calendar-radius-calendar-radius: var(--radius-default-radius-lg);
    --calendar-focus-pagination-focus-width: var(--focus-focus-width);
    --calendar-focus-pagination-border-width: var(--radius-default-radius-sm);
    --calendar-text-calendar-txt-date-default: var(--typography-text-dark-primary-body);
    --calendar-states-date-calendar-bg: var(--color-system-subtle-subtle-000);
    --calendar-text-calendar-txt-date-inactive: var(--typography-text-dark-disabled);
    --calendar-radius-calendar-active-date-radius: var(--radius-default-radius-x-na);
    --calendar-text-calendar-txt-date-selected: var(--typography-text-light-primary-heading);
    --calendar-calendar-border-width: var(--border-border-width-rg);
    --calendar-calendar-border: var(--color-system-primary-variables-action-primary);
    --calendar-radius-calendar-current-date: var(--radius-default-radius-circle);
    --rating-states-primary-rating-active: var(--color-system-yellow-yellow-300);
    --rating-states-primary-rating-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --badge-states-success-default-badge-success-bg: var(
			--color-system-success-variables-action-success
		);
    --badge-states-success-default-badge-success-txt: var(--typography-text-dark-primary-body);
    --badge-states-success-default-badge-success-icon: var(
			--color-system-document-range-page-800
		);
    --carousel-states-date-carousel-default: var(--color-system-subtle-subtle-075);
    --carousel-states-date-carousel-active: var(--color-system-primary-primary-900);
    --carousel-text-carousel-txt-date-default: var(--typography-text-dark-primary-body);
    --carousel-text-carousel-txt-date-active: var(--typography-text-dark-primary-body);
    --carousel-icon-carousel-icon-default: var(--color-system-document-range-page-800);
    --carousel-radius-carousel-date-radius: var(--radius-default-radius);
    --carousel-radius-carousel-current-date: var(--radius-default-radius-circle);
    --carousel-radius-carousel-active-date-radius: var(--radius-default-radius-x-na);
    --carousel-radius-carousel-radius: var(--radius-default-radius-lg);
    --carousel-focus-carousel-focus-width: var(--focus-focus-width);
    --carousel-focus-carousel-border-width: var(--radius-default-radius-sm);
    --carousel-carousel-border: var(--color-system-primary-variables-action-primary);
    --carousel-carousel-border-width: var(--border-border-width-rg);
    --pagination-text-pagination-txt-active: var(--typography-text-dark-primary-body);
    --calendar-states-date-calendar-current: var(
			--color-system-primary-variables-action-primary
		);
    --calendar-text-calendar-txt-date-current: var(--typography-text-light-primary-heading);
    --table-states-primary-title-row-active: var(--color-system-subtle-subtle-700);
    --table-states-primary-title-row-hover: var(--color-system-subtle-subtle-800);
    --table-states-primary-title-row-default: var(--color-system-subtle-subtle-900);
    --table-states-primary-row-row-default: transparent;
    --table-states-primary-row-row-hover: var(--color-system-subtle-subtle-800);
    --table-text-table-header: var(--typography-text-dark-primary-body);
    --table-text-table-txt-default: var(--typography-text-dark-primary-body);
    --table-text-table-txt-disabled: var(--typography-text-dark-disabled);
    --table-text-table-txt-invert: var(--typography-text-light-primary-heading);
    --table-icon-table-icon-default: var(--color-system-document-range-page-800);
    --table-icon-table-icon-disabled: var(--color-system-document-range-page-125);
    --table-icon-table-icon-invert: var(--typography-icon-light-primary);
    --table-radius-table-radius: var(--radius-default-radius-lg);
    --table-border-table-border: var(--border-border-border-20);
    --table-focus-table-focus-width: var(--focus-focus-width);
    --table-border-table-border-width-row: var(--border-border-width-sm);
    --table-states-primary-row-row-active: var(--color-system-subtle-subtle-700);
    --table-text-table-txt-action-btn: var(--button-states-text-btn-txt);
    --table-states-primary-table-bg: var(--color-system-document-range-page-800);
    --table-states-primary-table-header: var(--color-system-document-range-page-800);
    --table-states-primary-table-footer: var(--color-system-document-range-page-800);
    --button-states-medium-btn-bg: var(--color-system-primary-primary-050);
    --button-states-medium-btn-bg-hover: var(--color-system-primary-primary-075);
    --button-states-medium-btn-bg-active: var(--color-system-primary-primary-125);
    --button-states-medium-btn-bg-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --button-states-medium-btn-focus: var(--color-system-primary-primary-050);
    --button-states-medium-btn-txt: var(--fonts-colors-type-actions-default-primary);
    --button-states-medium-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
    --button-states-medium-outline-btn-outline: var(--color-system-primary-primary-200);
    --button-states-medium-outline-btn-bg: var(--color-system-primary-primary-025);
    --button-states-medium-outline-btn-outline-hover: var(--color-system-primary-primary-200);
    --button-states-medium-outline-btn-bg-hover: var(--color-system-primary-primary-050);
    --button-states-medium-outline-btn-outline-active: var(--color-system-primary-primary-200);
    --button-states-medium-outline-btn-bg-active: var(--color-system-primary-primary-050);
    --button-states-medium-outline-btn-focus: var(--color-system-primary-primary-050);
    --button-states-medium-outline-btn-txt: var(--fonts-colors-type-actions-default-primary);
    --button-states-medium-outline-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
    --button-states-high-outline-btn-outline-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --badge-states-danger-subtle-badge-danger-bg: var(--color-system-danger-danger-900);
    --badge-states-warning-subtle-badge-warning-bg: var(--color-system-warning-warning-900);
    --badge-states-success-subtle-badge-success-bg: var(--color-system-success-success-900);
    --badge-states-secondary-subtle-badge-secondary-bg: var(
			--color-system-secondary-secondary-900
		);
    --badge-states-success-subtle-badge-success-txt: var(--typography-text-colors-dark-success);
    --badge-states-success-subtle-badge-success-icon: var(
			--typography-icon-colors-dark-success
		);
    --badge-states-secondary-subtle-badge-secondary-txt: var(
			--typography-text-colors-dark-secondary
		);
    --badge-states-secondary-subtle-badge-secondary-icon: var(
			--typography-icon-colors-dark-secondary
		);
    --badge-states-danger-subtle-badge-danger-txt: var(--typography-text-colors-dark-danger);
    --badge-states-danger-subtle-badge-danger-icon: var(--typography-icon-colors-dark-danger);
    --badge-states-warning-subtle-badge-warning-txt: var(--typography-text-colors-dark-warning);
    --badge-states-warning-subtle-badge-warning-icon: var(
			--typography-text-colors-dark-warning
		);
    --badge-states-primary-subtle-badge-primary-border: var(
			--color-system-primary-variables-focus-primary-focus-active
		);
    --badge-states-secondary-subtle-badge-secondary-border: var(
			--color-system-secondary-variables-focus-secondary-focus-hover
		);
    --badge-states-success-subtle-badge-secondary-border: var(
			--color-system-success-success-300
		);
    --badge-states-warning-subtle-badge-secondary-border: var(
			--color-system-warning-variables-focus-warning-focus-active
		);
    --badge-states-danger-subtle-badge-secondary-border: var(--color-system-danger-danger-400);
    --table-text-table-txt-sub-text: var(--typography-text-dark-tertiary-body);
    --dropdown-dropdown-radius-dropdown-radius: var(--radius-default-radius);
    --dropdown-dropdown-border-dropdown-border-width: var(--border-border-width-sm);
    --dropdown-dropdown-border-dropdown-complete-stroke: var(--border-border-border-10);
    --dropdown-dropdown-border-dropdown-border: var(--border-border-border-30);
    --dropdown-dropdown-states-dropdown-bg: var(--color-system-document-range-page-800);
    --dropdown-dropdown-states-dropdown-default: var(--color-system-document-range-page-900);
    --dropdown-dropdown-states-dropdown-hover: var(--color-system-document-range-page-700);
    --dropdown-dropdown-states-dropdown-active: var(--color-system-document-range-page-600);
    --dropdown-dropdown-text-dropdown-default-txt: #f3f5f8;
    --dropdown-dropdown-text-dropdown-active-txt: var(--color-system-gray-white);
    --dropdown-dropdown-text-dropdown-disabled-txt: #47474f;
    --dropdown-dropdown-radius-dropdown-radius-active: var(--radius-nested-nested-radius);
    --tree-text-tree-txt-title: var(--fonts-colors-type-dark-primary-body);
    --tree-text-tree-txt-list-item: var(--typography-text-dark-tertiary-body);
    --tree-text-tree-txt-list-item-content: var(--fonts-colors-type-dark-muted);
    --tree-border-tree-border-default: var(--border-border-border-20);
    --tree-icon-tree-icon-active: var(--color-system-document-range-page-800);
    --tree-state-tree-background: var(--color-system-document-range-page-900);
    --tree-radius-branch-radius: var(--radius-default-radius);
    --tree-border-tree-border-width-default: var(--border-border-width-na);
    --tree-border-tree-border-width-active: var(--border-border-width-na);
    --tree-state-branch-default: transparent;
    --tree-state-branch-hover: var(--color-system-subtle-subtle-800);
    --tree-state-branch-active: var(--color-system-subtle-subtle-700);
    --tree-icon-tree-icon-dropdown: var(--typography-icon-dark-secondary);
    --tree-space-padding-between-branch-padding-between-default: var(
			--padding-padding-between-padding-between-sm
		);
    --tree-space-padding-y-branch-padding-y-default: var(--padding-padding-y-padding-y);
    --process-indicator-text-process-txt-default: var(--typography-text-dark-primary-body);
    --process-indicator-icon-process-a-icon-default: var(
			--typography-icon-colors-default-secondary
		);
    --process-indicator-radius-process-a-handle-a-radius: var(--radius-default-radius);
    --process-indicator-icon-process-a-icon-background: var(--color-system-subtle-subtle-075);
    --navigation-states-background-navigation-footer-bg: var(
			--color-system-document-range-page-900
		);
    --navigation-states-background-navigation-header-bg: var(--color-system-subtle-subtle-975);
    --navigation-text-navigation-txt-header: var(--color-system-gray-white);
    --navigation-text-navigation-txt-default: #f3f5f8;
    --navigation-text-navigation-txt-sub-text: var(--typography-text-dark-tertiary-body);
    --navigation-text-navigation-txt-disabled: var(--typography-text-dark-disabled);
    --navigation-text-navigation-txt-invert: var(--typography-text-light-primary-heading);
    --navigation-icon-navigation-icon-default: #f3f5f8;
    --navigation-icon-navigation-icon-disabled: var(--color-system-document-range-page-125);
    --navigation-icon-navigation-icon-invert: var(--typography-icon-light-primary);
    --navigation-radius-navigation-sm: var(--radius-default-radius-lg);
    --navigation-focus-navigation-focus-width: var(--focus-focus-width);
    --navigation-focus-navigation-border-width: var(--radius-default-radius-sm);
    --navigation-states-background-navigation-subheader-bg: var(
			--color-system-document-range-page-900
		);
    --navigation-primary-flyout-side-nav-background: var(--color-system-subtle-subtle-800);
    --navigation-primary-flyout-side-nav-default: var(--color-system-subtle-subtle-700);
    --navigation-primary-flyout-side-nav-hover: var(--color-system-subtle-subtle-600);
    --navigation-primary-flyout-side-nav-active: var(--color-system-subtle-subtle-500);
    --navigation-primary-flyout-text-side-nav-txt-title: var(
			--fonts-colors-type-dark-primary-body
		);
    --navigation-primary-flyout-text-side-nav-txt-list-item: var(
			--typography-icon-dark-secondary
		);
    --navigation-primary-flyout-border-side-nav-stroke-default: var(--border-border-border-20);
    --navigation-primary-flyout-icon-side-nav-icon-content: var(
			--color-system-document-range-page-800
		);
    --navigation-primary-flyout-icon-side-nav-icon-dropdown: var(
			--color-system-document-range-page-800
		);
    --navigation-primary-flyout-radius-side-nav-radius: var(--radius-default-radius-sm);
    --navigation-primary-flyout-border-side-nav-border-width-default: var(
			--border-border-width-rg
		);
    --navigation-primary-flyout-border-side-nav-border-width-active: var(
			--border-border-width-rg
		);
    --navigation-primary-flyout-spacing-padding-between-side-nav-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
    --navigation-primary-flyout-spacing-padding-y-side-nav-padding-y: var(
			--padding-padding-y-padding-y
		);
    --navigation-primary-flyout-icon-side-nav-icon-pho: var(--typography-icon-pho);
    --search-space-padding-y-search-padding-y: var(--padding-padding-y-padding-y);
    --search-radius-search-radiuseses: var(--radius-default-radius);
    --search-space-padding-x-search-padding-x: var(--padding-padding-x-padding-x);
    --search-text-search-default-txt: var(--typography-text-dark-primary-body);
    --search-state-search-bg: var(--color-system-document-range-page-800);
    --search-space-padding-between-search-padding-between: var(
			--padding-padding-between-padding-between
		);
    --search-border-search-border: var(--border-border-border-20);
    --search-border-search-border-width: var(--border-border-width-sm);
    --search-text-search-inactive-txt: var(--typography-text-dark-tertiary-body);
    --tabs-border-tab-border-default-hover: var(--border-border-border-20);
    --pagination-states-primary-pagination-b-default-hover: var(
			--color-system-subtle-subtle-800
		);
    --pagination-states-primary-pagination-b-default: transparent;
    --pagination-states-primary-pagination-b-active-hover: var(
			--color-system-subtle-subtle-600
		);
    --list-list-background-hover: var(--color-system-subtle-subtle-800);
    --tabs-states-tab-bg-default: transparent;
    --tabs-states-tab-bg-active: var(--color-system-subtle-subtle-800);
    --tabs-states-tab-bg-default-hover: var(--color-system-subtle-subtle-800);
    --tabs-states-tab-bg-active-hover: var(--color-system-subtle-subtle-700);
    --table-states-primary-title-cell-active: var(--color-system-subtle-subtle-700);
    --table-states-primary-row-cell-active: var(--color-system-subtle-subtle-700);
    --document-component-frame-state-supporting-weight: var(--border-border-w-02);
    --document-component-frame-state-supporting-border: var(--document-branded-c);
    --badge-states-subtle-default-badge-subtle-bg: var(--color-system-subtle-subtle-300);
    --badge-states-subtle-default-badge-subtle-txt: var(
			--typography-text-light-primary-heading
		);
    --badge-states-subtle-default-badge-subtle-icon: var(--typography-icon-light-primary);
    --badge-states-subtle-subtle-badge-subtle-bg: var(--color-system-subtle-subtle-800);
    --badge-states-subtle-subtle-badge-subtle-border: var(--color-system-subtle-subtle-500);
    --badge-states-subtle-subtle-badge-subtle-txt: var(--typography-text-dark-primary-body);
    --badge-states-subtle-subtle-badge-subtle-icon: var(--color-system-document-range-page-800);
    --navigation-schematic-toolbar-toolbar-space-padding-y-toolbar-padding-y: var(
			--padding-padding-y-padding-y
		);
    --navigation-schematic-toolbar-tool-radius-tool-radius: var(--radius-default-radius);
    --navigation-schematic-toolbar-toolbar-space-padding-x-toolbar-padding-x: var(
			--padding-padding-x-padding-x
		);
    --navigation-schematic-toolbar-tool-text-tool-default-txt: var(
			--fonts-colors-type-dark-primary-body
		);
    --navigation-schematic-toolbar-toolbar-space-padding-between-toolbar-padding-between: var(
			--padding-padding-between-padding-between
		);
    --navigation-schematic-toolbar-tool-icon-tool-icon-primary: var(
			--color-system-document-range-page-800
		);
    --navigation-schematic-toolbar-tool-icon-tool-icon-invert: var(
			--typography-icon-light-primary
		);
    --navigation-schematic-toolbar-tool-states-light-tool-bg: var(
			--color-system-document-range-page-900
		);
    --navigation-schematic-toolbar-tool-states-light-tool-bg-hvr: var(
			--color-system-subtle-subtle-800
		);
    --navigation-schematic-toolbar-tool-states-light-tool-bg-active: var(
			--color-system-subtle-subtle-700
		);
    --navigation-schematic-toolbar-tool-states-light-tool-bg-selected: var(
			--color-system-primary-variables-action-primary
		);
    --canvas-radius-canvas-radiuseses: var(--radius-default-radius-x-na);
    --canvas-states-emphassis-canvas-body-bg: var(--color-system-document-range-page-900);
    --canvas-states-subtle-card-subtle-body-bg: var(--color-system-document-range-page-900);
    --canvas-text-card-default-txt: var(--color-system-gray-white);
    --canvas-border-canvas-border-width-complete: var(--border-border-width-sm);
    --canvas-border-canvas-complete-border: var(--color-system-subtle-subtle-200);
    --canvas-border-canvas-border: var(--color-system-subtle-subtle-100);
    --canvas-border-canvas-border-width: 0.5px;
    --canvas-states-dots-canvas-complete-border: var(--color-system-subtle-subtle-300);
    --badge-states-bold-default-badge-bold-bg: var(--color-system-subtle-subtle-700);
    --badge-states-bold-default-badge-bold-txt: var(--typography-text-light-primary-heading);
    --badge-states-bold-default-badge-bold-icon: var(--typography-icon-light-primary);
    --badge-states-bold-subtle-badge-bold-bg: var(--color-system-subtle-subtle-400);
    --badge-states-bold-subtle-badge-bold-border: var(--color-system-subtle-subtle-400);
    --badge-states-bold-subtle-badge-bold-txt: var(--typography-text-light-primary-heading);
    --badge-states-bold-subtle-badge-bold-icon: var(--typography-icon-light-primary);
    --selections-states-background-selection-border: var(--border-border-border-05);
    --typography-text-colors-dark-primary: var(--fonts-colors-type-actions-dark-primary);
    --typography-text-colors-dark-secondary: var(--fonts-colors-type-actions-dark-secondary);
    --typography-text-colors-dark-info: var(--fonts-colors-type-actions-dark-info);
    --typography-text-colors-dark-success: var(--fonts-colors-type-actions-dark-success);
    --typography-text-colors-dark-warning: var(--fonts-colors-type-actions-dark-warning);
    --typography-text-colors-dark-danger: var(--fonts-colors-type-actions-dark-danger);
    --typography-icon-colors-dark-primary: var(--fonts-colors-type-actions-dark-primary);
    --typography-icon-colors-dark-secondary: var(--fonts-colors-type-actions-dark-secondary);
    --typography-icon-colors-dark-info: var(--fonts-colors-type-actions-dark-info);
    --typography-icon-colors-dark-success: var(--fonts-colors-type-actions-dark-success);
    --typography-icon-colors-dark-warning: var(--fonts-colors-type-actions-dark-warning);
    --typography-icon-colors-dark-danger: var(--fonts-colors-type-actions-dark-danger);
    --typography-text-colors-light-primary: var(--fonts-colors-type-actions-light-primary);
    --typography-text-colors-light-secondary: var(--fonts-colors-type-actions-light-secondary);
    --typography-text-colors-light-info: var(--fonts-colors-type-actions-light-info);
    --typography-text-colors-light-success: var(--fonts-colors-type-actions-light-success);
    --typography-text-colors-light-warning: var(--fonts-colors-type-actions-light-warning);
    --typography-text-colors-light-danger: var(--fonts-colors-type-actions-light-danger);
    --typography-icon-colors-light-primary: var(--fonts-colors-type-actions-light-primary);
    --typography-icon-colors-light-secondary: var(--fonts-colors-type-actions-light-secondary);
    --typography-icon-colors-light-info: var(--fonts-colors-type-actions-light-info);
    --typography-icon-colors-light-success: var(--fonts-colors-type-actions-light-success);
    --typography-icon-colors-light-warning: var(--fonts-colors-type-actions-light-warning);
    --typography-icon-colors-light-danger: var(--fonts-colors-type-actions-light-danger);
    --accordion-text-accordion-txt-title: var(--fonts-colors-type-dark-primary-body);
    --accordion-text-accordion-txt-list-item: var(--color-system-document-range-page-800);
    --accordion-text-accordion-txt-list-item-content: var(--typography-icon-dark-secondary);
    --accordion-stroke-accordion-border-default: var(--border-border-border-20);
    --accordion-icon-accordion-icon-default: var(--color-system-document-range-page-800);
    --accordion-space-padding-y-accordion-padding-y: var(--padding-padding-y-padding-y-sm-x);
    --accordion-accordion-background-default: var(--color-system-document-range-page-800);
    --accordion-accordion-background-hover: var(--color-system-document-range-page-700);
    --accordion-space-padding-x-accordion-padding-x: var(--padding-padding-x-padding-sm-x);
    --accordion-space-padding-between-accordion-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
    --accordion-radius-accordion-radius: var(--radius-default-radius-sm);
    --accordion-focus-accordion-focus-width: var(--focus-focus-width);
    --accordion-border-width-accordion-border-width-default: var(--border-border-width-rg);
    --accordion-border-width-accordion-border-width-active: var(--border-border-width-rg);
    --tooltip-text-tooltip-default-txt-light: var(--fonts-colors-type-light-primary);
    --button-radius-btn-radius-x-sm: var(--radius-default-radius-sm);
    --button-states-medium-outline-btn-outline-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --button-states-low-outline-btn-outline-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --button-states-danger-outline-btn-outline-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --tags-border-tag-border: var(--color-system-subtle-subtle-400);
    --carousel-border-carousel-border-width: var(--border-border-width-rg);
    --checkbox-text-checkbox-txt-default: var(--typography-text-dark-primary-body);
    --checkbox-text-checkbox-txt-light: var(--typography-text-dark-primary-body);
    --pagination-border-pagination-border-width-default: var(--border-border-width-rg);
    --pagination-border-pagination-border-width-active: var(--border-border-width-rg);
    --pagination-border-pagination-border-default: var(--border-border-border-20);
    --process-indicator-border-border-width-default: var(--border-border-width-rg);
    --process-indicator-border-border-default: var(--border-border-border-20);
    --radio-text-radio-txt: var(--typography-text-dark-primary-body);
    --search-icon-search-icon-default: var(--color-system-document-range-page-800);
    --search-icon-search-icon-invert: var(--typography-icon-light-primary);
    --document-frame-title-frame-title: var(--fonts-colors-type-dark-primary-heading);
    --document-frame-footer-footer-txt: var(--fonts-colors-type-dark-tertiary-body);
    --document-frame-content-example-txt: var(--typography-text-dark-tertiary-body);
    --document-frame-content-example-txt-header: var(--fonts-colors-type-dark-primary-body);
    --document-frame-title-frame-paragraph: var(--fonts-colors-type-dark-secondary-body);
    --document-document-components: #b644b4;
    --document-frame-title-breadcrumb-bg: var(--color-system-document-range-page-900);
    --document-frame-title-title-bg: var(--color-system-document-range-page-800);
    --process-indicator-text-process-txt-content: var(--typography-text-dark-tertiary-body);
    --alert-text-dark-alert-txt-title-default: var(--fonts-colors-type-dark-primary-heading);
    --alert-text-dark-alert-txt-title-invert: var(--fonts-colors-type-light-primary);
    --alert-icon-alert-general-icon-invert: var(--typography-icon-light-primary);
    --generic-states-divider-generic-border: var(--border-border-border-10);
    --card-radius-card-title-txt: var(--fonts-colors-type-dark-primary-body);
    --card-text-card-txt-title: var(--fonts-colors-type-dark-primary-body);
    --card-text-card-txt-list-item: var(--color-system-document-range-page-800);
    --card-text-card-txt-list-item-content: var(--typography-icon-dark-secondary);
    --card-icon-card-icon-default: var(--color-system-document-range-page-800);
    --card-border-card-border-width-default: var(--border-border-width-sm);
    --card-border-card-divider-default: var(--border-border-border-10);
    --card-border-card-border-default: var(--border-border-border-10);
    --card-border-card-divider-width: var(--border-border-width-sm);
    --tree-border-tree-border-active: var(--border-border-border-05);
    --form-icon-default-form-icon-disabled: var(--color-system-document-range-page-125);
    --form-border-form-border-hover: var(--border-border-border-20);
    --form-border-form-border-active: var(--border-colors-dark-secondary);
    --button-radius-sub-btn-radius: var(--radius-default-radius-circle);
    --navigation-schematic-toolbar-tool-states-light-tool-bg-selected-hvr: var(
			--color-system-primary-variables-action-primary-hover
		);
    --search-border-search-border-hover: var(--form-border-form-border-hover);
    --navigation-primary-acitivty-radius-notification-radiuseses: var(
			--radius-default-radius-lg
		);
    --navigation-primary-acitivty-border-notification-divider-default: var(
			--border-border-border-05
		);
    --navigation-primary-acitivty-border-notification-divider-width: var(
			--border-border-width-sm
		);
    --navigation-primary-acitivty-text-notification-txt-title: var(
			--fonts-colors-type-dark-primary-body
		);
    --navigation-primary-acitivty-text-notification-txt-content: var(
			--typography-text-dark-tertiary-body
		);
    --navigation-primary-acitivty-icon-notification-icon-default: var(
			--color-system-document-range-page-800
		);
    --navigation-primary-acitivty-radius-notification-default-txt: var(
			--fonts-colors-type-dark-primary-body
		);
    --navigation-primary-acitivty-radius-notification-title-txt: var(
			--fonts-colors-type-dark-primary-heading
		);
    --navigation-primary-acitivty-states-emphassis-notification-default-bg: var(
			--color-system-subtle-subtle-800
		);
    --navigation-primary-acitivty-radius-notification-sub: var(
			--fonts-colors-type-dark-tertiary-body
		);
    --navigation-primary-acitivty-icon-notification-content-icon: var(
			--typography-icon-dark-secondary
		);
    --navigation-primary-acitivty-states-emphassis-notification-new-bg: var(
			--color-system-secondary-secondary-800
		);
    --navigation-primary-acitivty-icon-notification-new-icon: var(
			--typography-icon-colors-default-info
		);
    --generic-states-divider-pho: var(--document-branded-a);
    --typography-icon-colors-default-primary: var(--fonts-colors-type-actions-default-primary);
    --typography-icon-colors-default-secondary: var(
			--fonts-colors-type-actions-default-secondary
		);
    --typography-icon-colors-default-info: var(--fonts-colors-type-actions-default-info);
    --typography-icon-colors-default-success: var(--fonts-colors-type-actions-default-success);
    --typography-icon-colors-default-warning: var(--fonts-colors-type-actions-default-warning);
    --typography-icon-colors-default-danger: var(--fonts-colors-type-actions-default-danger);
    --typography-text-colors-default-primary: var(--fonts-colors-type-actions-default-primary);
    --typography-text-colors-default-secondary: var(
			--fonts-colors-type-actions-default-secondary
		);
    --typography-text-colors-default-info: var(--fonts-colors-type-actions-default-info);
    --typography-text-colors-default-success: var(--fonts-colors-type-actions-default-success);
    --typography-text-colors-default-warning: var(--fonts-colors-type-actions-default-warning);
    --typography-text-colors-default-danger: var(--fonts-colors-type-actions-default-danger);
    --navigation-primary-acitivty-icon-notification-new-icon-error: var(
			--typography-icon-colors-default-danger
		);
    --navigation-primary-acitivty-states-emphassis-notification-new-bg-error: var(
			--color-system-danger-danger-800
		);
    --table-space-cells-padding-y-table-padding-y: var(--padding-padding-y-padding-y-sm);
    --table-space-cells-padding-x-table-padding-x: var(--padding-padding-x-padding-x);
    --table-space-cells-padding-between-table-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
    --table-border-table-border-width-cell: var(--border-border-width-sm);
    --navigation-schematic-toolbar-toolbar-radius-tool-radius: var(--radius-default-radius);
    --navigation-schematic-toolbar-toolbar-radius-toolbar-radius: var(--radius-default-radius);
    --navigation-schematic-toolbar-toolbar-states-primary-toolbar-bg: var(
			--color-system-document-range-page-900
		);
    --navigation-schematic-toolbar-tool-divider-tool-divider: var(--border-border-border-20);
    --navigation-schematic-toolbar-toolbar-icon-toolbar-icon-primary: var(
			--color-system-document-range-page-800
		);
    --navigation-schematic-toolbar-toolbar-icon-toolbar-icon-invert: var(
			--typography-icon-light-primary
		);
    --navigation-schematic-toolbar-toolbar-border-tree-border-default: var(
			--border-border-border-05
		);
    --navigation-schematic-toolbar-toolbar-border-tree-border-active: var(
			--border-border-border-05
		);
    --navigation-schematic-toolbar-toolbar-border-tree-border-width-default: var(
			--border-border-width-na
		);
    --navigation-schematic-toolbar-toolbar-border-tree-border-width-active: var(
			--border-border-width-na
		);
    --navigation-schematic-toolbar-tool-divider-tool-divider-width: var(
			--border-border-width-x-sm
		);
    --navigation-schematic-toolbar-tool-border-tool-border: var(--border-border-border-05);
    --navigation-schematic-toolbar-tool-border-tool-border-width: var(
			--radius-default-radius-x-na
		);
    --navigation-schematic-toolbar-tool-space-padding-y-tool-padding-y: var(
			--padding-padding-y-padding-y-sm
		);
    --navigation-schematic-toolbar-tool-space-padding-x-tool-padding-x: var(
			--padding-padding-x-padding-sm
		);
    --navigation-schematic-toolbar-tool-space-padding-between-tool-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
    --button-icon-btn-icon-default: var(--color-system-document-range-page-800);
    --navigation-primary-flyout-spacing-padding-x-side-nav-padding-x: var(
			--padding-padding-x-padding-x
		);
    --tooltip-divider-tooltip-divider: var(--border-border-border-05);
    --tooltip-divider-tooltip-divider-width: var(--border-border-width-sm);
    --tooltip-divider-tooltip-divider-invert: var(--border-border-border-flag);
    --tooltip-icon-tooltip-icon-primary: var(--color-system-document-range-page-800);
    --tooltip-icon-tooltip-icon-invert: var(--typography-icon-light-primary);
    --tooltip-states-light-tooltip-action-light-default: var(--color-system-subtle-subtle-000);
    --tooltip-states-light-tooltip-action-light-hover: var(--color-system-subtle-subtle-025);
    --tooltip-states-dark-tooltip-action-dark-default: var(--color-system-subtle-subtle-700);
    --tooltip-states-dark-tooltip-action-dark-hover: var(--color-system-subtle-subtle-800);
    --tooltip-radius-tooltip-action-radius: var(--radius-nested-nested-radius);
    --navigation-schematic-layer-panel-color-primary-layerpanel-bg: var(
			--color-system-document-range-page-900
		);
    --navigation-schematic-layer-panel-text-layerpanel-txt-default: var(
			--typography-text-dark-primary-body
		);
    --navigation-schematic-layer-panel-icon-layerpanel-icon-default: var(
			--color-system-document-range-page-800
		);
    --navigation-schematic-layer-panel-icon-layerpanel-icon-disabled: var(
			--color-system-document-range-page-125
		);
    --navigation-schematic-layer-panel-icon-layerpanel-icon-invert: var(
			--typography-icon-light-primary
		);
    --navigation-schematic-layer-panel-radius-layerpanel-radius: var(--radius-default-radius);
    --navigation-schematic-layer-panel-focus-layerpanel-focus-width: var(--focus-focus-width);
    --navigation-schematic-layer-panel-border-layerpanel-border-width: var(
			--radius-default-radius-sm
		);
    --navigation-schematic-layer-panel-spacing-padding-between-side-nav-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
    --navigation-schematic-layer-panel-spacing-padding-y-side-nav-padding-y: var(
			--padding-padding-y-padding-y
		);
    --navigation-schematic-layer-panel-border-layerpanel-border-default: var(
			--border-border-border-20
		);
    --navigation-schematic-layer-panel-spacing-padding-x-side-nav-padding-x: var(
			--padding-padding-x-padding-x
		);
    --tree-space-padding-y-branch-padding-y-small: var(--padding-padding-y-padding-y-sm);
    --tree-space-padding-between-branch-padding-between-small: var(
			--padding-padding-between-padding-between-sm
		);
    --tree-radius-branch-radius-small: var(--radius-default-radius-sm);
    --navigation-schematic-layer-panel-divider-layerpanel-divider-default: var(
			--border-border-border-20
		);
    --navigation-schematic-layer-panel-divider-layerpanel-border-width: var(
			--radius-default-radius-sm
		);
    --navigation-schematic-toolbar-toolbar-radius-toolbar-rounded: var(
			--radius-default-radius-circle
		);
    --navigation-schematic-toolbar-toolbar-radius-toolbar-radius-na: var(
			--radius-default-radius-x-na
		);
    --navigation-primary-side-navigation-menu-item-default: var(
			--color-system-subtle-subtle-000
		);
    --navigation-primary-side-navigation-menu-item-hover: var(--color-system-subtle-subtle-800);
    --navigation-primary-side-navigation-menu-item-active: var(
			--color-system-subtle-subtle-900
		);
    --navigation-primary-side-navigation-spacing-padding-between-menu-item-between-icon: var(
			--padding-padding-between-padding-between
		);
    --navigation-primary-side-navigation-spacing-padding-y-menu-item-padding-y: var(
			--padding-padding-y-padding-y
		);
    --navigation-primary-side-navigation-radius-menu-item-radius: var(
			--radius-default-radius-sm
		);
    --navigation-primary-side-navigation-border-menu-item-stroke-default: var(
			--border-border-border-20
		);
    --navigation-primary-side-navigation-text-menu-item-txt: var(
			--fonts-colors-type-dark-primary-body
		);
    --navigation-primary-side-navigation-icon-menu-item: var(
			--color-system-document-range-page-800
		);
    --navigation-primary-side-navigation-icon-menu-item-icon-pho: var(--typography-icon-pho);
    --navigation-primary-side-navigation-border-menu-item-border-width-default: var(
			--border-border-width-rg
		);
    --navigation-primary-side-navigation-border-menu-item-border-width-active: var(
			--border-border-width-rg
		);
    --navigation-primary-side-navigation-spacing-padding-x-menu-item-padding-x: var(
			--padding-padding-x-padding-x
		);
    --navigation-primary-side-navigation-spacing-padding-between-menu-item-between-drop: var(
			--padding-padding-between-padding-between-sm
		);
    --button-states-icon-button-low-btn-bg: var(--color-system-subtle-subtle-0000);
    --button-states-icon-button-low-btn-bg-hover: var(--color-system-subtle-subtle-1000);
    --button-states-icon-button-low-btn-bg-active: var(--color-system-subtle-subtle-1050);
    --button-states-icon-button-low-btn-bg-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --button-states-icon-button-low-btn-focus: var(--color-system-subtle-subtle-075);
    --button-states-icon-button-low-outline-btn-outline: var(--color-system-subtle-subtle-100);
    --button-states-icon-button-low-outline-btn-bg: var(--color-system-subtle-subtle-0000);
    --button-states-icon-button-low-outline-btn-outline-hover: var(
			--color-system-subtle-subtle-200
		);
    --button-states-icon-button-low-outline-btn-bg-hover: var(--color-system-subtle-subtle-025);
    --button-states-icon-button-low-outline-btn-outline-active: var(
			--color-system-subtle-subtle-200
		);
    --button-states-icon-button-low-outline-btn-bg-active: var(
			--color-system-subtle-subtle-075
		);
    --button-states-icon-button-low-outline-btn-outline-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
    --button-states-icon-button-low-outline-btn-focus: var(--color-system-subtle-subtle-050);
    --button-states-icon-button-icon-btn-icon-pho: var(--typography-icon-pho);
    --button-states-icon-button-icon-btn-icon-default: var(
			--color-system-document-range-page-800
		);
    --button-states-icon-button-icon-btn-icon-invert: var(--typography-icon-light-primary);
    --navigation-states-background-navigation-bg-light: var(
			--color-system-document-range-page-900
		);
    --navigation-states-background-navigation-flyout-bg: var(
			--navigation-states-background-navigation-bg-light
		);
    --navigation-states-background-navigation-dropdown-bg: var(
			--navigation-states-background-navigation-bg-light
		);
    --navigation-border-navigation-border-default: var(--border-border-border-20);
    --navigation-border-navigation-border-width: var(--radius-default-radius-sm);
    --navigation-states-background-navigation-toolbar-bg: var(
			--navigation-states-background-navigation-bg-dark
		);
    --navigation-radius-navigation-radius: var(--radius-default-radius-lg);
    --navigation-radius-navigation-radius-lg: var(--radius-default-radius-lg);
    --alert-general-default-bg: var(--color-system-subtle-subtle-800);
    --button-icon-btn-icon-pop: var(--typography-icon-colors-default-primary);
    --button-states-icon-button-icon-btn-icon-pop: var(
			--typography-icon-colors-default-primary
		);
    --navigation-states-background-navigation-bg-dark: var(--color-system-subtle-subtle-800);
    --navigation-schematic-toolbar-tool-states-dark-tool-bg: var(
			--color-system-subtle-subtle-900
		);
    --navigation-schematic-toolbar-tool-states-dark-tool-bg-hvr: var(
			--color-system-subtle-subtle-975
		);
    --navigation-schematic-toolbar-tool-states-dark-tool-bg-active: var(
			--color-system-subtle-subtle-975
		);
    --navigation-schematic-toolbar-tool-states-dark-tool-bg-selected: var(
			--color-system-primary-variables-action-primary
		);
    --navigation-schematic-toolbar-tool-states-dark-tool-bg-selected-hvr: var(
			--color-system-primary-variables-action-primary-hover
		);
    --card-icon-card-icon-invert: var(--typography-icon-light-primary);
    --card-icon-card-icon-pop: var(--typography-icon-colors-default-primary);
    --card-icon-card-icon-bg: var(--color-system-document-range-page-800);
    --card-text-card-txt-subtle: var(--typography-icon-dark-secondary);
    --card-icon-card-sub-icon: var(--typography-icon-dark-secondary);
    --card-icon-card-icon-bg-active: var(
			--color-system-primary-variables-focus-primary-focus-active
		);
    --badge-states-background-na-default-badge-na-bg: var(--color-system-subtle-subtle-0000);
    --badge-states-background-na-default-badge-na-txt: var(--typography-text-dark-primary-body);
    --badge-states-background-na-default-badge-na-icon: var(
			--color-system-document-range-page-800
		);
    --badge-states-background-na-subtle-badge-na-bg: var(--color-system-subtle-subtle-800);
    --badge-states-background-na-subtle-badge-na-border: var(--color-system-subtle-subtle-200);
    --badge-states-background-na-subtle-badge-na-txt: var(--typography-text-dark-primary-body);
    --badge-states-background-na-subtle-badge-na-icon: var(
			--color-system-document-range-page-800
		);
    --navigation-primary-side-navigation-text-menu-item-txt-invert: var(
			--fonts-colors-type-light-primary
		);
    --navigation-primary-side-navigation-icon-menu-item-invert: var(
			--color-system-document-range-page-800
		);
    --navigation-schematic-toolbar-tool-states-light-tool-bg-selected-active: var(
			--color-system-primary-variables-action-primary-active
		);
    --tree-icon-tree-icon-inactive: var(--typography-icon-dark-tertiary);
    --typography-icon-dark-tertiary: var(--fonts-colors-type-dark-subtle);
  }
}
@reference {
  @layer theme, base, components, utilities;
  @layer theme;
  @layer base {
    *, ::after, ::before, ::backdrop, ::file-selector-button {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      border: 0 solid;
    }
    html, :host {
      line-height: 1.5;
      -webkit-text-size-adjust: 100%;
      tab-size: 4;
      font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
      font-feature-settings: var(--default-font-feature-settings, normal);
      font-variation-settings: var(--default-font-variation-settings, normal);
      -webkit-tap-highlight-color: transparent;
    }
    hr {
      height: 0;
      color: inherit;
      border-top-width: 1px;
    }
    abbr:where([title]) {
      -webkit-text-decoration: underline dotted;
      text-decoration: underline dotted;
    }
    h1, h2, h3, h4, h5, h6 {
      font-size: inherit;
      font-weight: inherit;
    }
    a {
      color: inherit;
      -webkit-text-decoration: inherit;
      text-decoration: inherit;
    }
    b, strong {
      font-weight: bolder;
    }
    code, kbd, samp, pre {
      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
      font-feature-settings: var(--default-mono-font-feature-settings, normal);
      font-variation-settings: var(--default-mono-font-variation-settings, normal);
      font-size: 1em;
    }
    small {
      font-size: 80%;
    }
    sub, sup {
      font-size: 75%;
      line-height: 0;
      position: relative;
      vertical-align: baseline;
    }
    sub {
      bottom: -0.25em;
    }
    sup {
      top: -0.5em;
    }
    table {
      text-indent: 0;
      border-color: inherit;
      border-collapse: collapse;
    }
    :-moz-focusring {
      outline: auto;
    }
    progress {
      vertical-align: baseline;
    }
    summary {
      display: list-item;
    }
    ol, ul, menu {
      list-style: none;
    }
    img, svg, video, canvas, audio, iframe, embed, object {
      display: block;
      vertical-align: middle;
    }
    img, video {
      max-width: 100%;
      height: auto;
    }
    button, input, select, optgroup, textarea, ::file-selector-button {
      font: inherit;
      font-feature-settings: inherit;
      font-variation-settings: inherit;
      letter-spacing: inherit;
      color: inherit;
      border-radius: 0;
      background-color: transparent;
      opacity: 1;
    }
    :where(select:is([multiple], [size])) optgroup {
      font-weight: bolder;
    }
    :where(select:is([multiple], [size])) optgroup option {
      padding-inline-start: 20px;
    }
    ::file-selector-button {
      margin-inline-end: 4px;
    }
    ::placeholder {
      opacity: 1;
    }
    @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
      ::placeholder {
        color: currentcolor;
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, currentcolor 50%, transparent);
        }
      }
    }
    textarea {
      resize: vertical;
    }
    ::-webkit-search-decoration {
      -webkit-appearance: none;
    }
    ::-webkit-date-and-time-value {
      min-height: 1lh;
      text-align: inherit;
    }
    ::-webkit-datetime-edit {
      display: inline-flex;
    }
    ::-webkit-datetime-edit-fields-wrapper {
      padding: 0;
    }
    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
      padding-block: 0;
    }
    :-moz-ui-invalid {
      box-shadow: none;
    }
    button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
      appearance: button;
    }
    ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
      height: auto;
    }
    [hidden]:where(:not([hidden="until-found"])) {
      display: none !important;
    }
  }
  @layer utilities;
}
@layer components {
  .btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    --tw-border-style: none;
    border-style: none;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    --tw-outline-style: none;
    outline-style: none;
    border-radius: var(--button-radius-btn-radius);
  }
  .btn:focus {
    outline: 2px solid var(--button-focus-btn-focus-width);
    outline-offset: 2px;
  }
  .btn:disabled {
    cursor: not-allowed;
    opacity: 50%;
  }
  .btn-lg {
    height: calc(var(--spacing) * 16);
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .btn-md {
    height: calc(var(--spacing) * 12);
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .btn-sm {
    height: calc(var(--spacing) * 10);
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .btn-xs {
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .btn-text-default {
    justify-content: center;
    text-align: center;
    font-family: 'IBM Plex Sans';
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .btn-upgrade-dashboard {
    background-color: var(--upgrade-button-color-bg);
  }
  .btn-custom-primary {
    display: flex;
    height: calc(var(--spacing) * 10);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-system-purple-purple-600);
    color: var(--button-custom-default-color-text);
  }
  .btn-custom-primary-medium {
    display: flex;
    height: calc(var(--spacing) * 9);
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1);
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--color-system-purple-purple-200);
    color: var(--color-system-purple-purple-600);
  }
  .btn-custom-secondary {
    display: flex;
    height: calc(var(--spacing) * 10);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1);
    overflow: hidden;
    border-radius: var(--radius-lg);
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-offset: 1px;
    background-color: var(--button-custom-secondary-color-bg);
    color: var(--primary-text-color);
    outline-color: var(--button-custom-secondary-color-outline);
  }
  .btn-custom-tertiary {
    display: inline-flex;
    width: 100%;
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    @media (width >= 40rem) {
      grid-column-start: 2;
    }
    display: flex;
    height: calc(var(--spacing) * 10);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1);
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 3);
    background: linear-gradient(91.23deg, #d26135 -18.8%, #9b2934 100%);
    color: var(--button-custom-default-color-text);
  }
  .btn-custom-primary:hover {
    background-color: var(--color-system-purple-purple-500);
  }
  .btn-custom-secondary:hover {
    background-color: var(--button-custom-secondary-color-bg-hover);
  }
  .btn-custom-tertiary:hover {
    background: linear-gradient(91.23deg, #9a4626 -18.8%, #601921 100%);
  }
  .btn-custom-tertiary:focus-visible {
    &:focus-visible {
      outline-style: var(--tw-outline-style);
      outline-width: 2px;
    }
    &:focus-visible {
      outline-offset: 2px;
    }
    outline-color: var(--button-custom-tertiary-color-outline-focus);
  }
  .btn-primary {
    background-color: var(--button-states-high-btn-bg);
    color: var(--button-states-high-btn-txt);
  }
  .btn-primary:hover {
    background-color: var(--button-states-high-btn-bg-hover);
  }
  .btn-primary:focus {
    background-color: var(--button-states-high-btn-focus);
  }
  .btn-primary:disabled {
    background-color: var(--button-states-high-btn-bg-disabled);
    color: var(--button-states-high-btn-txt-disabled);
  }
  .btn-secondary {
    background-color: var(--button-states-medium-btn-bg);
    color: var(--button-states-medium-btn-txt);
  }
  .btn-secondary:hover {
    background-color: var(--button-states-medium-btn-bg-hover);
  }
  .btn-secondary:focus {
    background-color: var(--button-states-medium-btn-focus);
  }
  .btn-secondary:disabled {
    background-color: var(--button-states-medium-btn-bg-disabled);
    color: var(--button-states-medium-btn-txt-disabled);
  }
  .btn-tertiary {
    background-color: var(--button-states-low-btn-bg);
    color: var(--button-states-low-btn-txt);
  }
  .btn-tertiary:hover {
    background-color: var(--button-states-low-btn-bg-hover);
  }
  .btn-tertiary:focus {
    background-color: var(--button-states-low-btn-focus);
  }
  .btn-tertiary:disabled {
    background-color: var(--button-states-low-btn-bg-disabled);
    color: var(--button-states-low-btn-txt-disabled);
  }
  .btn-danger {
    background-color: var(--button-states-danger-btn-bg);
    color: var(--button-states-danger-btn-txt);
  }
  .btn-danger:hover {
    background-color: var(--button-states-danger-btn-bg-hover);
  }
  .btn-danger:focus {
    background-color: var(--button-states-danger-btn-focus);
  }
  .btn-danger:disabled {
    background-color: var(--button-states-danger-btn-bg-disabled);
    color: var(--button-states-danger-btn-txt-disabled);
  }
  .btn-text {
    background: none;
    color: var(--button-states-text-btn-txt);
    text-decoration: underline;
  }
  .btn-text:hover {
    background-color: var(--button-states-text-btn-bg-hover);
  }
  .btn-text:focus {
    background-color: var(--button-states-text-btn-focus);
  }
  .btn-text:disabled {
    background-color: var(--button-states-text-btn-bg-disabled);
    color: var(--button-states-text-btn-txt-disabled);
  }
  .btn-outline-primary {
    background-color: var(--button-states-high-outline-btn-bg);
    color: var(--button-states-high-outline-btn-txt);
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-offset: -1px;
    outline-color: var(--button-states-high-outline-btn-outline);
  }
  .btn-outline-primary:hover {
    background-color: var(--button-states-high-outline-btn-bg-hover);
    outline-color: var(--button-states-high-outline-btn-outline-hover);
  }
  .btn-outline-primary:focus {
    background-color: var(--button-states-high-outline-btn-focus);
  }
  .btn-outline-primary:disabled {
    background-color: var(--button-states-high-outline-btn-bg-disabled);
    color: var(--button-states-high-outline-btn-txt-disabled);
    outline-color: var(--button-states-high-outline-btn-outline-disabled);
  }
  .btn-outline-secondary {
    background-color: var(--button-states-medium-outline-btn-bg);
    color: var(--button-states-medium-outline-btn-txt);
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-offset: -1px;
    outline-color: var(--button-states-medium-outline-btn-outline);
  }
  .btn-outline-secondary:hover {
    background-color: var(--button-states-medium-outline-btn-bg-hover);
    outline-color: var(--button-states-medium-outline-btn-outline-hover);
  }
  .btn-outline-secondary:focus {
    background-color: var(--button-states-medium-outline-btn-focus);
  }
  .btn-outline-secondary:disabled {
    background-color: var(--button-states-medium-outline-btn-bg-disabled);
    color: var(--button-states-medium-outline-btn-txt-disabled);
    outline-color: var(--button-states-medium-outline-btn-outline-disabled);
  }
  .btn-outline-tertiary {
    background-color: var(--button-states-low-outline-btn-bg);
    color: var(--button-states-low-outline-btn-txt);
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-offset: -1px;
    outline-color: var(--button-states-low-outline-btn-outline);
  }
  .btn-outline-tertiary:hover {
    background-color: var(--button-states-low-outline-btn-bg-hover);
    outline-color: var(--button-states-low-outline-btn-outline-hover);
  }
  .btn-outline-tertiary:focus {
    background-color: var(--button-states-low-outline-btn-focus);
  }
  .btn-outline-tertiary:disabled {
    background-color: var(--button-states-low-outline-btn-bg-disabled);
    color: var(--button-states-low-outline-btn-txt-disabled);
    outline-color: var(--button-states-low-outline-btn-outline-disabled);
  }
  .btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    --tw-border-style: none;
    border-style: none;
    background-image: none;
    padding: calc(var(--spacing) * 0);
  }
  .btn-icon-primary {
    background-color: var(--button-states-high-btn-bg);
    color: var(--button-states-icon-button-icon-btn-icon-invert);
  }
  .btn-icon-primary:hover {
    background-color: var(--button-states-high-btn-bg-hover);
  }
  .btn-icon-primary:focus {
    background-color: var(--button-states-high-btn-focus);
  }
  .btn-icon-primary:disabled {
    background-color: var(--button-states-high-btn-bg-disabled);
    color: var(--button-states-high-btn-txt-disabled);
  }
  .btn-icon-secondary {
    background-color: var(--button-states-medium-btn-bg);
    color: var(--button-states-icon-button-icon-btn-icon-invert);
  }
  .btn-icon-secondary:hover {
    background-color: var(--button-states-medium-btn-bg-hover);
  }
  .btn-icon-secondary:focus {
    background-color: var(--button-states-medium-btn-focus);
  }
  .btn-icon-secondary:disabled {
    background-color: var(--button-states-medium-btn-bg-disabled);
    color: var(--button-states-medium-btn-txt-disabled);
  }
  .btn-icon-tertiary {
    background-color: var(--button-states-icon-button-low-btn-bg);
    color: var(--button-states-icon-button-icon-btn-icon-default);
  }
  .btn-icon-tertiary:hover {
    background-color: var(--button-states-icon-button-low-btn-bg-hover);
  }
  .btn-icon-tertiary:focus {
    background-color: var(--button-states-icon-button-low-btn-focus);
  }
  .btn-icon-tertiary:disabled {
    background-color: var(--button-states-icon-button-low-btn-bg-disabled);
    color: var(--button-states-icon-button-icon-btn-icon-disabled);
  }
  .btn-icon-outline-primary {
    background-color: var(--button-states-high-outline-btn-bg);
    color: var(--button-states-icon-button-icon-btn-icon-default);
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-offset: -1px;
    outline-color: var(--button-states-high-outline-btn-outline);
  }
  .btn-icon-outline-primary:hover {
    background-color: var(--button-states-high-outline-btn-bg-hover);
    outline-color: var(--button-states-high-outline-btn-outline-hover);
  }
  .btn-icon-outline-primary:focus {
    background-color: var(--button-states-high-outline-btn-focus);
  }
  .btn-icon-outline-primary:disabled {
    background-color: var(--button-states-high-outline-btn-bg-disabled);
    color: var(--button-states-icon-button-icon-btn-icon-disabled);
    outline-color: var(--button-states-high-outline-btn-outline-disabled);
  }
  .btn-icon-outline-secondary {
    background-color: var(--button-states-medium-outline-btn-bg);
    color: var(--button-states-icon-button-icon-btn-icon-default);
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-offset: -1px;
    outline-color: var(--button-states-medium-outline-btn-outline);
  }
  .btn-icon-outline-secondary:hover {
    background-color: var(--button-states-medium-outline-btn-bg-hover);
    outline-color: var(--button-states-medium-outline-btn-outline-hover);
  }
  .btn-icon-outline-secondary:focus {
    background-color: var(--button-states-medium-outline-btn-focus);
  }
  .btn-icon-outline-secondary:disabled {
    background-color: var(--button-states-medium-outline-btn-bg-disabled);
    color: var(--button-states-icon-button-icon-btn-icon-disabled);
    outline-color: var(--button-states-medium-outline-btn-outline-disabled);
  }
  .btn-icon-outline-tertiary {
    background-color: var(--button-states-icon-button-low-outline-btn-bg);
    color: var(--button-states-icon-button-icon-btn-icon-default);
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-offset: -1px;
    outline-color: var(--button-states-icon-button-low-outline-btn-outline);
  }
  .btn-icon-outline-tertiary:hover {
    background-color: var(--button-states-icon-button-low-outline-btn-bg-hover);
    outline-color: var(--button-states-icon-button-low-outline-btn-outline-hover);
  }
  .btn-icon-outline-tertiary:focus {
    background-color: var(--button-states-icon-button-low-outline-btn-focus);
  }
  .btn-icon-outline-tertiary:disabled {
    background-color: var(--button-states-icon-button-low-outline-btn-bg-disabled);
    color: var(--button-states-icon-button-icon-btn-icon-disabled);
    outline-color: var(--button-states-icon-button-low-outline-btn-outline-disabled);
  }
  .btn-icon.btn-lg {
    padding: calc(var(--spacing) * 3);
  }
  .btn-icon.btn-md {
    padding: calc(var(--spacing) * 3);
  }
  .btn-icon.btn-sm {
    padding: calc(var(--spacing) * 2);
  }
  .btn-icon.btn-xs {
    padding: calc(var(--spacing) * 1);
  }
  .btn-icon.btn-lg svg {
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
  }
  .btn-icon.btn-md svg {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
  }
  .btn-icon.btn-sm svg {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
  }
  .btn-icon.btn-xs svg {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
}
@reference {
  @layer theme, base, components, utilities;
  @layer theme;
  @layer base {
    *, ::after, ::before, ::backdrop, ::file-selector-button {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      border: 0 solid;
    }
    html, :host {
      line-height: 1.5;
      -webkit-text-size-adjust: 100%;
      tab-size: 4;
      font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
      font-feature-settings: var(--default-font-feature-settings, normal);
      font-variation-settings: var(--default-font-variation-settings, normal);
      -webkit-tap-highlight-color: transparent;
    }
    hr {
      height: 0;
      color: inherit;
      border-top-width: 1px;
    }
    abbr:where([title]) {
      -webkit-text-decoration: underline dotted;
      text-decoration: underline dotted;
    }
    h1, h2, h3, h4, h5, h6 {
      font-size: inherit;
      font-weight: inherit;
    }
    a {
      color: inherit;
      -webkit-text-decoration: inherit;
      text-decoration: inherit;
    }
    b, strong {
      font-weight: bolder;
    }
    code, kbd, samp, pre {
      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
      font-feature-settings: var(--default-mono-font-feature-settings, normal);
      font-variation-settings: var(--default-mono-font-variation-settings, normal);
      font-size: 1em;
    }
    small {
      font-size: 80%;
    }
    sub, sup {
      font-size: 75%;
      line-height: 0;
      position: relative;
      vertical-align: baseline;
    }
    sub {
      bottom: -0.25em;
    }
    sup {
      top: -0.5em;
    }
    table {
      text-indent: 0;
      border-color: inherit;
      border-collapse: collapse;
    }
    :-moz-focusring {
      outline: auto;
    }
    progress {
      vertical-align: baseline;
    }
    summary {
      display: list-item;
    }
    ol, ul, menu {
      list-style: none;
    }
    img, svg, video, canvas, audio, iframe, embed, object {
      display: block;
      vertical-align: middle;
    }
    img, video {
      max-width: 100%;
      height: auto;
    }
    button, input, select, optgroup, textarea, ::file-selector-button {
      font: inherit;
      font-feature-settings: inherit;
      font-variation-settings: inherit;
      letter-spacing: inherit;
      color: inherit;
      border-radius: 0;
      background-color: transparent;
      opacity: 1;
    }
    :where(select:is([multiple], [size])) optgroup {
      font-weight: bolder;
    }
    :where(select:is([multiple], [size])) optgroup option {
      padding-inline-start: 20px;
    }
    ::file-selector-button {
      margin-inline-end: 4px;
    }
    ::placeholder {
      opacity: 1;
    }
    @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
      ::placeholder {
        color: currentcolor;
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, currentcolor 50%, transparent);
        }
      }
    }
    textarea {
      resize: vertical;
    }
    ::-webkit-search-decoration {
      -webkit-appearance: none;
    }
    ::-webkit-date-and-time-value {
      min-height: 1lh;
      text-align: inherit;
    }
    ::-webkit-datetime-edit {
      display: inline-flex;
    }
    ::-webkit-datetime-edit-fields-wrapper {
      padding: 0;
    }
    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
      padding-block: 0;
    }
    :-moz-ui-invalid {
      box-shadow: none;
    }
    button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
      appearance: button;
    }
    ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
      height: auto;
    }
    [hidden]:where(:not([hidden="until-found"])) {
      display: none !important;
    }
  }
  @layer utilities;
}
@layer components {
  .radio-button {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    appearance: none;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    &:checked {
      border-color: transparent;
    }
    &:checked {
      background-color: var(--color-blue-500);
    }
  }
  .radio-button:checked {
    border-color: transparent;
    background-color: var(--color-blue-500);
  }
}
.card-color {
  background: var(--card-color);
}
.card-color:hover {
  background: var(--card-color-hover);
}
.card-outline-color {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
  outline-color: var(--card-color-border-color);
}
.card-text-color {
  color: var(--card-color-text-color);
}
.card-text-font-weight {
  font-weight: 500;
}
.card-color-upgrade {
  background: linear-gradient(91.23deg, #d26135 -18.8%, #9b2934 100%);
}
.hover-color:hover {
  background: var(--dropdown-hover-bg-color);
}
.breadcrumbs-text {
  color: var(--breadcrumb-text-breadcrumb-txt-inactive);
}
.breadcrumbs-text-active {
  color: var(--breadcrumb-text-breadcrumb-txt-active);
}
.breadcrumbs-icon {
  color: var(--breadcrumb-icon-breadcrumb-icon-inactive);
}
.breadcrumbs-capitalize {
  text-transform: capitalize;
}
.filter-bg-active {
  display: flex;
  height: calc(var(--spacing) * 10);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  background: var(--task-filter-active-bg);
}
.filter-bg {
  display: flex;
  height: calc(var(--spacing) * 10);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
}
.filter-count-div-active {
  display: inline-flex;
  height: calc(var(--spacing) * 5);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2.5);
  border-radius: var(--radius-sm);
  padding-inline: calc(var(--spacing) * 1.5);
  padding-block: calc(var(--spacing) * 2.5);
  background: var(--task-filter-text-color);
}
.filter-count-div {
  display: inline-flex;
  height: calc(var(--spacing) * 5);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2.5);
  border-radius: var(--radius-sm);
  padding-inline: calc(var(--spacing) * 1.5);
  padding-block: calc(var(--spacing) * 2.5);
  outline-style: var(--tw-outline-style);
  outline-width: 0.50px;
  outline-offset: -0.50px;
}
.filter-text-active {
  justify-content: center;
  text-align: center;
  font-family: 'IBM Plex Sans';
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-leading: var(--leading-snug);
  line-height: var(--leading-snug);
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--task-filter-text-color);
}
.filter-text {
  justify-content: center;
  text-align: center;
  font-family: 'IBM Plex Sans';
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-leading: var(--leading-snug);
  line-height: var(--leading-snug);
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  color: var(---typography-text-dark-primary-body);
}
.filter-count-text {
  justify-content: center;
  text-align: center;
  font-family: 'IBM Plex Sans';
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-leading: 10px;
  line-height: 10px;
  --tw-font-weight: var(--font-weight-light);
  font-weight: var(--font-weight-light);
}
.filter-count-text-active {
  justify-content: center;
  text-align: center;
  font-family: 'IBM Plex Sans';
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-leading: 10px;
  line-height: 10px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}
.modal-bg {
  background-color: var(--dialog-modal-color-bg);
}
.modal-form-header-color {
  background-color: var(--header-primary-color);
  color: var(--sidebar-text-color);
}
.modal-form-bg {
  background: var(--dialog-form-modal-title-color-bg);
}
.component-table-header-bg {
  background: var(--table-header-bg);
  color: var(--typography-text-dark-primary-body);
}
.component-table-border {
  border-color: var(--table-border);
}
.component-table-text {
  color: var(--typography-text-dark-primary-body);
}
.toast-conatiner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  z-index: 1000;
  pointer-events: none;
  max-height: 60vh;
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.toast-conatiner::-webkit-scrollbar {
  width: 4px;
}
.toast-conatiner::-webkit-scrollbar-track {
  background: transparent;
}
.toast-conatiner::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}
.toast-conatiner::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}
.toast-queue-indicator {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}
.toast-queue-indicator.visible {
  opacity: 1;
  transform: translateY(0);
}
.toast {
  min-width: 320px;
  max-width: 420px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15),	0 4px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  transform: translateX(120%) scale(0.8);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(0, 0, 0, 0.08);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.toast.toast-visible {
  transform: translateX(0) scale(1);
  opacity: 1;
}
.toast.toast-exiting {
  transform: translateX(120%) scale(0.8);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast-body {
  flex: 1;
  min-width: 0;
}
.toast-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 4px;
  color: #1f2937;
  transform: translateY(5px);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.toast.toast-visible .toast-title {
  transform: translateY(0);
  opacity: 1;
}
.toast-message {
  font-size: 14px;
  line-height: 1.5;
  color: #6b7280;
  transform: translateY(5px);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}
.toast.toast-visible .toast-message {
  transform: translateY(0);
  opacity: 1;
}
.toast-close {
  background: none;
  border: none;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
  color: #9ca3af;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.7);
  opacity: 0;
}
.toast.toast-visible .toast-close {
  transform: scale(1);
  opacity: 1;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s;
}
.toast.toast-visible .toast-close:hover {
  background-color: rgba(0, 0, 0, 0.08);
  color: #6b7280;
  transform: scale(1.1);
}
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(0, 0, 0, 0.1);
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: width 0.1s linear,	transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;
}
.toast.toast-visible .toast-progress {
  transform: scaleX(1);
}
.toast-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  transform: scale(0.6) rotate(-10deg);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s;
}
.toast.toast-visible .toast-icon {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}
.toast.toast-success .toast-icon {
  background-color: #dcfce7;
  color: #16a34a;
}
.toast.toast-success .toast-progress {
  background: linear-gradient(90deg, #16a34a, #22c55e);
}
.toast.toast-error .toast-icon {
  background-color: #fef2f2;
  color: #dc2626;
}
.toast.toast-error .toast-progress {
  background: linear-gradient(90deg, #dc2626, #ef4444);
}
.toast.toast-warning .toast-icon {
  background-color: #fffbeb;
  color: #d97706;
}
.toast.toast-warning .toast-progress {
  background: linear-gradient(90deg, #d97706, #f59e0b);
}
.toast.toast-collaboration .toast-icon {
  background-color: #e0e7ff;
  color: #6366f1;
}
.toast.toast-collaboration .toast-progress {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
}
.toast.toast-paused .toast-progress {
  animation-play-state: paused;
}
.toast:hover {
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2),	0 10px 25px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px) scale(1.01);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast.toast-visible:hover {
  transform: translateX(0) translateY(-2px) scale(1.01);
}
.toast-content {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  gap: 12px;
  position: relative;
  z-index: 2;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.toast.toast-visible .toast-content {
  transform: translateY(0);
  opacity: 1;
}
@media (width <= 640px) {
  .toast-conatiner {
    bottom: 16px;
    right: 16px;
    left: 16px;
    max-height: 50vh;
  }
  .toast {
    min-width: auto;
    max-width: none;
  }
  .toast-queue-indicator {
    bottom: 16px;
    right: 16px;
    left: 16px;
    text-align: center;
  }
}
@layer components {
  .collaboration-container {
    display: flex;
    align-items: center;
    margin-right: 1rem;
  }
  .collaboration-status {
    display: flex;
    align-items: center;
  }
  #collab-status-indicator {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    margin-right: 0.5rem;
    background-color: #9ca3af;
    transition: background-color 0.3s ease;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  #collab-status-text {
    font-size: 0.875rem;
    color: #d1d5db;
  }
  .collaboration-users {
    margin-left: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  .user-indicator {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
    transition: transform 0.2s ease;
  }
  .user-indicator:hover {
    transform: scale(1.1);
  }
  .user-count {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: white;
  }
  .collab-sync-button {
    margin-left: 0.75rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    background-color: #2563eb;
    color: white;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  .collab-sync-button:hover {
    background-color: #1d4ed8;
  }
  .collaboration-notifications-container {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-right: 1rem;
    pointer-events: none;
    height: 100%;
  }
  .collaboration-notification {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(192, 9, 9, 0.3);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    overflow: hidden;
    position: relative;
    max-width: 220px;
    min-width: 180px;
  }
  .collaboration-notification-visible {
    opacity: 1;
    transform: translateX(0);
  }
  .collaboration-notification-exiting {
    opacity: 0;
    transform: translateX(100%);
  }
  .collaboration-notification-content {
    display: flex;
    align-items: flex-start;
    padding: 0.375rem 0.5rem;
    gap: 0.375rem;
  }
  .collaboration-notification-left {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    padding-top: 0.125rem;
  }
  .collaboration-notification-avatar {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
  .collaboration-notification-icon {
    width: 0.875rem;
    height: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .collaboration-notification-body {
    flex: 1;
    min-width: 0;
  }
  .collaboration-notification-message {
    font-size: 0.6875rem;
    font-weight: 500;
    color: #f9fafb;
    line-height: 1.2;
    margin-bottom: 0.0625rem;
    word-wrap: break-word;
    hyphens: auto;
  }
  .collaboration-notification-time {
    font-size: 0.5625rem;
    color: #9ca3af;
  }
  .collaboration-notification-close {
    background: none;
    border: none;
    color: #d1d5db;
    cursor: pointer;
    padding: 0.0625rem;
    border-radius: 0.25rem;
    transition: color 0.2s ease;
    width: 0.875rem;
    height: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .collaboration-notification-close:hover {
    color: #f9fafb;
  }
  .collaboration-notification-close svg {
    width: 0.625rem;
    height: 0.625rem;
  }
  .collaboration-notification-progress {
    display: none;
  }
  .notification-stack-1 {
    transform: translateX(0) scale(1);
    z-index: 3;
  }
  .notification-stack-2 {
    transform: translateX(-0.25rem) scale(0.95);
    z-index: 2;
    opacity: 0.8;
  }
  .notification-stack-3 {
    transform: translateX(-0.5rem) scale(0.9);
    z-index: 1;
    opacity: 0.6;
  }
  @keyframes pulse {
    0%,	100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
}
:root {
  --canvas-background-color: #f1f5f8;
  --background-color: #ececec;
  --font-family: "Roboto", sans-serif;
  --color-gradient-1: #657fff63;
  --color-gradient-2: #9e6d9b6b;
  --tool-bar-background-color: #ffffff;
  --tool-bar-border-color: #ccc8c8;
  --canvas-grid-lines-color: #eceaea;
  --cross-hair-color: #007acc;
  --box-shadow-color: rgba(0, 0, 0, 0.2);
  --box-shadow1-color: rgba(0, 0, 0, 0.19);
  --loader-border-color: #3498db;
  --loader-border-top-color: rgb(151, 149, 149);
  --title-bg-color: #1f2937;
  --title-color: white;
  --scrollbar-level-color: #aaaaaa;
  --scrollbar-bg-color: whitesmoke;
  --canvas-major-grid-lines-color: #666666;
  --canvas-minor-grid-lines-color: #aaaaaa;
  --footer-height: 44px;
  --header-height: 40px;
  --icon-height: 15px;
  --icon-width: 15px;
  --icon-hover: linear-gradient(to right, var(--color-gradient-1), var(--color-gradient-2));
  --icon-highlight: #9d9dc3;
  --float-container-bg: white;
  --dialog-bg: linear-gradient(to right, rgb(145, 188, 252), rgb(209, 141, 248));
  --right-panel-width: 1.5rem;
}
body {
  background-color: var(--background-color);
  font-family: var(--font-family);
  margin: 0;
  color: #707070;
}
html, body {
  overflow: hidden;
}
.icon-size {
  width: var(--icon-width);
  height: var(--icon-height);
}
.avatar-icon-size {
  width: 30px;
  height: 30px;
  border-radius: 50pc;
  border-color: grey;
}
.point-group:hover .center-dot {
  fill: red;
}
.point-group:active .center-dot {
  fill: green;
}
.icon-high-light {
  background-color: var(--icon-highlight) !important;
}
.icon-text {
  font-size: xx-small;
}
.std-button {
  background: linear-gradient(67deg, rgba(136, 154, 242, 1), rgba(255, 228, 253, 1));
  border: none;
  box-shadow: 0 0 0 1px rgba(136, 154, 242, 0.5);
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.5s ease;
  color: black;
  position: relative;
  overflow: hidden;
}
.std-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(136, 154, 242, 0.3);
}
.std-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 5px rgba(136, 154, 242, 0.2);
}
.std-button:focus {
  outline: none;
  border: 2px solid rgba(136, 154, 242, 0.5);
}
.std-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.std-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: all 0.6s ease;
}
.std-button:hover::before {
  left: 100%;
}
.dialog {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  z-index: 1000;
  position: fixed;
}
.dialog-header {
  padding: 5px 10px;
  border-bottom: 1px solid #333333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--title-bg-color);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.dialog-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--title-color);
}
.dialog-content {
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
}
textarea {
  resize: none;
  border: 1px solid #9f9f9f;
  border-radius: 4px;
  padding: 4px;
}
textarea:focus {
  border-color: #000000;
  outline: none;
}
.std-text-box {
  width: 100%;
  border: 1px solid #9f9f9f;
  border-radius: 4px;
  padding: 4px;
}
.std-text-box:active {
  border: 1px solid #1100fd;
}
.std-text-box:focus {
  border-color: #000000;
  outline: none;
}
.std-text-box::placeholder {
  color: #888888;
  font-style: italic;
}
.std-toggle {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.std-toggle-checkbox {
  display: none;
}
.std-toggle-container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: fit-content;
  border: 1px solid #1f1f1fb7;
  border-radius: 20px;
  background: #1f1f1fb7;
  color: #1f1f1fb7;
  cursor: pointer;
}
.std-toggle-container::before {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0%;
  border-radius: 20px;
  background: var(--dialog-bg);
  transition: all 0.3s;
}
.std-toggle-container div {
  padding: 2px;
  text-align: center;
  z-index: 1;
}
.std-toggle-checkbox + .std-toggle-container div:first-child {
  color: #292929b7;
  transition: color 0.3s;
}
.std-toggle-checkbox + .std-toggle-container div:last-child {
  color: white;
  transition: color 0.3s;
}
.std-toggle-checkbox:checked + .std-toggle-container div:first-child {
  color: white;
  transition: color 0.3s;
}
.std-toggle-checkbox:checked + .std-toggle-container div:last-child {
  color: #292929b7;
  transition: color 0.3s;
}
.std-toggle-checkbox:checked + .std-toggle-container::before {
  left: 50%;
}
.admin-layout-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.admin-content-wrapper {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.admin-header {
  height: 4rem;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  gap: 0.5rem;
  transition: all 0.3s;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgb(63, 63, 70);
  background: linear-gradient(90deg, #18181b 60%, #7c1d1d 100%);
}
@media (width >= 640px) {
  .admin-header {
    padding: 0 1.5rem;
    gap: 1rem;
  }
}
.admin-header-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  opacity: 0.8;
  z-index: 0;
}
.admin-header-bg img {
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 0;
  padding-left: 0;
  z-index: 1;
}
.admin-header-content {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}
.admin-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.admin-logo-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.admin-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
@media (width >= 640px) {
  .admin-header-right {
    gap: 1rem;
  }
}
.admin-avatar-container {
  display: flex;
  align-items: center;
  position: relative;
}
.admin-avatar-button {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background-color: rgb(209, 213, 219);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid;
  overflow: hidden;
}
.admin-avatar-button:hover {
  background-color: rgb(229, 231, 235);
}
.admin-avatar-button:focus {
  outline: none;
}
@media (width >= 640px) {
  .admin-avatar-button {
    width: 2rem;
    height: 2rem;
  }
}
.admin-avatar-image {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  object-fit: cover;
}
.admin-avatar-placeholder {
  width: 0.875rem;
  height: 0.875rem;
  color: rgb(75, 85, 99);
  transition: color 0.2s;
}
@media (width >= 640px) {
  .admin-avatar-placeholder {
    width: 1rem;
    height: 1rem;
  }
}
.admin-avatar-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 50;
  margin-top: 0.5rem;
  width: 18.75rem;
  transform-origin: top right;
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),	0 0 0 1px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease-in-out;
  padding: 0.5rem;
  background-color: white;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.75rem;
  overflow: hidden;
  border: 4px solid rgb(156, 163, 175);
}
.admin-avatar-dropdown:not(.hidden) {
  display: flex;
}
.admin-avatar-dropdown-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.5rem;
}
.admin-avatar-dropdown-section-root {
  padding-bottom: 0.5rem;
  border-left: 4px solid rgb(245, 158, 11);
  padding-left: 0.5rem;
  background-color: rgba(254, 243, 199, 0.2);
  border-radius: 0.25rem 0 0 0.25rem;
}
.admin-avatar-dropdown-section-admin {
  padding-bottom: 0.5rem;
  border-left: 4px solid rgb(59, 130, 246);
  padding-left: 0.5rem;
  background-color: rgba(219, 234, 254, 0.2);
  border-radius: 0.25rem 0 0 0.25rem;
}
.admin-avatar-dropdown-section-user {
  padding-bottom: 0.5rem;
  border-left: 4px solid rgb(156, 163, 175);
  padding-left: 0.5rem;
  background-color: rgba(249, 250, 251, 0.2);
  border-radius: 0.25rem 0 0 0.25rem;
}
.admin-avatar-dropdown-label {
  justify-content: center;
  color: black;
  font-size: 0.75rem;
  font-weight: 300;
  font-family: "IBM_Plex_Sans", sans-serif;
  line-height: normal;
}
.admin-account-card {
  width: 17.25rem;
  padding: 0.875rem;
  border-radius: 0.5rem;
  outline: 3px solid;
  outline-offset: -3px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.75rem;
  overflow: hidden;
}
.admin-account-card-root {
  background-color: rgb(255, 251, 235);
  outline-color: rgb(245, 158, 11);
}
.admin-account-card-admin {
  background-color: rgb(239, 246, 255);
  outline-color: rgb(59, 130, 246);
}
.admin-account-card-user {
  background-color: rgb(249, 250, 251);
  outline-color: rgb(156, 163, 175);
}
.admin-account-avatar-wrapper {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 240px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
}
.admin-account-avatar {
  width: 2.75rem;
  height: 2.75rem;
  position: relative;
  border-radius: 240px;
  overflow: hidden;
}
.admin-account-info {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.125rem;
}
.admin-account-name {
  width: 12.5rem;
  text-align: justify;
  justify-content: center;
  color: black;
  font-size: 1rem;
  font-weight: 600;
  font-family: "IBM_Plex_Sans", sans-serif;
  line-height: normal;
}
.admin-account-email {
  width: 12.5rem;
  text-align: justify;
  justify-content: center;
  color: black;
  font-size: 0.875rem;
  font-weight: 300;
  font-family: "IBM_Plex_Sans", sans-serif;
  line-height: normal;
}
.admin-menu-section {
  width: 17.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.admin-menu-section-header {
  padding: 0 0.5rem;
  opacity: 0.6;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.625rem;
}
.admin-menu-section-label {
  width: 4rem;
  height: 1.5rem;
  position: relative;
}
.admin-menu-section-label-text {
  left: 0;
  top: 0.4375rem;
  position: absolute;
  justify-content: center;
  color: black;
  font-size: 0.75rem;
  font-weight: 300;
  font-family: "IBM_Plex_Sans", sans-serif;
  line-height: normal;
}
.admin-menu-items {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.25rem;
}
.admin-menu-item {
  cursor: pointer;
  align-self: stretch;
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.625rem;
  overflow: hidden;
  width: 17rem;
}
.admin-menu-item:hover {
  background-color: rgb(229, 231, 235);
}
.admin-menu-item-text {
  justify-content: center;
  color: black;
  font-size: 1rem;
  font-weight: 400;
  font-family: "IBM_Plex_Sans", sans-serif;
  line-height: normal;
}
.admin-sidebar {
  width: 16rem;
  z-index: 40;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  background-color: rgb(24, 24, 27);
  border-right: 1px solid rgb(39, 39, 42);
}
.admin-sidebar-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 0.75rem;
  flex: 1;
}
.admin-nav-links {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.75rem;
}
.admin-nav-item {
  width: 100%;
  padding: 0.75rem;
  border-radius: 0.75rem;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.625rem;
  overflow: hidden;
  opacity: 0.5;
  cursor: pointer;
  transition: all 0.2s;
}
.admin-nav-item:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.05);
}
.admin-nav-item.active {
  background-color: rgb(39, 39, 42);
  outline: 1px solid;
  outline-offset: -1px;
  outline-color: rgba(255, 255, 255, 0.05);
  opacity: 1;
}
.admin-nav-text {
  text-align: justify;
  justify-content: center;
  color: white;
  font-size: 1rem;
  font-weight: 400;
  font-family: "IBM_Plex_Sans", sans-serif;
  line-height: normal;
}
.admin-nav-text.active {
  font-weight: 600;
}
.admin-nav-external-indicator {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  font-weight: 400;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.admin-nav-item:hover .admin-nav-external-indicator {
  opacity: 1;
  color: rgba(255, 255, 255, 0.9);
}
.admin-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: calc(100vw - 250px);
}
.admin-content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease-in-out;
  overflow-y: auto;
  background-color: rgb(24, 24, 27);
}
.admin-content-container {
  flex: 1;
  padding: 1.5rem;
}
.admin-users-header {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-users-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: white;
  margin-bottom: 0.5rem;
}
.admin-users-subtitle {
  color: rgb(156, 163, 175);
  font-size: 0.875rem;
}
.admin-refresh-button {
  padding: 0.5rem 1rem;
  background-color: rgb(39, 39, 42);
  color: white;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.admin-refresh-button:hover {
  background-color: rgb(63, 63, 70);
}
.admin-refresh-button svg {
  width: 1rem;
  height: 1rem;
}
.admin-refresh-button.loading {
  opacity: 0.6;
  cursor: not-allowed;
}
.admin-users-table-container {
  background-color: rgb(24, 24, 27);
  border-radius: 0.5rem;
  border: 1px solid rgb(39, 39, 42);
  overflow: hidden;
}
.admin-users-table-wrapper {
  overflow-x: auto;
}
.admin-users-table {
  width: 100%;
}
.admin-users-table thead {
  background-color: rgb(39, 39, 42);
  border-bottom: 1px solid rgb(63, 63, 70);
}
.admin-users-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(156, 163, 175);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color 0.2s;
}
.admin-users-table th:hover {
  background-color: rgb(63, 63, 70);
}
.admin-users-table th.sort-asc::after {
  content: " ▲";
  font-size: 0.625rem;
}
.admin-users-table th.sort-desc::after {
  content: " ▼";
  font-size: 0.625rem;
}
.admin-users-table tbody {
  border-top: 1px solid rgb(39, 39, 42);
}
.admin-users-table tbody tr {
  border-bottom: 1px solid rgb(39, 39, 42);
  transition: background-color 0.2s;
}
.admin-users-table tbody tr:hover {
  background-color: rgba(39, 39, 42, 0.5);
}
.admin-users-table td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: white;
}
.admin-users-table .col-user-created {
  color: rgb(156, 163, 175);
}
.admin-user-cell {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: white;
}
.admin-user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.admin-user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  object-fit: cover;
}
.admin-user-avatar-placeholder {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: rgb(63, 63, 70);
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-user-avatar-placeholder span {
  font-size: 0.75rem;
  color: rgb(156, 163, 175);
}
.admin-user-name {
  font-weight: 500;
}
.admin-user-email {
  font-size: 0.75rem;
  color: rgb(156, 163, 175);
}
.admin-role-select {
  background-color: rgb(39, 39, 42);
  border: 1px solid rgb(63, 63, 70);
  color: white;
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}
.admin-role-select:focus {
  outline: none;
  border-color: rgb(59, 130, 246);
}
.admin-role-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.admin-status-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}
.admin-status-badge-active {
  background-color: rgba(34, 197, 94, 0.2);
  color: rgb(74, 222, 128);
}
.admin-status-badge-inactive {
  background-color: rgba(107, 114, 128, 0.2);
  color: rgb(156, 163, 175);
}
.admin-update-button {
  padding: 0.375rem 0.75rem;
  background-color: rgb(63, 63, 70);
  color: white;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  transition: background-color 0.2s;
}
.admin-update-button:hover {
  background-color: rgb(82, 82, 91);
}
.admin-update-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: rgb(39, 39, 42);
}
.admin-avatar-border-root {
  border-color: rgb(245, 158, 11);
}
.admin-avatar-border-root:hover {
  border-color: rgb(251, 191, 36);
}
.admin-avatar-border-root:focus {
  border-color: rgb(251, 191, 36);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
}
.admin-avatar-border-admin {
  border-color: rgb(59, 130, 246);
}
.admin-avatar-border-admin:hover {
  border-color: rgb(96, 165, 250);
}
.admin-avatar-border-admin:focus {
  border-color: rgb(96, 165, 250);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
.admin-avatar-border-user {
  border-color: rgb(156, 163, 175);
}
.admin-avatar-border-user:hover {
  border-color: rgb(209, 213, 219);
}
.admin-avatar-border-user:focus {
  border-color: rgb(209, 213, 219);
  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.3);
}
.admin-hidden {
  display: none;
}
.admin-loading {
  opacity: 0.6;
  cursor: not-allowed;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-tracking: initial;
    }
  }
}

/*!***********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/geometricEngine/connector/connector.css ***!
  \***********************************************************************************************/
.connector-strike-out-line {
	text-decoration: line-through dotted red;
}

.connector-disabled {
	opacity: 0.6;
	pointer-events: none;
}

/*!**************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/geometricEngine/utils/base.css ***!
  \**************************************************************************************/
.node {
	opacity: 0;
	transition: opacity 0.3s;
}

.node.active {
	opacity: 1;
}

g.active-stroke * {
	stroke: red;
}

/*!**************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/component/component.css ***!
  \**************************************************************************************/
.loading-indicator {
	text-align: center;
	padding: 12px;
	font-size: 13px;
	color: #554a4a;
}

.loading-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(0, 0, 0, 0.1);
	border-top-color: #2c2c34;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	margin-right: 6px;
	vertical-align: middle;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.expand-content-space {
	display: grid;
	grid-auto-rows: 85% 15%;
}

.no-symbol {
	font-size: 14px;
	text-align: center;
	color: black;
	font-style: italic;
}

.content-section.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	border: 1px solid ebebeb;
	display: grid;
	grid-auto-rows: 85% 15%;
}

.expand-symbol-height {
	height: 130px !important;
}

.connector-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	position: relative;
	height: 95px;
	cursor: grab;
	width: 100%;
	touch-action: none;
}

.connector-icon img {
	max-width: 90%;
	padding: 4px;
	height: 100%;
	position: absolute;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

.img-switch img {
	cursor: pointer;
}

.connector-icon img:first-child {
	opacity: 1;
}

.connector-icon img.active {
	opacity: 1;
}

.connector-icon img:not(.active) {
	opacity: 0;
}

.img-switch {
	display: flex;
	justify-content: center;
	width: 100%;
	align-items: center;
}

/*!*********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/componentLib/component_lib.css ***!
  \*********************************************************************************************/
.custom-wrapper {
	position: relative;
	width: 100%;
}

.custom-wrapper select {
	appearance: none;
	padding: 8px 32px 8px 12px;
	font-size: 14px;
	width: 100%;
	background-color: white;
	cursor: pointer;
	border: 1px solid #8091e742;
	border-radius: 4px;
}

.custom-wrapper::after {
	content: "⋮";
	color: #8091e7;
	font-size: 18px;
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	transition: transform 0.3s ease;
}

.custom-wrapper:hover::after {
	content: "↓";
	animation: custom-slided-down 0.5s infinite;
}

@keyframes custom-slided-down {
	0%,
	100% {
		transform: translateY(-50%);
	}

	50% {
		transform: translateY(-40%);
	}
}

.custom-wrapper select:hover {
	border-color: #8091e7;
	box-shadow: 0 2px 4px rgba(128, 145, 231, 0.2);
}

.custom-wrapper select:focus {
	outline: none;
	border-color: #d174cb;
	box-shadow: 0 0 0 2px rgba(209, 116, 203, 0.1);
}

.custom-wrapper select:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.custom-wrapper:disabled::after {
	opacity: 0.6;
}

.complib-title {
	font-weight: 600;
	margin-right: 4px;
}

/*!*******************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/confirmationModal/confirmation_modal.css ***!
  \*******************************************************************************************************/
.confirmation-dialog-container {
	display: none;
	position: absolute;
	background: rgba(0, 0, 0, 0.5);
	z-index: 5;
	width: 100%;
	height: 100%;
}

.confirmation-dialog {
	width: 30rem;
	padding: 0;
	display: block;
	box-shadow: 1px 1px 1px 1px grey;
	background: linear-gradient(to right, #8a8b9163, #b1a9b16b, rgb(245, 245, 245));
	background-color: #ffffff;
	max-width: 40rem;
}

.confirmation-content {
	padding: 15px;
}

.confirmation-dialog-title {
	color: black;
	font-size: 15px;
}

.delete-close-btn {
	position: absolute;
	right: 0;
	cursor: pointer;
}

.confirmation-modal-actions {
	float: right;
	margin-top: 12px;
	width: 100%;
	display: flex;
	justify-content: end;
}

.btn1 {
	padding: 6px 8px;
	margin: 5px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-weight: 800;
	width: fit-content;
	font-size: 12px;
}

.btn1-danger {
	background-color: #e74c3c;
	color: #ffffff;
}

.btn1-secondary {
	background-color: #95a5a6;
	color: #ffffff;
}

.btn1-primary1 {
	background-color: #2952a9;
	color: #ffffff;
}

.btn1:hover {
	opacity: 0.9;
}

/*!*****************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/dialog/progress_dialog.css ***!
  \*****************************************************************************************/
.progress-section {
	display: flex;
	position: absolute;
	padding: 1px;
	color: rgb(2, 2, 2);
	background: linear-gradient(67deg, rgba(136, 154, 242, 1), rgba(255, 228, 253, 1), #e0e0e0);
	font-size: small;
	width: 16rem;
	height: fit-content;
	left: 50%;
	bottom: 10px;
	transform: translate(-50%, -50%);
	box-shadow:
		4px 4px 4px 0 var(--box-shadow-color),
		0 6px 20px 0 var(--box-shadow1-color);
	border: 5px;
	border-radius: 50pc;
	animation: border-animation 3s linear infinite;
}

.spinner {
	width: 30px;
	height: 30px;
}

@keyframes border-animation {
	0% {
		border-color: #343fdba4;
	}

	25% {
		border-color: #a22dc5;
	}

	50% {
		border-color: #5ed12879;
	}

	75% {
		border-color: #145ac28f;
	}

	100% {
		border-color: #b434db77;
	}
}

.progress-msg {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 10px;
}

.progress-dialog {
	position: fixed;
	left: 50%;
	bottom: 60px;
	width: 16rem;
	height: fit-content;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.progress-container {
	padding: 5px;
	width: 100%;
	transform: translate(-50%, -50%);
	box-shadow:
		4px 4px 4px 0 var(--box-shadow-color),
		0 6px 20px 0 var(--box-shadow1-color);
	border: 5px;
	border-radius: 5px;
	animation: border-animation 3s linear infinite;
	color: var(--title-color);
	background: var(--title-bg-color);
}

.progress-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.progress-bar {
	width: 100%;
	height: 20px;
	background: black;
	border-radius: 10px;
	overflow: hidden;
	box-shadow:
		4px 4px 4px 0 var(--box-shadow-color),
		0 6px 20px 0 var(--box-shadow1-color);
	position: relative;
}

.progress-fill {
	width: 0%;
	height: 100%;
	background: linear-gradient(67deg, #889af2, #ffe4fd, #e0e0e0, #889af2);
	background-size: 300% 100%;
	animation: shimmer 2s linear infinite;
	transition: width 0.3s ease;
	position: relative;
	overflow: hidden;
}

.progress-fill::after {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	animation: shine 1.5s ease-in-out infinite;
}

.progress-fill::before {
	content: "";
	position: absolute;
	inset: 0; /* Shorthand for top: 0, right: 0, bottom: 0, left: 0 */
	background: linear-gradient(
		45deg,
		transparent 25%,
		rgba(255, 255, 255, 0.1) 50%,
		transparent 75%
	);
	background-size: 10px 10px;
	animation: glitter 1s linear infinite;
}

.progress-text {
	text-align: center;
}

@keyframes shimmer {
	0% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@keyframes shine {
	0% {
		left: -100%;
	}

	100% {
		left: 200%;
	}
}

@keyframes glitter {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 10px 0;
	}
}

/* Optional: Add a pulsing glow effect */
@keyframes glow {
	0%,
	100% {
		box-shadow:
			0 0 5px rgba(136, 154, 242, 0.6),
			0 0 10px rgba(136, 154, 242, 0.4);
	}

	50% {
		box-shadow:
			0 0 10px rgba(136, 154, 242, 0.8),
			0 0 20px rgba(136, 154, 242, 0.6);
	}
}

.dialog-message-dialog {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.dialog-message-container {
	position: relative;
	width: 90%;
	max-width: 400px;
	background: var(--dialog-bg);
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	animation: dialog-appear 0.3s ease-out;
}

.dialog-message-content {
	padding: 10px;
	border-radius: 8px;
	background: black;
}

.dialog-message-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.dialog-message-icon {
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dialog-message-title {
	margin: 0;
	color: var(--title-color);
	font-size: 1.2rem;
	font-weight: 600;
}

.dialog-message-body {
	margin-bottom: 20px;
	font-size: small;
}

.dialog-message-body p {
	margin: 0;
	color: var(--title-color);
	line-height: 1.5;
}

.dialog-message-footer {
	display: flex;
	justify-content: flex-end;
}

.dialog-message-button {
	padding: 8px 16px;
	border: none;
	border-radius: 4px;
	background: linear-gradient(67deg, rgba(136, 154, 242, 1), rgba(255, 228, 253, 1));
	color: var(--title-color);
	cursor: pointer;
	font-weight: 500;
	transition: all 0.2s ease;
}

.dialog-message-button:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

/* Message type specific styles */
.dialog-message-content.dialog-info {
	border: 2px solid #889af2;
}

.dialog-message-content.dialog-error {
	border: 2px solid #ff4d4d;
}

.dialog-message-content.dialog-warning {
	border: 2px solid #ffd700;
}

/* Animation */
@keyframes dialog-appear {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.reference-message-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	color: black;
	margin-top: 4px;
}

.reference-message-content {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 52px;
	background-color: #d1d6d9;
	border-radius: 2px;
	padding: 0 8px;
	width: 48%;
}

.reference-message-label {
	padding: 2px;
	text-transform: capitalize;
	width: 51%;
}

/*!***********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/dialog/progress_value_dialog.css ***!
  \***********************************************************************************************/
/* Progress Value Dialog Styles - Simplified */

.progress-value-dialog {
	position: fixed;
	bottom: 140px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.progress-value-container {
	position: relative;
	border-radius: 20px;
	padding: 2px;
	background-color: #16191e;
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow:
		0 4px 20px rgba(0, 0, 0, 0.4),
		0 0 40px rgba(102, 126, 234, 0.2);
	overflow: hidden;
}

.progress-value-container::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(
		90deg,
		#667eea 0%,
		#764ba2 20%,
		#f093fb 40%,
		#4facfe 60%,
		#667eea 80%,
		#764ba2 100%
	);
	background-size: 300% 100%;
	border-radius: 2px;
	animation: busy-progress 1.5s linear infinite;
	z-index: 10;
	box-shadow: 0 0 8px rgba(102, 126, 234, 0.6);
}

@keyframes busy-progress {
	0% {
		background-position: 0% 50%;
		box-shadow: 0 0 8px rgba(102, 126, 234, 0.6);
	}

	25% {
		box-shadow: 0 0 12px rgba(118, 75, 162, 0.8);
	}

	50% {
		box-shadow: 0 0 15px rgba(240, 147, 251, 0.9);
	}

	75% {
		box-shadow: 0 0 12px rgba(79, 172, 254, 0.8);
	}

	100% {
		background-position: 300% 50%;
		box-shadow: 0 0 8px rgba(102, 126, 234, 0.6);
	}
}

.progress-value-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background-color: transparent;
	border-radius: 18px;
	padding: 12px 16px;
	backdrop-filter: blur(15px);
	position: relative;
	overflow: hidden;
	min-width: 300px;
}

.progress-value-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.progress-value-label {
	color: #ffffff;
	font-size: 13px;
	font-weight: 500;
	font-family:
		system-ui,
		-apple-system,
		sans-serif;
	opacity: 0.9;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	text-align: left;
}

.progress-value-text {
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	font-family:
		system-ui,
		-apple-system,
		sans-serif;
	white-space: nowrap;
	flex-shrink: 0;
	text-align: right;
}

.progress-value-bar {
	width: 100%;
	height: 4px;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	overflow: hidden;
	position: relative;
	margin-top: 2px;
}

.progress-value-fill {
	height: 100%;
	background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
	border-radius: 2px;
	transition: width 0.3s ease;
	width: 0%;
	position: relative;
}

.progress-value-fill::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	animation: progress-shimmer 2s ease-in-out infinite;
}

@keyframes progress-shimmer {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(100%);
	}
}

/* Responsive Design */
@media (width <= 768px) {
	.progress-value-content {
		min-width: 260px;
		padding: 10px 14px;
		gap: 6px;
	}

	.progress-value-header {
		gap: 12px;
	}

	.progress-value-label {
		font-size: 12px;
	}

	.progress-value-text {
		font-size: 12px;
	}

	.progress-value-bar {
		height: 3px;
	}
}

@media (width <= 480px) {
	.progress-value-content {
		min-width: 220px;
		padding: 8px 12px;
		gap: 5px;
	}

	.progress-value-header {
		gap: 8px;
	}

	.progress-value-label {
		font-size: 11px;
	}

	.progress-value-text {
		font-size: 11px;
	}

	.progress-value-bar {
		height: 2px;
	}
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
	.progress-value-container::before {
		animation: none;
		opacity: 0.5;
	}

	.progress-value-fill::after {
		animation: none;
	}
}

/*!************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/dialog/undo_modal.css ***!
  \************************************************************************************/
.undo-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.undo-modal-container {
	border-radius: 8px;
	max-width: 400px;
	background: linear-gradient(90deg, #657fff63, #9e6d9b6b, #f5f5f5);
	background-color: #ffffff;
	width: fit-content;
	padding: 20px;
}

.undo-modal-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	color: #000000;
}

.undo-modal-header h3 {
	color: #000000;
}

.undo-modal-body {
	margin-bottom: 20px;
	font-size: small;
}

.undo-modal-body p {
	margin: 0;
	line-height: 1.5;
	color: #000000;
}

.undo-modal-footer {
	display: flex;
	justify-content: center;
}

.undo-message-content {
	padding: 10px;
	border-radius: 8px;
	background: black;
}

.undo-confirm-button {
	padding: 8px 16px;
	background-color: green;
	border: 2px solid green;
	border-radius: 4px;
	margin-right: 60px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-weight: 800;
}

.undo-cancel-button {
	background-color: red;
	color: white;
	padding: 8px 16px;
	border: none;
	cursor: pointer;
	border-radius: 5px;
	font-weight: 800;
}

/*!**************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/errorpage/errorpage.css ***!
  \**************************************************************************************/
.error-body {
	margin: 0;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(135deg, #1a1a2e, #16213e);
	font-family: Arial, sans-serif;
	overflow: hidden;
}

.background-animation {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0.2;
}

.wire {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: dash 8s linear infinite;
}

.wire2 {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: dash 6s linear infinite;
}

.wire3 {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: dash 10s linear infinite;
}

@keyframes dash {
	to {
		stroke-dashoffset: 0;
	}
}

.error-card {
	animation: card-appear 0.8s ease-out;
	background: rgba(255, 255, 255, 0.95);
	padding: 2rem;
	border-radius: 10px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
	width: 361px;
	z-index: 1;
	position: relative;
	text-align: center;
}

.icon-container {
	position: relative;
	left: 1px;
}

@keyframes card-appear {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.login-text a {
	color: #4a148c;
	text-decoration: none;
	font-weight: bold;
}

/*!********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/footer/footer.css ***!
  \********************************************************************************/
.footer-tool-active {
	border: 0 solid #dddfe3;
	background: #d3d5d9;
}

.footer-tool {
	border: 1px solid transparent;
	border-radius: 12px;
	padding: 8px;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease;
}

.footer-tool:hover:not(.footer-tool-active) {
	border-color: #dddfe3;
	background-color: #dddfe3;
}

#footer-progress {
	position: absolute;
	width: 95%;
	height: 3px;
	overflow: hidden;
	opacity: 0;
	background: rgba(178, 178, 178, 0.2);
	bottom: 0;
	transition: opacity 0.2s ease;
}

#footer-progress.active {
	opacity: 1;
}

#footer-progress .line {
	position: absolute;
	left: 0;
	top: 0;
	height: 3px;
	background: #4f44c8;
	width: 0%;
	transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#footer-progress .line::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 100px;
	height: 3px;
	background: linear-gradient(to right, transparent, #4f44c8);
	box-shadow: 0 0 10px #4f44c8;
}

/*!*************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/footer/footerTools.css ***!
  \*************************************************************************************/
/* Footer Tools Toolbar Styles */

/* Busy Status Border */
.animated-border {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	pointer-events: none;
	z-index: 5;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.animated-border.hidden {
	opacity: 0;
}

.animated-border::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(
		90deg,
		#667eea 0%,
		#764ba2 20%,
		#f093fb 40%,
		#4facfe 60%,
		#667eea 80%,
		#764ba2 100%
	);
	background-size: 300% 100%;
	border-radius: 2px;
	animation: busy-progress 1.5s linear infinite;
	z-index: 10;
	box-shadow: 0 0 8px rgba(102, 126, 234, 0.6);
}

.animated-border::after {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: 8px;
	height: 7px;
	background: #ffffff;
	border-radius: 50%;
	animation: busy-dot 1.5s ease-in-out infinite;
	z-index: 11;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

@keyframes busy-progress {
	0% {
		background-position: 0% 50%;
		box-shadow: 0 0 8px rgba(102, 126, 234, 0.6);
	}

	25% {
		box-shadow: 0 0 12px rgba(118, 75, 162, 0.8);
	}

	50% {
		box-shadow: 0 0 15px rgba(240, 147, 251, 0.9);
	}

	75% {
		box-shadow: 0 0 12px rgba(79, 172, 254, 0.8);
	}

	100% {
		background-position: 300% 50%;
		box-shadow: 0 0 8px rgba(102, 126, 234, 0.6);
	}
}

@keyframes busy-dot {
	0% {
		left: 0;
		transform: scale(1);
		opacity: 1;
	}

	25% {
		transform: scale(1.2);
		opacity: 0.8;
	}

	50% {
		left: 50%;
		transform: scale(1.5);
		opacity: 1;
	}

	75% {
		transform: scale(1.2);
		opacity: 0.8;
	}

	100% {
		left: calc(100% - 8px);
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes pulse-glow {
	0%,
	100% {
		opacity: 0;
		transform: scale(0.8);
	}

	50% {
		opacity: 0.6;
		transform: scale(1.1);
	}
}

@keyframes shimmer {
	0% {
		background-position: -200% center;
	}

	100% {
		background-position: 200% center;
	}
}

.footer-tools-container {
	position: fixed;
	bottom: 50px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
}

/* Message Container Styles */
.footer-message-container {
	position: relative;
	max-width: 500px;
	width: auto;
	max-height: 80px;
	opacity: 0;
	transform: translateY(15px);
	transition: all 0.3s ease-out;
	pointer-events: none;
}

.footer-message-container.show {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.footer-message-content {
	background: linear-gradient(135deg, #1a1d23 0%, #2d3142 100%);
	border: 1px solid rgba(102, 126, 234, 0.3);
	border-radius: 10px;
	padding: 8px 12px;
	box-shadow:
		0 4px 20px rgba(0, 0, 0, 0.4),
		0 0 30px rgba(102, 126, 234, 0.2);
	backdrop-filter: blur(15px);
	color: #ffffff;
	font-size: 13px;
	font-family:
		system-ui,
		-apple-system,
		sans-serif;
	line-height: 1.3;
	text-align: center;
	min-height: 16px;
	max-height: 60px;
	position: relative;
	overflow: hidden;
	word-wrap: break-word;
	text-overflow: ellipsis;
}

.footer-message-content::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.8), transparent);
	animation: message-border-glow 2s ease-in-out infinite;
}

@keyframes message-border-glow {
	0% {
		left: -100%;
	}

	100% {
		left: 100%;
	}
}

/* Message Types */
.footer-message-content.success {
	border-color: rgba(34, 197, 94, 0.4);
	box-shadow:
		0 4px 20px rgba(0, 0, 0, 0.4),
		0 0 30px rgba(34, 197, 94, 0.2);
}

.footer-message-content.success::before {
	background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.8), transparent);
}

.footer-message-content.error {
	border-color: rgba(239, 68, 68, 0.4);
	box-shadow:
		0 4px 20px rgba(0, 0, 0, 0.4),
		0 0 30px rgba(239, 68, 68, 0.2);
}

.footer-message-content.error::before {
	background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.8), transparent);
}

.footer-message-content.warning {
	border-color: rgba(245, 158, 11, 0.4);
	box-shadow:
		0 4px 20px rgba(0, 0, 0, 0.4),
		0 0 30px rgba(245, 158, 11, 0.2);
}

.footer-message-content.warning::before {
	background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.8), transparent);
}

.footer-tools-toolbar {
	position: relative;
	border-radius: 20px;
	padding: 2px;
	background-color: #16191e;
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow:
		0 4px 20px rgba(0, 0, 0, 0.4),
		0 0 40px rgba(102, 126, 234, 0.2);
	overflow: hidden;
}

/* Animation moved to .animated-border */

.toolbar-content {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #000000;
	border-radius: 18px;
	padding: 6px 12px;
	backdrop-filter: blur(15px);
	position: relative;
	overflow: hidden;
}

.toolbar-content::before {
	content: "";
	position: absolute;
	top: 0;
	left: -200%;
	width: 200%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.02), transparent);
	animation: shimmer 4s ease-in-out infinite;
}

.toolbar-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.item-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 120%;
	height: 120%;
	background: radial-gradient(
		circle,
		rgba(102, 126, 234, 0.2) 0%,
		rgba(118, 75, 162, 0.1) 50%,
		transparent 70%
	);
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0);
	transition: all 0.2s ease;
	z-index: -1;
}

.toolbar-item:hover {
	background-color: rgba(255, 255, 255, 0.08);
	transform: translateY(-1px) scale(1.02);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.toolbar-item:hover .item-glow {
	transform: translate(-50%, -50%) scale(1);
}

.toolbar-item:active {
	transform: translateY(0) scale(1);
}

.toolbar-icon {
	width: 14px;
	height: 14px;
	filter: brightness(0) invert(1);
	transition: all 0.3s ease;
	z-index: 2;
}

.circular-button .toolbar-icon {
	width: 16px;
	height: 16px;
	filter: brightness(0) invert(1);
}

.toolbar-item:hover .toolbar-icon {
	filter: brightness(0) invert(1) brightness(1.1);
	transform: scale(1.05);
}

/* Enhanced Refresh Button */
.refresh-button {
	width: auto !important;
	height: 28px !important;
	border-radius: 14px !important;
	padding: 0 12px;
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
	border: 1px solid rgba(102, 126, 234, 0.3);
	gap: 6px;
	overflow: visible;
}

.refresh-button:hover {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.25), rgba(118, 75, 162, 0.25));
	border-color: rgba(102, 126, 234, 0.4);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.refresh-icon {
	width: 14px;
	height: 14px;
	color: white;
	filter: brightness(0) invert(1);
	transition: all 0.3s ease;
}

.refresh-button:hover .refresh-icon {
	transform: rotate(180deg) scale(1.05);
	filter: brightness(0) invert(1) brightness(1.1);
}

.refresh-text {
	color: white;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	transition: all 0.3s ease;
}

.refresh-button:hover .refresh-text {
	text-shadow: none;
}

.toolbar-separator {
	width: 1px;
	height: 16px;
	background: linear-gradient(
		to bottom,
		transparent,
		rgba(102, 126, 234, 0.6),
		rgba(118, 75, 162, 0.6),
		transparent
	);
	border-radius: 1px;
	opacity: 0.7;
	transition: opacity 0.3s ease;
}

.footer-tools-toolbar:hover .toolbar-separator {
	opacity: 1;
}

/* Enhanced Circular Button */
.circular-button {
	width: 32px !important;
	height: 32px !important;
	border-radius: 20px !important;
	background: linear-gradient(135deg, #d26135, #9b2934);
	box-shadow:
		0 4px 15px rgba(210, 97, 53, 0.4),
		0 0 20px rgba(155, 41, 52, 0.3);
	border: none;
	margin-right: -6px;
	overflow: visible;
}

.circular-glow {
	background: radial-gradient(
		circle,
		rgba(210, 97, 53, 0.3) 0%,
		rgba(155, 41, 52, 0.2) 50%,
		transparent 70%
	);
}

.circular-button:hover {
	background: linear-gradient(135deg, #f87171 0%, #ef4444 60%, #9b2934 100%);
	transform: translateY(-1px) scale(1.05);
	box-shadow: 0 6px 15px rgba(210, 97, 53, 0.4);
}

.circular-button:hover .toolbar-icon {
	filter: brightness(0) invert(1) brightness(1.1);
	transform: scale(1.1);
}

/* Responsive Design */
@media (width <= 768px) {
	.footer-message-container {
		max-width: 350px;
		max-height: 70px;
		margin: 0 16px;
	}

	.footer-message-content {
		font-size: 12px;
		padding: 6px 10px;
		max-height: 50px;
	}

	.footer-tools-toolbar {
		padding: 1.5px;
	}

	.toolbar-content {
		gap: 8px;
		padding: 5px 10px;
		border-radius: 16px;
	}

	.toolbar-item {
		width: 24px;
		height: 24px;
	}

	.toolbar-icon {
		width: 12px;
		height: 12px;
	}

	.refresh-button {
		height: 24px !important;
		border-radius: 12px !important;
		padding: 0 10px;
		gap: 4px;
	}

	.refresh-icon {
		width: 12px;
		height: 12px;
	}

	.refresh-text {
		font-size: 11px;
	}

	.toolbar-separator {
		height: 14px;
	}

	.circular-button {
		width: 28px !important;
		height: 28px !important;
		border-radius: 16px !important;
		margin-right: -5px;
	}

	.circular-button .toolbar-icon {
		width: 14px;
		height: 14px;
	}
}

@media (width <= 480px) {
	.footer-message-container {
		max-width: 280px;
		max-height: 60px;
		margin: 0 12px;
	}

	.footer-message-content {
		font-size: 11px;
		padding: 6px 8px;
		max-height: 40px;
	}

	.footer-tools-toolbar {
		padding: 1px;
	}

	.toolbar-content {
		gap: 6px;
		padding: 4px 8px;
		border-radius: 14px;
	}

	.toolbar-item {
		width: 22px;
		height: 22px;
	}

	.toolbar-icon {
		width: 10px;
		height: 10px;
	}

	.refresh-button {
		height: 22px !important;
		border-radius: 11px !important;
		padding: 0 8px;
		gap: 3px;
	}

	.refresh-icon {
		width: 10px;
		height: 10px;
	}

	.refresh-text {
		font-size: 10px;
	}

	.toolbar-separator {
		height: 12px;
	}

	.circular-button {
		width: 26px !important;
		height: 26px !important;
		border-radius: 14px !important;
		margin-right: -4px;
	}

	.circular-button .toolbar-icon {
		width: 12px;
		height: 12px;
	}
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
	.animated-border::before {
		animation: none;
		opacity: 0.5;
	}

	.animated-border::after {
		animation: none;
		opacity: 0.3;
	}

	.toolbar-content::before {
		animation: none;
	}

	.item-glow {
		animation: none;
	}

	.refresh-button:hover .refresh-icon {
		transform: scale(1.1);
	}
}

/*!********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/header/header.css ***!
  \********************************************************************************/
.header {
	position: fixed;
	width: 100%;
	height: var(--header-height);
	top: 0;
	left: 0;
	background: linear-gradient(270deg, #c00909d0, #000000, #c00909d0, #000000);
	box-shadow:
		0 0 0 0 rgba(0, 0, 0, 0.2),
		0 0 10px 0 black;
	padding: 1px;
	display: flex;
	align-items: center;
	gap: 0;
	color: #ffffff;
	font-weight: 500;
	z-index: 4;
	overflow: hidden;
}

.header-vector {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
}

.header-content {
	display: flex;
	align-items: center;
	gap: 0;
	width: 100%;
	position: relative;
	z-index: 2;
}

.logo-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	cursor: pointer;
	padding: 8px 12px;
	border-radius: 8px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	margin-left: 8px;
	gap: 12px;
}

@keyframes sparkle {
	0%,
	100% {
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) brightness(1) hue-rotate(0deg);
	}

	20% {
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) brightness(1.05) hue-rotate(60deg)
			drop-shadow(0 0 4px rgba(255, 255, 255, 0.2))
			drop-shadow(0 0 6px rgba(255, 215, 0, 0.15));
	}

	40% {
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) brightness(1.03) hue-rotate(120deg)
			drop-shadow(0 0 3px rgba(255, 255, 255, 0.15))
			drop-shadow(0 0 5px rgba(0, 255, 255, 0.15));
	}

	60% {
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) brightness(1.04) hue-rotate(180deg)
			drop-shadow(0 0 5px rgba(255, 255, 255, 0.25))
			drop-shadow(0 0 7px rgba(255, 105, 180, 0.2));
	}

	80% {
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) brightness(1.02) hue-rotate(240deg)
			drop-shadow(0 0 3px rgba(255, 255, 255, 0.15))
			drop-shadow(0 0 5px rgba(138, 43, 226, 0.15));
	}
}

.logo {
	width: 32px;
	height: 32px;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
	transition: all 0.3s ease;
	flex-shrink: 0;
	animation: sparkle 10s ease-in-out infinite;
}

.logo-container:hover .logo {
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)) brightness(1.1);
	transform: scale(1.05);
}

.app-section {
	margin-left: 0;
	color: #ffffff;
	font-size: 16px;
	display: flex;
	align-items: center;
	gap: 6px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
	position: relative;
	white-space: nowrap;
}

.app-section::before {
	content: "";
	position: absolute;
	left: -6px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 20px;
	background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.app-section b {
	font-weight: 700;
	font-size: 21px;
	letter-spacing: 0;
	font-family:
		"IBM Plex Sans",
		nter,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		sans-serif;
	background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-shadow: none;
	color: #ffffff;
	text-align: center;
	line-height: 42px;
	font-style: normal;
}

.app-section small {
	font-size: 12px;
	opacity: 0.9;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.header-right {
	margin-left: auto;
	padding-left: 1rem;
	padding-right: 8px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.header-right:hover {
	cursor: pointer;
}

.logout-button {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	color: white;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	display: flex;
	padding: 2px 4px;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.logout-button:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.3);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	transform: translateY(-1px);
}

.user-name {
	color: #ffffff !important;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0.5px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.export-popup-container {
	/* display: none; Hidden by default */
	position: absolute;
	top: 50px; /* Position from the top */
	width: 219px;
	padding: 4px;
	flex-direction: column;
	align-items: flex-start;
	border-radius: 12px; /* var(--Dropdown-Dropdown-radius-dropdown-radius, 12px); */
	background: #ffffff; /* var(--Dropdown-Dropdown-states-dropdown-bg, #FFF); */
	box-shadow: 2px 2px 12px 2px rgba(32, 32, 40, 0.15); /* var(--shadows-color-shadow-A, rgba(32, 32, 40, 0.15)); */
	z-index: 1000;
}

.export-popup-option {
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
	padding: 8px 12px;
	border: none;
	background: transparent;
	width: 100%;
	text-align: left;
	cursor: pointer;
	border-radius: 8px;
	color: #2c2c34;
}

.export-popup-option:active {
	background-color: #dddfe3;
}

.export-popup-option:hover {
	background-color: #f1f2f5;
}

/*!*****************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/importFile/import_file.css ***!
  \*****************************************************************************************/
.import-file-container {
	background: rgba(0, 0, 0, 0.5);
	display: none;
	height: 100%;
	position: absolute;
	width: 100%;
	z-index: 4;
}

.import-input-section {
	display: flex;
	flex-direction: column;
	margin: 16px;
}

.import-file {
	background-color: #e1e0e1;
	border: 1px solid grey;
	overflow: hidden;
	width: fit-content;
	padding: 0;
}

.m-bottom-8 {
	margin-bottom: 8px;
}

.import-fields {
	width: 100%;
	display: flex;
	flex-direction: row;
}

.import-file-input {
	width: 70%;
}

.import-file-select {
	width: 10rem;
	padding-left: 0;
}

.import-field-label {
	width: 4rem;
	color: black;
	font-size: 15px;
	font-weight: 800;
}

.import-table-content {
	align-items: center;
	display: none;
	flex-direction: column;
	padding: 0;
	padding-bottom: 16px;
	overflow: hidden;
}

.import-close-btn {
	cursor: pointer;
	position: absolute;
	right: 0;
	background-color: white;
	border-radius: 16px;
}

.import-table-value {
	background-color: #f0f0f0 !important;
	max-width: 98.5vw;
}

.import-table-btn {
	background-color: #ffffff;
	font-weight: 800;
	margin-left: 4px;
	outline: none;
	padding: 4px;
	margin-top: 8px;
}

/*!**********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/index/index.css (1) ***!
  \**********************************************************************************/
.canvas-container {
	background: var(--canvas-background-color);
	position: absolute;
	left: 0;
	top: calc(var(--header-height));
	width: 100%;
	height: calc(100vh - (var(--header-height) + var(--footer-height)));
	z-index: 0;
}

* {
	user-select: none;
	font-family: "IBM Plex Sans", sans-serif;
}

.multi-select-processing {
	cursor: wait !important;
}

.drawing-sheet {
	background: #f1f5f8;
	box-shadow: 0 4px 8px 0 var(--box-shadow-color);
}

.overlay-container {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 0;
	width: 100%;
	z-index: 100;
	visibility: hidden;
	opacity: 0;
	transition:
		opacity 0.5s ease,
		visibility 0s 0.5s;
	transform-origin: right bottom;
}

.terminal-title {
	display: flex;
	align-items: center;
	font-style: italic;
	text-align: left;
	font-size: 14px;
	background-color: var(--title-bg-color);
	padding: 8px;
	color: var(--title-color);
}

/* Class to show the overlay */
.overlay-container.active {
	opacity: 1;
	visibility: visible;
	animation: scale-in 0.5s forwards;
}

/* Class to hide the overlay */
.overlay-container.hidden {
	animation: scale-out 0.5s forwards;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.5s ease,
		visibility 0s 0.5s;
}

@keyframes scale-in {
	from {
		opacity: 0;
		transform: scale(0.1);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes scale-out {
	from {
		opacity: 1;
		transform: scale(1);
	}

	to {
		opacity: 0;
		transform: scale(0.1);
	}
}

.suggestion-pin-highlight {
	stroke: #084f17 !important;
	stroke-width: 0.3px !important;
}

/* Customize scrollbar */
.custom-scrollbar {
	scrollbar-width: thin; /* Firefox */
	scrollbar-color: #96989b white; /* thumb track - Firefox */
	border-radius: 10px;
}

/* WebKit-based (Chrome, Edge, etc.) */
.custom-scrollbar::-webkit-scrollbar {
	width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
	background: #1f2937; /* dark gray */
	border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
	background-color: #96989b; /* blue-500 */
	border-radius: 10px;
	border: 1px solid transparent;
}

.white-scrollbar {
	scrollbar-color: #96989b whitesmoke;
}

.search-input-white-clear::-webkit-search-cancel-button {
	appearance: none;
	height: 16px;
	width: 16px;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;

	/* A URL-encoded white 'X' SVG icon */
	background-image: url(/js/c6ebeb173a2813f54179.svg);
	opacity: 0.7;
	transition: opacity 150ms ease-in-out;
}

.search-input-white-clear::-webkit-search-cancel-button:hover {
	opacity: 1;
}

.highlighted {
	stroke: rgb(235, 26, 26) !important;
	stroke-width: 0.3px !important; /* 3 ÷ 10 */
	filter: drop-shadow(0 0 0.5px rgb(230, 29, 29)) !important; /* 5 ÷ 10 */
}

/* Base Styles */
body {
	font-family: "IBM Plex Sans", sans-serif;
}

.selection-box {
	stroke: #1a73e8;
	stroke-width: 1px;
	fill: rgba(26, 115, 232, 0.06);
	pointer-events: none;
}

/* Generic handle styles (applied to both circle and rect) */
.resize-handle,
.rotate-handle,
.edge-handle,
.corner-handle {
	fill: #ffffff;
	stroke: #1a73e8;
	stroke-width: 0.8px; /* Reduced from 1px for more subtle appearance */
	filter: drop-shadow(0 0 0.3px rgba(0, 0, 0, 0.2)); /* Reduced shadow for subtlety */

	/* Removed transition to prevent slow movement during resize */
}

/* Corner handles: circles */
.corner-handle {
	fill: #f8f9ff; /* Lighter blue for more subtle appearance */
}

/* Edge handles: rounded rectangles */
.edge-handle {
	fill: #ffffff;
	stroke: #1a73e8;
	stroke-width: 0.8px;
}

/* Hover effects for resize handles - immediate response, no animation */
.resize-handle:hover,
.edge-handle:hover,
.corner-handle:hover {
	stroke: #1a73e8 !important; /* Red color on hover */
	stroke-width: 1.2px !important; /* Slightly thicker stroke on hover */
	filter: drop-shadow(0 0 3px #033c86) !important; /* Red glow effect */

	/* No transitions - immediate response for better UX during resize */
}

/* Rotate handle and its connector */
.rotate-handle {
	fill: #1a73e8 !important;
	stroke: #ffffff !important;
	stroke-width: 1.2px !important; /* Reduced from 1.5px for consistency */
	filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.25)); /* Reduced shadow for consistency */
}

.rotate-connector {
	stroke: #1a73e8 !important;
	stroke-width: 1px !important;
	stroke-dasharray: 2 2 !important;
	pointer-events: none !important;
}

/* Shape Toolbar */
#shape-toolbar {
	position: absolute;
	top: 120px;
	left: 20px;
	z-index: 100;
	background-color: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 8px;
	padding: 10px;
	display: flex;
	flex-direction: row;
	gap: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	cursor: move;
}

.toolbar-item {
	cursor: grab;
	padding: 5px;
	border: 1px solid transparent;
	border-radius: 5px;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.toolbar-item:hover {
	border-color: #007bff;
	background-color: #e9ecef;
}

.toolbar-item:active {
	cursor: grabbing;
}

.shape-text-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 0.4px;
	box-sizing: border-box;
	white-space: pre;
	overflow: visible;
	text-align: center;
	letter-spacing: 0;
}

.shape-text-container[contenteditable="true"] {
	caret-color: #000000;
	cursor: text;
	text-decoration-thickness: from-font;
	-webkit-text-decoration-thickness: 0.05px;
	text-decoration-skip-ink: none;
}

.shape-text-container[contenteditable="true"]:focus {
	outline: none;
}

/* Make cursor thinner - this helps with the "fat" appearance */
.shape-text-container.editing {
	letter-spacing: 0; /* Prevents spacing issues */
	line-height: inherit;
}

/* For very small fonts, ensure cursor is visible */
.shape-text-container[contenteditable="true"]:empty::after {
	content: "\200B"; /* Zero-width space to maintain height */
}

/* Asset Import Dialog */
.asset-item {
	position: relative;
	border: 1px solid #dddddd;
	border-radius: 4px;
	padding: 5px;
	cursor: pointer;
	text-align: center;
	background: white;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.asset-item:hover {
	border-color: #007bff;
	box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.asset-item img {
	max-width: 100%;
	height: 80px;
	object-fit: contain;
	margin-bottom: 5px;
}

.asset-item p {
	margin: 5px 0 0;
	font-size: 12px;
	word-break: break-all;
}

.asset-delete-btn {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 20px;
	height: 20px;
	background-color: rgba(220, 53, 69, 0.8);
	color: white;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 1;
	opacity: 0;
	transition: opacity 0.2s;
}

.asset-item:hover .asset-delete-btn {
	opacity: 1;
}

@keyframes purple-flash {
	0%,
	30% {
		background-color: #f3e8ff;
	}

	100% {
		background-color: transparent;
	}
}

.row-highlight {
	animation: purple-flash 5s ease-out forwards;
}

.tippy-box[data-theme~="tippy-theme-nextgen"] {
	background-color: #383840;
	border-radius: 12px;
	padding: 4px;
	color: white;
}

.tippy-content {
	padding: 4px;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
}

.tippy-box[data-theme~="tippy-theme-nextgen"] .tippy-arrow {
	color: #383840; /* arrow color */
}

/*!***************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/interpreter/terminal.css ***!
  \***************************************************************************************/
.terminal-section {
	display: block;
	width: 100%;
	box-shadow: 0 0 15px var(--box-shadow-color);
	position: relative;
	max-width: 100%; /* Optional: set a max width */
	margin: auto;
	top: 15%;
	overflow: auto;
}

.execute-button {
	position: absolute;
	background-color: rgb(101, 241, 101);
	width: fit-content;
	padding: 4px;
	padding-bottom: 2px;
	right: 1.5rem;
	bottom: 11rem;
	border-radius: 2px;
	box-shadow:
		4px 4px 4px 0 var(--box-shadow-color),
		0 6px 20px 0 var(--box-shadow1-color);
	transition:
		background-color 0.3s ease,
		transform 0.3s ease; /* Transition for hover */
}

.execute-button:hover {
	background-color: limegreen;
	transform: scale(1.05);
}

.execute-button:active {
	transform: scale(0.95); /* Slightly decrease the size when clicked */
}

.output-section {
	background-color: #1e1e1e;
	color: white;
	text-align: justify;
	font-weight: bold;
	font-size: 14px;
	min-height: 150px;
	overflow: auto;
}

.output-message {
	padding: 8px;
}

.minimize-button {
	margin: 8px 4px;
	position: absolute;
	top: 0;
	right: 0;
	background: none;
	border: none;
	font-size: 20px;
	cursor: pointer;
	z-index: 1;
}

/*!**************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/layouts/automations.css ***!
  \**************************************************************************************/
.automation-features {
	position: fixed;
	bottom: 80px;
	right: 10px;
	display: inline-grid;
}

.automation-icon {
	margin-top: 5px;
	border-radius: 50pc;
	width: 30px;
	height: 30px;
	border-color: black;
	border-width: 2px;
	box-shadow:
		0 4px 8px 0 var(--box-shadow-color),
		0 6px 20px 0 var(--box-shadow1-color);
}

.automation-icon:hover {
	cursor: pointer;
	background: linear-gradient(to right, var(--color-gradient-1), var(--color-gradient-2));
}

/*!*******************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/signalTable/signal_table.css ***!
  \*******************************************************************************************/
.signal-table-content {
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	margin: 4px 0;
	margin-bottom: 0;
	max-height: 100%;
}

.signal-table-header {
	justify-content: center;
}

.signal-table-title {
	font-weight: 800;
	color: white;
}

.signal-table-btn {
	background-color: #ffffff;
	border-radius: 4px;
	padding: 0;
	display: flex;
	align-items: center;
}

.signal-table-btn:hover {
	color: black;
	background: white;
}

.signal-table-btn:active {
	color: rgb(190, 6, 6);
	background: white;
}

.signal-table-value {
	background-color: #f0f0f0 !important;
	width: 35vw;
	height: calc(100vh - 333px);
	max-width: 1500px;
	margin-top: 8px;

	.tabulator-alert {
		display: none !important;
	}
}

.tabulator .tabulator-tableholder {
	scrollbar-width: thin !important; /* Makes the scrollbar thinner */
	scrollbar-color: #888888 #f1f1f1 !important; /* Thumb color and track color */
	max-height: calc(100vh - 297px) !important;
}

.signal-table {
	border-collapse: collapse;
	width: 100%;
	font-size: 14px;
	position: absolute;
	z-index: 5;
}

.table-group-label {
	width: 9rem;
}

.table-cont {
	height: 100%;
	position: absolute;
	display: none;
	width: calc(100% - 10px);
	overflow: hidden;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	backdrop-filter: blur(0.8px);
}

.table-edit-group {
	display: flex;
	padding-bottom: 8px;

	input {
		width: 12rem;
	}
}

.table-edit {
	font-weight: 800;
	margin-bottom: 8px;
}

.btn-group {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 4px;

	button {
		background-color: rgb(108, 160, 181, 0.95);
		border-radius: 4px;
		border: 1px solid grey;
	}
}

.btn-cancel {
	background: #e58484 !important;
}

.table-field-group {
	align-items: center;
	background-color: #dbd9d9;
	display: flex;
	flex-direction: column;
	height: fit-content;
	justify-content: center;
	max-height: calc(100vh - 300px);
	overflow-y: auto;
	padding: 8px;
	position: absolute;
	scrollbar-width: thin;
	width: fit-content;
	border: 1px solid darkgray;
	box-shadow: 0 1px 11px 4px #b1adad;
	border-radius: 4px;
}

.table-edit-section {
	overflow: auto;
	max-height: calc(100vh - 379px);
	scrollbar-width: thin;
	height: fit-content;
}

.signal-table-btn-container {
	display: flex;
	align-items: center;
	margin: 8px;
	gap: 8px;
	position: relative;
	top: 20px;
	width: 100%;
}

.highlight-info {
	align-items: center;
	color: #2a2a2a;
	display: flex;
	font-size: 12px;
	gap: 5px;
	margin: 4px 4px 0;
	position: absolute;
	right: 8px;
}

.highlight-content {
	background-color: #a7dba7;
	border: 1px solid #6bc96b;
	border-radius: 2px;
	height: 12px;
	width: 12px;
}

.signal-wire-highlighted {
	stroke: rgb(235, 26, 26) !important;
	stroke-width: 0.3px !important;
	filter: drop-shadow(0 0 0.5px rgb(230, 29, 29)) !important;
}

.air-wire {
	stroke: #ff6b6b;
	stroke-width: 0.2;
	stroke-dasharray: 0.5, 0.5;
	opacity: 0.8;
	animation: airwire-pulse 2s infinite;
}

@keyframes airwire-pulse {
	0%,
	100% {
		opacity: 0.6;
	}

	50% {
		opacity: 1;
	}
}

/*!**************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/symbolOperation/symbolOperation.css ***!
  \**************************************************************************************************/
.svg-operation {
	display: none;
	position: absolute;
	color: black;
	background: var(--dialog-bg);
	width: fit-content;
	padding: 4px;
	border-radius: 4px;
}

.svg-display {
	display: flex;
}

.svg-input {
	width: 46%;
}

.svg-close {
	width: 16px;
	height: 16px;
	position: absolute;
	top: -5px;
	right: -5px;
	background-color: white;
	border-radius: 16px;
	cursor: pointer;
}

.symbol-oper-content {
	width: 5.8rem;
	display: flex;
	align-items: center;

	span {
		font-size: 14px;
	}

	input {
		margin-left: 2px;
		width: 50%;
		border-radius: 4px;
		border: none;
	}
}

/*!************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/timeline/timeline.css ***!
  \************************************************************************************/
.tl-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

.tl-demo-content {
	background-color: white;
	padding: 30px;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	margin-bottom: 30px;
}

.tl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	font-weight: 500;
	background-color: #3498db;
	color: white;
	border-radius: 4px;
}

.tl-btn:hover {
	background-color: #2980b9;
	transform: translateY(-1px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tl-btn-icon {
	width: 32px;
	height: 32px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: white;
	color: #495057;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tl-btn-icon:hover {
	background-color: #f8f9fa;
	color: #3498db;
	transform: translateY(-1px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Timeline Footer Widget */
.tl-timeline-footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: var(--footer-height);
	background-color: white;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	transition: height 0.3s ease;
	height: 110px;
	overflow: hidden;
	z-index: 1000;
}

.tl-timeline-footer.tl-expanded {
	height: 200px;
}

.tl-timeline-header {
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	border-bottom: 1px solid #e9ecef;
	background: var(--title-bg-color);
	color: var(-title-color);
}

.tl-timeline-title {
	font-weight: 600;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--title-color);
}

.tl-timeline-controls {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tl-time-resolution-controls {
	display: flex;
	align-items: center;
	gap: 5px;
}

.tl-timeline-container {
	height: 160px;
	position: relative;
}

/* SVG Timeline Styles */
.tl-timeline-svg {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.tl-timeline-event-tooltip {
	position: absolute;
	background-color: white;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	padding: 12px;
	min-width: 200px;
	max-width: 250px;
	z-index: 1001;
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px);
	transition:
		opacity 0.2s ease,
		transform 0.2s ease;
}

.tl-timeline-event-tooltip.visible {
	opacity: 1;
	transform: translateY(0);
}

.tl-tooltip-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 8px;
}

.tl-tooltip-title {
	font-weight: 600;
	font-size: 14px;
	color: #343a40;
}

.tl-tooltip-timestamp {
	font-size: 11px;
	color: #6c757d;
}

.tl-tooltip-content {
	font-size: 12px;
	color: #495057;
	margin-bottom: 8px;
}

.tl-tooltip-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11px;
	color: #6c757d;
}

.tl-tooltip-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 6px;
	border-radius: 12px;
	font-size: 10px;
	font-weight: 500;
	color: white;
}

.tl-tooltip-user {
	display: flex;
	align-items: center;
	gap: 4px;
}

.tl-user-avatar {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 8px;
	font-weight: 600;
	color: white;
}

.tl-time-controls {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	gap: 5px;
	background-color: white;
	border-radius: 4px;
	padding: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tl-time-button {
	font-size: 11px;
	border-radius: 4px;
	color: khaki;
	background: black;
}

.tl-time-button.active {
	background-color: khaki;
	color: black;
}

.tl-toggle-timeline {
	position: fixed;
	bottom: 70px;
	right: 50px;
	margin-top: 5px;
	border-radius: 50pc;
	width: 30px;
	height: 30px;
	border-color: black;
	border-width: 2px;
	box-shadow:
		0 4px 8px 0 var(--box-shadow-color),
		0 6px 20px 0 var(--box-shadow1-color);
	z-index: 1001;
}

.tl-toggle-timeline.hidden {
	display: none;
}

.tl-toggle-timeline:hover {
	cursor: pointer;
	background: linear-gradient(to right, var(--color-gradient-1), var(--color-gradient-2));
}

.tl-toggle-button {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 5px;
}

/*!********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/toolbarMenu/tool_bar_menu.css ***!
  \********************************************************************************************/
.second-level-menu-bar {
	align-items: center;
	color: rgb(4, 0, 0);
	display: flex;
	height: 36px;
	left: 0;
	position: fixed;
	top: calc(var(--header-height) + 15px);
	width: 100%;
	z-index: 3;
	border-radius: 10px;
	background: transparent;
}

.draggable-group {
	display: flex;
	align-items: center;
	gap: 4px;
	cursor: move;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	padding: 4px 8px;
	backdrop-filter: blur(10px);
	transition: all 0.2s ease;
}

.draggable-group:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transform: translateY(-1px);
}

.second-level-container {
	background: transparent;
	border-radius: 7px;
	width: 100%;
	margin: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 55px;
	z-index: 3;
	left: 0;
	position: fixed;
	height: 30px;
	pointer-events: none;
}

.second-level-container > * {
	pointer-events: auto;
}

.second-level-left-icon {
	display: flex;
	justify-content: center;
	gap: 12px;
}

.second-level-right-icon {
	display: flex;
	gap: 15px;
}

.second-level-menu-item {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: all 0.2s ease;
	padding: 4px 6px;
	background: rgba(0, 0, 0, 0.02);
	border: 1px solid transparent;
	min-width: 40px;
}

.second-level-menu-item:hover {
	background: rgba(0, 0, 0, 0.05);
	border-color: rgba(0, 0, 0, 0.1);
	transform: translateY(-1px);
}

.second-level-menu-item:active {
	transform: translateY(0);
}

.second-level-menu-item svg {
	fill: #333333;
	width: 20px;
	height: 20px;
	transition: all 0.2s ease;
}

.second-level-menu-item:hover svg {
	fill: #000000;
}

/*!********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/zoomPanHelp/zoom_pan_help.css ***!
  \********************************************************************************************/
.zoom-pan-help-dialog {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	backdrop-filter: blur(1px);
}

.zoom-pan-help-container {
	background: #ffffff;
	border: 2px solid grey;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	max-width: 500px;
	width: 90%;
	overflow: hidden;
	color: black;
	animation: zoom-pan-help-fade-in 0.3s ease-out;
}

.zoom-pan-help-content {
	display: flex;
	flex-direction: column;
	background: linear-gradient(to right, #657fff63, #9e6d9b6b, rgb(245, 245, 245));
	background-color: #ffffff;
}

.zoom-pan-help-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	border-bottom: 1px solid #e5e7eb;
	background: linear-gradient(to right, #657fff63, #9e6d9b6b, rgb(245, 245, 245));
	background-color: #ffffff;
}

.zoom-pan-help-title {
	margin: 0;
	font-size: 18px;
	font-weight: bold;
	color: black;
}

.zoom-pan-help-close-btn {
	cursor: pointer;
	width: 20px;
	height: 20px;
	transition: transform 0.2s ease;
	top: -15px;
	position: relative;
	float: right;
	right: -15px;
}

.zoom-pan-help-close-btn:hover {
	transform: scale(1.1);
}

.zoom-pan-help-body {
	padding: 20px;
	background: #fafafa;
	font-size: 14px;
	color: black;
	width: 100%;
}

.help-item {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 24px;
	padding: 16px;
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	border-left: 4px solid grey;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.help-item:last-child {
	margin-bottom: 0;
}

.help-item:hover {
	transform: translateX(4px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.help-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 80px;
	border-radius: 8px;
	background: linear-gradient(to right, #657fff63, #9e6d9b6b, rgb(245, 245, 245));
	background-color: #ffffff;
	border: 2px solid grey;
	flex-shrink: 0;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.help-text {
	flex: 1;
	font-size: 14px;
	color: black;
	line-height: 1.4;
}

.help-text strong {
	color: black;
	font-weight: bold;
}

.zoom-pan-help-footer {
	padding: 12px 16px 16px;
	text-align: center;
	background: white;
	border-top: 1px solid #e5e7eb;
}

.zoom-pan-help-footer .std-button {
	background: linear-gradient(to right, #657fff63, #9e6d9b6b, rgb(245, 245, 245));
	background-color: #ffffff;
	color: black;
	border: 2px solid grey;
	padding: 8px 24px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.zoom-pan-help-footer .std-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.zoom-pan-help-footer .std-button:active {
	transform: translateY(0);
}

/* Animations */
@keyframes zoom-pan-help-fade-in {
	from {
		opacity: 0;
		transform: scale(0.9) translateY(-20px);
	}

	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes pan-animation {
	0%,
	100% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-2px);
	}

	75% {
		transform: translateX(2px);
	}
}

@keyframes zoom-animation {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}
}

/* Responsive design */
@media (width <= 768px) {
	.zoom-pan-help-container {
		width: 95%;
		max-width: 450px;
	}

	.zoom-pan-help-header {
		padding: 10px 14px;
	}

	.zoom-pan-help-title {
		font-size: 18px;
	}

	.zoom-pan-help-body {
		padding: 20px;
	}

	.help-item {
		padding: 12px;
		gap: 16px;
	}

	.help-icon {
		width: 100px;
		height: 70px;
	}

	.zoom-pan-help-footer {
		padding: 10px 14px 14px;
	}
}

/*!******************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/shape/shape.css ***!
  \******************************************************************************/
.section-toggle:hover {
	background-color: rgba(82, 72, 199, 0.07);
	color: #2c2c34 !important;
}

.section-toggle:active {
	background: #e5e7eb;
}

/*!***********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/client/src/core/selection/selection.css ***!
  \***********************************************************************************************/
/* Hover state for labels (text) */
.sub-element-text-hover {
	fill: #5248c7 !important;
	cursor: pointer !important;
	stroke: #5248c7;
	stroke-width: 0.05;
}

/* Active state for labels (text) */
.sub-element-text-active {
	fill: #5248c7 !important;
	stroke: #5248c7 !important;
	stroke-width: 0.1 !important; /* Note: SVG stroke width is unitless, but keeping inline value */
	cursor: pointer !important;
}

/* --- Pin / Circuit Hover Styles --- */

/* Applies to lines and circles within the pin/circuit group */
.pin-circuit-hover {
	stroke: #5248c7 !important;
	stroke-width: 0.15 !important;
	cursor: pointer !important;
}

/* --- Pin / Circuit Active Styles --- */

/* Applies to lines and circles within the pin/circuit group */
.pin-circuit-active {
	stroke: #5248c7 !important;
	stroke-width: 0.2 !important;
	cursor: pointer !important;
}

/* --- Frame Hover Styles --- */

/* Applies cursor pointer when hovering over frame hitbox */
.frame-hitbox:hover,
.frame-shape:hover .frame-hitbox {
	cursor: pointer !important;
}

/* Applies to the frame shape group when hovered */
.frame-shape:hover {
	cursor: pointer !important;
}

.pin-highlight {
	stroke: #007bff !important;
	stroke-width: 0.2;
	fill: red !important;
}

.node-hover * {
	stroke: #027bfe;
}

.bundle-hover {
	stroke: #027bfe;
	stroke-width: 0.3px;
}

.bundle-active {
	stroke-width: 0.3px;
	stroke: #027bfe;
	filter: drop-shadow(0.2px 0.2px 0.3px rgba(33, 150, 243, 0.6));
}

/*!********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/client/styles/tokens.css ***!
  \********************************************************************************/
@layer primitives {
	:root {
		--radius-default-radius: var(--radius-r-012);
		--radius-default-radius-lg: var(--radius-r-016);
		--radius-default-radius-sm: var(--radius-r-004);
		--padding-padding-x-padding-x: var(--spacing-space-012);
		--padding-padding-x-padding-x-lg: var(--spacing-space-020);
		--padding-padding-x-padding-sm-x: var(--spacing-space-004);
		--padding-padding-y-padding-y: var(--spacing-space-012);
		--padding-padding-y-padding-y-lg: var(--spacing-space-020);
		--padding-padding-y-padding-y-sm-x: var(--spacing-space-004);
		--border-border-width-rg: var(--border-border-w-02);
		--color-system-primary-primary-100: var(--color-system-purple-half-values-purple-125);
		--color-system-secondary-secondary-100: var(--color-system-blue-blue-100);
		--color-system-warning-warning-100: var(--color-system-yellow-yellow-100);
		--color-system-danger-danger-025: var(--color-system-red-half-values-red-25);
		--color-system-success-success-100: var(--color-system-green-green-100);
		--color-system-info-info-100: var(--color-system-blue-blue-100);
		--fonts-colors-type-dark-primary-heading: var(--color-system-document-range-page-black);
		--color-system-primary-primary-200: var(--color-system-purple-purple-300);
		--color-system-primary-primary-300: var(--color-system-purple-purple-400);
		--color-system-primary-primary-400: var(--color-system-purple-purple-500);
		--color-system-primary-primary-500: var(--color-system-purple-purple-600);
		--color-system-primary-primary-600: var(--color-system-purple-purple-700);
		--color-system-primary-primary-700: var(--color-system-purple-purple-800);
		--color-system-primary-primary-800: var(--color-system-purple-purple-900);
		--color-system-primary-primary-900: var(--color-system-purple-purple-950);
		--fonts-colors-type-dark-muted: var(--color-system-document-range-page-200);
		--color-system-background-primary-background: var(--color-system-gray-white);
		--color-system-secondary-secondary-200: var(--color-system-blue-blue-200);
		--color-system-secondary-secondary-300: var(--color-system-blue-blue-300);
		--color-system-secondary-secondary-400: var(--color-system-blue-blue-400);
		--color-system-secondary-secondary-500: var(--color-system-blue-blue-500);
		--color-system-secondary-secondary-600: var(--color-system-blue-blue-600);
		--color-system-secondary-secondary-700: var(--color-system-blue-blue-700);
		--color-system-secondary-secondary-800: var(--color-system-blue-blue-800);
		--color-system-secondary-secondary-900: var(--color-system-blue-blue-900);
		--color-system-warning-warning-200: var(--color-system-yellow-yellow-200);
		--color-system-warning-warning-300: var(--color-system-yellow-yellow-300);
		--color-system-warning-warning-400: var(--color-system-yellow-yellow-400);
		--color-system-warning-warning-500-p: var(--color-system-yellow-yellow-500);
		--color-system-warning-warning-600: var(--color-system-yellow-yellow-600);
		--color-system-warning-warning-700: var(--color-system-yellow-yellow-700);
		--color-system-warning-warning-800: var(--color-system-yellow-yellow-800);
		--color-system-warning-warning-900: var(--color-system-yellow-yellow-900);
		--color-system-danger-danger-075: var(--color-system-red-half-values-red-75);
		--color-system-danger-danger-400: var(--color-system-red-red-400);
		--color-system-danger-danger-500: var(--color-system-red-red-500);
		--color-system-danger-danger-050: var(--color-system-red-half-values-red-50);
		--color-system-danger-danger-600: var(--color-system-red-red-600);
		--color-system-danger-danger-700: var(--color-system-red-red-700);
		--color-system-danger-danger-800-p: var(--color-system-red-red-800);
		--color-system-danger-danger-900: var(--color-system-red-red-900);
		--color-system-info-info-200: var(--color-system-blue-blue-200);
		--color-system-info-info-300: var(--color-system-blue-blue-300);
		--color-system-info-info-400: var(--color-system-blue-blue-400);
		--color-system-info-info-700: var(--color-system-blue-blue-700);
		--color-system-info-info-800: var(--color-system-blue-blue-800);
		--color-system-info-info-900: var(--color-system-blue-blue-900);
		--color-system-info-info-500-p: var(--color-system-blue-blue-500);
		--color-system-info-info-600: var(--color-system-blue-blue-600);
		--color-system-success-success-200: var(--color-system-green-green-200);
		--color-system-success-success-300: var(--color-system-green-green-300);
		--color-system-success-success-400-p: var(--color-system-green-green-400);
		--color-system-success-success-700: var(--color-system-green-green-700);
		--color-system-success-success-800: var(--color-system-green-green-800);
		--color-system-success-success-900: var(--color-system-green-green-900);
		--color-system-success-success-500: var(--color-system-green-green-500);
		--color-system-success-success-600: var(--color-system-green-green-600);
		--fonts-colors-type-dark-primary-body: var(--color-system-document-range-page-800);
		--fonts-colors-type-dark-secondary-body: var(--color-system-document-range-page-700);
		--document-primary-card: var(--color-system-gray-white);
		--document-secondary-card: var(--color-system-gray-gray-100);
		--document-tertiary-card: var(--color-system-gray-gray-200);
		--color-system-background-secondary-background: var(--color-system-gray-gray-100);
		--color-system-background-tertiary-background: var(--color-system-gray-gray-300);
		--fonts-colors-type-dark-tertiary-body: var(--color-system-document-range-page-500);
		--radius-default-radius-xl: var(--radius-r-020);
		--radius-default-radius-xxl: var(--radius-r-120);
		--color-system-primary-variables-action-primary-emphasis: var(
			--color-system-primary-primary-300
		);
		--color-system-secondary-variables-action-secondary-emphasis: var(
			--color-system-secondary-secondary-700
		);
		--color-system-success-variables-action-success-emphasis: var(
			--color-system-success-success-900
		);
		--color-system-info-variables-action-info-emphasis: var(--color-system-info-info-900);
		--color-system-warning-variables-action-warning-emphasis: var(
			--color-system-warning-warning-900
		);
		--color-system-danger-variables-action-danger-emphasis: var(
			--color-system-danger-danger-900
		);
		--fonts-colors-type-dark-secondary-heading: var(--color-system-document-range-page-800);
		--padding-padding-y-padding-y-xl: var(--spacing-space-032);
		--padding-padding-y-padding-y-xxl: var(--spacing-space-128);
		--padding-padding-x-padding-x-xl: var(--spacing-space-032);
		--padding-padding-x-padding-x-xxl: var(--spacing-space-128);
		--padding-padding-between-padding-between-sm: var(--spacing-space-004);
		--padding-padding-between-padding-between: var(--spacing-space-012);
		--padding-padding-between-padding-between-lg: var(--spacing-space-020);
		--padding-padding-between-padding-between-xl: var(--spacing-space-032);
		--padding-padding-between-padding-between-xxl: var(--spacing-space-128);
		--color-system-disabled-disabled-100: var(--color-system-gray-half-values-gray-50);
		--color-system-disabled-disabled-200: var(--color-system-gray-half-values-gray-125);
		--color-system-disabled-disabled-300: var(--color-system-gray-gray-300);
		--color-system-disabled-disabled-400: var(--color-system-gray-gray-400);
		--color-system-disabled-disabled-500: var(--color-system-gray-gray-500);
		--color-system-disabled-disabled-600: var(--color-system-gray-gray-600);
		--color-system-disabled-disabled-700: var(--color-system-gray-gray-700);
		--color-system-disabled-disabled-800: var(--color-system-gray-gray-800);
		--color-system-disabled-disabled-900: var(--color-system-gray-gray-900);
		--border-border-width-lg: var(--border-border-w-03);
		--color-system-disabled-variables-action-disabled-emphasis: var(
			--color-system-disabled-disabled-300
		);
		--color-system-primary-variables-action-primary-active: var(
			--color-system-primary-primary-700
		);
		--color-system-secondary-variables-action-secondary-active: var(
			--color-system-secondary-secondary-600
		);
		--color-system-success-variables-action-success-active: var(
			--color-system-success-success-600
		);
		--color-system-info-variables-action-info-active: var(--color-system-info-info-700);
		--color-system-warning-variables-action-warning-active: var(
			--color-system-warning-warning-700
		);
		--color-system-danger-variables-action-danger-active: var(--color-system-danger-danger-700);
		--color-system-danger-variables-action-danger-hover: var(--color-system-danger-danger-600);
		--color-system-warning-variables-action-warning-hover: var(
			--color-system-warning-warning-600
		);
		--color-system-info-variables-action-info-hover: var(--color-system-info-info-600);
		--color-system-success-variables-action-success-hover: var(
			--color-system-success-success-500
		);
		--color-system-secondary-variables-action-secondary-hover: var(
			--color-system-secondary-secondary-500
		);
		--color-system-disabled-variables-action-disabled-hover: var(
			--color-system-disabled-disabled-200
		);
		--color-system-primary-variables-action-primary-hover: var(
			--color-system-primary-primary-600
		);
		--color-system-primary-variables-action-primary: var(--color-system-primary-primary-500);
		--color-system-disabled-variables-action-disabled: var(
			--color-system-disabled-disabled-100
		);
		--fonts-colors-type-light-primary: var(--color-system-document-range-page-000);
		--fonts-colors-type-light-secondary: var(--color-system-document-range-page-300);
		--fonts-colors-type-light-muted: var(--color-system-document-range-page-600);
		--fonts-colors-type-actions-dark-primary: var(
			--color-system-primary-variables-action-primary-dark
		);
		--fonts-colors-type-actions-dark-secondary: var(
			--color-system-secondary-variables-action-secondary-dark
		);
		--fonts-colors-type-actions-dark-info: var(--color-system-info-variables-action-info-dark);
		--fonts-colors-type-actions-dark-success: var(
			--color-system-success-variables-action-success-dark
		);
		--fonts-colors-type-actions-dark-warning: var(
			--color-system-warning-variables-action-warning-dark
		);
		--fonts-colors-type-actions-dark-danger: var(
			--color-system-danger-variables-action-danger-dark
		);
		--color-system-secondary-variables-action-secondary: var(
			--color-system-secondary-secondary-400
		);
		--color-system-success-variables-action-success: var(--color-system-success-success-400-p);
		--color-system-info-variables-action-info: var(--color-system-info-info-500-p);
		--color-system-warning-variables-action-warning: var(--color-system-warning-warning-500-p);
		--color-system-danger-variables-action-danger: var(--color-system-danger-danger-500);
		--color-system-primary-variables-focus-primary-focus: var(
			--color-system-primary-primary-050
		);
		--color-system-primary-variables-focus-primary-focus-emphasis: var(
			--color-system-primary-primary-400
		);
		--color-system-disabled-variables-focus-disabled-focus: var(
			--color-system-disabled-disabled-100
		);
		--color-system-disabled-variables-focus-disabled-focus-emphasis: var(
			--color-system-disabled-disabled-200
		);
		--color-system-secondary-variables-focus-secondary-focus: var(
			--color-system-secondary-secondary-100
		);
		--color-system-secondary-variables-focus-secondary-focus-emphasis: var(
			--color-system-secondary-secondary-500
		);
		--color-system-success-variables-focus-success-focus: var(
			--color-system-success-success-100
		);
		--color-system-success-variables-focus-success-focus-emphasis: var(
			--color-system-success-success-200
		);
		--color-system-info-variables-focus-info-focus: var(--color-system-info-info-100);
		--color-system-info-variables-focus-info-focus-emphasis: var(--color-system-info-info-400);
		--color-system-warning-variables-focus-warning-focus: var(
			--color-system-warning-warning-100
		);
		--color-system-warning-variables-focus-warning-focus-emphasis: var(
			--color-system-warning-warning-400
		);
		--color-system-danger-variables-focus-danger-focus: var(--color-system-danger-danger-025);
		--color-system-danger-variables-focus-danger-focus-emphasis: var(
			--color-system-danger-danger-400
		);
		--focus-focus-width: var(--border-border-w-04);
		--focus-focus-width-lg: var(--border-border-w-06);
		--focus-focus-width-sm: var(--border-border-w-02);
		--document-bg-primary: var(--color-system-indigo-indigo-100);
		--document-emphasis-bg: var(--color-system-cyan-cyan-100);
		--document-emphasis-primary: var(--color-system-blue-blue-500);
		--document-emphasis-seondary: var(--color-system-blue-blue-200);
		--radius-default-radius-circle: var(--radius-r-240);
		--border-border-width-na: var(--border-border-w-00);
		--radius-default-radius-x-sm: var(--radius-r-002);
		--color-system-background-page-background: var(--color-system-gray-gray-200);
		--border-border-width-sm: var(--border-border-w-01);
		--radius-default-radius-x-na: var(--radius-r-000);
		--shadows-color-shadow-a: var(--color-system-document-range-half-values-page-910);
		--document-branded-a: #f00c02;
		--color-system-subtle-variables-action-subtle: var(--color-system-subtle-subtle-100);
		--color-system-subtle-variables-action-subtle-emphasis: var(
			--color-system-subtle-subtle-200
		);
		--color-system-subtle-variables-action-subtle-hover: var(--color-system-subtle-subtle-300);
		--color-system-subtle-variables-action-subtle-active: var(--color-system-subtle-subtle-500);
		--color-system-subtle-variables-focus-subtle-focus: var(--color-system-subtle-subtle-025);
		--color-system-subtle-variables-focus-subtle-focus-emphasis: var(
			--color-system-subtle-subtle-100
		);
		--color-system-subtle-subtle-100: var(--color-system-document-range-page-100);
		--color-system-subtle-subtle-200: var(--color-system-document-range-page-200);
		--color-system-subtle-subtle-300: var(--color-system-document-range-page-300);
		--color-system-subtle-subtle-400: var(--color-system-document-range-page-400);
		--color-system-subtle-subtle-500: var(--color-system-document-range-page-500);
		--color-system-subtle-subtle-600: var(--color-system-document-range-page-600);
		--color-system-subtle-subtle-700: var(--color-system-document-range-page-700);
		--color-system-subtle-subtle-800: var(--color-system-document-range-page-800);
		--color-system-subtle-subtle-900: var(--color-system-document-range-page-900);
		--color-system-subtle-subtle-125: var(--color-system-document-range-page-125);
		--color-system-subtle-subtle-025: var(--color-system-document-range-page-025);
		--color-system-subtle-subtle-050: var(--color-system-document-range-page-050);
		--color-system-subtle-subtle-075: var(--color-system-document-range-page-075);
		--border-border-border-10: var(--color-system-subtle-subtle-100);
		--border-border-border-20: var(--color-system-subtle-subtle-200);
		--color-system-subtle-subtle-000: var(--color-system-document-range-page-white-000);
		--border-border-border-30: var(--color-system-disabled-disabled-300);
		--color-system-primary-primary-050: var(--color-system-purple-half-values-purple-50);
		--color-system-primary-primary-075: var(--color-system-purple-half-values-purple-75);
		--color-system-primary-primary-125: var(--color-system-purple-purple-200);
		--color-system-primary-primary-025: var(--color-system-purple-half-values-purple-25);
		--border-border-border-05: var(--color-system-subtle-subtle-075);
		--fonts-colors-type-dark-disabled: var(--color-system-document-range-page-125);
		--color-system-subtle-variables-focus-subtle-focus-hover: var(
			--color-system-subtle-subtle-050
		);
		--color-system-subtle-variables-focus-subtle-focus-active: var(
			--color-system-subtle-subtle-075
		);
		--color-system-primary-variables-focus-primary-focus-hover: var(
			--color-system-primary-primary-075
		);
		--color-system-primary-variables-focus-primary-focus-active: var(
			--color-system-primary-primary-100
		);
		--color-system-secondary-variables-focus-secondary-focus-hover: var(
			--color-system-secondary-secondary-200
		);
		--color-system-secondary-variables-focus-secondary-focus-active: var(
			--color-system-secondary-secondary-300
		);
		--color-system-success-variables-focus-success-focus-hover: var(
			--color-system-success-success-200
		);
		--color-system-success-variables-focus-success-focus-active: var(
			--color-system-success-success-300
		);
		--color-system-info-variables-focus-info-focus-hover: var(--color-system-info-info-200);
		--color-system-info-variables-focus-info-focus-active: var(--color-system-info-info-300);
		--color-system-warning-variables-focus-warning-focus-hover: var(
			--color-system-warning-warning-200
		);
		--color-system-warning-variables-focus-warning-focus-active: var(
			--color-system-warning-warning-300
		);
		--color-system-danger-variables-focus-danger-focus-hover: var(
			--color-system-danger-danger-050
		);
		--color-system-danger-variables-focus-danger-focus-active: var(
			--color-system-danger-danger-075
		);
		--border-border-border-40: var(--color-system-subtle-subtle-400);
		--border-border-border-flag: var(--color-system-subtle-subtle-500);
		--fonts-colors-type-actions-light-primary: var(
			--color-system-primary-variables-focus-primary-focus
		);
		--fonts-colors-type-actions-light-secondary: var(
			--color-system-secondary-variables-focus-secondary-focus
		);
		--fonts-colors-type-actions-light-info: var(--color-system-info-variables-focus-info-focus);
		--fonts-colors-type-actions-light-success: var(
			--color-system-success-variables-focus-success-focus-emphasis
		);
		--fonts-colors-type-actions-light-warning: var(
			--color-system-warning-variables-focus-warning-focus
		);
		--fonts-colors-type-actions-light-danger: var(
			--color-system-danger-variables-focus-danger-focus
		);
		--radius-nested-nested-radius-x-na: var(--radius-r-000);
		--radius-nested-nested-radius-x-sm: var(--radius-r-000);
		--radius-nested-nested-radius-sm: var(--radius-r-000);
		--radius-nested-nested-radius: var(--radius-r-008);
		--radius-nested-nested-radius-lg: var(--radius-r-012);
		--radius-nested-nested-radius-xl: var(--radius-r-016);
		--radius-nested-nested-radius-xxl: var(--radius-r-120);
		--radius-nested-nested-radius-circle: var(--radius-r-240);
		--shadows-color-shadow-b: var(--color-system-gray-half-values-gray-950);
		--shadows-color-shadow-c: var(--color-system-gray-half-values-gray-950);
		--border-colors-dark-primary: var(--color-system-primary-variables-action-primary);
		--border-colors-dark-secondary: var(--color-system-secondary-variables-action-secondary);
		--border-colors-dark-info: var(--color-system-info-variables-action-info-emphasis);
		--border-colors-dark-success: var(--color-system-success-variables-action-success-emphasis);
		--border-colors-dark-warning: var(--color-system-warning-variables-action-warning-emphasis);
		--border-colors-dark-danger: var(--color-system-danger-variables-action-danger-emphasis);
		--border-colors-light-primary: var(--color-system-primary-variables-focus-primary-focus);
		--border-colors-light-secondary: var(
			--color-system-secondary-variables-focus-secondary-focus
		);
		--border-colors-light-info: var(--color-system-info-variables-focus-info-focus-emphasis);
		--border-colors-light-success: var(
			--color-system-success-variables-focus-success-focus-emphasis
		);
		--border-colors-light-warning: var(
			--color-system-warning-variables-focus-warning-focus-emphasis
		);
		--border-colors-light-danger: var(--color-system-danger-variables-focus-danger-focus);
		--color-system-danger-danger-100: var(--color-system-red-red-100);
		--color-system-danger-danger-200: var(--color-system-red-red-200);
		--color-system-danger-danger-300: var(--color-system-red-red-300);
		--document-branded-b: #f00c02;
		--document-branded-c: #740500;
		--color-system-subtle-variables-focus-subtle-focus-dark: var(
			--color-system-subtle-subtle-975
		);
		--color-system-primary-variables-action-primary-dark: var(
			--color-system-primary-primary-975
		);
		--color-system-secondary-variables-action-secondary-dark: var(
			--color-system-secondary-secondary-975
		);
		--color-system-success-variables-action-success-dark: var(
			--color-system-success-success-975
		);
		--color-system-info-variables-action-info-dark: var(--color-system-info-info-975);
		--color-system-warning-variables-action-warning-dark: var(
			--color-system-warning-warning-975
		);
		--color-system-danger-variables-action-danger-dark: var(--color-system-danger-danger-975);
		--color-system-danger-danger-975: var(--color-system-red-red-975);
		--color-system-warning-warning-975: var(--color-system-yellow-yellow-975);
		--color-system-info-info-975: var(--color-system-blue-blue-975);
		--color-system-success-success-975: var(--color-system-green-green-975);
		--color-system-secondary-secondary-975: var(--color-system-blue-blue-975);
		--color-system-subtle-subtle-975: var(--color-system-document-range-page-black);
		--color-system-primary-primary-975: var(--color-system-purple-purple-975);
		--fonts-colors-type-actions-default-primary: var(
			--color-system-primary-variables-action-primary
		);
		--fonts-colors-type-actions-default-secondary: var(
			--color-system-secondary-variables-action-secondary
		);
		--fonts-colors-type-actions-default-info: var(--color-system-info-variables-action-info);
		--fonts-colors-type-actions-default-success: var(
			--color-system-success-variables-action-success
		);
		--fonts-colors-type-actions-default-warning: var(
			--color-system-warning-variables-action-warning
		);
		--fonts-colors-type-actions-default-danger: var(
			--color-system-danger-variables-action-danger
		);
		--fonts-colors-type-dark-disabled-overlay: var(--color-system-document-range-page-200);
		--padding-padding-x-padding-sm: var(--spacing-space-008);
		--padding-padding-y-padding-y-sm: var(--spacing-space-008);
		--color-system-secondary-secondary-075: var(--color-system-blue-half-values-blue-75);
		--color-system-secondary-secondary-050: var(--color-system-blue-half-values-blue-50);
		--color-system-secondary-secondary-025: var(--color-system-blue-half-values-blue-25);
		--border-border-width-x-sm: var(--border-border-w-005);
		--color-system-subtle-subtle-0000: var(--color-system-document-range-half-values-page-000);
		--color-system-subtle-subtle-1000: var(
			--color-system-document-range-half-values-page-black-000
		);
		--color-system-subtle-subtle-1050: var(
			--color-system-document-range-half-values-page-black-0000
		);
		--fonts-colors-type-dark-subtle: var(--color-system-document-range-page-100);
	}
}

/*!***********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/client/styles/enhanced-color-picker.css ***!
  \***********************************************************************************************/
/* Enhanced Color Picker Styles - Property Panel Design System */

.enhanced-color-picker-popup {
	position: fixed;
	background: var(--color-system-background-primary-background);
	border-radius: var(--radius-default-radius, 5px);
	box-shadow: 0 0 10px rgba(32, 32, 40, 0.15);
	border: 1px solid var(--color-system-subtle-subtle-200);
	z-index: 10000;
	width: 182px;
	animation: color-picker-fade-in 0.2625s cubic-bezier(0.215, 0.61, 0.355, 1);
	font-family: "IBM Plex Sans", Arial, sans-serif;
	font-size: 12px;
	line-height: 1.4;
}

@keyframes color-picker-fade-in {
	from {
		opacity: 0;
		transform: translateX(-20px) scale(0.95);
	}

	to {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

.enhanced-color-picker-container {
	display: flex;
	flex-direction: column;

	/* gap: var(--padding-padding-y-padding-sm-x, 8px); */
	width: 100%;
}

/* Color Palettes Section */
.color-picker-palettes-section {
	margin-bottom: var(--padding-padding-y-padding-sm-x, 8px);
	width: 100%;
}

.color-picker-palettes {
	display: flex;
	flex-direction: column;
	gap: var(--padding-padding-y-padding-sm-x, 6px);
	width: 100%;
}

.color-palette {
	width: 100%;
}

.color-palette-grid {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: var(--padding-padding-y-padding-sm-x, 4px);
	width: 100%;
}

/* Recent Colors Section */
.color-picker-recent-section {
	margin-bottom: var(--padding-padding-y-padding-sm-x, 8px);
	border-top: 1px solid var(--color-system-subtle-subtle-200);
	padding-top: var(--padding-padding-y-padding-sm-x, 8px);
}

.color-picker-recent-grid {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: var(--padding-padding-y-padding-sm-x, 4px);
	width: 100%;
}

/* Section titles */
.color-picker-section-title {
	font-size: 14px;
	font-weight: 500;
	font-family: "IBM Plex Sans", Arial, sans-serif;
	color: var(--fonts-colors-type-dark-secondary-body);
	margin-bottom: var(--padding-padding-between-padding-between, 12px);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0 var(--padding-padding-x-padding-x, 12px);
}

/* Color swatches */
.color-swatch {
	aspect-ratio: 1;
	border: 1px solid #dddfe3;
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
	position: relative;
	overflow: hidden;
	margin: 8px;
	background: var(--color-system-background-primary-background);
	display: block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	cursor: pointer;
}

.color-swatch::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: var(--radius-default-radius-sm, 4px);
	background: transparent;
	pointer-events: none;
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
	z-index: -1;
}

.color-swatch:hover {
	transform: scale(1.05);
	box-shadow: 0 0 0 2px var(--color-system-subtle-subtle-300);
	border-color: var(--color-system-subtle-subtle-300);
	z-index: 1;
}

.color-swatch:hover::before {
	background: rgba(0, 0, 0, 0.04);
}

.color-swatch:active {
	transform: scale(1.02);
}

.color-swatch:focus {
	outline: 2px solid var(--color-system-primary-variables-action-primary);
	outline-offset: 2px;
}

/* White color swatch special styling
.color-swatch[data-color="#FFFFFF"],
.color-swatch[data-color="#ffffff"],
.color-swatch[style*="rgb(255, 255, 255)"],
.color-swatch[style*="rgba(255, 255, 255"] {
	border: 1px solid var(--color-system-subtle-subtle-300);
} */

.recent-color {
	position: relative;
}

.recent-color::after {
	content: "";
	position: absolute;
	top: -2px;
	right: -2px;
	width: 8px;
	height: 8px;
	background: var(--color-system-primary-variables-action-primary);
	border-radius: 50%;
	border: 1px solid var(--color-system-background-primary-background);
	opacity: 0.8;
}

/* Custom color section */
.color-picker-custom-section {
	display: flex;
	flex-direction: column;
	padding: 0 var(--padding-padding-x-padding-x, 12px);
}

.color-picker-input-container {
	display: flex;
	align-items: center;
	gap: var(--padding-padding-between-padding-between, 12px);
	padding: var(--padding-padding-y-padding-y, 12px);
	background: var(--color-system-background-secondary-background);
	border-radius: var(--radius-default-radius, 5px);
	border: 1px solid var(--color-system-subtle-subtle-200);
	transition: all 0.2s ease;
}

.color-picker-input-container:hover {
	background: rgba(0, 0, 0, 0.02);
}

.color-picker-input-container:focus-within {
	border-color: var(--color-system-primary-variables-action-primary);
	box-shadow: 0 0 0 2px rgba(44, 44, 52, 0.1);
}

.color-picker-input {
	flex: 1;
	border: none;
	background: transparent;
	font-size: 14px;
	font-weight: 400;
	font-family: "IBM Plex Sans", Arial, sans-serif;
	color: var(--fonts-colors-type-dark-primary-heading);
	outline: none;
	padding: var(--padding-padding-y-padding-sm-x, 4px) 0;
}

.color-picker-input::placeholder {
	color: var(--fonts-colors-type-dark-tertiary-body);
}

.color-picker-preview {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-default-radius-sm, 4px);
	border: 1px solid var(--color-system-subtle-subtle-200);
	background: var(--color-system-background-primary-background);
	flex-shrink: 0;
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
	cursor: pointer;
	position: relative;
}

.color-picker-preview::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: var(--radius-default-radius-sm, 4px);
	background: transparent;
	pointer-events: none;
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
	z-index: -1;
}

.color-picker-preview:hover {
	transform: scale(1.05);
	box-shadow: 0 0 0 2px var(--color-system-subtle-subtle-300);
}

.color-picker-preview:hover::before {
	background: rgba(0, 0, 0, 0.04);
}

.color-picker-preview:active {
	transform: scale(1.02);
}

/* Opacity Controls */
.color-picker-opacity-section {
	padding: var(--padding-padding-y-padding-sm-x, 8px) 0;
	border-top: 1px solid var(--color-system-subtle-subtle-200);
}

.color-picker-opacity-container {
	display: flex;
	align-items: center;
	gap: var(--padding-padding-between-padding-between, 12px);
}

.opacity-label {
	font-size: var(--fonts-size-size-sm, 14px);
	font-weight: 500;
	color: black;
	min-width: 50px;
}

.opacity-slider {
	flex: 1;
	height: 8px;
	border-radius: 4px;
	background: linear-gradient(
		to right,
		transparent 0%,
		var(--color-system-primary-variables-action-primary) 100%
	);
	outline: none;
	cursor: pointer;
}

.opacity-slider::-webkit-slider-thumb {
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--color-system-background-primary-background);
	border: 2px solid var(--color-system-primary-variables-action-primary);
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.opacity-slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--color-system-background-primary-background);
	border: 2px solid var(--color-system-primary-variables-action-primary);
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.opacity-value {
	font-size: 12px;
	font-weight: 400;
	color: var(--fonts-colors-type-dark-secondary-body);
	min-width: 40px;
	text-align: right;
}

/* Responsive adjustments */
@media (width <= 480px) {
	.enhanced-color-picker-popup {
		min-width: 280px;
		max-width: 320px;
	}

	.color-palette-grid {
		grid-template-columns: repeat(8, 1fr);
	}

	.color-picker-recent-grid {
		grid-template-columns: repeat(8, 1fr);
	}

	.color-swatch {
		width: 20px;
		height: 20px;
	}
}

/* Integration with existing property panel */
.prop-color-wrapper .enhanced-color-picker-popup {
	position: absolute !important;
	top: 100% !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	margin-top: 8px !important;
	z-index: 10001 !important;
}

/* jsColor picker integration - ensure it appears above enhanced picker */
.jscolor-picker {
	z-index: 10003 !important;
}

/* jsColor shadow should also be above enhanced picker */
.jscolor-shadow {
	z-index: 10004 !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.color-swatch {
		border-width: 2px;
		border-color: var(--fonts-colors-type-dark-primary-heading);
	}

	.enhanced-color-picker-popup {
		border-width: 2px;
		border-color: var(--fonts-colors-type-dark-primary-heading);
	}
}

/*!****************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/client/styles/property-panel.css ***!
  \****************************************************************************************/
/* Property Panel CSS - Enhanced Modern Design */

/* Root Variables */
:root {
	--prop-label-width: 80px;
}

/* Properties Panel - Modern Floating Toolbar Design */
#properties-panel {
	position: absolute;
	z-index: 100;
	background: var(--color-system-background-primary-background, white);
	box-shadow: 0 0 10px rgba(32, 32, 40, 0.15);
	border-radius: 12px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 4px 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-20px) scale(0.95);
	transition:
		transform 0.2625s cubic-bezier(0.215, 0.61, 0.355, 1),
		opacity 0.2625s cubic-bezier(0.215, 0.61, 0.355, 1);
	margin-bottom: 300px; /* Add space for enhanced color pickers */
	overflow: visible;
}

#properties-panel.visible {
	opacity: 1;
	visibility: visible;
	transform: translateX(0) scale(1);
}

.prop-section,
.prop-divider {
	display: none;
}

.prop-divider.visible {
	width: 0.5px;
	height: 20px;
	background-color: #dddfe3;
}

#properties-panel .prop-section.visible {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	flex-wrap: nowrap;
}

#properties-panel .prop-divider.visible {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
}

.strikethrough text {
	text-decoration: line-through;
}

/* Ensure SVG text inside toolbar icons uses the panel font */
#properties-panel .prop-section.visible svg text {
	font-family: inherit !important;
}

.prop-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 5px;
	border: none;
	border-radius: 12px;
	background: transparent;
	transition: background-color 0.2s ease;
	height: 36px;
	justify-content: space-between;
}

.prop-item input[type="number"] {
	width: 70px;
	padding: 8px 12px;
	font-size: 16px;
	font-weight: 400;
	font-family: "IBM Plex Sans", Arial, sans-serif;
	border: 1px solid var(--color-system-subtle-subtle-200, #dddfe3);
	border-radius: 12px;
	text-align: center;
	background: transparent;
	transition: all 0.15s ease;
	color: var(--fonts-colors-type-dark-primary-heading, #2c2c34);
	outline-offset: -1px;
}

.prop-item input[type="text"] {
	width: 205px;
	font-size: 14px;
	font-weight: 400;
	font-family: "IBM Plex Sans", Arial, sans-serif;
	border: 1px solid #dddfe3;
	background: transparent;
	transition: all 0.15s ease;
	color: black;
	height: 36px;
	padding: 10px 0;
	padding-left: 8px;
	border-radius: 4px;
}

/* Enhanced select dropdown styling */
.prop-item select {
	background: transparent;
	border: 1px solid var(--Form-border-form-border-default, #dddfe3);
	outline: none;
	font-size: 16px;
	font-weight: 400;
	font-family: "IBM Plex Sans", Arial, sans-serif;
	color: var(--Form-text-form-default-txt, #2c2c34);
	cursor: pointer;
	border-radius: 12px;
	transition: all 0.2s ease;
	min-width: 182px;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27%3e%3cg clip-path=%27url%28%23clip0_257_12924%29%27%3e%3cpath d=%27M16.59 8.58997L12 13.17L7.41 8.58997L6 9.99997L12 16L18 9.99997L16.59 8.58997Z%27 fill=%27%232C2C34%27/%3e%3c/g%3e%3cdefs%3e%3cclipPath id=%27clip0_257_12924%27%3e%3crect width=%2724%27 height=%2724%27 fill=%27white%27/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 16px;
	outline-offset: -1px;
	padding: 0 8px;
	padding-right: 40px;
	height: 36px;
}

.prop-item select:hover {
	background-color: rgba(0, 0, 0, 0.04);
}

.prop-item select:focus {
	background-color: rgba(0, 0, 0, 0.04);
	box-shadow: 0 0 0 2px rgba(44, 44, 52, 0.1);
}

.prop-item select option {
	background: white;
	color: var(--Form-text-form-default-txt, #2c2c34);
	padding: 8px 12px;
	font-size: 16px;
	font-weight: 400;
	font-family: "IBM Plex Sans", Arial, sans-serif;
}

.prop-item select option:hover {
	background-color: rgba(0, 0, 0, 0.04);
}

/* .prop-item input[type="text"]:focus {
	outline: none;
	border-color: var(--color-system-subtle-subtle-200, #dddfe3);
	box-shadow: 0 0 0 2px rgba(44, 44, 52, 0.1);
}

/* .prop-item input[type="number"]:focus {
	outline: none;
	border-color: var(--color-system-subtle-subtle-200, #dddfe3);
	box-shadow: 0 0 0 2px rgba(44, 44, 52, 0.1);
} */

.prop-item select:active,
.prop-item input[type="number"]:active,
.prop-item input[type="text"]:active {
	background-color: #dddfe3 !important;
}

.prop-item input[type="number"]:hover,
.prop-item input[type="text"]:hover,
.prop-item select:hover {
	background-color: #f1f2f5 !important;
}

.prop-item-btn,
.prop-toggle-btn {
	background: transparent;
	border: none;
	border-radius: 12px;
	padding: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
	position: relative;
	overflow: visible;

	/* height: 36px;
	width: 36px; */
	color: var(--Navigation-Schematic-Toolbar-Toolbar-Icon-toolbar-icon-primary, #2c2c34);

	/* min-width: 36px;
	min-height: 36px; */

	/* flex-direction: column; */
	gap: 4px;
}

.prop-item-btn::before,
.prop-toggle-btn::before {
	border-radius: 12px;
	inset: 0;
	display: block;
	position: absolute;
	z-index: -1;
	content: "";
}

.prop-sub-panel .prop-item-btn::before {
	border-radius: 8px;
	inset: 0;
	display: block;
	position: absolute;
	z-index: -1;
	content: "";
}

/* Pressed click feedback */
.prop-item-btn:active::before,
.prop-toggle-btn:active::before {
	background-color: #dddfe3 !important;
}

/* Hover only when NOT active */
.prop-item-btn:not(.prop-item-active):hover::before,
.prop-toggle-btn:not(.prop-item-active):hover::before {
	background-color: #f1f2f5;
	content: "";
}

.prop-item-btn:active {
	background-color: #dddfe3 !important;
}

.prop-item-active {
	background-color: #dddfe3 !important;
}

/* .prop-item-active:not(#prop-fontSize) {
    background-color: #DDDFE3 !important;
} */

.prop-item-btn svg,
.prop-toggle-btn svg {
	width: 24px;
	height: 24px;
}

.prop-color-btn {
	position: relative;

	/* width: 36px;
	height: 36px; */
	border-radius: 12px;
	overflow: hidden;
	background: transparent;
	border: none;
	transition: background-color 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.prop-color-btn::before {
	border-radius: 12px;
	inset: 0;
	display: block;
	position: absolute;
	z-index: -1;
	content: "";
}

.prop-color-btn svg {
	width: 36px;
	height: 36px;
}

/* Color indicator styling */
.prop-color-indicator {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid #dddfe3;
	flex-shrink: 0;
	transition: all 0.2s ease;
	padding: 0;
	position: relative;
}

.prop-color-indicator::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	/* width: 20px;
	height: 20px; */
	background: transparent;
	border-radius: 50%;
}

/* .prop-color-indicator:hover {
	transform: scale(1.05);
} */

/* Special styling for stroke color indicators */
.prop-color-wrapper:has(#prop-stroke) .prop-color-indicator {
	border: 3px solid var(--fonts-colors-type-dark-primary-heading, #2c2c34);
	background-color: transparent;
}

.prop-color-wrapper:has(#prop-stroke) .prop-color-indicator::before {
	display: none;
}

.prop-color-wrapper:has(#prop-stroke) .prop-color-indicator:hover {
	border-color: var(--fonts-colors-type-dark-primary-heading, #2c2c34);
	border-width: 3px;
	transform: scale(1.05);
}

/* Font size display styling */
.prop-font-size-display {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px;
	transition: all 0.2s ease;
	min-width: 53px;
	height: 36px;
	border: 1px solid var(--Form-border-form-border-default, #dddfe3);
	border-radius: 12px;
	position: relative;
	z-index: 10;
	outline-offset: -1px;
}

.prop-font-size-display span:first-child {
	font-size: 16px;
	font-weight: 400;
	font-family: "IBM Plex Sans", Arial, sans-serif;
	color: var(--Form-text-form-default-txt, #2c2c34);
	min-width: 20px;
	text-align: center;
	transition: color 0.2s ease;
}

.prop-font-size-display span:last-child {
	font-size: 16px;
	font-weight: 400;
	font-family: "IBM Plex Sans", Arial, sans-serif;
	color: var(--Form-text-form-default-txt, #2c2c34);
	margin-left: 1px;
	transition: color 0.2s ease;
	opacity: 1;
}

/* .prop-input:hover,
.prop-select:hover,
.prop-section-header:hover,
.prop-divider:hover {
	background: rgba(255, 255, 255, 0.95);
	border-color: var(--Form-border-form-border-default, #dddfe3);
	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.15),
		0 1px 3px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
} */

.prop-color-btn input[type="color"],
.prop-color-btn input[data-jscolor] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	border: none;
	background: transparent;
	z-index: 10;
}

/* jsColor specific styling */
.prop-color-btn input[data-jscolor] {
	font-size: 0;
	padding: 0;
	margin: 0;
	pointer-events: auto;
}

/* Ensure jsColor picker is visible above enhanced color picker */
.jscolor-picker {
	z-index: 10003 !important;
}

/* Remove transparency controls since jsColor handles it */
.prop-color-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

/* Position color picker below the color button */
.prop-color-wrapper .jscolor-picker {
	position: absolute !important;
	top: 100% !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	margin-top: 20px !important;
	z-index: 9999 !important;
}

.prop-sub-panel {
	display: none;
	position: absolute;
	left: 50%;
	background-color: var(--Navigation-Schematic-Toolbar-Toolbar-states-primary-toolbar-bg, white);
	border-radius: 12px;
	padding: 4px;
	gap: 4px;
	box-shadow: 0 0 10px rgba(32, 32, 40, 0.15);
	z-index: 101;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-4px) scale(0.95);
	transition:
		transform 0.2625s cubic-bezier(0.215, 0.61, 0.355, 1),
		opacity 0.2625s cubic-bezier(0.215, 0.61, 0.355, 1);
	border: 1px solid var(--Form-border-form-border-default, #dddfe3);
}

.prop-sub-panel.visible {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0) scale(1);
}

/* Sub-panel button styling for stroke width and other options */
.prop-sub-panel .prop-item-btn {
	background: transparent;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: start;
	transition: background-color 0.2s ease;
	position: relative;
	overflow: hidden;
	color: var(--Navigation-Schematic-Toolbar-Toolbar-Icon-toolbar-icon-primary, #2c2c34);
	font-size: 16px;
	font-weight: 400;
	font-family: "IBM Plex Sans", Arial, sans-serif;
	gap: 8px;
}

/* Now hover comes AFTER */
.prop-sub-panel .prop-item-btn:hover::before {
	background-color: rgba(0, 0, 0, 0.04);
	content: "";
}

/* Active inside sub-panel */
.prop-sub-panel .prop-item-btn:active::before {
	background-color: rgba(0, 0, 0, 0.08);
	content: "";
}

.prop-sub-panel .prop-item-btn.active::before {
	background-color: rgba(44, 44, 52, 0.1);
	content: "";
}

/* General SVG styling for sub-panel buttons */
.prop-sub-panel .prop-item-btn svg {
	width: 24px;
	height: 24px;
	fill: currentcolor;
	stroke: currentcolor;
	flex-shrink: 0;
}

/* General styling for all sub-panel button spans to ensure consistency */
.prop-sub-panel .prop-item-btn span {
	font-size: 14px;
	font-weight: 400;
	font-family: "IBM Plex Sans", Arial, sans-serif;
	color: var(--Form-text-form-default-txt, #2c2c34);
	display: block;
}

.prop-sub-panel .prop-item-btn.active span {
	color: var(--Navigation-Schematic-Toolbar-Toolbar-Icon-toolbar-icon-primary, #2c2c34);
}

.prop-sub-panel[id="fontSizePanel"] {
	min-width: 0;
	padding: 4px;
}

.prop-sub-panel[id="fontFamilyPanel"] {
	width: 182px;
	padding: 4px;
}

/* Special styling for fontSize buttons */
.prop-sub-panel .prop-item-btn[id*="fontSize"] {
	justify-content: flex-start;
	padding: 8px 12px;
}

.prop-sub-panel .prop-item-btn[id*="fontSize"] svg {
	display: none;
}

.prop-sub-panel .prop-item-btn[id*="fontSize"] span {
	font-size: 14px;
	font-weight: 400;
	font-family: "IBM Plex Sans", Arial, sans-serif;
	color: var(--Form-text-form-default-txt, #2c2c34);
}

.prop-sub-panel .prop-item-btn[id*="fontSize"].active {
	color: var(--Navigation-Schematic-Toolbar-Toolbar-Icon-toolbar-icon-primary, #2c2c34);
}

/* Special styling for stroke width buttons */
.prop-sub-panel .prop-item-btn[id*="strokeWidth"] {
	justify-content: flex-start;
	padding: 8px;
	height: 36px;
	gap: 8px;
	min-width: 80px;
}

.prop-sub-panel .prop-item-btn[id*="strokeWidth"] svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.prop-sub-panel .prop-item-btn[id*="strokeWidth"] span {
	font-size: 16px;
	font-weight: 400;
	font-family: "IBM Plex Sans", Arial, sans-serif;
	color: var(--Form-text-form-default-txt, #2c2c34);
	display: block;
}

.prop-sub-panel .prop-item-btn[id*="fontSize"].active span {
	color: var(--Navigation-Schematic-Toolbar-Toolbar-Icon-toolbar-icon-primary, #2c2c34);
}

.prop-sub-panel .prop-item-btn[id*="fontSize"].active::before {
	background-color: rgba(44, 44, 52, 0.1);
}

.prop-sub-panel .prop-item-btn[id*="strokeWidth"].active {
	color: var(--Navigation-Schematic-Toolbar-Toolbar-Icon-toolbar-icon-primary, #2c2c34);
}

.prop-sub-panel .prop-item-btn[id*="strokeWidth"].active::before {
	background-color: rgba(44, 44, 52, 0.1);
}

.prop-sub-panel .prop-item-btn[id*="strokeWidth"].active span {
	color: var(--Navigation-Schematic-Toolbar-Toolbar-Icon-toolbar-icon-primary, #2c2c34);
}

/* Special styling for text style buttons */
.prop-sub-panel .prop-item-btn[id*="textStyle"] {
	justify-content: center;
	padding: 8px;
}

.prop-sub-panel .prop-item-btn[id*="textStyle"] svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.prop-sub-panel .prop-item-btn[id*="textStyle"].active {
	color: #dddfe3;
}

.prop-sub-panel .prop-item-btn[id*="textStyle"].active::before {
	background-color: #dddfe3;
}

/* Special styling for text alignment buttons */
.prop-sub-panel .prop-item-btn[id*="justifyContent"],
.prop-sub-panel .prop-item-btn[id*="alignItems"] {
	justify-content: center;
	padding: 8px;
}

.prop-sub-panel .prop-item-btn[id*="justifyContent"] svg,
.prop-sub-panel .prop-item-btn[id*="alignItems"] svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.prop-sub-panel .prop-item-btn[id*="justifyContent"].active,
.prop-sub-panel .prop-item-btn[id*="alignItems"].active {
	color: #dddfe3;
}

.prop-sub-panel .prop-item-btn[id*="justifyContent"].active::before,
.prop-sub-panel .prop-item-btn[id*="alignItems"].active::before {
	background-color: #dddfe3;
}

.prop-sub-panel[id="moreControls"] {
	width: 132px;
	padding: 4px;
	left: 65px;
}

.prop-sub-panel[id="layerControlsPanel"] {
	width: 132px;
	left: 60px;
}

.prop-sub-panel[id="moreControls"] .prop-item-btn {
	width: 100%;
}

.prop-sub-panel[id="layerControlsPanel"] .prop-item-btn {
	width: 100%;
}

.prop-sub-panel[id="textAlignPanel"],
.prop-sub-panel[id="textStyle"],
.prop-sub-panel[id="lineTypePanel"] {
	width: 150px;
	padding: 10px;
}

.prop-toggle-btn[id="prop-fontSize"],
.prop-toggle-btn[id="prop-fontFamily"] {
	width: auto;
	min-width: 53px;

	/* overflow: visible;
	position: relative;
	z-index: 1; */
	padding: 0;
}

.prop-font-family-display {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px;
	transition: all 0.2s ease;
	height: 36px;
	width: 182px;
	border: 1px solid var(--Form-border-form-border-default, #dddfe3);
	border-radius: 12px;
	position: relative;
	z-index: 10;
}

/* Hover effect for font size display */
.prop-item-btn:hover .prop-font-size-display span:first-child {
	color: #f1f2f5;
}

.prop-item-btn:hover .prop-font-size-display span:last-child {
	color: #f1f2f5;
}

#prop-style-options .prop-item-btn {
	flex-grow: 1;
}

.prop-sub-panel.sub-panel-below {
	top: 108%;
	margin-top: 5px;
}

.prop-sub-panel.sub-panel-above {
	bottom: 100%;
	margin-bottom: 5px;
}

.prop-sub-panel.sub-panel-horizontal {
	flex-direction: row;
}

.prop-sub-panel.sub-panel-vertical {
	flex-direction: column;
	align-items: stretch;
}

.prop-toggle-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

/* Drag handle styling */
.prop-drag-handle {
	cursor: grab;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	transition: background-color 0.2s ease;
	flex-shrink: 0;
	min-width: 20px;
	width: 20px;
	height: 36px;
}

.prop-drag-handle:hover {
	background-color: rgba(0, 0, 0, 0.04);
}

.prop-drag-handle:active {
	cursor: grabbing;
	background-color: rgba(0, 0, 0, 0.08);
}

/* Enhanced Color Picker Integration */

/* Improved accessibility for color buttons */
.prop-color-btn:focus-visible {
	outline: 2px solid var(--color-system-accent-accent-500, #3b82f6);
	outline-offset: 2px;
}

/* Ensure proper stacking order - enhanced color picker above jscolor */
.enhanced-color-picker-popup {
	z-index: 10002 !important;
}

/* Enhanced color picker positioning for property panel (more specific selector) */
.prop-color-wrapper .enhanced-color-picker-popup {
	position: absolute !important;
	top: calc(100% + 8px) !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	z-index: 10001 !important;
	margin-top: 0 !important;
}

/* Stroke container styling */
.prop-stroke-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* Stroke icon styling - remove border radius to prevent rounding */
.prop-stroke-icon {
	border-radius: 0 !important;
	width: 24px !important;
	height: 24px !important;
}

/* Stroke picker popup slider styling */
.stroke-picker-popup .prop-slider {
	background: #e0e0e0 !important;
	border-radius: 3px !important;
	height: 6px !important;
	outline: none !important;
}

.stroke-picker-popup .prop-slider::-webkit-slider-thumb {
	appearance: none !important;
	width: 16px !important;
	height: 16px !important;
	border-radius: 50% !important;
	background: #000000 !important;
	cursor: pointer !important;
	border: none !important;
}

.stroke-picker-popup .prop-slider::-moz-range-thumb {
	width: 16px !important;
	height: 16px !important;
	border-radius: 50% !important;
	background: #000000 !important;
	cursor: pointer !important;
	border: none !important;
}

/*!************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/client/styles/components.css ***!
  \************************************************************************************/
@layer components {
	:root {
		color-scheme: light;

		--svg-icon-filter: invert(0);
		--sidebar-svg-icon-filter: invert(1);
		--header-primary-color: var(--color-system-dark-gray-blue);
		--header-secondary-color: var(--color-system-red-orange);
		--sidebar-bg-color: var(--color-system-dark-gray-blue);
		--sidebar-text-color: var(--color-system-gray-white);
		--content-bg-color: var(--color-system-gray-gray-50);
		--typography-text-dark-sub-content-text: var(--text-muted-gray-light);
		--typography-text-dark-sub-content-metric: var(--text-muted-blue-light);
		--document-component-frame-comp-bg: var(--color-system-gray-white);
		--breadcrumb-text-breadcrumb-txt-active: var(--color-system-document-range-page-800);
		--breadcrumb-icon-breadcrumb-icon-active: var(--color-system-document-range-page-800);
		--breadcrumb-text-breadcrumb-txt-inactive: var(--color-system-document-range-page-200);
		--breadcrumb-icon-breadcrumb-icon-inactive: var(--color-system-document-range-page-125);
		--typography-text-dark-primary-heading: var(--color-system-document-range-page-black);
		--card-color: var(--color-system-gray-white);
		--card-color-hover: var(--color-system-white-nutral-100);
		--card-color-text-color: var(--color-system-gray-black);
		--card-color-border-color: var(--color-system-gray-gray-100);
		--input-box-color-border-color: var(--color-system-gray-gray-300);
		--primary-text-color: var(--color-system-gray-black);
		--secondary-text-color: var(--color-system-gray-gray-300);
		--tertiary-text-color: var(--color-system-blue-blue-700);
		--task-tag-color: var(--color-system-purple-purple-200);
		--task-filter-active-bg: var(--color-system-purple-purple-200-40);
		--typography-text-dark-primary-body: var(--color-system-document-range-page-800);
		--button-custom-primary-color-bg: var(--color-system-blue-blue-700);
		--button-custom-secondary-color-bg: var(--color-system-gray-white-000);
		--button-custom-default-color-text: var(--color-system-document-range-page-white-000);
		--button-custom-secondary-color-text: var(--color-system-document-range-page-black);
		--button-custom-secondary-color-outline: var(--color-system-document-range-page-100);
		--button-custom-tertiary-color-outline-focus: var(--color-system-orange-orange-900);
		--button-custom-primary-color-bg-hover: var(--color-system-blue-blue-500);
		--button-custom-secondary-color-bg-hover: var(--color-system-document-range-page-075);
		--status-indicator-color-bg: var(--color-system-document-range-page-black-20);
		--priority-indicator-color-bg: var(--color-system-violet-violet-500-20);
		--upgrade-button-color-bg: var(--color-system-gray-white-000);
		--dashboard-header-color-bg: var(--color-system-gray-gray-800);
		--dialog-modal-color-bg: var(--color-system-document-range-half-values-page-black-075);
		--dialog-form-modal-title-color-bg: var(--color-system-document-range-page-white-000);
		--dialog-form-modal-title-color-text: var(--color-system-document-range-page-black);
		--filter-bg: var(--color-system-white-nutral-100);
		--filter-text-color: var(--color-system-gray-gray-600);
		--filter-frame-bg-color: var(--color-system-gray-white);
		--filter-hover: var(--color-system-white-nutral-100);
		--filter-checkbox-bg: var(--color-system-gray-black);
		--filter-checkbox-icon: invert(0);
		--document-status-indicator-color-bg-active: var(--color-system-green-500-half-value-50);
		--document-status-indicator-color-bg-archive: var(--color-system-yellow-500-half-value-50);
		--border-color: var(--color-system-gray-gray-100);
		--dropdown-hover-bg-color: var(--color-system-gray-gray-100);
		--table-header-bg: var(--form-state-default-bg);
		--table-border: var(--form-border-deault);
		--input-box-active-state-border: var(--color-system-blue-blue-400);
		--input-box-error-state-border: var(--color-system-red-red-500);
		--input-box-warning-state-border: var(--color-system-yellow-yellow-500);
		--task-filter-text-color: var(--color-system-purple-purple-600);

		/* end of used css */
		--document-component-frame-state-primary-border: var(--document-branded-a);
		--document-component-frame-state-primary-weight: var(--border-border-w-05);
		--button-radius-btn-radius: var(--radius-default-radius);
		--button-radius-btn-radius-sm: var(--radius-default-radius);
		--button-radius-btn-radius-lg: var(--radius-default-radius);
		--document-frame-space-spacing-x: var(--padding-padding-x-padding-x-lg);
		--document-frame-space-spacing-y: var(--padding-padding-y-padding-y-lg);
		--document-frame-space-spacing-between: var(--padding-padding-between-padding-between-xxl);
		--document-component-frame-comp-radius: var(--radius-r-018);
		--document-frame-space-page-design: var(--padding-padding-x-padding-x-lg);
		--alert-radius-alert-radiuseses: var(--radius-default-radius);
		--alert-space-padding-y-alert-padding-y: var(--padding-padding-y-padding-y-sm);
		--alert-space-padding-x-alert-padding-x: var(--padding-padding-x-padding-x);
		--alert-states-success-subtle-success-s-bg: var(--color-system-success-success-100);
		--alert-states-success-emphasis-alert-success-border: var(
			--color-system-success-success-400-p
		);
		--alert-states-success-subtle-alert-success-icon: var(
			--typography-icon-colors-dark-success
		);
		--alert-states-info-subtle-alert-info-s-bg: var(--color-system-info-info-100);
		--alert-states-info-emphasis-alert-info-border: var(--color-system-info-info-500-p);
		--alert-states-info-subtle-alert-info-icon: var(--typography-icon-colors-dark-info);
		--alert-states-warning-subtle-alert-warning-s-bg: var(--color-system-warning-warning-100);
		--alert-states-warning-emphasis-alert-warning-border: var(
			--color-system-warning-warning-800
		);
		--alert-states-warning-subtle-alert-warning-icon: var(
			--typography-icon-colors-dark-warning
		);
		--alert-states-danger-subtle-alert-danger-s-bg: var(--color-system-danger-danger-075);
		--alert-states-danger-emphasis-alert-danger-border: var(--color-system-danger-danger-500);
		--alert-states-danger-subtle-alert-danger-icon: var(--typography-icon-colors-dark-danger);
		--typography-text-dark-secondary-heading: var(--fonts-colors-type-dark-secondary-heading);
		--typography-text-dark-secondary-body: var(--fonts-colors-type-dark-secondary-body);
		--typography-text-dark-tertiary-body: var(--fonts-colors-type-dark-tertiary-body);
		--typography-text-dark-disabled: var(
			--color-system-disabled-variables-action-disabled-emphasis
		);
		--alert-space-padding-between-alert-padding-between: var(
			--padding-padding-between-padding-between
		);
		--document-component-title-title-border: var(--border-border-width-rg);
		--document-component-title-title-space-between: var(
			--padding-padding-between-padding-between
		);
		--document-component-title-header: var(--fonts-colors-type-dark-primary-heading);
		--document-component-title-title-border-color: var(--border-border-border-10);
		--document-component-title-title-space-y: var(--padding-padding-y-padding-y-lg);
		--typography-icon-dark-secondary: var(--fonts-colors-type-dark-muted);

		/* --typography-icon-dark-disabled: var(--color-system-document-range-page-125); */
		--typography-text-light-primary-heading: var(--fonts-colors-type-light-primary);
		--typography-text-light-secondary-heading: var(--fonts-colors-type-light-secondary);
		--typography-text-light-disabled: var(--fonts-colors-type-light-muted);
		--typography-icon-light-primary: var(--fonts-colors-type-light-primary);
		--typography-icon-light-secondary: var(--fonts-colors-type-light-secondary);
		--typography-icon-light-disabled: var(--fonts-colors-type-light-muted);
		--button-states-high-btn-bg: var(--color-system-primary-variables-action-primary);
		--button-states-high-btn-bg-hover: var(
			--color-system-primary-variables-action-primary-hover
		);
		--button-states-high-btn-bg-active: var(
			--color-system-primary-variables-action-primary-active
		);
		--button-states-high-btn-bg-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--button-states-high-btn-focus: var(--color-system-primary-variables-focus-primary-focus);
		--button-states-high-btn-txt: var(--fonts-colors-type-light-primary);
		--button-states-high-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
		--button-focus-btn-focus-width: var(--focus-focus-width);
		--button-states-low-btn-bg: var(--color-system-subtle-subtle-075);
		--button-states-low-btn-bg-hover: var(--color-system-subtle-subtle-100);
		--button-states-low-btn-bg-active: var(--color-system-subtle-subtle-200);
		--button-states-low-btn-bg-disabled: var(--color-system-disabled-variables-action-disabled);
		--button-states-low-btn-focus: var(--color-system-subtle-subtle-050);
		--button-states-low-btn-txt: var(--fonts-colors-type-dark-primary-body);
		--button-states-low-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
		--button-states-danger-btn-bg: var(--color-system-danger-variables-action-danger);
		--button-states-danger-btn-bg-hover: var(
			--color-system-danger-variables-action-danger-hover
		);
		--button-states-danger-btn-bg-active: var(
			--color-system-danger-variables-action-danger-active
		);
		--button-states-danger-btn-bg-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--button-states-danger-btn-focus: var(
			--color-system-danger-variables-focus-danger-focus-active
		);
		--button-states-danger-btn-txt: var(--fonts-colors-type-light-primary);
		--button-states-danger-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
		--document-frame-frame-bg: var(--color-system-document-range-page-900);
		--document-frame-content-example-bg: var(--color-system-document-range-page-025);
		--document-frame-frame-radius: var(--radius-r-028);
		--alert-border-alert-border-width: var(--border-border-width-na);
		--button-states-high-outline-btn-outline: var(--color-system-primary-primary-500);
		--button-states-high-outline-btn-outline-hover: var(--color-system-primary-primary-500);
		--button-states-high-outline-btn-outline-active: var(--color-system-primary-primary-500);
		--button-states-high-outline-btn-focus: var(--color-system-primary-primary-075);
		--button-states-high-outline-btn-txt: var(--fonts-colors-type-light-primary);
		--button-states-high-outline-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
		--button-icon-btn-icon-pho: var(--typography-icon-pho);
		--typography-icon-pho: var(--generic-states-divider-pho);
		--button-icon-btn-icon-invert: var(--typography-icon-light-primary);
		--button-states-high-outline-btn-bg: var(--color-system-primary-primary-300);
		--button-states-high-outline-btn-bg-hover: var(--color-system-primary-primary-400);
		--button-states-high-outline-btn-bg-active: var(--color-system-primary-primary-500);
		--button-border-btn-border-width: var(--border-border-width-rg);
		--button-states-low-outline-btn-outline: var(--color-system-subtle-subtle-100);
		--button-states-low-outline-btn-bg: var(--color-system-subtle-subtle-000);
		--button-states-low-outline-btn-outline-hover: var(--color-system-subtle-subtle-200);
		--button-states-low-outline-btn-bg-hover: var(--color-system-subtle-subtle-025);
		--button-states-low-outline-btn-outline-active: var(--color-system-subtle-subtle-200);
		--button-states-low-outline-btn-bg-active: var(--color-system-subtle-subtle-075);
		--button-states-low-outline-btn-focus: var(--color-system-subtle-subtle-050);
		--button-states-low-outline-btn-txt: var(--fonts-colors-type-dark-primary-body);
		--button-states-low-outline-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
		--button-states-danger-outline-btn-outline: var(
			--color-system-danger-variables-action-danger
		);
		--button-states-danger-outline-btn-bg: var(--color-system-danger-danger-025);
		--button-states-danger-outline-btn-outline-hover: var(
			--color-system-danger-variables-action-danger-hover
		);
		--button-states-danger-outline-btn-bg-hover: var(
			--color-system-danger-variables-focus-danger-focus
		);
		--button-states-danger-outline-btn-outline-active: var(
			--color-system-danger-variables-action-danger
		);
		--button-states-danger-outline-btn-bg-active: var(
			--color-system-danger-variables-focus-danger-focus-active
		);
		--button-states-danger-outline-btn-focus: var(
			--color-system-danger-variables-focus-danger-focus-active
		);
		--button-states-danger-outline-btn-txt: var(--color-system-danger-variables-action-danger);
		--button-states-danger-outline-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
		--button-states-text-btn-txt: var(--color-system-primary-variables-action-primary);
		--button-states-text-btn-txt-hover: var(
			--color-system-primary-variables-action-primary-hover
		);
		--button-states-text-btn-txt-active: var(
			--color-system-primary-variables-action-primary-active
		);
		--button-states-text-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
		--badge-radius-badge-radiuses: var(--radius-default-radius-sm);
		--badge-states-primary-subtle-badge-primary-bg: var(
			--color-system-primary-variables-focus-primary-focus-hover
		);
		--badge-states-primary-subtle-badge-primary-txt: var(--typography-text-dark-primary-body);
		--badge-states-primary-default-badge-primary-bg: var(
			--color-system-primary-variables-action-primary
		);
		--badge-states-primary-default-badge-primary-txt: var(
			--typography-text-light-primary-heading
		);
		--badge-states-warning-default-badge-warning-bg: var(
			--color-system-warning-variables-action-warning
		);
		--badge-states-warning-default-badge-warning-txt: var(--typography-text-dark-primary-body);
		--badge-states-danger-default-badge-danger-bg: var(
			--color-system-danger-variables-action-danger-emphasis
		);
		--badge-states-danger-default-badge-danger-txt: var(
			--typography-text-light-primary-heading
		);
		--badge-states-secondary-default-badge-secondary-bg: var(
			--color-system-secondary-variables-action-secondary
		);
		--badge-states-secondary-default-badge-secondary-txt: var(
			--typography-text-light-primary-heading
		);
		--badge-border-badge-border-width: var(--border-border-width-na);
		--checkbox-icon-chck-box-icon-primary: var(--typography-icon-light-primary);
		--checkbox-space-padding-y-chck-box-padding-y: var(--padding-padding-y-padding-y);
		--checkbox-space-padding-x-chck-box-padding-x: var(--padding-padding-x-padding-x);
		--checkbox-space-padding-between-chck-box-padding-between-sm: var(
			--padding-padding-between-padding-between
		);
		--checkbox-radius-chck-box-radius-sm: var(--radius-default-radius-x-sm);
		--checkbox-focus-chck-box-focus-width: var(--focus-focus-width);
		--checkbox-radius-chck-box-focus-radius: var(--radius-default-radius-circle);
		--checkbox-border-chck-box-border-width: var(--border-border-width-rg);
		--checkbox-states-primary-chck-box-bg: var(--color-system-subtle-subtle-900);
		--checkbox-states-primary-chck-box-bg-active: var(--color-system-subtle-subtle-900);
		--checkbox-states-disabled-chck-box-bg-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--checkbox-states-primary-chck-box-focus: var(
			--color-system-subtle-variables-focus-subtle-focus-active
		);
		--checkbox-states-primary-chck-box-txt: var(--fonts-colors-type-dark-primary-body);
		--checkbox-states-disabled-chck-box-txt-disabled: var(--fonts-colors-type-dark-disabled);
		--checkbox-states-disabled-chck-box-border-disabled: var(
			--color-system-disabled-variables-action-disabled-hover
		);
		--checkbox-states-primary-chck-box-border: var(--color-system-subtle-subtle-900);
		--checkbox-states-primary-chck-box-hover: var(
			--color-system-subtle-variables-focus-subtle-focus-active
		);
		--radio-states-primary-radio-bg: var(--color-system-primary-variables-action-primary);
		--radio-states-primary-radio-border: var(--color-system-primary-variables-action-primary);
		--radio-states-primary-radio-hover: var(
			--color-system-primary-variables-focus-primary-focus
		);
		--radio-states-disabled-radio-bg-disabled: var(
			--color-system-disabled-variables-action-disabled-emphasis
		);
		--radio-states-primary-radio-focus: var(
			--color-system-primary-variables-focus-primary-focus-emphasis
		);
		--radio-states-disabled-radio-border-disabled: var(
			--color-system-disabled-variables-action-disabled-emphasis
		);
		--radio-states-primary-radio-txt: var(--fonts-colors-type-dark-primary-body);
		--radio-states-disabled-radio-txt-disabled: var(--fonts-colors-type-dark-tertiary-body);
		--radio-space-padding-y-radio-padding-y: var(--padding-padding-y-padding-y);
		--radio-space-padding-x-radio-padding-x: var(--padding-padding-x-padding-sm-x);
		--radio-space-padding-between-radio-padding-between: var(
			--padding-padding-between-padding-between-lg
		);
		--radio-radius-radio-radius-sm: var(--radius-default-radius-sm);
		--radio-focus-radio-focus-width: var(--focus-focus-width);
		--radio-radius-radio-focus-radius: var(--radius-default-radius-circle);
		--radio-border-radio-border-width: var(--border-border-width-rg);
		--breadcrumb-space-padding-y-breadcrumb-padding-y: var(--padding-padding-y-padding-y);
		--breadcrumb-space-padding-x-breadcrumb-padding-x: var(--padding-padding-x-padding-x);
		--breadcrumb-space-padding-between-breadcrumb-padding-between: var(
			--padding-padding-between-padding-between
		);
		--toast-radius-toast-radiuseses: var(--radius-default-radius);
		--toast-states-success-toast-success-header-bg: var(
			--color-system-success-variables-action-success
		);
		--toast-states-success-toast-success-body-bg: var(
			--color-system-background-primary-background
		);
		--toast-states-info-toast-info-header-bg: var(--color-system-info-variables-action-info);
		--toast-states-warning-toast-warning-header-bg: var(
			--color-system-warning-variables-action-warning
		);
		--toast-states-danger-toast-danger-header-bg: var(
			--color-system-danger-variables-action-danger
		);
		--toast-space-padding-between-toast-padding-between: var(
			--padding-padding-between-padding-between
		);
		--toast-states-default-toast-default-header-bg: var(--color-system-subtle-subtle-025);
		--toast-states-default-toast-default-body-bg: var(
			--color-system-background-primary-background
		);
		--toast-icon-toast-icon-primary: var(--color-system-document-range-page-800);
		--toast-text-toast-default-txt: var(--fonts-colors-type-dark-primary-body);
		--toast-text-toast-time-txt: var(--fonts-colors-type-dark-tertiary-body);
		--toast-states-info-toast-info-body-bg1: var(--color-system-background-primary-background);
		--toast-states-warning-toast-warning-body-bg: var(
			--color-system-background-primary-background
		);
		--toast-states-danger-toast-danger-body-bg: var(
			--color-system-background-primary-background
		);
		--breadcrumb-text-breadcrumb-txt-divider: var(--fonts-colors-type-light-secondary);
		--alert-icon-alert-general-icon-default: var(--color-system-document-range-page-800);
		--radio-states-disabled-radio-bg-disabled-hover: var(
			--color-system-disabled-variables-focus-disabled-focus
		);
		--radio-states-disabled-radio-bg-disabled-active: var(
			--color-system-disabled-variables-focus-disabled-focus-emphasis
		);
		--tooltip-space-padding-y-tooltip-padding-y: var(--padding-padding-y-padding-y);
		--tooltip-radius-tooltip-radius: var(--radius-default-radius);
		--tooltip-space-padding-x-tooltip-padding-x: var(--padding-padding-x-padding-x);
		--tooltip-states-light-tooltip-bg-light: var(--color-system-subtle-subtle-000);
		--tooltip-text-tooltip-default-txt-dark: var(--fonts-colors-type-dark-primary-body);
		--tooltip-states-dark-tooltip-bg-dark: var(--color-system-subtle-subtle-700);
		--tooltip-space-padding-between-toast-padding-between: var(
			--padding-padding-between-padding-between
		);
		--stepper-states-active-stepper-active-step-txt: var(--fonts-colors-type-light-primary);
		--stepper-states-active-stepper-active-icon: var(--typography-icon-light-primary);
		--stepper-states-todo-stepper-todo-icon: var(--color-system-document-range-page-800);
		--stepper-states-todo-stepper-todo-step-txt: var(--fonts-colors-type-dark-primary-body);
		--stepper-space-padding-y-stepper-padding-y: var(--padding-padding-y-padding-y);
		--stepper-space-padding-x-stepper-padding-x: var(--padding-padding-x-padding-x);
		--stepper-space-padding-between-stepper-padding-between: var(
			--padding-padding-between-padding-between
		);
		--stepper-states-active-stepper-active-bg: var(
			--color-system-primary-variables-action-primary
		);
		--stepper-states-todo-stepper-todo-bg: var(
			--color-system-disabled-variables-action-disabled-emphasis
		);
		--stepper-radius-stepper-focus-radius: var(--radius-default-radius-circle);
		--stepper-states-active-stepper-active-txt: var(--fonts-colors-type-dark-primary-body);
		--stepper-states-todo-stepper-todo-txt: var(--fonts-colors-type-dark-tertiary-body);
		--stepper-states-complete-stepper-complete-step-txt: var(--fonts-colors-type-dark-muted);
		--stepper-states-complete-stepper-complete-bg: var(
			--color-system-disabled-variables-action-disabled
		);
		--stepper-states-complete-stepper-complete-txt: var(--fonts-colors-type-dark-primary-body);
		--stepper-states-complete-stepper-complete-icon: var(
			--color-system-document-range-page-800
		);
		--stepper-border-stepper-border-width: var(--border-border-width-sm);
		--stepper-border-stepper-complete-stroke: var(--border-border-border-10);
		--stepper-border-stepper-todo-stroke: var(--border-border-border-30);
		--document-frame-title-breadcrumb-icon: var(--document-branded-a);
		--document-tekna-element: #ff8500;
		--document-frame-title-doc-title-radius: var(--radius-r-022);
		--document-frame-footer-footer-bg: var(--color-system-document-range-page-025);
		--form-space-padding-y-form-padding-y: var(--padding-padding-y-padding-y);
		--form-radius-form-radiuseses: var(--radius-default-radius);
		--form-icon-default-form-icon-primary: var(--color-system-document-range-page-800);
		--form-border-form-border-width: var(--border-border-width-sm);
		--form-space-padding-x-form-padding-x: var(--padding-padding-x-padding-x);
		--form-states-default-form-default-bg: var(--color-system-subtle-subtle-025);
		--form-states-default-form-default-bg-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--form-text-form-default-txt: var(--fonts-colors-type-dark-primary-body);
		--form-focus-form-border-focus: var(--color-system-primary-variables-focus-primary-focus);
		--form-border-form-border-warning: var(--color-system-warning-variables-action-warning);
		--form-border-form-border-danger: var(--color-system-danger-variables-action-danger);
		--form-space-padding-between-form-padding-between: var(
			--padding-padding-between-padding-between
		);
		--form-text-form-disabled-txt: var(--fonts-colors-type-dark-disabled-overlay);
		--alert-states-success-emphasis-alert-success-bg: var(
			--color-system-success-variables-action-success
		);
		--alert-states-info-emphasis-alert-info-f-bg: var(
			--color-system-info-variables-action-info
		);
		--alert-states-warning-emphasis-alert-warning-f-bg: var(
			--color-system-warning-variables-action-warning
		);
		--alert-states-danger-emphasis-alert-danger-f-bg: var(
			--color-system-danger-variables-action-danger
		);
		--switch-state-primary-switch-active: var(--color-system-primary-variables-action-primary);
		--switch-state-primary-switch-inactive-focus: var(
			--color-system-subtle-variables-focus-subtle-focus-hover
		);
		--switch-state-primary-switch-focus: var(
			--color-system-primary-variables-focus-primary-focus-hover
		);
		--switch-state-handle-switch-handle-primary: var(--color-system-gray-white);
		--switch-space-padding-y-switch-padding-y: var(--padding-padding-y-padding-y-sm-x);
		--switch-space-padding-x-switch-padding-x: var(--padding-padding-x-padding-sm-x);
		--switch-radius-switch-radius: var(--radius-default-radius-circle);
		--switch-focus-switch-focus-width: var(--focus-focus-width);
		--tags-icon-tag-icon-default: var(--color-system-document-range-page-800);
		--tags-space-padding-y-tag-padding-y: var(--padding-padding-y-padding-y-sm-x);
		--tags-space-padding-x-tag-padding-x: var(--padding-padding-x-padding-sm);
		--tags-space-padding-between-tag-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
		--tags-focus-tag-focus-width: var(--focus-focus-width);
		--tags-radius-tag-radius: var(--radius-default-radius-xl);
		--tags-border-tag-border-width: var(--border-border-width-sm);
		--tags-states-primary-tag-bg: var(--color-system-primary-variables-action-primary);
		--tags-states-primary-tag-bg-hover: var(
			--color-system-primary-variables-action-primary-hover
		);
		--tags-states-primary-subtle-tag-bg: var(
			--color-system-primary-variables-focus-primary-focus
		);
		--tags-states-primary-subtle-tag-bg-hover: var(
			--color-system-primary-variables-focus-primary-focus-hover
		);
		--tags-states-secondary-tag-bg: var(--color-system-secondary-variables-action-secondary);
		--tags-states-secondary-subtle-tag-bg: var(
			--color-system-secondary-variables-focus-secondary-focus
		);
		--tags-states-secondary-subtle-tag-bg-hover: var(
			--color-system-secondary-variables-focus-secondary-focus-hover
		);
		--tags-states-secondary-tag-bg-hover: var(
			--color-system-secondary-variables-action-secondary-hover
		);
		--tags-states-default-tag-bg: var(--color-system-subtle-variables-action-subtle);
		--tags-states-default-tag-bg-hover: var(
			--color-system-subtle-variables-action-subtle-hover
		);
		--tags-states-default-subtle-tag-bg: var(
			--color-system-subtle-variables-focus-subtle-focus
		);
		--tags-states-default-subtle-tag-bg-hover: var(
			--color-system-subtle-variables-focus-subtle-focus-hover
		);
		--tags-text-tag-txt-default: var(--typography-text-dark-primary-body);
		--tags-text-tag-txt-invert: var(--typography-text-light-primary-heading);
		--tags-icon-tag-icon-invert: var(--typography-icon-light-primary);
		--switch-state-primary-switch-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--switch-state-handle-switch-handle-radius: var(--radius-default-radius-circle);
		--switch-state-primary-switch-inactive: var(--color-system-subtle-variables-action-subtle);
		--toast-text-toast-default-txt-invert: var(--fonts-colors-type-light-primary);
		--toast-icon-toast-icon-invert: var(--typography-icon-light-primary);
		--toast-text-toast-time-txt-invert: var(--fonts-colors-type-light-primary);
		--form-text-form-txt-dng: var(--fonts-colors-type-actions-default-danger);
		--form-text-form-txt-warning: var(--fonts-colors-type-actions-default-warning);
		--form-icon-default-form-icon-secondary: var(--typography-icon-dark-secondary);
		--form-text-form-txt-ghost: #e2d9f3;
		--form-icon-invert-form-icon-primary: var(--typography-icon-light-primary);
		--form-icon-invert-form-icon-secondary: var(--typography-icon-light-secondary);
		--form-border-form-border-default: var(--border-border-border-05);
		--form-focus-form-focus-width: var(--focus-focus-width);
		--button-radius-icon-btn-radius: var(--radius-nested-nested-radius);
		--selections-text-selection-txt-default: var(--typography-text-dark-primary-body);
		--selections-text-selection-txt-invert: var(--typography-text-light-primary-heading);
		--selections-space-padding-y-selection-padding-y: var(--padding-padding-y-padding-y-sm-x);
		--selections-space-padding-x-selection-padding-x: var(--padding-padding-x-padding-sm-x);
		--selections-space-padding-between-selection-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
		--selections-radius-selection-btn-radius: var(--radius-nested-nested-radius);
		--selections-border-selection-border-width-default: var(--border-border-width-sm);
		--selections-states-background-selection-bg: var(--color-system-subtle-subtle-025);
		--selections-states-default-selection-default: var(--color-system-subtle-subtle-025);
		--selections-states-default-selection-default-hover: var(--color-system-subtle-subtle-050);
		--selections-states-active-selection-active-bg: var(
			--color-system-primary-variables-action-primary-hover
		);
		--selections-states-active-selection-active-bg-hover: var(
			--color-system-primary-variables-action-primary-hover
		);
		--selections-radius-selection-radius: var(--radius-default-radius);
		--range-icon-range-icon-default: var(--color-system-document-range-page-800);
		--range-icon-range-icon-invert: var(--typography-icon-light-primary);
		--range-text-range-txt-default: var(--typography-text-dark-primary-body);
		--range-space-padding-y-range-padding-y: var(--padding-padding-y-padding-y-sm-x);
		--range-space-padding-x-range-padding-x: var(--padding-padding-x-padding-sm-x);
		--range-space-padding-between-range-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
		--range-radius-range-radius: var(--radius-default-radius-sm);
		--range-radius-range-btn-radius: var(--radius-default-radius-sm);
		--range-focus-range-focus-width: var(--focus-focus-width);
		--range-border-range-border-width: var(--border-border-width-rg);
		--range-states-background-range-bg: var(--color-system-disabled-variables-action-disabled);
		--range-states-default-range-bg: var(--color-system-disabled-disabled-200);
		--range-states-default-range-bg-hover: var(
			--color-system-primary-variables-action-primary-emphasis
		);
		--range-states-default-range-focus: var(
			--color-system-primary-variables-focus-primary-focus
		);
		--range-states-active-range-bg: var(--color-system-primary-variables-action-primary);
		--range-states-active-range-bg-hover: var(
			--color-system-primary-variables-focus-primary-focus-emphasis
		);
		--range-states-active-range-focus: var(
			--color-system-primary-variables-focus-primary-focus
		);
		--tabs-icon-tab-icon-default: var(--color-system-document-range-page-800);
		--tabs-icon-tab-icon-active: var(--fonts-colors-type-actions-default-primary);
		--tabs-space-padding-y-tab-padding-y: var(--padding-padding-y-padding-y-sm-x);
		--tabs-space-padding-x-tab-padding-x: var(--padding-padding-x-padding-sm-x);
		--tabs-space-padding-between-tab-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
		--tabs-radius-tab-radius: var(--radius-default-radius-sm);
		--tabs-focus-tab-focus-width: var(--focus-focus-width);
		--tabs-border-tab-border-width-default: var(--border-border-width-rg);
		--tabs-border-tab-border-default: var(--border-border-border-10);
		--tabs-border-tab-border-width-active: var(--border-border-width-rg);
		--tabs-border-tab-border-active: var(--border-colors-dark-primary);
		--tabs-text-tab-txt-default: var(--color-system-document-range-page-800);
		--tabs-text-tab-txt-active: var(--fonts-colors-type-actions-default-primary);
		--modal-space-padding-y-modal-padding-y: var(--padding-padding-y-padding-y);
		--modal-radius-modal-radiuseses: var(--radius-default-radius-lg);
		--modal-icon-modal-icon-primary: var(--color-system-document-range-page-800);
		--modal-icon-modal-icon-invert: var(--typography-icon-light-primary);
		--modal-border-modal-border-width: var(--border-border-width-sm);
		--modal-space-padding-x-modal-padding-x: var(--padding-padding-x-padding-x);
		--modal-states-default-modal-default-body-bg: var(
			--color-system-background-primary-background
		);
		--modal-text-modal-default-txt: var(--fonts-colors-type-dark-primary-body);
		--modal-text-modal-default-txt-invert: var(--fonts-colors-type-light-primary);
		--modal-space-padding-between-modal-padding-between: var(
			--padding-padding-between-padding-between
		);
		--modal-text-modal-title-txt: var(--fonts-colors-type-dark-primary-heading);
		--modal-border-modal-border: var(--typography-text-dark-disabled);
		--switch-focus-switch-border-width: var(--radius-default-radius-sm);
		--pagination-states-primary-pagination-a-active: var(
			--color-system-primary-variables-action-primary
		);
		--pagination-states-primary-pagination-a-default: var(
			--color-system-primary-variables-focus-primary-focus-emphasis
		);
		--pagination-states-primary-pagination-a-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--pagination-space-padding-y-pagination-padding-y: var(--padding-padding-y-padding-y-sm-x);
		--pagination-space-padding-x-pagination-padding-x: var(--padding-padding-x-padding-sm-x);
		--pagination-radius-pagination-handle-a-radius: var(--radius-default-radius-circle);
		--pagination-focus-pagination-focus-width: var(--focus-focus-width);
		--pagination-focus-pagination-border-width: var(--radius-default-radius-sm);
		--pagination-radius-pagination-border: var(--color-system-subtle-subtle-200);
		--pagination-text-pagination-txt-default: var(--typography-text-dark-primary-body);
		--pagination-text-pagination-txt-invert: var(--typography-text-light-primary-heading);
		--pagination-icon-pagination-icon-default: var(--color-system-document-range-page-800);
		--pagination-icon-pagination-icon-invert: var(--typography-icon-light-primary);
		--pagination-icon-pagination-icon-disabled: var(--color-system-document-range-page-125);
		--pagination-states-primary-pagination-b-active: var(--color-system-subtle-subtle-075);
		--pagination-states-primary-pagination-b-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--pagination-text-pagination-txt-disabled: var(--typography-text-dark-disabled);
		--pagination-radius-pagination-handle-b-radius: var(--radius-default-radius);
		--selections-border-selection-border-width-active: var(--border-border-width-rg);
		--selections-border-selection-border-default: var(--border-border-width-sm);
		--selections-border-selection-border-active: var(--border-border-width-rg);
		--selections-states-default-selection-border-default: var(--border-border-border-20);
		--selections-states-active-selection-border-active: var(
			--color-system-primary-variables-action-primary
		);
		--selections-states-active-selection-border-bg-active: var(
			--color-system-document-range-page-white-000
		);
		--switch-text-switch-title-txt: var(--fonts-colors-type-dark-primary-body);
		--switch-text-switch-default-txt: var(--fonts-colors-type-dark-secondary-body);
		--switch-text-switch-default-txt-disabled: var(--fonts-colors-type-dark-disabled);
		--switch-text-switch-title-txt-disabled: var(--fonts-colors-type-dark-disabled);
		--pagination-space-padding-between-pagination-padding-between: var(
			--padding-padding-between-padding-between
		);
		--badge-states-primary-subtle-badge-primary-icon: var(
			--color-system-document-range-page-800
		);
		--badge-states-primary-default-badge-primary-icon: var(--typography-icon-light-primary);
		--badge-states-secondary-default-badge-secondary-icon: var(--typography-icon-light-primary);
		--badge-states-warning-default-badge-warning-icon: var(--typography-text-dark-primary-body);
		--badge-states-danger-default-badge-danger-icon: var(--typography-icon-light-primary);
		--avatar-radius-avatar-radiuseses-sm: var(--radius-default-radius-circle);
		--avatar-icon-avatar-general-icon: var(--color-system-document-range-page-800);
		--avatar-icon-avatar-general-icon-invert: var(--color-system-document-range-page-800);
		--avatar-states-high-avatar-high-bg: var(
			--color-system-primary-variables-focus-primary-focus-emphasis
		);
		--avatar-states-medium-avatar-medium-bg: var(
			--color-system-primary-variables-focus-primary-focus
		);
		--avatar-states-low-avatar-low-bg: var(--color-system-subtle-variables-action-subtle);
		--avatar-text-avatar-default-txt: var(--fonts-colors-type-dark-primary-body);
		--avatar-text-avatar-default-txt-invert: var(--fonts-colors-type-dark-primary-body);
		--avatar-radius-avatar-radiuseses-md: var(--radius-default-radius-circle);
		--avatar-radius-avatar-radiuseses-lg: var(--radius-default-radius-circle);
		--card-radius-card-radiuseses: var(--radius-default-radius-lg);
		--card-states-emphassis-card-emphasis-body-bg: var(--color-system-subtle-subtle-025);
		--card-radius-card-default-txt: var(--fonts-colors-type-light-primary);
		--card-states-subtle-card-subtle-body-bg: var(--color-system-subtle-subtle-025);
		--list-text-list-txt-list-item: var(--color-system-document-range-page-800);
		--list-text-list-txt-title: var(--fonts-colors-type-dark-primary-body);
		--list-border-list-border-default: var(--border-border-border-05);
		--list-icon-list-icon-default: var(--color-system-document-range-page-800);
		--list-space-padding-y-list-padding-y: var(--padding-padding-y-padding-y-sm-x);
		--list-space-padding-x-list-padding-x: var(--padding-padding-x-padding-sm-x);
		--list-space-padding-between-list-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
		--list-radius-list-radius: var(--radius-default-radius-sm);
		--list-focus-list-focus-width: var(--focus-focus-width);
		--list-border-list-border-width-default: var(--border-border-width-sm);
		--list-text-list-txt-list-item-content: var(--typography-icon-dark-secondary);
		--list-list-background-default: var(--color-system-subtle-subtle-000);
		--comment-radius-comment-radiuseses-lg: var(--radius-default-radius-circle);
		--comment-text-comment-username-txt: var(--fonts-colors-type-dark-tertiary-body);
		--comment-icon-comment-general-icon: var(--typography-icon-light-secondary);
		--comment-text-comment-time-txt: var(--fonts-colors-type-dark-muted);
		--comment-text-comment-comment-txt: var(--fonts-colors-type-dark-primary-body);
		--calendar-states-date-calendar-default: var(--color-system-document-range-page-white-000);
		--calendar-states-date-calendar-hover: var(--color-system-subtle-variables-action-subtle);
		--calendar-states-date-calendar-active-center: var(--color-system-subtle-subtle-025);
		--calendar-states-date-calendar-active-end: var(
			--color-system-primary-variables-focus-primary-focus-emphasis
		);
		--calendar-text-calendar-txt-date-active: var(--typography-text-dark-primary-body);
		--calendar-text-calendar-txt-month: var(--typography-text-dark-primary-body);
		--calendar-text-calendar-txt-week: var(--typography-text-dark-tertiary-body);
		--calendar-icon-calendar-icon-default: var(--color-system-document-range-page-800);
		--calendar-radius-calendar-date-radius: var(--radius-default-radius);
		--calendar-radius-calendar-radius: var(--radius-default-radius-lg);
		--calendar-focus-pagination-focus-width: var(--focus-focus-width);
		--calendar-focus-pagination-border-width: var(--radius-default-radius-sm);
		--calendar-text-calendar-txt-date-default: var(--typography-text-dark-primary-body);
		--calendar-states-date-calendar-bg: var(--color-system-subtle-subtle-000);
		--calendar-text-calendar-txt-date-inactive: var(--typography-text-dark-disabled);
		--calendar-radius-calendar-active-date-radius: var(--radius-default-radius-x-na);
		--calendar-text-calendar-txt-date-selected: var(--typography-text-light-primary-heading);
		--calendar-calendar-border-width: var(--border-border-width-rg);
		--calendar-calendar-border: var(--color-system-primary-variables-action-primary);
		--calendar-radius-calendar-current-date: var(--radius-default-radius-circle);
		--rating-states-primary-rating-active: var(--color-system-yellow-yellow-300);
		--rating-states-primary-rating-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--badge-states-success-default-badge-success-bg: var(
			--color-system-success-variables-action-success
		);
		--badge-states-success-default-badge-success-txt: var(--typography-text-dark-primary-body);
		--badge-states-success-default-badge-success-icon: var(
			--color-system-document-range-page-800
		);
		--carousel-states-date-carousel-default: var(--color-system-subtle-subtle-075);
		--carousel-states-date-carousel-active: var(--color-system-primary-primary-900);
		--carousel-text-carousel-txt-date-default: var(--typography-text-dark-primary-body);
		--carousel-text-carousel-txt-date-active: var(--typography-text-dark-primary-body);
		--carousel-icon-carousel-icon-default: var(--color-system-document-range-page-800);
		--carousel-radius-carousel-date-radius: var(--radius-default-radius);
		--carousel-radius-carousel-current-date: var(--radius-default-radius-circle);
		--carousel-radius-carousel-active-date-radius: var(--radius-default-radius-x-na);
		--carousel-radius-carousel-radius: var(--radius-default-radius-lg);
		--carousel-focus-carousel-focus-width: var(--focus-focus-width);
		--carousel-focus-carousel-border-width: var(--radius-default-radius-sm);
		--carousel-carousel-border: var(--color-system-primary-variables-action-primary);
		--carousel-carousel-border-width: var(--border-border-width-rg);
		--pagination-text-pagination-txt-active: var(--typography-text-dark-primary-body);
		--calendar-states-date-calendar-current: var(
			--color-system-primary-variables-action-primary
		);
		--calendar-text-calendar-txt-date-current: var(--typography-text-light-primary-heading);
		--table-states-primary-title-row-active: var(--color-system-subtle-subtle-075);
		--table-states-primary-title-row-hover: var(--color-system-subtle-subtle-050);
		--table-states-primary-title-row-default: var(--color-system-subtle-subtle-025);
		--table-states-primary-row-row-default: var(--color-system-subtle-subtle-000);
		--table-states-primary-row-row-hover: var(--color-system-subtle-subtle-050);
		--table-text-table-header: var(--typography-text-dark-primary-body);
		--table-text-table-txt-default: var(--typography-text-dark-primary-body);
		--table-text-table-txt-disabled: var(--typography-text-dark-disabled);
		--table-text-table-txt-invert: var(--typography-text-light-primary-heading);
		--table-icon-table-icon-default: var(--color-system-document-range-page-800);
		--table-icon-table-icon-disabled: var(--color-system-document-range-page-125);
		--table-icon-table-icon-invert: var(--typography-icon-light-primary);
		--table-radius-table-radius: var(--radius-default-radius-lg);
		--table-border-table-border: var(--border-border-border-05);
		--table-focus-table-focus-width: var(--focus-focus-width);
		--table-border-table-border-width-row: var(--border-border-width-sm);
		--table-states-primary-row-row-active: var(--color-system-subtle-subtle-075);
		--table-text-table-txt-action-btn: var(--button-states-text-btn-txt);
		--table-states-primary-table-bg: var(--color-system-subtle-subtle-000);
		--table-states-primary-table-header: var(--color-system-subtle-subtle-000);
		--table-states-primary-table-footer: var(--color-system-subtle-subtle-000);
		--button-states-medium-btn-bg: var(--color-system-primary-primary-050);
		--button-states-medium-btn-bg-hover: var(--color-system-primary-primary-075);
		--button-states-medium-btn-bg-active: var(--color-system-primary-primary-125);
		--button-states-medium-btn-bg-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--button-states-medium-btn-focus: var(--color-system-primary-primary-050);
		--button-states-medium-btn-txt: var(--fonts-colors-type-actions-default-primary);
		--button-states-medium-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
		--button-states-medium-outline-btn-outline: var(--color-system-primary-primary-200);
		--button-states-medium-outline-btn-bg: var(--color-system-primary-primary-025);
		--button-states-medium-outline-btn-outline-hover: var(--color-system-primary-primary-200);
		--button-states-medium-outline-btn-bg-hover: var(--color-system-primary-primary-050);
		--button-states-medium-outline-btn-outline-active: var(--color-system-primary-primary-200);
		--button-states-medium-outline-btn-bg-active: var(--color-system-primary-primary-050);
		--button-states-medium-outline-btn-focus: var(--color-system-primary-primary-050);
		--button-states-medium-outline-btn-txt: var(--fonts-colors-type-actions-default-primary);
		--button-states-medium-outline-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
		--button-states-high-outline-btn-outline-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--badge-states-danger-subtle-badge-danger-bg: var(--color-system-danger-danger-200);
		--badge-states-warning-subtle-badge-warning-bg: var(
			--color-system-warning-variables-focus-warning-focus-hover
		);
		--badge-states-success-subtle-badge-success-bg: var(--color-system-success-success-200);
		--badge-states-secondary-subtle-badge-secondary-bg: var(
			--color-system-secondary-variables-focus-secondary-focus-hover
		);
		--badge-states-success-subtle-badge-success-txt: var(--typography-text-colors-dark-success);
		--badge-states-success-subtle-badge-success-icon: var(
			--typography-icon-colors-dark-success
		);
		--badge-states-secondary-subtle-badge-secondary-txt: var(
			--typography-text-colors-dark-secondary
		);
		--badge-states-secondary-subtle-badge-secondary-icon: var(
			--typography-icon-colors-dark-secondary
		);
		--badge-states-danger-subtle-badge-danger-txt: var(--typography-text-colors-dark-danger);
		--badge-states-danger-subtle-badge-danger-icon: var(--typography-icon-colors-dark-danger);
		--badge-states-warning-subtle-badge-warning-txt: var(--typography-text-colors-dark-warning);
		--badge-states-warning-subtle-badge-warning-icon: var(
			--typography-text-colors-dark-warning
		);
		--badge-states-primary-subtle-badge-primary-border: var(
			--color-system-primary-variables-focus-primary-focus-active
		);
		--badge-states-secondary-subtle-badge-secondary-border: var(
			--color-system-secondary-variables-focus-secondary-focus-hover
		);
		--badge-states-success-subtle-badge-secondary-border: var(
			--color-system-success-success-300
		);
		--badge-states-warning-subtle-badge-secondary-border: var(
			--color-system-warning-variables-focus-warning-focus-active
		);
		--badge-states-danger-subtle-badge-secondary-border: var(--color-system-danger-danger-400);
		--table-text-table-txt-sub-text: var(--typography-text-dark-tertiary-body);
		--dropdown-dropdown-radius-dropdown-radius: var(--radius-default-radius);
		--dropdown-dropdown-border-dropdown-border-width: var(--border-border-width-sm);
		--dropdown-dropdown-border-dropdown-complete-stroke: var(--border-border-border-10);
		--dropdown-dropdown-border-dropdown-border: var(--border-border-border-30);
		--dropdown-dropdown-states-dropdown-bg: var(--color-system-subtle-subtle-000);
		--dropdown-dropdown-states-dropdown-default: var(
			--color-system-document-range-page-white-000
		);
		--dropdown-dropdown-states-dropdown-hover: var(--color-system-subtle-subtle-025);
		--dropdown-dropdown-states-dropdown-active: var(--color-system-subtle-subtle-050);
		--dropdown-dropdown-text-dropdown-default-txt: var(--typography-text-dark-primary-body);
		--dropdown-dropdown-text-dropdown-active-txt: var(--typography-text-dark-primary-body);
		--dropdown-dropdown-text-dropdown-disabled-txt: var(
			--color-system-disabled-variables-action-disabled-emphasis
		);
		--dropdown-dropdown-radius-dropdown-radius-active: var(--radius-nested-nested-radius);
		--tree-text-tree-txt-title: var(--fonts-colors-type-dark-primary-body);
		--tree-text-tree-txt-list-item: var(--typography-text-dark-tertiary-body);
		--tree-text-tree-txt-list-item-content: var(--fonts-colors-type-dark-muted);
		--tree-border-tree-border-default: var(--border-border-border-05);
		--tree-icon-tree-icon-active: var(--color-system-document-range-page-800);
		--tree-state-tree-background: var(--color-system-subtle-subtle-000);
		--tree-radius-branch-radius: var(--radius-default-radius);
		--tree-border-tree-border-width-default: var(--border-border-width-na);
		--tree-border-tree-border-width-active: var(--border-border-width-na);
		--tree-state-branch-default: var(--color-system-subtle-subtle-000);
		--tree-state-branch-hover: var(--color-system-subtle-subtle-025);
		--tree-state-branch-active: var(--color-system-subtle-subtle-000);
		--tree-icon-tree-icon-dropdown: var(--typography-icon-dark-secondary);
		--tree-space-padding-between-branch-padding-between-default: var(
			--padding-padding-between-padding-between-sm
		);
		--tree-space-padding-y-branch-padding-y-default: var(--padding-padding-y-padding-y);
		--process-indicator-text-process-txt-default: var(--typography-text-dark-primary-body);
		--process-indicator-icon-process-a-icon-default: var(
			--typography-icon-colors-default-secondary
		);
		--process-indicator-radius-process-a-handle-a-radius: var(--radius-default-radius);
		--process-indicator-icon-process-a-icon-background: var(--color-system-subtle-subtle-075);
		--navigation-states-background-navigation-footer-bg: var(
			--navigation-states-background-navigation-bg-light
		);
		--navigation-states-background-navigation-header-bg: var(
			--color-system-document-range-page-025
		);
		--navigation-text-navigation-txt-header: var(--typography-text-dark-primary-body);
		--navigation-text-navigation-txt-default: var(--typography-text-dark-primary-body);
		--navigation-text-navigation-txt-sub-text: var(--typography-text-dark-tertiary-body);
		--navigation-text-navigation-txt-disabled: var(--typography-text-dark-disabled);
		--navigation-text-navigation-txt-invert: var(--typography-text-light-primary-heading);
		--navigation-icon-navigation-icon-default: var(--color-system-document-range-page-800);
		--navigation-icon-navigation-icon-disabled: var(--color-system-document-range-page-125);
		--navigation-icon-navigation-icon-invert: var(--typography-icon-light-primary);
		--navigation-radius-navigation-sm: var(--radius-default-radius-lg);
		--navigation-focus-navigation-focus-width: var(--focus-focus-width);
		--navigation-focus-navigation-border-width: var(--radius-default-radius-sm);
		--navigation-states-background-navigation-subheader-bg: var(
			--navigation-states-background-navigation-bg-light
		);
		--navigation-primary-flyout-side-nav-background: var(--color-system-subtle-subtle-300);
		--navigation-primary-flyout-side-nav-default: var(--color-system-subtle-subtle-025);
		--navigation-primary-flyout-side-nav-hover: var(--color-system-subtle-subtle-050);
		--navigation-primary-flyout-side-nav-active: var(--color-system-subtle-subtle-075);
		--navigation-primary-flyout-text-side-nav-txt-title: var(
			--fonts-colors-type-dark-primary-body
		);
		--navigation-primary-flyout-text-side-nav-txt-list-item: var(
			--typography-icon-dark-secondary
		);
		--navigation-primary-flyout-border-side-nav-stroke-default: var(--border-border-border-20);
		--navigation-primary-flyout-icon-side-nav-icon-content: var(
			--color-system-document-range-page-800
		);
		--navigation-primary-flyout-icon-side-nav-icon-dropdown: var(
			--color-system-document-range-page-800
		);
		--navigation-primary-flyout-radius-side-nav-radius: var(--radius-default-radius-sm);
		--navigation-primary-flyout-border-side-nav-border-width-default: var(
			--border-border-width-rg
		);
		--navigation-primary-flyout-border-side-nav-border-width-active: var(
			--border-border-width-rg
		);
		--navigation-primary-flyout-spacing-padding-between-side-nav-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
		--navigation-primary-flyout-spacing-padding-y-side-nav-padding-y: var(
			--padding-padding-y-padding-y
		);
		--navigation-primary-flyout-icon-side-nav-icon-pho: var(--typography-icon-pho);
		--search-space-padding-y-search-padding-y: var(--padding-padding-y-padding-y);
		--search-radius-search-radiuseses: var(--radius-default-radius);
		--search-space-padding-x-search-padding-x: var(--padding-padding-x-padding-x);
		--search-text-search-default-txt: var(--fonts-colors-type-dark-muted);
		--search-state-search-bg: var(--color-system-subtle-subtle-025);
		--search-space-padding-between-search-padding-between: var(
			--padding-padding-between-padding-between
		);
		--search-border-search-border: var(--form-border-form-border-default);
		--search-border-search-border-width: var(--border-border-width-sm);
		--search-text-search-inactive-txt: var(--fonts-colors-type-dark-muted);
		--tabs-border-tab-border-default-hover: var(--border-border-border-20);
		--pagination-states-primary-pagination-b-default-hover: var(
			--color-system-subtle-subtle-050
		);
		--pagination-states-primary-pagination-b-default: var(--color-system-subtle-subtle-000);
		--pagination-states-primary-pagination-b-active-hover: var(
			--color-system-subtle-subtle-100
		);
		--list-list-background-hover: var(--color-system-subtle-subtle-025);
		--tabs-states-tab-bg-default: var(--color-system-subtle-subtle-000);
		--tabs-states-tab-bg-active: var(--color-system-subtle-subtle-000);
		--tabs-states-tab-bg-default-hover: var(--color-system-subtle-subtle-025);
		--tabs-states-tab-bg-active-hover: var(--color-system-subtle-subtle-025);
		--table-states-primary-title-cell-active: var(--color-system-subtle-subtle-075);
		--table-states-primary-row-cell-active: var(--color-system-subtle-subtle-025);
		--document-component-frame-state-supporting-weight: var(--border-border-w-02);
		--document-component-frame-state-supporting-border: var(--document-branded-c);
		--badge-states-subtle-default-badge-subtle-bg: var(--color-system-subtle-subtle-300);
		--badge-states-subtle-default-badge-subtle-txt: var(
			--typography-text-light-primary-heading
		);
		--badge-states-subtle-default-badge-subtle-icon: var(--typography-icon-light-primary);
		--badge-states-subtle-subtle-badge-subtle-bg: var(--color-system-subtle-subtle-075);
		--badge-states-subtle-subtle-badge-subtle-border: var(--color-system-subtle-subtle-500);
		--badge-states-subtle-subtle-badge-subtle-txt: var(--typography-text-dark-primary-body);
		--badge-states-subtle-subtle-badge-subtle-icon: var(--color-system-document-range-page-800);
		--navigation-schematic-toolbar-toolbar-space-padding-y-toolbar-padding-y: var(
			--padding-padding-y-padding-y
		);
		--navigation-schematic-toolbar-tool-radius-tool-radius: var(--radius-default-radius);
		--navigation-schematic-toolbar-toolbar-space-padding-x-toolbar-padding-x: var(
			--padding-padding-x-padding-x
		);
		--navigation-schematic-toolbar-tool-text-tool-default-txt: var(
			--fonts-colors-type-dark-primary-body
		);
		--navigation-schematic-toolbar-toolbar-space-padding-between-toolbar-padding-between: var(
			--padding-padding-between-padding-between
		);
		--navigation-schematic-toolbar-tool-icon-tool-icon-primary: var(
			--color-system-document-range-page-800
		);
		--navigation-schematic-toolbar-tool-icon-tool-icon-invert: var(
			--typography-icon-light-primary
		);
		--navigation-schematic-toolbar-tool-states-light-tool-bg: var(
			--color-system-subtle-subtle-000
		);
		--navigation-schematic-toolbar-tool-states-light-tool-bg-hvr: var(
			--color-system-subtle-subtle-050
		);
		--navigation-schematic-toolbar-tool-states-light-tool-bg-active: var(
			--color-system-subtle-subtle-075
		);
		--navigation-schematic-toolbar-tool-states-light-tool-bg-selected: var(
			--color-system-primary-variables-action-primary
		);
		--canvas-radius-canvas-radiuseses: var(--radius-default-radius-x-na);
		--canvas-states-emphassis-canvas-body-bg: var(--color-system-subtle-subtle-025);
		--canvas-states-subtle-card-subtle-body-bg: var(--color-system-subtle-subtle-025);
		--canvas-text-card-default-txt: var(--fonts-colors-type-light-primary);
		--canvas-border-canvas-border-width-complete: var(--border-border-width-sm);
		--canvas-border-canvas-complete-border: var(--color-system-subtle-subtle-075);
		--canvas-border-canvas-border: var(--color-system-subtle-subtle-050);
		--canvas-border-canvas-border-width: 0.5px;
		--canvas-states-dots-canvas-complete-border: var(--color-system-subtle-subtle-125);
		--badge-states-bold-default-badge-bold-bg: var(--color-system-subtle-subtle-700);
		--badge-states-bold-default-badge-bold-txt: var(--typography-text-light-primary-heading);
		--badge-states-bold-default-badge-bold-icon: var(--typography-icon-light-primary);
		--badge-states-bold-subtle-badge-bold-bg: var(--color-system-subtle-subtle-400);
		--badge-states-bold-subtle-badge-bold-border: var(--color-system-subtle-subtle-400);
		--badge-states-bold-subtle-badge-bold-txt: var(--typography-text-light-primary-heading);
		--badge-states-bold-subtle-badge-bold-icon: var(--typography-icon-light-primary);
		--selections-states-background-selection-border: var(--border-border-border-05);
		--typography-text-colors-dark-primary: var(--fonts-colors-type-actions-dark-primary);
		--typography-text-colors-dark-secondary: var(--fonts-colors-type-actions-dark-secondary);
		--typography-text-colors-dark-info: var(--fonts-colors-type-actions-dark-info);
		--typography-text-colors-dark-success: var(--fonts-colors-type-actions-dark-success);
		--typography-text-colors-dark-warning: var(--fonts-colors-type-actions-dark-warning);
		--typography-text-colors-dark-danger: var(--fonts-colors-type-actions-dark-danger);
		--typography-icon-colors-dark-primary: var(--fonts-colors-type-actions-dark-primary);
		--typography-icon-colors-dark-secondary: var(--fonts-colors-type-actions-dark-secondary);
		--typography-icon-colors-dark-info: var(--fonts-colors-type-actions-dark-info);
		--typography-icon-colors-dark-success: var(--fonts-colors-type-actions-dark-success);
		--typography-icon-colors-dark-warning: var(--fonts-colors-type-actions-dark-warning);
		--typography-icon-colors-dark-danger: var(--fonts-colors-type-actions-dark-danger);
		--typography-text-colors-light-primary: var(--fonts-colors-type-actions-light-primary);
		--typography-text-colors-light-secondary: var(--fonts-colors-type-actions-light-secondary);
		--typography-text-colors-light-info: var(--fonts-colors-type-actions-light-info);
		--typography-text-colors-light-success: var(--fonts-colors-type-actions-light-success);
		--typography-text-colors-light-warning: var(--fonts-colors-type-actions-light-warning);
		--typography-text-colors-light-danger: var(--fonts-colors-type-actions-light-danger);
		--typography-icon-colors-light-primary: var(--fonts-colors-type-actions-light-primary);
		--typography-icon-colors-light-secondary: var(--fonts-colors-type-actions-light-secondary);
		--typography-icon-colors-light-info: var(--fonts-colors-type-actions-light-info);
		--typography-icon-colors-light-success: var(--fonts-colors-type-actions-light-success);
		--typography-icon-colors-light-warning: var(--fonts-colors-type-actions-light-warning);
		--typography-icon-colors-light-danger: var(--fonts-colors-type-actions-light-danger);
		--accordion-text-accordion-txt-title: var(--fonts-colors-type-dark-primary-body);
		--accordion-text-accordion-txt-list-item: var(--color-system-document-range-page-800);
		--accordion-text-accordion-txt-list-item-content: var(--typography-icon-dark-secondary);
		--accordion-stroke-accordion-border-default: var(--border-border-border-20);
		--accordion-icon-accordion-icon-default: var(--color-system-document-range-page-800);
		--accordion-space-padding-y-accordion-padding-y: var(--padding-padding-y-padding-y-sm-x);
		--accordion-accordion-background-default: var(--color-system-subtle-subtle-000);
		--accordion-accordion-background-hover: var(--color-system-subtle-subtle-025);
		--accordion-space-padding-x-accordion-padding-x: var(--padding-padding-x-padding-sm-x);
		--accordion-space-padding-between-accordion-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
		--accordion-radius-accordion-radius: var(--radius-default-radius-sm);
		--accordion-focus-accordion-focus-width: var(--focus-focus-width);
		--accordion-border-width-accordion-border-width-default: var(--border-border-width-rg);
		--accordion-border-width-accordion-border-width-active: var(--border-border-width-rg);
		--tooltip-text-tooltip-default-txt-light: var(--fonts-colors-type-light-primary);
		--button-radius-btn-radius-x-sm: var(--radius-default-radius-sm);
		--button-states-medium-outline-btn-outline-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--button-states-low-outline-btn-outline-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--button-states-danger-outline-btn-outline-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--tags-border-tag-border: var(--color-system-subtle-subtle-400);
		--carousel-border-carousel-border-width: var(--border-border-width-rg);
		--checkbox-text-checkbox-txt-default: var(--typography-text-dark-primary-body);
		--checkbox-text-checkbox-txt-light: var(--typography-text-dark-primary-body);
		--pagination-border-pagination-border-width-default: var(--border-border-width-rg);
		--pagination-border-pagination-border-width-active: var(--border-border-width-rg);
		--pagination-border-pagination-border-default: var(--border-border-border-20);
		--process-indicator-border-border-width-default: var(--border-border-width-rg);
		--process-indicator-border-border-default: var(--border-border-border-20);
		--radio-text-radio-txt: var(--typography-text-dark-primary-body);
		--search-icon-search-icon-default: var(--color-system-document-range-page-800);
		--search-icon-search-icon-invert: var(--typography-icon-light-primary);
		--document-frame-title-frame-title: var(--fonts-colors-type-dark-primary-heading);
		--document-frame-footer-footer-txt: var(--fonts-colors-type-dark-tertiary-body);
		--document-frame-content-example-txt: var(--typography-text-dark-tertiary-body);
		--document-frame-content-example-txt-header: var(--fonts-colors-type-dark-primary-body);
		--document-frame-title-frame-paragraph: var(--fonts-colors-type-dark-secondary-body);
		--document-document-components: #b644b4;
		--document-frame-title-breadcrumb-bg: var(--color-system-document-range-page-white-000);
		--document-frame-title-title-bg: var(--color-system-document-range-half-values-page-25);
		--process-indicator-text-process-txt-content: var(--typography-text-dark-tertiary-body);
		--alert-text-dark-alert-txt-title-default: var(--fonts-colors-type-dark-primary-heading);
		--alert-text-dark-alert-txt-title-invert: var(--fonts-colors-type-light-primary);
		--alert-icon-alert-general-icon-invert: var(--typography-icon-light-primary);
		--generic-states-divider-generic-border: var(--border-border-border-10);
		--card-radius-card-title-txt: var(--fonts-colors-type-dark-primary-body);
		--card-text-card-txt-title: var(--fonts-colors-type-dark-primary-body);
		--card-text-card-txt-list-item: var(--color-system-document-range-page-800);
		--card-text-card-txt-list-item-content: var(--typography-icon-dark-secondary);
		--card-icon-card-icon-default: var(--color-system-document-range-page-800);
		--card-border-card-border-width-default: var(--border-border-width-sm);
		--card-border-card-divider-default: var(--border-border-border-10);
		--card-border-card-border-default: var(--border-border-border-10);
		--card-border-card-divider-width: var(--border-border-width-sm);
		--tree-border-tree-border-active: var(--border-border-border-05);
		--form-icon-default-form-icon-disabled: var(--color-system-document-range-page-125);
		--form-border-form-border-hover: var(--border-border-border-20);
		--form-border-form-border-active: var(--border-colors-dark-secondary);
		--button-radius-sub-btn-radius: var(--radius-default-radius-circle);
		--navigation-schematic-toolbar-tool-states-light-tool-bg-selected-hvr: var(
			--color-system-primary-variables-action-primary-hover
		);
		--search-border-search-border-hover: var(--form-border-form-border-hover);
		--navigation-primary-acitivty-radius-notification-radiuseses: var(
			--radius-default-radius-lg
		);
		--navigation-primary-acitivty-border-notification-divider-default: var(
			--border-border-border-05
		);
		--navigation-primary-acitivty-border-notification-divider-width: var(
			--border-border-width-sm
		);
		--navigation-primary-acitivty-text-notification-txt-title: var(
			--fonts-colors-type-dark-primary-body
		);
		--navigation-primary-acitivty-text-notification-txt-content: var(
			--typography-text-dark-tertiary-body
		);
		--navigation-primary-acitivty-icon-notification-icon-default: var(
			--color-system-document-range-page-800
		);
		--navigation-primary-acitivty-radius-notification-default-txt: var(
			--fonts-colors-type-dark-primary-body
		);
		--navigation-primary-acitivty-radius-notification-title-txt: var(
			--fonts-colors-type-dark-primary-heading
		);
		--navigation-primary-acitivty-states-emphassis-notification-default-bg: var(
			--color-system-subtle-subtle-025
		);
		--navigation-primary-acitivty-radius-notification-sub: var(
			--fonts-colors-type-dark-tertiary-body
		);
		--navigation-primary-acitivty-icon-notification-content-icon: var(
			--typography-icon-dark-secondary
		);
		--navigation-primary-acitivty-states-emphassis-notification-new-bg: var(
			--color-system-secondary-secondary-025
		);
		--navigation-primary-acitivty-icon-notification-new-icon: var(
			--typography-icon-colors-default-info
		);
		--generic-states-divider-pho: var(--document-branded-a);
		--typography-icon-colors-default-primary: var(--fonts-colors-type-actions-default-primary);
		--typography-icon-colors-default-secondary: var(
			--fonts-colors-type-actions-default-secondary
		);
		--typography-icon-colors-default-info: var(--fonts-colors-type-actions-default-info);
		--typography-icon-colors-default-success: var(--fonts-colors-type-actions-default-success);
		--typography-icon-colors-default-warning: var(--fonts-colors-type-actions-default-warning);
		--typography-icon-colors-default-danger: var(--fonts-colors-type-actions-default-danger);
		--typography-text-colors-default-primary: var(--fonts-colors-type-actions-default-primary);
		--typography-text-colors-default-secondary: var(
			--fonts-colors-type-actions-default-secondary
		);
		--typography-text-colors-default-info: var(--fonts-colors-type-actions-default-info);
		--typography-text-colors-default-success: var(--fonts-colors-type-actions-default-success);
		--typography-text-colors-default-warning: var(--fonts-colors-type-actions-default-warning);
		--typography-text-colors-default-danger: var(--fonts-colors-type-actions-default-danger);
		--navigation-primary-acitivty-icon-notification-new-icon-error: var(
			--typography-icon-colors-default-danger
		);
		--navigation-primary-acitivty-states-emphassis-notification-new-bg-error: var(
			--color-system-danger-danger-050
		);
		--table-space-cells-padding-y-table-padding-y: var(--padding-padding-y-padding-y-sm);
		--table-space-cells-padding-x-table-padding-x: var(--padding-padding-x-padding-x);
		--table-space-cells-padding-between-table-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
		--table-border-table-border-width-cell: var(--border-border-width-sm);
		--navigation-schematic-toolbar-toolbar-radius-tool-radius: var(--radius-default-radius);
		--navigation-schematic-toolbar-toolbar-radius-toolbar-radius: var(--radius-default-radius);
		--navigation-schematic-toolbar-toolbar-states-primary-toolbar-bg: var(
			--color-system-subtle-subtle-000
		);
		--navigation-schematic-toolbar-tool-divider-tool-divider: var(--border-border-border-05);
		--navigation-schematic-toolbar-toolbar-icon-toolbar-icon-primary: var(
			--color-system-document-range-page-800
		);
		--navigation-schematic-toolbar-toolbar-icon-toolbar-icon-invert: var(
			--typography-icon-light-primary
		);
		--navigation-schematic-toolbar-toolbar-border-tree-border-default: var(
			--border-border-border-05
		);
		--navigation-schematic-toolbar-toolbar-border-tree-border-active: var(
			--border-border-border-05
		);
		--navigation-schematic-toolbar-toolbar-border-tree-border-width-default: var(
			--border-border-width-na
		);
		--navigation-schematic-toolbar-toolbar-border-tree-border-width-active: var(
			--border-border-width-na
		);
		--navigation-schematic-toolbar-tool-divider-tool-divider-width: var(
			--border-border-width-x-sm
		);
		--navigation-schematic-toolbar-tool-border-tool-border: var(--border-border-border-05);
		--navigation-schematic-toolbar-tool-border-tool-border-width: var(
			--radius-default-radius-x-na
		);
		--navigation-schematic-toolbar-tool-space-padding-y-tool-padding-y: var(
			--padding-padding-y-padding-y-sm
		);
		--navigation-schematic-toolbar-tool-space-padding-x-tool-padding-x: var(
			--padding-padding-x-padding-sm
		);
		--navigation-schematic-toolbar-tool-space-padding-between-tool-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
		--button-icon-btn-icon-default: var(--color-system-document-range-page-800);
		--navigation-primary-flyout-spacing-padding-x-side-nav-padding-x: var(
			--padding-padding-x-padding-x
		);
		--tooltip-divider-tooltip-divider: var(--border-border-border-05);
		--tooltip-divider-tooltip-divider-width: var(--border-border-width-sm);
		--tooltip-divider-tooltip-divider-invert: var(--border-border-border-flag);
		--tooltip-icon-tooltip-icon-primary: var(--color-system-document-range-page-800);
		--tooltip-icon-tooltip-icon-invert: var(--typography-icon-light-primary);
		--tooltip-states-light-tooltip-action-light-default: var(--color-system-subtle-subtle-000);
		--tooltip-states-light-tooltip-action-light-hover: var(--color-system-subtle-subtle-025);
		--tooltip-states-dark-tooltip-action-dark-default: var(--color-system-subtle-subtle-700);
		--tooltip-states-dark-tooltip-action-dark-hover: var(--color-system-subtle-subtle-800);
		--tooltip-radius-tooltip-action-radius: var(--radius-nested-nested-radius);
		--navigation-schematic-layer-panel-color-primary-layerpanel-bg: var(
			--color-system-subtle-subtle-000
		);
		--navigation-schematic-layer-panel-text-layerpanel-txt-default: var(
			--typography-text-dark-primary-body
		);
		--navigation-schematic-layer-panel-icon-layerpanel-icon-default: var(
			--color-system-document-range-page-800
		);
		--navigation-schematic-layer-panel-icon-layerpanel-icon-disabled: var(
			--color-system-document-range-page-125
		);
		--navigation-schematic-layer-panel-icon-layerpanel-icon-invert: var(
			--typography-icon-light-primary
		);
		--navigation-schematic-layer-panel-radius-layerpanel-radius: var(--radius-default-radius);
		--navigation-schematic-layer-panel-focus-layerpanel-focus-width: var(--focus-focus-width);
		--navigation-schematic-layer-panel-border-layerpanel-border-width: var(
			--radius-default-radius-sm
		);
		--navigation-schematic-layer-panel-spacing-padding-between-side-nav-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
		--navigation-schematic-layer-panel-spacing-padding-y-side-nav-padding-y: var(
			--padding-padding-y-padding-y
		);
		--navigation-schematic-layer-panel-border-layerpanel-border-default: var(
			--border-border-border-05
		);
		--navigation-schematic-layer-panel-spacing-padding-x-side-nav-padding-x: var(
			--padding-padding-x-padding-x
		);
		--tree-space-padding-y-branch-padding-y-small: var(--padding-padding-y-padding-y-sm);
		--tree-space-padding-between-branch-padding-between-small: var(
			--padding-padding-between-padding-between-sm
		);
		--tree-radius-branch-radius-small: var(--radius-default-radius-sm);
		--navigation-schematic-layer-panel-divider-layerpanel-divider-default: var(
			--border-border-border-05
		);
		--navigation-schematic-layer-panel-divider-layerpanel-border-width: var(
			--radius-default-radius-sm
		);
		--navigation-schematic-toolbar-toolbar-radius-toolbar-rounded: var(
			--radius-default-radius-circle
		);
		--navigation-schematic-toolbar-toolbar-radius-toolbar-radius-na: var(
			--radius-default-radius-x-na
		);
		--navigation-primary-side-navigation-menu-item-default: var(
			--color-system-subtle-subtle-000
		);
		--navigation-primary-side-navigation-menu-item-hover: var(--color-system-subtle-subtle-025);
		--navigation-primary-side-navigation-menu-item-active: var(
			--color-system-subtle-subtle-900
		);
		--navigation-primary-side-navigation-spacing-padding-between-menu-item-between-icon: var(
			--padding-padding-between-padding-between
		);
		--navigation-primary-side-navigation-spacing-padding-y-menu-item-padding-y: var(
			--padding-padding-y-padding-y
		);
		--navigation-primary-side-navigation-radius-menu-item-radius: var(
			--radius-default-radius-sm
		);
		--navigation-primary-side-navigation-border-menu-item-stroke-default: var(
			--border-border-border-20
		);
		--navigation-primary-side-navigation-text-menu-item-txt: var(
			--fonts-colors-type-dark-primary-body
		);
		--navigation-primary-side-navigation-icon-menu-item: var(
			--color-system-document-range-page-800
		);
		--navigation-primary-side-navigation-icon-menu-item-icon-pho: var(--typography-icon-pho);
		--navigation-primary-side-navigation-border-menu-item-border-width-default: var(
			--border-border-width-rg
		);
		--navigation-primary-side-navigation-border-menu-item-border-width-active: var(
			--border-border-width-rg
		);
		--navigation-primary-side-navigation-spacing-padding-x-menu-item-padding-x: var(
			--padding-padding-x-padding-x
		);
		--navigation-primary-side-navigation-spacing-padding-between-menu-item-between-drop: var(
			--padding-padding-between-padding-between-sm
		);
		--button-states-icon-button-low-btn-bg: var(--color-system-subtle-subtle-0000);
		--button-states-icon-button-low-btn-bg-hover: var(--color-system-subtle-subtle-1000);
		--button-states-icon-button-low-btn-bg-active: var(--color-system-subtle-subtle-1050);
		--button-states-icon-button-low-btn-bg-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--button-states-icon-button-low-btn-focus: var(--color-system-subtle-subtle-075);
		--button-states-icon-button-low-outline-btn-outline: var(--color-system-subtle-subtle-100);
		--button-states-icon-button-low-outline-btn-bg: var(--color-system-subtle-subtle-0000);
		--button-states-icon-button-low-outline-btn-outline-hover: var(
			--color-system-subtle-subtle-200
		);
		--button-states-icon-button-low-outline-btn-bg-hover: var(--color-system-subtle-subtle-025);
		--button-states-icon-button-low-outline-btn-outline-active: var(
			--color-system-subtle-subtle-200
		);
		--button-states-icon-button-low-outline-btn-bg-active: var(
			--color-system-subtle-subtle-075
		);
		--button-states-icon-button-low-outline-btn-outline-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--button-states-icon-button-low-outline-btn-focus: var(--color-system-subtle-subtle-050);
		--button-states-icon-button-icon-btn-icon-pho: var(--typography-icon-pho);
		--button-states-icon-button-icon-btn-icon-default: var(
			--color-system-document-range-page-800
		);
		--button-states-icon-button-icon-btn-icon-invert: var(--typography-icon-light-primary);
		--navigation-states-background-navigation-bg-light: var(--color-system-subtle-subtle-0000);
		--navigation-states-background-navigation-flyout-bg: var(
			--navigation-states-background-navigation-bg-light
		);
		--navigation-states-background-navigation-dropdown-bg: var(
			--navigation-states-background-navigation-bg-light
		);
		--navigation-border-navigation-border-default: var(--border-border-border-05);
		--navigation-border-navigation-border-width: var(--radius-default-radius-sm);
		--navigation-states-background-navigation-toolbar-bg: var(
			--navigation-states-background-navigation-bg-dark
		);
		--navigation-radius-navigation-radius: var(--radius-default-radius-lg);
		--navigation-radius-navigation-radius-lg: var(--radius-default-radius-lg);
		--alert-general-default-bg: var(--color-system-subtle-subtle-000);
		--button-icon-btn-icon-pop: var(--typography-icon-colors-default-primary);
		--button-states-icon-button-icon-btn-icon-pop: var(
			--typography-icon-colors-default-primary
		);
		--navigation-states-background-navigation-bg-dark: var(--color-system-subtle-subtle-800);
		--navigation-schematic-toolbar-tool-states-dark-tool-bg: var(
			--color-system-subtle-subtle-900
		);
		--navigation-schematic-toolbar-tool-states-dark-tool-bg-hvr: var(
			--color-system-subtle-subtle-975
		);
		--navigation-schematic-toolbar-tool-states-dark-tool-bg-active: var(
			--color-system-subtle-subtle-975
		);
		--navigation-schematic-toolbar-tool-states-dark-tool-bg-selected: var(
			--color-system-primary-variables-action-primary
		);
		--navigation-schematic-toolbar-tool-states-dark-tool-bg-selected-hvr: var(
			--color-system-primary-variables-action-primary-hover
		);
		--card-icon-card-icon-invert: var(--typography-icon-light-primary);
		--card-icon-card-icon-pop: var(--typography-icon-colors-default-primary);
		--card-icon-card-icon-bg: var(--color-system-subtle-subtle-000);
		--card-text-card-txt-subtle: var(--typography-icon-dark-secondary);
		--card-icon-card-sub-icon: var(--typography-icon-dark-secondary);
		--card-icon-card-icon-bg-active: var(
			--color-system-primary-variables-focus-primary-focus-active
		);
		--badge-states-background-na-default-badge-na-bg: var(--color-system-subtle-subtle-0000);
		--badge-states-background-na-default-badge-na-txt: var(--typography-text-dark-primary-body);
		--badge-states-background-na-default-badge-na-icon: var(
			--color-system-document-range-page-800
		);
		--badge-states-background-na-subtle-badge-na-bg: var(--color-system-subtle-subtle-025);
		--badge-states-background-na-subtle-badge-na-border: var(--color-system-subtle-subtle-200);
		--badge-states-background-na-subtle-badge-na-txt: var(--typography-text-dark-primary-body);
		--badge-states-background-na-subtle-badge-na-icon: var(
			--color-system-document-range-page-800
		);
		--navigation-primary-side-navigation-text-menu-item-txt-invert: var(
			--fonts-colors-type-light-primary
		);
		--navigation-primary-side-navigation-icon-menu-item-invert: var(
			--color-system-document-range-page-800
		);
		--navigation-schematic-toolbar-tool-states-light-tool-bg-selected-active: var(
			--color-system-primary-variables-action-primary-active
		);
		--tree-icon-tree-icon-inactive: var(--typography-icon-dark-tertiary);
		--typography-icon-dark-tertiary: var(--fonts-colors-type-dark-subtle);
	}

	.dark {
		color-scheme: dark;

		--svg-icon-filter: invert(1);
		--sidebar-svg-icon-filter: invert(1);
		--header-primary-color: var(--color-system-dark-gray-blue);
		--header-secondary-color: var(--color-system-red-orange);
		--sidebar-bg-color: var(--color-system-dark-gray-blue);
		--sidebar-text-color: var(--color-system-gray-white);
		--content-bg-color: var(--color-system-dark-gray-blue);
		--shadow-comp-header-border: ;
		--breadcrumb-icon-breadcrumb-icon-active: #f3f5f8;
		--typography-text-dark-sub-content-metric: var(--color-system-document-range-page-025);
		--document-component-frame-comp-bg: var(--color-system-document-range-page-900);
		--breadcrumb-text-breadcrumb-txt-active: var(--color-system-document-range-page-100);
		--breadcrumb-text-breadcrumb-txt-inactive: var(--color-system-gray-gray-400);
		--breadcrumb-icon-breadcrumb-icon-inactive: var(--color-system-document-range-page-500);
		--typography-text-dark-primary-heading: var(--color-system-gray-white);
		--card-color: var(--color-system-gray-gray-900);
		--card-color-hover: var(--color-system-gray-gray-700);
		--card-color-text-color: #f3f5f8;
		--card-color-border-color: var(--color-system-gray-gray-300);
		--input-box-color-border-color: var(--color-system-gray-gray-500);
		--primary-text-color: var(--color-system-gray-white);
		--secondary-text-color: var(--color-system-gray-gray-300);
		--tertiary-text-color: var(--color-system-blue-blue-100);
		--task-tag-color: var(--color-system-blue-half-values-blue-200-40);
		--typography-text-dark-primary-body: var(--color-system-document-range-page-000);
		--button-custom-primary-color-bg: var(--color-system-blue-blue-800);
		--button-custom-secondary-color-bg: var(--color-system-document-range-page-black);
		--button-custom-default-color-text: var(--color-system-gray-white-000);
		--button-custom-secondary-color-text: var(--color-system-gray-white-000);
		--button-custom-secondary-color-outline: var(--color-system-document-range-page-700);
		--button-custom-tertiary-color-outline-focus: var(--color-system-orange-orange-900);
		--button-custom-primary-color-bg-hover: var(--color-system-blue-blue-600);
		--button-custom-secondary-color-bg-hover: var(--color-system-document-range-page-700);
		--upgrade-button-color-bg: var(--color-system-gray-white-000);
		--dashboard-header-color-bg: var(--color-system-gray-gray-800);
		--dialog-modal-color-bg: var(--color-system-document-range-half-values-page-black-075);
		--dialog-form-modal-title-color-bg: var(--color-system-document-range-page-black);
		--dialog-form-modal-title-color-text: var(--color-system-document-range-page-white-000);
		--filter-bg: var(--color-system-cool-gray);
		--filter-text-color: var(--color-system-gray-gray-50);
		--filter-frame-bg-color: var(--color-system-gray-gray-600);
		--filter-hover: var(--color-system-blue-gray);
		--filter-checkbox-bg: var(--color-system-gray-white);
		--filter-checkbox-icon: invert(0%) brightness(35%) contrast(120%);
		--status-indicator-color-bg: var(--color-system-document-range-page-white-20);
		--priority-indicator-color-bg: var(--color-system-violet-violet-200-50);
		--document-status-indicator-color-bg-active: var(--color-system-green-500-half-value-50);
		--document-status-indicator-color-bg-archive: var(--color-system-yellow-500-half-value-50);
		--border-color: var(--color-system-gray-gray-800);
		--dropdown-hover-bg-color: var(--color-system-gray-gray-600);

		/* end of used css */
		--document-component-frame-state-primary-border: var(--document-branded-a);
		--document-component-frame-state-primary-weight: var(--border-border-w-05);
		--button-radius-btn-radius: var(--radius-default-radius);
		--button-radius-btn-radius-sm: var(--radius-default-radius);
		--button-radius-btn-radius-lg: var(--radius-default-radius);
		--document-frame-space-spacing-x: var(--padding-padding-x-padding-x-lg);
		--document-frame-space-spacing-y: var(--padding-padding-y-padding-y-lg);
		--document-frame-space-spacing-between: var(--padding-padding-between-padding-between-xxl);
		--document-component-frame-comp-radius: var(--radius-r-018);
		--document-frame-space-page-design: var(--padding-padding-x-padding-x-lg);
		--alert-radius-alert-radiuseses: var(--radius-default-radius);
		--alert-space-padding-y-alert-padding-y: var(--padding-padding-y-padding-y-sm);
		--alert-space-padding-x-alert-padding-x: var(--padding-padding-x-padding-x);
		--alert-states-success-subtle-success-s-bg: var(--color-system-success-success-900);
		--alert-states-success-emphasis-alert-success-border: var(
			--color-system-success-success-400-p
		);
		--alert-states-success-subtle-alert-success-icon: var(
			--typography-icon-colors-dark-success
		);
		--alert-states-info-subtle-alert-info-s-bg: var(--color-system-info-info-900);
		--alert-states-info-emphasis-alert-info-border: var(--color-system-info-info-500-p);
		--alert-states-info-subtle-alert-info-icon: var(--typography-icon-colors-dark-info);
		--alert-states-warning-subtle-alert-warning-s-bg: var(--color-system-warning-warning-900);
		--alert-states-warning-emphasis-alert-warning-border: var(
			--color-system-warning-warning-800
		);
		--alert-states-warning-subtle-alert-warning-icon: var(
			--typography-icon-colors-dark-warning
		);
		--alert-states-danger-subtle-alert-danger-s-bg: var(--color-system-danger-danger-900);
		--alert-states-danger-emphasis-alert-danger-border: var(--color-system-danger-danger-500);
		--alert-states-danger-subtle-alert-danger-icon: var(--typography-icon-colors-dark-danger);
		--typography-text-dark-secondary-heading: #cecfd4;

		/* 	--typography-text-dark-primary-body: #f3f5f8; */
		--typography-text-dark-secondary-body: #a7a8ad;
		--typography-text-dark-tertiary-body: #87878d;
		--typography-text-dark-disabled: #47474f;
		--alert-space-padding-between-alert-padding-between: var(
			--padding-padding-between-padding-between
		);
		--document-component-title-title-border: var(--border-border-width-rg);
		--document-component-title-title-space-between: var(
			--padding-padding-between-padding-between
		);
		--document-component-title-header: var(--fonts-colors-type-dark-primary-heading);
		--document-component-title-title-border-color: var(--border-border-border-10);
		--document-component-title-title-space-y: var(--padding-padding-y-padding-y-lg);
		--typography-icon-dark-secondary: var(--fonts-colors-type-dark-muted);

		/* --typography-icon-dark-disabled: var(--color-system-document-range-page-125); */
		--typography-text-light-primary-heading: var(--fonts-colors-type-light-primary);
		--typography-text-light-secondary-heading: var(--fonts-colors-type-light-secondary);
		--typography-text-light-disabled: var(--fonts-colors-type-light-muted);
		--typography-icon-light-primary: var(--fonts-colors-type-light-primary);
		--typography-icon-light-secondary: var(--fonts-colors-type-light-secondary);
		--typography-icon-light-disabled: var(--fonts-colors-type-light-muted);
		--button-states-high-btn-bg: var(--color-system-primary-primary-700);
		--button-states-high-btn-bg-hover: var(--color-system-primary-primary-600);
		--button-states-high-btn-bg-active: var(--color-system-primary-primary-800);
		--button-states-high-btn-bg-disabled: var(--color-system-disabled-disabled-700);
		--button-states-high-btn-focus: var(--color-system-primary-variables-focus-primary-focus);
		--button-states-high-btn-txt: var(--color-system-gray-white);
		--button-states-high-btn-txt-disabled: #87878d;
		--button-focus-btn-focus-width: var(--focus-focus-width);
		--button-states-low-btn-bg: var(--color-system-document-range-page-800);
		--button-states-low-btn-bg-hover: var(--color-system-document-range-page-700);
		--button-states-low-btn-bg-active: var(--color-system-document-range-page-600);
		--button-states-low-btn-bg-disabled: var(--color-system-disabled-disabled-700);
		--button-states-low-btn-focus: var(--color-system-subtle-subtle-050);
		--button-states-low-btn-txt: #f3f5f8;
		--button-states-low-btn-txt-disabled: #87878d;
		--button-states-danger-btn-bg: var(--color-system-danger-danger-700);
		--button-states-danger-btn-bg-hover: var(--color-system-danger-danger-600);
		--button-states-danger-btn-bg-active: var(--color-system-danger-danger-800-p);
		--button-states-danger-btn-bg-disabled: var(--color-system-disabled-disabled-700);
		--button-states-danger-btn-focus: var(
			--color-system-danger-variables-focus-danger-focus-active
		);
		--button-states-danger-btn-txt: var(--color-system-gray-white);
		--button-states-danger-btn-txt-disabled: #87878d;
		--document-frame-frame-bg: var(--color-system-document-range-page-900);
		--document-frame-content-example-bg: var(--color-system-document-range-page-800);
		--document-frame-frame-radius: var(--radius-r-028);
		--alert-border-alert-border-width: var(--border-border-width-na);
		--button-states-high-outline-btn-outline: var(--color-system-primary-primary-500);
		--button-states-high-outline-btn-outline-hover: var(--color-system-primary-primary-500);
		--button-states-high-outline-btn-outline-active: var(--color-system-primary-primary-500);
		--button-states-high-outline-btn-focus: var(--color-system-primary-primary-075);
		--button-states-high-outline-btn-txt: var(--fonts-colors-type-light-primary);
		--button-states-high-outline-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
		--button-icon-btn-icon-pho: var(--typography-icon-pho);
		--typography-icon-pho: var(--generic-states-divider-pho);
		--button-icon-btn-icon-invert: var(--typography-icon-light-primary);
		--button-states-high-outline-btn-bg: transparent;
		--button-states-high-outline-btn-bg-hover: var(--color-system-primary-primary-900);
		--button-states-high-outline-btn-bg-active: var(--color-system-primary-primary-800);
		--button-border-btn-border-width: var(--border-border-width-rg);
		--button-states-low-outline-btn-outline: var(--color-system-subtle-subtle-300);
		--button-states-low-outline-btn-bg: transparent;
		--button-states-low-outline-btn-outline-hover: var(--color-system-subtle-subtle-200);
		--button-states-low-outline-btn-bg-hover: var(--color-system-subtle-subtle-800);
		--button-states-low-outline-btn-outline-active: var(--color-system-subtle-subtle-200);
		--button-states-low-outline-btn-bg-active: var(--color-system-subtle-subtle-700);
		--button-states-low-outline-btn-focus: var(--color-system-subtle-subtle-050);
		--button-states-low-outline-btn-txt: var(--fonts-colors-type-dark-primary-body);
		--button-states-low-outline-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
		--button-states-danger-outline-btn-outline: var(
			--color-system-danger-variables-action-danger
		);
		--button-states-danger-outline-btn-bg: transparent;
		--button-states-danger-outline-btn-outline-hover: var(
			--color-system-danger-variables-action-danger-hover
		);
		--button-states-danger-outline-btn-bg-hover: var(--color-system-danger-danger-900);
		--button-states-danger-outline-btn-outline-active: var(
			--color-system-danger-variables-action-danger
		);
		--button-states-danger-outline-btn-bg-active: var(--color-system-danger-danger-800);
		--button-states-danger-outline-btn-focus: var(
			--color-system-danger-variables-focus-danger-focus-active
		);
		--button-states-danger-outline-btn-txt: var(--color-system-danger-variables-action-danger);
		--button-states-danger-outline-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
		--button-states-text-btn-txt: var(--color-system-primary-variables-action-primary);
		--button-states-text-btn-txt-hover: var(
			--color-system-primary-variables-action-primary-hover
		);
		--button-states-text-btn-txt-active: var(
			--color-system-primary-variables-action-primary-active
		);
		--button-states-text-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
		--badge-radius-badge-radiuses: var(--radius-default-radius-sm);
		--badge-states-primary-subtle-badge-primary-bg: var(--color-system-primary-primary-900);
		--badge-states-primary-subtle-badge-primary-txt: var(--typography-text-dark-primary-body);
		--badge-states-primary-default-badge-primary-bg: var(--color-system-primary-primary-700);
		--badge-states-primary-default-badge-primary-txt: var(--color-system-gray-white);
		--badge-states-warning-default-badge-warning-bg: var(--color-system-warning-warning-800);
		--badge-states-warning-default-badge-warning-txt: var(--color-system-gray-white);
		--badge-states-danger-default-badge-danger-bg: var(--color-system-danger-danger-800-p);
		--badge-states-danger-default-badge-danger-txt: var(--color-system-gray-white);
		--badge-states-secondary-default-badge-secondary-bg: var(
			--color-system-secondary-secondary-800
		);
		--badge-states-secondary-default-badge-secondary-txt: var(--color-system-gray-white);
		--badge-border-badge-border-width: var(--border-border-width-na);
		--checkbox-icon-chck-box-icon-primary: var(--typography-icon-light-primary);
		--checkbox-space-padding-y-chck-box-padding-y: var(--padding-padding-y-padding-y);
		--checkbox-space-padding-x-chck-box-padding-x: var(--padding-padding-x-padding-x);
		--checkbox-space-padding-between-chck-box-padding-between-sm: var(
			--padding-padding-between-padding-between
		);
		--checkbox-radius-chck-box-radius-sm: var(--radius-default-radius-x-sm);
		--checkbox-focus-chck-box-focus-width: var(--focus-focus-width);
		--checkbox-radius-chck-box-focus-radius: var(--radius-default-radius-circle);
		--checkbox-border-chck-box-border-width: var(--border-border-width-rg);
		--checkbox-states-primary-chck-box-bg: var(--color-system-subtle-subtle-900);
		--checkbox-states-primary-chck-box-bg-active: var(--color-system-subtle-subtle-900);
		--checkbox-states-disabled-chck-box-bg-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--checkbox-states-primary-chck-box-focus: var(
			--color-system-subtle-variables-focus-subtle-focus-active
		);
		--checkbox-states-primary-chck-box-txt: var(--fonts-colors-type-dark-primary-body);
		--checkbox-states-disabled-chck-box-txt-disabled: var(--fonts-colors-type-dark-disabled);
		--checkbox-states-disabled-chck-box-border-disabled: var(
			--color-system-disabled-variables-action-disabled-hover
		);
		--checkbox-states-primary-chck-box-border: var(--color-system-subtle-subtle-900);
		--checkbox-states-primary-chck-box-hover: var(
			--color-system-subtle-variables-focus-subtle-focus-active
		);
		--radio-states-primary-radio-bg: var(--color-system-primary-variables-action-primary);
		--radio-states-primary-radio-border: var(--color-system-primary-variables-action-primary);
		--radio-states-primary-radio-hover: var(
			--color-system-primary-variables-focus-primary-focus
		);
		--radio-states-disabled-radio-bg-disabled: var(
			--color-system-disabled-variables-action-disabled-emphasis
		);
		--radio-states-primary-radio-focus: var(
			--color-system-primary-variables-focus-primary-focus-emphasis
		);
		--radio-states-disabled-radio-border-disabled: var(
			--color-system-disabled-variables-action-disabled-emphasis
		);
		--radio-states-primary-radio-txt: var(--fonts-colors-type-dark-primary-body);
		--radio-states-disabled-radio-txt-disabled: var(--fonts-colors-type-dark-tertiary-body);
		--radio-space-padding-y-radio-padding-y: var(--padding-padding-y-padding-y);
		--radio-space-padding-x-radio-padding-x: var(--padding-padding-x-padding-sm-x);
		--radio-space-padding-between-radio-padding-between: var(
			--padding-padding-between-padding-between-lg
		);
		--radio-radius-radio-radius-sm: var(--radius-default-radius-sm);
		--radio-focus-radio-focus-width: var(--focus-focus-width);
		--radio-radius-radio-focus-radius: var(--radius-default-radius-circle);
		--radio-border-radio-border-width: var(--border-border-width-rg);
		--breadcrumb-space-padding-y-breadcrumb-padding-y: var(--padding-padding-y-padding-y);
		--breadcrumb-space-padding-x-breadcrumb-padding-x: var(--padding-padding-x-padding-x);
		--breadcrumb-space-padding-between-breadcrumb-padding-between: var(
			--padding-padding-between-padding-between
		);
		--toast-radius-toast-radiuseses: var(--radius-default-radius);
		--toast-states-success-toast-success-header-bg: var(
			--color-system-success-variables-action-success
		);
		--toast-states-success-toast-success-body-bg: var(--color-system-document-range-page-800);
		--toast-states-info-toast-info-header-bg: var(--color-system-info-variables-action-info);
		--toast-states-warning-toast-warning-header-bg: var(
			--color-system-warning-variables-action-warning
		);
		--toast-states-danger-toast-danger-header-bg: var(
			--color-system-danger-variables-action-danger
		);
		--toast-space-padding-between-toast-padding-between: var(
			--padding-padding-between-padding-between
		);
		--toast-states-default-toast-default-header-bg: var(--color-system-subtle-subtle-700);
		--toast-states-default-toast-default-body-bg: var(--color-system-document-range-page-800);
		--toast-icon-toast-icon-primary: var(--color-system-document-range-page-800);
		--toast-text-toast-default-txt: var(--fonts-colors-type-dark-primary-body);
		--toast-text-toast-time-txt: var(--fonts-colors-type-dark-tertiary-body);
		--toast-states-info-toast-info-body-bg1: var(--color-system-document-range-page-800);
		--toast-states-warning-toast-warning-body-bg: var(--color-system-document-range-page-800);
		--toast-states-danger-toast-danger-body-bg: var(--color-system-document-range-page-800);
		--breadcrumb-text-breadcrumb-txt-divider: var(--fonts-colors-type-light-secondary);
		--alert-icon-alert-general-icon-default: var(--color-system-document-range-page-800);
		--radio-states-disabled-radio-bg-disabled-hover: var(
			--color-system-disabled-variables-focus-disabled-focus
		);
		--radio-states-disabled-radio-bg-disabled-active: var(
			--color-system-disabled-variables-focus-disabled-focus-emphasis
		);
		--tooltip-space-padding-y-tooltip-padding-y: var(--padding-padding-y-padding-y);
		--tooltip-radius-tooltip-radius: var(--radius-default-radius);
		--tooltip-space-padding-x-tooltip-padding-x: var(--padding-padding-x-padding-x);
		--tooltip-states-light-tooltip-bg-light: var(--color-system-subtle-subtle-900);
		--tooltip-text-tooltip-default-txt-dark: var(--fonts-colors-type-dark-primary-body);
		--tooltip-states-dark-tooltip-bg-dark: var(--color-system-subtle-subtle-700);
		--tooltip-space-padding-between-toast-padding-between: var(
			--padding-padding-between-padding-between
		);
		--stepper-states-active-stepper-active-step-txt: var(--fonts-colors-type-light-primary);
		--stepper-states-active-stepper-active-icon: var(--typography-icon-light-primary);
		--stepper-states-todo-stepper-todo-icon: var(--color-system-document-range-page-800);
		--stepper-states-todo-stepper-todo-step-txt: var(--fonts-colors-type-dark-primary-body);
		--stepper-space-padding-y-stepper-padding-y: var(--padding-padding-y-padding-y);
		--stepper-space-padding-x-stepper-padding-x: var(--padding-padding-x-padding-x);
		--stepper-space-padding-between-stepper-padding-between: var(
			--padding-padding-between-padding-between
		);
		--stepper-states-active-stepper-active-bg: var(
			--color-system-primary-variables-action-primary
		);
		--stepper-states-todo-stepper-todo-bg: var(
			--color-system-disabled-variables-action-disabled-emphasis
		);
		--stepper-radius-stepper-focus-radius: var(--radius-default-radius-circle);
		--stepper-states-active-stepper-active-txt: var(--fonts-colors-type-dark-primary-body);
		--stepper-states-todo-stepper-todo-txt: var(--fonts-colors-type-dark-tertiary-body);
		--stepper-states-complete-stepper-complete-step-txt: var(--fonts-colors-type-dark-muted);
		--stepper-states-complete-stepper-complete-bg: var(
			--color-system-disabled-variables-action-disabled
		);
		--stepper-states-complete-stepper-complete-txt: var(--fonts-colors-type-dark-primary-body);
		--stepper-states-complete-stepper-complete-icon: var(
			--color-system-document-range-page-800
		);
		--stepper-border-stepper-border-width: var(--border-border-width-sm);
		--stepper-border-stepper-complete-stroke: var(--border-border-border-10);
		--stepper-border-stepper-todo-stroke: var(--border-border-border-30);
		--document-frame-title-breadcrumb-icon: var(--document-branded-a);
		--document-tekna-element: #ff8500;
		--document-frame-title-doc-title-radius: var(--radius-r-022);
		--document-frame-footer-footer-bg: var(--color-system-document-range-page-800);
		--form-space-padding-y-form-padding-y: var(--padding-padding-y-padding-y);
		--form-radius-form-radiuseses: var(--radius-default-radius);
		--form-icon-default-form-icon-primary: var(--color-system-document-range-page-800);
		--form-border-form-border-width: var(--border-border-width-sm);
		--form-space-padding-x-form-padding-x: var(--padding-padding-x-padding-x);
		--form-states-default-form-default-bg: var(--color-system-document-range-page-800);
		--form-states-default-form-default-bg-disabled: var(--color-system-disabled-disabled-700);
		--form-text-form-default-txt: #f3f5f8;
		--form-focus-form-border-focus: var(--color-system-primary-variables-focus-primary-focus);
		--form-border-form-border-warning: var(--color-system-warning-variables-action-warning);
		--form-border-form-border-danger: var(--color-system-danger-variables-action-danger);
		--form-space-padding-between-form-padding-between: var(
			--padding-padding-between-padding-between
		);
		--form-text-form-disabled-txt: #47474f;
		--alert-states-success-emphasis-alert-success-bg: var(
			--color-system-success-variables-action-success
		);
		--alert-states-info-emphasis-alert-info-f-bg: var(
			--color-system-info-variables-action-info
		);
		--alert-states-warning-emphasis-alert-warning-f-bg: var(
			--color-system-warning-variables-action-warning
		);
		--alert-states-danger-emphasis-alert-danger-f-bg: var(
			--color-system-danger-variables-action-danger
		);
		--switch-state-primary-switch-active: var(--color-system-primary-variables-action-primary);
		--switch-state-primary-switch-inactive-focus: var(
			--color-system-subtle-variables-focus-subtle-focus-hover
		);
		--switch-state-primary-switch-focus: var(
			--color-system-primary-variables-focus-primary-focus-hover
		);
		--switch-state-handle-switch-handle-primary: var(--color-system-gray-white);
		--switch-space-padding-y-switch-padding-y: var(--padding-padding-y-padding-y-sm-x);
		--switch-space-padding-x-switch-padding-x: var(--padding-padding-x-padding-sm-x);
		--switch-radius-switch-radius: var(--radius-default-radius-circle);
		--switch-focus-switch-focus-width: var(--focus-focus-width);
		--tags-icon-tag-icon-default: var(--color-system-document-range-page-800);
		--tags-space-padding-y-tag-padding-y: var(--padding-padding-y-padding-y-sm-x);
		--tags-space-padding-x-tag-padding-x: var(--padding-padding-x-padding-sm);
		--tags-space-padding-between-tag-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
		--tags-focus-tag-focus-width: var(--focus-focus-width);
		--tags-radius-tag-radius: var(--radius-default-radius-xl);
		--tags-border-tag-border-width: var(--border-border-width-sm);
		--tags-states-primary-tag-bg: var(--color-system-primary-variables-action-primary);
		--tags-states-primary-tag-bg-hover: var(
			--color-system-primary-variables-action-primary-hover
		);
		--tags-states-primary-subtle-tag-bg: var(--color-system-primary-primary-900);
		--tags-states-primary-subtle-tag-bg-hover: var(--color-system-primary-primary-800);
		--tags-states-secondary-tag-bg: var(--color-system-secondary-variables-action-secondary);
		--tags-states-secondary-subtle-tag-bg: var(--color-system-secondary-secondary-900);
		--tags-states-secondary-subtle-tag-bg-hover: var(--color-system-secondary-secondary-800);
		--tags-states-secondary-tag-bg-hover: var(
			--color-system-secondary-variables-action-secondary-hover
		);
		--tags-states-default-tag-bg: var(--color-system-subtle-subtle-700);
		--tags-states-default-tag-bg-hover: var(--color-system-subtle-subtle-600);
		--tags-states-default-subtle-tag-bg: var(--color-system-subtle-subtle-800);
		--tags-states-default-subtle-tag-bg-hover: var(--color-system-subtle-subtle-700);
		--tags-text-tag-txt-default: var(--typography-text-dark-primary-body);
		--tags-text-tag-txt-invert: var(--typography-text-light-primary-heading);
		--tags-icon-tag-icon-invert: var(--typography-icon-light-primary);
		--switch-state-primary-switch-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--switch-state-handle-switch-handle-radius: var(--radius-default-radius-circle);
		--switch-state-primary-switch-inactive: var(--color-system-subtle-subtle-700);
		--toast-text-toast-default-txt-invert: var(--fonts-colors-type-light-primary);
		--toast-icon-toast-icon-invert: var(--typography-icon-light-primary);
		--toast-text-toast-time-txt-invert: var(--fonts-colors-type-light-primary);
		--form-text-form-txt-dng: var(--fonts-colors-type-actions-default-danger);
		--form-text-form-txt-warning: var(--fonts-colors-type-actions-default-warning);
		--form-icon-default-form-icon-secondary: var(--typography-icon-dark-secondary);
		--form-text-form-txt-ghost: #e2d9f3;
		--form-icon-invert-form-icon-primary: var(--typography-icon-light-primary);
		--form-icon-invert-form-icon-secondary: var(--typography-icon-light-secondary);
		--form-border-form-border-default: var(--border-border-border-20);
		--form-focus-form-focus-width: var(--focus-focus-width);
		--button-radius-icon-btn-radius: var(--radius-nested-nested-radius);
		--selections-text-selection-txt-default: var(--typography-text-dark-primary-body);
		--selections-text-selection-txt-invert: var(--typography-text-light-primary-heading);
		--selections-space-padding-y-selection-padding-y: var(--padding-padding-y-padding-y-sm-x);
		--selections-space-padding-x-selection-padding-x: var(--padding-padding-x-padding-sm-x);
		--selections-space-padding-between-selection-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
		--selections-radius-selection-btn-radius: var(--radius-nested-nested-radius);
		--selections-border-selection-border-width-default: var(--border-border-width-sm);
		--selections-states-background-selection-bg: var(--color-system-subtle-subtle-800);
		--selections-states-default-selection-default: var(--color-system-subtle-subtle-800);
		--selections-states-default-selection-default-hover: var(--color-system-subtle-subtle-700);
		--selections-states-active-selection-active-bg: var(
			--color-system-primary-variables-action-primary-hover
		);
		--selections-states-active-selection-active-bg-hover: var(
			--color-system-primary-variables-action-primary-hover
		);
		--selections-radius-selection-radius: var(--radius-default-radius);
		--range-icon-range-icon-default: var(--color-system-document-range-page-800);
		--range-icon-range-icon-invert: var(--typography-icon-light-primary);
		--range-text-range-txt-default: var(--typography-text-dark-primary-body);
		--range-space-padding-y-range-padding-y: var(--padding-padding-y-padding-y-sm-x);
		--range-space-padding-x-range-padding-x: var(--padding-padding-x-padding-sm-x);
		--range-space-padding-between-range-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
		--range-radius-range-radius: var(--radius-default-radius-sm);
		--range-radius-range-btn-radius: var(--radius-default-radius-sm);
		--range-focus-range-focus-width: var(--focus-focus-width);
		--range-border-range-border-width: var(--border-border-width-rg);
		--range-states-background-range-bg: var(--color-system-disabled-variables-action-disabled);
		--range-states-default-range-bg: var(--color-system-disabled-disabled-200);
		--range-states-default-range-bg-hover: var(
			--color-system-primary-variables-action-primary-emphasis
		);
		--range-states-default-range-focus: var(
			--color-system-primary-variables-focus-primary-focus
		);
		--range-states-active-range-bg: var(--color-system-primary-variables-action-primary);
		--range-states-active-range-bg-hover: var(
			--color-system-primary-variables-focus-primary-focus-emphasis
		);
		--range-states-active-range-focus: var(
			--color-system-primary-variables-focus-primary-focus
		);
		--tabs-icon-tab-icon-default: var(--color-system-document-range-page-800);
		--tabs-icon-tab-icon-active: var(--fonts-colors-type-actions-default-primary);
		--tabs-space-padding-y-tab-padding-y: var(--padding-padding-y-padding-y-sm-x);
		--tabs-space-padding-x-tab-padding-x: var(--padding-padding-x-padding-sm-x);
		--tabs-space-padding-between-tab-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
		--tabs-radius-tab-radius: var(--radius-default-radius-sm);
		--tabs-focus-tab-focus-width: var(--focus-focus-width);
		--tabs-border-tab-border-width-default: var(--border-border-width-rg);
		--tabs-border-tab-border-default: var(--border-border-border-10);
		--tabs-border-tab-border-width-active: var(--border-border-width-rg);
		--tabs-border-tab-border-active: var(--border-colors-dark-primary);
		--tabs-text-tab-txt-default: var(--color-system-document-range-page-800);
		--tabs-text-tab-txt-active: var(--fonts-colors-type-actions-default-primary);
		--modal-space-padding-y-modal-padding-y: var(--padding-padding-y-padding-y);
		--modal-radius-modal-radiuseses: var(--radius-default-radius-lg);
		--modal-icon-modal-icon-primary: var(--color-system-document-range-page-800);
		--modal-icon-modal-icon-invert: var(--typography-icon-light-primary);
		--modal-border-modal-border-width: var(--border-border-width-sm);
		--modal-space-padding-x-modal-padding-x: var(--padding-padding-x-padding-x);
		--modal-states-default-modal-default-body-bg: var(--color-system-document-range-page-900);
		--modal-text-modal-default-txt: #f3f5f8;
		--modal-text-modal-default-txt-invert: var(--color-system-gray-white);
		--modal-space-padding-between-modal-padding-between: var(
			--padding-padding-between-padding-between
		);
		--modal-text-modal-title-txt: var(--color-system-gray-white);
		--modal-border-modal-border: var(--typography-text-dark-disabled);
		--switch-focus-switch-border-width: var(--radius-default-radius-sm);
		--pagination-states-primary-pagination-a-active: var(
			--color-system-primary-variables-action-primary
		);
		--pagination-states-primary-pagination-a-default: var(
			--color-system-primary-variables-focus-primary-focus-emphasis
		);
		--pagination-states-primary-pagination-a-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--pagination-space-padding-y-pagination-padding-y: var(--padding-padding-y-padding-y-sm-x);
		--pagination-space-padding-x-pagination-padding-x: var(--padding-padding-x-padding-sm-x);
		--pagination-radius-pagination-handle-a-radius: var(--radius-default-radius-circle);
		--pagination-focus-pagination-focus-width: var(--focus-focus-width);
		--pagination-focus-pagination-border-width: var(--radius-default-radius-sm);
		--pagination-radius-pagination-border: var(--color-system-subtle-subtle-200);
		--pagination-text-pagination-txt-default: var(--typography-text-dark-primary-body);
		--pagination-text-pagination-txt-invert: var(--typography-text-light-primary-heading);
		--pagination-icon-pagination-icon-default: var(--color-system-document-range-page-800);
		--pagination-icon-pagination-icon-invert: var(--typography-icon-light-primary);
		--pagination-icon-pagination-icon-disabled: var(--color-system-document-range-page-125);
		--pagination-states-primary-pagination-b-active: var(--color-system-subtle-subtle-700);
		--pagination-states-primary-pagination-b-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--pagination-text-pagination-txt-disabled: var(--typography-text-dark-disabled);
		--pagination-radius-pagination-handle-b-radius: var(--radius-default-radius);
		--selections-border-selection-border-width-active: var(--border-border-width-rg);
		--selections-border-selection-border-default: var(--border-border-width-sm);
		--selections-border-selection-border-active: var(--border-border-width-rg);
		--selections-states-default-selection-border-default: var(--border-border-border-20);
		--selections-states-active-selection-border-active: var(
			--color-system-primary-variables-action-primary
		);
		--selections-states-active-selection-border-bg-active: var(
			--color-system-document-range-page-white-000
		);
		--switch-text-switch-title-txt: var(--fonts-colors-type-dark-primary-body);
		--switch-text-switch-default-txt: var(--fonts-colors-type-dark-secondary-body);
		--switch-text-switch-default-txt-disabled: var(--fonts-colors-type-dark-disabled);
		--switch-text-switch-title-txt-disabled: var(--fonts-colors-type-dark-disabled);
		--pagination-space-padding-between-pagination-padding-between: var(
			--padding-padding-between-padding-between
		);
		--badge-states-primary-subtle-badge-primary-icon: var(
			--color-system-document-range-page-800
		);
		--badge-states-primary-default-badge-primary-icon: var(--typography-icon-light-primary);
		--badge-states-secondary-default-badge-secondary-icon: var(--typography-icon-light-primary);
		--badge-states-warning-default-badge-warning-icon: var(--typography-text-dark-primary-body);
		--badge-states-danger-default-badge-danger-icon: var(--typography-icon-light-primary);
		--avatar-radius-avatar-radiuseses-sm: var(--radius-default-radius-circle);
		--avatar-icon-avatar-general-icon: var(--color-system-document-range-page-800);
		--avatar-icon-avatar-general-icon-invert: var(--color-system-document-range-page-800);
		--avatar-states-high-avatar-high-bg: var(
			--color-system-primary-variables-focus-primary-focus-emphasis
		);
		--avatar-states-medium-avatar-medium-bg: var(
			--color-system-primary-variables-focus-primary-focus
		);
		--avatar-states-low-avatar-low-bg: var(--color-system-subtle-variables-action-subtle);
		--avatar-text-avatar-default-txt: var(--fonts-colors-type-dark-primary-body);
		--avatar-text-avatar-default-txt-invert: var(--fonts-colors-type-dark-primary-body);
		--avatar-radius-avatar-radiuseses-md: var(--radius-default-radius-circle);
		--avatar-radius-avatar-radiuseses-lg: var(--radius-default-radius-circle);
		--card-radius-card-radiuseses: var(--radius-default-radius-lg);
		--card-states-emphassis-card-emphasis-body-bg: var(--color-system-subtle-subtle-800);
		--card-radius-card-default-txt: var(--fonts-colors-type-light-primary);
		--card-states-subtle-card-subtle-body-bg: var(--color-system-subtle-subtle-800);
		--list-text-list-txt-list-item: var(--color-system-document-range-page-800);
		--list-text-list-txt-title: var(--fonts-colors-type-dark-primary-body);
		--list-border-list-border-default: var(--border-border-border-20);
		--list-icon-list-icon-default: var(--color-system-document-range-page-800);
		--list-space-padding-y-list-padding-y: var(--padding-padding-y-padding-y-sm-x);
		--list-space-padding-x-list-padding-x: var(--padding-padding-x-padding-sm-x);
		--list-space-padding-between-list-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
		--list-radius-list-radius: var(--radius-default-radius-sm);
		--list-focus-list-focus-width: var(--focus-focus-width);
		--list-border-list-border-width-default: var(--border-border-width-sm);
		--list-text-list-txt-list-item-content: var(--typography-icon-dark-secondary);
		--list-list-background-default: var(--color-system-document-range-page-900);
		--comment-radius-comment-radiuseses-lg: var(--radius-default-radius-circle);
		--comment-text-comment-username-txt: var(--fonts-colors-type-dark-tertiary-body);
		--comment-icon-comment-general-icon: var(--typography-icon-light-secondary);
		--comment-text-comment-time-txt: var(--fonts-colors-type-dark-muted);
		--comment-text-comment-comment-txt: var(--fonts-colors-type-dark-primary-body);
		--calendar-states-date-calendar-default: var(--color-system-document-range-page-white-000);
		--calendar-states-date-calendar-hover: var(--color-system-subtle-variables-action-subtle);
		--calendar-states-date-calendar-active-center: var(--color-system-subtle-subtle-025);
		--calendar-states-date-calendar-active-end: var(
			--color-system-primary-variables-focus-primary-focus-emphasis
		);
		--calendar-text-calendar-txt-date-active: var(--typography-text-dark-primary-body);
		--calendar-text-calendar-txt-month: var(--typography-text-dark-primary-body);
		--calendar-text-calendar-txt-week: var(--typography-text-dark-tertiary-body);
		--calendar-icon-calendar-icon-default: var(--color-system-document-range-page-800);
		--calendar-radius-calendar-date-radius: var(--radius-default-radius);
		--calendar-radius-calendar-radius: var(--radius-default-radius-lg);
		--calendar-focus-pagination-focus-width: var(--focus-focus-width);
		--calendar-focus-pagination-border-width: var(--radius-default-radius-sm);
		--calendar-text-calendar-txt-date-default: var(--typography-text-dark-primary-body);
		--calendar-states-date-calendar-bg: var(--color-system-subtle-subtle-000);
		--calendar-text-calendar-txt-date-inactive: var(--typography-text-dark-disabled);
		--calendar-radius-calendar-active-date-radius: var(--radius-default-radius-x-na);
		--calendar-text-calendar-txt-date-selected: var(--typography-text-light-primary-heading);
		--calendar-calendar-border-width: var(--border-border-width-rg);
		--calendar-calendar-border: var(--color-system-primary-variables-action-primary);
		--calendar-radius-calendar-current-date: var(--radius-default-radius-circle);
		--rating-states-primary-rating-active: var(--color-system-yellow-yellow-300);
		--rating-states-primary-rating-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--badge-states-success-default-badge-success-bg: var(
			--color-system-success-variables-action-success
		);
		--badge-states-success-default-badge-success-txt: var(--typography-text-dark-primary-body);
		--badge-states-success-default-badge-success-icon: var(
			--color-system-document-range-page-800
		);
		--carousel-states-date-carousel-default: var(--color-system-subtle-subtle-075);
		--carousel-states-date-carousel-active: var(--color-system-primary-primary-900);
		--carousel-text-carousel-txt-date-default: var(--typography-text-dark-primary-body);
		--carousel-text-carousel-txt-date-active: var(--typography-text-dark-primary-body);
		--carousel-icon-carousel-icon-default: var(--color-system-document-range-page-800);
		--carousel-radius-carousel-date-radius: var(--radius-default-radius);
		--carousel-radius-carousel-current-date: var(--radius-default-radius-circle);
		--carousel-radius-carousel-active-date-radius: var(--radius-default-radius-x-na);
		--carousel-radius-carousel-radius: var(--radius-default-radius-lg);
		--carousel-focus-carousel-focus-width: var(--focus-focus-width);
		--carousel-focus-carousel-border-width: var(--radius-default-radius-sm);
		--carousel-carousel-border: var(--color-system-primary-variables-action-primary);
		--carousel-carousel-border-width: var(--border-border-width-rg);
		--pagination-text-pagination-txt-active: var(--typography-text-dark-primary-body);
		--calendar-states-date-calendar-current: var(
			--color-system-primary-variables-action-primary
		);
		--calendar-text-calendar-txt-date-current: var(--typography-text-light-primary-heading);
		--table-states-primary-title-row-active: var(--color-system-subtle-subtle-700);
		--table-states-primary-title-row-hover: var(--color-system-subtle-subtle-800);
		--table-states-primary-title-row-default: var(--color-system-subtle-subtle-900);
		--table-states-primary-row-row-default: transparent;
		--table-states-primary-row-row-hover: var(--color-system-subtle-subtle-800);
		--table-text-table-header: var(--typography-text-dark-primary-body);
		--table-text-table-txt-default: var(--typography-text-dark-primary-body);
		--table-text-table-txt-disabled: var(--typography-text-dark-disabled);
		--table-text-table-txt-invert: var(--typography-text-light-primary-heading);
		--table-icon-table-icon-default: var(--color-system-document-range-page-800);
		--table-icon-table-icon-disabled: var(--color-system-document-range-page-125);
		--table-icon-table-icon-invert: var(--typography-icon-light-primary);
		--table-radius-table-radius: var(--radius-default-radius-lg);
		--table-border-table-border: var(--border-border-border-20);
		--table-focus-table-focus-width: var(--focus-focus-width);
		--table-border-table-border-width-row: var(--border-border-width-sm);
		--table-states-primary-row-row-active: var(--color-system-subtle-subtle-700);
		--table-text-table-txt-action-btn: var(--button-states-text-btn-txt);
		--table-states-primary-table-bg: var(--color-system-document-range-page-800);
		--table-states-primary-table-header: var(--color-system-document-range-page-800);
		--table-states-primary-table-footer: var(--color-system-document-range-page-800);
		--button-states-medium-btn-bg: var(--color-system-primary-primary-050);
		--button-states-medium-btn-bg-hover: var(--color-system-primary-primary-075);
		--button-states-medium-btn-bg-active: var(--color-system-primary-primary-125);
		--button-states-medium-btn-bg-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--button-states-medium-btn-focus: var(--color-system-primary-primary-050);
		--button-states-medium-btn-txt: var(--fonts-colors-type-actions-default-primary);
		--button-states-medium-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
		--button-states-medium-outline-btn-outline: var(--color-system-primary-primary-200);
		--button-states-medium-outline-btn-bg: var(--color-system-primary-primary-025);
		--button-states-medium-outline-btn-outline-hover: var(--color-system-primary-primary-200);
		--button-states-medium-outline-btn-bg-hover: var(--color-system-primary-primary-050);
		--button-states-medium-outline-btn-outline-active: var(--color-system-primary-primary-200);
		--button-states-medium-outline-btn-bg-active: var(--color-system-primary-primary-050);
		--button-states-medium-outline-btn-focus: var(--color-system-primary-primary-050);
		--button-states-medium-outline-btn-txt: var(--fonts-colors-type-actions-default-primary);
		--button-states-medium-outline-btn-txt-disabled: var(--fonts-colors-type-dark-disabled);
		--button-states-high-outline-btn-outline-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--badge-states-danger-subtle-badge-danger-bg: var(--color-system-danger-danger-900);
		--badge-states-warning-subtle-badge-warning-bg: var(--color-system-warning-warning-900);
		--badge-states-success-subtle-badge-success-bg: var(--color-system-success-success-900);
		--badge-states-secondary-subtle-badge-secondary-bg: var(
			--color-system-secondary-secondary-900
		);
		--badge-states-success-subtle-badge-success-txt: var(--typography-text-colors-dark-success);
		--badge-states-success-subtle-badge-success-icon: var(
			--typography-icon-colors-dark-success
		);
		--badge-states-secondary-subtle-badge-secondary-txt: var(
			--typography-text-colors-dark-secondary
		);
		--badge-states-secondary-subtle-badge-secondary-icon: var(
			--typography-icon-colors-dark-secondary
		);
		--badge-states-danger-subtle-badge-danger-txt: var(--typography-text-colors-dark-danger);
		--badge-states-danger-subtle-badge-danger-icon: var(--typography-icon-colors-dark-danger);
		--badge-states-warning-subtle-badge-warning-txt: var(--typography-text-colors-dark-warning);
		--badge-states-warning-subtle-badge-warning-icon: var(
			--typography-text-colors-dark-warning
		);
		--badge-states-primary-subtle-badge-primary-border: var(
			--color-system-primary-variables-focus-primary-focus-active
		);
		--badge-states-secondary-subtle-badge-secondary-border: var(
			--color-system-secondary-variables-focus-secondary-focus-hover
		);
		--badge-states-success-subtle-badge-secondary-border: var(
			--color-system-success-success-300
		);
		--badge-states-warning-subtle-badge-secondary-border: var(
			--color-system-warning-variables-focus-warning-focus-active
		);
		--badge-states-danger-subtle-badge-secondary-border: var(--color-system-danger-danger-400);
		--table-text-table-txt-sub-text: var(--typography-text-dark-tertiary-body);
		--dropdown-dropdown-radius-dropdown-radius: var(--radius-default-radius);
		--dropdown-dropdown-border-dropdown-border-width: var(--border-border-width-sm);
		--dropdown-dropdown-border-dropdown-complete-stroke: var(--border-border-border-10);
		--dropdown-dropdown-border-dropdown-border: var(--border-border-border-30);
		--dropdown-dropdown-states-dropdown-bg: var(--color-system-document-range-page-800);
		--dropdown-dropdown-states-dropdown-default: var(--color-system-document-range-page-900);
		--dropdown-dropdown-states-dropdown-hover: var(--color-system-document-range-page-700);
		--dropdown-dropdown-states-dropdown-active: var(--color-system-document-range-page-600);
		--dropdown-dropdown-text-dropdown-default-txt: #f3f5f8;
		--dropdown-dropdown-text-dropdown-active-txt: var(--color-system-gray-white);
		--dropdown-dropdown-text-dropdown-disabled-txt: #47474f;
		--dropdown-dropdown-radius-dropdown-radius-active: var(--radius-nested-nested-radius);
		--tree-text-tree-txt-title: var(--fonts-colors-type-dark-primary-body);
		--tree-text-tree-txt-list-item: var(--typography-text-dark-tertiary-body);
		--tree-text-tree-txt-list-item-content: var(--fonts-colors-type-dark-muted);
		--tree-border-tree-border-default: var(--border-border-border-20);
		--tree-icon-tree-icon-active: var(--color-system-document-range-page-800);
		--tree-state-tree-background: var(--color-system-document-range-page-900);
		--tree-radius-branch-radius: var(--radius-default-radius);
		--tree-border-tree-border-width-default: var(--border-border-width-na);
		--tree-border-tree-border-width-active: var(--border-border-width-na);
		--tree-state-branch-default: transparent;
		--tree-state-branch-hover: var(--color-system-subtle-subtle-800);
		--tree-state-branch-active: var(--color-system-subtle-subtle-700);
		--tree-icon-tree-icon-dropdown: var(--typography-icon-dark-secondary);
		--tree-space-padding-between-branch-padding-between-default: var(
			--padding-padding-between-padding-between-sm
		);
		--tree-space-padding-y-branch-padding-y-default: var(--padding-padding-y-padding-y);
		--process-indicator-text-process-txt-default: var(--typography-text-dark-primary-body);
		--process-indicator-icon-process-a-icon-default: var(
			--typography-icon-colors-default-secondary
		);
		--process-indicator-radius-process-a-handle-a-radius: var(--radius-default-radius);
		--process-indicator-icon-process-a-icon-background: var(--color-system-subtle-subtle-075);
		--navigation-states-background-navigation-footer-bg: var(
			--color-system-document-range-page-900
		);
		--navigation-states-background-navigation-header-bg: var(--color-system-subtle-subtle-975);
		--navigation-text-navigation-txt-header: var(--color-system-gray-white);
		--navigation-text-navigation-txt-default: #f3f5f8;
		--navigation-text-navigation-txt-sub-text: var(--typography-text-dark-tertiary-body);
		--navigation-text-navigation-txt-disabled: var(--typography-text-dark-disabled);
		--navigation-text-navigation-txt-invert: var(--typography-text-light-primary-heading);
		--navigation-icon-navigation-icon-default: #f3f5f8;
		--navigation-icon-navigation-icon-disabled: var(--color-system-document-range-page-125);
		--navigation-icon-navigation-icon-invert: var(--typography-icon-light-primary);
		--navigation-radius-navigation-sm: var(--radius-default-radius-lg);
		--navigation-focus-navigation-focus-width: var(--focus-focus-width);
		--navigation-focus-navigation-border-width: var(--radius-default-radius-sm);
		--navigation-states-background-navigation-subheader-bg: var(
			--color-system-document-range-page-900
		);
		--navigation-primary-flyout-side-nav-background: var(--color-system-subtle-subtle-800);
		--navigation-primary-flyout-side-nav-default: var(--color-system-subtle-subtle-700);
		--navigation-primary-flyout-side-nav-hover: var(--color-system-subtle-subtle-600);
		--navigation-primary-flyout-side-nav-active: var(--color-system-subtle-subtle-500);
		--navigation-primary-flyout-text-side-nav-txt-title: var(
			--fonts-colors-type-dark-primary-body
		);
		--navigation-primary-flyout-text-side-nav-txt-list-item: var(
			--typography-icon-dark-secondary
		);
		--navigation-primary-flyout-border-side-nav-stroke-default: var(--border-border-border-20);
		--navigation-primary-flyout-icon-side-nav-icon-content: var(
			--color-system-document-range-page-800
		);
		--navigation-primary-flyout-icon-side-nav-icon-dropdown: var(
			--color-system-document-range-page-800
		);
		--navigation-primary-flyout-radius-side-nav-radius: var(--radius-default-radius-sm);
		--navigation-primary-flyout-border-side-nav-border-width-default: var(
			--border-border-width-rg
		);
		--navigation-primary-flyout-border-side-nav-border-width-active: var(
			--border-border-width-rg
		);
		--navigation-primary-flyout-spacing-padding-between-side-nav-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
		--navigation-primary-flyout-spacing-padding-y-side-nav-padding-y: var(
			--padding-padding-y-padding-y
		);
		--navigation-primary-flyout-icon-side-nav-icon-pho: var(--typography-icon-pho);
		--search-space-padding-y-search-padding-y: var(--padding-padding-y-padding-y);
		--search-radius-search-radiuseses: var(--radius-default-radius);
		--search-space-padding-x-search-padding-x: var(--padding-padding-x-padding-x);
		--search-text-search-default-txt: var(--typography-text-dark-primary-body);
		--search-state-search-bg: var(--color-system-document-range-page-800);
		--search-space-padding-between-search-padding-between: var(
			--padding-padding-between-padding-between
		);
		--search-border-search-border: var(--border-border-border-20);
		--search-border-search-border-width: var(--border-border-width-sm);
		--search-text-search-inactive-txt: var(--typography-text-dark-tertiary-body);
		--tabs-border-tab-border-default-hover: var(--border-border-border-20);
		--pagination-states-primary-pagination-b-default-hover: var(
			--color-system-subtle-subtle-800
		);
		--pagination-states-primary-pagination-b-default: transparent;
		--pagination-states-primary-pagination-b-active-hover: var(
			--color-system-subtle-subtle-600
		);
		--list-list-background-hover: var(--color-system-subtle-subtle-800);
		--tabs-states-tab-bg-default: transparent;
		--tabs-states-tab-bg-active: var(--color-system-subtle-subtle-800);
		--tabs-states-tab-bg-default-hover: var(--color-system-subtle-subtle-800);
		--tabs-states-tab-bg-active-hover: var(--color-system-subtle-subtle-700);
		--table-states-primary-title-cell-active: var(--color-system-subtle-subtle-700);
		--table-states-primary-row-cell-active: var(--color-system-subtle-subtle-700);
		--document-component-frame-state-supporting-weight: var(--border-border-w-02);
		--document-component-frame-state-supporting-border: var(--document-branded-c);
		--badge-states-subtle-default-badge-subtle-bg: var(--color-system-subtle-subtle-300);
		--badge-states-subtle-default-badge-subtle-txt: var(
			--typography-text-light-primary-heading
		);
		--badge-states-subtle-default-badge-subtle-icon: var(--typography-icon-light-primary);
		--badge-states-subtle-subtle-badge-subtle-bg: var(--color-system-subtle-subtle-800);
		--badge-states-subtle-subtle-badge-subtle-border: var(--color-system-subtle-subtle-500);
		--badge-states-subtle-subtle-badge-subtle-txt: var(--typography-text-dark-primary-body);
		--badge-states-subtle-subtle-badge-subtle-icon: var(--color-system-document-range-page-800);
		--navigation-schematic-toolbar-toolbar-space-padding-y-toolbar-padding-y: var(
			--padding-padding-y-padding-y
		);
		--navigation-schematic-toolbar-tool-radius-tool-radius: var(--radius-default-radius);
		--navigation-schematic-toolbar-toolbar-space-padding-x-toolbar-padding-x: var(
			--padding-padding-x-padding-x
		);
		--navigation-schematic-toolbar-tool-text-tool-default-txt: var(
			--fonts-colors-type-dark-primary-body
		);
		--navigation-schematic-toolbar-toolbar-space-padding-between-toolbar-padding-between: var(
			--padding-padding-between-padding-between
		);
		--navigation-schematic-toolbar-tool-icon-tool-icon-primary: var(
			--color-system-document-range-page-800
		);
		--navigation-schematic-toolbar-tool-icon-tool-icon-invert: var(
			--typography-icon-light-primary
		);
		--navigation-schematic-toolbar-tool-states-light-tool-bg: var(
			--color-system-document-range-page-900
		);
		--navigation-schematic-toolbar-tool-states-light-tool-bg-hvr: var(
			--color-system-subtle-subtle-800
		);
		--navigation-schematic-toolbar-tool-states-light-tool-bg-active: var(
			--color-system-subtle-subtle-700
		);
		--navigation-schematic-toolbar-tool-states-light-tool-bg-selected: var(
			--color-system-primary-variables-action-primary
		);
		--canvas-radius-canvas-radiuseses: var(--radius-default-radius-x-na);
		--canvas-states-emphassis-canvas-body-bg: var(--color-system-document-range-page-900);
		--canvas-states-subtle-card-subtle-body-bg: var(--color-system-document-range-page-900);
		--canvas-text-card-default-txt: var(--color-system-gray-white);
		--canvas-border-canvas-border-width-complete: var(--border-border-width-sm);
		--canvas-border-canvas-complete-border: var(--color-system-subtle-subtle-200);
		--canvas-border-canvas-border: var(--color-system-subtle-subtle-100);
		--canvas-border-canvas-border-width: 0.5px;
		--canvas-states-dots-canvas-complete-border: var(--color-system-subtle-subtle-300);
		--badge-states-bold-default-badge-bold-bg: var(--color-system-subtle-subtle-700);
		--badge-states-bold-default-badge-bold-txt: var(--typography-text-light-primary-heading);
		--badge-states-bold-default-badge-bold-icon: var(--typography-icon-light-primary);
		--badge-states-bold-subtle-badge-bold-bg: var(--color-system-subtle-subtle-400);
		--badge-states-bold-subtle-badge-bold-border: var(--color-system-subtle-subtle-400);
		--badge-states-bold-subtle-badge-bold-txt: var(--typography-text-light-primary-heading);
		--badge-states-bold-subtle-badge-bold-icon: var(--typography-icon-light-primary);
		--selections-states-background-selection-border: var(--border-border-border-05);
		--typography-text-colors-dark-primary: var(--fonts-colors-type-actions-dark-primary);
		--typography-text-colors-dark-secondary: var(--fonts-colors-type-actions-dark-secondary);
		--typography-text-colors-dark-info: var(--fonts-colors-type-actions-dark-info);
		--typography-text-colors-dark-success: var(--fonts-colors-type-actions-dark-success);
		--typography-text-colors-dark-warning: var(--fonts-colors-type-actions-dark-warning);
		--typography-text-colors-dark-danger: var(--fonts-colors-type-actions-dark-danger);
		--typography-icon-colors-dark-primary: var(--fonts-colors-type-actions-dark-primary);
		--typography-icon-colors-dark-secondary: var(--fonts-colors-type-actions-dark-secondary);
		--typography-icon-colors-dark-info: var(--fonts-colors-type-actions-dark-info);
		--typography-icon-colors-dark-success: var(--fonts-colors-type-actions-dark-success);
		--typography-icon-colors-dark-warning: var(--fonts-colors-type-actions-dark-warning);
		--typography-icon-colors-dark-danger: var(--fonts-colors-type-actions-dark-danger);
		--typography-text-colors-light-primary: var(--fonts-colors-type-actions-light-primary);
		--typography-text-colors-light-secondary: var(--fonts-colors-type-actions-light-secondary);
		--typography-text-colors-light-info: var(--fonts-colors-type-actions-light-info);
		--typography-text-colors-light-success: var(--fonts-colors-type-actions-light-success);
		--typography-text-colors-light-warning: var(--fonts-colors-type-actions-light-warning);
		--typography-text-colors-light-danger: var(--fonts-colors-type-actions-light-danger);
		--typography-icon-colors-light-primary: var(--fonts-colors-type-actions-light-primary);
		--typography-icon-colors-light-secondary: var(--fonts-colors-type-actions-light-secondary);
		--typography-icon-colors-light-info: var(--fonts-colors-type-actions-light-info);
		--typography-icon-colors-light-success: var(--fonts-colors-type-actions-light-success);
		--typography-icon-colors-light-warning: var(--fonts-colors-type-actions-light-warning);
		--typography-icon-colors-light-danger: var(--fonts-colors-type-actions-light-danger);
		--accordion-text-accordion-txt-title: var(--fonts-colors-type-dark-primary-body);
		--accordion-text-accordion-txt-list-item: var(--color-system-document-range-page-800);
		--accordion-text-accordion-txt-list-item-content: var(--typography-icon-dark-secondary);
		--accordion-stroke-accordion-border-default: var(--border-border-border-20);
		--accordion-icon-accordion-icon-default: var(--color-system-document-range-page-800);
		--accordion-space-padding-y-accordion-padding-y: var(--padding-padding-y-padding-y-sm-x);
		--accordion-accordion-background-default: var(--color-system-document-range-page-800);
		--accordion-accordion-background-hover: var(--color-system-document-range-page-700);
		--accordion-space-padding-x-accordion-padding-x: var(--padding-padding-x-padding-sm-x);
		--accordion-space-padding-between-accordion-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
		--accordion-radius-accordion-radius: var(--radius-default-radius-sm);
		--accordion-focus-accordion-focus-width: var(--focus-focus-width);
		--accordion-border-width-accordion-border-width-default: var(--border-border-width-rg);
		--accordion-border-width-accordion-border-width-active: var(--border-border-width-rg);
		--tooltip-text-tooltip-default-txt-light: var(--fonts-colors-type-light-primary);
		--button-radius-btn-radius-x-sm: var(--radius-default-radius-sm);
		--button-states-medium-outline-btn-outline-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--button-states-low-outline-btn-outline-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--button-states-danger-outline-btn-outline-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--tags-border-tag-border: var(--color-system-subtle-subtle-400);
		--carousel-border-carousel-border-width: var(--border-border-width-rg);
		--checkbox-text-checkbox-txt-default: var(--typography-text-dark-primary-body);
		--checkbox-text-checkbox-txt-light: var(--typography-text-dark-primary-body);
		--pagination-border-pagination-border-width-default: var(--border-border-width-rg);
		--pagination-border-pagination-border-width-active: var(--border-border-width-rg);
		--pagination-border-pagination-border-default: var(--border-border-border-20);
		--process-indicator-border-border-width-default: var(--border-border-width-rg);
		--process-indicator-border-border-default: var(--border-border-border-20);
		--radio-text-radio-txt: var(--typography-text-dark-primary-body);
		--search-icon-search-icon-default: var(--color-system-document-range-page-800);
		--search-icon-search-icon-invert: var(--typography-icon-light-primary);
		--document-frame-title-frame-title: var(--fonts-colors-type-dark-primary-heading);
		--document-frame-footer-footer-txt: var(--fonts-colors-type-dark-tertiary-body);
		--document-frame-content-example-txt: var(--typography-text-dark-tertiary-body);
		--document-frame-content-example-txt-header: var(--fonts-colors-type-dark-primary-body);
		--document-frame-title-frame-paragraph: var(--fonts-colors-type-dark-secondary-body);
		--document-document-components: #b644b4;
		--document-frame-title-breadcrumb-bg: var(--color-system-document-range-page-900);
		--document-frame-title-title-bg: var(--color-system-document-range-page-800);
		--process-indicator-text-process-txt-content: var(--typography-text-dark-tertiary-body);
		--alert-text-dark-alert-txt-title-default: var(--fonts-colors-type-dark-primary-heading);
		--alert-text-dark-alert-txt-title-invert: var(--fonts-colors-type-light-primary);
		--alert-icon-alert-general-icon-invert: var(--typography-icon-light-primary);
		--generic-states-divider-generic-border: var(--border-border-border-10);
		--card-radius-card-title-txt: var(--fonts-colors-type-dark-primary-body);
		--card-text-card-txt-title: var(--fonts-colors-type-dark-primary-body);
		--card-text-card-txt-list-item: var(--color-system-document-range-page-800);
		--card-text-card-txt-list-item-content: var(--typography-icon-dark-secondary);
		--card-icon-card-icon-default: var(--color-system-document-range-page-800);
		--card-border-card-border-width-default: var(--border-border-width-sm);
		--card-border-card-divider-default: var(--border-border-border-10);
		--card-border-card-border-default: var(--border-border-border-10);
		--card-border-card-divider-width: var(--border-border-width-sm);
		--tree-border-tree-border-active: var(--border-border-border-05);
		--form-icon-default-form-icon-disabled: var(--color-system-document-range-page-125);
		--form-border-form-border-hover: var(--border-border-border-20);
		--form-border-form-border-active: var(--border-colors-dark-secondary);
		--button-radius-sub-btn-radius: var(--radius-default-radius-circle);
		--navigation-schematic-toolbar-tool-states-light-tool-bg-selected-hvr: var(
			--color-system-primary-variables-action-primary-hover
		);
		--search-border-search-border-hover: var(--form-border-form-border-hover);
		--navigation-primary-acitivty-radius-notification-radiuseses: var(
			--radius-default-radius-lg
		);
		--navigation-primary-acitivty-border-notification-divider-default: var(
			--border-border-border-05
		);
		--navigation-primary-acitivty-border-notification-divider-width: var(
			--border-border-width-sm
		);
		--navigation-primary-acitivty-text-notification-txt-title: var(
			--fonts-colors-type-dark-primary-body
		);
		--navigation-primary-acitivty-text-notification-txt-content: var(
			--typography-text-dark-tertiary-body
		);
		--navigation-primary-acitivty-icon-notification-icon-default: var(
			--color-system-document-range-page-800
		);
		--navigation-primary-acitivty-radius-notification-default-txt: var(
			--fonts-colors-type-dark-primary-body
		);
		--navigation-primary-acitivty-radius-notification-title-txt: var(
			--fonts-colors-type-dark-primary-heading
		);
		--navigation-primary-acitivty-states-emphassis-notification-default-bg: var(
			--color-system-subtle-subtle-800
		);
		--navigation-primary-acitivty-radius-notification-sub: var(
			--fonts-colors-type-dark-tertiary-body
		);
		--navigation-primary-acitivty-icon-notification-content-icon: var(
			--typography-icon-dark-secondary
		);
		--navigation-primary-acitivty-states-emphassis-notification-new-bg: var(
			--color-system-secondary-secondary-800
		);
		--navigation-primary-acitivty-icon-notification-new-icon: var(
			--typography-icon-colors-default-info
		);
		--generic-states-divider-pho: var(--document-branded-a);
		--typography-icon-colors-default-primary: var(--fonts-colors-type-actions-default-primary);
		--typography-icon-colors-default-secondary: var(
			--fonts-colors-type-actions-default-secondary
		);
		--typography-icon-colors-default-info: var(--fonts-colors-type-actions-default-info);
		--typography-icon-colors-default-success: var(--fonts-colors-type-actions-default-success);
		--typography-icon-colors-default-warning: var(--fonts-colors-type-actions-default-warning);
		--typography-icon-colors-default-danger: var(--fonts-colors-type-actions-default-danger);
		--typography-text-colors-default-primary: var(--fonts-colors-type-actions-default-primary);
		--typography-text-colors-default-secondary: var(
			--fonts-colors-type-actions-default-secondary
		);
		--typography-text-colors-default-info: var(--fonts-colors-type-actions-default-info);
		--typography-text-colors-default-success: var(--fonts-colors-type-actions-default-success);
		--typography-text-colors-default-warning: var(--fonts-colors-type-actions-default-warning);
		--typography-text-colors-default-danger: var(--fonts-colors-type-actions-default-danger);
		--navigation-primary-acitivty-icon-notification-new-icon-error: var(
			--typography-icon-colors-default-danger
		);
		--navigation-primary-acitivty-states-emphassis-notification-new-bg-error: var(
			--color-system-danger-danger-800
		);
		--table-space-cells-padding-y-table-padding-y: var(--padding-padding-y-padding-y-sm);
		--table-space-cells-padding-x-table-padding-x: var(--padding-padding-x-padding-x);
		--table-space-cells-padding-between-table-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
		--table-border-table-border-width-cell: var(--border-border-width-sm);
		--navigation-schematic-toolbar-toolbar-radius-tool-radius: var(--radius-default-radius);
		--navigation-schematic-toolbar-toolbar-radius-toolbar-radius: var(--radius-default-radius);
		--navigation-schematic-toolbar-toolbar-states-primary-toolbar-bg: var(
			--color-system-document-range-page-900
		);
		--navigation-schematic-toolbar-tool-divider-tool-divider: var(--border-border-border-20);
		--navigation-schematic-toolbar-toolbar-icon-toolbar-icon-primary: var(
			--color-system-document-range-page-800
		);
		--navigation-schematic-toolbar-toolbar-icon-toolbar-icon-invert: var(
			--typography-icon-light-primary
		);
		--navigation-schematic-toolbar-toolbar-border-tree-border-default: var(
			--border-border-border-05
		);
		--navigation-schematic-toolbar-toolbar-border-tree-border-active: var(
			--border-border-border-05
		);
		--navigation-schematic-toolbar-toolbar-border-tree-border-width-default: var(
			--border-border-width-na
		);
		--navigation-schematic-toolbar-toolbar-border-tree-border-width-active: var(
			--border-border-width-na
		);
		--navigation-schematic-toolbar-tool-divider-tool-divider-width: var(
			--border-border-width-x-sm
		);
		--navigation-schematic-toolbar-tool-border-tool-border: var(--border-border-border-05);
		--navigation-schematic-toolbar-tool-border-tool-border-width: var(
			--radius-default-radius-x-na
		);
		--navigation-schematic-toolbar-tool-space-padding-y-tool-padding-y: var(
			--padding-padding-y-padding-y-sm
		);
		--navigation-schematic-toolbar-tool-space-padding-x-tool-padding-x: var(
			--padding-padding-x-padding-sm
		);
		--navigation-schematic-toolbar-tool-space-padding-between-tool-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
		--button-icon-btn-icon-default: var(--color-system-document-range-page-800);
		--navigation-primary-flyout-spacing-padding-x-side-nav-padding-x: var(
			--padding-padding-x-padding-x
		);
		--tooltip-divider-tooltip-divider: var(--border-border-border-05);
		--tooltip-divider-tooltip-divider-width: var(--border-border-width-sm);
		--tooltip-divider-tooltip-divider-invert: var(--border-border-border-flag);
		--tooltip-icon-tooltip-icon-primary: var(--color-system-document-range-page-800);
		--tooltip-icon-tooltip-icon-invert: var(--typography-icon-light-primary);
		--tooltip-states-light-tooltip-action-light-default: var(--color-system-subtle-subtle-000);
		--tooltip-states-light-tooltip-action-light-hover: var(--color-system-subtle-subtle-025);
		--tooltip-states-dark-tooltip-action-dark-default: var(--color-system-subtle-subtle-700);
		--tooltip-states-dark-tooltip-action-dark-hover: var(--color-system-subtle-subtle-800);
		--tooltip-radius-tooltip-action-radius: var(--radius-nested-nested-radius);
		--navigation-schematic-layer-panel-color-primary-layerpanel-bg: var(
			--color-system-document-range-page-900
		);
		--navigation-schematic-layer-panel-text-layerpanel-txt-default: var(
			--typography-text-dark-primary-body
		);
		--navigation-schematic-layer-panel-icon-layerpanel-icon-default: var(
			--color-system-document-range-page-800
		);
		--navigation-schematic-layer-panel-icon-layerpanel-icon-disabled: var(
			--color-system-document-range-page-125
		);
		--navigation-schematic-layer-panel-icon-layerpanel-icon-invert: var(
			--typography-icon-light-primary
		);
		--navigation-schematic-layer-panel-radius-layerpanel-radius: var(--radius-default-radius);
		--navigation-schematic-layer-panel-focus-layerpanel-focus-width: var(--focus-focus-width);
		--navigation-schematic-layer-panel-border-layerpanel-border-width: var(
			--radius-default-radius-sm
		);
		--navigation-schematic-layer-panel-spacing-padding-between-side-nav-padding-between: var(
			--padding-padding-between-padding-between-sm
		);
		--navigation-schematic-layer-panel-spacing-padding-y-side-nav-padding-y: var(
			--padding-padding-y-padding-y
		);
		--navigation-schematic-layer-panel-border-layerpanel-border-default: var(
			--border-border-border-20
		);
		--navigation-schematic-layer-panel-spacing-padding-x-side-nav-padding-x: var(
			--padding-padding-x-padding-x
		);
		--tree-space-padding-y-branch-padding-y-small: var(--padding-padding-y-padding-y-sm);
		--tree-space-padding-between-branch-padding-between-small: var(
			--padding-padding-between-padding-between-sm
		);
		--tree-radius-branch-radius-small: var(--radius-default-radius-sm);
		--navigation-schematic-layer-panel-divider-layerpanel-divider-default: var(
			--border-border-border-20
		);
		--navigation-schematic-layer-panel-divider-layerpanel-border-width: var(
			--radius-default-radius-sm
		);
		--navigation-schematic-toolbar-toolbar-radius-toolbar-rounded: var(
			--radius-default-radius-circle
		);
		--navigation-schematic-toolbar-toolbar-radius-toolbar-radius-na: var(
			--radius-default-radius-x-na
		);
		--navigation-primary-side-navigation-menu-item-default: var(
			--color-system-subtle-subtle-000
		);
		--navigation-primary-side-navigation-menu-item-hover: var(--color-system-subtle-subtle-800);
		--navigation-primary-side-navigation-menu-item-active: var(
			--color-system-subtle-subtle-900
		);
		--navigation-primary-side-navigation-spacing-padding-between-menu-item-between-icon: var(
			--padding-padding-between-padding-between
		);
		--navigation-primary-side-navigation-spacing-padding-y-menu-item-padding-y: var(
			--padding-padding-y-padding-y
		);
		--navigation-primary-side-navigation-radius-menu-item-radius: var(
			--radius-default-radius-sm
		);
		--navigation-primary-side-navigation-border-menu-item-stroke-default: var(
			--border-border-border-20
		);
		--navigation-primary-side-navigation-text-menu-item-txt: var(
			--fonts-colors-type-dark-primary-body
		);
		--navigation-primary-side-navigation-icon-menu-item: var(
			--color-system-document-range-page-800
		);
		--navigation-primary-side-navigation-icon-menu-item-icon-pho: var(--typography-icon-pho);
		--navigation-primary-side-navigation-border-menu-item-border-width-default: var(
			--border-border-width-rg
		);
		--navigation-primary-side-navigation-border-menu-item-border-width-active: var(
			--border-border-width-rg
		);
		--navigation-primary-side-navigation-spacing-padding-x-menu-item-padding-x: var(
			--padding-padding-x-padding-x
		);
		--navigation-primary-side-navigation-spacing-padding-between-menu-item-between-drop: var(
			--padding-padding-between-padding-between-sm
		);
		--button-states-icon-button-low-btn-bg: var(--color-system-subtle-subtle-0000);
		--button-states-icon-button-low-btn-bg-hover: var(--color-system-subtle-subtle-1000);
		--button-states-icon-button-low-btn-bg-active: var(--color-system-subtle-subtle-1050);
		--button-states-icon-button-low-btn-bg-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--button-states-icon-button-low-btn-focus: var(--color-system-subtle-subtle-075);
		--button-states-icon-button-low-outline-btn-outline: var(--color-system-subtle-subtle-100);
		--button-states-icon-button-low-outline-btn-bg: var(--color-system-subtle-subtle-0000);
		--button-states-icon-button-low-outline-btn-outline-hover: var(
			--color-system-subtle-subtle-200
		);
		--button-states-icon-button-low-outline-btn-bg-hover: var(--color-system-subtle-subtle-025);
		--button-states-icon-button-low-outline-btn-outline-active: var(
			--color-system-subtle-subtle-200
		);
		--button-states-icon-button-low-outline-btn-bg-active: var(
			--color-system-subtle-subtle-075
		);
		--button-states-icon-button-low-outline-btn-outline-disabled: var(
			--color-system-disabled-variables-action-disabled
		);
		--button-states-icon-button-low-outline-btn-focus: var(--color-system-subtle-subtle-050);
		--button-states-icon-button-icon-btn-icon-pho: var(--typography-icon-pho);
		--button-states-icon-button-icon-btn-icon-default: var(
			--color-system-document-range-page-800
		);
		--button-states-icon-button-icon-btn-icon-invert: var(--typography-icon-light-primary);
		--navigation-states-background-navigation-bg-light: var(
			--color-system-document-range-page-900
		);
		--navigation-states-background-navigation-flyout-bg: var(
			--navigation-states-background-navigation-bg-light
		);
		--navigation-states-background-navigation-dropdown-bg: var(
			--navigation-states-background-navigation-bg-light
		);
		--navigation-border-navigation-border-default: var(--border-border-border-20);
		--navigation-border-navigation-border-width: var(--radius-default-radius-sm);
		--navigation-states-background-navigation-toolbar-bg: var(
			--navigation-states-background-navigation-bg-dark
		);
		--navigation-radius-navigation-radius: var(--radius-default-radius-lg);
		--navigation-radius-navigation-radius-lg: var(--radius-default-radius-lg);
		--alert-general-default-bg: var(--color-system-subtle-subtle-800);
		--button-icon-btn-icon-pop: var(--typography-icon-colors-default-primary);
		--button-states-icon-button-icon-btn-icon-pop: var(
			--typography-icon-colors-default-primary
		);
		--navigation-states-background-navigation-bg-dark: var(--color-system-subtle-subtle-800);
		--navigation-schematic-toolbar-tool-states-dark-tool-bg: var(
			--color-system-subtle-subtle-900
		);
		--navigation-schematic-toolbar-tool-states-dark-tool-bg-hvr: var(
			--color-system-subtle-subtle-975
		);
		--navigation-schematic-toolbar-tool-states-dark-tool-bg-active: var(
			--color-system-subtle-subtle-975
		);
		--navigation-schematic-toolbar-tool-states-dark-tool-bg-selected: var(
			--color-system-primary-variables-action-primary
		);
		--navigation-schematic-toolbar-tool-states-dark-tool-bg-selected-hvr: var(
			--color-system-primary-variables-action-primary-hover
		);
		--card-icon-card-icon-invert: var(--typography-icon-light-primary);
		--card-icon-card-icon-pop: var(--typography-icon-colors-default-primary);
		--card-icon-card-icon-bg: var(--color-system-document-range-page-800);
		--card-text-card-txt-subtle: var(--typography-icon-dark-secondary);
		--card-icon-card-sub-icon: var(--typography-icon-dark-secondary);
		--card-icon-card-icon-bg-active: var(
			--color-system-primary-variables-focus-primary-focus-active
		);
		--badge-states-background-na-default-badge-na-bg: var(--color-system-subtle-subtle-0000);
		--badge-states-background-na-default-badge-na-txt: var(--typography-text-dark-primary-body);
		--badge-states-background-na-default-badge-na-icon: var(
			--color-system-document-range-page-800
		);
		--badge-states-background-na-subtle-badge-na-bg: var(--color-system-subtle-subtle-800);
		--badge-states-background-na-subtle-badge-na-border: var(--color-system-subtle-subtle-200);
		--badge-states-background-na-subtle-badge-na-txt: var(--typography-text-dark-primary-body);
		--badge-states-background-na-subtle-badge-na-icon: var(
			--color-system-document-range-page-800
		);
		--navigation-primary-side-navigation-text-menu-item-txt-invert: var(
			--fonts-colors-type-light-primary
		);
		--navigation-primary-side-navigation-icon-menu-item-invert: var(
			--color-system-document-range-page-800
		);
		--navigation-schematic-toolbar-tool-states-light-tool-bg-selected-active: var(
			--color-system-primary-variables-action-primary-active
		);
		--tree-icon-tree-icon-inactive: var(--typography-icon-dark-tertiary);
		--typography-icon-dark-tertiary: var(--fonts-colors-type-dark-subtle);
	}
}

/*!*****************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/render/workspace/layouts/workspace_header.css ***!
  \*****************************************************************************************************/
/* Workspace Header Color Classes - Using Design System Variables */

/* Import the design system variables */

/* Sparkle animation for workspace logo */
@keyframes workspace-sparkle {
	0%,
	100% {
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) brightness(1) hue-rotate(0deg);
	}

	20% {
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) brightness(1.05) hue-rotate(60deg)
			drop-shadow(0 0 4px rgba(255, 255, 255, 0.2))
			drop-shadow(0 0 6px rgba(255, 215, 0, 0.15));
	}

	40% {
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) brightness(1.03) hue-rotate(120deg)
			drop-shadow(0 0 3px rgba(255, 255, 255, 0.15))
			drop-shadow(0 0 5px rgba(0, 255, 255, 0.15));
	}

	60% {
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) brightness(1.04) hue-rotate(180deg)
			drop-shadow(0 0 5px rgba(255, 255, 255, 0.25))
			drop-shadow(0 0 7px rgba(255, 105, 180, 0.2));
	}

	80% {
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) brightness(1.02) hue-rotate(240deg)
			drop-shadow(0 0 3px rgba(255, 255, 255, 0.15))
			drop-shadow(0 0 5px rgba(138, 43, 226, 0.15));
	}
}

/* Workspace logo container styling */
.workspace-logo-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	cursor: pointer;
	padding: 8px 12px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	margin-left: 8px;
	gap: 12px;
}

.workspace-logo {
	width: 32px;
	height: 32px;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
	transition: all 0.3s ease;
	flex-shrink: 0;
	animation: workspace-sparkle 10s ease-in-out infinite;
}

.workspace-logo-container:hover .workspace-logo {
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)) brightness(1.1);
	transform: scale(1.05);
}

.workspace-app-section {
	margin-left: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	position: relative;
	white-space: nowrap;
	font-weight: 700;
	font-size: 21px;
	letter-spacing: 0;
	font-family:
		"IBM Plex Sans",
		nter,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		sans-serif;
	background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-shadow: none;
	color: #ffffff;
	text-align: center;
	line-height: 42px;
	font-style: normal;
}

.workspace-app-section::before {
	content: "";
	position: absolute;
	left: -6px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 20px;
	background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3), transparent);
}

/* Animation for notification badge */
@keyframes notification-pulse {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.7;
		transform: scale(1.1);
	}
}

#workspace-header-container {
	background: linear-gradient(
		6deg,
		var(--header-primary-color) 60%,
		var(--header-secondary-color) 100%
	);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Sidebar toggle icon rotation classes */
#sidebar-toggle-button.sidebar-toggle-rotated #sidebar-toggle-icon-wrapper {
	transform: rotate(180deg) !important;
}

#sidebar-toggle-button.sidebar-toggle-reset #sidebar-toggle-icon-wrapper {
	transform: rotate(0deg) !important;
}


/*# sourceMappingURL=main.a1fccf22b42842c2a32e.css.map*/