:root {
	/* --- Colori Principali Inspinia --- */
	--primary: #1ab394;         /* Il classico verde Inspinia */
	--primary-hover: #18a689;   /* Verde scuro per gli stati hover */
	--secondary: #676a6c;       /* Il grigio scuro usato per i testi principali */
	--success: #1c84c6;         /* Il blu/azzurro che Inspinia usa per "success/info" */
	--warning: #f8ac59;         /* Arancione per i warning */
	--danger: #ed5565;          /* Rosso Inspinia */
	
	/* --- Tonalità di Grigio e Sfondi Layout --- */
	--gray-bg: #f3f3f4;         /* Colore di sfondo generale della pagina (wrapper) */
	--nav-bg: #2f4050;          /* Sfondo scuro della sidebar sinistra */
	--nav-text: #a7b1c2;        /* Colore del testo dei link della sidebar (spenti) */
	--nav-text-active: #ffffff; /* Colore del testo quando la voce di menu è attiva */
	--ibox-title-bg: #ffffff;   /* Sfondo dei pannelli (White edili/Boxes) */
	--border-color: #e7eaec;    /* Il grigio leggero usato per tutti i bordi e divisori */

	/* --- Sfumature di Grigio Standard (Scale) --- */
	--gray-100: #f8f9fa;
	--gray-200: #e9ecef;
	--gray-300: #dee2e6;
	--gray-400: #ced4da;
	--gray-500: #adb5bd;
	--gray-600: #6c757d;
	--gray-700: #495057;
	--gray-800: #343a40;
	--gray-900: #212529;

	/* --- Tipografia ed Elementi di Spazio --- */
	--font-sans-serif: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--body-text-color: #676a6c;
}

/* --- Esempio pratico di applicazione nel tuo CSS custom --- 
body {
	background-color: var(--gray-bg);
	font-family: var(--font-sans-serif);
	color: var(--body-text-color);
}
*/
html{
	    overflow-x: hidden;
}
/* Bottone primario verde stile Inspinia */
.btn-primary {
	background-color: var(--primary);
	border-color: var(--primary);
	color: #ffffff;
}
.btn-primary:hover {
	background-color: var(--primary-hover);
	border-color: var(--primary-hover);
}
.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }

.tab-pane .tab-pane {
    padding: 1rem;
}

.content-page .nav-tabs:not(.nav-tabs-vertical) {
	gap: .375rem;
}

.content-page .nav-tabs:not(.nav-tabs-vertical) .nav-link {
	background-color: color-mix(in srgb, var(--gray-100) 50%, var(--gray-200));
	color: var(--gray-700);
	border: 1px solid var(--gray-400);
	border-top: 3px solid var(--gray-400);
	border-radius: 0;
}

.content-page .nav-tabs:not(.nav-tabs-vertical) .nav-link:not(.active):not(.disabled):not(:disabled):hover {
	background-color: var(--ibox-title-bg);
	border-color: var(--gray-500);
	color: var(--gray-900);
}

.content-page .nav-tabs:not(.nav-tabs-vertical) .nav-link.active,
.content-page .nav-tabs:not(.nav-tabs-vertical) .nav-item.show .nav-link {
	background-color: var(--ibox-title-bg);
	border-color: var(--gray-400);
	border-top-color: var(--primary);
	border-bottom-color: var(--ibox-title-bg);
	color: var(--primary-hover);
	font-weight: 600;
}

.content-page .nav-tabs:not(.nav-tabs-vertical) .nav-link:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.content-page .nav-tabs:not(.nav-tabs-vertical) .nav-link.disabled,
.content-page .nav-tabs:not(.nav-tabs-vertical) .nav-link:disabled {
	color: var(--gray-600);
	opacity: .65;
}

/* Sovrascrittura della Sidebar per usare i colori nativi */
.side-nav {
	background-color: var(--nav-bg);
}
.side-nav-link {
	color: var(--nav-text);
}
.side-nav-link.active, .side-nav-link:hover {
	color: var(--nav-text-active);
	background-color: #293846; /* Sfumatura hover interna della sidebar */
}
.nav-tabs-vertical .nav-link.active, .side-nav-link:hover {
	color: var(--nav-text-active);
	background-color: #293846; /* Sfumatura hover interna della sidebar */
}


.action-toolbar{
	    margin: -1.25rem -1.25rem 1.25rem;
	    padding-right:  1.25rem;
}
/* --- Esempio pratico di applicazione nel tuo CSS custom --- */


/* Bottone primario verde stile Inspinia */
.btn-primary {
	background-color: var(--primary);
	border-color: var(--primary);
	color: #ffffff;
}
.btn-primary:hover {
	background-color: var(--primary-hover);
	border-color: var(--primary-hover);
}

/* Sovrascrittura della Sidebar per usare i colori nativi */
.side-nav {
	background-color: var(--nav-bg);
}
.side-nav-link {
	color: var(--nav-text);
}
.side-nav-link.active, .side-nav-link:hover {
	color: var(--nav-text-active);
	background-color: #293846; /* Sfumatura hover interna della sidebar */
}

.card-header{
	/*display: block !important;*/
}
.sidebar  .nav-link.active {
	background-color: red !important;
}

.sidebar  .nav-item.nav-dropdown.open {
	background-color: purple;
}

.sidebar  .nav-item.nav-dropdown.open ul {
	margin-left: 8px;
}

.sidebar  .nav-link.active a, .nav-item.nav-dropdown.open a, .sidebar .nav-link .nav-icon
	{
	color: #fff !important;
}

@
-webkit-keyframes rotating /* Safari and Chrome */ {from {
	-webkit-transform:rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}

to {
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
}

}
@
keyframes rotating {from { -ms-transform:rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}

to {
	-ms-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
}na

}
.rotating {
	-webkit-animation: rotating 2s linear infinite;
	-moz-animation: rotating 2s linear infinite;
	-ms-animation: rotating 2s linear infinite;
	-o-animation: rotating 2s linear infinite;
	animation: rotating 2s linear infinite;
}

.bg-success-light {
	background-color: rgba(77, 189, 116, .2);
}

tr.bg-success-light td {
	background-color: rgba(77, 189, 116, .2) !important;
}

.ck-editor__editable, textarea {
	min-height: 150px;
}

.th-offcanvas-md {
	width: 100% !important;
	@media
	screen
	and
	(min-width:
	768px)
{
	width
	:
	750px
	 
	!
	important
	;
	
	
}

}
.datatable {
	width: 100% !important;
}

.dataTables_length, .dataTables_filter, .dt-buttons {
	margin-bottom: 0.333em;
	margin-top: .2rem;
}

.dataTables_filter {
	margin-right: .2rem;
}

.dt-buttons .btn {
	margin-left: 0.333em;
	border-radius: 0;
}

.table.datatable {
	box-sizing: border-box;
	border-collapse: collapse;
}

table.dataTable thead th {
	border-bottom: 2px solid #c8ced3;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
	border-bottom: 1px solid #c8ced3;
}

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

.select2-selection__rendered {
	padding-bottom: 5px !important;
}

.has-error .invalid-feedback {
	display: block !important;
}

.btn-info, .badge-info {
	/*color: white;*/
}

table.dataTable thead .sorting, table.dataTable thead .sorting_asc,
	table.dataTable thead .sorting_desc {
	background-image: none;
}

.sidebar .nav-item {
	cursor: pointer;
}

.btn-default {
	color: #23282c;
	background-color: #f0f3f5;
	border-color: #f0f3f5;
}

.btn-default.focus, .btn-default:focus {
	box-shadow: 0 0 0 .2rem rgba(209, 213, 215, .5);
}

.btn-default:hover {
	color: #23282c;
	background-color: #d9e1e6;
	border-color: #d1dbe1;
}



.btn-group-xs>.btn, .btn-xs {
	padding: 1px 5px;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 3px;
}

.searchable-title {
	font-weight: bold;
}

.searchable-fields {
	padding-left: 5px;
}

.searchable-link {
	padding: 0 5px 0 5px;
}

.searchable-link:hover {
	cursor: pointer;
	background: #eaeaea;
}

.select2-results__option {
	/* padding-left: 0px;
    padding-right: 0px;*/
	
}

.form-group .required::after {
	content: " *";
	color: red;
}

.form-check.is-invalid ~ .invalid-feedback {
	display: block;
}



.fc .fc-button {
	line-height: 0.8 !important;
	outline: none;
	border-radius: 0;
}

.form-control, .btn, .select2-container--default .select2-selection--single
	{
	border-radius: 0 !important;
}

.select2-container--default .select2-selection--single {
	height: calc(1.5em + .75rem + 2px);
	padding: .175rem .75rem;
}

.form-check-input {
	clear: left;
}

.form-switch.form-switch-sm {
	margin-bottom: 0.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-sm .form-check-input {
	height: 1rem;
	width: calc(1rem + 0.75rem);
	border-radius: 2rem;
}

.form-switch.form-switch-md {
	margin-bottom: 1rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-md .form-check-input {
	height: 1.5rem;
	width: calc(2rem + 0.75rem);
	border-radius: 3rem;
}

.form-switch.form-switch-lg {
	margin-bottom: 1.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-lg .form-check-input {
	height: 2rem;
	width: calc(3rem + 0.75rem);
	border-radius: 4rem;
}

.form-switch.form-switch-xl {
	margin-bottom: 2rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-xl .form-check-input {
	height: 2.5rem;
	width: calc(4rem + 0.75rem);
	border-radius: 5rem;
}

.card-featured-left {
	border-left: 3px solid #CCC;
}

.dropdown-menu[data-bs-popper] {
	left: -63px;
}

#fullscreen-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.8);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 2000; /* sopra bootstrap modal */
}

.loader-spinner {
	width: 50px;
	height: 50px;
	border: 5px solid #ddd;
	border-top: 5px solid #0d6efd;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

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

}
.steps {
	gap: 8px;
}

.step {
	padding: 6px 16px;
	background: #eee;
	border-radius: 20px;
	font-size: .85rem;
}

.step.active {
	background: #0d6efd;
	color: #fff;
}

.step.done {
	background: #198754;
	color: #fff;
}
.drop-zone{
	background: url(/images/bg-dand.png) no-repeat center right;
    background-blend-mode: lighten;
    background-size: 200px;
}
.drop-zone.drag-over {
    border: 2px dashed #0d6efd !important;
    background-color: rgba(13, 110, 253, 0.05);
    transition: all 0.2s ease;
    
}