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

:root,
.cogncurvertical .cogncurregular,
.cogncuroblique .cogncurregular {
  --cursive-font-family: "Cogncur";
  --cursive-start-font-family: "Cogncur-Start";
}
.cogncurvertical {
  --cursive-font-family: "CogncurVertical";
  --cursive-start-font-family: "CogncurVertical-Start";
}
.cogncuredgedvertical {
  --cursive-font-family: "CogncurEdgedVertical";
  /* no suitable starting dots fonts */
}
.cogncuredged {
  --cursive-font-family: "CogncurEdged";
  /* no suitable starting dots fonts */
}
.cogncuroblique, i, em {
  --cursive-font-family: "CogncurOblique";
  --cursive-start-font-family: "CogncurOblique-Start";
}
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 {
  --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: transparent;
  --otherlines-style: solid;
}
.filledrompzone,
  .blacklines .filledrompzone,
  .blueredlines .filledrompzone {
  --baseline-color: #667AFF;
  --otherlines-color: #667AFF;
  --rompzone-color: #e7e9fa; 
  --otherlines-style: solid;
  --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 */
}



.cursive, .rawcursive {
  font-family: var(--cursive-font-family);
  line-height: normal; /* 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: normal; /* 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,
.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;  
}

.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: normal;
  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: '\200a'; /* 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.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; }

.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: 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: .33em;
  height: .325em; /* why??? */
  border-bottom: var(--baseline-width) solid var(--baseline-color);
  border-top: var(--rompline-width) var(--rompline-style) var(--otherlines-color);
  background-color: var(--rompzone-color);
  z-index: -99;
}
.baselines, .romphoogtelijn .baselines, .norompline.romphoogtelijn .baselines {
  border-left: 1px dotted var(--romphoogtelijn-color);
}
.norompline .baselines, .nolines .baselines {
  border-left: none;
}
/* A possible approach to adding a romphoogtelijn left of the liniature would be this.
   If we do this, we should mark the glyph so that it will *not* be skewed for skewed fonts.
 */
 /*
.line:before {
  content: 'i';
  font-family: 'Cogncur Vertical';
  position: relative;
  left: -.3em;
}
*/

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

.rh2 .baselines, .rh2_67 .baselines, .lhwide .baselines, .rh3 .baselines, .lh2 .baselines, .rh4 .baselines, .lh3 .baselines {
  height: .3em;
}
.lh3 .baselines {
  border-bottom-width: 1px;
  border-top-width: 1px;
  height: .31em;
}

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

.rh5 .baselines, .rh6 .baselines, .ld4 .baselines, .rh6 .baselines, .lh4 .baselines, .rh7 .baselines {
  height: .31em;
}
.lh5 .baselines, .rh8 .baselines, .rh9 .baselines, .lh6 .baselines, .lh7 .baselines {
  height: .32em;
  top: .32em;
}


.thin .baselines {
  border-bottom-width: 1px;
  border-top-width: 1px;
}

.nolines .baselines {
  border-width: 0px !important; 
  background-color: transparent !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) var(--otherlines-style) var(--otherlines-color);
  border-bottom: var(--otherlines-width) var(--otherlines-style) var(--otherlines-color); 
  height: 1em;
  box-sizing: border-box;
  z-index: -99;
}
.rh2 .outerlines, .rh2_67 .outerlines, .lhwide .outerlines, .rh3 .outerlines, .lh2 .outerlines, .rh4 .outerlines, .lh3 .outerlines,
.rh2.nospacebetween .line:last-child .outerlines,
.rh2_67.nospacebetween .line:last-child .outerlines,
.lhwide.nospacebetween .line:last-child .outerlines,
.rh3.nospacebetween .line:last-child .outerlines,
.lh2.nospacebetween .line:last-child .outerlines,
.rh4.nospacebetween .line:last-child .outerlines,
.lh3.nospacebetween .line:last-child .outerlines,
.rh2.nospacebetween .rawline:last-child .outerlines,
.rh2_67.nospacebetween .rawline:last-child .outerlines,
.lhwide.nospacebetween .rawline:last-child .outerlines,
.rh3.nospacebetween .rawline:last-child .outerlines,
.lh2.nospacebetween .rawline:last-child .outerlines,
.rh4.nospacebetween .rawline:last-child .outerlines,
.lh3.nospacebetween .rawline:last-child .outerlines,
.rh2 .nospacebetween .line:last-child .outerlines,
.rh2_67 .nospacebetween .line:last-child .outerlines,
.lhwide .nospacebetween .line:last-child .outerlines,
.rh3 .nospacebetween .line:last-child .outerlines,
.lh2 .nospacebetween .line:last-child .outerlines,
.rh4 .nospacebetween .line:last-child .outerlines,
.lh3 .nospacebetween .line:last-child .outerlines,
.rh2 .nospacebetween .rawline:last-child .outerlines,
.rh2_67 .nospacebetween .rawline:last-child .outerlines,
.lhwide .nospacebetween .rawline:last-child .outerlines,
.rh3 .nospacebetween .rawline:last-child .outerlines,
.lh2 .nospacebetween .rawline:last-child .outerlines,
.rh4 .nospacebetween .rawline:last-child .outerlines,
.lh3 .nospacebetween .rawline:last-child .outerlines

 {
  border-bottom-width: 1px;
  border-top-width: 1px;
}

.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: 2px var(--otherlines-style) var(--baseline-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;
}


.rh2.nospacebetween.forcebottomline .outerlines, .rh2.nospacebetween .forcebottomline .outerlines, 
.rh2 .nospacebetween.forcebottomline .outerlines, .rh2 .nospacebetween .forcebottomline .outerlines,
.rh2_67.nospacebetween.forcebottomline .outerlines, .rh2_67.nospacebetween .forcebottomline .outerlines, 
.rh2_67 .nospacebetween.forcebottomline .outerlines, .rh2_67 .nospacebetween .forcebottomline .outerlines,
.rh3.nospacebetween.forcebottomline .outerlines, .rh3.nospacebetween .forcebottomline .outerlines, 
.rh3 .nospacebetween.forcebottomline .outerlines, .rh3 .nospacebetween .forcebottomline .outerlines,
.rh4.nospacebetween.forcebottomline .outerlines, .rh4.nospacebetween .forcebottomline .outerlines, 
.rh4 .nospacebetween.forcebottomline .outerlines, .rh4 .nospacebetween .forcebottomline .outerlines,
.lhwide.nospacebetween.forcebottomline .outerlines, .lhwide.nospacebetween .forcebottomline .outerlines, 
.lhwide .nospacebetween.forcebottomline .outerlines, .lhwide .nospacebetween .forcebottomline .outerlines,
.lh2.nospacebetween.forcebottomline .outerlines, .lh2.nospacebetween .forcebottomline .outerlines, 
.lh2 .nospacebetween.forcebottomline .outerlines, .lh2 .nospacebetween .forcebottomline .outerlines,
.lh3.nospacebetween.forcebottomline .outerlines, .lh3.nospacebetween .forcebottomline .outerlines, 
.lh3 .nospacebetween.forcebottomline .outerlines, .lh3 .nospacebetween .forcebottomline .outerlines
{ /* Needed when we change liniature between lines, e.g. next line is 'noouterlines' or something... */
  border-bottom-width: 1px;
}



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

/* 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 */
}
.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: 1ex;
  position: relative;
  left: -0.05ex; /* compensate for slant */
  bottom: 0.08ex; /* why not 0? */
}
.cogncurvertical table.hokjes-table td div.hokjes-content {
  left: 0px;
}
.cogncuroblique table.hokjes-table td div.hokjes-content {
  left: -0.2ex; /* compensate for slant */
}

[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; /* compensate for slant */
  bottom: 0.11ex; 
}
.cogncurvertical [data-cogncur-numerals-oldstyle="1"] table.hokjes-table td div.hokjes-content,
.cogncurvertical[data-cogncur-numerals-oldstyle="1"] table.hokjes-table td div.hokjes-content,
.cogncurvertical table.hokjes-table[data-cogncur-numerals-oldstyle="1"] td div.hokjes-content {
  left: 0px;
}
.cogncuroblique [data-cogncur-numerals-oldstyle="1"] table.hokjes-table td div.hokjes-content,
.cogncuroblique[data-cogncur-numerals-oldstyle="1"]  table.hokjes-table td div.hokjes-content,
.cogncuroblique table.hokjes-table[data-cogncur-numerals-oldstyle="1"]  td div.hokjes-content {
  left: -0.1ex; /* 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.92ex;
  left: -0.05ex; 
/* 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; 
}
[data-cogncur-numerals-oldstyle="1"] table.hokjes-table td div.hokjes-content.hokjes-overlay,
table.hokjes-table[data-cogncur-numerals-oldstyle="1"]  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.11ex;
  left: -0.05ex; 
/* 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 [data-cogncur-numerals-oldstyle="1"] table.hokjes-table td div.hokjes-content.hokjes-overlay,
.cogncurvertical[data-cogncur-numerals-oldstyle="1"] table.hokjes-table td div.hokjes-content.hokjes-overlay,
.cogncurvertical table.hokjes-table[data-cogncur-numerals-oldstyle="1"] td div.hokjes-content.hokjes-overlay {
  left: 0ex; 
}
.cogncuroblique [data-cogncur-numerals-oldstyle="1"] table.hokjes-table td div.hokjes-content.hokjes-overlay,
.cogncuroblique[data-cogncur-numerals-oldstyle="1"] table.hokjes-table td div.hokjes-content.hokjes-overlay,
.cogncuroblique table.hokjes-table[data-cogncur-numerals-oldstyle="1"] td div.hokjes-content.hokjes-overlay {
  left: -0.1ex; 
}


div.hokjes-content .tussen_de_hokjes {
  position: absolute;
  left: 1.5ex;
}
[data-cogncur-numerals-oldstyle="1"] div.hokjes-content .tussen_de_hokjes {
  position: absolute;
  left: 1ex;
}



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;  
}
.arrows-font table.hokjes-table .hokjes-los, .arrows-font .hokjes-los table.hokjes-table, .arrows-font.hokjes-los table.hokjes-table {
  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;  
}
.morearrows-font table.hokjes-table .hokjes-los, .morearrows-font .hokjes-los table.hokjes-table, .morearrows-font.hokjes-los table.hokjes-table {
  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;  
}

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.03ex; /* 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: .38ex;
}

/* 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.08em;
}
.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.62ex;
}
.hokjes-minder-hoog [data-cogncur-numerals-oldstyle="1"] table.hokjes-table td div.hokjes-content,
.hokjes-minder-hoog table.hokjes-table[data-cogncur-numerals-oldstyle="1"]  td div.hokjes-content,
.hokjes-minder-hoog[data-cogncur-numerals-oldstyle="1"] table.hokjes-table td div.hokjes-content {
  bottom: 0.31ex; 
}
.hokjes-minder-hoog [data-cogncur-numerals-oldstyle="1"] table.hokjes-table td div.hokjes-content.hokjes-overlay,
.hokjes-minder-hoog table.hokjes-table[data-cogncur-numerals-oldstyle="1"]  td div.hokjes-content.hokjes-overlay,
.hokjes-minder-hoog[data-cogncur-numerals-oldstyle="1"] table.hokjes-table td div.hokjes-content.hokjes-overlay,
[data-cogncur-numerals-oldstyle="1"] .hokjes-minder-hoog table.hokjes-table td div.hokjes-content.hokjes-overlay {
  top: -0.32ex;
}



/* 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;
}