body{
	font-family: "Nunito Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings:
		"wdth" 100,
		"YTLC" 100;
}

.nav_tm .tm_title{
	color: #899bb3;
}
.nav_tm i{
	font-size:14px !important;	
}
.row_info_counter h2 span{
	font-size:16px;
	font-weight:400;
	text-transform: lowercase;
}
.row_info_counter h2 span i{
	font-size:16px;	
}
.row_info_counter .box_date div.d-flex:first-child, .row_info_counter .box_date div.d-flex:nth-child(2){
	margin-bottom:2.5px;
}
.row_info_counter .workday{
	font-size:16px;	
}
#cs-main-topbar .breadcrumb.topbar-breadcrumb{
	background-color:transparent;	
}
.stats-card-custom{
	background: linear-gradient(150deg,#70a7b9 0,#116d8a 100%);
}
i[data-toggle="tooltip"]{
	cursor:pointer;	
}
.container_commessa .tooltip .tooltip-inner{
	max-width:300px !important;	
}
.hover_modal strong:hover{
	color: #1657af;	
	cursor:pointer;
}
.switch_icon{
	position: absolute;
    right: 25px;
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
}
.switch_icon_back{
	position: absolute;
    right: 24px;
    cursor: pointer;
    top: 18px;
	padding-left: 10px;
    padding-right: 10px;
}
.flip-card {
  background-color: transparent;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card .flip-card-inner.switched {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}
.flip-card-back {
  background-color: #000;
  color: #fff;
  transform: rotateY(180deg);
}
canvas#chartHours{
	height:70px !important;	
}
.table_righe thead th:first-child, #tableTicketInbox thead th:first-child{
	width:5%;
}
#tableMilestone thead th:first-child{
	width:6%;	
}
#tableMilestone thead th:nth-child(3), #tableMilestone thead th:nth-child(5){
	width:7%;	
}
#tableMilestone thead th:nth-child(6){
	width:35%;	
}
.table_righe thead th:last-child{
	width:2%;	
}
.table_righe thead th:nth-child(2){
	width:10%;
}
.table_righe thead th:nth-child(5), .table_righe thead th:nth-child(4), #tableMilestone thead th:nth-child(2){
	width:9%;	
}
.table_righe thead th:nth-child(6){
	width:11%;	
}
#tableTicketInbox thead th:nth-child(2){
	width:15%;	
}
#tableTicketInbox thead th:nth-child(3){
	width:25%;
}
#tableTicketInbox thead th:nth-child(4){
	width:45%;	
}
i.add_new_icon{
	cursor:pointer;
}
#table_attivita{
	border:1px solid #edf2f9;	
}
#table_attivita tfoot{
	border-top: 1px solid #d3dae3;	
}
.row_header{
	position: sticky;
    top: 70px;	
	z-index:9;
}
.table-sm#table_attivita td, .table-sm#tableEconomics td, .table-sm#tableServizi td, .table-sm#tableRisorse td, .table-sm#tableInserisci td, .table-sm#tableComm td, .table-sm#tableElenco td, .table-sm#tableTicketList td, .table-sm#tableTicket td, .table-sm#tableTicketInbox td {
	padding:0.4rem;	
}
#tableRisorse tfoot td, #tableInserisci tfoot td{
	color: var(--primary);
    font-weight: 600;	
}
#tableRisorse tfoot, #tableEcoServizi tfoot, #tableEcoCommessa tfoot, #tableInserisci tfoot{
    border-top: 1px solid #d3dae3;
}
#tableRisorse cs-avatar{
	position:relative;
	left: 50%;
    transform: translateX(-50%);
}
#tableMilestone, #tableEcoCommessa, #tableEcoServizi, #tableServizi, #tableRisorse, #tableTicket, #tableCopy {
	border:1px solid #edf2f9;
}
.header_data div.d-flex{
	line-height: 1.3;
    border: 1px dashed #d3dae3;
    padding: 2px 8px;
    border-radius: 5px;	
	font-size:14px;
}
#tableRisorse cs-avatar{
	width: 1.6rem !important;
    height: 1.6rem !important;
    font-size: 0.65rem !important;	
}
.time_ticket{
	border-left: 3px solid;
    padding-left: 5px;	
}
#tableInserisci tr td:first-child{
	color:#4f4f4f;
	font-size:14px;
}
.column_inserimento .input-group-text{
	padding: .3rem .5rem;	
}
.btn.btn-dark-blue{
	color: #fff;
    background-color: #153f70;
    border-color: #153f70;
}
.btn.btn-dark-blue:hover{
	color: #fff;
    background-color: #0f2d50;
    border-color: #0d2745;
}
.custom-label-sm{
	font-size:13px;
	padding-top:3px;	
}
.card_ticket .time_ticket{
	border-right: 3px solid;
    padding-right: 5px;	
	padding-left:0;
	border-left:none;
}
#tableInserisci td .badge{
	min-width:67.5px;
}
.stats-card-secondary{
	background: linear-gradient(150deg,#9daabc 0,#5b7190 100%)
}
.stats-card-green{
	background: linear-gradient(150deg,#07d780 0,#008d52 100%)
}
.card_count_ticket span.badge{
	padding: .4rem .6rem;
    font-size: 13px;
    font-weight: 600;
}
.badge-cyan{
	background:#59c5e4;
	color:#fff;
}
.fw-400{
	font-weight:400;	
}
.fw-500{
	font-weight:600;	
}
.fw-600{
	font-weight:600;	
}
.fw-700{
	font-weight:700;	
}
.fw-800{
	font-weight:800;	
}
.fw-900{
	font-weight:900;	
}
.text-grey-700{
	color:var(--gray-700);
}
.icon_provenienza{
	align-items: center;
    display: flex;
    height: 100%;
    font-size: 25px;
}
.badge_operatore{
    padding: 8px 22px;
    font-size: 13px;
}
.dati_statici{
	font-size: 17px;	
}
.dati_statici div:nth-child(2){
	font-size: 24px;
	font-weight:600;	
}
.dati_statici span{
	font-size:16px;
}
.row_storico .col-md-3{
	border-right:1px solid #edf2f9;	
}
.row_storico .list-group-timeline .timeline-item-content{
	padding:.75rem;	
	cursor:pointer;
}
.row_storico .list-group-timeline .timeline-item-content.active {
	background-color: rgba(110, 132, 163, .07);
}
.list-group-timeline .timeline-item-content.active::after{
	border-right:7px solid rgba(110, 132, 163, .01);
}
.row_storico .btn.btn-borderless[class*=btn-clear]{
	background-color: #e2e6ed;
    border-color: #e2e6ed;
    color: #12263f;
}
.row_storico .list-group-timeline .timeline-item-content p{
	display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}
.row_storico .email_chiusura{
	padding-bottom:20px;
	border-bottom:1px solid #edf2f9; 	
}
.row_storico .footer_chiusura{
	font-size:13px;
	padding-top:20px;	
}
.content_ticket{
	display:none;	
}
.content_ticket.active{
	display:block;	
}
.header_ticket .badge{
	font-size:13px;	
}
.icon_preferito{
	display: flex;
    align-items: center;
    flex: auto;
    justify-content: center;
}
.content_ticket .icon_preferito span{
	display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: #e2e6ed;
    border-radius: 100%;
}
.icon_preferito span, .content_ticket .icon_preferito.active span{
	display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: #fdf3d9;
    border-radius: 100%;
}
#modalAttivita .modal-dialog{
	position:relative;
	top:50%;
	transform:translateY(-50%);	
}
.btn_filter:focus{
	box-shadow:none;	
}
.dropdown-item:focus:not(.active), .dropdown-item:hover:not(.active){
	background-color:var(--gray-100);	
}
.dropdown-item{
	padding: .5rem 1.5rem;
}
.dropdown-item.active{
	color: #ffffff;
    text-decoration: none;
    background-color: var(--secondary);
}




/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}



.card.draggable {
	margin: 10px;
	background-color: #f8f9fa;
	cursor: move;
}

.dropzone:not(.dropzone-inner){
	padding: 10px;
	min-height: 40px;
	border-radius: 10px;
	background: #f1f6fa;
	height: 100%;
	box-shadow: 0px 0px 10px #00000020;
}

.dropzone .card-body{
	padding: 12px !important;
}

.dropzone.squadre{
	border: 2px dashed #c1c9cf;
	background-color: #fff;
	padding: 10px;
	min-height: 40px;
	box-shadow: unset;
}

.drop-active {
	background-color: #f8fce7;
}

.card.drop-active {
	  background-color: #f8fce7;
}
  
.dropzone-inner {
	min-height: 0px !important;
	border: none !important;
	margin: 0px !important;
	padding: 0px !important;
}
   
.dragging {
	user-select: none !important;
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	-ms-user-select: none !important;
}

.draggable {
	user-select: none !important;
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	-ms-user-select: none !important;
	touch-action: none;
}

.draggable.dragging {
	 will-change: transform; 
	 transition: none !important;
}

/* durante il drag alleggerisci gli effetti per ridurre repaint */
.draggable.dragging, .draggable.dragging * {
	pointer-events: none;
	z-index: 9999;

}

/* Permette alle card trascinate di uscire dai contenitori con overflow mantenendo la stessa width */
.dropzone.overflow-auto .draggable.dragging {
	overflow: visible !important;
	/* Position e width vengono gestiti completamente dal JavaScript */
}

/* Classe temporanea per rimuovere overflow durante il drag */
.dropzone.drag-active {
	overflow: fixed !important;
	
}

.accordion-card.dragging,
.accordion-card.dragging * {
	box-shadow: none !important;
	transition: none !important;
}

.accordion-card {
	cursor: pointer;
	transition: box-shadow 0.2s ease;
}

.accordion-card:hover {
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.accordion-header {
	cursor: pointer;
	padding: 12px 18px;
}
		   
.accordion-icon {
	transition: transform 0.3s ease;
}

.accordion-content {
	border-top: 1px solid #8ca0bb;
	padding: 5px;
}

.accordion-body {
	padding: 10px 0;
}

.card.accordion-card:not(.accordion-content) > .card-body {
	padding: 0px !important;
}

.card.accordion-card .card {
	box-shadow: 2px 2px 5px #b7b7b7 !important;
}

.stats-card{
    box-shadow: 2px 2px 5px #d9d9d9;
}

.card-red{
    background-color: #fad7dd !important;
    color: #781d2d !important;
    border-color: #f8c7d0 !important;
}

.card-green{
    background-color: #ccf7e5 !important;
    color: #007142 !important;
    border-color: #b8f4db !important;
}

.card-blue{
    background-color: #d5e5fa !important;
    color: #174077 !important;
    border-color: #c4daf8 !important;
}

.card-purple{
    background-color: #e5e1fd !important;
    color: #41328e !important;
    border-color: #dad6f0 !important;
}

#to-do-list-spacer{
	padding-top: 1rem;
}

#calendar{
	margin:0 1rem;
}

.col-todolist-calendar{
	transition: .4s;
    position: relative;
}

.sidebar {
    background-color: var(--card-background);
    border-left: 1px solid var(--border-color);
    overflow: hidden;
    transition: .4s;
    width: 0%;
    opacity: 0;
}

.sidebar.collapsed {
    width: 0%;
    opacity: 0;
}

#recent-contacts-search {
    width: 100%;
    flex: 0 0 auto;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
    padding: 1rem;
}

#recent-contacts-container {
    position: relative;
    overflow-y: auto;
    flex: 1 3 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 150px;
}

.avatar-list li {
    cursor: move;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Feedback visivo per il calendario durante il drag */
.fc-day.drag-over {
    background-color: rgba(0, 123, 255, 0.2) !important;
    transition: all 0.2s ease;
}

.fc-time-grid .fc-slats .fc-widget-content.drag-over {
    background-color: rgba(0, 123, 255, 0.2) !important;
}

.avatar-descr {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 0 0 5px;
}

.avatar-descr a {
    color: inherit;
}

.avatar-descr a:hover {
    color: var(--body-color);
}

.icona{
	font-size: 16px;
}

.header-dropzone h3, .header-dropzone span{
	color: #152e4d;
}

.fc-highlight {
	background: transparent !important;
}

.row_filter{
	width: 100%;
	padding: 10px;
}

.row_filter select{
	color: #92a0b5;
	background: transparent;
}

.row_filter input{
	color: #92a0b5;
	background: transparent;
}

.row_filter input.form-control:focus, .row_filter select.form-control:focus{
	background: transparent !important;
}

.avatar-icon i{
	cursor: pointer;
}

/*.select2-container--default .select2-selection--single .select2-selection__arrow{
	height: 40.5px !important;
}*/

.select2-container--default .select2-selection--single{
	border: 1px solid #bbc5d3 !important;
    border-radius: 6px !important;
}

.select2-container .select2-selection--single{
	height: 40.5px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #3b5578 !important;
    line-height: 40.5px !important;
}

.mezzi-cs{
	cursor: default;
}

.colonna_gestione{
	height: 94%;
}

.badge-custom {
    color: #fff;
    background-color: #152e4d;
}

.row_capo_officina {
	height: 94% !important;
}

.row_capo_officina .colonna_gestione{
	height: 98%;
}

#popUpOperai .modal-dialog .modal-body{
	max-height: 500px;
	overflow-y: auto;
}

#map-socio {
    height: 300px;
    border-radius: 8px;
    margin-top: 15px;
}

.img-gallery {
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.img-gallery:hover {
	opacity: 0.8;
}

/* Nascondi pulsante chiusura e caption nel lightbox */

.lb-close {
	display: none !important;
}

.lb-caption {
	display: none !important;
}

.lb-number {
	display: none !important;
}

/* Centra il lightbox nella pagina */

.lb-outerContainer {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	margin: 0 !important;
}

.lb-container {
	text-align: center;
}

/* Stile per mostrare le freccette degli input number */

.qta-ordinata-input::-webkit-inner-spin-button,
.qta-ordinata-input::-webkit-outer-spin-button {
	opacity: 1;
	height: 20px;
}

.qta-ordinata-input[type="number"] {
	-moz-appearance: textfield;
}

.image-preview-item {
	position: relative;
	margin-bottom: 15px;
	padding: 10px;
	border: 1px solid #dee2e6;
	border-radius: 8px;
	background: #f8f9fa;
}

.image-preview-item img {
	max-width: 100%;
	max-height: 200px;
	border-radius: 4px;
	display: block;
	margin: 0 auto;
}

.image-preview-item .remove-image {
	position: absolute;
	top: 5px;
	right: 5px;
	background: rgba(220, 53, 69, 0.9);
	color: white;
	border: none;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}

.image-preview-item .remove-image:hover {
	background: rgba(220, 53, 69, 1);
}

.image-preview-item .image-name {
	margin-top: 8px;
	font-size: 12px;
	color: #666;
	text-align: center;
	word-break: break-all;
}

#image-preview-grid .col-md-3 {
	padding: 5px;
}

/* Centra la modal nello schermo */
#modal-upload-image .modal-dialog {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) !important;
	max-width: 90%;
	width: auto;
}

#modal-upload-image.show .modal-dialog {
	transform: translate(-50%, -50%) !important;
}

/* Stili per tabella con colonne fisse */
#gestisci-prodotti-campagna .card {
	overflow: hidden;
}

#gestisci-prodotti-campagna .table-wrapper {
	overflow-x: auto;
	overflow-y: visible;
	max-width: 100%;
}

#gestisci-prodotti-campagna .campaign-table-panel {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 280px);
	min-height: 300px;
}

#gestisci-prodotti-campagna .campaign-table-panel > .table-wrapper {
	flex: 1 1 auto;
	min-height: 0;
	/* Always reserve/show the vertical scrollbar on the right. */
	overflow-y: scroll;
}

/* Sticky (frozen) left columns need separate borders, otherwise the cell
   borders disappear while scrolling horizontally. */
#table-products-campaign {
	border-collapse: separate;
	border-spacing: 0;
}

#table-products-campaign thead th {
	box-shadow: 0 1px 0 #dee2e6;
}

/* Socio / sotto socio names: max 2 lines, ellipsis, full name in the title tooltip. */
#table-products-campaign thead th .member-header-name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-word;
	line-height: 1.2;
	max-height: 2.4em;
	cursor: default;
}

/* Skip layout + paint of off-screen product rows. With thousands of cells this
   is what makes scrolling smooth and cuts initial render/layout cost.
   contain-intrinsic-size reserves an estimated row height so the scrollbar and
   total page height stay stable while rows are virtualized by the browser. */
#table-products-campaign tbody tr {
	content-visibility: auto;
	contain-intrinsic-size: auto 31px;
}

/* Compact product rows: base .table-sm padding (.6rem) is too loose for this matrix. */
#table-products-campaign tbody td {
	padding: .2rem .4rem;
	vertical-align: middle;
}

/* Frozen product columns (admin): every leading cell without data-member-code.
   position: sticky must be in the stylesheet from the first render; switching
   thousands of cells from static to sticky later in JS cost ~18s of style
   recalc. Edit.js only sets the measured left offsets. */
#table-products-campaign.sticky-columns > tbody > tr > td:not([data-member-code]) {
	position: sticky;
	z-index: 10;
	background-color: #ffffff;
}

/* Quantity cells are plain text; one shared input (.qty-editor) is moved into
   the cell being edited. The fixed height matches the editor so the row does
   not jump when it opens.
   The cell is drawn like the editor input with an inset outline (1px ring
   --qty-gap inside the cell edge) instead of an extra element or pseudo-element
   per cell: outline is paint-only and adds nothing to layout for the thousands
   of cells in the matrix. The horizontal padding (gap + 1px ring + .25rem
   editor padding) puts the number where the editor shows it.
   --qty-gap is shared with the editor position (here and in Edit.js). */
#table-products-campaign {
	--qty-gap: calc(.2rem + 2px);
}

#table-products-campaign tbody td.qty-cell {
	height: calc(1.75rem + .4rem + 1px);
	padding-left: calc(var(--qty-gap) + 1px + .25rem);
	padding-right: calc(var(--qty-gap) + 1px + .25rem);
	outline: 1px solid #bbc5d3;
	outline-offset: calc(-1 * var(--qty-gap) - 1px);
	color: #3b5578;
	font-size: .8125rem;
	cursor: text;
	white-space: nowrap;
}

#table-products-campaign tbody td.qty-cell:hover {
	outline-color: #8a9bb3;
}

#table-products-campaign tbody td.qty-cell:focus {
	outline-color: #2c7be5;
}

/* While editing, the cell keeps its (hidden) number so the column never
   resizes, drops the drawn ring, and the editor is laid over the exact box the
   ring occupied, out of the table layout. The insets below are a fallback:
   Edit.js corrects them for the cell's border widths. */
#table-products-campaign tbody td.qty-cell.qty-cell-editing {
	position: relative;
	outline: none;
	color: transparent;
}

#table-products-campaign .qty-editor {
	position: absolute;
	top: var(--qty-gap);
	right: var(--qty-gap);
	bottom: var(--qty-gap);
	left: var(--qty-gap);
	z-index: 1;
	width: auto;
	height: auto;
	padding: 0 .25rem;
	font-size: .8125rem;
	text-align: right;
	border-radius: 0;
}

/* Hide the wrapper's native horizontal scrollbar; a custom one below spans
   only the scrollable (member) columns. Firefox only: `scrollbar-width` has no
   per-axis option, so it hides both axes -- Chromium now supports the standard
   property too, and setting `none` there would also kill the vertical bar we
   want to keep. Scope it to Firefox; Chromium uses the ::-webkit rule below. */
@supports (-moz-appearance: none) {
	#gestisci-prodotti-campagna .table-wrapper.hide-native-scrollbar {
		scrollbar-width: none;
	}
}

/* Hide only the horizontal native bar; keep the vertical one visible. */
#gestisci-prodotti-campagna .table-wrapper.hide-native-scrollbar::-webkit-scrollbar:horizontal {
	height: 0;
	display: none;
}

/* Sits above the table (first flex child of the panel), so the horizontal
   bar stays reachable without scrolling to the bottom of the matrix. */
#gestisci-prodotti-campagna .member-scrollbar {
	flex: 0 0 auto;
	overflow-x: auto;
	overflow-y: hidden;
	z-index: 40;
	background: #fff;
	border-bottom: 1px solid #dee2e6;
}

#gestisci-prodotti-campagna .member-scrollbar-inner {
	height: 1px;
}

#table_prodotti_campagna {
	width: 100%;
	min-width: 1200px;
	border-collapse: separate;
	border-spacing: 0;
}

#table_prodotti_campagna thead th,
#table_prodotti_campagna tbody td {
	white-space: nowrap;
}

/* Prime 5 colonne fisse - Header (prima riga) */
#table_prodotti_campagna thead tr:first-child th:nth-child(1),
#table_prodotti_campagna thead tr:first-child th:nth-child(2),
#table_prodotti_campagna thead tr:first-child th:nth-child(3),
#table_prodotti_campagna thead tr:first-child th:nth-child(4),
#table_prodotti_campagna thead tr:first-child th:nth-child(5) {
	position: sticky;
	top: 0;
	z-index: 20;
	background-color: #f8f9fa;
}

/* Header (seconda riga) - sticky verticalmente */
#table_prodotti_campagna thead tr:last-child th {
	position: sticky;
	top: 0;
	z-index: 19;
	background-color: #f8f9fa;
}

/* Prime 5 colonne fisse - Body */
#table_prodotti_campagna tbody td:nth-child(1),
#table_prodotti_campagna tbody td:nth-child(2),
#table_prodotti_campagna tbody td:nth-child(3),
#table_prodotti_campagna tbody td:nth-child(4),
#table_prodotti_campagna tbody td:nth-child(5) {
	position: sticky;
	z-index: 10;
	background-color: white;
}

/* Hover sulle righe - le colonne fisse devono mantenere lo sfondo */
#table_prodotti_campagna tbody tr:hover td:nth-child(1),
#table_prodotti_campagna tbody tr:hover td:nth-child(2),
#table_prodotti_campagna tbody tr:hover td:nth-child(3),
#table_prodotti_campagna tbody tr:hover td:nth-child(4),
#table_prodotti_campagna tbody tr:hover td:nth-child(5) {
	background-color: #f8f9fa !important;
}

@media (min-width: 576px) {
	#modal-upload-image .modal-dialog {
		max-width: 600px;
	}
}

@media (min-width: 992px) {
	#modal-upload-image .modal-dialog {
		max-width: 800px;
	}
}


@media (min-width: 1800px) {
    .col-todolist-calendar {
        margin-right: 16vw;
    }
	.sidebar {
        width:16vw;
    }
}

@media (min-width: 1600px) {
    .col-todolist-calendar {
        margin-right: 18vw;
    }
	.sidebar {
        width:18vw;
    }
}

@media (min-width: 1440px) {
    .col-todolist-calendar {
        margin-right: 20vw;
    }
	.sidebar {
        width:20vw;
    }
}

@media (min-width: 1024px) {
    .col-todolist-calendar {
        margin-right: 20vw;
    }
	.sidebar {
        position: fixed;
        top: 62px;
        bottom: 0;
        right: 0;
        z-index: 1000;
        display: block;
        padding: 0px;
        width: 20vw;
        opacity: 1;
    }
}

@media (min-width: 768px) {

	.col-md-custom {
		flex: 0 0 20%;
		max-width: 20%;
		position: relative;
		width: 100%;
		padding-right: 12px;
		padding-left: 12px;
		height: 94%;
	}

}

@media only screen and (min-width: 1024px) {
    #cs-main-topbar {
        margin-left: 230px;
		left: unset;
    }
}

@media only screen and (min-width: 1440px) {
    #cs-main-topbar {
        margin-left: 250px;
		left: unset;
    }
}

@media only screen and (min-width: 1024px) {
    #cs-main-toolbar {
        margin-left: 230px;
		left: unset;
    }
}

@media only screen and (min-width: 1440px) {
    #cs-main-toolbar {
        margin-left: 250px;
		left: unset;
    }
}

.dt-bootstrap4 .dt-layout-start {
	padding-top: 0.25rem !important;
	padding-left: 1.5rem !important;
	padding-bottom: 0.75rem !important;
}

.dt-bootstrap4 .dt-layout-end {
	padding-top: 0.25rem !important;
	padding-right: 1.5rem !important;
	padding-bottom: 0.75rem !important;
}

#cs-main-topbar {
	position: sticky;
	top: 0;
}

#cs-main-toolbar {
	position: sticky;
	top: 62px;
}

#cs-bottom-bar {
	margin: 0;
	z-index: 1030;
	padding: 0;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}

@media only screen and (min-width: 1024px) {
	#cs-bottom-bar {
		position: fixed;
		left: 230px;
	}
}

@media only screen and (min-width: 1440px) {
    #cs-bottom-bar {
		position: fixed;
		left: 250px;
    }
}

.cursor-pointer {
	cursor: pointer;
}

.input-validation-error {
	border-color: #dc3545 !important;
}

select.input-validation-error + .select2-container--default .select2-selection--single {
	border-color: #dc3545 !important;
}

#cs-main-content {
	height: unset;
}

.sortable-ghost {
	opacity: 0.4;
	background-color: #f8f9fa;
}

.sortable-chosen {
	cursor: grabbing;
}

.sortable-drag {
	opacity: 0.8;
}

.offering-handle {
	background-color: #e9ecef;
	user-select: none;
}

.offering-handle:hover {
	background-color: #dee2e6;
}

.offering-item {
	transition: transform 0.2s ease;
}

.sun-editor, .se-container, .se-toolbar {
	border-radius: 0.25rem;
}

.gap-0 {
	gap: 0 !important;
}
.gap-1 {
	gap: 0.25rem !important;
}
.gap-2 {
	gap: 0.5rem !important;
}
.gap-3 {
	gap: 1rem !important;
}
.gap-4 {
	gap: 1.5rem !important;
}
.gap-5 {
	gap: 3rem !important;
}
.row-gap-0 {
	row-gap: 0 !important;
}
.row-gap-1 {
	row-gap: 0.25rem !important;
}
.row-gap-2 {
	row-gap: 0.5rem !important;
}
.row-gap-3 {
	row-gap: 1rem !important;
}
.row-gap-4 {
	row-gap: 1.5rem !important;
}
.row-gap-5 {
	row-gap: 3rem !important;
}
.column-gap-0 {
	column-gap: 0 !important;
}
.column-gap-1 {
	column-gap: 0.25rem !important;
}
.column-gap-2 {
	column-gap: 0.5rem !important;
}
.column-gap-3 {
	column-gap: 1rem !important;
}
.column-gap-4 {
	column-gap: 1.5rem !important;
}
.column-gap-5 {
	column-gap: 3rem !important;
}

/* Stili per le cards dei documenti */
.document-item .card {
	transition: box-shadow 0.3s ease;
	border-radius: 8px;
	overflow: hidden;
}

.document-item .card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.document-item .card-body {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 150px;
}

.document-item .form-control {
	border: 1px solid #e0e0e0;
	transition: border-color 0.2s ease;
}

.document-item .form-control:focus {
	border-color: #007bff;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
}

.document-item .btn {
	transition: background-color 0.2s ease, border-color 0.2s ease;
	font-size: 0.875rem;
	padding: 0.375rem 0.75rem;
}


.document-item .text-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

/* Fix per gap in browsers che non lo supportano nativamente */
.document-item .d-flex.gap-2 > * {
	margin-right: 0.5rem;
}

.document-item .d-flex.gap-2 > *:last-child {
	margin-right: 0;
}

/* Stile per l'icona del file */
.document-item .fa-file-alt {
	color: #007bff;
	min-width: 2rem;
}

/* Migliora la leggibilità del nome del file */
.document-item small.text-muted {
	font-size: 0.75rem;
	line-height: 1.2;
}

/* Badge posizionati correttamente */
.document-item .badge {
	z-index: 10;
}

/* Stili per le sezioni di documenti e immagini */
.documents-section,
.images-section {
	transition: background-color 0.2s ease;
}

/* Stili per la griglia di cards */
.document-item .row.g-2 {
	margin-left: -0.25rem;
	margin-right: -0.25rem;
}

.document-item .row.g-2 > [class*='col-'] {
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

/* Assicura che i bottoni abbiano la stessa altezza */
.document-item .btn-group-sm > .btn,
.document-item .btn-sm {
	min-height: 31px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Previene overflow del testo nei bottoni */
.document-item .btn {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Stili per drag & drop delle immagini */
.shop-image-item.sortable-ghost,
.team-image-item.sortable-ghost {
	opacity: 0.4;
}

.shop-image-item.sortable-chosen .card,
.team-image-item.sortable-chosen .card {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
}

.shop-image-item.sortable-chosen .shop-drag-handle,
.team-image-item.sortable-chosen .team-drag-handle {
	cursor: grabbing !important;
}

.shop-image-item.sortable-drag,
.team-image-item.sortable-drag {
	opacity: 0.8;
}

.shop-drag-handle,
.team-drag-handle {
	cursor: grab;
	transition: color 0.2s ease;
}

.shop-drag-handle:hover,
.team-drag-handle:hover {
	color: #007bff !important;
}

.shop-image-item .card,
.team-image-item .card {
	transition: box-shadow 0.2s ease;
	position: relative;
}

.shop-image-item .card:hover,
.team-image-item .card:hover {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.input-number-arrows::-webkit-inner-spin-button,
.input-number-arrows::-webkit-outer-spin-button {
	opacity: 1;
	-webkit-appearance: button;
}

/* Red arrow indicator for changed cells */
td.cell-changed {
	position: relative;
}

td.cell-changed::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 8px 0 0;
	border-color: #dc3545 transparent transparent transparent;
}

.form-control.flatpickr-input + .form-control[readonly] {
    background-color: unset;
    opacity: 1;
	pointer-events: all;
}

.form-control:disabled, .form-control[readonly] {
	pointer-events: none;
}

.font-stretch-condensed {
	font-variation-settings: "wdth" 85, "YTLC" 100;
}

.font-stretch-extra-condensed {
	font-variation-settings: "wdth" 75, "YTLC" 100;
}

#cs-register-box {
	width: 100%;
	max-width: 720px;
}

/* ==========================================================================
   Sidebar compatta (solo desktop, >= 1024px)
   Stato di default: compatta. La classe .cs-sidebar-collapsed viene messa
   su <html> da uno script inline in _Head.cshtml e commutata dal bottone
   .cs-main-sidebar-toggler della topbar.
   ========================================================================== */

:root {
	--cs-sidebar-collapsed-width: 60px;
}

@media only screen and (min-width: 1024px) {

	#cs-main-topbar,
	#cs-main-toolbar,
	#cs-bottom-bar {
		transition: margin-left .3s ease-in, left .3s ease-in, box-shadow .15s;
	}

	.cs-sidebar-collapsed #cs-main-sidebar {
		max-width: var(--cs-sidebar-collapsed-width);
		padding-left: 0;
		padding-right: 0;
	}

	.cs-sidebar-collapsed #cs-main-sidebar.overflowing {
		padding-right: 0;
	}

	/* Restano solo le icone */
	.cs-sidebar-collapsed #cs-main-sidebar .cs-nav-label {
		display: none;
	}

	.cs-sidebar-collapsed #cs-main-sidebar .navbar-nav .nav-link {
		padding-left: 0;
		padding-right: 0;
		text-align: center;
	}

	.cs-sidebar-collapsed #cs-main-sidebar .navbar-nav .nav-link [class*="fa-"] {
		min-width: 0;
		margin-right: 0;
		font-size: 1.125rem;
	}

	.cs-sidebar-collapsed #cs-main-navbar-brand {
		padding-left: .5rem;
		padding-right: .5rem;
		padding-bottom: 1.25rem;
	}

	/* Logo secondario in fondo: non c'è spazio da compatti */
	.cs-sidebar-collapsed #cs-main-logo {
		display: none;
	}

	/* Allineamento del resto del layout alla sidebar compatta */
	.cs-sidebar-collapsed #cs-main-content {
		margin-left: var(--cs-sidebar-collapsed-width);
	}

	.cs-sidebar-collapsed #cs-main-topbar,
	.cs-sidebar-collapsed #cs-main-toolbar,
	.cs-sidebar-collapsed #cs-main-toolbar.fixed-top {
		margin-left: var(--cs-sidebar-collapsed-width);
		left: unset;
	}

	.cs-sidebar-collapsed #cs-bottom-bar {
		left: var(--cs-sidebar-collapsed-width);
	}
}

/* Tooltip con l'etichetta della voce, mostrato solo con sidebar compatta */
.tooltip.cs-sidebar-tooltip {
	z-index: 1080;
}

.tooltip.cs-sidebar-tooltip .tooltip-inner {
	max-width: 260px;
	white-space: nowrap;
	font-size: .8125rem;
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
	color: #009118;
}

/* Storico sincronizzazioni e notifiche: il messaggio di errore sta su una riga sola, per non
   far crescere la riga fino al triplo delle altre. Un clic sulla cella apre il testo completo. */
.cs-run-table td.cs-run-error-cell {
	max-width: 24rem;
	cursor: pointer;
}

.cs-run-table td.cs-run-error-cell:empty {
	cursor: default;
}

.cs-run-table td.cs-run-error-cell .cs-run-error {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* pre-line, non normal: il riepilogo di una sincronizzazione elenca i documenti falliti uno
   per riga, e con "normal" le righe si fonderebbero in un unico paragrafo. Da chiusa la cella
   resta su una riga sola: "nowrap" rende comunque gli a capo degli spazi. */
.cs-run-table td.cs-run-error-cell.cs-run-error-expanded .cs-run-error {
	overflow: visible;
	white-space: pre-line;
	word-break: break-word;
}

/* Intestazione a due righe: le celle del gruppo "Documenti" non sono ordinabili e non devono
   mostrare le frecce di DataTables. */
.cs-run-table thead th[colspan] {
	cursor: default;
}

/* Storico delle notifiche: la riga si apre sul dettaglio con i destinatari. */
.cs-run-table-clickable tbody tr {
	cursor: pointer;
}

/* Dentro il dettaglio, la cella dell'errore mantiene il proprio cursore. */
.cs-run-table-clickable tbody tr td.cs-run-error-cell:empty {
	cursor: pointer;
}

/* Dettaglio notifica: la riga del destinatario apre l'elenco dei suoi documenti. */
.cs-notify-table tbody tr.cs-notify-recipient {
	cursor: pointer;
}

.cs-notify-table tbody tr.cs-notify-recipient-open {
	background-color: rgba(0, 145, 24, .06);
}

.cs-notify-table td.cs-notify-docs-cell {
	background-color: #f8f9fa;
	padding: .5rem 1rem;
}

.cs-notify-docs-table th {
	font-size: .75rem;
	text-transform: uppercase;
	color: #6c757d;
	border-top: 0;
}

.cs-notify-docs-table td {
	font-size: .8125rem;
}

/* Mirrors #cs-login-box on the login page. */
#reauthentication-dialog {
	border: 0;
	padding: 0;
	background: transparent;
	width: min(390px, calc(100vw - 2rem));
	max-height: calc(100dvh - 2rem);
	overflow: auto;
}

#reauthentication-dialog .card {
	box-shadow: 0 1rem 3rem #0005;
}

/* Same tint as the login page background. */
#reauthentication-dialog::backdrop {
	background: rgba(98, 116, 154, 0.7);
	backdrop-filter: blur(4px);
}

#reauthentication-dialog img {
	max-width: 300px;
}

#reauthentication-dialog .toggle-password {
	cursor: pointer;
}

#reauthentication-title {
	font-size: 1.25rem;
}

#reauthentication-error:empty {
	display: none;
}
/* Progress bar budget annuo: replica di OrderProgressBar dell'app */
.budget-progress-bar-track {
	position: relative;
	height: 10px;
	margin-top: 6px;
	border-radius: 20px;
	background-color: rgba(0, 123, 20, 0.11);
	overflow: hidden;
}

.budget-progress-bar-existing,
.budget-progress-bar-pending {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	border-radius: 20px;
	background-color: var(--budget-progress-bar-color, #BDBDBD);
	overflow: hidden;
}

/* Strisce a 60° (5px ogni 10px) che scorrono verso destra: più larghe di 10px
   a sinistra così la traslazione di un periodo non scopre il bordo */
.budget-progress-bar-pending::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -10px;
	right: 0;
	background-image: repeating-linear-gradient(120deg, var(--budget-progress-bar-color-stripe, #A3A3A3) 0 4.33px, transparent 4.33px 8.66px);
	animation: budget-progress-bar-stripes 1.5s linear infinite;
}

@keyframes budget-progress-bar-stripes {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(10px);
	}
}