.dataTable th {
  font-size: 0.875rem;
}

.dataTable td {
  font-size: 0.875rem;
}

.buttons-create,
.buttons-edit,
.buttons-remove,
.buttons-colvisGroup,
.buttons-collection,
.dataTables_filter,
.dataTables_length,
.dataTables_paginate,
.dataTables_info,
.buttons-copy,
.buttons-excel,
.buttons-csv,
.buttons-pdf {
  font-size: 0.875rem;
}

.dataTables_filter {
  padding-top: 2px !important;
}

.dataTables_info {
  padding-top: 4px !important;
}

.dataTables_length {
  float: right;
}

@media (min-width: 576px) {
  .dataTables_length {
    padding-top: 8px !important;
    padding-left: 8px !important;
  }
}

table.dataTable thead th,
table.dataTable thead td {
  border-bottom: 1px solid #111;
  padding-bottom: 0px;
}

table.dataTable tbody th,
table.dataTable tbody td {
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  padding: 2px;
}

div.modal-dialog.modal-lg {
  max-width: 60%;
}

.dataTables_wrapper .dataTables_processing {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
  z-index: 9999 !important;
}

*:focus {
  outline: none;
}

.selectize-dropdown {
  width: auto !important;
}

.selectize-dropdown [data-selectable],
.selectize-dropdown .optgroup-header {
  white-space: nowrap;
}

table.dataTable tbody tr.selected {
  background-color: #B0BED9 !important;
}

.btn-group-xs>.btn,
.btn-xs {
  padding: .25rem .4rem;
  font-size: .875rem;
  line-height: .5;
  border-radius: .2rem;
}

.clr-current-stmt {
  background-color: #FFE8A3 !important;
}

.clr-charged {
  background-color: #fbb891
}

.clr-payments-received {
  background-color: #A6E9B5;
}

.clr-paid {
  background-color: #A6E9B5;
}

.clr-total-overdue {
  background-color: #f097a2;
  color: #fff;
}

.clr-net-sales {
  background-color: #98E7F4;
}

.clr-yes {
  background-color: #cdffcc;
}

.clr-no {
  background-color: #ffc9c9;
}

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

.clr-paid-and-charged {
  background-color: #F1B5BC;
}

.clr-dark-inactive {
  background-color: #c6c6c6 !important;
}

.issues_calc_net_sales {
  background-color: #98E7F4;
}

.issues_calc_net_sales_ly {
  background-color: #aedae0;
}

.issues_calc_sales_exempt {
  background-color: #f7e7b9 !important;
}

.issues_calc_theo_margin {
  background-color: #f7e3a8 !important;
}

.issues_calc_issues_target {
  background-color: #f6afb7;
}

.issues_calc_purchases {
  background-color: #a5ebf6;
}

.issues_calc_strike_short_fall {
  background-color: #f7e3a8;
}

.issues_calc_sales_achieved {
  background-color: #f6afb7;
}

.issues_calc_short_over_sales {
  background-color: #f7bdc4;
}

.issues_calc_purchases_exempt {
  background-color: #e4f7e4;
}

.issues_calc_purchases_exempt_ly {
  background-color: #c2d7c2;
}

.issues_calc_budget {
  background-color: #5858d9;
  color: #fff;
}

.issues_participation {
  background-color: #d8c8aa;
}

.issues_wholesale {
  background-color: #cdd0e7;
}

/* Begin Choices.js customisation */

/* Set background color to transparent */
.choices__inner {
  background-color: transparent !important;
  /* Transparent background for the entire Choices input */
  border: 1px solid #ced4da;
  /* You can adjust the border to match other inputs */
}

.choices__input {
  background-color: transparent !important;
  /* Transparent background for the input itself */
  color: inherit;
  /* Ensure text color matches the others */
}

/* Style for the selected items at the top */
.choices__list--multiple .choices__item--selectable {
  background-color: #4E72DF !important;
  /* Hyperlocker purple */
  color: #fff !important;
  /* White text color */
  border-radius: 0.25rem;
  /* Rounded corners for better appearance */
  border: none;
  /* Remove border */
  padding: 0.25rem 0.5rem;
  /* Padding for better spacing */
}

/* Style for the close (X) button inside the selected item */
.choices__list--multiple .choices__item--selectable .choices__button {
  color: #fff !important;
  /* White color for the 'X' button */
  background-color: transparent !important;
  /* No background for the 'X' button */
  margin-left: 0.5rem;
  /* Space between text and the 'X' */
}

/* Ensure that the dropdown list options retain their default styles */
.choices__list--dropdown .choices__item {
  background-color: #fff !important;
  /* Default white background for dropdown items */
  color: inherit;
  /* Inherit text color */
}

/* End Choices.js customisation */