@media print {

  /* Should fix bootstrap tables in printing.*/
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
       float: left;
  }
  .col-sm-12 {
       width: 100%;
  }
  .col-sm-11 {
       width: 91.66666667%;
  }
  .col-sm-10 {
       width: 83.33333333%;
  }
  .col-sm-9 {
       width: 75%;
  }
  .col-sm-8 {
       width: 66.66666667%;
  }
  .col-sm-7 {
       width: 58.33333333%;
  }
  .col-sm-6 {
       width: 50%;
  }
  .col-sm-5 {
       width: 41.66666667%;
  }
  .col-sm-4 {
       width: 33.33333333%;
  }
  .col-sm-3 {
       width: 25%;
  }
  .col-sm-2 {
       width: 16.66666667%;
  }
  .col-sm-1 {
       width: 8.33333333%;
  }

  /* Sometimes you have to break things in order to make them work. */
  .auto-break{
      float: left;
      page-break-inside: auto!important;
      break-inside: auto!important;
  }

  /*I think the name is self-explonatory. But just in case: hides element when printing.*/
  .no-print{
    display: none!important;
  }

  /*Shows only during print */
  .print-only{
    display: initial!important;
  }

  /*Show table cell only during print */
  .print-only-table-cell{
    display: table-cell!important;
  }

  /* Hiding chart description when it might be shortened. */
  .chart-description-small{
    display: none!important;
  }

  .sticky {
    /* Unsticky stickies, so they won't get split in half when printing */
    position: relative!important;
  }

  .navbar, #navigation, .settings-btn, restore-filterbox, clear-filterbox, export-pdf, .export-container, .export-btn, .fa-question-circle {
    /* Remove elements we don't need in print */
    display: none!important;
  }

  /* .charts, .rowcharts, .ngRow { */
  .charts, .rowcharts, .ngRow, .filter-box-wrapper, .no-break {
    /* Avoid page breaks inside chart blocks. This should minimise situations when header is on a different page than the actual chart, or chart appears missing. */
    /* Also fillterbox looks better in one part, I think. */
    /* And no-break is for other places. */
    page-break-inside: avoid!important;
    break-inside: avoid!important;
  }

  .charts button span.title {
    /* Restyle headers so they don't run off to another page because top:-40px was apparently a good thing to put into CSS for a header */
    top: 0!important;
  }

  .progress-bar{
    width: 100%!important;
  }

  .print-center-text {
    text-align: center!important;
  }

  th {
       position: initial!important;
  }

  tfoot {
       display: none;
  }

  @page {
    margin: 0;
}
}


@media only screen and (device-width: 768px) {
     /* For general iPad layouts */
     .navbar, #navigation, .settings-btn, restore-filterbox, clear-filterbox, export-pdf, .export-container, .export-btn, .fa-question-circle {
          /* Remove elements we don't need in print */
          display: none!important;
        }
      
}

@media only screen and (device-width: 1024px) {
     /* For general iPad layouts */
     export-pdf, .export-container, .export-btn, .fa-question-circle {
          /* Remove elements we don't need in print */
          display: none!important;
        }
      
   }