@font-face {
  font-family: "CogncurVertical";
  src: url("/fonts/cogncur/fonts/cogncurvertical.ttf?v=20250819") format("truetype");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "Cogncur";
  src: url("/fonts/cogncur/fonts/cogncur.ttf?v=20250819") format("truetype");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "CogncurOblique";
  src: url("/fonts/cogncur/fonts/cogncuroblique.ttf?v=20250819") format("truetype");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "CogncurEdged";
  src: url("/fonts/cogncur/fonts/cogncuredged.ttf?v=20250819") format("truetype");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "CogncurEdgedVertical";
  src: url("/fonts/cogncur/fonts/cogncuredgedvertical.ttf?v=20250819") format("truetype");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "CogncurVertical-Start";
  src: url("/fonts/cogncur/fonts/cogncurverticalstartdots.ttf?v=20250819") format("truetype");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "Cogncur-Start";
  src: url("/fonts/cogncur/fonts/cogncurstartdots.ttf?v=20250819") format("truetype");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "CogncurOblique-Start";
  src: url("/fonts/cogncur/fonts/cogncurobliquestartdots.ttf?v=20250819") format("truetype");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "Cognforms";
  src: url("/fonts/cogncur/fonts/cognforms.ttf?v=20250819") format("truetype");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "CognformsThick";
  src: url("/fonts/cogncur/fonts/cognformsthick.ttf?v=20250819") format("truetype");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "CognformsThin";
  src: url("/fonts/cogncur/fonts/cognformsthin.ttf?v=20250819") format("truetype");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "CognformsThinner";
  src: url("/fonts/cogncur/fonts/cognformsthinner.ttf?v=20250819") format("truetype");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "CognformsThinnest";
  src: url("/fonts/cogncur/fonts/cognformsthinnest.ttf?v=20250819") format("truetype");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}

:root, .defaultlinethickness {
  --cursive-line-height: normal;
  --lines-font-family-1: "CognformsThick";
  --lines-font-family-2: "Cognforms";
  --lines-font-family-3: "CognformsThin";
  --lines-font-family-4: "CognformsThinner";
  --lines-font-family-5: "CognformsThinnest";
  --lines-font-family-6: "CognformsThinnest";
  --lines-font-family: var(--lines-font-family-6);
}


:root,
.cogncurvertical .cogncurregular,
.cogncuroblique .cogncurregular {
  --cursive-font-family: "Cogncur";
  --cursive-start-font-family: "Cogncur-Start";
  --tabular-slant-compensation: -0.03em; 
}
.cogncurvertical {
  --cursive-font-family: "CogncurVertical";
  --cursive-start-font-family: "CogncurVertical-Start";
  --tabular-slant-compensation: 0em; 
}
.cogncuredgedvertical {
  --cursive-font-family: "CogncurEdgedVertical";
  --tabular-slant-compensation: 0em; 
  /* no suitable starting dots fonts */
}
.cogncuredged {
  --cursive-font-family: "CogncurEdged";
  --tabular-slant-compensation: -0.03em; 
  /* no suitable starting dots fonts */
}
.cogncuroblique, i, em {
  --cursive-font-family: "CogncurOblique";
  --cursive-start-font-family: "CogncurOblique-Start";
  --tabular-slant-compensation: -0.06em;
}
b, strong {
  --cursive-font-family: "CogncurEdged";
  --cursive-start-font-family: "Cogncur-Start"; /* We don't have starting points for Edged fonts */
}
:root {
  --baseline-width: 2px;
  --rompline-width: 2px;
  --otherlines-width: 2px;
  --otherlines-style: dotted;
  --rompline-style: dashed;
}
:root,
  .blacklines .defaultlines,
  .blueredlines .defaultlines,
  .filledrompzone .defaultlines,
  .blackmultistylelines .defaultlines,
  .multistylelines,
  .blacklines .multistylelines,
  .blueredlines .multistylelines,
  .filledrompzone .multistylelines,
  .blackmultistylelines .multistylelines {
  --baseline-color: #667AFF;
  --otherlines-color: #667AFF;
  --otherlines-color-fade1: #99a6ff;
  --otherlines-color-fade2: #c4ccff;
  --otherlines-color-fade3: #edefff;
  --rompzone-color: transparent;
  --midromplijn-color: #667AFE;
  --rompzone-color: transparent;
  --marginline-color: #e01a6f;
}

.blacklines,
  .blueredlines .blacklines,
  .filledrompzone .blacklines,
  .multistylelines .blacklines,
  .blackmultistylelines,
  .blueredlines .blackmultistylelines,
  .filledrompzone .blackmultistylelines,
  .multistylelines .blackmultistylelines {
  --baseline-color: #000;
  --otherlines-color: #000;
  --otherlines-color-fade1: #888888;
  --otherlines-color-fade2: #cccccc;
  --otherlines-color-fade3: #f0f0f0;
  --midromplijn-color: #000;
  --rompzone-color: transparent;
  --marginline-color: #000;
}
.blueredlines,
  .blacklines .blueredlines,
  .filledrompzone .blueredlines,
  .multistylelines .blueredlines,
  .blackmultistylelines .blueredlines {
  --baseline-color: #e01a6f;
  --otherlines-color: #667AFF;
  --rompzone-color: transparent;
  --midromplijn-color: #999;
}
.filledrompzone,
  .blacklines .filledrompzone,
  .blueredlines .filledrompzone,
  .multistylelines .filledrompzone,
  .blackmultistylelines .filledrompzone {
  --baseline-color: #667AFF;
  --otherlines-color: #667AFF;
  --rompzone-color: #e7e9fa; 
  --midromplijn-color: #667AFF;
}

/* Use these instead ...*/
.morelinethickness {
  --lines-font-family-1: "CognformsThick";
  --lines-font-family-2: "CognformsThick";
  --lines-font-family-3: "Cognforms";
  --lines-font-family-4: "CognformsThin";
  --lines-font-family-5: "CognformsThinner";
  --lines-font-family-6: "CognformsThinnest";
}
.morelinethickness2 {
  --lines-font-family-1: "CognformsThick";
  --lines-font-family-2: "CognformsThick";
  --lines-font-family-3: "CognformsThick";
  --lines-font-family-4: "Cognforms";
  --lines-font-family-5: "CognformsThin";
  --lines-font-family-6: "CognformsThinner";
}
.lesslinethickness { /* This only affects smaller font sizes. */
  --lines-font-family-1: "Cognforms";
  --lines-font-family-2: "CognformsThin";
  --lines-font-family-3: "CognformsThinner";
  --lines-font-family-4: "CognformsThinnest";
  --lines-font-family-5: "CognformsThinnest";
  --lines-font-family-6: "CognformsThinnest";
}



.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;  
}


.cursive i, .cursive em, .rawcursive i, .rawcursive em, .autocursive i, .autocursive em {
  --cursive-font-family: "CogncurOblique";
  --cursive-start-font-family: "CogncurOblique-Start";
}
.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,
.hokje-content-main.startpunten-font, .startpunten-font .hokje-content-main,
.hokje-content-overlay.startpunten-font, .startpunten-font .hokje-content-overlay,
.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;  
}

.cursive.arrows-font, .cursive .arrows-font, .arrows-font .cursive,
.rawcursive.arrows-font, .rawcursive .arrows-font, .arrows-font .rawcursive,
.line.arrows-font, .line .arrows-font, .arrows-font .line,
.rawline.arrows-font, .rawline .arrows-font, .arrows-font .rawline,
.letter.arrows-font, .letter .arrows-font, .arrows-font .letter,
.rawletter.arrows-font, .rawletter .arrows-font, .arrows-font .rawletter,
.hokjes.arrows-font, .hokjes .arrows-font, .arrows-font .hokjes,
.word-arrows-font, .word .arrows-font, .arrows-font .word {
  font-family: "Cogncur-Arrows";
  font-feature-settings: "calt" 0;  /* We create the connections in javascript, so that we can style individual connecting glyphs */
  font-variant-ligatures: none;  
}
.cursive.morearrows-font, .cursive .morearrows-font, .morearrows-font .cursive,
.rawcursive.morearrows-font, .rawcursive .morearrows-font, .morearrows-font .rawcursive,
.line.morearrows-font, .line .morearrows-font, .morearrows-font .line,
.rawline.morearrows-font, .rawline .morearrows-font, .morearrows-font .rawline,
.letter.morearrows-font, .letter .morearrows-font, .morearrows-font .letter,
.rawletter.morearrows-font, .rawletter .morearrows-font, .morearrows-font .rawletter,
.hokjes.morearrows-font, .hokjes .morearrows-font, .morearrows-font .hokjes,
.word-morearrows-font, .word .morearrows-font, .morearrows-font .word {
  font-family: "Cogncur-MArrows";
  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);
  line-height: 1.05em;
  --cursive-line-height: 1.05em;
  margin-bottom: -0.05em;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  white-space: pre; /* Double whitespaces count as double and do not collapse */
}
.is-ios-or-mac .line, .is-ios-or-mac .rawline {
  line-height: 1.17em;
  --cursive-line-height: 1.17em;
  margin-bottom: -0.17em;
}

.line-bar, .line-content-leading, .line-lines, .line-start, .line-end, .line-unlined-leading, .hokje-lines {
  font-family: var(--lines-font-family);
  font-smooth: never;
  -webkit-font-smoothing : none;  
}

.line .line-lined,
.rawline .line-lined {
  flex-grow: 1;
  overflow-x: hidden;
}   
.line-content {
  display: flex;
  flex-wrap: nowrap;
}
.line-content .line-text {
  flex-grow: 1;
}
.line-lined {
  position: relative;
  top: 0px;
}
.line-baseline, .line-waistline, .line-topline, .line-bottomline, .line-waistzone, .line-topzone, .line-bottomzone, .line-midwaistline {
  position: absolute;
  top: 0px;
}
.line-lines, .line-start, .line-end {
  color: var(--otherlines-color);
  z-index: -1;
}
.line-content {
  position: relative; /* Needed for z-index */
  top: 0px;
  z-index: 1;
  overflow: hidden;
}
.line-text {
  position: relative; /* Needed to position the text-overlay correctly. Do not hide the overflow, it should be allowed to encroach into line-start and line-end! */
  top: 0px;
  z-index: 1;
}


.line-content-leading {
  color: #666;
  z-index: 10;
  min-width: .05em; /* For sentences started with a j  */
}
.cogncuroblique .line-content-leading{
  min-width: .1em; /* For sentences started with a j  */
}
.cogncurvertical .line-content-leading {
  min-width: .02em;
}


.line-text-overlay {
  position: absolute;
  z-index: 2;
  top: 0px;
  line-height: 1.05em;
}
.is-ios-or-mac .line-text-overlay {
  line-height: 1.17em;
}
.line-waistzone, .line-topzone, .line-bottomzone {
  z-index: -100;
}
.line-waistzone {
  color: var(--rompzone-color);
}
.justify {
  text-align: justify;
  text-align-last: justify;
}
.line-content-end {
  width: .08em; /* Needed for slanted overhanging letters such as f */
}
.cogncuroblique .line-content-end {
  width: .16em; /* Needed for slanted overhanging letters such as f */
}
.cogncurvertical .line-content-end {
  width: .02em; /* Needed for slanted overhanging letters such as f */
}

.line-text-main, .line-text-overlay {
  white-space: pre-wrap; /* somehow 'pre' negates justify when printing */
  width: 10000%; /* Setting a large width prevents the text from line wrapping; the containing element will hide text that overflows to the right. Somehow, setting the width in pixels will force the containing element to expand, but setting the width in % does not... */
}
.justify .line-text-main,
.align-right .line-text-main, 
.centered .line-text-main, 
.word-justify .line-text-main
 {
  width: auto;
}
.justify .line-text-overlay,
.align-right .line-text-overlay,
.centered .line-text-overlay,
.word-justify .line-text-overlay
 {
  width: 100%;
}


.align-right {
  text-align: right;
}
.line-baseline {
  color: var(--baseline-color);
}
.line-unlined-leading {
  color: var(--otherlines-color);
}
.line-content-leading {
  color: var(--otherlines-color);
}

.linestart-boom .line-content-leading {
  color: #ccc;
  min-width: 0.6em;
}
.linestart-driehoek .line-unlined-leading {
  color: var(--baseline-color);
}
.linestart-invisible .line-unlined-leading, .linestart-invisible .line-content-leading {
  visibility: hidden;
}
.linestart-kantlijn .line-content-leading, .linestart-kantlijn-overwrite .line-content-leading {
  color: var(--marginline-color);
}
.linestart-kantlijn-overwrite .line-content-leading {
  max-width: 0em;
}

.line-midwaistline {
  visibility: hidden;
}

.midromplijn .line-midwaistline {
  visibility: visible;
}


/* 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.111em; }
.ld2 .line, .ld2.line, .ld2 .rawline, .ld2.rawline { margin-bottom: 0.222em; }
.ld3 .line, .ld3.line, .ld3 .rawline, .ld3.rawline { margin-bottom: 0.333em; }
.ld4 .line, .ld4.line, .ld4 .rawline, .ld4.rawline { margin-bottom: 0.444em; }
.ld5 .line, .ld5.line, .ld5 .rawline, .ld5.rawline { margin-bottom: 0.556em; }
.ld6 .line, .ld6.line, .ld6 .rawline, .ld6.rawline { margin-bottom: 0.667em; }
.ld7 .line, .ld7.line, .ld7 .rawline, .ld7.rawline { margin-bottom: 0.778em; }
.ld8 .line, .ld8.line, .ld8 .rawline, .ld8.rawline { margin-bottom: 0.889em; }
.ld9 .line, .ld9.line, .ld9 .rawline, .ld9.rawline { margin-bottom: 1em; }
.ld10 .line, .ld10.line, .ld10 .rawline, .ld10.rawline { margin-bottom: 1.111em; }
.ld11 .line, .ld11.line, .ld11 .rawline, .ld11.rawline { margin-bottom: 1.222em; }
.ld12 .line, .ld12.line, .ld12 .rawline, .ld12.rawline { margin-bottom: 1.333em; }
.ld13 .line, .ld13.line, .ld13 .rawline, .ld13.rawline { margin-bottom: 1.444em; }
.ld14 .line, .ld14.line, .ld14 .rawline, .ld14.rawline { margin-bottom: 1.556em; }
.ld15 .line, .ld15.line, .ld15 .rawline, .ld15.rawline { margin-bottom: 1.667em; }
.ld16 .line, .ld16.line, .ld16 .rawline, .ld16.rawline { margin-bottom: 1.778em; }
.ld17 .line, .ld17.line, .ld17 .rawline, .ld17.rawline { margin-bottom: 1.889em; }
.ld18 .line, .ld18.line, .ld18 .rawline, .ld18.rawline { margin-bottom: 2em; }
.ld19 .line, .ld19.line, .ld19 .rawline, .ld19.rawline { margin-bottom: 2.111em; }
.ld20 .line, .ld20.line, .ld20 .rawline, .ld20.rawline { margin-bottom: 2.222em; }

/* TODO: adjustment for mac :(. How to test without public access?... */
.is-ios-or-mac .ld1 .line, .is-ios-or-mac .ld1.line, .is-ios-or-mac .ld1 .rawline, .is-ios-or-mac .ld1.rawline { margin-bottom:-0.059em; } /* Effective: -0.059 + .17 = .111 */
.is-ios-or-mac .ld2 .line, .is-ios-or-mac .ld2.line, .is-ios-or-mac .ld2 .rawline, .is-ios-or-mac .ld2.rawline { margin-bottom: 0.052em; } /* Effective: 0.052 + .17 = .222 */
.is-ios-or-mac .ld3 .line, .is-ios-or-mac .ld3.line, .is-ios-or-mac .ld3 .rawline, .is-ios-or-mac .ld3.rawline { margin-bottom: 0.163em; }
.is-ios-or-mac .ld4 .line, .is-ios-or-mac .ld4.line, .is-ios-or-mac .ld4 .rawline, .is-ios-or-mac .ld4.rawline { margin-bottom: 0.274em; }
.is-ios-or-mac .ld5 .line, .is-ios-or-mac .ld5.line, .is-ios-or-mac .ld5 .rawline, .is-ios-or-mac .ld5.rawline { margin-bottom: 0.386em; }
.is-ios-or-mac .ld6 .line, .is-ios-or-mac .ld6.line, .is-ios-or-mac .ld6 .rawline, .is-ios-or-mac .ld6.rawline { margin-bottom: 0.497em; }
.is-ios-or-mac .ld7 .line, .is-ios-or-mac .ld7.line, .is-ios-or-mac .ld7 .rawline, .is-ios-or-mac .ld7.rawline { margin-bottom: 0.608em; }
.is-ios-or-mac .ld8 .line, .is-ios-or-mac .ld8.line, .is-ios-or-mac .ld8 .rawline, .is-ios-or-mac .ld8.rawline { margin-bottom: 0.719em; }
.is-ios-or-mac .ld9 .line, .is-ios-or-mac .ld9.line, .is-ios-or-mac .ld9 .rawline, .is-ios-or-mac .ld9.rawline { margin-bottom: 0.830em; }
.is-ios-or-mac .ld10 .line, .is-ios-or-mac .ld10.line, .is-ios-or-mac .ld10 .rawline, .is-ios-or-mac .ld10.rawline { margin-bottom: 1.941em; }
.is-ios-or-mac .ld11 .line, .is-ios-or-mac .ld11.line, .is-ios-or-mac .ld11 .rawline, .is-ios-or-mac .ld11.rawline { margin-bottom: 1.052em; }
.is-ios-or-mac .ld12 .line, .is-ios-or-mac .ld12.line, .is-ios-or-mac .ld12 .rawline, .is-ios-or-mac .ld12.rawline { margin-bottom: 1.163em; }
.is-ios-or-mac .ld13 .line, .is-ios-or-mac .ld13.line, .is-ios-or-mac .ld13 .rawline, .is-ios-or-mac .ld13.rawline { margin-bottom: 1.274em; }
.is-ios-or-mac .ld14 .line, .is-ios-or-mac .ld14.line, .is-ios-or-mac .ld14 .rawline, .is-ios-or-mac .ld14.rawline { margin-bottom: 1.386em; }
.is-ios-or-mac .ld15 .line, .is-ios-or-mac .ld15.line, .is-ios-or-mac .ld15 .rawline, .is-ios-or-mac .ld15.rawline { margin-bottom: 1.497em; }
.is-ios-or-mac .ld16 .line, .is-ios-or-mac .ld16.line, .is-ios-or-mac .ld16 .rawline, .is-ios-or-mac .ld16.rawline { margin-bottom: 1.608em; }
.is-ios-or-mac .ld17 .line, .is-ios-or-mac .ld17.line, .is-ios-or-mac .ld17 .rawline, .is-ios-or-mac .ld17.rawline { margin-bottom: 1.719em; }
.is-ios-or-mac .ld18 .line, .is-ios-or-mac .ld18.line, .is-ios-or-mac .ld18 .rawline, .is-ios-or-mac .ld18.rawline { margin-bottom: 1.830em; }
.is-ios-or-mac .ld19 .line, .is-ios-or-mac .ld19.line, .is-ios-or-mac .ld19 .rawline, .is-ios-or-mac .ld19.rawline { margin-bottom: 1.194em; }
.is-ios-or-mac .ld20 .line, .is-ios-or-mac .ld20.line, .is-ios-or-mac .ld20 .rawline, .is-ios-or-mac .ld20.rawline { margin-bottom: 2.052em; }


.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: 150%;
  line-height: 66%;
  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: -0.05em;
}
.is-ios-or-mac .nospacebetween .line,
.is-ios-or-mac .nospacebetween .rawline {
  margin-bottom: -0.17em;
}
.lines {
  padding-bottom: 0.05em;
}

.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;
}
.line-original {
  position: absolute;
  top: 0;
  z-index: 0;
  width: 100%; /* needed for text-alignment to word */
}

/* family-1 is the thickest (relative to the font size), family-5 is the thinnest (relative to the font size */
.rh2, .rh2_67, .rh3, .rh4, .rh5 {
  --lines-font-family: var(--lines-font-family-1);
}
.rh6, .rh7, .rh8, .rh9, .rh10 {
  --lines-font-family: var(--lines-font-family-2);
}
.rh11, .rh12, .rh13, .rh14, .rh15, .rh16 {
  --lines-font-family: var(--lines-font-family-3);
}
.rh17, .rh18, .rh19, .rh20, .rh21, .rh22, .rh23, .rh24 {
  --lines-font-family: var(--lines-font-family-4);
}
.rh25, .rh26, .rh27, .rh28, .rh29, .rh30 {
  --lines-font-family: var(--lines-font-family-5);
}

.nospacebetween .line-bottomline {
  visibility: hidden;
}
.nospacebetween .line:last-child .line-bottomline,
.nospacebetween .rawline:last-child .line-bottomline {
  visibility: visible;
}
.nospacebetween.forcebottomline .line-bottomline, .nospacebetween .forcebottomline .line-bottomline { /* Needed when we change liniature between lines, e.g. next line is 'noouterlines' or something... */
  visibility: visible;
}

.nolines .line-bottomline, .nolines .line-topline,
.noouterlines .line-bottomline, .noouterlines .line-topline {
  visibility: hidden !important;
}
.nolines .line-waistline, 
.norompline .line-waistline {
  visibility: hidden !important;
}
.nolines .line-waistzone, .norompline .line-waistzone, .norompline_fade .line-waistzone {
  visibility: hidden !important;
}
.nolines .line-baseline {
  visibility: hidden !important;
}

.norompline_fade .line-waistline {
  color: transparent;
}
.norompline_fade .line:first-child .line-waistline {
  color: var(--otherlines-color);
}
.norompline_fade .line:nth-child(2) .line-waistline {
  color: var(--otherlines-color-fade1);
}
.norompline_fade .line:nth-child(3) .line-waistline {
  color: var(--otherlines-color-fade2);
}
.norompline_fade .line:nth-child(4) .line-waistline {
  color: var(--otherlines-color-fade3);
}


/* Outline: text-stroke doesn't work for overlapping glyphs, so we use text-shadow instead. */
.outline {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;  
}
.thickoutline {
  color: white;
  text-shadow: -1px -3px 0 #000, 1px -3px 0 #000, 2px -2px 0 #000, 3px -1px 0 #000, 3px 1px 0 #000, 2px 2px 0 #000, 1px 3px 0 #000, -1px 3px 0 #000, -2px 2px 0 #000, -3px 1px 0 #000, -3px -1px 0 #000, -2px -2px 0 #000;  
}
.thickestoutline {
  color: white;
  text-shadow: -2px -5px 0 #000, 0px -5px 0 #000, 2px -5px 0 #000, 3px -4px 0 #000, 4px -3px 0 #000, 5px -2px 0 #000, 5px 0px 0 #000, 5px 2px 0 #000, 4px 3px 0 #000, 3px 4px 0 #000, 2px 5px 0 #000, 0px 5px 0 #000, -2px 5px 0 #000, -3px 4px 0 #000, -4px 3px 0 #000, -5px 2px 0 #000, -5px 0px 0 #000, -5px -2px 0 #000, -4px -3px 0 #000, -3px -4px 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: 23px;
}
.rh2_67 {
  font-size: 30px;
}
.lhwide {  /* 1/3 of wide ruled paper. NB wide ruled paper = 11/32" */
  font-size: 33px; 
}
.rh3 {
  font-size: 34px;
}
.lh2 { 
  font-size: 37px; 
}
.rh4 {
  font-size: 46px;
}
.lh3 { 
  font-size: 55px; 
}
.rh5 {
  font-size: 57px;
}
.rh6 {
  font-size: 69px;
}
.lh4 { 
  font-size: 73px; 
}
.rh7 {
  font-size: 80px;
}
.lh5 { 
  font-size: 91px; 
}
.rh8 {
  font-size: 92px;
}
.rh9 {
  font-size: 103px;
}
.lh6 { 
  font-size: 110px; 
}
.rh10 {
  font-size: 115px;
}
.rh11 {
  font-size: 126px;
}
.lh7 { 
  font-size: 128px; 
}
.rh12 {
  font-size: 138px;
}
.lh8 {
  font-size: 146px; 
}
.rh13 {
  font-size: 149px;
}
.rh14 {
  font-size: 161px;
}
.lh9 {
  font-size: 164px; 
}
.rh15 {
  font-size: 172px;
}
.lh10 {
  font-size: 182px; 
}
.rh16 {
  font-size: 184px;
}
.rh17{
  font-size: 195px;
}
.lh11 {
  font-size: 201px; 
}
.rh18 {
  font-size: 207px;
}
.rh19 {
  font-size: 218px;
}
.lh12 {
  font-size: 219px; 
}
.rh20 {
  font-size: 230px;
}
.lh13 {
  font-size: 237px; 
}
.rh22 {
  font-size: 253px;
}
.lh14 {
  font-size: 256px; 
}
.lh15 {
  font-size: 273px; 
}
.rh24 {
  font-size: 276px;
}
.lh16 {
  font-size: 292px; 
}
.rh26 {
  font-size: 299px;
}
.lh17 {
  font-size: 310px; 
}
.rh28 {
  font-size: 322px;
}
.lh18 {
  font-size: 329px; 
}
.rh30 {
  font-size: 345px;
}
.lh20 {
  font-size: 364px; 
}
.rh32 {
  font-size: 368px;
}
.rh34 {
  font-size: 391px;
}
.lh22 {
  font-size: 402px;
}
.rh36 {
  font-size: 414px;
}
.lh24 {
  font-size: 438px;
}
.rh38 {
  font-size: 437px;
}
.rh40 {
  font-size: 460px;
}
.rh42 {
  font-size: 483px;
}
.rh44 {
  font-size: 506px;
}
.rh46 {
  font-size: 529px;
}
.rh48 {
  font-size: 552px;
}
.rh50 {
  font-size: 575px;
}

.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 */
}
.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.
 *
 * Important metrics:
 * - standard numbers (equal height) in Cogncur are 1.5ex tall. For the heartline instead of the top, that's 1.55 times the heartline of x-height glyphs.
 * - old-style numerals (unequal height) have varying heights, with the 'waist-zone' at x-height (just as with letters)
 * - grid glyphs in Cognforms have a line at x-height
 * - when using standard numbers, we want the top to reach the x-height line. To achieve that, we need to magnify the Cognform glyph grids by 1.55 in both dimensions.
 * - when using old-style numerals, we want some numerals to reach through the x-height line, and we don't need to magnify Cognform glyphs relative to the numerals, but for backwards compatibility, we need to magnify the numerals themselves bij 1.55.
 * 
 */
.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 {
  margin-left: 0.005em; /* Because the grid glyphs in Cognforms stick outside their width a bit. This value possibly be less for thinner Cognforms fonts */
  margin-top: 0.005em;
  margin-right: 0;
}
[data-cogncur-numerals-oldstyle="1"] .hokjes-table  {
  margin-bottom: .6ex; /* Extra room for hanging numerals */
}
.hokjes-row {
  display: flex;
}
.hokje {
  flex-shrink: 0;
}
/* 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.
 */
.hokje {
  position: relative;
  top: 0px;
  width: 1.55ex;
  height: 3.10ex;
  line-height: 3.10ex;
  margin-top: 1.04ex;
  margin-bottom: -1.04ex;
}
[data-cogncur-numerals-oldstyle="1"] .hokjes-table {
  font-size: 155%;
}  
[data-cogncur-numerals-oldstyle="1"] .hokje  {
  width: 1ex;
  height: 2ex;
  line-height: 2ex;
  margin-top: .5ex;
  margin-bottom: -.5ex;
}

.hokjes-minder-hoog .hokje {
  height: 2.79ex;
  line-height: 2.79ex;
}
[data-cogncur-numerals-oldstyle="1"] .hokjes-minder-hoog .hokje,
[data-cogncur-numerals-oldstyle="1"].hokjes-minder-hoog .hokje,
.hokjes-minder-hoog [data-cogncur-numerals-oldstyle="1"] .hokje {
  height: 1.8ex;
  line-height: 1.8ex;
}
.hokjes-los .hokje {
  margin-bottom: .51ex;
}

/* Remove excess margin at the bottom of an entire hokjes-table */
.hokjes-minder-hoog .hokjes-table {
  margin-bottom: 0.2ex;
}
[data-cogncur-numerals-oldstyle="1"].hokjes-minder-hoog .hokjes-table,
[data-cogncur-numerals-oldstyle="1"] .hokjes-minder-hoog .hokjes-table,
.hokjes-minder-hoog [data-cogncur-numerals-oldstyle="1"] .hokjes-table {
  margin-bottom: .7ex;
}
.hokjes-los .hokjes-table {
  margin-bottom: -1.55ex;
}
[data-cogncur-numerals-oldstyle="1"] .hokjes-los .hokjes-table {
  margin-bottom: -.45ex;
}
.hokjes-minder-hoog .hokjes-los .hokjes-table,
.hokjes-minder-hoog.hokjes-los .hokjes-table {
  margin-bottom: -1.35ex;
}
[data-cogncur-numerals-oldstyle="1"].hokjes-minder-hoog .hokjes-los .hokjes-table,
[data-cogncur-numerals-oldstyle="1"] .hokjes-minder-hoog .hokjes-los .hokjes-table,
.hokjes-minder-hoog [data-cogncur-numerals-oldstyle="1"]  .hokjes-los .hokjes-table {
  margin-bottom: -.3ex;
}

/* A 'zero-width' hokje is used to hold a zero-width decimal comma/point.
 * For a comma or pediod, we want no compensation for slant so the comma/period will line up
 * with the grid exactly.
 * For a colon or semicolon, ideal would be 2/3 the normal amount of slant compensation,
 * since their height is 2/3 of the height of numerals. But colon/semicolon are rare, so we
 * don't bother. 
 */ 
.hokje.zero {
  width: 0ex;
  --tabular-slant-compensation: 0;
}

.hokje-content {
  position: absolute;
  top: 0;
  left: var(--tabular-slant-compensation);
  width: 1.55ex;
  height: 3.10ex;
  text-align: center;
}
[data-cogncur-numerals-oldstyle="1"] .hokje-content {
  width: 1ex;
  height: 2ex;
}

.hokjes-minder-hoog .hokje-content {
  height: 2.79ex;
}

[data-cogncur-numerals-oldstyle="1"] .hokjes-minder-hoog .hokje-content {
  height: 1.8ex;
}

/* ???
.is-ios-or-mac table.hokjes-table td div.hokjes-content {
  padding-top: 0ex; 
}
*/
.hokje.zero .hokje-content {
  width: 0ex;
  z-index: 1; /* Somehow the lines from the *other* grids are consider z-index 0 */
}
.hokje-content-overlay {
  position: absolute;
  top: 0; 
}

:root,
.hokjes-met-romplijn {
  --taller-hokje-lines-main-content: 'w';
  --shorter-hokje-lines-main-content: 'W';
}
.hokjes-met-solidromplijn, .hokjes-met-solid-romplijn {
  --taller-hokje-lines-main-content: 'x';
  --shorter-hokje-lines-main-content: 'X';
}
.hokjes-default {
  --taller-hokje-lines-main-content: 'v';
  --shorter-hokje-lines-main-content: 'V';
}
.hokjes-baseline {
  --taller-hokje-lines-main-content: 'u'; /* TODO */
  --shorter-hokje-lines-main-content: 'u';
}
.hokjes-nolines {
  --taller-hokje-lines-main-content: '';
  --shorter-hokje-lines-main-content: '';
}

.hokje-lines {
  font-size: 155%;
  position: relative;
  top: -.235ex;
}
[data-cogncur-numerals-oldstyle="1"]  .hokje-lines {
  font-size: 100%;
  top: 0ex;
}


.hokje-lines-main, .hokje-lines-zone {
  position: absolute;
  left: 0;
  text-shadow: none; /* Cancel out 'outline' effect */  
}

.hokje-lines-main::before,
.hokjes-minder-hoog .hokjes-hoog .hokje-lines-main::before /* for the sake of our settings preview, we need to be able to overrule a global .hokjes-minder-hoog */
 {
  content: var(--taller-hokje-lines-main-content);
  color: var(--otherlines-color);
  z-index: -99;
}
.hokjes-minder-hoog .hokje-lines-main::before {
  content: var(--shorter-hokje-lines-main-content);
}
.hokjes-los .hokje.skip .hokje-lines-main::before {
  content: '';
}

.hokje-lines-zone::before {
  content: 'y';
  color: var(--rompzone-color);
  z-index: -100;
}
.hokjes-los .hokje.skip .hokje-lines-zone::before {
  content: '';
}


/*
[data-cogncur-numerals-oldstyle="1"] table.hokjes-table td div.hokjes-content,
table.hokjes-table[data-cogncur-numerals-oldstyle="1"]  td div.hokjes-content {
  font-size: 150%; 
  width: 1ex;
  height: 2ex;
  padding-top: 0ex;
  position: relative;
  left: -0.05ex; 
  bottom: 0.11ex; 
}
*/



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

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