:root, .undo-invert {
  
  --z:  16,16,24;
  --y:  255,255,255;
  
  --z0:  24,24,34; 
  --z1:  28,28,38;
  --z2:  40,40,48; 
  --z3:  48,48,56;
  --z4:  56,56,64;
  --z5:  64,64,72;
  --z6:  80,80,88;
  --z7:  112,112,120; 
  --z8:  128,128,136; 
  --z9:  146,146,152; 
  --z10: 164,164,164; 
  --z11: 186,186,192; 
  --z12: 200,200,208; 
  --z13: 230,230,234; 
  --z14: 240,240,244; 
  --z15: 244,244,248; 
  
  /* red */
  --a:  240,80,80;
  --a0:  54,36,44; 
  --a1:  77,42,47; 
  --a2:  101,47,51; 
  --a3:  125,52,54; 
  --a4:  149,57,57; 
  --a5:  174,60,60; 
  --a6:  200,64,63; 
  --a7:  226,67,66; 
  --a8:  242,82,78; 
  --a9:  247,107,98; 
  --a10: 252,130,119; 
  --a11: 255,151,140; 
  --a12: 255,172,162; 
  --a13: 255,193,184; 
  --a14: 255,213,207; 
  --a15: 254,233,230; 
  
  --b0:  54,42,42; 
  --b1:  78,56,43; 
  --b2:  102,70,44; 
  --b3:  127,85,43; 
  --b4:  152,101,41; 
  --b5:  178,116,37; 
  --b6:  204,133,31; 
  --b7:  231,150,21; 
  --b8:  247,163,38; 
  --b9:  251,174,71; 
  --b10: 254,185,99; 
  --b11: 255,196,125; 
  --b12: 255,207,151; 
  --b13: 255,218,176; 
  --b14: 255,229,202; 
  --b15: 254,240,228; 
  
  --c0:  37,45,49; 
  --c1:  41,62,59; 
  --c2:  44,79,69; 
  --c3:  46,97,80; 
  --c4:  45,116,90; 
  --c5:  43,135,101; 
  --c6:  37,155,112; 
  --c7:  26,175,123; 
  --c8:  50,189,136; 
  --c9:  87,197,150; 
  --c10: 115,206,164; 
  --c11: 141,214,178; 
  --c12: 164,221,193; 
  --c13: 187,229,208; 
  --c14: 210,237,222; 
  --c15: 232,244,237;

  --d: 48, 128, 236;
  --d0:  38,40,56; 
  --d1:  44,50,79; 
  --d2:  48,61,101; 
  --d3:  52,73,124; 
  --d4:  54,85,148; 
  --d5:  54,97,173; 
  --d6:  53,109,198; 
  --d7:  50,122,224; 
  --d8:  71,135,238; 
  --d9:  105,148,240; 
  --d10: 131,162,242; 
  --d11: 154,177,244; 
  --d12: 176,191,245; 
  --d13: 196,206,247; 
  --d14: 216,221,248; 
  --d15: 230,240,255; 
  --e0:  41,38,58; 
  --e1:  50,45,80; 
  --e2:  58,54,103; 
  --e3:  66,62,126; 
  --e4:  74,71,150; 
  --e5:  81,79,175; 
  --e6:  89,88,201; 
  --e7:  96,97,228; 
  --e8:  112,110,242; 
  --e9:  134,127,244; 
  --e10: 154,144,245; 
  --e11: 173,162,246; 
  --e12: 190,179,248; 
  --e13: 206,197,248; 
  --e14: 222,216,249; 
  --e15: 238,234,250; 
  --f0:  43,37,59; 
  --f1:  56,44,81; 
  --f2:  68,52,104; 
  --f3:  81,59,128; 
  --f4:  93,66,153; 
  --f5:  106,73,179; 
  --f6:  119,81,205; 
  --f7:  132,88,232; 
  --f8:  148,102,247; 
  --f9:  164,120,248; 
  --f10: 179,139,249; 
  --f11: 192,158,249; 
  --f12: 205,177,250; 
  --f13: 218,196,250; 
  --f14: 230,215,250; 
  --f15: 241,234,250; 
  --g0:  52,37,51; 
  --g1:  74,43,63; 
  --g2:  97,49,76; 
  --g3:  121,54,89; 
  --g4:  146,59,103; 
  --g5:  171,63,117; 
  --g6:  196,67,131; 
  --g7:  223,71,146; 
  --g8:  238,86,159; 
  --g9:  242,111,170; 
  --g10: 246,133,181; 
  --g11: 248,154,193; 
  --g12: 250,175,204; 
  --g13: 251,195,216; 
  --g14: 252,214,228; 
  --g15: 251,234,240; 

  --basez:  rgb(var(--z));
  --basey:  rgb(var(--y));

  --base0:  rgb(var(--z0) ); --accent0:  rgb(var(--d0) ); --comp0:  rgb(var(--a0));
  --base1:  rgb(var(--z1) ); --accent1:  rgb(var(--d1) ); --comp1:  rgb(var(--a1));
  --base2:  rgb(var(--z2) ); --accent2:  rgb(var(--d2) ); --comp2:  rgb(var(--a2));
  --base3:  rgb(var(--z3) ); --accent3:  rgb(var(--d3) ); --comp3:  rgb(var(--a3));
  --base4:  rgb(var(--z4) ); --accent4:  rgb(var(--d4) ); --comp4:  rgb(var(--a4));
  --base5:  rgb(var(--z5) ); --accent5:  rgb(var(--d5) ); --comp5:  rgb(var(--a5));
  --base6:  rgb(var(--z6) ); --accent6:  rgb(var(--d6) ); --comp6:  rgb(var(--a6));
  --base7:  rgb(var(--z7) ); --accent7:  rgb(var(--d7) ); --comp7:  rgb(var(--a7));
  --base8:  rgb(var(--z8) ); --accent8:  rgb(var(--d8) ); --comp8:  rgb(var(--a8));
  --base9:  rgb(var(--z9) ); --accent9:  rgb(var(--d9) ); --comp9:  rgb(var(--a9));
  --base10: rgb(var(--z10)); --accent10: rgb(var(--d10)); --comp10: rgb(var(--a10));
  --base11: rgb(var(--z11)); --accent11: rgb(var(--d11)); --comp11: rgb(var(--a11));
  --base12: rgb(var(--z12)); --accent12: rgb(var(--d12)); --comp12: rgb(var(--a12));
  --base13: rgb(var(--z13)); --accent13: rgb(var(--d13)); --comp13: rgb(var(--a13));
  --base14: rgb(var(--z14)); --accent14: rgb(var(--d14)); --comp14: rgb(var(--a14));
  --base15: rgb(var(--z15)); --accent15: rgb(var(--d15)); --comp15: rgb(var(--a15));
  --shadow: var(--x1) var(--x1) var(--x3) rgba(var(--z), 0.1);
  -webkit-font-smoothing: auto;
}

.inverted {
  --base0:  rgb(var(--z15)); --accent0:  rgb(var(--d15)); --comp0:  rgb(var(--a15));
  --base1:  rgb(var(--z14)); --accent1:  rgb(var(--d14)); --comp1:  rgb(var(--a14));
  --base2:  rgb(var(--z13)); --accent2:  rgb(var(--d13)); --comp2:  rgb(var(--a13));
  --base3:  rgb(var(--z12)); --accent3:  rgb(var(--d12)); --comp3:  rgb(var(--a12));
  --base4:  rgb(var(--z11)); --accent4:  rgb(var(--d11)); --comp4:  rgb(var(--a11));
  --base5:  rgb(var(--z10)); --accent5:  rgb(var(--d10)); --comp5:  rgb(var(--a10));
  --base6:  rgb(var(--z9 )); --accent6:  rgb(var(--d9 )); --comp6:  rgb(var(--a9 ));
  --base7:  rgb(var(--z8 )); --accent7:  rgb(var(--d8 )); --comp7:  rgb(var(--a8 ));
  --base8:  rgb(var(--z7 )); --accent8:  rgb(var(--d7 )); --comp8:  rgb(var(--a7 ));
  --base9:  rgb(var(--z6 )); --accent9:  rgb(var(--d6 )); --comp9:  rgb(var(--a6 ));
  --base10: rgb(var(--z5 )); --accent10: rgb(var(--d5 )); --comp10: rgb(var(--a5 ));
  --base11: rgb(var(--z4 )); --accent11: rgb(var(--d4 )); --comp11: rgb(var(--a4 ));
  --base12: rgb(var(--z3 )); --accent12: rgb(var(--d3 )); --comp12: rgb(var(--a3 ));
  --base13: rgb(var(--z2 )); --accent13: rgb(var(--d2 )); --comp13: rgb(var(--a2 ));
  --base14: rgb(var(--z1 )); --accent14: rgb(var(--d1 )); --comp14: rgb(var(--a1 ));
  --base15: rgb(var(--z0 )); --accent15: rgb(var(--d0 )); --comp15: rgb(var(--a0 ));
  --basez:  rgb(var(--y));
  --basey:  rgb(var(--z));
  --shadow: var(--x1) var(--x1) var(--x3) rgba(var(--z), 0.25);
  -webkit-font-smoothing: antialiased;
}

:root {
  --x1:  4px;
  --x2:  8px;
  --x3:  12px;
  --x4:  16px;
  --x5:  20px;
  --x6:  24px;
  --x7:  28px;
  --x8:  32px;
  --x9:  36px;
  --x10: 40px;
  --x11: 44px;
  --x12: 48px;
  --x13: 52px;
  --x14: 56px;
  --x15: 60px;

  --work-font: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro";
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --read-font: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
  --header-height: var(--x14);
  --side-padding: calc(50vw - var(--container-width)/2);
  --footer-height: 100px;
  --sidebar-width: 360px;
  --transition-duration: 333ms;
  --transition-fast: 200ms;
  --button-height: var(--x10);
  --container-width: 746px;
}

body, html {
  height: 100%;
  width:  100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-weight: 700;
  color: var(--base4);
  font: 18px/150% var(--ui-font), sans-serif;
  background: var(--base2);
}

body.inverted {
  background: black;
}

* {
  user-select: none;
  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
}

blockquote {
  background: var(--base14);
  padding: var(--x8);
  margin: 0;
}

blockquote p {
  margin-top: 0;
  margin-bottom: 1em;
}

blockquote p:first-child {
  margin-top: 0;
}

blockquote p:last-child {
  margin-bottom: 0;
}

a, a:link, a:visited {
  color: var(--accent8);
  text-decoration: none;
}

a:hover, a:active {
  color: var(--accent12);
}

.button {
  line-height: calc(var(--x9) + 1px);
  border-radius: var(--x2);
  padding: 0 var(--x4);
  white-space: nowrap;
  cursor: pointer;
  background: var(--base15);
  color: var(--base2);
  font-weight: 500;
  font-size: 17px;
  transition: all var(--transition-duration) ease;
}

.button:hover {
  background: var(--base2);
  color: var(--base14);
  transition: none;
}

.button.accent { 
  background: var(--accent8);
  color:  var(--accent15);
  font-weight: 600;
}

.button.accent:hover {
  background: var(--accent6);
  color:  var(--accent15);
}

.button.text {
  background: transparent;
}

.button.comp { background: var(--comp8);}

.button.disabled,
.button.disabled:hover {
  background: var(--base12);
  color: var(--basey);
  cursor: not-allowed;
}

.button.disabled:after {
  content: attr(data-tooltip);
  position: absolute;
  display: block;
  white-space: normal;
  width: 200px;
  right: var(--x6);
  font-weight: normal;
  color: var(--base6);
  pointer-events: none;
  opacity: 0;
  background: var(--basey);
  transition: opacity var(--transition-fast) ease;
  box-shadow: var(--shadow);
  border-radius: var(--x2);
  bottom: 72px;
  line-height: 140%;
  padding: var(--x4);
  font-size: 15px;
}

.button.disabled:hover:after {
  opacity: 1;
}

.button.hidden {
  display: none;
}

.cursor {
  width: var(--x1);
  height: var(--x6);
  background-color: var(--accent8);
  position: absolute;
  top:  0;
  left:  0;
  z-index: 1000;
}
.dropdown {
  color: var(--base13);
  margin-right: 32px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}

.dropdown.wordGoal:hover,
.dropdown.wordGoal.open {
  color: var(--accent8);
}

.dropdown.timeLimit:hover,
.dropdown.timeLimit.open {
  color: var(--comp8);
}

.dropdown .caret {
  line-height: var(--header-height);
  display: inline-block;
}

.dropdown .caret:after {
  content: ' ▾';
  margin-left: 8px;
  display: inline-block;
  transition:  transform var(--transition-fast) ease;
  transform-origin:  50% 52%;
}

.dropdown.open .caret:after {
  transform: rotate(180deg);
}

.dropdown.locked .caret:after {
  display: none;
}


.loading .flash {
  display: none !important;
}

.sidebar-open .flash span {
  transform: translateX(calc(var(--sidebar-width)/2));
}

.sidebar-open .flash.hidden span {
  transform: translate(calc(var(--sidebar-width)/2), var(--x2));
}

.flash {
  position: absolute;
  z-index: 1000;
  bottom: var(--x5);
  left:  50%;
  transform: translate(-50%, 0);
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity var(--transition-duration) ease;
}

.flash span {
  color: var(--base6);
  display: inline-block;
  background-color: var(--base13);
  padding: 0 var(--x6);
  border-radius: var(--x8);
  font-size: 17px;
  line-height: var(--x9);
  transform: none;
  transition: transform var(--transition-duration) ease;
}

.flash span:empty {
  display: none;
}

.flash.hidden,
.populated #flash-rules {
  opacity: 0;
  display: block;
}

.flash.hidden span {
  transform: translateY(var(--x2));
}

.flash a {
  cursor:  pointer;
  border-left:  solid var(--base12) 1px;
  padding-left:  var(--x4);
  margin-left:  var(--x4);
  display: inline-block;
  font-weight: bold;
  color:  var(--base6);
}

#flash-rules {
  z-index: 999;
}

#flash-rules span {
  background-color: var(--base15);
  color: var(--base6);
}

@media only screen and (max-width: 1280px) {
  .flash {
    bottom: var(--x4);
  }
}

@media only screen and (max-width: 767px) {
  
  .flash {
    bottom: auto;
    top: var(--x5);
  }

  .flash.flash-persistent {
    bottom: var(--x5);
    top: auto;
  }

}
.footer-actions {
  pointer-events: none;
  position: fixed;
  bottom:  var(--x5);
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  z-index: 10;
  opacity: 1;
  transition: opacity var(--transition-duration) ease;
  padding-bottom: var(--x5);
}

.footer-actions * {
  pointer-events: auto;
}

.sidebar-open .footer-actions {
  left: var(--sidebar-width);
}

.footer-actions .flex {
  margin-left: auto;
  margin-right:  var(--x6);
  position: relative;
}

.footer-actions .wpm-count {
  display: none;
}

.footer-actions .button {
  margin-left: var(--x2);
}

.footer-actions .counter.button.text:after {
  content:  '';
  height: 6px;
  width: 6px;
  display: inline-block;
  border-bottom: solid var(--base9) 2px;
  border-left: solid var(--base9) 2px;
  transform:  translateY(-3px) rotate(-45deg);
  transition:  transform var(--transition-fast) ease;
  margin-left: 0.5em;
}

.footer-actions .counter.open.button.text:after {
  transform:  translateY(0) rotate(135deg);
}

.footer-actions .text {
  color:  var(--base9);
}

.footer-actions .counter.button.text {
  color:  var(--base9);
  cursor: pointer;
  position: relative;
}

.footer-actions .counter.button.text:hover {
  color:  var(--base9);
}

.footer-actions .button.text {
  color:  var(--base7);
}

.footer-actions .button.text:hover {
  color:  var(--base0);
}

.populated #at-expanding-share-button {
  display: none !important;
}

.counter-copy {
  display: flex;
}

@media only screen and (max-width: 1280px) {
  .footer-actions {
    background: var(--basey);
    flex-direction: column;
    left: 0;
    padding-bottom: var(--x4);
    padding-top: var(--x4);
  }

  .sidebar-open .footer-actions {
    left: var(--sidebar-width);
  }
  .footer-actions > * {
    align-self:  flex-end;
  }
}

@media only screen and (max-width: 767px) {

  .footer-actions {
    left: 0;
    right:  0;
    padding-right: var(--x4);
  }

  .footer-actions .flex {
    width: 100%;
  }

  .footer-actions .counter {
    flex-grow: 1;
  } 

}




h1, h2, h3, h4, h5, h6 {
  margin: var(--x4) 0;
  font-weight: 500;
}

fieldset {
  border:  none;
  padding:  0;
  margin:  var(--x4) 0 0 0;
  border-top:  solid var(--base13) 1px;
}

fieldset:first-child {
  margin-top: 0;
}

legend {
  color:  var(--accent4);
  display: block;
  padding: 0 var(--x4);
  text-transform:  uppercase;
  font-size:  13px;
  font-weight: bold;
  position: sticky;
  background-color: var(--accent15);
  top: 0;
  z-index: 100;
  width:  100%;
  margin-bottom: var(--x4);
  letter-spacing: 1px;
}

.panel fieldset {
  display: flex;
  flex-flow: row wrap;
}

.field {
  display: flex;
  line-height: var(--header-height);
  padding: 0 var(--x4);
  color: var(--base10);
  position: relative;
}

.field:last-child {
  border-bottom: none;
}

.field.admin {
  display: block;
  width:  100%;
  margin-top: -8px;
}

.field * {
  font-family: var(--ui-font);
}

.field.admin .field-value {
  position: relative;
}

.field.admin .field-tip {
  font-size: 16px;
  margin-top: -16px;
  color:  var(--base6);
}

.field.admin .field-select {
  padding: var(--x7) 0 var(--x2) 0;
}

.field.admin .field-select:after {
  content:  '';
  position: absolute;
  right: var(--x4);
  border-bottom:  solid var(--base8) 1px;
  border-left:  solid var(--base8) 1px;
  transform:  translate(0, -4px) rotate(-45deg);
  width: 6px;
  height: 6px;
  top: 58%;
  pointer-events: none;
}

.field.admin .field-input::-webkit-calendar-picker-indicator {
  color: red;
  opacity: 1
}

.field.admin .field-input::-webkit-calendar-picker-indicator::after {

  content: '';
  display: block;
  background: red;
  background-size: 10%;
  width: var(--x4);
  height: var(--x4);
  position: absolute;
  transform: translateX(-2%);

}

.field.admin .field-input {
  height: auto;
  padding: var(--x10) 0 var(--x2); 
  width: 100%;
}

.field.admin input[type=date] {
  height: auto;
  padding: 16px 0;
  width: 100%;
  letter-spacing: -1px;
}

/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
.field.admin input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
}

/* adjust increase/decrease button */
.field.admin input[type="date"]::-webkit-inner-spin-button {
    z-index: 1;
}

 /* adjust clear button */
 .field.admin input[type="date"]::-webkit-clear-button {
     z-index: 1;
 }

.field.admin .field-input:invalid {
  border-bottom: dotted var(--comp7) 2px;
  margin-bottom: -2px;
}

.field.admin .field-input::placeholder {
  color: var(--base12);
}

.field-label {
  white-space: nowrap;
  font-size: 14px;
  color: var(--base8);
  position: relative;
  top: -2px;
  left:  var(--x4);
  pointer-events: none;
  position: absolute;
}

.field.active {
  color: var(--base11);
}

.field-value {
  flex-grow: 1;
}

.field-value input.field-input {
  width: 100%;
  height: var(--header-height);
  font-size: 17px;
  background: transparent;
  border: none;
  color: var(--base1);
}

.field-value input:focus,
.field-value select:focus {
  outline: none;
}

.field input[type=submit],
.field button {
  width: 100%;
  line-height: var(--header-height);
  height: var(--header-height);
  text-align: center;
  -webkit-appearance: none;
  border: none;
  font-size: 19px;
  font-family: var(--work-font), monospace;
  background: var(--base2);
  border-radius: 100px;
  margin: var(--x8) 0;
  color: var(--base14);
  cursor: pointer;
}

.adminLink {
  display: block;
  text-align: center;
  color: var(--accent6);
  margin-top: calc(var(--x4)*-1);
}

.field.admin select.field-input {
  -webkit-appearance: none;  
  margin: var(--x4) 0;
  border: none;
  background-color: var(--base15);
  border:  solid var(--base12) 1px;
  border-radius: var(--x1);
  font-size: 16px;
  padding: 0 8px;
  font-weight: 500;
  color: var(--base4);
  width: 100%;
  height: var(--x10);
  line-height: var(--x10);
  cursor:  pointer;
}

.field.admin select.field-input:hover {
  border-color:  var(--base10);
}

.field.admin select.field-input option {
  -webkit-appearance: none;
  padding: var(--x2) var(--x2);
}


.field.admin textarea.field-input {
  -webkit-appearance: none;
  background:  transparent;
  color:  var(--base0);
  padding:  var(--x2);
  font-size: 15px;
  line-height: 145%;
  border: none;
  margin:  var(--x4) var(--x2) 0 0;
  height: 80px;
  width:  308px;
  resize: vertical;
  border-radius: var(--x1);
  font-family: var(--ui-font);
  border:  solid var(--base12) 1px;
}

.field-clear {
  right: var(--x2);
  font-size: 24px;
  cursor: pointer;
  color: var( --base1);
  top: 0;
  height: var(--x6);
  width: var(--x6);
  border-radius: var(--x4);
  position: absolute;
}

.field.admin.assignmentSpaceId {
  display: none;
}

.field.admin.pageLanguage,
.field.admin.pageCollection,
.field.admin.pageWordGoal,
.field.admin.pageTimeLimit,
.field.admin.pageStartDate,
.field.admin.pageEndDate {
  width:  40%;
}

.field.admin.pageShare,
.field.admin.pageDisablePaste,
.field.admin.pageSpellcheck,
.field.admin.pageDisableBackspace {
  text-indent:  var(--x15);
}

.field.admin.pagePlaceholder,
.field.admin.pageDescription,
.field.admin.pageStartDate,
.field.admin.pageEndDate {
  padding-top: 24px;
}

a.dashboard-link {
  position: absolute;
  top: var(--x8);
  right: var(--x8);
  color: var(--base10) !important;
}

a.dashboard-link:hover {
  color: var(--base15) !important;
}

.populated .configure {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-duration) ease;
}

#page-header {
  height: var(--header-height);
  line-height: var(--header-height);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  display: flex;
  opacity:  1;
  transition: opacity var(--transition-duration) ease;
}

.sidebar-open #page-header {
  left: var(--sidebar-width);
}

.header-icons {
  position: absolute;
  right: 16px;
  top: 0;
  z-index: 3;
  display: flex;
  transition: opacity var(--transition-duration) ease;
  opacity: 1;
}

.header-icon {
  position: relative;
  width: var(--header-height);
  height: var(--header-height);
  text-align: center;
  cursor: pointer;
  line-height: var(--header-height);
}


.header-icon svg {
  fill: var(--base12);
}

.header-icon:hover svg {
  transition: none;
  fill: var(--base6);
}

.header-icon.active svg,
.header-icon.active:hover svg  {
  fill: var(--accent8);
}

.header-icon.open svg {
  fill:  var(--base8);
}

.header-icon.open:before,
.header-icon.open:hover:before  {
  content: '';
  width: var(--x10);
  height: var(--x10);
  background: var(--base13);
  position: absolute;
  z-index: 0;
  border-radius: var(--x10);
  top: 50%;
  left: 50%;
  transform:  translate(-50%, -50%);
}

.header-icon.disabled {
  pointer-events: none;
  display: none;
}

.header-icon svg {
  vertical-align: middle;
  position: relative;
  top: -2px;
}

.header-icon.comment {
  position: relative;
  top: 2px;
}

.header-icon .comment-count {
  font-size: 9px;
  font-weight: bold;
  min-width: var(--x3);
  text-align: center;
  border-radius: var(--x3);
  height: var(--x3);
  line-height: var(--x3);
  background: var(--comp6);
  color: var(--basey);
  position: absolute;
  top: 14px;
  left: var(--x8);
  font-family: sans-serif;
}

.header-icon .comment-count:empty,
.header-icon .comment-count.empty {
  display: none;
}

.header-icon .exit-fullscreen {
  display: none;
}

.header-icon.language {
  white-space: nowrap;
  font-size: 15px;
  font-weight: 800;
}

.fullscreen .header-icon .exit-fullscreen {
  display: inline-block;
}

.fullscreen .header-icon .enter-fullscreen {
  display: none;
}

.iframe #fullscreen {
  display: none;
}

.inverted #contrast {
  transform:  scale(-1, 1);
}

#download {
  display: none;
}

#copy {
  display: none;
}

@media only screen and (max-width: 1280px) {
  #page-header {
    left: 0;
    background-color: var(--basey);
  }
  .ui-active #page-header {
    background-color: var(--basey);
  }
}

@media only screen and (max-width: 767px) {

  .sidebar-open .flash span {
    display: none;
  }

  .sidebar-open #page-header {
    display: none;
  }

  #fullscreen {
    display: none;
  }

  .reader #actions {
    display: none;
  }

  .reader #about {
    display: none;
  }

  .reader header .page-title {
    margin-left: 5vw;
  }

}
.modal-overlay {
  background:  rgba(255,255,255,0.8);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-overlay.hidden {
  display: none;
}

.modal {
  width: 400px;
  height: 300px;
  background:  var(--basey);
  box-shadow:  var(--shadow);
  padding: var(--x6);
  border-radius:  var(--x2);
}

.modal p {
  color: var(--base8);
}

.modal h2 {
  margin: 0;
}
.onoffswitch {
    position: relative; width: 60px;
    margin: 8px 16px 0 0;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    transform-origin: 0 50%;
    transform: scale(0.7);
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    height: 36px; padding: 0; line-height: 36px;
    border: 2px solid var(--base12); border-radius: 36px;
    background-color: var(--base12);
}
.onoffswitch-label:before {
    content: "";
    display: block; width: 36px; height: 36px; margin: 0px;
    background: var(--base15);
    position: absolute; top: 0;
    right: 22px;
    border: 2px solid var(--base12); border-radius: 36px;
    transition: all 0.2s ease 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
    background-color: var(--accent6);
}

.onoffswitch-checkbox:checked + .onoffswitch-label:before {
    background-color: var(--base15);
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
   border-color: var(--accent6);
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
    right: 0px; 
}
.page {
  background-color: var(--basey);
  transition: opacity 1s ease;
  opacity: 0.9;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.inverted .page {
  opacity: 0.8;
}

.empty .page,
.empty .page-ui {
  opacity: 1 !important;
}

.page.ui-active {
  opacity: 1;
}

.ui-active .page {
  opacity: 1;
}

body[lang=en] span[lang=es],
body[lang=es] span[lang=en] {
  display: none;
}

.page *::selection {
  background: var(--accent14);
  color: var(--accent2);
}

.inverted .page *::selection {
  background: var(--accent2);
  color: var(--accent14);
}

.page .page-ui {
  transition: opacity var(--transition-duration) ease;
  position: relative;
  z-index: 101;
  opacity: 0;
}

.page-ui:after,
.page-ui:before {
  content: '';
  position: fixed;
  display: block;
  left: 0;
  width:  calc(var(--side-padding)/2);
  top:  var(--header-height);
  bottom: var(--header-height);
}

.sidebar-open .page-ui:after,
.sidebar-open .page-ui:before {
  display: none;
}

.page-ui:after {
  left: auto;
  right: 0;
}

.pressed .page-ui:before,
.pressed .page-ui:after {
  pointer-events: none;
}

.ui-active .page-ui  {
  opacity: 1;
}

@media only screen and (max-width: 767px) {

  .page-ui {
    opacity: 1 !important;
  }

  .page-ui:after,
  .page-ui:before {
    display: none;
  }

  .page {
    opacity: 1 !important;
  }

}
#panel {
  border-right:  solid var(--base13) 1px;
}

.panel {
  top: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  width: 360px;
  display: block;
  background: var(--base15);
  transform: translate(-100%, 0);
  font: 19px/150% var(--ui-font), sans-serif;
  z-index: 100;
  transition: transform 350ms ease;
}

body.panel-open {
  background-color: var(--basez);
}

body.panel-open.inverted  {
  background-color: black;
}

.panel-open #page {
  transform: scale(0.70) translate(240px, 0);
  overflow: hidden;
}

.panel-header {
  height: var(--header-height);
  line-height: var(--header-height);
  padding: 0 var(--x4);
  color: var(--base0);
  z-index: 2;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
}

.panel-body {
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: var(--x14);
  overflow-y: scroll;
  overflow-x: hidden;
}

.panel-header .action {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--accent8);
  color: var(--base15);
}

.panel-header .action:hover {
  background: var(--accent9);
  color: var(--base0);
}

.panel-header-icon {
  position: absolute;
  right: var(--x2);
  top: 0;
}

.panel-header-icon svg path {
  fill: var(--base15);
}

.panel hr {
  border: none;
  border-top: solid var(--base13) 1px;
}

.panel-open .panel {
  transform: translate(0%, 0);
}

.sidebar-open .preview {
  transform: translateX(calc(var(--sidebar-width)/2));
}

.reader .preview {
  background: var(--basey);
}

.preview {
  transform: translate(0, 0);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font: 19px/34px var(--read-font), sans-serif;
  color: var(--base4);
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  min-height: 100%;
  padding: calc(var(--header-height) + var(--x8)) var(--side-padding);
  overflow-y: scroll;
  user-select: text;
  word-wrap: break-word;
  z-index: 2;
  background: var(--base15);
  transition: transform var(--transition-duration) ease;
}

.preview * {
  user-select: text;
}

.preview *:first-child {
  margin-top: 0;
}

.preview .preview-empty {
  color:  var(--base12);
}

article {
  color: var(--base4);
  position: relative;
  font-size: 1.2em;
}

article img {
  max-width: var(--container-width);
}

article:after {
  content: "";
  display: table;
  clear: both;
}

article h1, 
article h2, 
article h3, 
article h4, 
article h5, 
article h6 {
  font-weight: 600;
  color:  var(--base0);
  margin:  1em 0;
  padding:  0;
}


article a {
  text-decoration: none;
  color: var(--accent9);
}

article a:hover {
  color: var(--accent14);
  text-decoration: none;
}

article table {
  border-collapse: collapse;
}

article table td,
article table th {
  border: none;
}

article hr {
    border: 0;
    height: 1px;
    background: var(--base12);
}

article samp, article kbd, article code {
  font-size: 0.8em;
  padding: var(--x1) var(--x2);
  border-radius: var(--x1);
  color: var(--base4);
  margin-right: var(--x1);
}

article samp, article code {
  background-color: var(--base14);
  box-shadow: inset 0 -1px 0 var(--base12);
}

article kbd {
  background: var(--base14);
  box-shadow: inset 0 -1px 0 var(--base0), inset 0 1px var(--base6), 0 var(--x1) var(--x8) rgba(0,0,0,0.3);
}

article time {
  color: var(--base5);
  white-space: nowrap;
}

article ul li {
  color: var(--base4);
  padding-left: var(--x2);
  display: list-item;
}

article ol, article ul {list-style: none; padding: 1em;}

article ol  {
  counter-reset: the-counter;
}

article ol li::before, article ul li:before {
  color: var(--base6);
  display: inline-block; 
  width: 1em; 
  margin-left: -1.5em;
  margin-right: 1em; 
  text-align: right; 
  direction: rtl;
  margin-left: -2em;
}

article ol li::before { 
  content: counter(the-counter);
  counter-increment: the-counter;
  font-size: 0.8em;
  position: absolute;
}

article ul li::before { 
  content: "•"; 
}

.inverted article kbd {
  background: var(--base1);
  box-shadow: inset 0 1px 0 var(--base0), inset 0 -1px var(--base3), 0 var(--x1) var(--x4) rgba(0,0,0,0.1);
}

article code, article kbd, article samp, article pre {
  font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;
}

article table td,
article table th {
  text-align: left;
  padding: 8px 16px 8px 0;
  border: none;
}

article table th {
  font-weight: 500;
}


article .full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
  
body.empty #progress {
  transform: translate(0, var(--x2));
}

.reader #progress,
.loading #progress {
  display: none;
}

#progress {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  transition: transform var(--transition-duration) ease-out;
  z-index: 101;
}

#progress.hide {
  display: none;
}

.progress-bar {
  width: 100%;
  height: 5px;
  transition: transform linear 500ms;
  will-change: transform;
  transform: translate3d(-100%, 0, 0);
  position: absolute;
  bottom: 0;
}

.progress-bar.timeLimit {
  background-color: var(--accent5);
}

.inverted .progress-bar.timeLimit {
  background-color: var(--accent9);
}

.progress-bar.wordGoal {
  background-color: var(--accent7);
}


#progress.alert .progress-bar.timeLimit {
  background-color: var(--comp7);
}

#progress.alert .progress-bar.wordGoal {
  background-color: var(--comp4);
  z-index: 1;
}

.inverted #progress.alert .progress-bar.wordGoal {
  background-color: var(--comp10);
}

#progress.no-transition .progress-bar {
  transition: none !important;
}
.prompt-list {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  min-height: calc(100vh - 200px);
  flex-direction: column;
  flex: 1;
}

.prompt-header {
  display: flex;
}

.prompt-list .button {
  line-height: var(--x10);
  display: inline-block;
}

.prompt-list h2 {
  flex-grow: 1; 
  margin-right: var(--x4)
}

.prompt-list table {
  border-collapse: collapse;
  width: 100%;
}

.prompt-list table th {
  border-bottom: solid var(--base14) 1px;
}

.prompt-list table th:last-child {
  text-align: right;
}

.prompt-list table td.prompt-actions {
  opacity: 0;
}


.prompt-list table tr:hover td.prompt-actions {
  pointer-events: auto;
  opacity: 1;
  transition: opacity var(--transition-duration) ease;
}

.prompt-list table tr:hover td {
  background-color:  rgba(0,0,0,0.02);
}

.prompt-list table th,
.prompt-list table td a {
  padding-right:  var(--x2);
}

.prompt-list table td a + a {
  padding-left:  var(--x4);
}

.prompt-list table td a[title]:hover {
  text-decoration: none;
}

.prompt-list table td {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 400px;
  overflow: hidden;
}

.prompt-list table td a:hover {
  text-decoration: underline;
  color:  var(--accent7);
}

.prompt-list-footer {
  font-size:  16px;
  padding-top:  var(--x12);
  max-width: 600px;
  margin: 0 auto;
}

.prompt-list-footer a {
  color: var(--base10);
  padding: 0 var(--x4) 0 0;
}

.prompt-list-footer a:hover {
  color: var(--base1);
}
.reader-only {
  display: none;
}

.reader .footer-actions {
  opacity: 1;
}

.reader #counter,
.reader #configure,
.reader #spellcheck,
.reader #flash-rules,
.reader #copy,
.reader #download {
  display: none;
}

body.reader .reader-only {
  display: block;
}

body.reader header#finished {
  position: absolute;
}

body.reader header#empty,
body.reader .header-icons.hide {
  opacity: 1;
  pointer-events: auto;
}

body.reader #markdown {
  display: none;
}

body.reader header#finished .action-message {
  display: none;
}

body.reader .sheet {
  display: none;
}

body.reader #counter.pill {
  display: none;
}

body.reader #humanized {
  display: none;
}

body.reader #markdown {
  display: none;
}

body.reader .page-title .icon-reader {
  display: inline-block;
}

body.reader .page-title .icon-editor {
  display: none;
}

#author span.loading,
#author .page-title span.loading {
  display: none;
}

.loading .page-ui {
  opacity: 0 !important;
}
.loading #author span.loading,
.loading .page-title span.loading,
.skeleton .line {
  display: inline-block;
  border-radius: var(--x6); 
  height: var(--x6);
  width: 100px;
  margin-top: var(--x4);
  background: linear-gradient(-80deg, var(--base14), var(--base13), var(--base14));
  animation: loading 1s linear infinite;
  transition: none;
  padding: 0;
  opacity: 0.7;
}

.loading #author span.loading {
  transform: translate(-50%, 0);
  background-size: var(--container-width);
}

.loading .page-title span.loading {
  width: 200px;
  background-size: var(--container-width);
}

.loading .dropdown {
  display: none;
}

.skeleton {
  display: none;
  position: absolute;
  top: calc(var(--header-height)*1.5);
  left: 0;
  right: 0;
  bottom: var(--header-height);
}

.loading .skeleton {
  display: block;
}

.skeleton .line {
  display: block;
  width: auto;
  background-size: var(--container-width);
}

.skeleton .line:first-child,
.skeleton .line:nth-child(4) {
  width: 90%;
}

.skeleton .line:last-child {
  width: 50%;
}


@keyframes loading {
    0%   { background-position: 0 50%}
    50%  { background-position: calc(var(--container-width)/2) 50%}
    100% { background-position: var(--container-width) 50%}
}

@keyframes titleLoading {
    0%   { background-position: 0 50%}
    50%  { background-position: calc(var(--container-width)/2) 50%}
    100% { background-position: var(--container-width) 50%}
}

@keyframes counterLoading {
    0%   { background-position: 0 50%}
    25%  { background-position: 200px 50%}
    100% { background-position: 0 50%}
}

@media all and (max-width: 767px) {
  .skeleton {
    left: 32px;
  }
}
@media only screen and (max-width: 767px) {
  .loading .page-title span.loading {
    margin-left: 5vw;
    transform: translate(0, 0);
  }
}

.scroll-track {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
}

.scroll-box {
  background: var(--base1);
  height: 100px;
  width: 5px;
  position: absolute;
  top: 0;
}
.select {
  position: absolute;
  background-color: var(--basey);
  border-radius: var(--x2);
  padding: 8px 0;
  z-index: 1000;
  cursor: default;
  box-shadow: var(--shadow);
  font-family: var(--ui-font);
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-duration) ease,
    transform var(--transition-duration) ease;
}

.select.configure {
  top: var(--header-height);
  left: 30px;
  min-width: 200px;
  transform: translate(-50%, var(--x1));
}

.select.counter {
  bottom: 3.5em;
  transform: translate(0, 0);
  right:  0;
}

.inverted .select {
  background-color: var(--base15);
}

.select.open {
  opacity: 1;
  pointer-events: auto;
  transition:  none;
}

.select.configure.open {
  transform: translate(-50%, 0);
}

.select.counter.open {
  transform: translate(0, var(--x1));
}

.select-title,
.select-option {
  white-space: nowrap;
  line-height: var(--button-height);
  padding: 0 24px;
  color: var(--base1);
}

.select-title {
  display: none;
}

.select-option {
  display: flex;
  cursor: pointer;
  color: var(--base4);
  padding-right: var(--x4);
  position: relative;
  fill:  var(--base12);
  text-align: left;
  position: relative;
}

.select-option:hover {
  color: var(--accent1);
  background: var(--accent15);
}

.inverted .select-option:hover {
  color: var(--accent14);
  background: var(--accent0);
}

.select-option:hover .select-option-value {
  color:  var(--accent10);
}

.select-option-label {
  flex-grow:  1;
  padding-right:  var(--x6);
}

.select-separator {
  padding-bottom:  var(--x2);
  border-bottom:  solid var(--base14) 1px;
  margin-bottom:  var(--x2);
}

.inverted .select-separator {
  border-color:  var(--base13);
}

.select.configure .select-separator + .select-option {
  color:  var(--accent8);
}

.select.counter .select-option.option-clear {
  color:  var(--comp8);
}

.select-option-value {
  color:  var(--base12);
  text-align: right;
  display: flex;
  flex-direction: row-reverse;
}

.select-option-value svg {
  margin-top: 16px;
}

.select-option-clear {
  width: var(--x4);
  font-size: 16px;
  text-align: center;
  margin: 0 -16px 0 8px;
  width: var(--x10);
}

.option-pageLanguage {
  display: none;
}

.select-option-clear:hover {
  color: var(--accent8);
}

.select-option-clear:hover + .select-option-value-value {
  color: var(--accent8);
  text-decoration: line-through;
}

.select-option input[type="file"] {
  padding: 0.8em 0;
  position: absolute;
  inset: 0;
  opacity: 0;
  border: solid red 1px;
  cursor: pointer;
}


@media only screen and (max-width: 767px) {
  .select.counter {
    right:  auto;
    left:  var(--x1);
  }
}


.loading .sheet {
  display: none;
}

.sheet {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  resize: none;
  border: none;
  overflow: auto;
  outline: none;
  box-shadow: none;
  font: 18px/35px var(--work-font), monospace;
  caret-color: var(--accent8);
  background: transparent;
  color: var(--base3);
  box-sizing: border-box;
  user-select: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  padding: calc(var(--header-height) + var(--x8)) var(--side-padding);
  min-height: 100%;
  overflow-y: scroll;
  transition: transform var(--transition-duration) ease;
}

.sheet.jump {
  scroll-behavior: auto;
}
 
.copied .sheet {
  color: var(--base1);
}

.sheet.disabled {
  color: var(--base12);
  cursor: default;
  pointer-events: none;
}

.sheet.hidden {
  opacity: 0;
  pointer-events: none;
}

.sheet::placeholder {
  color: var(--base12);
}

@media only screen and (max-width: 1280px) {
  .sheet {
    top: var(--x11);
    bottom: var(--x11);
    padding-top: var(--x8);
    padding-bottom: var(--x8);
    min-height: auto;
  }
}

@media only screen and (max-width: 767px) {
  
  .sheet {
    line-height: 160%;
    font-size: 16px;
    padding: var(--x6) 4vw var(--x6) 5vw;
  }

}
.sidebar {
  color:  var(--z10);
  --container-footer-height: 76px;
  --container-header-height: 60px;
  top: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  width: var(--sidebar-width);
  display: block;
  background: var(--base14);
  transform: translate(-100%, 0);
  font: 16px/25px var(--ui-font), sans-serif;
  z-index: 100;
  transition: transform 350ms ease;
}

.inverted .sidebar {
  background-color: var(--base15);
}

.sidebar a {
  color:  var(--base1);
}

.sidebar .container {
  display: flex;
  flex-direction: column;
  height:  calc(100% - var(--container-header-height));
  margin-top: var(--container-header-height);
  overflow-y: scroll;
}

.sidebar .container a {
  text-decoration: underline;
}

.sidebar .container-footer {
  padding:  var(--x4) var(--x6);
  line-height: 150%;
  box-sizing: border-box;
  background-color:  var(--base13);
  height: var(--container-footer-height);
  font-size: 14px;
  color: var(--base8);
  flex-shrink: 0;
  position: relative;
}

.sidebar .container-footer svg {
  position: absolute;
  right:  var(--x6);
  top:  var(--x5);
  fill: var(--base9);
}

.sidebar .container-footer a {
  color: var(--base8);
}

.sidebar-content {
  padding: 0 var(--x6) var(--x6) var(--x6);
  flex-grow: 1;
}

.sidebar-image {
  margin-bottom:  var(--x4);
}

.sidebar-close {
  opacity: 0;
  display: none;
}

.sidebar-open .sidebar-close {
  opacity: 1;
}

.sidebar-close {
  position: fixed;
  padding: var(--x4) var(--x6);
  top: 0;
  right: 0;
  left:  0;
  background: var(--base14);
  cursor: pointer;
  text-align: right;
}

.inverted .sidebar-close {
  background: var(--basey);
}

.sidebar-close svg {
  fill: var(--base10);
}

.sidebar-close:hover svg {
  fill: var(--base4);
}

.sidebar img {
  width:  100%;
} 

.sidebar-open #sheet {
  transform: translate(calc(var(--sidebar-width)/2), 0);
}

.sidebar-open .sidebar {
  transform: translate(0, 0);
}

.sidebar-overlay {
  display: none;
}

.sidebar-open .sidebar-overlay {
  display: block;
  background: rgba(0,0,0,0);
  position: absolute;
  top:  0;
  left:  var(--sidebar-width);
  width: calc(100vw - var(--sidebar-width));
  top: 0;
  bottom: 0;
}


@media only screen and (max-width: 767px) {
  
  .sidebar {
    width: 100%;
  }

}

.page-title svg {
  fill: var(--base12);
}

.page-title {
  padding:  0 var(--x6);
  line-height: var(--header-height);
  font-size:  16px;
  color: var(--base10);
  cursor: pointer;
  position: fixed;
  z-index: 1000;
  top:  0;
  left:  0;
  white-space: nowrap;
  display: inline-block;
}

.sidebar-open .page-title {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-title svg {
  vertical-align: middle;
  margin-right: var(--x2);
  fill:  var(--base12);
  position: relative;
  top: -2px;
}

.page-title svg.icon-reader {
  display: none;
  margin-right: var(--x1);
}

.page-title:hover,
.page-title:hover svg {
  color: var(--base4);
  fill: var(--base4);
}

.panel-open .page-title,
.sidebar-open .page-title {
  color: var(--base4);
}

.panel-open .page-title svg,
.sidebar-open .page-title svg {
  fill: var(--base4);
}

@media only screen and (max-width: 767px) {

  .page-title-txt {
    display: none;
  } 

  .sidebar-open .page-title-txt {
    display: inline-block;
  } 
}
.container {
  max-width: var(--container-width);
  margin: 0 auto;
}

.flex {
  display: flex;
}

.container.header-margin {
  margin-top: 96px;
}

.inline-block {
  display: inline-block;
  position: relative;
}

.mobile-only {
  display: none;
}

.hidden {
  display: none;
}

.no-transition {
  transition: none !important;
}

button {
  border: none;
}


.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 767px) {
  .mobile-only {
    display: block;
  }

  .desk-only {
    display: none;
  }

}

#open {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    z-index: 0;
    left: -10000px;
}