body {
    background-color: #f8f9fa;
  }

  .page {
    padding: 20px;
  }

  .card {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  }

  .chart-container {
    max-width: 300px; /* Set the maximum width of the chart */
    margin: 0 auto; /* Center the chart */
  }

  #stp-pie-chart {
    width: 100%; /* Make the canvas take the full width of the container */
    height: auto; /* Maintain aspect ratio */
  }

  #top-classifiers-chart {  /* This id will be for your classify pie chart */
    width: 100%; /* Make the canvas take the full width of the container */
    height: auto; /* Maintain aspect ratio */
  }

  .table-container {
    max-height: 400px; /* Adjust based on how much of the table you want to show */
    overflow-y: auto; /* Enables vertical scrolling */
  }

  #document-stats-table tbody {
    display: block;
    max-height: 300px; /* Controls the visible area for the table rows */
    overflow-y: scroll; /* Allows scrolling when content overflows */
  }

  #document-stats-table thead, #document-stats-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  #document-stats-table tbody tr {
    height: 50px; /* Adjust row height if needed */
  }

  #stp-accuracy-table tbody {
    display: block;
    max-height: 300px; /* Controls the visible area for the table rows */
    overflow-y: scroll; /* Allows scrolling when content overflows */
  }

  #stp-accuracy-table thead, #stp-accuracy-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  #stp-accuracy-table tbody tr {
    height: 50px; /* Adjust row height if needed */