@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css');
.left-column {
  background-image: url('../../assets/img/loading%20bg.png');
  background-size: cover;
  height: 100vh;
}
.card {
  max-width: 400px;
  width: 100%;
  padding: 20px;
  background-color: 
#f8f8f8;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn {
  color: white;
  border: none;
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  position: relative;
  z-index: 100;
}
.far.fa-star {
  top: 50%;
  text-align: right;
  transform: translateY(-50%);
}
.position-absolute {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
/* Default styles for navigation links */
.nav-link.active, 
.nav-link:focus-within {
  background-color: 
#B3C799 !important;
  border-radius: 5px;
}
.nav-link {
  display: flex;
  align-items: center;
  padding: 10px;
  width: 100%;
  transition: background 0.3s, color 0.3s;
}
.nav-link:hover {
  background: 
#d4c8a3;
  color: #000;
  border-radius: 5px;
}
html, body {
  overflow-x: hidden;
}
.invisible {
  visibility: hidden; /* Makes the element invisible but keeps its space */
}
.nav-item {
  display: inline-block; /* Display items inline */
  margin-right: 10px; /* Adjust spacing between items */
}
/*table fix*/
td.text-center {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px; /* Adjust as needed */
}
/* Add this to your CSS file */
.page-item.active .page-link {
  background-color: 
#007bff; /* Bootstrap primary color */
  border-color: 
#007bff;
  color: white;
}
.page-item.disabled .page-link {
  pointer-events: none; /* Disable click events */
  opacity: 0.6; /* Make it look disabled */
  cursor: not-allowed; /* Show not-allowed cursor */
}
/* Disable cursor for non-input elements */
body *:not(input):not(textarea):not([contenteditable]):not(button):not(select):not([role="button"]):not([role="checkbox"]):not([role="radio"]):not([type="search"]) {
  caret-color: transparent;
}
input, textarea, select {
  caret-color: auto !important;
}
#reorderPoint {
  caret-color: auto; /* Explicitly enable cursor */
  cursor: text;      /* Show text cursor on hover */
}
/* If needed, you can add focus styles to make it more obvious */
#reorderPoint:focus {
  outline: 2px solid 
#28aa4a; /* Match your green color scheme */
  box-shadow: 0 0 3px 
#28aa4a;
}
.checkbox-buttons-container {
  display: flex;
  align-items: center;
  gap: 5px; /* Small gap between buttons */
  margin-left: 5px; /* Adjust alignment */
}
/* Checkbox styling */
#selectAllCheckbox {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
}
/* Center the checkbox in each item row */
.item-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: auto; /* Ensures centering */
}
#withdrawButton, #deleteButton, #addButton {
  border: none; /* Remove border */
  margin-left: 5px; 
  background: transparent; /* Remove background */
  padding: 0; /* Remove extra padding */
  display: flex;
  align-items: center;
  justify-content: center;
}
#itemTableBody td {
  max-width: 400px; /* Adjust based on your column width */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}