.card-info {
    background: none;
    border: none;
    border-radius: 25px;
    position: absolute !important;
    bottom: 0px;
    right: 0px;
    z-index: 1;
  }

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

[data-msg] {
  font-size: 12px;
  position: relative;
}

[data-msg]:focus::before,
[data-msg]:hover::before {
  content: attr(data-msg);
  background-color: white;
  padding: 10px;
  width: auto;
  max-width: 250px;
  min-width: 200px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  border-radius: 5px;
  position: fixed; /* Keeps it independent of parent div */
  top: calc(var(--tooltip-y) - 220px);
  left: calc(var(--tooltip-x) - 150px);
  transform: translateX(-100%);
  z-index: 9999; /* Ensure it's above other elements */
}




[data-msg]:hover::before {
  /* Update the tooltip position dynamically */
  content: attr(data-msg);
  top: calc(var(--tooltip-y) - 200px); /* Offset to position above */
  left: calc(var(--tooltip-x) - 90%);
}



.dt-picker-group-container {
  display: flex;
  justify-content: flex-end;
  align-items: center; /* Align vertically in the center */
  margin-bottom: 0; /* Remove margin if needed */
}


.form-control {
  border: 1px solid #ddd;
  height: 38px; /* Match the height of the container */
  font-size: 14px; /* Adjust font size if needed */
}


.dt-picker-container {
  display: flex;
  align-items: center; /* Ensures vertical alignment */
  max-width: 250px; /* Keeps it compact */
}

.input-group-prepend {
  display: flex;
  align-items: center; /* Aligns the icon with the input */
  height: 41.5px;
  padding-bottom: 3.5px;
}

.input-group-text {
  background-color: #fff;
  border: 1px solid #ddd;
  cursor: pointer;
  display: flex;
  align-items: center; /* Centers the icon vertically */
  height: 100%;
}

.graph-container {
  height: 600px; /* Adjust this value as needed */
}

.card-body {
  height: 100%; /* Ensure content fills the container height */
}

/* Main container styling */
.main-content-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 160px); /* Adjust the height to account for fixed elements (e.g., header) */
  overflow: auto; /* Allow scrolling if needed */
  padding-bottom: 20px; /* Add padding at the bottom */
}

/* Graph container styling */
.graph-container {
  flex: 1; /* Make graph container take available space */
  min-height: 300px; /* Set a minimum height for the graphs */
  display: flex;
  flex-direction: column;
}

.card-body {
  flex: 1; /* Ensures the card content fills the space */
  padding: 0; /* Remove padding to avoid scrollbars */
}

canvas {
  width: 100% !important; /* Ensure canvas takes full width */
  height: 100% !important; /* Ensure canvas takes full height */
}

.btn-primary {
  background-color: #FB773C;
  color: white;
  border: none;
}

.btn-primary:hover {
  background-color: #AD5229 !important; /* Change background color on hover */
  color: white !important; /* Optional: Change text color to white on hover */
  border-color: #AD5229 !important; /* Ensure the border color matches the background color on hover */
}

.section-body-item {
  margin: 5px 0px;
}

.section-body-value {
  color: black;
  font-weight: 500;
}

.section {
  margin-bottom: 25px;
}

.modal-body {
  max-height: 500px;
  overflow-y: scroll;
}

.modal-body h6 {
  color: black;
  font-weight: 500;
}


.section-body-item {
  margin: 5px 0px;
}

.section-body-value {
  color: black;
  font-weight: 500;
}

/* Grid Layout for Modal Details */
.section-body {
  display: grid;
  grid-template-columns: auto 1fr; /* Creates two columns */
  gap: 15px; /* Adds spacing between columns */
  align-items: start; /* Aligns items at the start of each cell */
}

.section-body-item {
  margin: 10px 0px; /* Consistent spacing between items */
}

.section-body-keys {
  text-align: right; /* Aligns labels to the right */
  font-weight: bold; /* Makes labels more distinct */
  padding-right: 15px; /* Space between key and value */
  white-space: nowrap; /* Prevents text from wrapping */
}

.section-body-values {
  text-align: left; /* Aligns content to the left */
  overflow-wrap: break-word; /* Breaks long words */
  word-wrap: break-word; /* Ensures compatibility with older browsers */
  word-break: break-word; /* Forces word breaking */
}

.section-body-value {
  color: black;
  font-weight: 500; /* Makes values visually distinct */
  overflow-wrap: break-word;
}

/* Modal specific styles */
.modal-content {
  min-width: 40vw;
  padding: 20px; /* Added padding for better visual presentation */
}

.modal-body {
  max-height: 500px;
  overflow-y: auto; /* Scrollable content when necessary */
  padding: 15px; /* Consistent spacing inside the modal */
}

.modal-footer button {
  padding: 10px 20px; /* Make buttons easier to click */
  border-radius: 4px; /* Add some rounding to buttons */
}

.link {
  text-decoration: underline;
  color: rgb(0, 109, 250) !important; /* Use blue color to indicate clickable links */
  cursor: pointer;
}

/* Ensure proper visibility of the modal */
#messageInformationModal {
  z-index: 1050; /* Ensure the modal is visible above other elements */
}