/* Apply the fixed height and position ONLY on desktop screens (768px wide and up) */
@media (min-width: 768px) {
  .sidebar-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    z-index: 1000;
    box-sizing: border-box;
    
    display: flex !important;
    flex-direction: column !important;
  }

  .main-content { 
    margin-left: 25%; /* Must match col-md-3 width */
  }
}

/* Adjust the margin offset further if screens grow to large size (992px wide and up) */
@media (min-width: 992px) {
  /* .sidebar-fixed { */
    /* If your grid column changes sizes, you can update properties here */
  /* } */
  
  .main-content { 
    margin-left: 16.666667%; /* Must match col-lg-2 width */
  }
}

.chart-container {
  position: relative;
  width: 100%;
  margin: auto;
}

.comment-box {
  white-space: pre-line; /* Automatically turns \n into beautiful visual line breaks safely! */
}