@import url('https://fonts.googleapis.com/css2?family=ABeeZee&display=swap');
    
    /* Import the Loblosch font, but without the style sheet (because that stylesheet conflicts with Schoolschrift */
    @font-face {
      font-family: "Loblosch";
      src: url("/fonts/loblosch/loblosch.ttf") format("truetype")
    }

    .page {
      font-family: 'Loblosch', sans-serif;
      line-height: normal;
      font-size: 14pt;
    }
    
    #inputpages {
      display: none;
    }
    
    .amounts {
      font-family: 'Helvetica', 'Arial', sans-serif;
      font-size: 8pt;
    }
    
    /* Losse Schoolschrift getallen binnen een regel Loblosch */
    .page .letter, .page .rawletter {
      font-family: "Schoolschrift03";
      font-size: 180%;
      line-height: 66%;
      display: inline-block;
      position: relative;
      top: 0.0em;
    }
    .page {
      position: relative;
    }
    
    .page_number {
      position: absolute;
      bottom: 0px;
    }
    .page_container_even .page_number {
      left: 0px;
    }
    .page_container_odd .page_number {
      right: 0px;
    }
      
    .setting {
      float: left;
      margin: 0 10px 0 10px;
    }
    .setting h3 {
      margin: .5em 0 0 0;
    }
    table.settings-table {
      border-spacing: 0;
      border-collapse: collapse;
    }
    table.settings-table > tbody > tr > td {
      border: 1px solid #999;
      margin: 0px;
      padding: 2px 10px 2px 10px;
      box-sizing: border-box;
      height: 44px;
      line-height: 44px;
      overflow: hidden;
    }
    table.settings-table > tbody > tr > td:hover, .button:hover {
      background-color: rgba(0,0,0,.08);
      border: 1px solid #555;
    } 
    table.settings-table > tbody > tr > td.selected, button.selected {
      background-color: rgba(0, 253, 55, 0.22);
      border: 1px solid #555;
    } 
    
    table.toets {
      margin: 0 auto 0 auto;
    }
    table.toets > tbody > tr > td {
      vertical-align: middle;
      padding: 0px 30px 0px 30px;
      max-height: 30px;
      overflow: hidden;
    }
    table.toets .hokjes {
      padding-top: .15em;
    }
    #loading {
      font-weight: normal;
      font-size: 12pt;
      color: #c00;
    }

    .icon-button  {
      display: inline-block;
      min-width: 3em;
      padding: 4px 0 4px 0;
      margin-bottom: 5px;
      text-align: center;
    }
    .icon-button.danger {
      color: #bd0000;
    }
    
    .lines, .imagecell, .othercell {
      display: inline-block;
      vertical-align: text-top;
      width: 100%;
      box-sizing: border-box;
    }
    
    div.print_attribution {
      font-size: 9pt;
      text-align: right;
      line-height: 1;
    }
    div#screen_attributions {
      display: none;
    }
    
    .overlay {
      position: absolute; 
      right: 0;
      z-index: 1;
      opacity: 0.9;
    }
    
    body {
      position: relative;
    }

    .centered .hokjes-table {
      margin: 0 auto 0 auto;
    }

    /* force printing of background color */
    .line, .hokjes-cell {
      -webkit-print-color-adjust: exact !important;   /* Chrome, Safari, Edge */
      color-adjust: exact !important;                 /*Firefox*/
    }

@media print {
  body > * {
    display: none; 
  }
  #pages {
    display: block; 
  }
}