@font-face {
  font-family: "Lusletters";
  src: url("/fonts/lusletters/lusletters.ttf?v=20240105") format("truetype");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "Lusletters-Start";
  src: url("/fonts/lusletters/luslettersstartdots.ttf?v=20240105") format("truetype");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "LuslettersVertical";
  src: url("/fonts/lusletters/luslettersvertical.ttf?v=20240105") format("truetype");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "LuslettersVertical-Start";
  src: url("/fonts/lusletters/luslettersverticalstartdots.ttf?v=20240105") format("truetype");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "LuslettersAlmostVertical";
  src: url("/fonts/lusletters/luslettersalmostvertical.ttf?v=20240105") format("truetype");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "LuslettersAlmostVertical-Start";
  src: url("/fonts/lusletters/luslettersalmostverticalstartdots.ttf?v=20240105") format("truetype");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}

:root,
.luslettersvertical .luslettersregular,
.luslettersalmostvertical .luslettersregular {
  --cursive-font-family: "Lusletters";
  --cursive-start-font-family: "Lusletters-Start";
  --tabular-slant-compensation: -0.16ex; /* compensate for slant when positioning numbers in tables */
}
.luslettersvertical {
  --cursive-font-family: "LuslettersVertical";
  --cursive-start-font-family: "LuslettersVertical-Start";
  --tabular-slant-compensation: 0.00ex; /* compensate for slant when positioning numbers in tables */
}
.luslettersalmostvertical {
  --cursive-font-family: "LuslettersAlmostVertical";
  --cursive-start-font-family: "LuslettersAlmostVertical-Start";
  --tabular-slant-compensation: -0.08ex; /* compensate for slant when positioning numbers in tables */
}
:root {
  --baseline-width: 2px;
  --rompline-width: 2px;
  --otherlines-width: 2px;
  --cursive-line-height: normal;
}
:root,
  .blacklines .defaultlines,
  .blueredlines .defaultlines,
  .filledrompzone .defaultlines {
  --baseline-color: #667AFF;
  --otherlines-color: #667AFF;
  --otherlines-color-fade1: #99a6ff;
  --otherlines-color-fade2: #c4ccff;
  --otherlines-color-fade3: #edefff;
  --romphoogtelijn-color: #667AFE; /* the left border must have a different colour from any horizontal borders: https://bugs.chromium.org/p/chromium/issues/detail?id=1265886&q=&can=5 */
  --rompzone-color: transparent;
}
.blacklines,
  .blueredlines .blacklines,
  .filledrompzone .blacklines {
  --baseline-color: #000;
  --otherlines-color: #000;
  --otherlines-color-fade1: #888888;
  --otherlines-color-fade2: #cccccc;
  --otherlines-color-fade3: #f0f0f0;
  --romphoogtelijn-color: #010101; /* the left border must have a different colour from any horizontal borders: https://bugs.chromium.org/p/chromium/issues/detail?id=1265886&q=&can=5 */
  --rompzone-color: transparent;
}
.blueredlines,
  .blacklines .blueredlines,
  .filledrompzone .blueredlines {
  --baseline-color: #e01a6f;
  --otherlines-color: #667AFF;
  --romphoogtelijn-color: #e01a6e;
  /*--rompzone-color: #fff8e7; */
  --rompzone-color: transparent;
}
.filledrompzone,
  .blacklines .filledrompzone,
  .blueredlines .filledrompzone {
  --baseline-color: #667AFF;
  --otherlines-color: #667AFF;
  --rompzone-color: #eaf8ff;
}



.cursive, .rawcursive {
  font-family: var(--cursive-font-family);
  line-height: var(--cursive-line-height); /* Overrule setting from masterstyle */
  font-feature-settings: "calt" 0;  /* We create the connections in javascript, so that we can style individual connecting glyphs */
  font-variant-ligatures: none;  
}

.autocursive {
  font-family: var(--cursive-font-family);
  line-height: var(--cursive-line-height); /* Overrule setting from masterstyle */
  font-feature-settings: "calt" 1;  
}


.word {
  font-family: var(--cursive-font-family);
  font-feature-settings: "calt" 0;  /* We create the connections in javascript, so that we can style individual connecting glyphs */
  font-variant-ligatures: none;  
  font-style: normal;
  font-weight: normal;
}

.cursive.startpunten-font, .cursive .startpunten-font, .startpunten-font .cursive,
.rawcursive.startpunten-font, .rawcursive .startpunten-font, .startpunten-font .rawcursive,
.line.startpunten-font, .line .startpunten-font, .startpunten-font .line,
.rawline.startpunten-font, .rawline .startpunten-font, .startpunten-font .rawline,
.letter.startpunten-font, .letter .startpunten-font, .startpunten-font .letter,
.rawletter.startpunten-font, .rawletter .startpunten-font, .startpunten-font .rawletter,
.hokjes.startpunten-font, .hokjes .startpunten-font, .startpunten-font .hokjes,
.word-startpunten-font, .word .startpunten-font, .startpunten-font .word {
  font-family: var(--cursive-start-font-family);
  font-feature-settings: "calt" 0;  /* We create the connections in javascript, so that we can style individual connecting glyphs */
  font-variant-ligatures: none;  
}

.line, .rawline {
  font-family: var(--cursive-font-family);
  display: block;
  position: relative;
  margin-bottom: 0em;
  text-overflow: clip;
  line-height: 1em;
  white-space: pre; /* Double whitespaces count as double and do not collapse */
  font-feature-settings: "calt" 0;  /* We create the connections in javascript, so that we can style individual connecting glyphs */
  font-variant-ligatures: none;  
  font-style: normal;
  font-weight: normal;
}
.line::before, .rawline::before, .line-original::before, .line-overlay::before {
  content: '\2009'; /* extra spacing */
}
.line-container {
  height: 1em; /* Needed because it only contains absolutely positioned elements */
}


/* Adjustable space between lines. Note that there's always a bit of extra space as soon as 'nospacebetween' is disabled,
   and this extra space is dependent on font size */
.ld1 .line, .ld1.line, .ld1 .rawline, .ld1.rawline { margin-bottom: 0.125em; }
.ld2 .line, .ld2.line, .ld2 .rawline, .ld2.rawline { margin-bottom: 0.250em; }
.ld3 .line, .ld3.line, .ld3 .rawline, .ld3.rawline { margin-bottom: 0.375em; }
.ld4 .line, .ld4.line, .ld4 .rawline, .ld4.rawline { margin-bottom: 0.500em; }
.ld5 .line, .ld5.line, .ld5 .rawline, .ld5.rawline { margin-bottom: 0.625em; }
.ld6 .line, .ld6.line, .ld6 .rawline, .ld6.rawline { margin-bottom: 0.750em; }
.ld7 .line, .ld7.line, .ld7 .rawline, .ld7.rawline { margin-bottom: 0.875em; }
.ld8 .line, .ld8.line, .ld8 .rawline, .ld8.rawline { margin-bottom: 1.000em; }
.ld9 .line, .ld9.line, .ld9 .rawline, .ld9.rawline { margin-bottom: 1.125em; }
.ld10 .line, .ld10.line, .ld10 .rawline, .ld10.rawline { margin-bottom: 1.250em; }
.ld11 .line, .ld11.line, .ld11 .rawline, .ld11.rawline { margin-bottom: 1.375em; }
.ld12 .line, .ld12.line, .ld12 .rawline, .ld12.rawline { margin-bottom: 1.500em; }
.ld13 .line, .ld13.line, .ld13 .rawline, .ld13.rawline { margin-bottom: 1.625em; }
.ld14 .line, .ld14.line, .ld14 .rawline, .ld14.rawline { margin-bottom: 1.750em; }
.ld15 .line, .ld15.line, .ld15 .rawline, .ld15.rawline { margin-bottom: 1.875em; }
.ld16 .line, .ld16.line, .ld16 .rawline, .ld16.rawline { margin-bottom: 2.000em; }
.ld17 .line, .ld17.line, .ld17 .rawline, .ld17.rawline { margin-bottom: 2.125em; }
.ld18 .line, .ld18.line, .ld18 .rawline, .ld18.rawline { margin-bottom: 2.250em; }
.ld19 .line, .ld19.line, .ld19 .rawline, .ld19.rawline { margin-bottom: 2.375em; }
.ld20 .line, .ld20.line, .ld20 .rawline, .ld20.rawline { margin-bottom: 2.500em; }

.ld1 .line:last-child, .ld1.line:last-child, .ld1 .rawline:last-child, .ld1.rawline:last-child,
.ld2 .line:last-child, .ld2.line:last-child, .ld2 .rawline:last-child, .ld2.rawline:last-child,
.ld3 .line:last-child, .ld3.line:last-child, .ld3 .rawline:last-child, .ld3.rawline:last-child,
.ld4 .line:last-child, .ld4.line:last-child, .ld4 .rawline:last-child, .ld4.rawline:last-child,
.ld5 .line:last-child, .ld5.line:last-child, .ld5 .rawline:last-child, .ld5.rawline:last-child,
.ld6 .line:last-child, .ld6.line:last-child, .ld6 .rawline:last-child, .ld6.rawline:last-child,
.ld7 .line:last-child, .ld7.line:last-child, .ld7 .rawline:last-child, .ld7.rawline:last-child,
.ld8 .line:last-child, .ld8.line:last-child, .ld8 .rawline:last-child, .ld8.rawline:last-child,
.ld9 .line:last-child, .ld9.line:last-child, .ld9 .rawline:last-child, .ld9.rawline:last-child,
.ld10 .line:last-child, .ld10.line:last-child, .ld10 .rawline:last-child, .ld10.rawline:last-child,
.ld11 .line:last-child, .ld11.line:last-child, .ld11 .rawline:last-child, .ld11.rawline:last-child,
.ld12 .line:last-child, .ld12.line:last-child, .ld12 .rawline:last-child, .ld12.rawline:last-child,
.ld13 .line:last-child, .ld13.line:last-child, .ld13 .rawline:last-child, .ld13.rawline:last-child,
.ld14 .line:last-child, .ld14.line:last-child, .ld14 .rawline:last-child, .ld14.rawline:last-child,
.ld15 .line:last-child, .ld15.line:last-child, .ld15 .rawline:last-child, .ld15.rawline:last-child,
.ld16 .line:last-child, .ld16.line:last-child, .ld16 .rawline:last-child, .ld16.rawline:last-child,
.ld17 .line:last-child, .ld17.line:last-child, .ld17 .rawline:last-child, .ld17.rawline:last-child,
.ld18 .line:last-child, .ld18.line:last-child, .ld18 .rawline:last-child, .ld18.rawline:last-child,
.ld19 .line:last-child, .ld19.line:last-child, .ld19 .rawline:last-child, .ld19.rawline:last-child,
.ld20 .line:last-child, .ld20.line:last-child, .ld20 .rawline:last-child, .ld20.rawline:last-child
 {
  margin-bottom: 0;
}

/* Adjuste space between sets of lines. Since this uses a different margin, this stacks on top of ld space.
 * Note: while SchoolSchrift uses absolute units, we will use relative units here...
 */
.ldi1 .line.firstrepeat, .ldi1.line.firstrepeat, .ldi1 .rawline.firstrepeat, .ldi1.rawline.firstrepeat { margin-top: 0.111em; }
.ldi2 .line.firstrepeat, .ldi2.line.firstrepeat, .ldi2 .rawline.firstrepeat, .ldi2.rawline.firstrepeat { margin-top: 0.222em; }
.ldi3 .line.firstrepeat, .ldi3.line.firstrepeat, .ldi3 .rawline.firstrepeat, .ldi3.rawline.firstrepeat { margin-top: 0.333em; }
.ldi4 .line.firstrepeat, .ldi4.line.firstrepeat, .ldi4 .rawline.firstrepeat, .ldi4.rawline.firstrepeat { margin-top: 0.444em; }
.ldi5 .line.firstrepeat, .ldi5.line.firstrepeat, .ldi5 .rawline.firstrepeat, .ldi5.rawline.firstrepeat { margin-top: 0.556em; }
.ldi6 .line.firstrepeat, .ldi6.line.firstrepeat, .ldi6 .rawline.firstrepeat, .ldi6.rawline.firstrepeat { margin-top: 0.667em; }
.ldi7 .line.firstrepeat, .ldi7.line.firstrepeat, .ldi7 .rawline.firstrepeat, .ldi7.rawline.firstrepeat { margin-top: 0.778em; }
.ldi8 .line.firstrepeat, .ldi8.line.firstrepeat, .ldi8 .rawline.firstrepeat, .ldi8.rawline.firstrepeat { margin-top: 0.889em; }
.ldi9 .line.firstrepeat, .ldi9.line.firstrepeat, .ldi9 .rawline.firstrepeat, .ldi9.rawline.firstrepeat { margin-top: 1em; }
.ldi10 .line.firstrepeat, .ldi10.line.firstrepeat, .ldi10 .rawline.firstrepeat, .ldi10.rawline.firstrepeat { margin-top: 1.111em; }
.ldi11 .line.firstrepeat, .ldi11.line.firstrepeat, .ldi11 .rawline.firstrepeat, .ldi11.rawline.firstrepeat { margin-top: 1.222em; }
.ldi12 .line.firstrepeat, .ldi12.line.firstrepeat, .ldi12 .rawline.firstrepeat, .ldi12.rawline.firstrepeat { margin-top: 1.333em; }
.ldi13 .line.firstrepeat, .ldi13.line.firstrepeat, .ldi13 .rawline.firstrepeat, .ldi13.rawline.firstrepeat { margin-top: 1.444em; }
.ldi14 .line.firstrepeat, .ldi14.line.firstrepeat, .ldi14 .rawline.firstrepeat, .ldi14.rawline.firstrepeat { margin-top: 1.556em; }
.ldi15 .line.firstrepeat, .ldi15.line.firstrepeat, .ldi15 .rawline.firstrepeat, .ldi15.rawline.firstrepeat { margin-top: 1.667em; }
.ldi16 .line.firstrepeat, .ldi16.line.firstrepeat, .ldi16 .rawline.firstrepeat, .ldi16.rawline.firstrepeat { margin-top: 1.778em; }
.ldi17 .line.firstrepeat, .ldi17.line.firstrepeat, .ldi17 .rawline.firstrepeat, .ldi17.rawline.firstrepeat { margin-top: 1.889em; }
.ldi18 .line.firstrepeat, .ldi18.line.firstrepeat, .ldi18 .rawline.firstrepeat, .ldi18.rawline.firstrepeat { margin-top: 2em; }
.ldi19 .line.firstrepeat, .ldi19.line.firstrepeat, .ldi19 .rawline.firstrepeat, .ldi19.rawline.firstrepeat { margin-top: 2.111em; }
.ldi20 .line.firstrepeat, .ldi20.line.firstrepeat, .ldi20 .rawline.firstrepeat, .ldi20.rawline.firstrepeat { margin-top: 2.222em; }

.ldi1 .line.firstrepeat:first-child, .ldi1.line.firstrepeat:first-child, .ldi1 .rawline.firstrepeat:first-child, .ldi1.rawline.firstrepeat:first-child,
.ldi2 .line.firstrepeat:first-child, .ldi2.line.firstrepeat:first-child, .ldi2 .rawline.firstrepeat:first-child, .ldi2.rawline.firstrepeat:first-child,
.ldi3 .line.firstrepeat:first-child, .ldi3.line.firstrepeat:first-child, .ldi3 .rawline.firstrepeat:first-child, .ldi3.rawline.firstrepeat:first-child,
.ldi4 .line.firstrepeat:first-child, .ldi4.line.firstrepeat:first-child, .ldi4 .rawline.firstrepeat:first-child, .ldi4.rawline.firstrepeat:first-child,
.ldi5 .line.firstrepeat:first-child, .ldi5.line.firstrepeat:first-child, .ldi5 .rawline.firstrepeat:first-child, .ldi5.rawline.firstrepeat:first-child,
.ldi6 .line.firstrepeat:first-child, .ldi6.line.firstrepeat:first-child, .ldi6 .rawline.firstrepeat:first-child, .ldi6.rawline.firstrepeat:first-child,
.ldi7 .line.firstrepeat:first-child, .ldi7.line.firstrepeat:first-child, .ldi7 .rawline.firstrepeat:first-child, .ldi7.rawline.firstrepeat:first-child,
.ldi8 .line.firstrepeat:first-child, .ldi8.line.firstrepeat:first-child, .ldi8 .rawline.firstrepeat:first-child, .ldi8.rawline.firstrepeat:first-child,
.ldi9 .line.firstrepeat:first-child, .ldi9.line.firstrepeat:first-child, .ldi9 .rawline.firstrepeat:first-child, .ldi9.rawline.firstrepeat:first-child,
.ldi10 .line.firstrepeat:first-child, .ldi10.line.firstrepeat:first-child, .ldi10 .rawline.firstrepeat:first-child, .ldi10.rawline.firstrepeat:first-child,
.ldi11 .line.firstrepeat:first-child, .ldi11.line.firstrepeat:first-child, .ldi11 .rawline.firstrepeat:first-child, .ldi11.rawline.firstrepeat:first-child,
.ldi12 .line.firstrepeat:first-child, .ldi12.line.firstrepeat:first-child, .ldi12 .rawline.firstrepeat:first-child, .ldi12.rawline.firstrepeat:first-child,
.ldi13 .line.firstrepeat:first-child, .ldi13.line.firstrepeat:first-child, .ldi13 .rawline.firstrepeat:first-child, .ldi13.rawline.firstrepeat:first-child,
.ldi14 .line.firstrepeat:first-child, .ldi14.line.firstrepeat:first-child, .ldi14 .rawline.firstrepeat:first-child, .ldi14.rawline.firstrepeat:first-child,
.ldi15 .line.firstrepeat:first-child, .ldi15.line.firstrepeat:first-child, .ldi15 .rawline.firstrepeat:first-child, .ldi15.rawline.firstrepeat:first-child,
.ldi16 .line.firstrepeat:first-child, .ldi16.line.firstrepeat:first-child, .ldi16 .rawline.firstrepeat:first-child, .ldi16.rawline.firstrepeat:first-child,
.ldi17 .line.firstrepeat:first-child, .ldi17.line.firstrepeat:first-child, .ldi17 .rawline.firstrepeat:first-child, .ldi17.rawline.firstrepeat:first-child,
.ldi18 .line.firstrepeat:first-child, .ldi18.line.firstrepeat:first-child, .ldi18 .rawline.firstrepeat:first-child, .ldi18.rawline.firstrepeat:first-child,
.ldi19 .line.firstrepeat:first-child, .ldi19.line.firstrepeat:first-child, .ldi19 .rawline.firstrepeat:first-child, .ldi19.rawline.firstrepeat:first-child,
.ldi20 .line.firstrepeat:first-child, .ldi20.line.firstrepeat:first-child, .ldi20 .rawline.firstrepeat:first-child, .ldi20.rawline.firstrepeat:first-child
 {
  margin-top: 0;
}



.letter, .rawletter { /* Voor een cursive letter binnen een regel instructietekst */
  font-family: var(--cursive-font-family);
  font-size: 200%;
  line-height: 50%;
  display: inline-block;
  position: relative;
  top: 0em;
  font-feature-settings: "calt" 0;  /* We create the connections in javascript, so that we can style individual connecting glyphs */
  font-variant-ligatures: none;  
  font-style: normal;
  font-weight: normal;
} 
.letter, .rawletter { /* bold does not work for all connector glyphs. Single letters are often used within title text, so we want to disable bold */
  font-weight: normal;
}

.nospacebetween .line,
.nospacebetween .rawline {
  margin-bottom: 0em;
}

.centered {
  text-align: center;
}

.line-container, .word-container {
  position: relative;
  top: 0;
}
.line-overlay {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%; /* needed for text-alignment to word */
}
.word-overlay {
  position: absolute;
  left: 0;
  z-index: 1;
}
.hokjes-overlay {
  position: absolute;
  left: 0;
  z-index: 1;
}
.line-original {
  position: absolute;
  top: 0;
  z-index: 0;
  width: 100%; /* needed for text-alignment to word */
}


.baselines {
  width: 100%;
  position: absolute;
  top: .375em;
  height: .24em; /* why not .25??? */
  border-bottom: var(--baseline-width) solid var(--baseline-color);
  border-top: var(--rompline-width) dashed var(--otherlines-color);
  background-color: var(--rompzone-color);
  z-index: -99;
}
.romphoogtelijn .baselines {
  border-left: 1px dotted var(--romphoogtelijn-color);
}

.rh2, .rh2_67, .rh3, .rh4, .rh5, .rh6, .rh7, .thin {
  --baseline-width: 1px;
  --rompline-width: 1px;
  --otherlines-width: 1px;
}

.rh2 .baselines, .rh2_67 .baselines, .rh3 .baselines, .rh4 .baselines {
  height: .23em;
  top: .365em;
}

.nospacebetween .outerlines {
  border-bottom: 0px;
}

.rh5 .baselines, .rh6 .baselines, .rh6 .baselines, .rh7 .baselines {
  height: .23em;
  top: .37em;
}
.rh8 .baselines, .rh9 .baselines {
  height: .23em;
  top: .37em;
}

.nolines .baselines {
  border-width: 0px !important; 
  background-color: transparent !important;
}

/* /* We want to partially overlap ascenders and descenders, for two purposes:
  - to match with generic liniature where the waist (romp) zone is 33% and the shared loop zone 67%. Since our
    loops are 1.5x the waist height, ascenders and descenders overlap by 33% of the line height (hence: .overlap33)
    Since the waist zone is .25em in our font, we get:
      waist zone 0.25em, loop zone .5em, line height 0.75em; we need a -.25em margin
  - to match match with Pennenstreken groep 7/8 in which the waist zone is 30%, the shared loop zone is 70%, of
    which 20% can contain overlapping ascenders and descenders (hence: .overlap20). Scaled to .25em waist zone:
      waist zone 0.25em, loop zone .583em, line height .833em; we need a -.167 negative margin.
  In none of these cases do the loop lines coincide with a baseline or waist line, so they should not be suppressed.
  In fact, since the loop lines no longer coincide with each other, we should show both of them. Of course, they can
  always be suppressed with .noouterlines.
*/
 
.overlap33 .line, .overlap33 .rawline {
  margin-bottom: -0.25em;
}
.overlap20 .line, .overlap20 .rawline {
  margin-bottom: -0.167em;
}
.overlap20 .outerlines, .overlap33 .outerlines { 
  border-bottom: var(--otherlines-width) solid var(--otherlines-color) !important;
}
.overlap20.noouterlines .outerlines, .overlap33.noouterlines .outerlines,
.overlap20 .noouterlines .outerlines, .overlap33 .noouterlines .outerlines,
.noouterlines .overlap20 .outerlines, .noouterlines .overlap33 .outerlines
{ 
  border-width: 0px !important;
}
 
 
.nospacebetween .outerlines {
  border-bottom: 0px;
}
.outerlines,
.nospacebetween .line:last-child .outerlines,
.nospacebetween .rawline:last-child .outerlines {
  width: 100%;
  position: absolute;
  top: 0em;
  border-top: var(--otherlines-width) solid var(--otherlines-color);
  border-bottom: var(--otherlines-width) solid var(--otherlines-color); 
  height: 1em;
  box-sizing: border-box;
  z-index: -99;
}
.rh5 .outerlines, .rh6 .outerlines, .rh7 .outerlines,
.rh5.nospacebetween .line:last-child .outerlines,
.rh6.nospacebetween .line:last-child .outerlines,
.rh7.nospacebetween .line:last-child .outerlines,
.rh5.nospacebetween .rawline:last-child .outerlines,
.rh6.nospacebetween .rawline:last-child .outerlines,
.rh7.nospacebetween .rawline:last-child .outerlines,
.rh5 .nospacebetween .line:last-child .outerlines,
.rh6 .nospacebetween .line:last-child .outerlines,
.rh7 .nospacebetween .line:last-child .outerlines,
.rh5 .nospacebetween .rawline:last-child .outerlines,
.rh6 .nospacebetween .rawline:last-child .outerlines,
.rh7 .nospacebetween .rawline:last-child .outerlines
 {
  top: -0.01em;
  height: 1.01em;
}


.nospacebetween .outerlines {
  border-bottom: 0px;
}
.nospacebetween.forcebottomline .outerlines, .nospacebetween .forcebottomline .outerlines { /* Needed when we change liniature between lines, e.g. next line is 'noouterlines' or something... */
  border-bottom: var(--otherlines-width) solid var(--otherlines-color);
}

.thin .outerlines {
  border-top-width: .5px;
  border-bottom-width: .5px;
}
.nolines .outerlines {
  border-width: 0px !important;
}
.noouterlines .outerlines {
  border-width: 0px !important;
}
.norompline .baselines, .norompline_fade .baselines {
  border-top-color: transparent !important;
  --rompzone-color: transparent;
}
.norompline_fade .line:first-child .baselines{
  border-top-color: var(--otherlines-color) !important;
}
.norompline_fade .line:nth-child(2) .baselines{
  border-top-color: var(--otherlines-color-fade1) !important;
}
.norompline_fade .line:nth-child(3) .baselines{
  border-top-color: var(--otherlines-color-fade2) !important;
}
.norompline_fade .line:nth-child(4) .baselines{
  border-top-color: var(--otherlines-color-fade3) !important;
}


.nospacebetween.forcebottomline .outerlines, .nospacebetween .forcebottomline .outerlines, 
.nospacebetween.forcebottomline .outerlines, .nospacebetween .forcebottomline .outerlines 
{ /* Needed when we change liniature between lines, e.g. next line is 'noouterlines' or something... */
  border-bottom-width: var(--otherlines-width);
}

.thin .outerlines {
  border-top-width: .5px;
  border-bottom-width: .5px;
}
.nolines .outerlines {
  border-width: 0px !important;
}
.nobottomline .outerlines {
  border-bottom: 0px !important;
}

.outline {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;  
}
/* Outline text is slightly thicker than normal text. This makes black text with the same thickness as outline text */
.black_with_outline_thickness {
  color: black;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;  
}
.traceable_with_outline_thickness {
  color: #AAA;
  text-shadow: -1px -1px 0 #AAA, 1px -1px 0 #AAA, -1px 1px 0 #AAA, 1px 1px 0 #AAA;  
}

/* Use this to cancel out .outline */
.black {
  color: black;
  text-shadow: none;
}

/* rh = romphoogte in mm. Dit is de afstand van grondlijn tot romplijn.
   lh = lineheight in 1/8". Dit is de afstand van grondlijn tot bovenluslijn. NB onderluszone is niet inbegrepen!!!
 */
.rh2 {
  font-size: 31px;
}
.rh2_67 {
  font-size: 41px;
}
.rh3 {
  font-size: 46px;
}
.rh4 {
  font-size: 61px;
}
.rh5 {
  font-size: 77px;
}
.rh6 {
  font-size: 92px;
}
.rh7 {
  font-size: 107px;
}
.rh8 {
  font-size: 123px;
}
.rh9 {
  font-size: 138px;
}
.rh10 {
  font-size: 153px;
}
.rh11 {
  font-size: 169px;
}
.rh12 {
  font-size: 184px;
}
.rh13 {
  font-size: 199px;
}
.rh14 {
  font-size: 214px;
}
.rh15 {
  font-size: 230px;
}
.rh16 {
  font-size: 245px;
}
.rh17{
  font-size: 260px;
}
.rh18 {
  font-size: 276px;
}
.rh19 {
  font-size: 291px;
}
.rh20 {
  font-size: 306px;
}
.rh22 {
  font-size: 337px;
}
.rh24 {
  font-size: 368px;
}
.rh26 {
  font-size: 398px;
}
.rh28 {
  font-size: 429px;
}
.rh30 {
  font-size: 460px;
}
.rh32 {
  font-size: 490px;
}
.rh34 {
  font-size: 521px;
}
.rh36 {
  font-size: 552px;
}
.rh38 {
  font-size: 582px;
}
.rh40 {
  font-size: 613px;
}
.rh42 {
  font-size: 643px;
}
.rh44 {
  font-size: 674px;
}
.rh46 {
  font-size: 705px;
}
.rh48 {
  font-size: 735px;
}
.rh50 {
  font-size: 766px;
}

.clear {
  clear: both;
}

#cell_template {
  display: none;
}
.invisible {
  /* Only the letter should be invisible, not the background elements */
  color: transparent;
  text-shadow: none; /* overrule .outline */
}
.outline {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;  
}
.traceable {
  color: #AAA;
}
.example {
  color: #333;
}
.term {
  font-style: italic;
}
.pullout {
  border: 1px solid #333;
  padding: 10px;
  float: right;
  background: #fff;
  font-size: 10pt;
  max-width: 40%;
}
.pullout h2 {
  font-weight: bold;
  font-size: inherit;
  margin: 0px;
  text-align: center;
}
h2 { 
  margin: 20px 0 0 0;
}

.correctiesymbool {
  font-family: Arial, sans-serif;
  font-weight: bold;
}
th {
  text-align: left;
}
ul {
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}


.masque-upper {
  width: 100%;
  position: absolute;
  height: .36em;
  left: 1px;
  top: 0em;
  z-index: 10;
  background-color: #eee;
}
.masque-lower {
  width: 100%;
  position: absolute;
  height: .325em;
  left: 1px;
  bottom: 0em;
  z-index: 10;
  background-color: #eee;
}
.masque-body {
  width: 100%;
  position: absolute;
  top: .363em;
  height: .325em;
  left: 1px;
  z-index: 10;
  background-color: #eee;
}
/* If we are masquing a zone, put all lines in front of the masque so that we can see the lines properly.
 * Consequence: the lines are also in front of the text, since the masque is in front of the text. 
 */
.masqued-upper .baselines, .masqued-lower .baselines, .masqued-body .baselines {
  z-index: 11;
}
.masqued-upper .outerlines, .masqued-lower .outerlines, .masqued-body .outerlines {
  z-index: 11 !important;
}

/* 'hokjes' have a height/width-ratio of 2:1. 
 * These 'hokjes' are 1ex wide and 2ex tall, and the baseline of the font is aligned 
 * with the bottom of the 'hokje'. Basically, the bottom 1ex of the font (descender zone)
 * is chopped off. However, if you try to print a webpage, you need to have room for 
 * this bottom 1ex, otherwise the entire line of text is omitted when printing.
 */
.hokjes {
  white-space: pre;
  font-family: var(--cursive-font-family);
  font-feature-settings: "calt" 0;  /* We create the connections in javascript, so that we can style individual connecting glyphs */
  font-variant-ligatures: none;  
  font-style: normal;
  font-weight: normal;
}
.hokjes-table {
  table-layout: fixed;
  margin: 0px;
  border-collapse: collapse;
  border-spacing: 0;	  
}
table.hokjes-table {
  border-spacing: 0;
  border-collapse: collapse;
}
table.hokjes-table td {
  border: 1px solid var(--otherlines-color);
  border-bottom: 1px solid var(--baseline-color);
  margin: 0px;
  padding: 0px;
  padding-bottom: 0.03ex;
  text-align: center;
  box-sizing: border-box;
  vertical-align: baseline;
  line-height: normal; 
}
.rh20 table.hokjes-table td,
.rh22 table.hokjes-table td,
.rh24 table.hokjes-table td,
.rh26 table.hokjes-table td,
.rh28 table.hokjes-table td,
.rh30 table.hokjes-table td,
.rh32 table.hokjes-table td,
.rh34 table.hokjes-table td,
.rh36 table.hokjes-table td,
.rh38 table.hokjes-table td,
.rh40 table.hokjes-table td,
.rh42 table.hokjes-table td,
.rh44 table.hokjes-table td,
.rh46 table.hokjes-table td,
.rh48 table.hokjes-table td,
.rh50 table.hokjes-table td,
.rh20 table.hokjes-table td {
  border-width: 2px;
}


/* Numerals in hokjes must always be tabular. Please make sure in your scripting and data-attributes that the numerals are tabuler!
   Styling will not be correct for propertional numbers.
 */
table.hokjes-table td div.hokjes-content {
  width: 1.5ex;
  height: 3ex;
  padding-top: .38ex;
  position: relative;
  left: var(--tabular-slant-compensation);
  bottom: 0.0ex; 
}
.cogncurvertical table.hokjes-table td div.hokjes-content {
  left: 0px;
}
.cogncuroblique table.hokjes-table td div.hokjes-content {
  left: -0.2ex; /* compensate for slant */
}

table.hokjes-table td div.hokjes-content.hokjes-overlay {
  position: absolute; /* We need to change the padding-top from the normal hokjes to top in this case */
  padding-top: 0ex;
  top: 0.38ex;
  left: var(--tabular-slant-compensation);
/* somehow, if we put 'startpunten-font' on this element, it all goes wrong, but if we punt an element with 'startpunten-font' inside it, it's fine */
}
.cogncurvertical table.hokjes-table td div.hokjes-content.hokjes-overlay {
  left: 0ex; 
}
.cogncuroblique table.hokjes-table td div.hokjes-content.hokjes-overlay {
  left: -0.2ex; 
}


div.hokjes-content .tussen_de_hokjes {
  position: absolute;
  left: calc(1.5ex - var(--tabular-slant-compensation));
}



table.hokjes-table .hokjes-los, .hokjes-los table.hokjes-table {
  border-spacing: 0px 1.5ex;
  border-collapse: separate;
  margin-top: -1.5ex; /* no border-spacing at the top please */
  /* Set font so that 1ex is relative to the correct font */
  font-family: var(--cursive-font-family);
  font-feature-settings: "calt" 0;  /* We create the connections in javascript, so that we can style individual connecting glyphs */
  font-variant-ligatures: none;  
  font-style: normal;
  font-weight: normal;
}

.startpunten-font table.hokjes-table .hokjes-los, .startpunten-font .hokjes-los table.hokjes-table, .startpunten-font.hokjes-los table.hokjes-table {
  font-family: var(--cursive-start-font-family);
  font-feature-settings: "calt" 0;  /* We create the connections in javascript, so that we can style individual connecting glyphs */
  font-variant-ligatures: none;  
}

table.hokjes-table .hokjes-los td.skip, .hokjes-los table.hokjes-table td.skip,
table.hokjes-table .hokjes-nolines td, .hokjes-nolines table.hokjes-table td {
  border: none;
}
table.hokjes-table .hokjes-los td.next, .hokjes-los table.hokjes-table td.next {
  border-left: none;
}
table.hokjes-table .hokjes-baseline td, .hokjes-baseline table.hokjes-table td, table.hokjes-table td.hokjes-baseline {
  border-top: 1px solid rgba(255,255,255,0);
  border-left: 1px solid rgba(255,255,255,0);
  border-right: 1px solid rgba(255,255,255,0);
}
table.hokjes-table .hokjes-met-romphoogtelijn .hokjes-rompzone, .hokjes-met-romphoogtelijn table.hokjes-table .hokjes-rompzone {
  border-left: 1px dotted var(--otherlines-color); /* TODO: nog niet duidelijk genoeg */
}
table.hokjes-table td.next .hokjes-rompzone, table.hokjes-table td.next .hokjes-rompzone,
table.hokjes-table td.skip .hokjes-rompzone, table.hokjes-table td.skip .hokjes-rompzone {
  border-left: none;
}

.hokjes-cell {
  position: relative;
  height: 3ex;
}
.hokjes-minder-hoog .hokjes-cell {
  height: 2.7ex;
}

.hokjes-rompzone {
  position: absolute;
  height: 1.5ex;
  width: 100%;
  bottom: -0.01ex; /* why??? */
  z-index: -99;
}
.hokjes-met-romplijn .hokjes-rompzone {
  border-top: 1px dashed var(--otherlines-color);
  background-color: var(--rompzone-color);
}
.hokjes-met-solid-romplijn .hokjes-rompzone {
  border-top: 1px solid var(--otherlines-color);
  background-color: var(--rompzone-color);
}

.hokjes-los .skip .hokjes-rompzone {
  background-color: transparent;
  border-top: none;
}


/* 'hokjes-minder_hoog' have a height/width-ratio of 1.8:1. 
 * These 'hokjes' are 1ex wide, 1.8ex tall, and the baseline of the font is aligned 
 * with the bottom of the 'hokje'. Don't use them with any glyphs that have descenders.
 * NB the font is 3ex high: 1ex for descenders, 1ex for the 'letterrompen', and 1ex for ascenders.
 */

table.hokjes-minder-hoog.hokjes-table td .hokjes-content,
.hokjes-minder-hoog table.hokjes-table td .hokjes-content {
  bottom: .31ex;
}

/* and for the sake of our settings preview, we need to be able to overrule this :( */
.hokjes-minder-hoog .hokjes-hoog table.hokjes-table td .hokjes-content {
  bottom: 0.00ex;
}
.hokjes-minder-hoog .hokjes-hoog .hokjes-cell {
  height: 3ex;
}

.hokjes-minder-hoog table.hokjes-table td div.hokjes-content.hokjes-overlay,
table.hokjes-table.hokjes-minder-hoog  td div.hokjes-content.hokjes-overlay {
  top: 0.07ex;
}



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

.red {
  color: #c00;
}
.green {
  color: #090;
}