/* ==========================================================================
   01) Fonts
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

@font-face {
	font-family: 'Material Symbols Rounded';
	font-style: normal;
	font-weight: 100 700;
	src: url('/fonts/MaterialSymbolsRounded.woff2') format('woff2');
}

/* ==========================================================================
      02) Design Tokens / Global Variables
   ========================================================================== */

:root {
	--primary-color-r: 0;
	--primary-color-g: 112;
	--primary-color-b: 243;
	--primary-rgb: var(--primary-color-r, 0), var(--primary-color-g, 112), var(--primary-color-b, 243);
	--text-color-rgb: 255, 255, 255;
	--portal-brand: rgb(var(--primary-rgb));
	--portal-on-brand: rgb(var(--text-color-rgb));
	--portal-adaptive-rgb: var(--primary-rgb);
	--portal-adaptive-color: rgb(var(--portal-adaptive-rgb));
	--portal-brand-soft: rgba(var(--primary-rgb), 0.09);
	--portal-brand-medium: rgba(var(--primary-rgb), 0.16);
	--portal-brand-line: rgba(var(--primary-rgb), 0.38);
	--rz-text-font-family: var(--bs-body-font-family);
	--rz-steps-number-selected-background: var(--portal-brand);
	--rz-steps-title-selected-color: var(--portal-ink);
	--rz-on-primary: var(--portal-on-brand);
	--rz-primary: var(--portal-brand);
	--rz-primary-light: var(--portal-brand);
	--rz-primary-lighter: var(--portal-brand-soft);
	--rz-primary-dark: var(--portal-brand);
	--rz-primary-darker: var(--portal-brand);
	--rz-on-primary-lighter: var(--portal-ink);
	--rz-info-lighter: var(--portal-brand-soft);
	--rz-info: var(--portal-brand);
	--rz-layout-background-color: transparent;
	--rz-layout-body-background-color: transparent;
	--rz-base-background-color: var(--portal-surface);
	--rz-timeline-line-color: var(--portal-brand-line);
	--rz-datepicker-calendar-selected-hover-background-color: var(--rz-primary);
	--rz-datepicker-calendar-selected-background-color: var(--rz-primary);
	--rz-grid-loading-indicator-color: var(--rz-primary);
	--rz-grid-loading-indicator-background-color: var(--portal-brand-soft);
	--rz-profile-menu-toggle-button-color: var(--rz-primary);
	--rz-panel-menu-item-hover-color: var(--portal-ink);
	--rz-panel-menu-icon-color: var(--rz-on-primary);
	--rz-panel-menu-item-active-color: var(--portal-ink);
	--rz-panel-menu-item-hover-background-color: var(--portal-brand-soft);
	--rz-panel-menu-item-active-background-color: var(--portal-brand-medium);
	--rz-panel-menu-item-2nd-level-active-color: var(--portal-ink);
	--rz-panel-menu-item-2nd-level-active-background-color: var(--portal-brand-medium);
	--rz-panel-menu-item-2nd-level-color: var(--portal-ink);
	--rz-badge-font-weight: 700;
	--rz-series-1: var(--portal-adaptive-color);
	--rz-series-2: color-mix(in srgb, var(--portal-adaptive-color) 75%, white);
	--rz-series-3: color-mix(in srgb, var(--portal-adaptive-color) 65%, white);
	--rz-series-4: color-mix(in srgb, var(--portal-adaptive-color) 55%, white);
	--rz-series-5: color-mix(in srgb, var(--portal-adaptive-color) 45%, white);
	--rz-series-6: color-mix(in srgb, var(--portal-adaptive-color) 40%, white);
	--rz-series-7: color-mix(in srgb, var(--portal-adaptive-color) 35%, white);
	--rz-series-8: color-mix(in srgb, var(--portal-adaptive-color) 30%, white);
	--rz-series-9: color-mix(in srgb, var(--portal-adaptive-color) 90%, black);
	--rz-series-10: color-mix(in srgb, var(--portal-adaptive-color) 80%, black);
	--rz-series-11: color-mix(in srgb, var(--portal-adaptive-color) 70%, black);
	--rz-series-12: color-mix(in srgb, var(--portal-adaptive-color) 60%, black);
	--rz-series-13: color-mix(in srgb, var(--portal-adaptive-color) 50%, black);
	--rz-series-14: color-mix(in srgb, var(--portal-adaptive-color) 40%, black);
	--rz-series-15: color-mix(in srgb, var(--portal-adaptive-color) 30%, black);
	--rz-series-16: color-mix(in srgb, var(--portal-adaptive-color) 20%, black);
	--rz-gauge-arc-scale-color: var(--rz-series-4);
	--rz-gauge-arc-value-color: var(--rz-series-1);
	--portal-page: #f5f7f9;
	--portal-surface: #ffffff;
	--portal-neutral: #f6f8fa;
	--portal-ink: #14233d;
	--portal-text: #2f3b4d;
	--portal-muted-text: #6c788b;
	--portal-line: #dce2e9;
	--background-image-url: none;
	--background-image-opacity: 0.06;
	--background-image-size: auto;
	--background-image-repeat: repeat;
	--background-position: center;
	--bs-body-font-family: Montserrat;
	--rz-link-hover-text-decoration: none;
	--rz-dialog-title-padding-block: 1rem 0;
	--rz-dialog-title-padding-inline: 1rem;
	--rz-dialog-border-radius: 1rem;
	--rz-dialog-content-padding: 1rem;
	--rz-dropdown-item-padding: .25rem .5rem;
	--rz-security-code-input-min-height: 2.5rem;
	--rz-security-code-input-min-width: 1.5rem;
	--rz-card-shadow: 0 3px 12px rgba(20, 35, 61, 0.10);
	--rz-icon-grade: 200;
	--rz-icon-fill: 1;
	--rz-icon-weight: 700;
	--rz-icon-optical-size: 48;
	--rz-icon-font-family: 'Material Symbols Rounded';
	--rz-header-background-color: transparent;
	--rz-header-shadow: none;
	--rz-sidebar-width: 100%;
	--rz-sidebar-toggle-icon-width: 2.5rem;
	--rz-sidebar-toggle-icon-height: 2.5rem;
	--rz-footer-padding: 0.5rem 1rem;
	--rz-scrollbar-size: 12px;
	--rz-tabs-tab-padding-block: 0.5rem;
	--rz-tabs-tab-padding-inline: 0.5rem;
	--rz-tabs-padding: 0;
	--rz-tabs-background-color: transparent;
	--rz-timeline-axis-size: 1.5rem;
	--rz-timeline-item-padding: 0rem;
	--rz-grid-header-font-weight: 600;
	--rz-grid-cell-line-height: 2rem;
	--rz-profile-menu-top-item-background-color: transparent;
	--rz-panel-menu-item-padding-block: 0;
	--rz-panel-menu-item-padding-inline: 0;
	--rz-panel-menu-icon-margin-inline: 0;
	--rz-panel-menu-padding-inline: 16px;
	--rz-panel-menu-padding-block: 0;
	--rz-panel-menu-item-background-color: transparent;
	--rz-panel-menu-item-border: none;
	--rz-panel-menu-item-border-radius: 1rem;
	--rz-panel-menu-icon-font-size: 22px;
	--rz-panel-menu-icon-height: 32px;
	--rz-panel-menu-icon-width: 32px;
	--rz-panel-menu-icon-2nd-level-icon-size: 32px;
	--rz-panel-menu-item-2nd-level-border-radius: 1rem;
	--rz-panel-menu-item-2nd-level-font-size: 1.1rem;
	--rz-panel-menu-item-2nd-level-padding-block: 1rem;
	--rz-panel-menu-item-2nd-level-padding-inline: 0.5rem;
	--rz-panel-menu-item-2nd-level-offset: 3rem;
	--rz-panel-menu-item-2nd-level-font-weight: 500;
	--rz-series-17: #6C63FF;
	--rz-series-18: #FF6C63;
	--rz-series-19: #FFB74D;
	--rz-series-20: #4DB6AC;
	--rz-series-21: #9575CD;
	--rz-series-22: #F06292;
	--rz-series-23: #64B5F6;
	--rz-series-24: #4CAF50;
	--masonryGap: 12px;
}

/* ==========================================================================
      03) Reset / Base
      ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

html {
	width: 100%;
	height: 100%;
}

body {
	font-family: var(--bs-body-font-family);
	background: var(--portal-page);
	color: var(--portal-text);
	width: 100%;
	height: 100%;
}

#app {
	height: 100%;
	position: relative;
	isolation: isolate;
}

#maintenance {
	display: none;
	justify-content: center;
	align-items: center;
	height: 100%;
}

canvas {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}

.cls-1 {
	fill: white;
}

.valid.modified:not([type=checkbox]) {
	outline: none;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
	transition: background-color 0s 600000s, color 0s 600000s !important;
}

/* ==========================================================================
      04) Animations
      ========================================================================== */

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

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

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
      05) Components - Upload / Drag & Drop
      ========================================================================== */

.drop-area {
	border: 2px dashed #bbb;
	padding: 30px;
	text-align: center;
	cursor: pointer;
	background: #fafbfc;
	transition: background 0.2s;
	border-radius: 0.5rem;
}

	.drop-area.dragging {
		background: var(--portal-brand-soft);
		border-color: var(--portal-brand);
	}

.uploaded-file-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1rem;
	justify-items: center;
	margin-top: 1rem;
	align-items: stretch;
	max-width: 100%;
	max-height: 50vh;
	overflow: auto;
	padding: 0.5rem;
}

.file-card {
	background: var(--portal-surface);
	border-radius: 12px;
	box-shadow: var(--rz-card-shadow);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.7rem 0.7rem 0.6rem 0.7rem;
	min-width: 170px;
	max-width: 200px;
	width: 100%;
	min-height: 140px;
	text-align: center;
	font-size: 0.92rem;
	height: 100%;
	transition: box-shadow 0.17s;
}

	.file-card:hover {
		box-shadow: 0 4px 20px rgba(0,0,0,0.14);
	}

.file-name {
	font-size: 0.95rem;
	font-weight: 500;
	margin-bottom: 0.15rem;
	word-break: break-all;
}

.file-size {
	font-size: 0.82rem;
	color: #999;
	margin-bottom: 0.3rem;
}

.file-remove-btn {
	margin-top: auto;
	width: 90%;
	font-size: 0.95em;
}

/* ==========================================================================
      06) Components - Skeleton / Cards / Buttons
      ========================================================================== */

.animated-background {
	animation-duration: 3s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: placeHolderShimmer;
	animation-timing-function: linear;
	background-image: -webkit-gradient(linear, left center, right center, from(#f6f7f8), color-stop(.2, #edeef1), color-stop(.4, #f6f7f8), to(#f6f7f8));
	background-image: -webkit-linear-gradient(left, transparent 0%, var(--portal-brand-soft) 20%, var(--portal-brand-soft) 40%, transparent 60%, transparent 80%, transparent 100%);
	background-size: 200% 100%;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 1rem;
	overflow: hidden;
}

.entity-card-container {
	position: relative;
	overflow: hidden;
	padding: 1rem;
	border-radius: 1rem;
	background-color: var(--portal-surface);
	box-shadow: var(--rz-card-shadow);
	transition: transform 0.5s;
}

	.entity-card-container:hover {
		transform: scale(1.02);
		box-shadow: 0 5px 16px rgba(20, 35, 61, 0.14);
		cursor: pointer;
	}

.image-button {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	position: absolute;
	top: 0;
	height: 122px;
	width: 122px;
	left: 0;
	padding: 0;
	border: none;
	opacity: 0;
	transition: opacity 0.5s;
	background-color: var(--portal-brand);
	color: var(--portal-on-brand);
}

	.image-button:hover {
		opacity: 1;
		transition: opacity 0.25s;
	}

.rz-hover-reveal {
	--rz-collapsed-width: 2.75rem;
	--rz-text-max-width: 30ch;
	--rz-expanded-padding: .75rem;
	--rz-gap: .5rem;
	--rz-speed: 220ms;
	--rz-expanded-max-width: calc( var(--rz-collapsed-width) + var(--rz-text-max-width) + var(--rz-gap) + var(--rz-expanded-padding) );
	width: max-content;
	max-width: var(--rz-collapsed-width);
	min-width: var(--rz-collapsed-width);
	overflow: hidden;
	white-space: nowrap;
	padding-inline: 0;
	transition: max-width var(--rz-speed) ease, padding-inline var(--rz-speed) ease;
}

	.rz-hover-reveal .rz-button-box {
		display: inline-flex;
		align-items: center;
		justify-content: flex-start;
		overflow: hidden;
		width: max-content;
	}

	.rz-hover-reveal .rz-button-icon-left,
	.rz-hover-reveal .rz-button-icon-right,
	.rz-hover-reveal .rzi {
		margin: 0;
		flex: 0 0 var(--rz-collapsed-width);
		width: var(--rz-collapsed-width);
		min-width: var(--rz-collapsed-width);
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rz-hover-reveal .rz-button-text {
		display: inline-block;
		max-width: 0;
		opacity: 0;
		overflow: hidden;
		white-space: nowrap;
		margin-inline-start: 0;
		transition: max-width var(--rz-speed) ease, opacity 160ms ease, margin-inline-start var(--rz-speed) ease;
	}

	.rz-hover-reveal:hover,
	.rz-hover-reveal:focus-visible,
	.rz-hover-reveal:focus-within {
		max-width: var(--rz-expanded-max-width);
		padding-inline-end: var(--rz-expanded-padding);
	}

		.rz-hover-reveal:hover .rz-button-text,
		.rz-hover-reveal:focus-visible .rz-button-text,
		.rz-hover-reveal:focus-within .rz-button-text {
			max-width: var(--rz-text-max-width);
			opacity: 1;
		}

.rz-hover-reveal-sm {
	--rz-collapsed-width: 28px;
}

.rz-hover-reveal-md {
	--rz-collapsed-width: 40px;
}

.rz-hover-reveal-lg {
	--rz-collapsed-width: 3.25rem;
}

.button-with-badge {
	display: flex;
	position: relative;
}

	.button-with-badge:hover .hover-hide-badge,
	.button-with-badge:focus-within .hover-hide-badge {
		opacity: 0;
		visibility: hidden;
		transform: scale(.85);
		pointer-events: none;
		transition-delay: 0s;
	}

.invoice-details {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 24px;
	font-family: var(--bs-body-font-family);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	row-gap: 4px;
	padding: 4px;
	border-radius: .5rem;
	border: .25rem solid var(--portal-brand-soft);
	width: auto;
}

	.invoice-details dt,
	.invoice-details dd {
		margin: 0;
	}

	.invoice-details dt {
		font-weight: normal;
	}

/* ==========================================================================
      07) Components - Custom Grid / Masonry
      ========================================================================== */

.grid {
	margin: 0;
	position: relative;
	--gut: var(--masonryGap);
	--cols: 10;
	--unit: calc((100% - (var(--gut) * (var(--cols) - 1))) / var(--cols));
}

.grid-sizer {
	width: var(--unit);
}

.gutter-sizer {
	width: var(--gut);
}

.grid-item-width-100 {
	width: 100%;
}

.grid-item {
	--span: 1;
	width: calc((var(--unit) * var(--span)) + (var(--gut) * (var(--span) - 1)));
}

.grid-item-inner {
	padding: 0.5rem;
	border-radius: 0.5rem;
	border: 4px solid var(--portal-line);
	background: var(--portal-surface);
	box-shadow: 0 2px 7px rgba(20, 35, 61, 0.07);
}

.grid-item:not(:last-child) {
	margin-bottom: var(--gut);
}

.custom-grid-item-label {
	margin-top: 0 !important;
	padding: 0.5rem;
	background-color: var(--portal-neutral);
	border: 2px solid var(--portal-line);
	color: var(--portal-ink);
	border-radius: 0.25rem;
	width: fit-content;
	font-size: 18px;
}

.w-1 {
	--span: 1;
}

.w-2 {
	--span: 2;
}

.w-3 {
	--span: 3;
}

.w-4 {
	--span: 4;
}

.w-5 {
	--span: 5;
}

.w-6 {
	--span: 6;
}

.w-7 {
	--span: 7;
}

.w-8 {
	--span: 8;
}

.w-9 {
	--span: 9;
}

.w-10 {
	--span: 10;
}

/* ==========================================================================
      08) Radzen - Common Overrides
      ========================================================================== */

.rz-legend-item-text {
	max-width: 110px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.chartjs-chart {
	position: relative;
	width: 100%;
	height: 80%;
	min-height: 0;
	z-index: 5;
}

	.chartjs-chart canvas {
		display: block;
	}

.chartjs-pie-layout {
	display: grid;
	grid-template-columns: minmax(130px, 1fr) minmax(130px, 240px);
	gap: 1rem;
	position: relative;
	width: 100%;
	height: 80%;
	min-height: 0;
	z-index: 5;
}

.chartjs-canvas-wrap {
	position: relative;
	z-index: 1;
	min-width: 0;
	min-height: 0;
}

	.chartjs-canvas-wrap canvas {
		position: relative;
		z-index: 2;
		pointer-events: auto;
	}

.chartjs-html-legend {
	min-height: 0;
	max-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
	z-index: 1;
}

	.chartjs-html-legend ul {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.chartjs-html-legend li {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		cursor: pointer;
		font-size: 0.875rem;
		line-height: 1.2;
	}

		.chartjs-html-legend li span:first-child {
			width: 0.75rem;
			height: 0.75rem;
			flex: 0 0 auto;
			border-radius: 2px;
		}

		.chartjs-html-legend li span:last-child {
			min-width: 0;
			overflow-wrap: anywhere;
		}

.chartjs-html-tooltip {
	position: fixed;
	z-index: 9999;
	pointer-events: none;
	background: rgba(17, 24, 39, 0.95);
	color: white;
	border-radius: 4px;
	padding: 0.5rem 0.65rem;
	font-size: 0.875rem;
	line-height: 1.25;
	max-width: min(320px, calc(100vw - 16px));
	white-space: normal;
	overflow-wrap: anywhere;
	opacity: 0;
	transition: opacity 120ms ease;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.chartjs-html-tooltip-title {
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.chartjs-html-tooltip-body {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.chartjs-html-tooltip-color {
	width: 1rem;
	height: 1rem;
	border-radius: 2px;
	border: 1px solid white;
	flex: 0 0 auto;
}

.rz-card {
	background-color: var(--portal-surface);
	border-radius: 1rem;
}

.rz-text-overline {
	font-weight: 600;
	font-size: 14px;
	line-height: 1.333em;
	color: var(--portal-muted-text);
	margin-bottom: 4px;
	word-break: break-word;
}

.rz-text-body1 {
	font-weight: 600;
	font-size: 16px;
	line-height: 1.167em;
	word-break: break-word;
}

.rz-text-h3 {
	font-weight: 600;
	font-size: 2.5rem;
	line-height: 1.167em;
}

a:-webkit-any-link {
	text-decoration: none;
}

.rz-link {
	color: var(--portal-ink);
}

	.rz-link:hover {
		outline: 0;
		color: var(--portal-ink);
		text-decoration: underline;
		text-decoration-color: var(--portal-brand);
		text-decoration-thickness: 2px;
		text-underline-offset: 0.2em;
	}

.rz-breadcrumb-item > .rz-link {
	border: 1px solid #eff1f6;
	background-color: #fff;
	border-radius: 4px;
	align-items: center;
	padding: 4px 4px;
	font-weight: 500;
	line-height: 1em;
	text-decoration: none;
	transition: box-shadow .3s, border-color .3s, background-color .3s, color .3s;
	display: flex;
	box-shadow: 0 0 4px rgba(20, 20, 43, .09);
}

.notification-header-text {
	font-size: clamp(0.5rem, 3cqw, 1rem);
	text-wrap: nowrap;
}

.rz-dropdown-item {
	font-weight: 600;
	margin-inline: .5rem;
	margin-block: .25rem 0;
	border-radius: .25rem;
}

	.rz-dropdown-items li.rz-state-highlight, .rz-dropdown-item.rz-state-highlight {
		border-radius: .25rem;
		background: var(--portal-brand-soft);
		color: var(--portal-ink);
	}

	.rz-dropdown-items li:hover, .rz-dropdown-item:hover {
		border-radius: .25rem;
	}

/* ==========================================================================
      09) Radzen - Panel Menu / Navigation
      ========================================================================== */
.desktop-nav.rz-panel-menu {
	display: flex;
	background-color: transparent;
	padding: 0 16px;
	height: 100%;
	align-items: center;
	scrollbar-width: none;
}

.rz-panel-menu .rz-navigation-item-wrapper {
	margin-right: 0px;
	height: 100%;
	display: flex;
	align-items: center;
}

	.rz-panel-menu .rz-navigation-item-wrapper:hover a > i,
	.rz-panel-menu .rz-navigation-item-wrapper:active a > i {
		font-variation-settings: 'FILL' 1, 'wght' 500;
		transition: 0.1s;
		color: var(--rz-on-primary) !important;
	}

.rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon {
	font-variation-settings: 'FILL' 1, 'wght' 500;
	transition: 0.1s;
	color: var(--rz-on-primary);
}

.rz-panel-menu .rz-navigation-item {
	height: 100%;
}

.rz-panel-menu .rz-navigation-item-link {
	height: 100%;
	padding: 0 0.5rem;
	text-wrap: nowrap;
}

	.rz-panel-menu .rz-navigation-item-link:active {
		background: radial-gradient(circle, transparent 1%, var(--portal-brand-soft) 1%) center / 15000%;
	}

	.rz-panel-menu .rz-navigation-item-link:not(.rz-state-disabled):active {
		background-color: var(--portal-brand-soft);
	}

ul.rz-panel-menu.twofactor-menu .rz-navigation-item-link {
	padding: 1rem 0.5rem;
	width: 100%;
	font-size: 1.5rem;
}

	ul.rz-panel-menu.twofactor-menu .rz-navigation-item-link .rz-navigation-item-icon {
		height: 1.5rem;
		width: 1.5rem;
		font-size: 1.5rem;
	}

.rz-timeline {
	justify-content: center;
}

.timeline-empty {
	display: flex;
	justify-content: center;
	font-weight: 500;
	font-size: clamp(.9rem, 4vw, 1.1rem);
	line-height: 1.167em;
	align-items: center;
	height: 100%;
	color: var(--portal-muted-text);
	cursor: default;
}

.header-nav-icon {
	height: 32px;
	width: 32px;
	background-color: var(--portal-brand);
	border-radius: 50%;
	color: var(--portal-on-brand);
	font-variation-settings: 'FILL' 0, 'wght' 400;
	font-size: 24px;
}

.rz-popup.winvs_popup {
	position: absolute;
	left: 0 !important;
	top: 0 !important;
	width: 100%;
	height: 100%;
	background-color: var(--portal-brand-soft);
}

.rz-security-code {
	width: 100%;
	margin-bottom: 2rem;
}

.rz-breadcrumb-item + .rz-breadcrumb-item::before {
	content: "/";
	font-size: 1.3rem;
	color: var(--portal-muted-text);
}

.winvs-primary-color {
	color: var(--portal-brand) !important;
}

.winvs-gradient-bg {
	background-image: linear-gradient(to right, var(--portal-surface), var(--portal-brand));
}

.portal-neutral-surface,
.winvs-contact-card-bg,
.winvs-primary-bg {
	background-color: var(--portal-neutral) !important;
	border: 1px solid var(--portal-line);
	box-shadow: none !important;
	border-radius: .5rem !important;
}

.desktop-nav .rz-sidebar {
	width: 100%;
	position: relative;
	background-color: transparent;
	color: var(--rz-sidebar-color, var(--portal-ink));
	border-right: var(--rz-sidebar-border-inline-end, none);
	z-index: var(--rz-sidebar-z, 100);
	opacity: 1;
	transition: var(--rz-transition-all, all 0.2s ease);
}

.rz-sidebar-toggle {
	color: var(--portal-brand);
	margin: 0 1rem;
	padding: 0;
}

	.rz-sidebar-toggle:hover {
		color: var(--portal-brand);
		background: var(--portal-brand-soft) !important;
	}

.winvs-grid-button {
	margin-left: 15px;
	border-radius: 2rem !important;
	height: 14px;
}

.main-header-bg {
	background-color: var(--portal-surface) !important;
}

.winvs-primary-button,
.main-counter {
	background-color: var(--portal-brand) !important;
	color: var(--portal-on-brand) !important;
}

.winvs-secondary-button {
	background: var(--portal-surface) !important;
	box-shadow: inset 0 0 0 var(--rz-border-width, 1px) var(--portal-brand) !important;
	color: var(--portal-ink) !important;
}

/* ==========================================================================
      10) Pages - Login
      ========================================================================== */

.login-header-text {
	color: white;
	font-weight: bold;
	margin: 0;
}

.login-form-container {
	opacity: 1;
	transition: opacity 0.2s ease;
}

	.login-form-container.fade-out {
		opacity: 0.3;
		transition: opacity 0.5s ease;
		pointer-events: none;
	}

.login-field-message {
	background-color: red;
	color: white;
	border-radius: 0.2rem;
	display: flex;
	margin-bottom: 5px;
	justify-content: center;
	align-items: center;
	padding: 5px;
}

.login-button-container {
	display: flex;
	align-items: center;
}

.login-card {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 300px;
	border-radius: 1rem;
}

.sign-in-button {
	width: 100%;
	padding: 10px;
	font-size: 16px;
	font-weight: bold;
	color: var(--portal-on-brand);
	background-color: var(--portal-brand);
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

	.sign-in-button:hover {
		background-color: var(--portal-brand);
		box-shadow: 0 5px 12px rgba(20, 35, 61, 0.18);
	}

/* ==========================================================================
      11) Layout - Header / Footer / App Shell
      ========================================================================== */

.main-footer-container {
	width: 100%;
	background-color: var(--portal-surface);
	display: none;
}

.main-footer {
	padding: 0.5rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1920px;
	margin: 0 auto;
}

.nav-notification,
.nav-search {
	border-radius: 50%;
	background-color: inherit;
	border: none;
	padding: 0;
	margin: 0 15px 0 0;
	width: 20px;
	height: 20px;
	position: relative;
}

.nav-notification-badge {
	position: absolute;
	top: -5px;
	left: 26px;
	height: max-content;
	width: max-content;
	margin: 0 !important;
	padding: 2px 5px;
	font-size: .8rem;
	z-index: 20;
	border: 2px solid;
}

	.nav-notification-badge.badge-right {
		right: -8px;
		left: unset;
	}

.nav-header-center {
	display: flex;
	align-items: center;
	justify-content: space-between;
	justify-self: center;
	max-width: 100%;
}

.nav-header-end {
	display: flex;
	align-items: center;
	justify-self: end;
}

.winvs-nav-search {
	width: 100%;
}

	.winvs-nav-search > div {
		margin: 0;
		border-radius: 1rem;
		height: 3.5rem;
	}

.main-header-container {
	background-color: var(--portal-surface);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	z-index: 10;
}

.header-bottom-container {
	height: 3.5rem;
}

.wrapper {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.main-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	height: 4.5rem;
	position: relative;
	justify-content: space-between;
	max-width: 1920px;
	margin: 0.5rem auto;
}

.nav-logo-container {
	height: 100%;
	display: flex;
	align-items: center;
	padding: 4px 16px;
	justify-self: start;
}

.nav-logo {
	width: 100%;
	height: auto;
	max-height: 4rem;
	object-fit: contain;
	display: block;
}

.rz-custom-header {
	display: flex;
	align-items: center;
}

.main-logo-container {
	max-width: 50%;
	display: flex;
	align-items: center;
}

.main-logo {
	width: 100%;
	height: auto;
	max-height: 7rem;
	object-fit: contain;
	display: block;
}

.header-right {
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: transparent !important;
	position: absolute;
	right: 0;
	padding: 0;
	margin: 5px 0;
}

	.header-right > .right {
		padding: 0;
		background-color: transparent !important;
	}

.nav-separator-container {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 16px;
}

.nav-separator {
	border-top: 2px solid;
	border-color: var(--portal-brand-line);
}

hr.rounded {
	border-top: 5px solid;
	border-radius: 5px;
	border-color: var(--portal-brand);
	margin: -0.5rem 0 1rem 0;
	width: 25%;
	opacity: 1;
	background-color: var(--portal-brand);
}

	hr.rounded.minor {
		border-top: 4px solid;
		border-radius: 5px;
		border-color: var(--portal-brand);
		margin: 0;
		width: 30%;
		opacity: 1;
		background-color: var(--portal-brand);
	}

#app:before {
	content: ' ';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: var(--background-image-opacity);
	background-image: var(--background-image-url);
	background-size: var(--background-image-size);
	background-repeat: var(--background-image-repeat);
	background-position: var(--background-position);
	z-index: -1;
}

.main-body {
	padding: 16px !important;
	background-color: var(--rz-layout-body-background-color) !important;
	overflow: auto;
	margin: 0 !important;
	width: 100%;
}

.main-container {
	flex: 1;
	overflow: auto;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	grid-template-areas:
		"rz-header rz-header"
		"rz-sidebar rz-body"
		"rz-footer rz-footer";
	background-color: var(--rz-layout-background-color);
	width: 100%;
}

.content-wrapper {
	overflow: visible;
	display: grid;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	grid-template-columns: 1fr;
}

.thread {
	margin-bottom: .75rem;
}

.children {
	margin-top: .25rem;
}

#sidebar-mobile {
	display: none;
}

.desktop-nav.menu-item {
	position: relative;
	margin-right: 8px;
	display: flex;
	align-items: center;
	height: 70%;
}

.desktop-nav .rz-navigation-item-text {
	margin-left: 6px;
	font-family: var(--bs-body-font-family);
	color: black;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.333em;
}

#navbar-text {
	position: absolute;
	left: 250px;
}

.nav-links-container {
	max-width: 1920px;
	margin: 0 auto;
	font-size: 13px;
	color: white;
	font-weight: 500;
	display: flex;
	align-items: center;
	height: 100%;
	justify-content: flex-start;
	margin-top: 4px;
}

	.nav-links-container > a {
		margin-right: 10px;
		color: var(--portal-ink);
	}

/* ==========================================================================
      12) Loader
      ========================================================================== */

.loader-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--portal-brand-medium);
	border-radius: 1rem;
	overflow: hidden;
	backdrop-filter: saturate(180%) blur(1px);
}

	.loader-wrapper.detail-tab {
		position: relative;
		background-color: transparent;
		margin-left: 4px;
	}

	.loader-wrapper.login {
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.5s ease, visibility 0s linear 0.5s;
	}

		.loader-wrapper.login.fade-in {
			opacity: 1;
			visibility: visible;
			transition: opacity 0.5s ease;
		}

.loader {
	border: 5px solid;
	border-color: var(--portal-line);
	border-top: 5px solid var(--portal-brand);
	border-radius: 50%;
	width: 90px;
	height: 90px;
	animation: spin 2s linear infinite;
	margin: 5px 0;
}

	.loader.detail-tab {
		border: 2px solid;
		border-color: var(--portal-line);
		border-top: 2px solid var(--portal-brand);
		width: 14px;
		height: 14px;
	}

.loader-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size: 10px;
	color: var(--portal-ink);
	pointer-events: none;
}

/* ==========================================================================
      13) Radzen Steps - Icon
      ========================================================================== */

.case-steps ul,
.cod-steps ul,
.contact-steps ul {
	margin-left: 1rem;
}

	.case-steps ul li.rz-steps-item span.rz-steps-number,
	.cod-steps ul li.rz-steps-item span.rz-steps-number,
	.contact-steps ul li.rz-steps-item span.rz-steps-number {
		font-size: 20px;
		text-align: center;
		width: 36px;
		height: 36px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: transparent;
		position: relative;
	}

		.case-steps ul li.rz-steps-item span.rz-steps-number::before,
		.cod-steps ul li.rz-steps-item span.rz-steps-number::before,
		.contact-steps ul li.rz-steps-item span.rz-steps-number::before {
			content: var(--step-icon, '');
			font-family: 'Material Symbols Rounded';
			font-size: 24px;
			color: white;
			position: absolute;
			inset: 0;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}

/* ==========================================================================
      14) Radzen Upload (existing behavior)
      ========================================================================== */

.rz-fileupload-files {
	display: none;
}

.uploaded-file-list {
	padding-left: 0;
	list-style-type: none;
	margin-top: 1rem;
	max-height: 300px;
	overflow-y: auto;
}

	.uploaded-file-list li {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
	}

#ddUpload {
	left: 0;
	--rz-upload-button-bar-background-color: transparent;
	--rz-upload-button-bar-padding: 0;
}

	#ddUpload .rz-fileupload-buttonbar .rz-fileupload-choose {
		width: 100%;
		text-align: center;
		font-size: 16px;
		padding: 100px 0;
	}

/* ==========================================================================
      15) Details Page / Tabs
      ========================================================================== */

.details-tabs-container {
	overflow: hidden;
}

.detail-grid {
	max-height: calc(100vh - 240px);
	min-height: 100px;
	border-radius: 0 0 1rem 1rem;
}

.rz-tabview-nav {
	overflow-x: auto;
	overflow-y: hidden;
	text-wrap: nowrap;
	scrollbar-width: none;
	background-image: linear-gradient(to right, white, white), linear-gradient(to right, white, white), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
	background-position: left center, right center, left center, right center;
	background-repeat: no-repeat;
	background-color: var(--portal-surface);
	background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
	background-attachment: local, local, scroll, scroll;
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
}

.rz-tabview-panel {
	background-color: var(--portal-surface);
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 1rem;
	box-shadow: var(--rz-card-shadow);
}

.rz-tabview-nav li.rz-tabview-selected,
.rz-tabview-nav li.rz-state-active {
	box-shadow: inset 0 -2px 0 var(--portal-brand);
}

/* ==========================================================================
      16) Misc / Forms / IDs (kept to preserve existing logic)
      ========================================================================== */

#layout {
	position: relative;
}

#Calque_1 {
	position: absolute;
	height: 28px;
	left: 55px;
}

#Calque_2 {
	max-height: 80px;
}

.form-input {
	width: 100%;
}

	.form-input.password .rz-form-field-end {
		padding-inline: 0;
	}

.input-group {
	margin-bottom: 15px;
	text-align: left;
}

	.input-group label {
		display: block;
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 5px;
	}

.error-message {
	color: #ff5a5f;
	font-size: 12px;
	margin-top: 5px;
	display: block;
}

.options {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 20px;
	font-size: 12px;
	font-weight: 500;
}

	.options label {
		display: flex;
		align-items: center;
		margin-bottom: 12px;
	}

	.options input[type="checkbox"] {
		margin-right: 5px;
		accent-color: var(--rz-primary);
	}

.link {
	color: var(--portal-ink);
}

.rzi.winvs-card-icon {
	font-size: 36px !important;
}

#sidebar-body > ul {
	position: relative;
	height: 100%;
}

.winvs-settings-link {
	position: sticky;
	top: 100%;
}

.winvs-create-field {
	width: 100%;
}

	.winvs-create-field.currency .rz-form-field-end {
		width: 115px;
		padding-inline: 0;
	}

.required-asterisk {
	color: #d32f2f;
	margin-left: 4px;
}

.field-validation {
	color: #d32f2f;
	font-size: 0.85rem;
	margin-top: 4px;
}

.winvs-unread-icon {
	font-size: 0.5rem;
	align-items: center;
	padding: 0 4px;
	margin-right: 4px;
	background-color: var(--portal-brand);
	color: var(--portal-on-brand);
	font-weight: 700;
}

.setting-colorpicker {
	width: 100%;
}

/* ==========================================================================
      17) Chat Card
      ========================================================================== */

.chat-container {
	position: relative;
	display: flex;
	flex-direction: column;
	max-height: 50vh;
	min-height: 200px;
	height: 100%;
	border-radius: 0.5rem;
	background-color: var(--portal-neutral);
	box-shadow: none;
	border: 1px solid var(--portal-line);
}

.messages {
	flex: 1;
	overflow-y: auto;
	padding: 10px;
	position: relative;
	max-height: 50vh;
	transition: 1s ease;
}

	.messages.hidden {
		opacity: 0;
		pointer-events: none;
		max-height: 0;
		padding: 0;
	}

.date-pinned {
	position: sticky;
	top: 0;
	height: 0;
	overflow: visible;
	z-index: 100;
	pointer-events: none;
}

	.date-pinned .pill {
		position: absolute;
		top: 4px;
		left: 50%;
		transform: translateX(-50%);
		display: inline-block;
		padding: 4px 10px;
		border-radius: 12px;
		background-color: var(--portal-brand);
		color: var(--portal-on-brand);
		font-size: 12px;
		line-height: 18px;
		opacity: 0;
		transition: opacity .15s ease-out;
	}

		.date-pinned .pill:empty {
			display: none;
		}

	.date-pinned.is-visible .pill {
		opacity: 1;
	}

.date-separator {
	text-align: center;
	pointer-events: none;
	padding-top: 2px;
	justify-content: center;
	display: flex;
	padding-bottom: 0.6rem;
}

	.date-separator > .date {
		padding: 4px 10px;
		border-radius: 12px;
		background-color: var(--portal-brand);
		color: var(--portal-on-brand);
		font-size: 12px;
		font-weight: 500;
		line-height: 18px;
		z-index: 100;
	}

.message {
	margin-bottom: 10px;
}

.sender,
.message-subject {
	font-weight: 700;
	font-size: 13px;
	line-height: 1.333em;
	color: var(--portal-ink);
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

	.message-subject::before {
		font-family: "Material Symbols";
		content: "\f4f6";
		font-size: 1rem;
		color: var(--portal-muted-text);
		margin-right: 5px;
	}

	.sender::before {
		content: "\e853";
		font-family: "Material Symbols Rounded";
		font-size: 1rem;
		line-height: 1;
		font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 1.5rem;
		width: 1.5rem;
		height: 1.5rem;
		padding: 0;
		margin: 0;
		border-radius: 50%;
		background: var(--portal-brand);
		color: var(--portal-on-brand);
	}

.timestamp::before {
	font-family: "Material Symbols";
	content: "\e8b5";
	font-size: 1rem;
	color: var(--rz-primary);
	margin-right: 5px;
}

.content-message {
	margin: 0 0 5px 5px;
	word-wrap: break-word;
	font-weight: 600;
	font-size: 12px;
	line-height: 1.333em;
	color: var(--portal-ink);
}

.content-title {
	margin: 0 0 5px 5px;
	word-wrap: break-word;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.333em;
	color: var(--portal-muted-text);
}

.timestamp {
	color: var(--portal-muted-text);
	font-size: 12px;
	line-height: 1.6em;
	display: inline-flex;
	font-weight: 600;
}

.card-title {
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.25em;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0;
	color: var(--portal-ink);
}

	.card-title::after {
		content: "";
		display: block;
		width: 3.25rem;
		height: 0.2rem;
		border-radius: 999px;
		background: var(--portal-brand);
	}

.input-area {
	display: flex;
	padding: 10px;
	border-top: 2px solid var(--portal-line);
	align-items: center;
	transition: max-height 200ms ease;
	max-height: 64px;
}

	.input-area.expanded {
		max-height: 60vh;
		border-top: none;
	}

input {
	flex: 1;
	padding: 5px;
}

button {
	padding: 5px 10px;
}

.button-resend {
	width: 100% !important;
	margin-bottom: 0.5rem;
	opacity: 0.9 !important;
}

	.button-resend > span {
		font-size: .8rem;
	}

.bubble {
	--r: 1em;
	--t: 1.5em;
	display: flex;
	flex-direction: column;
	max-width: 90%;
	min-width: 75%;
	padding: 0.6rem;
	border-inline: var(--t) solid transparent;
	border-radius: calc(var(--r) + var(--t))/var(--r);
	background: transparent;
	color: var(--portal-ink);
	margin-bottom: 0.5rem;
	z-index: 99;
	position: relative;
	isolation: isolate;
	filter: drop-shadow(0 3px 8px rgba(20, 35, 61, 0.14));
}

	.bubble::before,
	.bubble::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(-1 * var(--t));
		right: calc(-1 * var(--t));
		border-inline: var(--t) solid transparent;
		border-radius: inherit;
		background: var(--portal-line);
		-webkit-mask: radial-gradient(100% 100% at var(--_p) 0, transparent 99%, #000 102%) var(--_p) 100% / var(--t) var(--t) no-repeat, linear-gradient(#000 0 0) padding-box;
		mask: radial-gradient(100% 100% at var(--_p) 0, transparent 99%, #000 102%) var(--_p) 100% / var(--t) var(--t) no-repeat, linear-gradient(#000 0 0) padding-box;
		pointer-events: none;
		z-index: -2;
	}

	.bubble::after {
		--bubble-inset: 2px;
		--bubble-inner-tail: calc(var(--t) - var(--bubble-inset));
		top: var(--bubble-inset);
		bottom: var(--bubble-inset);
		left: calc(-1 * var(--t) + var(--bubble-inset));
		right: calc(-1 * var(--t) + var(--bubble-inset));
		border-inline-width: var(--bubble-inner-tail);
		background: var(--portal-surface);
		-webkit-mask: radial-gradient(100% 100% at var(--_p) 0, transparent 99%, #000 102%) var(--_p) 100% / var(--bubble-inner-tail) var(--bubble-inner-tail) no-repeat, linear-gradient(#000 0 0) padding-box;
		mask: radial-gradient(100% 100% at var(--_p) 0, transparent 99%, #000 102%) var(--_p) 100% / var(--bubble-inner-tail) var(--bubble-inner-tail) no-repeat, linear-gradient(#000 0 0) padding-box;
		z-index: -1;
	}

.journal-item {
	--r: 1em;
	display: flex;
	flex-direction: column;
	padding: 0.5rem 1rem;
	border: 1px solid var(--portal-line);
	background: var(--portal-surface);
	color: var(--portal-ink);
	border-radius: 1rem;
	width: fit-content;
	max-width: 100%;
	margin: 1rem 0.5rem;
	box-shadow: 0 2px 7px rgba(20, 35, 61, 0.08);
}

.left {
	--_p: 0;
	border-bottom-left-radius: 0 0;
	place-self: start;
}

.right {
	--_p: 100%;
	border-bottom-right-radius: 0 0;
	place-self: end;
}

.rz-button-sm.rz-button-icon-only.button-chat {
	border-radius: 50%;
	width: 43px;
	height: 40px;
	margin-left: 0.5rem;
}

	.rz-button-sm.rz-button-icon-only.button-chat > .rz-button-box > .rzi {
		width: 1.5rem;
		height: 1.5rem;
		font-size: 1.5rem;
		line-height: 1.5rem;
	}

.message-unread-button {
	display: inline-flex;
	overflow: hidden;
	white-space: nowrap;
	align-self: start;
	align-items: center;
	cursor: pointer;
	max-width: 80px;
	padding: .15rem .5rem;
	font-size: .6rem;
	transition: max-width 0.5s ease;
	margin-bottom: .5rem;
}

	.message-unread-button.expanded {
		max-width: 140px;
	}

	.message-unread-button:hover {
		max-width: 140px;
		transition: max-width 0.5s ease;
		box-shadow: 0 0 20px rgba(var(--primary-rgb), .2);
	}

.history-card {
	background: var(--portal-surface);
	box-shadow: var(--rz-card-shadow);
	row-gap: 0.5rem;
}

	.history-card > .card-title {
		display: flex;
		align-items: center;
		gap: 0.65rem;
		margin: 0;
		color: var(--portal-ink);
	}

	.history-card > .rz-timeline.portal-neutral-surface,
	.history-card > .rz-timeline.winvs-primary-bg {
		background: var(--portal-neutral) !important;
		border: 1px solid var(--portal-line);
		box-shadow: none;
	}

	.history-card .messages {
		padding: 0.75rem;
	}

	.history-card .journal-item {
		width: min(100%, 52rem);
		max-width: calc(100% - 0.5rem);
		margin: 0.45rem 0 0.75rem;
		padding: 0.7rem 0.8rem;
	}

	.history-card .timeline-sender-container {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.3rem;
	}

	.timestamp::before,
	.history-card .content-title,
	.history-card .timestamp {
		color: var(--portal-muted-text);
	}

	.history-card .content-message,
	.history-card .sender {
		color: var(--portal-ink);
	}

	.history-card .journal-item a {
		color: var(--portal-ink) !important;
		text-decoration: underline;
		text-decoration-color: var(--portal-brand);
		text-decoration-thickness: 2px;
		text-underline-offset: 0.2em;
	}

/* ==========================================================================
      18) Datagrids / Misc UI
      ========================================================================== */
.sidebar-notification-badge {
	height: 32px;
	margin: 0 !important;
	padding: 8px 5px;
	font-size: 22px;
	min-width: 32px;
}

.rz-data-grid.rz-density-compact {
	--rz-grid-cell-line-height: 2rem;
}

.rz-datatable-loading-content .rzi-circle-o-notch:before {
	font-family: 'Material Symbols Rounded';
	content: "progress_activity";
}

.rz-datatable-loading-content {
	margin-top: 40px;
}

.winvs-datagrid-overview {
	max-height: calc(100vh - 320px);
	border-radius: 1rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.3px;
	min-height: 220px;
}

.datagrid-empty-text {
	font-size: 1em;
	text-align: center;
	margin: 1rem;
}

.grid-main-cell > span:last-child {
	display: flex;
	align-items: center;
}

.rz-column-picker {
	width: 7rem;
	overflow: auto;
}

.rz-custom-header > .rz-dropdown,
.rz-group-header > .rz-column-picker > .rz-dropdown {
	height: 2rem;
	border-radius: 1rem;
	font-size: 12px;
	padding: 4px 7px;
	justify-content: center;
}

.rz-button,
.rz-column {
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.7);
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.shadowbox-horizontal {
	background-image: linear-gradient(to right, white, white), linear-gradient(to right, white, white), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
	background-position: left center, right center, left center, right center;
	background-repeat: no-repeat;
	background-color: white;
	background-size: 20px 100%, 20px 100%, 10px 97%, 10px 97%;
	background-attachment: local, local, scroll, scroll;
}

.profile-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1999;
	background: transparent;
}

.profile-menu-root {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.profile-dropdown {
	position: absolute;
	top: 4rem;
	right: 1rem;
	z-index: 2000;
	padding: 0.5rem 0;
	box-shadow: var(--rz-context-menu-box-shadow, var(--rz-card-shadow));
	background-color: var(--rz-profile-menu-background-color, var(--portal-surface));
	border-radius: var(--rz-profile-menu-border-radius, 0.5rem);
	min-width: 160px;
}

.contract-dropdown-details {
	font-size: .9rem;
	color: var(--portal-muted-text);
}

	.contract-dropdown-details small + small::before {
		content: "/";
		margin: 0 .4rem;
		color: inherit;
	}

.profile-item {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 1rem;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: inherit;
	text-align: left;
}

	.profile-item:hover,
	.profile-item:focus {
		background: var(--rz-menu-item-hover-background-color, rgba(0,0,0,0.05));
		outline: none;
	}

.grid-group-row > td {
	background: var(--rz-grid-group-header-background, #f5f5f5) !important;
	border-left: none !important;
	border-inline-end: none !important;
	overflow: visible !important;
	padding-top: 0.35rem !important;
	padding-bottom: 0.35rem !important;
}

.grid-group-row .rz-frozen-cell {
	overflow: visible !important;
}

.grid-group-row > td.rz-frozen-cell-left.rz-frozen-cell-left-end,
.grid-group-row > td.rz-frozen-cell-left.rz-frozen-cell-left-end::after,
.grid-group-row > td.rz-frozen-cell-left.rz-frozen-cell-left-end .rz-cell-data {
	border-inline-end: none !important;
	box-shadow: none !important;
}

.grid-group-header-content {
	position: relative;
	z-index: 5;
	width: max-content;
	min-width: 100%;
	overflow: visible !important;
	white-space: nowrap;
}

.grid-group-title-text {
	overflow: visible;
	text-overflow: unset;
	white-space: nowrap;
}

.grid-group-row td,
.grid-group-row td > div,
.grid-group-row .rz-cell-data {
	overflow: visible !important;
}

/* ==========================================================================
      19) Responsive / Media Queries (kept breakpoints to preserve behavior)
      ========================================================================== */

@media (max-width: 768px) {

	.main-header {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	#sidebar-mobile.rz-sidebar {
		display: block !important;
		position: absolute !important;
		width: 100vw !important;
		top: 88px !important;
		bottom: 0 !important;
		z-index: 100;
	}

	#sidebar-body {
		display: none !important;
	}

	#navbar-text, #main-footer {
		display: none;
	}

	.rz-navigation-item-text {
		margin-left: 10px;
		font-size: 1rem;
	}

	.rz-panel-menu .rz-navigation-item-link {
		padding: 1rem 0.5rem;
		width: 100%;
	}

	.sidebar-notification-badge {
		padding: 12px 6px;
		font-size: 26px;
		height: 40px;
		min-width: 40px;
	}

	.rz-panel-menu .rz-navigation-menu .rz-navigation-item-icon,
	.rzi.rz-navigation-item-icon {
		height: 40px;
		width: 40px;
		font-size: 32px;
		background-color: var(--rz-primary);
		border-radius: 50%;
		color: var(--portal-on-brand) !important;
		font-variation-settings: 'FILL' 0, 'wght' 300;
	}

	.menu-item {
		padding-bottom: 0.5rem;
	}

	.desktop-view {
		display: none !important;
	}

	.rz-datatable-emptymessage-row {
		display: flex;
		height: 100px;
		align-items: center;
	}

	.rz-steps .rz-steps-item:not(:last-child):after {
		margin-inline-end: 0;
	}
}

@media (max-width: 500px) {
	.login-card {
		height: 100%;
		width: 100%;
		border-radius: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.rz-security-code {
		margin-bottom: 0;
	}
}

@media (max-width: 767.98px) {
	.rz-datatable-reflow .rz-data-row > td .rz-column-title {
		color: black;
		font-weight: 500;
	}

	.rz-datatable-data tr td:last-child:not(.rz-composite-cell),
	.rz-grid-table tr td:last-child:not(.rz-composite-cell) {
		width: 100%;
	}

	.rz-group-header-items, .rz-group-header-drop {
		display: none;
	}

	.winvs-primary-button.filter {
		display: none;
	}

	.datagrid-main-column {
		background-color: var(--portal-brand-soft);
	}

	.rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end {
		background-color: var(--portal-brand-medium) !important;
		border-right: none !important;
	}

		.rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end:before {
			background-color: var(--portal-brand-medium);
		}

		.rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end > .rz-column-title {
			font-size: 1.2rem;
		}

		.rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end > .rz-cell-data {
			text-wrap: wrap;
		}

	.winvs-datagrid-overview {
		max-height: calc(100vh - 300px);
	}

	.invoice-details {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 768.03px) {
	#sidebar-body {
		width: max-content !important;
		height: 600px;
		margin: 5rem 0 0 1rem;
		border-radius: 1rem;
		box-shadow: var(--rz-card-shadow);
		position: -webkit-sticky;
		position: sticky;
		min-width: fit-content;
	}

	.rz-sidebar-toggle {
		display: none;
	}
}

@media (max-width: 1439.98px) {
	.winvs-create-field {
		width: 100%;
	}
}

@media (max-width: 1919.98px) and (min-width: 1280px) {
	.grid {
		--cols: 6;
		--unit: calc((100% - (var(--gut) * (var(--cols) - 1))) / var(--cols));
	}

	.w-lg-1 {
		--span: 1;
	}

	.w-lg-2 {
		--span: 2;
	}

	.w-lg-3 {
		--span: 3;
	}

	.w-lg-4 {
		--span: 4;
	}

	.w-lg-5 {
		--span: 5;
	}

	.w-lg-6 {
		--span: 6;
	}
}

@media (max-width: 1279.98px) and (min-width: 1024px) {
	.grid {
		--cols: 4;
		--unit: calc((100% - (var(--gut) * (var(--cols) - 1))) / var(--cols));
	}

	.w-md-1 {
		--span: 1;
	}

	.w-md-2 {
		--span: 2;
	}

	.w-md-3 {
		--span: 3;
	}

	.w-md-4 {
		--span: 4;
	}
}

@media (max-width: 1023.98px) and (min-width: 768px) {
	.grid {
		--cols: 2;
		--unit: calc((100% - (var(--gut) * (var(--cols) - 1))) / var(--cols));
	}

	.w-sm-1 {
		--span: 1;
	}

	.w-sm-2 {
		--span: 2;
	}
}

@media (max-width: 767.98px) {
	.grid {
		--cols: 1;
		--unit: calc((100% - (var(--gut) * (var(--cols) - 1))) / var(--cols));
	}

	.w-xs-1 {
		--span: 1;
	}
}