/* Add this to your CSS file */

/* Target screens smaller than, for example, 768px (common breakpoint for tablets/mobiles) */
@media (max-width: 767.98px) {
    .daily-total-amount {
        /* Allow the text to wrap to the next line if it's too long */
        white-space: normal;
        /* Optionally, reduce the font size slightly */
        font-size: 0.9em; /* Adjust as needed */
        /* Or allow words (like long numbers) to break if wrapping isn't enough */
        word-break: break-word;
    }

    /* You might also need to adjust the padding or margins of the cells in this row */
    .date-row td {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* You might also consider adjusting the column span on very small screens if needed */
/*
@media (max-width: 575.98px) {
    .date-row .daily-total-amount {
         // Example: Further reduce font size or adjust layout
    }
}
*/

.responsive-iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* 16:9 aspect ratio (most common) */
  padding-top: 56.25%;
}

.responsive-iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}