html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.bg-image {
  /* height: 100vh; */
  background-size: cover;
  background-position: center;
  /* overflow: auto; */
}

div.dt-container select.dt-input {
  margin-right: 0.5rem;
}

table.dataTable tbody td {
  vertical-align: middle;
}

/* #recordTable thead th {
  text-align: center;
} */

.icon-size {
  height: 20px;
  width: 15px;
}

.disable {
  background: #e7eaee;
  opacity: 1;
}

#suggestions {
  background-color: #fafafa;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
  width: 100%;
}

.suggestion {
  padding: 10px;
  cursor: pointer;
}

.suggestion:hover {
  background-color: #f0f0f0;
}

.ps-rel {
  position: relative;
}
.password-toggle {
  position: absolute;
  right: 20px; /* Align to the right end of the input */
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
/* Icons for the Password field */
.password-icon.icon-show::before {
  content: "🔓"; /* Show icon for password field */
}
.password-icon.icon-hide::before {
  content: "🔒"; /* Hide icon for password field */
}

/* Icons for the Confirm Password field */
.confirm-password-icon.icon-show::before {
  content: "🔓"; /* Show icon for confirm password field */
}
.confirm-password-icon.icon-hide::before {
  content: "🔒"; /* Hide icon for confirm password field */
}

.custom-tooltip {
  --cui-tooltip-bg: var(--cui-primary);
}

.accordion-button.is-invalid {
  border-color: #dc3545; /* Bootstrap's invalid red */
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); /* Optional shadow */
  color: #dc3545; /* Optional: Red text for the accordion header */
}