body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

  /* Ensure the parent container of row is at least the height of the viewport */
  .container-fluid {
    min-height: 100vh; /* This ensures that the container is never less than the viewport height */
    display: flex;
    flex-direction: column; /* This stacks the header and row on top of each other */
  }

  /* Set your row to grow with the content */
  .row {
    flex-grow: 1;
    display: flex;
  }

  /* Set your sidebar to take up full height */
  #permanent-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
    min-width: 300px;
  }

  .sticky-sidebar {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0; /* Set the top offset */
    height: 100vh; /* Full height */
    overflow-y: auto; /* Enable scrolling if the sidebar is too long */
}


  .footer {
    text-align: center;
    padding: 10px 15px;
    font-size: small;
    line-height: 1.5;
  }

#plot-placeholder {
  position:absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(173, 216, 230, 0.3); /* Light blue color */
  border-radius: 0.25rem; /* Optional: only if you want rounded corners */
  z-index: 10; /* Ensure it's above other content */
  animation: placeholderGlow 2s infinite;
}

@keyframes placeholderGlow {
  0%, 100% { background-color: rgba(173, 216, 230, 0.3); }
  50% { background-color: rgba(173, 216, 230, 0.6); }
}

.toast {
  font-size: 0.8rem; /* Increase font size */
  max-width: none; /* Remove the default max-width */
  width: auto; /* Full width */
}

.toast-body {
  text-overflow: ellipsis; /* Add an ellipsis (...) if text is too long */
  font-size: 1rem; /* Even larger font size for the body text if needed */
}

#video-div-wrapper {
  display: flex; /* Use flexbox to center content */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 400px; /* Adjust height as needed */
  overflow: hidden; /* Hide any overflow */
}

.plot-video {
  max-height: 100%; /* Maximum height of the video */
  max-width: 100%; /* Maximum width of the video */
  object-fit: contain; /* Contain the video within its box */
}

.close-accordion-item {
  margin-left: auto; /* Pushes the button to the right */
  padding: 0.25rem 0.5rem; /* Adjust padding as needed */
}

.accordion-header .btn-close {
  font-weight: bold; /* Adjust the font weight as needed */
  line-height: 1; /* Adjust the line height if necessary */
  opacity: 1; /* Adjust the opacity for a softer look */
  padding-right: 5px;
  padding-left: 5px;
}

.accordion-header .btn-close:hover {
  opacity: 0.8; /* Full opacity on hover for better visibility */
}