:root {
	--main-color: #351DC2;
	--focus-color: #d5d8e4;
}

.inline-icon {
	display: inline-block;
	vertical-align: -0.125em;
}

[data-theme="dark"] {
	--main-color: #351DC2;
	--focus-color: #7b7e9a;
}


.shepherd-modal-overlay-container.shepherd-modal-is-visible {
	opacity: 0.75 !important;
}

html, body {
	position: relative;
	width: 100%;
	height: 100%;
	font-size: 12px !important;
	/* MODERN UI */
	background-color: var(--bg-body, #FFF) !important;
}
.aside[collapsed="true"] {
	left: -220px !important;
}

/* .aside[collapsed="false"] {
	left: 0px !important;
} */

/* MODERN UI INIT */
.aside-menu .menu-nav {
	padding: 0 !important;
}

.brand, .aside-menu {
	background: var(--bg-aside, #f7f7f7);
}


/*  Code for banners */

/* .flex-root, .aside, .header, #drawer-elements, #portal-elements, #portal-elements-foreground {
	margin-top: 2rem !important;
} */

.highlighted-message {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.is-primary {
	background: var(--main-color) !important;
	color: #fff !important;
}

.is-light {
	background: var(--bg-surface-secondary, #f4f6f9) !important;
	color: var(--text-primary, #333) !important;
}

/* End Code for banners */

.menu-subnav {
	border-left: 2px solid var(--border-color, #ebedf3) !important;
    margin-left: 2.2rem !important;
}


.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item {
	min-height: 25px !important;
}
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link {
	min-height: 25px !important;
}
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-icon {
	flex: 0 0 30px !important;
}
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-text {
	font-size: 1rem !important;
	font-weight: 500 !important;
}
.aside-menu .menu-nav > .menu-item > .menu-link .menu-icon {
	flex: 0 0 30px !important;
}
.aside-menu .menu-nav > .menu-item > .menu-link .menu-text {
	font-size: 1.15rem !important;
    font-weight: 500 !important;
}
.aside-menu .menu-nav > .menu-item > .menu-heading .menu-icon svg, .aside-menu .menu-nav > .menu-item > .menu-link .menu-icon svg {
	height: 2rem !important;
	width: 2rem !important;
}
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-heading .menu-icon svg, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-icon svg {
	height: 1.8rem !important;
	width: 1.8rem !important;
}
.aside-menu .menu-nav > .menu-section .menu-text {
    font-weight: 500 !important;
}
.aside {
	box-shadow: none !important;
	border-right: 0.1rem solid var(--border-color, #ebedf3) !important;
}
.header {
	box-shadow: none !important;
	border-bottom: 0.1rem solid var(--border-color, #ebedf3) !important;
	height: 51px !important;
}
.header-menu-wrapper {
	height: 51px !important;
}
.card, .card-custom {
	border: 0 !important;
	box-shadow: none !important;
}
.help-engage {
	border: 0.1rem solid var(--border-color, #ebedf3) !important;
	border-radius: 1.5rem;
	background: var(--bg-surface-secondary, #f4f6f9);
}
.offcanvas-right {
	box-shadow: none !important;
    border-left: .1rem solid var(--border-color, #ebedf3) !important;
}

.offcanvas-overlay {
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	background: var(--bg-overlay, #0000004d);
}

.card-widget {
	border-radius: 1rem;
	border: 0.1rem solid var(--border-color, #ebedf3) !important;
	background: var(--bg-surface-secondary, #f4f6f9) !important;
}

.image-input-wrapper {
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
}
/* MODERN UI END */

/* ==========================================================================
   THEME-AWARE UTILITY CLASSES
   ========================================================================== */
.border-themed { border-color: var(--border-color) !important; }
.border-themed-light { border-color: var(--border-color-light) !important; }
.bg-themed { background-color: var(--bg-surface) !important; }
.bg-themed-secondary { background-color: var(--bg-surface-secondary) !important; }
.text-themed { color: var(--text-primary) !important; }
.text-themed-secondary { color: var(--text-secondary) !important; }

/* Teal button pattern (used in modal share links) */
.btn-teal-themed {
  background-color: var(--success) !important;
  border-color: var(--success) !important;
  color: var(--text-inverse) !important;
}

.btn-teal-themed:hover {
  background-color: #07b89a !important;
  border-color: #07b89a !important;
}

/* DARK MODE - Now handled by /dark-mode.css with CSS variables */

.multi-item {
	background: #ffffff73 !important;
    border-radius: .5rem !important;
}

@keyframes smoothScroll {
	from {
	  scroll-timeline-axis: block;
	}
	to {
	  scroll-timeline-axis: block;
	}
  }

html {
	scroll-behavior: smooth;
	-webkit-scroll-behavior: smooth;
	animation: smoothScroll var(--scroll-duration) cubic-bezier(0.45, 0.05, 0.55, 0.95);
	--scroll-duration: 1.2s;
}

body {
	color: var(--text-primary, #333);
	margin: 0;
	box-sizing: border-box;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	/* smooth scrolling */
	scroll-behavior: smooth;
	-webkit-scroll-behavior: smooth;
	animation: smoothScroll var(--scroll-duration) cubic-bezier(0.45, 0.05, 0.55, 0.95);
}


/* Customizes the whole scrollbar */
::-webkit-scrollbar {
	background: transparent; /* color of the entire scrollbar except the thumb */
	width: 8px; /* width of the entire scrollbar */
}

/* Customizes the background of the scrollbar track */
::-webkit-scrollbar-track {
	background: var(--scrollbar-track, #f5f5f5); /* color of the tracking area */
}

/* Customizes the scrollbar handle */
::-webkit-scrollbar-thumb {
	border-radius: 0.35rem; /* roundness of the scroll thumb */
	background: var(--scrollbar-thumb, #e3e5ea); /* color of the scroll thumb */
}

/* Changes the color of the scrollbar thumb when hovering or clicking on it */
::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-thumb-hover, #b7bcc5);
}


.flex-root,
.page,
.wrapper,
.content {
	overflow-y: overlay transparent !important;
	padding: 0 .25rem !important;
}

iframe {
	border-radius: 1.5rem;
}

.border-dashed {
	border-style: dashed !important;
}

.swal2-container, .swal2-html-container {
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

/* shadcn-like modal opening animation */
@keyframes modal-backdrop-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes modal-content-in {
	0% {
		opacity: 0;
		transform: scale(0.96) translateY(10px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* Uniform grayed backdrop for all modals (Bootstrap + Svelte) */
.modal {
	background-color: rgba(0, 0, 0, 0.45) !important;
	backdrop-filter: blur(4px) !important;
	-webkit-backdrop-filter: blur(4px) !important;
}

/* Bootstrap also creates a .modal-backdrop sibling; keep it transparent
   so it doesn't double-darken the overlay. */
.modal-backdrop {
	background-color: transparent !important;
}

/* Starting state: hidden and slightly scaled down/translated */
.modal.fade .modal-dialog {
	transition: none;
	transform: scale(0.96) translateY(10px);
	opacity: 0;
}

/* Final state: run the pop-in animation. Small delay helps Svelte-mounted modals. */
.modal.show .modal-dialog {
	animation: modal-content-in 220ms cubic-bezier(0.16, 1, 0.3, 1) 0.01s both;
}

.modal-backdrop.show {
	animation: modal-backdrop-in 200ms ease forwards;
}

.swal2-popup {
	animation: modal-content-in 220ms cubic-bezier(0.16, 1, 0.3, 1) 0.01s both;
}

a {
	color: var(--text-link, #351DC2);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	color: var(--text-link-hover, #1e0f87);
}

a:visited {
	color: var(--text-link, #351DC2);
}

label {
	display: block;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	-webkit-padding: 0.4em 0;
	padding: 0.4em;
	margin: 0 0 0.5em 0;
	box-sizing: border-box;
	border: 1px solid var(--border-input, #ccc);
	border-radius: 0.75rem;
}
/* input, select, textarea {
	outline: 1px solid #f0f0f0;
    border-top: 1px solid #fcfbfb;
}

input:focus, select:focus, textarea:focus, .form-control.form-control-solid:focus {
	outline: 1px solid #f0f0f0 !important;
    border-top: 1px solid #fafafa !important;
} */

.btn {
	border-radius: 0.75rem;
}

input:disabled {
	color: var(--text-muted, #ccc);
}

button {
	color: var(--text-primary, #333);
	background-color: var(--bg-surface-secondary, #f4f4f4);
	outline: none;
}

button:disabled {
	color: var(--text-muted, #999);
}

button:not(:disabled):active {
	background-color: var(--bg-active, #ddd);
}


/* .btn.btn-success:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-success:focus:not(.btn-text), .btn.btn-success.focus:not(.btn-text) {
    color: #ffffff;
    background-color: #116cff;
    border-color: #116cff;
} */
.min-w-2 {
	min-width: 4rem;
}
.min-w-3 {
	min-width: 6rem;
}
.min-w-4 {
	min-width: 8rem;
}
.min-w-5 {
	min-width: 10rem;
}
.min-w-6 {
	min-width: 12rem;
}
.min-w-7 {
	min-width: 14rem;
}
.min-w-10 {
	min-width: 20rem;
}
.min-w-15 {
	min-width: 30rem;
}

.max-w-6 {
	max-width: 12rem;
}
.max-w-7 {
	max-width: 14rem !important;
}
.max-w-8 {
	max-width: 16rem;
}
.max-w-12 {
	max-width: 24rem !important;
}

.gap-2 {
	gap: 0.5rem;
}

.gap-3 {
	gap: 1rem;
}

.gap-4 {
	gap: 2rem;
}

.w-fill {
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
    width: fill-available;
}

.text-underline:hover {
	text-decoration: underline;
}

.disable-link-btn {
	/*cursor: not-allowed !important;*/	
	pointer-events: none;
	opacity: 0.25;
	/*pointer-events: none;*/
}
.disable-link-btn:active {
	pointer-events: none;
}

.bottom-align-text {
	display: inline-flex;
	vertical-align: bottom;
}

.form-group .select2 {
	width: 100% !important;
}

.navi {
	word-break: break-word;
}

.fill-available-space-width {
	width: -webkit-fill-available;
}

.profile-fill {
	object-fit: cover;
	height: -webkit-fill-available !important;
    width: -webkit-fill-available !important;
}

.profile-container {
	overflow: hidden;
}

.svg-icon.warning-fill svg g [fill] {
	fill: #ffa800 !important;
}

.not-active-section {
	filter: blur(5px);
    pointer-events: none;
}

.blockUI.blockMsg.blockPage {
	width: fit-content !important;
}

/* Graphical Theme Custom*/

.btn.btn-clean .svg-icon svg g [fill] {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
    fill: #351DC2
}

.datatable.datatable-default.datatable-head-custom > .datatable-table > .datatable-head .datatable-row > .datatable-cell > span, .datatable.datatable-default.datatable-head-custom > .datatable-table > .datatable-foot .datatable-row > .datatable-cell > span {
    color: #3c4c65;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.05rem;
}

.datatable.datatable-default > .datatable-table > .datatable-body .datatable-row > .datatable-cell > span {
    font-size: 1.1rem !important;
}

.text-muted {
    color: var(--text-muted, #58585f) !important;
}


.datatable-detail table {
	width: 100% !important;
}

.datatable-detail {
	padding: 0 !important;
}



.notification {
	background-color: var(--bg-surface-secondary, #e9f0f6) !important;
	/* border-top: 0.05rem solid #ecedf3; */
    /* border-bottom: 0.05rem solid #ecedf3; */
	cursor:pointer;
	padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
	/* border-radius: 0rem !important; */
}

.notification:hover {
	background-color: var(--bg-hover, #d4dcea) !important;
}

.disabled-read-all {
	opacity: 0.8;
    pointer-events: none;
}
#toast-container > div {
	margin-top: 1rem;
	opacity: 1;
}

/*
button:focus {
	border-color: #666;
}
*/

.custom-popup {
	font-size: 2rem !important;
}

.custom-actions {
	/*position: absolute;
    bottom: 1rem; */
}

.signature-image {
	width: 100%
}

.content-result {
	width: 100%;
    text-align: right;
}

.custom-container #swal2-content {
	max-height: 100%;
	overflow: initial;
}

.fs-1-1 {
	font-size: 1.1rem;
}


.coming-soon-badge {
	background: #ff001b;
	color: #fff;
	border-radius:1rem;
	font-size: 0.65rem;
	display: inline-block;
	padding:0.5rem;
	height:1rem;
}

.coming-soon-item {
	opacity: 0.45;
}

.badge-notification {
	position: absolute !important;
    right: -0.35rem;
    top: -0.35rem;
    background: #ff001b;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 1rem;
    font-size: 0.65rem;
    display: inline-block;
    padding: 0.5rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    height: 1rem;
}


#undo-signature {
	position: absolute; 
	left: 3.4rem !important; 
	top: 2rem;
}

.subtitle-label {
	font-size: 1.25rem;
}

/* make the horizontal scroll thumb nicer for .datatable-table */
.datatable-table {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb, #e3e5ea) var(--scrollbar-track, #f1f1f1);
}

.datatable-table::-webkit-scrollbar {
  height: 8px;
}

.datatable-table::-webkit-scrollbar-track {
  background: var(--scrollbar-track, #f1f1f1);
  border-radius: 4px;
}

.datatable-table::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, #e3e5ea);
  border-radius: 4px;
  cursor: pointer;
}

.datatable-table::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, #bdc0c7);
}

.datatable-table:focus,
.datatable-table:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

.datatable.datatable-default > .datatable-table > .datatable-body .datatable-row {
	cursor: pointer;
}

.nav-item,
.nav-link {
	cursor: pointer;
}


/* .btn.btn-success {
    color: #ffffff;
    background-color: #0062ff;
    border-color: #0062ff;
} */

.bootstrap-select > .dropdown-toggle.btn-light, .bootstrap-select > .dropdown-toggle.btn-secondary {
	background-color: var(--bg-input, #F3F6F9) !important;
	border: 0 !important;
	padding: 0.6rem 1.2rem !important;
	border-radius: 0.75rem !important;
	border-top: 1px solid var(--bg-surface, #fff) !important;
	outline: 1px solid var(--border-input, #E4E6EF) !important;
}

.bootstrap-select.show > .dropdown-toggle.btn-light, .bootstrap-select.show > .dropdown-toggle.btn-secondary {
	border-color: var(--border-color, #fff) !important;
}

.btn.btn-light:focus:not(.btn-text) {
	background-color: var(--bg-hover, #E4E6EF) !important;
}

.margin-tb-2 {
	margin: 1rem 0 1rem 0;
}

.wizard-title-info {
	font-size: 2.2rem !important;
}
.wizard.wizard-2 {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.wizard.wizard-2 .wizard-nav {
padding: 0; }
.wizard.wizard-2 .wizard-nav .wizard-steps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 1rem 1.5rem; }
	.wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step .wizard-icon {
	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  -webkit-box-align: center;
	  -ms-flex-align: center;
	  align-items: center;
	  -webkit-box-pack: center;
	  -ms-flex-pack: center;
	  justify-content: center;
	  -webkit-transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
	  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
	  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
	  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
	  height: 40px;
	  width: 40px;
	  -ms-flex-negative: 0;
	  flex-shrink: 0;
	  margin-right: 1.5rem;
	  border-radius: 100%;
	  background-color: var(--bg-surface-secondary, #E4E6EF); }
	  .wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step .wizard-icon .wizard-number {
		font-size: 1.25rem;
		font-weight: 600;
		color: var(--text-inverse, #ffffff); }
	  .wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step .wizard-icon .wizard-check {
		display: none;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center; }
	.wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step .wizard-label {
	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  -webkit-box-orient: vertical;
	  -webkit-box-direction: normal;
	  -ms-flex-direction: column;
	  flex-direction: column;
	  -webkit-box-pack: center;
	  -ms-flex-pack: center;
	  justify-content: center; }
	  .wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step .wizard-label .wizard-title {
		color: var(--text-primary, #181C32);
		font-weight: 500;
		font-size: 1.1rem; }
	  .wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step .wizard-label .wizard-desc {
		color: var(--text-secondary, #7E8299); }
	.wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"] .wizard-icon {
	  background-color: #6a96dc;
	  -webkit-transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
	  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
	  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
	  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease; }
	  .wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"] .wizard-icon .wizard-number {
		color: #FFFFFF; }
	.wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"]:last-child .wizard-icon, .wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"] .wizard-icon {
	  background-color: #0062ff;
	  -webkit-transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
	  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
	  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
	  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease; }
	  .wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"]:last-child .wizard-icon .wizard-number, .wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"] .wizard-icon .wizard-number {
		display: none; }
	  .wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"]:last-child .wizard-icon .wizard-check, .wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"] .wizard-icon .wizard-check {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex; }
		.wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"]:last-child .wizard-icon .wizard-check i, .wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"] .wizard-icon .wizard-check i {
		  color: #ffffff; }
		.wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"]:last-child .wizard-icon .wizard-check .svg-icon svg g [fill], .wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"] .wizard-icon .wizard-check .svg-icon svg g [fill] {
		  -webkit-transition: fill 0.3s ease;
		  transition: fill 0.3s ease;
		  fill: #ffffff; }
		.wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"]:last-child .wizard-icon .wizard-check .svg-icon svg:hover g [fill], .wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"] .wizard-icon .wizard-check .svg-icon svg:hover g [fill] {
		  -webkit-transition: fill 0.3s ease;
		  transition: fill 0.3s ease; }
.wizard.wizard-2 .wizard-body {
width: 100%; }

@media (max-width: 991.98px) {
.wizard.wizard-2 {
display: block; }
.wizard.wizard-2 .wizard-nav {
  width: 100%;
  border-bottom: 1px solid var(--border-color, #EBEDF3); }
  .wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"]:after {
	content: none; }
.wizard.wizard-2 .wizard-body {
  width: 100%; } 

.custom-popup {
	width: 100%;
	height: 100%;
}
}

.swal2-styled.swal2-confirm {
    border: 0;
    border-radius: 0.25em;
    background: initial;
    background-color: #351DC2 !important;
    color: #fff;
    font-size: 1.0625em;
}

.swal2-popup .swal2-icon {
	margin: 2rem auto 0.6em;
}

/* Disable SweetAlert2 icon animations (icon appears statically; popup animation unaffected) */
.swal2-icon,
.swal2-icon * {
	animation: none !important;
}

.aside-menu .menu-nav > .menu-item > .menu-heading, .aside-menu .menu-nav > .menu-item > .menu-link {
	min-height: 37px;
	height: 37px;
}

.modal-content, .swal2-popup {
	border-radius: 1.25rem !important;
}

/* Cookie consent */
.privacypolicies-com---nb .cc-nb-main-container {
	background: #fff !important;
}

.privacypolicies-com---palette-light .cc-nb-okagree,
.privacypolicies-com---palette-light .cc-cp-foot-save {
	background-color: #351DC2 !important;
    border-radius: 0.35rem !important;
}

.privacypolicies-com---pc-dialog input[type="checkbox"].cc-custom-checkbox:checked+label:before {
	background-color: #351DC2 !important;
}

.cc-cp-foot-byline {
	display: none;
}

.privacypolicies-com---palette-light .cc-nb-reject {
	background-color: #767676 !important;
    border-radius: 0.35rem !important;
}

.privacypolicies-com---palette-light .cc-nb-changep {
	border-radius: 0.35rem !important;
}

.active-filter, .active-filter:focus {
	outline: 0.2rem solid #351dc2 !important;
}

input, select, .input-group  {
	border-radius: 0.75rem !important;
}

.link-share-group input {
	border-top-right-radius: 0rem !important;
	border-bottom-right-radius: 0rem !important;
}

.description-course p {
    margin: 0 !important;
	font-size: 10px !important;
}

/* Width utilities */

.w-xxs { min-width: 10rem; }
.w-xs { min-width: 15rem; }
.w-sm { min-width: 20rem; }
.w-md { min-width: 30rem; }
.w-lg { min-width: 40rem; }
.w-xl { min-width: 50rem; }

.dropdown {
	border-radius: 0.75rem !important;
}

.dropdown-menu {
	border-radius: 1rem !important;
	background: var(--bg-dropdown, #fff);
	padding: 0.2rem !important;
	scroll-behavior: smooth;
    -webkit-scroll-behavior: smooth;
    animation: smoothScroll var(--scroll-duration) cubic-bezier(0.45, 0.05, 0.55, 0.95);
    --scroll-duration: 0.8s;
    /* max-height: 400px; */
    /* overflow-y: auto; */
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb, #ebedf3) transparent;
	cursor: pointer !important;
}


/* override legacy menu style */

.menu-item-active > a.menu-link {
	border-right: 0.4rem solid;
	border-color: var(--main-color);
    /* border-left: 2rem solid;
	border-color: #fff; */
	/* transition-duration: .1s; */
	transition: all 50ms cubic-bezier(0.5, 0.25, 0, 1);
}

/* .input-group.input-group-solid, input:focus {
	border-radius: 0.85rem !important;
} */

.svelte-select .chevron {
	width: 30px !important;
	height: 30px !important;
}

.input-group.input-group-solid:focus-within, 
input:focus-within, input:focus, 
.form-control.form-control-solid:focus, 
.svelte-select:has(input:focus), 
select:focus {
	outline: 0.2rem solid var(--focus-color) !important;
}

tr:hover {
	background-color: var(--bg-hover, #eaf0f7) !important;
}

/*
Modern sidebar menu
*/
.aside-menu .menu-nav > .menu-section {
	margin: 5px 0 0 0 !important;
	height: 30px !important;
}

.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link {
	margin: 0px 16px !important;
	margin-bottom: 1px !important;
	padding: .5rem 1rem !important;
	border-radius: .75rem !important;
	border: 0 !important;
}

.aside-menu .menu-nav > .menu-item > .menu-link {
	margin: 0px 16px !important;
	margin-bottom: 1px !important;
	padding: .5rem 1rem !important;
	border-radius: .75rem !important;
	border: 0 !important;
}

.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link:not(.menu-link:hover) {
	background: #ffffff00 !important;
}

.aside-menu .menu-nav > .menu-item > .menu-submenu .menu-subnav > .menu-item > .menu-link {
	padding: 0.5rem 1rem !important;
    margin-top: 0px;
    margin-left: 4px;
    margin-right: 16px;
    margin-bottom: 1px;
	border-radius: .75rem !important;
	border: 0 !important;
}

/* .aside-menu .menu-nav > .menu-item > .menu-link .menu-icon {
	flex: 0 0 35px !important;
} */

.aside {
	width: 238px !important;
}

/* .input-group > input {
	border-top-right-radius: 0rem  !important;
	border-bottom-right-radius: 0rem  !important;
} */


.container, .container-sm, .container-md, .container-lg, .container-xl {
	  max-width: 100% !important;
}

.ql-toolbar {
	background: var(--bg-surface-secondary, #e7edf4) !important;
}
.ql-editor {
	background: var(--bg-input, #f4f6f9) !important;
}

stripe-pricing-table {
	width: 100% !important;
}

@keyframes press {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  to {
    transform: scale(1);
  }
}

.btn:active, .option:active, .menu-link:active, .nav-link:active, .dropdown-toggle:active {
	animation: press 0.2s 1 linear;
}

.dropdown-item {
	cursor: pointer;
	border-radius: 1rem !important;
}

.dropdown-item.active, .dropdown-item:active {
	background-color: var(--bg-active, #ebedf3) !important;
	color: var(--text-primary, #181C32);
}

.modal-footer {
	border-top: 0 !important;
	padding-top: 0 !important;
}

.modal-header {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.swal2-html-container select {
	border-radius: 0.55rem;
    padding: 0.75rem;
    background: var(--bg-input, #f0f0f0);
    border-color: var(--border-input, #e5e5e5);
    color: var(--text-primary, inherit);
    font-weight: 500;
}

.svelte-select {
	font-size: 13px !important;
	padding-left: 1rem !important;
	font-size: 12px !important;
	color: var(--text-primary, #000) !important;
	text-transform: capitalize !important;
	/* height: 35.6px !important;
	min-height: 35.6px !important; */
	border-radius: 0.75rem !important;
	cursor: pointer !important;
	/* outline: 1px solid #f0f0f0;
    border-top: 1px solid #fcfbfb !important; */
}

.svelte-select.disabled {
	overflow-x: auto !important;
}

/* Horizontal scrollbar styling */
.svelte-select::-webkit-scrollbar {
    height: 5px !important;
}

.svelte-select::-webkit-scrollbar-track {
    background: transparent !important;
}

.svelte-select::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb, #ebedf3) !important;
    border-radius: 5px !important;
}

.svelte-select::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover, var(--primary)) !important;
}



.svelte-select:not(.query-filter-select) {
	border: 0 !important;
	background: var(--bg-input, #f4f6f9) !important;
}

.filter-select .svelte-select {
	height: 35.6px !important;
	min-height: 35.6px !important;
}

.svelte-select input:focus {
	border: 0 !important;
	outline: 0 !important;
}
.svelte-select input {
	font-size: 12px !important;
	color: var(--text-primary, #000) !important;
}
.svelte-select .selected-item {
	font-size: 12px !important;
}
.svelte-select-list {
	border-radius: 1rem !important;
	box-shadow: 0 0.5rem 3rem 0rem #00000042 !important;
}

.svelte-select-list {
    scroll-behavior: smooth;
    -webkit-scroll-behavior: smooth;
    animation: smoothScroll var(--scroll-duration) cubic-bezier(0.45, 0.05, 0.55, 0.95);
    --scroll-duration: 0.8s;
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb, #ebedf3) transparent;
	border: 2px solid var(--border-color, #ebedf3);
	outline: 3px solid var(--bg-surface, #fff);
	cursor: pointer !important;
}

.svelte-select-list::-webkit-scrollbar {
    width: 6px;
}

.svelte-select-list::-webkit-scrollbar-track {
    background: transparent;
}

.svelte-select-list::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb, #ebedf3);
    border-radius: 3px;
}

.svelte-select-list {
	--item-hover-bg: var(--bg-hover, #ebedf3);
	--item-is-active-bg: var(--primary);
	font-weight: 500;
}

.svelte-select-list .list-item {
	max-height: 35px !important;
	line-height: 35px !important;
}

.svelte-select-list .list-item .item {
	max-height: 35px !important;
	line-height: 35px !important;
	border-radius: 1rem !important;
	/* make all text uppercase */
	text-transform: capitalize !important;
	cursor: pointer !important;
}

.virtual-list-inner .list-group-title {
	padding: 0.5rem !important;
	max-height: 35px !important;
	line-height: 35px !important;
	border-radius: 1rem !important;
	background-color: var(--bg-dropdown, #fff) !important;
	color: var(--text-primary, inherit) !important;
	/* make all text uppercase */
	text-transform: capitalize !important;
}

.virtual-list-inner .group-item {
	padding: 0.5rem !important;
	max-height: 35px !important;
	line-height: 35px !important;
	border-radius: 1rem !important;
	background-color: var(--bg-dropdown, #fff) !important;
	color: var(--text-primary, inherit) !important;
	cursor: pointer !important;
	/* make all text uppercase */
	text-transform: capitalize !important;
}

.virtual-list-inner .group-item:hover {
	background-color: var(--bg-hover, #ebedf3) !important;
}

.virtual-list-inner .group-item:active {
	background-color: var(--primary) !important;
	color: var(--text-inverse, #fff) !important;
}

.color-picker > .color-picker-wrapper {
	padding: 1.5rem !important;
	background: var(--bg-dropdown, #ffffff);
	border: 0;
	box-shadow: var(--shadow-dropdown, 0 0.5rem 3rem 0rem #00000042);
}

.color-picker > label > .container > .alpha,
.color-picker > label > .container > .color {
	height: 15px;
	width: 15px;
}
.color-picker > label {
	padding: 0.5rem 0.75rem;
    background: var(--bg-input, #f3f6f9);
    color: var(--text-primary, inherit);
    font-weight: 500;
    font-size: .9rem;
    border-radius: 0.75rem !important;
}
.color-picker > label > .container > input {
	margin: 0;
}
.color-picker > label > .container {
	justify-content: left;
	padding: 0;
	margin: 0;
	width: 30px;
}

.color-picker > .wrapper {
	border: 0;
    box-shadow: 0 0.5rem 5rem 0rem #0003;
    padding: 0.5rem !important;
	padding-left: 0.5rem !important;
}

.msg-container {
	padding: 1rem;
	border: 0.2rem dashed var(--border-color, #f3f6f9);
	margin: 1rem 0;
	border-radius: 0.55rem;
	background: var(--bg-surface-secondary, #f3f6f9);
}

.dashboard-widget {
	min-height:230px;
	max-height:230px;
	height:230px;
}

@media (min-width: 992px) {
	.header.header-fixed {
		z-index:99;
	}
	.aside-enabled.header-fixed .header {
		left: 238px !important;
	}
	.aside-fixed .wrapper {
		padding-left: 238px !important;
	}

	.wrapper[collapsed="true"] {
		padding-left: 18px !important;
	}
	.wrapper[collapsed="false"] {
		padding-left: 238px !important;
	}

	.aside-enabled.header-fixed .header[collapsed="true"] {
		left: 18px !important;
	}
	.aside-enabled.header-fixed .header[collapsed="false"] {
		left: 238px !important;
	}

	.color-picker > .wrapper {
		border: 0;
		box-shadow: 0 0.5rem 5rem 0rem #0003;
		padding: 0.5rem !important;
		padding-left: 0.5rem !important;
	}
	td.datatable-cell-right.datatable-cell:last-child > span {
		/* width: 100% !important; */
		/* grid-auto-flow: column; */
		/* width: auto !important;
		min-width: 80px; */
		display: flex !important;
		justify-content: end !important;
	}
}

.wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"]:last-child .wizard-icon, .wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"] .wizard-icon {
    background-color: #371dc2;
}

.wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"] .wizard-icon {
    background-color: #7962f5;
}

.datatable.datatable-default > .datatable-table > .datatable-body .datatable-row > .datatable-cell {
	padding: 0.55rem !important;
}

th.datatable-cell, td.datatable-cell, th.datatable-cell-check, .datatable.datatable-default > .datatable-table > .datatable-head .datatable-row > .datatable-cell:first-child, .datatable.datatable-default > .datatable-table > .datatable-body .datatable-row > .datatable-cell:first-child, .datatable.datatable-default > .datatable-table > .datatable-foot .datatable-row > .datatable-cell:first-child {
	padding: 0.55rem !important;
}

.label {
	margin: 1px;
	border-radius: .8rem !important;
}

.label-light-warning {
	border-top: 1px solid #ffffff8f !important;
	outline: 1px solid #f6e2cc !important;
}
.label-light-info {
	border-top: 1px solid #ffffff8f !important;
	outline: 1px solid #cee0f1 !important;
}
.label-light-primary {
	border-top: 1px solid #ffffff8f !important;
	outline: 1px solid #d0e2f3 !important;
}
.label-light-success {
	border-top: 1px solid #ffffff8f !important;
	outline: 1px solid #b2e3e1 !important;
}
.label-light-danger {
	border-top: 1px solid #ffffff8f !important;
	outline: 1px solid #f4c6cb !important;
}

.datatable.datatable-default.datatable-scroll > .datatable-table > .datatable-body {
	overflow: visible !important;
}

.datatable.datatable-default.datatable-scroll > .datatable-table {
	overflow-x: visible !important;
}

#nav-scroll-container {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

#nav-scroll-container::-webkit-scrollbar {
    display: none; /* WebKit */
}



.content {
	padding-top: 0 !important;
}

.multi-item {
	border: 1px solid #00000017 !important;
    display: flex;
    align-items: center;
}

/* EventCalendar custom styles */
.ec {
	--ec-bg-color: var(--bg-surface, #fff);
	--ec-text-color: var(--text-primary, #181C32);
	--ec-border-color: var(--border-color, #EBEDF3);
	--ec-button-bg-color: var(--bg-surface, #fff);
	--ec-button-border-color: var(--border-color, #EBEDF3);
	--ec-button-text-color: var(--text-primary, #181C32);
	--ec-button-active-bg-color: var(--primary, #351DC2);
	--ec-button-active-border-color: var(--primary, #351DC2);
	--ec-button-active-text-color: #fff;
	--ec-today-bg-color: color-mix(in srgb, var(--primary, #351DC2) 6%, transparent);
	--ec-highlight-color: color-mix(in srgb, var(--primary, #351DC2) 10%, transparent);
	--ec-now-indicator-color: var(--danger, #F64E60);
	--ec-popup-bg-color: var(--bg-dropdown, #fff);
	--ec-event-bg-color: var(--primary, #351DC2);
	--ec-event-text-color: #fff;
}

.ec-toolbar {
	margin-bottom: 0.75rem !important;
}

/* EventCalendar event color classes — use CSS variables so dark mode works automatically */
.ec-event-solid-primary { background-color: var(--primary, #351DC2) !important; color: #fff !important; border-color: var(--primary, #351DC2) !important; }
.ec-event-solid-success { background-color: var(--success, #08D1AD) !important; color: #fff !important; border-color: var(--success, #08D1AD) !important; }
.ec-event-solid-danger { background-color: var(--danger, #FF3D60) !important; color: #fff !important; border-color: var(--danger, #FF3D60) !important; }
.ec-event-solid-warning { background-color: var(--warning, #F5CE01) !important; color: #181C32 !important; border-color: var(--warning, #F5CE01) !important; }
.ec-event-solid-dark { background-color: var(--dark, #181C32) !important; color: #fff !important; border-color: var(--dark, #181C32) !important; }
.ec-event-solid-light { background-color: var(--light, #E4E6EF) !important; color: #7E8299 !important; border-color: var(--light, #E4E6EF) !important; }
.ec-event-white { background-color: #fff !important; color: #3F4254 !important; border-color: #EBEDF3 !important; }

/* Dot/accent variants — left border accent */
.ec-event.ec-event-primary { background-color: var(--bg-surface, #fff) !important; color: var(--text-primary, #181C32) !important; border-left: 3px solid var(--primary, #351DC2) !important; }
.ec-event.ec-event-success { background-color: var(--bg-surface, #fff) !important; color: var(--text-primary, #181C32) !important; border-left: 3px solid var(--success, #08D1AD) !important; }
.ec-event.ec-event-danger { background-color: var(--bg-surface, #fff) !important; color: var(--text-primary, #181C32) !important; border-left: 3px solid var(--danger, #FF3D60) !important; }
.ec-event.ec-event-warning { background-color: var(--bg-surface, #fff) !important; color: var(--text-primary, #181C32) !important; border-left: 3px solid var(--warning, #F5CE01) !important; }
.ec-event.ec-event-dark { background-color: var(--bg-surface, #fff) !important; color: var(--text-primary, #181C32) !important; border-left: 3px solid var(--dark, #181C32) !important; }
.ec-event.ec-event-light { background-color: var(--bg-surface, #fff) !important; color: var(--text-primary, #181C32) !important; border-left: 3px solid var(--light, #E4E6EF) !important; }

.ec-col-head,
.ec-col-group {
	font-weight: 500 !important;
	color: var(--text-primary, #181C32) !important;
}

.ec-day-head {
	font-weight: 600 !important;
	color: var(--primary, #351DC2) !important;
}

.ec-day.ec-today {
	background-color: var(--ec-today-bg-color) !important;
}

.ec-day.ec-other-month .ec-day-head {
	opacity: 0.35;
}

.ec-day-grid.ec-month-view .ec-day {
	position: relative !important;
}

.ec-day-grid.ec-month-view .ec-day:hover {
	background-color: color-mix(in srgb, var(--primary, #351DC2) 8%, transparent) !important;
	cursor: pointer;
}

.ec-day-grid.ec-month-view .ec-day:hover::after {
	content: '+';
	position: absolute;
	left: 50%;
	bottom: 8px;
	transform: translateX(-50%);
	width: 28px;
	height: 28px;
	border: 2px solid var(--primary, #351DC2);
	border-radius: 50%;
	color: var(--primary, #351DC2);
	background-color: rgba(255, 255, 255, 0.95);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	z-index: 100;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.ec-button-group {
	border-radius: 0.75rem !important;
	overflow: hidden;
	outline: 1px solid var(--border-color, #EBEDF3);
}

.ec-toolbar .ec-button {
	border: 0 !important;
	font-weight: 500 !important;
	color: var(--text-primary, #181C32) !important;
	background: var(--bg-surface, #fff) !important;
	padding: 0.5rem 1rem !important;
	font-size: 0.85rem !important;
	font-family: inherit;
	margin: 0 !important;
}

.ec-toolbar .ec-button:hover {
	color: var(--primary, #351DC2) !important;
}

.ec-toolbar .ec-button.ec-active {
	background: var(--primary, #351DC2) !important;
	color: var(--ec-button-active-text-color, #fff) !important;
	border-color: var(--primary, #351DC2) !important;
}

.ec-button.ec-disabled {
	color: var(--text-muted, #92929C) !important;
	opacity: 0.45;
}

.ec-button.ec-listWeek {
	margin: 0 !important;
}

.ec-title {
	font-weight: 600 !important;
	color: var(--text-primary, #181C32) !important;
	font-size: 1.1rem !important;
	text-transform: uppercase !important;
}

.ec-event {
	border-radius: 0.75rem !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	border: 0 !important;
	font-weight: 500 !important;
	font-size: 0.8rem !important;
	transition: outline 200ms ease, background-color 200ms ease;
}

.ec-event:hover {
	outline: 2px solid color-mix(in srgb, var(--primary, #351DC2) 25%, transparent) !important;
	outline-offset: 1px;
}

.ec-day-grid .ec-event:hover {
	outline: none !important;
	background-color: color-mix(in srgb, var(--primary, #351DC2) 12%, transparent) !important;
}

.ec-list .ec-event:hover {
	outline: none !important;
	background-color: color-mix(in srgb, var(--primary, #351DC2) 4%, var(--bg-surface, #fff)) !important;
}

.ec-time-grid .ec-event:hover,
.ec-timeline .ec-event:hover {
	outline: none !important;
	transform: scale(1.03);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16) !important;
	z-index: 10;
	transition: transform 150ms ease, box-shadow 150ms ease;
}

/* Month view: render all events as white pills with a colored dot (legacy look) */
.ec-day-grid .ec-event {
	background-color: var(--bg-surface, #fff) !important;
	color: var(--text-primary, #181C32) !important;
	border: 1px solid var(--border-color, #EBEDF3) !important;
	border-radius: 2rem !important;
	padding: 0.15rem 0.65rem !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.ec-day-grid .ec-event .ec-event-body::before {
	content: '';
	flex: 0 0 auto;
	align-self: center;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 0.4rem;
	background-color: var(--primary, #351DC2);
}

.ec-day-grid .ec-event.ec-event-solid-success .ec-event-body::before,
.ec-day-grid .ec-event.ec-event-success .ec-event-body::before {
	background-color: var(--success, #08D1AD);
}

.ec-day-grid .ec-event.ec-event-solid-danger .ec-event-body::before,
.ec-day-grid .ec-event.ec-event-danger .ec-event-body::before {
	background-color: var(--danger, #FF3D60);
}

.ec-day-grid .ec-event.ec-event-solid-warning .ec-event-body::before,
.ec-day-grid .ec-event.ec-event-warning .ec-event-body::before {
	background-color: var(--warning, #F5CE01);
}

.ec-day-grid .ec-event.ec-event-solid-dark .ec-event-body::before,
.ec-day-grid .ec-event.ec-event-dark .ec-event-body::before {
	background-color: var(--dark, #181C32);
}

.ec-day-grid .ec-event.ec-event-solid-light .ec-event-body::before,
.ec-day-grid .ec-event.ec-event-light .ec-event-body::before {
	background-color: var(--light, #E4E6EF);
}

.ec-day-grid .ec-event.ec-event-white .ec-event-body::before {
	background-color: #EBEDF3;
}

/* List view (lista settimana): neutral row with colored dot */
.ec-list .ec-event {
	background-color: var(--bg-surface, #fff) !important;
	color: var(--text-primary, #181C32) !important;
	border-bottom: 1px solid var(--border-color, #EBEDF3) !important;
	border-radius: 0 !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 0.5rem !important;
	width: 100% !important;
	margin-right: 0 !important;
}

.ec-list .ec-event:hover {
	background-color: color-mix(in srgb, var(--primary, #351DC2) 4%, var(--bg-surface, #fff)) !important;
}

.ec-list .ec-event .ec-event-body {
	flex-direction: row !important;
	align-items: center !important;
	gap: 0.5rem !important;
}

.ec-list .ec-event .ec-event-body::before {
	content: '';
	flex: 0 0 auto;
	align-self: center;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 0.4rem;
	background-color: var(--primary, #351DC2);
}

.ec-list .ec-event.ec-event-solid-success .ec-event-body::before,
.ec-list .ec-event.ec-event-success .ec-event-body::before {
	background-color: var(--success, #08D1AD);
}

.ec-list .ec-event.ec-event-solid-danger .ec-event-body::before,
.ec-list .ec-event.ec-event-danger .ec-event-body::before {
	background-color: var(--danger, #FF3D60);
}

.ec-list .ec-event.ec-event-solid-warning .ec-event-body::before,
.ec-list .ec-event.ec-event-warning .ec-event-body::before {
	background-color: var(--warning, #F5CE01);
}

.ec-list .ec-event.ec-event-solid-dark .ec-event-body::before,
.ec-list .ec-event.ec-event-dark .ec-event-body::before {
	background-color: var(--dark, #181C32);
}

.ec-list .ec-event.ec-event-solid-light .ec-event-body::before,
.ec-list .ec-event.ec-event-light .ec-event-body::before {
	background-color: var(--light, #E4E6EF);
}

.ec-list .ec-event.ec-event-white .ec-event-body::before {
	background-color: #EBEDF3;
}

.ec-event-title {
	font-weight: 600 !important;
	font-size: 1rem !important;
	line-height: unset !important;
}

.ec-day-grid .ec-event-time,
.ec-timeline .ec-event-time {
	margin: auto 5px auto 0px;
}

.ec-list .ec-event {
	cursor: pointer !important;
}

.ec-popup {
	border-radius: 1.5rem !important;
	overflow: hidden !important;
	border: 1px solid var(--border-color, #EBEDF3) !important;
	background: var(--bg-dropdown, #fff) !important;
	box-shadow: 0 0.5rem 3rem 0rem rgba(0, 0, 0, 0.26) !important;
}

.ec-now-indicator {
	background-color: #F64E60 !important;
}

.ec-all-day {
	border-color: var(--border-color, #EBEDF3) !important;
}

.ec-time-grid .ec-slot {
	border-color: var(--border-color, #EBEDF3) !important;
}

.ec-dragging {
	opacity: 0.7;
	box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2) !important;
	border-radius: 0.75rem !important;
}

.svelte-select .item.active .text-dark-75,
.svelte-select .item.active .font-weight-bold {
	color: #fff !important;
}

.svelte-select .item.active .symbol-label {
	border: 2px solid #fff !important;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

.popover {
	border-radius: 1.5rem !important;
	border: 1px solid var(--border-color, #e6e6e6) !important;
	background: var(--bg-dropdown, #fff) !important;
	line-height: 1.1rem !important;
	box-shadow: var(--shadow-dropdown, 0 0.5rem 3rem 0rem #00000042) !important;
}

.blur-filter {
	filter: blur(2px) !important;
}

.blockui {
	border-radius: 1.5rem !important;
	border: 1px solid var(--border-color, #ededed) !important;
	background: var(--bg-surface, #fff) !important;
	color: var(--text-primary, inherit) !important;
	font-weight: 700 !important;
}

.popover-header {
	border-radius: 1.5rem 1.5rem 0 0 !important;
}

.popover-body {
	border-radius: 0 0 1.5rem 1.5rem !important;
}

/* When the header is empty (hidden by :empty) or absent, make the body the
   topmost visible child so its corners round the top of the popover too */
.popover-header:empty + .popover-body,
.popover-body:first-child {
	border-radius: 1.5rem !important;
}

.popover-body p {
	margin: 0 !important;
	padding: 0 !important;
}

@media print {
	#bkn_body {
		border: 0 !important
	}
}

@media (min-width: 992px) {
	.header-fixed .wrapper {
		padding-top: 67px !important;
	}
}

/* mobile width */
@media (max-width: 992px) {
	.ec-toolbar {
		display: flex !important;
		flex-direction: column !important;
		gap: 0.5rem !important;
	}
	.ec-toolbar > * {
		margin-top: 0 !important;
	}
	.ec-title {
		text-align: center !important;
	}
	.ec-event {
		margin-left: -0.25rem !important;
		margin-right: -0.25rem !important;
		border-radius: 0.5rem !important;
	}
	.ec-toolbar .ec-button {
		min-height: 44px !important;
		min-width: 44px !important;
	}
	.topbar {
		display: none;
	}
	html, body {
		font-size: 13px !important;
		background-color: var(--bg-body, #fff) !important;
	}
	.header {
		border: 0 !important;
	}
	.row {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.container {
		padding: 0 !important;
	}
	.content > *:not(.container-overlay) {
		position: relative;
		top: -40px !important;
	}
	.card-header {
		padding: 1.5rem !important;
		padding-bottom: .5rem !important;
	}
	.card-body {
		/* padding: 1.5rem !important; */
		padding: .5rem !important;
	}
	/* Negate card-body padding so the datatable fills the full card width (skip p-0 cards: nothing to negate) */
	.card-body:not(.p-0) .datatable.datatable-default {
		margin-left: -0.5rem !important;
		margin-right: -0.5rem !important;
		width: calc(100% + 1rem) !important;
		max-width: calc(100% + 1rem) !important;
	}
	.card-footer {
		padding: 1.5rem !important;
	}
	.card.card-custom {
		margin-bottom: .5rem !important;
	}
	.datatable-row {
		padding-bottom: 1.5rem !important;
	}
	.card-toolbar a:not(.nav-link, .btn-always-text-visible) {
		font-size: 0 !important;
		/* max-width: 3.7rem !important; */
	}
	.datatable-pager {
		display: flex !important;
    	justify-content: center !important;
	}
	.btn .svg-icon {
		margin-right: 0 !important;
	}
	.help-engage {
		display: none !important;
	}
	.statistics {
		padding: .5rem !important;
	}
	.dashboard-card {
		padding: .5rem !important;
		padding-bottom: 1.5rem !important;
	}
	.wizard-label {
		display: none !important;
	}
	.wizard-nav {
		display: none !important;
	}
	.wizard-body {
		padding: 0 !important;
		padding-top: 1.5rem !important;
	}
	.accordion.accordion-solid .card .card-header {
		padding: 0 !important;
	}
	.navi-link {
		padding-left: 0rem !important;
		padding-right: 0rem !important;
	}
	#bkn_profile_aside .card-body {
		padding-top: 0 !important;
	}
	.nav-settings {
		display: none !important;
	}
	.header-mobile-btn-back {
		padding: 0.5rem !important;
	}
	.navi-body-settings {
		padding: 0 !important;
	}
	.navi-settings {
		display: flex !important;
		justify-content: space-around;
		padding-top: 1rem !important;
		align-items: center;
		padding-bottom: .5rem !important;
	}
	.navi-settings .navi-text {
		font-size: 0 !important;
	}
	.navi-link {
		padding: .5rem !important;
	}
	.navi-icon {
		margin: 0 !important;
	}
	.card.card-custom.card-settings {
		position: fixed;
		bottom: 0 !important;
		width: 100%;
		margin-bottom: 0 !important;
		margin-right: 0 !important;
		right: 0;
		z-index: 999;
	}
	.datatable-pager-nav, .datatable-pager-info {
		width: 100% !important;
	}
	.container-overlay {
		padding: 0 !important;
		position: absolute;
		top: 0;
		z-index: 1000;
		width: 100%;
	}
	.subscription-pie-chart, .payment-pie-chart {
		display: none !important;
	}
	.col-xl-6, .col-lg-12, .connected-account-container, .chart-tile-container {
		padding: 0 !important;
	}
	.connected-account-container > .row {
		max-width: 80%;
	}
	.card-header {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
	.row > div {
		padding-left: .5rem !important;
		padding-right: .5rem !important
	}
}

@media (max-width: 480px) {
	.ec-header,
	.ec-day-head {
		font-size: 0.7rem !important;
	}
	.ec-day-head {
		padding: 0.15rem 0.1rem !important;
	}
}

/* ==========================================================================
   Android native app - Status bar offset
   ========================================================================== */
html.android-native .header-mobile-fixed .header-mobile {
	top: calc(var(--android-status-bar-height, 24px) + 8px) !important;
	padding-top: 0 !important;
}

html.android-native .header-mobile-fixed .wrapper {
	padding-top: calc(55px + var(--android-status-bar-height, 24px) + 16px) !important;
}

/* ==========================================================================
   Lucide menu arrows (replaces Ki icon font)
   ========================================================================== */
.aside-menu .menu-nav .menu-item > .menu-heading .menu-arrow::before,
.aside-menu .menu-nav .menu-item > .menu-heading .menu-arrow:before,
.aside-menu .menu-nav .menu-item > .menu-link .menu-arrow::before,
.aside-menu .menu-nav .menu-item > .menu-link .menu-arrow:before {
	content: none !important;
	display: none !important;
}

.menu-arrow .menu-arrow-icon {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: none;
	line-height: 0;
	transition: transform 0.3s ease;
}

.menu-item-open > .menu-link > .menu-arrow .menu-arrow-icon,
.menu-item-open > .menu-heading > .menu-arrow .menu-arrow-icon {
	transform: rotate(90deg);
}

/* Make Phosphor icons inside .btn-clean inherit the button text color
   (fixes action buttons that were all gray because .btn-clean i sets #B5B5C3) */
.btn.btn-clean i.ph,
.btn.btn-clean i.ph-bold,
.btn.btn-clean i.ph-duotone,
.btn.btn-clean i.ph-fill,
.btn.btn-clean i.ph-thin {
	color: inherit;
}

/* Spinner for the block/blockPage shim (src/shim/ui.js).
   The bkn-spinner-* classes are app-owned. */
.bkn-spinner {
	position: relative;
	width: 2rem;
	height: 2rem;
}
.bkn-spinner::before {
	content: '';
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 2px solid var(--primary, #351DC2);
	border-right-color: transparent;
	animation: bkn-spinner-rotate 0.5s linear infinite;
}
.bkn-spinner--secondary::before { border-color: #e4e6ef; border-right-color: transparent; }
.bkn-spinner--success::before { border-color: #1bc5bd; border-right-color: transparent; }
.bkn-spinner--info::before { border-color: #8950fc; border-right-color: transparent; }
.bkn-spinner--warning::before { border-color: #ffa800; border-right-color: transparent; }
.bkn-spinner--danger::before { border-color: #f64e60; border-right-color: transparent; }
.bkn-spinner--light::before { border-color: #f3f6f9; border-right-color: transparent; }
.bkn-spinner--dark::before { border-color: #181c32; border-right-color: transparent; }

@keyframes bkn-spinner-rotate {
	to {
		transform: rotate(360deg);
	}
}