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

/* Google Fonts import */
@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 palette (channels + derived colors) ---------------------- */
	/* NOTE: --primary-color-r/g/b must be defined elsewhere. */
	--primary-rgb: var(--primary-color-r), var(--primary-color-g), var(--primary-color-b);
	/* Back-compat aliases (keep existing logic working) */
	--primary-color: var(--primary-rgb);
	--gradient-to: var(--primary-rgb);
	--gradient-from: 255, 255, 255;
	/* Derived colors */
	--primary: rgb(var(--primary-rgb));
	--primary-bg-color: rgba(var(--primary-rgb), 0.15);
	--primary-bg-color-contrast: rgba(var(--primary-rgb), 0.25);
	/* App-level */
	--background-image-url: none;
	--background-image-opacity: 0.2;
	/* Typography */
	--bs-body-font-family: Montserrat;
	--rz-text-font-family: Montserrat;
	/* --- Radzen Steps ----------------------------------------------------- */
	--rz-steps-number-selected-background: var(--rz-primary);
	--rz-steps-title-selected-color: var(--rz-primary);
	/* --- Radzen Link ------------------------------------------------------ */
	--rz-link-hover-text-decoration: none;
	/* --- Radzen Dialog ---------------------------------------------------- */
	--rz-dialog-title-padding-block: 1rem 0;
	--rz-dialog-title-padding-inline: 1rem;
	--rz-dialog-border-radius: 1rem;
	--rz-dialog-content-padding: 1rem;
	/* --- Radzen Notification ---------------------------------------------- */
	/* --- Radzen Dropdown -------------------------------------------------- */
	--rz-dropdown-item-padding: .25rem .5rem;
	/* --- Radzen Security Code -------------------------------------------- */
	--rz-security-code-input-min-height: 2.5rem;
	--rz-security-code-input-min-width: 1.5rem;
	/* --- Radzen Card ------------------------------------------------------ */
	--rz-card-shadow: 0 2px 7px rgba(20, 20, 43, .09);
	/* --- Radzen palette --------------------------------------------------- */
	--rz-primary: rgb(var(--primary-rgb));
	--rz-primary-lighter: var(--primary-bg-color);
	--rz-on-primary-lighter: rgb(var(--primary-rgb));
	--rz-info-lighter: var(--primary-bg-color);
	--rz-info: var(--rz-primary);
	/* --- Radzen Icon ------------------------------------------------------ */
	--rz-icon-grade: 200;
	--rz-icon-fill: 1;
	--rz-icon-weight: 700;
	--rz-icon-optical-size: 48;
	--rz-icon-font-family: 'Material Symbols Rounded';
	/* --- Radzen layout ---------------------------------------------------- */
	--rz-header-background-color: none;
	--rz-header-shadow: none;
	--rz-layout-background-color: linear-gradient(180deg, #F5F7FA, #E9E9E9);
	--rz-layout-body-background-color: linear-gradient(180deg, #F5F7FA, #E9E9E9);
	--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;
	/* --- Detail tabs ------------------------------------------------------ */
	--rz-tabs-tab-padding-block: 0.5rem;
	--rz-tabs-tab-padding-inline: 0.5rem;
	--rz-tabs-padding: 0;
	--rz-tabs-background-color: transparent;
	/* --- Timeline --------------------------------------------------------- */
	--rz-timeline-axis-size: 1.5rem;
	--rz-timeline-item-padding: 0rem;
	--rz-timeline-line-color: var(--primary-bg-color);
	/* --- Radzen DatePicker ------------------------------------------------ */
	--rz-datepicker-calendar-selected-hover-background-color: var(--rz-primary);
	--rz-datepicker-calendar-selected-background-color: var(--rz-primary);
	/* --- Datagrids -------------------------------------------------------- */
	--rz-grid-header-font-weight: 600;
	--rz-grid-loading-indicator-color: var(--rz-primary);
	--rz-grid-loading-indicator-background-color: var(--primary-bg-color);
	--rz-grid-cell-line-height: 2rem;
	/* --- Profile menu ----------------------------------------------------- */
	--rz-profile-menu-toggle-button-color: var(--rz-primary);
	--rz-profile-menu-top-item-background-color: none;
	/* --- Navigation menu -------------------------------------------------- */
	--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-hover-color: black;
	--rz-panel-menu-item-background-color: transparent;
	--rz-panel-menu-item-border: none;
	--rz-panel-menu-item-border-radius: 1rem;
	--rz-panel-menu-icon-color: white;
	--rz-panel-menu-item-active-color: black;
	--rz-panel-menu-item-hover-background-color: var(--primary-bg-color);
	--rz-panel-menu-icon-font-size: 22px;
	--rz-panel-menu-item-active-background-color: var(--primary-bg-color-contrast);
	--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-active-color: black;
	--rz-panel-menu-item-2nd-level-active-background-color: var(--primary-bg-color-contrast);
	--rz-panel-menu-item-2nd-level-color: black;
	--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;
	/* --- Color palette for charts ---------------------------------------- */
	--rz-series-1: var(--rz-primary);
	/* Lighter (2–8) */
	--rz-series-2: color-mix(in srgb, var(--rz-primary) 75%, white);
	--rz-series-3: color-mix(in srgb, var(--rz-primary) 65%, white);
	--rz-series-4: color-mix(in srgb, var(--rz-primary) 55%, white);
	--rz-series-5: color-mix(in srgb, var(--rz-primary) 45%, white);
	--rz-series-6: color-mix(in srgb, var(--rz-primary) 40%, white);
	--rz-series-7: color-mix(in srgb, var(--rz-primary) 35%, white);
	--rz-series-8: color-mix(in srgb, var(--rz-primary) 30%, white);
	/* Darker (9–16) */
	--rz-series-9: color-mix(in srgb, var(--rz-primary) 90%, black);
	--rz-series-10: color-mix(in srgb, var(--rz-primary) 80%, black);
	--rz-series-11: color-mix(in srgb, var(--rz-primary) 70%, black);
	--rz-series-12: color-mix(in srgb, var(--rz-primary) 60%, black);
	--rz-series-13: color-mix(in srgb, var(--rz-primary) 50%, black);
	--rz-series-14: color-mix(in srgb, var(--rz-primary) 40%, black);
	--rz-series-15: color-mix(in srgb, var(--rz-primary) 30%, black);
	--rz-series-16: color-mix(in srgb, var(--rz-primary) 20%, black);
	/* Optional complementary (17–24) */
	--rz-series-17: #6C63FF; /* purple */
	--rz-series-18: #FF6C63; /* red */
	--rz-series-19: #FFB74D; /* orange */
	--rz-series-20: #4DB6AC; /* teal */
	--rz-series-21: #9575CD; /* lavender */
	--rz-series-22: #F06292; /* pink */
	--rz-series-23: #64B5F6; /* sky blue */
	--rz-series-24: #4CAF50; /* green */

	--rz-gauge-arc-scale-color: var(--rz-series-4);
	--rz-gauge-arc-value-color: var(--rz-series-1);
	/* --- Masonry ---------------------------------------------------------- */
	--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: linear-gradient(180deg, #F5F7FA, #E9E9E9);
	width: 100%;
	height: 100%;
}

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

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: #e6f7ff;
		border-color: #1890ff;
	}

.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: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.09);
	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(--primary-bg-color) 20%, var(--primary-bg-color) 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: white;
	box-shadow: 0 2px 7px rgba(20, 20, 43, .09);
	transition: transform 0.5s;
}

	.entity-card-container:hover {
		transform: scale(1.02);
		box-shadow: 0 0 20px rgba(var(--gradient-to), .2);
		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(--rz-primary);
}

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

.rz-hover-reveal {
	--rz-collapsed-width: 2.75rem;
	--rz-expanded-max-width: 20rem;
	--rz-text-max-width: 16rem;
	--rz-gap: 0.5rem;
	--rz-speed: 220ms;
	width: auto;
	min-width: 0;
	max-width: var(--rz-collapsed-width);
	overflow: hidden;
	white-space: nowrap;
	transition: max-width var(--rz-speed) ease;
}

	/* Keep the whole content centered always */
	.rz-hover-reveal .rz-button-box {
		display: inline-grid;
		grid-auto-flow: column;
		grid-auto-columns: max-content;
		align-items: center;
		justify-content: center;
		width: 100%;
		overflow: hidden;
	}

	/* Normalize icon spacing so hidden text doesn't affect centering */
	.rz-hover-reveal .rz-button-icon-left,
	.rz-hover-reveal .rz-button-icon-right,
	.rz-hover-reveal .rzi {
		margin: 0;
		flex-shrink: 0;
	}

	/* Text starts fully collapsed */
	.rz-hover-reveal .rz-button-text {
		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;
	}

	/* Expand button on hover/focus */
	.rz-hover-reveal:hover,
	.rz-hover-reveal:focus-visible {
		max-width: var(--rz-expanded-max-width);
	}

		/* Reveal text, but keep layout centered by the grid */
		.rz-hover-reveal:hover .rz-button-text,
		.rz-hover-reveal:focus-visible .rz-button-text {
			max-width: var(--rz-text-max-width);
			opacity: 1;
			margin-inline-start: var(--rz-gap);
		}

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

.grid {
	margin: 0;
	position: relative;
	--gut: 12px;
	--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(--primary-bg-color);
}

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

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

/* Span utilities (desktop) */
.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
   ========================================================================== */

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

/* Card */
.rz-card {
	background-color: #fff;
	border-radius: 1rem;
}

/* Text */
.rz-text-overline {
	font-weight: 600;
	font-size: 14px;
	line-height: 1.333em;
	color: #828aa3;
	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;
}

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

.rz-link {
	color: #000000;
}

	.rz-link:hover {
		outline: 0;
		text-decoration: none;
		color: rgb(var(--gradient-to));
	}

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

	.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: white !important;
	}

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

.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(--primary-bg-color) 1%) center / 15000%;
	}

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

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

/* Timeline */
.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(--primary-bg-color-contrast);
	cursor: default;
}

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

/* Popup */
.rz-popup.winvs_popup {
	position: absolute;
	left: 0 !important;
	top: 0 !important;
	width: 100%;
	height: 100%;
	background-color: var(--primary-bg-color);
}

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

/* Breadcrumb separator */
.rz-breadcrumb-item + .rz-breadcrumb-item::before {
	content: "/";
	font-size: 1.3rem;
	color: var(--primary-bg-color-contrast);
}

/* Theme helpers */
.winvs-primary-color {
	color: rgb(var(--gradient-to)) !important;
}

.winvs-gradient-bg {
	background-image: linear-gradient(to right, rgb(var(--gradient-from)), rgb(var(--gradient-to)));
}

.winvs-contact-card-bg {
	background-color: rgb(var(--gradient-to)) !important;
}

.winvs-primary-bg {
	background-color: var(--primary-bg-color) !important;
}

/* Sidebar + Toggle */
.desktop-nav .rz-sidebar {
	width: 100%;
	position: relative;
	background-color: transparent;
	color: var(--rz-sidebar-color);
	border-right: var(--rz-sidebar-border-inline-end);
	z-index: var(--rz-sidebar-z);
	opacity: 1;
	transition: var(--rz-transition-all);
}

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

	.rz-sidebar-toggle:hover {
		color: rgb(var(--primary-color));
		background: var(--primary-bg-color) !important;
	}

.winvs-grid-button {
	margin-left: 15px;
	border-radius: 50% !important;
	width: 14px;
	height: 14px;
}

.main-header-bg,
.winvs-primary-button,
.main-counter {
	background-color: rgb(var(--gradient-to)) !important;
}

.winvs-secondary-button {
	box-shadow: inset 0 0 0 var(--rz-border-width) rgb(var(--gradient-to)) !important;
	color: rgb(var(--gradient-to)) !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: #ffffff;
	background-color: #00c0ff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

	.sign-in-button:hover {
		background-color: #00aee6;
	}

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

.main-footer-container {
	width: 100%;
	background-color: white;
	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-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: white;
}

.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(--primary-bg-color);
}

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

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

/* Background image overlay */
#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: auto;
	background-repeat: repeat;
	background-position: center;
	z-index: -1;
}

/* Layout container */
.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: white;
	}

/* ==========================================================================
   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(--primary-bg-color);
	border-radius: 1rem;
	overflow: hidden;
}

	.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(--primary-bg-color);
	border-top: 5px solid rgb(var(--gradient-to));
	border-radius: 50%;
	width: 90px;
	height: 90px;
	animation: spin 2s linear infinite;
	margin: 5px 0;
}

	.loader.detail-tab {
		border: 2px solid;
		border-color: var(--primary-bg-color);
		border-top: 2px solid rgb(var(--gradient-to));
		width: 14px;
		height: 14px;
	}

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

/* ==========================================================================
   13) Radzen Steps - Icon Refactor (same behavior, less repetition)
   ========================================================================== */

/* Shared base for steps icon rendering */
.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; /* Hide default number */
		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;
			top: 0;
			left: 0;
			width: 100%;
			text-align: center;
			height: 100%;
		}

	/* Case steps icon mapping */
	.case-steps ul li.rz-steps-item:nth-child(1) {
		--step-icon: 'work';
	}

	.case-steps ul li.rz-steps-item:nth-child(2) {
		--step-icon: 'upload_file';
	}

	.case-steps ul li.rz-steps-item:nth-child(3) {
		--step-icon: 'summarize';
	}

	.case-steps ul li.rz-steps-item:nth-child(4) {
		--step-icon: 'check';
	}

	/* COD steps icon mapping */
	.cod-steps ul li.rz-steps-item:nth-child(1) {
		--step-icon: 'support';
	}

	.cod-steps ul li.rz-steps-item:nth-child(2) {
		--step-icon: 'info';
	}

	.cod-steps ul li.rz-steps-item:nth-child(3) {
		--step-icon: 'upload_file';
	}

	.cod-steps ul li.rz-steps-item:nth-child(4) {
		--step-icon: 'summarize';
	}

	.cod-steps ul li.rz-steps-item:nth-child(5) {
		--step-icon: 'check';
	}

	/* Contact steps icon mapping */
	.contact-steps ul li.rz-steps-item:nth-child(1) {
		--step-icon: 'account_circle';
	}

	.contact-steps ul li.rz-steps-item:nth-child(2) {
		--step-icon: 'summarize';
	}

	.contact-steps ul li.rz-steps-item:nth-child(3) {
		--step-icon: 'check';
	}

/* ==========================================================================
   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: white;
	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: white;
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 1rem;
}

/* ==========================================================================
   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: black;
}

.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: rgb(var(--primary-color));
}

.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(--primary-bg-color);
}

.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(--rz-primary);
		color: #fff;
		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(--rz-primary);
		color: #fff;
		font-size: 12px;
		line-height: 18px;
		z-index: 100;
	}

.message {
	margin-bottom: 10px;
}

.sender,
.message-subject {
	font-weight: 700;
	font-size: 13px;
	line-height: 1.333em;
	color: black;
	display: inline-flex;
}

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

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

.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: black;
}

.content-title {
	margin: 0 0 5px 5px;
	word-wrap: break-word;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.333em;
	color: #828aa3;
}

.timestamp {
	color: #888;
	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;
	margin-top: 0;
}

.input-area {
	display: flex;
	padding: 10px;
	border-top: 2px solid var(--primary-bg-color);
	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 #0000;
	border-radius: calc(var(--r) + var(--t))/var(--r);
	mask: radial-gradient(100% 100% at var(--_p) 0,#0000 99%,#000 102%) var(--_p) 100%/var(--t) var(--t) no-repeat, linear-gradient(#000 0 0) padding-box;
	background: var(--rz-primary-lighter);
	color: black;
	margin-bottom: 0.5rem;
	z-index: 99;
	position: relative;
}

.journal-item {
	--r: 1em;
	display: flex;
	flex-direction: column;
	padding: 0.5rem 1rem;
	border-inline: var(--t) solid #0000;
	background: var(--rz-primary-lighter);
	color: black;
	border-radius: 1rem;
	width: fit-content;
	max-width: 100%;
	margin: 1rem 0.5rem;
}

.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: 40px;
	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(--gradient-to), .2);
	}

/* ==========================================================================
   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;
}

.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);
	background-color: var(--rz-profile-menu-background-color);
	border-radius: var(--rz-profile-menu-border-radius);
	min-width: 160px;
}

.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)
   ========================================================================== */

/* Mobile view elements */
@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: white !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;
	}
}

/* Smallest view elements */
@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(--primary-bg-color);
	}

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

		.rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end:before {
			background-color: var(--primary-bg-color-contrast);
		}

		.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);
	}
}

@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%;
	}
}

/* Masonry responsive handlers */
@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;
	}
}