.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

.left {text-align: left !important;}
    /* Style the invoice */
      .invoice {
        border: 1px solid black;
        width: 90%;
        margin: 20px auto;
        padding: 10px;
        box-sizing: border-box;
      } 

      /* Style the table for printing */
      .invoice table {
        border-collapse: collapse;
        width: 100%;
      }
      .invoice td, .invoice th {
        border: 1px solid black;
        padding: 5px;
        box-sizing: border-box;
      }
      .invoice th {
        text-align: left;
      }
      
      /* Style the totals section for printing */
      .invoice .totals {
        border-top: 2px solid black;
        margin-top: 10px;
        padding-top: 10px;
      }
      .invoice .totals td {
        font-weight: bold;
      }
      
      /* Style the payment terms for printing */
      .invoice .payment-terms {
        margin-top: 20px;
        font-size: 0.9em;
      }

	.HoverRed:hover {
	  color: red;
	}
     
    .HoverGreen:hover {
	  color: green;
	}
      
    .HoverBlue:hover {
	  color: blue;
	}
      
    .link {cursor: pointer;}
    .warning {
    	color:red;
    }
    
    .strike {text-decoration: line-through;
    text-decoration-thickness: 2px;}
    
@media print {
	/* Hide non-essential elements when printing */
	nav, header, footer, .noprint, .sidebar{
	display: none !important;
	}
  /* Style the invoice */
      .invoice {
        page-break-inside: avoid;
        border: 0px solid black;
	}

	.bg-gradient-primary {
    	background-color: transparent !important;
    	background-image: none;
	}
}    



/* DataTables 1.10 Bootstrap4 packs the ↑/↓ sort arrows 0.5em apart, which
   makes them read as one blurry mark on dense headers. Spread them so each
   arrow is legible on its own. Applies to every list page.
   `!important` because template/header.php loads dataTables.bootstrap4.min.css
   AFTER local.css, so equal-specificity overrides lose without it. */
table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_desc_disabled:before {
	right: 1.4em !important;
}
table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc_disabled:after {
	right: 0.4em !important;
}

.btn-tight {
	padding: .1rem;
}

/* Collapsible filter card — wiring lives in js/global.js (enhanceAll()).
   Header is a clickable bar above the filter body; caret rotates on expand. */
.filter-card-wrapped .filter-toggle {
	display: block;
	cursor: pointer;
	color: inherit;
	text-decoration: none;
	user-select: none;
	font-weight: 600;
}
.filter-card-wrapped .filter-toggle:hover {
	background: rgba(0, 0, 0, 0.025);
	color: inherit;
	text-decoration: none;
}
.filter-card-wrapped .filter-toggle:focus {
	outline: none;
	box-shadow: inset 0 0 0 2px rgba(78, 115, 223, 0.25);
}
.filter-caret {
	transition: transform 0.15s ease;
}
.filter-toggle:not(.collapsed) .filter-caret {
	transform: rotate(90deg);
}
/* Suppress the SB Admin 2 right-side chevron that auto-attaches to any
   .card-header[data-toggle=collapse]. We render our own left-side caret
   via .filter-caret and don't want the duplicate on the right. */
.filter-card-wrapped .filter-toggle::after {
	content: none !important;
	display: none !important;
}

/* ---------------------------------------------------------------------------
   Mobile stacked DataTables — at sm and below, every initialized table
   collapses to a single-column layout. Each row becomes a card; each cell
   is prefixed with its column label (populated via data-label by JS in
   global.js, refreshed on every DataTables draw).

   Overrides DataTables Responsive child-row behavior so we don't end up
   with both a stacked layout AND a "+" expand control.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.table-responsive {
		overflow-x: visible;
	}
	table.dataTable {
		border: 0 !important;
	}
	table.dataTable > thead {
		display: none;
	}
	table.dataTable,
	table.dataTable > tbody,
	table.dataTable > tbody > tr,
	table.dataTable > tbody > tr > td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}
	table.dataTable > tbody > tr {
		border: 1px solid #e3e6f0;
		border-radius: 0.35rem;
		background: #fff;
		margin-bottom: 0.5rem;
		padding: 0.35rem 0.75rem;
	}
	table.dataTable > tbody > tr.odd,
	table.dataTable.table-striped > tbody > tr:nth-of-type(odd) {
		background: #fff;
	}
	table.dataTable > tbody > tr > td {
		border: 0 !important;
		border-top: 1px solid #f1f3f9 !important;
		padding: 0.5rem 0;
		text-align: left !important;
		white-space: normal !important;
	}
	table.dataTable > tbody > tr > td:first-child {
		border-top: 0 !important;
	}
	table.dataTable > tbody > tr > td::before {
		content: attr(data-label);
		display: block;
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: #858796;
		margin-bottom: 0.15rem;
	}
	table.dataTable > tbody > tr > td[data-label=""]::before,
	table.dataTable > tbody > tr > td:not([data-label])::before {
		display: none;
	}
	/* Hide DataTables Responsive's "+" control column and its expanded
	   child rows — we're showing every column inline already. */
	table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
	table.dataTable > tbody > tr.child {
		display: none !important;
	}
	/* Un-hide columns that DataTables Responsive marked as overflow. */
	table.dataTable > tbody > tr > td.dtr-hidden {
		display: block !important;
	}

	/* Row header: action menu pinned flush-left, then the primary link
	   text (client name, task title, etc.). The cell hosting the mobile
	   action dropdown is marked .js-mobile-primary-cell by global.js. */
	table.dataTable > tbody > tr > td.js-mobile-primary-cell {
		display: flex !important;
		align-items: center;
		flex-wrap: wrap;
		padding: 0.25rem 0 0.5rem 0;
		margin: 0 0 0.25rem 0;
		border-top: 0 !important;
		border-bottom: 1px solid #f1f3f9 !important;
		font-size: 1.05rem;
		font-weight: 700;
		color: #3a3b45;
	}
	table.dataTable > tbody > tr > td.js-mobile-primary-cell::before {
		display: none !important;
	}
	table.dataTable > tbody > tr > td.js-mobile-primary-cell .mobile-action-menu {
		order: -1;        /* hard flush-left, before the link text */
		margin: 0 0.5rem 0 0 !important;
		flex: 0 0 auto;
	}
	table.dataTable > tbody > tr > td.js-mobile-primary-cell .js-mobile-action-trigger {
		font-size: 1.1rem;
		line-height: 1;
		color: #5a5c69;
	}
	table.dataTable > tbody > tr > td.js-mobile-primary-cell a {
		color: #4e73df;
		text-decoration: none;
	}
	/* Hide the original Actions column — its buttons are already mirrored
	   into the dropdown above. */
	table.dataTable > tbody > tr > td.js-mobile-actions-cell {
		display: none !important;
	}
}