:root {
  --primary-color: #9182F1; /* You can adjust this color as needed */
}



body {
    font-size: .875rem;
}
  
.indent-after-switch {
  padding-left: 28px;
}


.feather {
  width: 16px;
  height: 16px;
}
  
/*
  * Sidebar
  */

.sidebar {
  position: fixed;
  top: 0;
  /* rtl:raw:
  right: 0;
  */
  bottom: 0;
  /* rtl:remove */
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 48px 0 0; /* Height of navbar */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
  
@media (max-width: 767.98px) {
  .sidebar {
    top: 5rem;
  }
}
  
.sidebar-sticky {
  height: calc(100vh - 48px);
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
}

.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #727272;
}

.sidebar .nav-link.active {
  color: #2470dc;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
  color: inherit;
}

.sidebar-heading {
  font-size: .75rem;
}

/*
  * Navbar
  */

.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .navbar-toggler {
  top: .25rem;
  right: 1rem;
}

.navbar .form-control {
  padding: .75rem 1rem;
}

.form-control-dark {
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
  color: #fff;
  border-color: transparent;
  background-color: rgba(65, 65, 65, 0.331);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}



.nav-link,
.nav-link:focus,
.nav-link:hover {
color: #333;
}



/* Pagination */


.pagination > li > a {
  background-color: white;
  color: #484649;
}

.pagination > li > a:focus,
.pagination > li > span:focus {
  color: white;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
  color: #484649;
  background-color: #eee;
  border-color: #ddd;
}

.pagination > .active > a {
  color: white;
  background-color: #484649 !Important;
  border: solid 1px #484649 !Important;
}

.pagination > .active > a:hover {
  color: white;
  background-color: #484649 !Important;
  border: solid 1px #484649;
}

.page-link {
  font-size: .875rem !Important;
}


/* DateRangePicker */

.daterangepicker {
  font-family: inherit !important;
}


.daterangepicker.with-week-hover table tbody tr:hover,
.daterangepicker.with-week-hover table tbody tr td:hover {
  background-color: #eee !important;
}

.daterangepicker .drp-buttons .btn {
  font-weight: inherit;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #383c40;
}


.dataTables_paginate {
  padding-top: 0.85em;
}


.dropdown-item {
  font-size: 0.875rem !important;
}

.dropdown-item:active {
  background-color: #000 !important;
}


.grid {
  display: grid; 
}

.grid-item-center-vertically {
  display: flex;
  align-items: center;

}

.grid-item-center-horizontally {
  display: flex;
  justify-content: center;
}


.grid-striped > .row:nth-of-type(odd) {
  background-color: rgba(0,0,0,.05);
}

.border-gray {
  border: 1px solid #dbdbdb !important;
}

.select-driver {
  padding-left: 10px;
  margin-left: -10px;
}


/*
* Bootstrap accordions custom
*/

.accordion-button {
  background-color: #f8f9fa !important;
}

.accordion-button:focus {
  background-color: #f8f9fa !important;
  box-shadow: #f8f9fa !important;
  border-color: #f8f9fa !important;
}

.accordion-button:not(.collapsed){
  border-color: black;
  color: black !important;
  background-color: #f8f9fa !important;
}

#sidebarMenu {
  height: 100vh; /* Ensure the sidebar takes the full viewport height */
  overflow-y: auto; /* Allow vertical scrolling if content overflows */
  margin-bottom: 10px !important;
}


.number-input {
  width: 60px;
  border: 1px solid #ced4da;
  border-radius: .375rem;
  padding: .2rem .3rem .2rem .5rem ;
  /* Ensure vertical alignment */
  margin-bottom: 0;
}

.switch-custom {
  margin-top: 0;
  align-self: center;
}


/* Sticky Columns */


:root {
--first-column-width: 58px; /* Define the width of the first column */
--first-column-width-customers-dedicated: 50px;
}

.first-column-sticky tbody tr td:nth-child(1),
.first-column-sticky thead tr:first-child th:nth-child(1),
.first-column-sticky thead tr:nth-child(1) th:nth-child(1),
.first-column-sticky tfoot tr th:nth-child(1) {
  position: sticky;
  left: 0;
  background: white;
  z-index: 2; /* Higher z-index to ensure it's above the second column */
  width: var(--first-column-width); /* Apply the custom property for width */
}

.second-column-sticky tbody tr td:nth-child(2),
.second-column-sticky thead tr:first-child th:nth-child(2),
.second-column-sticky thead tr:nth-child(2) th:nth-child(2),
.second-column-sticky tfoot tr th:nth-child(2) {
  position: sticky;
  left: calc(var(--first-column-width)); /* Use the custom property for left */
  background: white;
  z-index: 1; /* Lower z-index to ensure it's below the first column */
}


.second-column-sticky-customers-dedicated tbody tr td:nth-child(2),
.second-column-sticky-customers-dedicated thead tr:first-child th:nth-child(2),
.second-column-sticky-customers-dedicated thead tr:nth-child(2) th:nth-child(2),
.second-column-sticky-customers-dedicated tfoot tr th:nth-child(2) {
  position: sticky;
  left: calc(var(--first-column-width-customers-dedicated)); /* Use the custom property for left */
  background: white;
  z-index: 1; /* Lower z-index to ensure it's below the first column */
}



/* General sticky settings for first column in any table */
table thead tr th:first-child,
table tbody tr td:first-child,
table tfoot tr th:first-child {
position: sticky;
left: 0;
background: white;
z-index: 2; /* Higher z-index to ensure it's above other columns */
}

  

/* Striped every 4 column table */
.table-striped-4-columns tbody tr td:nth-child(8n+3),
.table-striped-4-columns tbody tr td:nth-child(8n+4),
.table-striped-4-columns tbody tr td:nth-child(8n+5),
.table-striped-4-columns tbody tr td:nth-child(8n+6),
.table-striped-4-columns thead tr:first-child th:nth-child(2n+3),
.table-striped-4-columns thead tr:nth-child(2) th:nth-child(8n+3),
.table-striped-4-columns thead tr:nth-child(2) th:nth-child(8n+4),
.table-striped-4-columns thead tr:nth-child(2) th:nth-child(8n+5),
.table-striped-4-columns thead tr:nth-child(2) th:nth-child(8n+6),
.table-striped-4-columns tfoot tr th:nth-child(8n+3),
.table-striped-4-columns tfoot tr th:nth-child(8n+4),
.table-striped-4-columns tfoot tr th:nth-child(8n+5),
.table-striped-4-columns tfoot tr th:nth-child(8n+6) {
  background-color: rgba(0, 0, 0, .05); /* Change to the desired stripe color */ 
} 
  

.totals-row {
  font-weight: bold;
}


/* Define background colors for alternating headers */
.header-cell:nth-of-type(odd) {
  background-color: #e7e7e7; /* Light gray for odd columns */
}

.header-cell:nth-of-type(even) {
  background-color: #d2d2d2; 
}

/* Badge on Quickbooks alignment */
.small-badge {
  font-size: 0.75rem; /* Adjust font size as needed */
  padding: 0.25em 0.4em; /* Adjust padding as needed */
}


/* Select2 */
.select2-container--default .select2-selection--multiple {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.select2-container--default .select2-selection--multiple {
  border: 1px solid #ced4da !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: transparent !important;
}


.text-bg-success-lighter {
  color: #fff !important;
  background-color: rgb(48, 177, 117) !important;
}