/* print.css */
@media print {
    #drop_detail {
      background: white;
      color: black;
      padding: 20px;
      /* More styles as needed */
    }
  
    #drop_detail .image-gallery {
      display: flex; /* Use flexbox to align images next to each other */
      flex-wrap: wrap; /* Allow images to wrap to the next line if needed */
      gap: 10px; /* Add some space between images */
    }
  
    #drop_detail img {
      max-width: 320px; /* Set maximum width for images */
      height: auto; /* Maintain aspect ratio */
    }
  
    #drop_detail .metacontainer, 
    #drop_detail .contentcontainer, 
    #drop_detail .contentcollectioncontainer {
      display: block !important; /* Ensure visibility */
      page-break-before: always; /* Force a page break before the container */
      page-break-after: always; /* Force a page break after the container */
      overflow: visible !important; /* Ensure content is not clipped */
    }
  
    /* Example: Hide elements that are not needed in print */
    .button, .cta {
      display: none;
    }
  
    /* Adjust font sizes, margins, etc. for print */
    body {
      font-size: 12pt;
      margin: 0;
    }
  
    #report .centercontainer {
      width: 100%; /* Use the full width of the page */
      max-width: 100%; /* Prevent exceeding the page width */
      height: auto; /* Allow height to adjust based on content */
      overflow: hidden; /* Hide any overflow content */
      font-size: 9pt; /* Reduce font size to fit more content */
      padding: 5px; /* Reduce padding to save space */
      margin: 0 auto; /* Center the container */
    }
  
    /* Adjust grid and flex items to fit better */
    #report .centercontainer .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); /* Adjust grid to fit content */
      gap: 5px; /* Reduce gap between grid items */
    }
  
    #report .centercontainer .circle-container {
      height: 50px; /* Reduce height */
      width: 50px; /* Reduce width */
    }
  
    #report .centercontainer .circle {
      height: 50px; /* Reduce circle size */
      width: 50px; /* Reduce circle size */
    }
  
    #report .centercontainer img {
      max-width: 100%; /* Ensure images fit within the container */
      height: auto; /* Maintain aspect ratio */
    }
  
    #report .centercontainer table {
      width: 100%; /* Ensure tables fit within the container */
      border-collapse: collapse; /* Remove space between table cells */
    }
  
    #report .centercontainer th, 
    #report .centercontainer td {
      padding: 3px; /* Further reduce padding in table cells */
      font-size: 8pt; /* Further reduce font size in tables */
    }
  
    /* Hide elements not needed for print */
    #report .drops-filter-panel,
    #report .buttonxs,
    #report .cta {
      display: none;
    }
  }
  
  @page {
    margin: 1cm;
  }