/* header */
.bg-primary {
  background-color: #6F7885 !important;
}

/* .btn-warning {
  background-color: #4B908E !important;
  border: none !important;
  box-shadow: none !important;
}

.btn-warning:hover {
  background-color: #73C0B0 !important;
  border: none !important;
  box-shadow: none !important;
} */

.text-primary {
  color: #4B908E !important;
}

/* end header */

/* btn theme */
.btn-primary {
  background-color: #4B908E !important;
  --bs-btn-border-color: #4B908E !important;
  box-shadow: 0 2px 6px 0 rgba(179, 229, 219, .5) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;

}

.btn-primary:hover {
  background-color: #3b706e !important;
  --bs-btn-border-color: #4B908E !important;
  box-shadow: 0 2px 6px 0 rgba(179, 229, 219, .5) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;

}

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #4B908E !important;
  --bs-btn-border-color: #4B908E !important;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #3b706e !important;
  --bs-btn-hover-border-color: #3b706e;
  --bs-btn-focus-shadow-rgb: 179, 229, 219 !important;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #3b706e !important;
  --bs-btn-active-border-color: #3b706e !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #4B908E !important;
  --bs-btn-disabled-border-color: #4B908E !important;
  box-shadow: 0 2px 6px 0 rgba(179, 229, 219, .5)
}

.has-success .form-control {
  border-color: #73C0B0 !important;
}

/* End btn theme */

/* form select focus */
.form-select:focus {
  border-color: #B3E5DB;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(179, 229, 219, 0.25);

}

/* radio check */
.form-check-input:checked[type=radio] {
  background-color: #316064 !important;
  border-color: #316064 !important;

}

/* DataTables */
/* pagination page datatebles */
.pagination .page-item.active .page-link {
  background-color: #4B908E !important;
  color: white !important;
  border-color: #316064 !important;
  box-shadow: 0 0 0 0.25rem rgba(179, 229, 219, 0.25);
}

.page-link {
  color: #4B908E !important;
}

.page-link:focus {

  box-shadow: 0 0 0 0.25rem rgba(179, 229, 219, 0.25);
}

.table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before {
  background-color: #4B908E !important;
}

/* End DataTables */

/* choices list multi */
.choices__list--multiple .choices__item{
  background-color: #4B908E !important;
  border-color: #316064;
}
/* End choices list multi*/


/* select2 */
/* Make Select2 expand to full width across all screen sizes. */
.select2-container {
  width: 100% !important;
  /* Make Select2 fill the container width. */
}

/* Set font size and padding for different screen sizes. */
.select2-container .select2-selection--single {
  font-size: 1rem; /* Default font size */
  padding: 0.375rem 0.75rem; /* Padding */
}

/* Media query for small screens, such as mobile devices. */
@media (max-width: 768px) {
  .select2-container .select2-selection--single {
    font-size: 0.875rem; /* Smaller font size for small screens */
    padding: 0.25rem 0.5rem; /* Reduce padding for small screens */
  }
}

/* Media query for medium screens, such as tablets. */
@media (max-width: 1024px) {
  .select2-container .select2-selection--single {
    font-size: 1rem; /* Tablet-friendly font size */
    padding: 0.375rem 0.75rem; /* Tablet-friendly padding */
  }
}

/* Style Select2 to match form-select. */
.select2-container .select2-selection--single {
  display: flex; /* Use Flexbox */
  align-items: center; /* Vertically center the text */
  justify-content: space-between; /* Space the text and arrow apart */
  height: 2.5rem; /* Adjust height */
  border: 1px solid #ced4da;
  border-radius: 1rem;
  padding: 0 1rem; /* Add padding for spacing */
  font-size: 1rem;
  background-color: #fff;
  box-sizing: border-box;
}

/* Style Select2 when focused. */
.select2-container .select2-selection--single:focus-within {
  border-color: #B3E5DB; /* Focus border color */
  outline: 0; /* Hide the outline */
  box-shadow: 0 0 0 0.25rem rgba(179, 229, 219, 0.25); /* Focus border shadow */
}

/* Style the dropdown. */
.select2-container .select2-dropdown {
  border: 1px solid #ced4da; /* Border */
  border-radius: 0rem 0rem 1rem 1rem; /* Rounded corners */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
  box-sizing: border-box; /* Prevent sizing issues */
  background-color: #fff; /* Background color */
  overflow: hidden; /* Hide overflow from scrolling */
}

/* Style dropdown options. */
.select2-container .select2-results__option {
  padding: 0.5rem 1rem; /* Add option padding */
  font-size: 1rem; /* Font size */
}

/* Option background color on hover or focus. */
.select2-container .select2-results__option:hover {
  background-color: #B3E5DB; /* Hover background color */
}

/* Change the selected option colors. */
.select2-container .select2-results__option[aria-selected="true"] {
  background-color: #B3E5DB; /* Selected option background color */
  color: #333; /* Text color */
}

/* Select2 right-side arrow. */
.select2-container .select2-selection__arrow {
  display: flex; /* Use Flexbox */
  align-items: center; /* Vertically center the arrow */
  justify-content: center; /* Horizontally center the arrow */
  height: auto; /* Let the arrow height adjust automatically */
  padding: 0; /* Reduce padding to prevent the arrow from floating */
  margin-top: -2px; /* Move the arrow down slightly if needed */
}

/* Round the top search area. */
.select2-container .select2-dropdown .select2-search {
  border-bottom: 1px solid #ced4da; /* Divider between the header and options */
  padding: 0.375rem; /* Reduce padding to make the field smaller */
  background-color: #f9f9f9; /* Light background */
  border-radius: 0.375rem; /* Rounded corners */
}

/* Increase the search input border radius. */
.select2-container .select2-dropdown .select2-search input {
  border-radius: 1rem; /* Input rounded corners */
  border: 1px solid #ced4da !important; /* Search input border */
  padding: 0.375rem; /* Reduce input padding */
  background-color: #fff; /* Search input background */
  font-size: 0.875rem; /* Reduce font size */
}

/* Adjust border color on focus. */
.select2-container .select2-dropdown .select2-search input:focus {
  border-color: #B3E5DB; /* Focus border color */
  box-shadow: 0 0 0 0.25rem rgba(179, 229, 219, 0.25); /* Focus shadow */
}

/* Dropdown options. */
.select2-container .select2-results {
  border-radius: 0 0 1rem 1rem; /* Round only the bottom corners */
}
/* end select2 */

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 2.5rem !important;
  width: 2rem !important;
}

/* select2 DarkMode*/
[data-bs-theme=dark] {
/* Set the background and text colors in dark mode. */
 .select2-container .select2-selection--single {
  background-color: #2C302E !important;
  color: #ffffff !important;
  border-color: #555 !important;
}

/* Change the dropdown color. */
 .select2-container .select2-dropdown {
  background-color: #2C302E !important;
  border-color: #555 !important;
}

/* Adjust dropdown option colors. */
 .select2-container .select2-results__option {
  color: #ffffff !important;
  background-color: #2C302E !important;
}

/* Hover color. */
 .select2-container .select2-results__option:hover {
  background-color: #444 !important;
}

/* Selected option color. */
 .select2-container .select2-results__option[aria-selected="true"] {
  background-color: #555 !important;
  color: #ffffff !important;
}

 .select2-container .select2-dropdown .select2-search {
  background-color: #2C302E !important; /* Match the dropdown color */
  border-bottom: 1px solid #555 !important; /* Match the border to the theme */
}
/* Change the search input colors. */
 .select2-container .select2-dropdown .select2-search input {
  background-color: #2C302E !important; /* Dark background */
  border-color: #555 !important; /* Darker border */
  color: #ffffff !important; /* White text */
}

 .select2-container .select2-selection--single .select2-selection__rendered {
  color: #ffffff !important; /* Change text color to white */
  background-color: #2C302E !important; /* Match the dropdown color */
}

/* Match the selected-value dropdown color to the dropdown. */
 .select2-container--default .select2-selection--single {
  background-color: #2C302E !important;
  color: #ffffff !important;
  border-color: #555 !important;
}

/* Adjust the selected dropdown item color. */
 .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: #444 !important; /* Make the color darker */
  color: #ffffff !important;
}

/* Change the Select2 arrow color to white. */
 .select2-container--default .select2-selection__arrow b {
  border-color: #ffffff transparent transparent transparent !important;
}

}