* {
	  font-family: Century Gothic, Montserrat, Avenir, sans-serif;
}


.rel    { position: relative !important; }
.rot    { transform: rotate(45deg); }
.left   { text-align: left; }
.left * { text-align: left; margin-left: 0; padding-left: 0; }



/* /////////////////////////////////////////////////////// */
/*                                                         */
/* /////////// -------  CONTAINERS  --------  ///////////  */
/*                                                         */
/* /////////////////////////////////////////////////////// */



body, footer { background-color: var(--cream); color: var(--brown); border-color: var(--brown); width: 100%; }

div, footer, form { margin: 0em auto; float: none; clear: both;  }

div 	{ width: 100%; }


footer 	    { padding-bottom: 3em; margin-top: auto; text-align: center; background: none; position: relative; } 
footer form, footer div
            { padding: 2.5em 0; }


span {  display: inline-block; }

img { margin: auto; background-color: transparent; width: 1.75rem; }

p, h1, h2, h3, h4, ul, ol, table, form, input, select, textarea, span
  { max-width: 36rem; }

h2 + h3, h2 + p { margin-top: 2.5em; }


.export div { max-width: unset; }
.overlay  { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; }
.tight    { max-width: 30rem; font-size: 0.9em; }
.narrow   { max-width: 24rem;  }
.double   { display: grid; grid-template-columns: repeat(auto-fill, minmax(16em, 1fr)); grid-gap: 1.2em; font-size: 0.85em; margin-top: 1em; }

@media only screen and (max-width: 421px) {
 .mini    { font-size: 0.85em; }
 .narrow   { font-size: 0.75em; }
}


.double span::first-line { font-weight: 700; }


p.hl { background-color: var(--brown); color: var(--beige); font-size: 1.3rem; text-transform: capitalize; text-align: center; padding: 0.8em; font-weight: 100; }

wbr:after { content: "-" }

@media only screen and (max-width: 421px) {
  h2 + h3, h2 + p { margin-top: 1em; }
  .mid { display: block; width: 100%; padding: 0.5em 0; }
}

.export, div.export *, div.export div    {  max-width: 60rem; }
div.export, .pbr { page-break-after: always; }



.alert        { background-color: var(--cafe); color: var(--black); text-align: center; min-height: 5em; font-size: 0.85em;
                display: grid; place-items: center; grid-template-columns: 5em minmax(14em, 50%) 5em; justify-content: space-between; }
.alert svg    { height: 2em; width: 2em; margin: 0 auto; }
.alert .nice  { color: var(--cream); }


input.expand  {  }
input.expand + label + div, input.expand + label + textarea, input.expand + label + input[type=text]          
  { display: none; }
input.expand:checked + label + div, input.expand:checked + label + textarea
  { display: block; }
input.expand:checked + label + input[type=text] 
  { display: inline-block; }

label input.expand.undef { margin: 0 0 0 0.5em; top: 0.25em; }


.tools { position: fixed; top: 2em; right: 2em; min-width: unset; width: auto; z-index: 1; }
.tools svg { height: 2em; width: 2em; }
.tools label { min-width: unset; }


.strider        { /* position: sticky; top: 0; left: 0; right: 0;  */ margin: 0 auto; background-color: var(--cream); z-index: 1; padding: 0; } 
.strider h1     { font-family: 'MountainsofChristmas'; font-size: 5em; margin: 0.35em auto; color: var(--brock); }
.strider h4     { text-align: center; margin: 0.15em auto; color: var(--cafe); }
.strider h4 +h1 { margin: 0 auto 0.2em; }
.strider > svg  { height: 5em; padding-top: 2em; margin-top: 0; }

.titles         { text-align: center; padding: 1em 0 0; }
.titles *       { padding: 0; margin: 0 auto; z-index: 1; }
.titles h1      { font-size: 1.5rem; }
.titles label   { font-size: 0.9rem; }
.titles h3      { font-size: 1.2rem; }
.titles svg[onclick]     { height: 1em; margin: 0.8em 0; top: unset;}
.titles svg     { position: relative; top: -0.25em; width: 2em; height: 2.5em; }
.titles svg[onclick], .titles input[onchange] { color: var(--blues); }
.titles div + div { margin-top: -0.35em; }


.pager                    { width: fit-content; display: inline-block; }
.pager input[type=radio]  { height: 0.35em; width: 0.35em; background: var(--blues); margin: 1.1em 0.4em; opacity: 0.3; }
.pager input[type=radio]:checked { opacity: 1; }

.gradient { position: relative; max-width: 40em; top: 2em; height: 2em; background-image: linear-gradient(to top, rgba(229,223,219,0), rgba(229,223,219,1)); }

.reader               { min-height: calc(100vh - 19.25em); overflow: scroll; max-width: 32em; padding: 0; opacity: 0.85; position: relative; }
.reader > div > h2    { font-family: Century Gothic, Montserrat, Avenir, sans-serif; text-align: left; font-weight: 100; font-size: 2.5em;}
.reader footer        { padding-bottom: 0.5em; }
.reader footer *      { padding: 0.5em; }
.reader footer input     { height: 1em; margin: 0.1em; width: 1em; }
.reader > div > *:first-child { margin-top: 1em; }
.reader a svg         { margin: 2Em 0.5em; position: relative; bottom: -2.25em;}
.reader .block        { margin-top: 1em; }
.reader h2 + h3, .reader h2 + p { margin-top: 1.5em; }
.reader fieldset      { padding: 1em; }
.reader fieldset h2   { margin: 0.85em auto; font-size: 1.5em; }
.reader ul            { margin: 0 auto 0.5em; }
.reader .content h1   { margin: 0.35em auto; }
.reader .content li   { text-indent: -1.3em; text-align: left; padding: 0.15em 0 0 1.3Em; width: 100%; margin: 0.15em 0; list-style: disc inside; }

.rollout > div    {max-width: 24em; min-height: calc(100vh - 19em); text-align: center; overflow: scroll; }
.rollout div[id*=sub] {  display: grid; grid-template-rows: minmax(9em, auto) minmax(45vh, auto) auto; place-items: center; }
.rollout div[id*=sub] label { min-height: 2.5em; }
.rollout form     { width: 100%; }
.rollout h2, .rollout h2       { margin: auto; }
.rollout .blocks  { justify-content: center; margin: 0;}
.rollout .blocks label { min-width: 4em; width: auto; }


@media only screen and (max-width: 421px) {
  .strider h1         { font-size: 2.7em; margin-bottom: 0; }
  .titles             { padding-top: 1.5em; }
  .titles h1          { font-size: 1.1rem; }
  .titles svg         { height: 1.1rem; }
  .gradient           { height: 1.5em; top: 1.5em; }
  .reader             { padding: 0 1em; font-size: 0.9em; }
  .reader h1          { margin-top: 1rem; }
  .reader h2          { font-size: 2em;  }
  .reader h3          { font-size: 1.5em;  }
  .reader a svg       { margin: 1.35Em 0.5em; position: relative; bottom: -1.6em;}  
  .rollout div[id*=sub]  { grid-template-rows: minmax(7em, auto) minmax(40vh, auto) auto; }

  
}


.viewer > div   { width: 100%; height: 100vh; display: grid; place-items: center; grid-template-rows: 30% 70%; }
.viewer p       { text-align: center; max-width: 18em; font-size: 1.3em; }


/* /////////////////////////////////////////////////////// */
/*                                                         */
/* /////////// ----------  TEXT  ----------  ///////////   */
/*                                                         */
/* /////////////////////////////////////////////////////// */


p, h1, h2, h3, h4, ul {
  width: 100%;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  line-height: 1.3em;
}

h1, h2, h3, h4, a 
      { font-weight: 700; position: relative; line-height: 1em; }
  
h1    { font-size: 1.5em; margin-top: 3rem; text-align: center; font-weight: 100; text-transform: capitalize;	}
h2    { font-size: 2.5em; margin: 3rem auto 1rem; font-weight: 700; text-align: center; color: var(--cafe);
		    font-family: MountainsofChristmas, Trattatello, AmaticSC, fantasy; 	}
h3    { padding: 0.5em 0; font-weight: 100; font-size: 1.7em; margin: 1em auto 0; font-family: Century Gothic, Montserrat, Avenir, sans-serif; }
h4    { padding: 1em 0 0.4em; }

h4 svg  { position: absolute; top: 0.95em; margin-left: 0.6em; }
h4 span { padding-left: 1em; font-weight: 100; font-size: 0.9em; line-height: 1.1em; position: absolute; top: 1.4em; right: 1em; width: calc(100% - 9em); }


p     { padding: 0.25em 0; }

b     { font-family: Oswald; }
i     { font-weight: 700; }
s     { font-family: inherit; }

a         { text-decoration: none; color: var(--blues); margin: unset; cursor: pointer; }    
a:hover   { color: var(--hover); opacity: 0.8; }
a:active  { color: var(--brown); }    
a:focus   { outline: none; color: var(--hover); }

a.inactive { color: currentColor;  }
a.inactive:hover { color: currentColor; opacity: 1; cursor: default; }

blockquote    { margin: 2rem auto 2rem 6rem; text-align: right; font-size: 1.8em; font-family: 'MountainsofChristmas'; line-height: 1.15em; }
blockquote::before  { content: '" '; font-size: 3rem; }
blockquote::after   { content: ' - ' attr(cite); display: block; font-family: Century Gothic; font-size: 1rem; font-weight: 700; }


	
body > div > h1       { font-size: 5em; margin-top: 8rem; }
body > div > h1 + *   { margin-top: 8rem;  }
body > div > h1 + h2 	{ margin: 2rem auto 9rem;  }
body > div > h1 + form{ margin-top: 5rem;  }

.numhead            { margin: 8rem auto 0; font-family: Century Gothic, Montserrat, Avenir, sans-serif; }     
.numhead + h1       { margin-top: 3rem;  }
.numhead + h1 + h2  { margin: 2rem auto 5rem;  }
.numhead div        { margin-bottom: 1rem; color: var(--brown); }
.numhead div svg    { height: 0.5em; position: static; padding: 0;}

h2[id*="nam"]   { font-size: 5em; margin: 3rem auto; line-height: 1em; font-weight: 100; }


body > div > div        { max-width: 36rem; }
body > div > fieldset   { padding: 1em; position: relative; }
body > div > fieldset > svg:last-child { position: absolute; right: 1.2em; top: 1.85em; z-index: 1; }
fieldset + div.main     { margin: 0 auto; padding: 0.5em; text-align: center; background-color: var(--brock); color: var(--cafe); max-width: 30rem; }
fieldset + div.main a   { color: var(--beige); }

p.author { font-weight: 700; font-size: 0.85em; margin-top: 3em; }
p.author span { font-style: italic; font-weight: 100; }



@media only screen and (max-width: 609px) {
  body > div    { padding: 1rem; }
}

@media only screen and (max-width: 421px) {
  h1, h3 { font-weight: 300; }
  body > div > h1 { font-size: 2.5em; margin: 6rem auto 2.5rem; }
  body > div > h1 + p, body > div > h1 + div { margin-top: unset;  }
  h2[id*="nam"]   { font-size: 4em; }
  body > div > h1 + h2 { margin: 0 auto 2.15em; font-size: 1.8rem; padding: 0 1rem; }
}






/* /////////////////////////////////////////////////////// */
/*                                                         */
/* /////////// -------- TEXT STYLES --------  ///////////  */
/*                                                         */
/* /////////////////////////////////////////////////////// */



.fineprint          { line-height: 1.2em; font-size: 0.75em; font-style: italic; }
.starnote           { width: 80%; line-height: 1em; color: var(--blood); background-color: var(--beige); font-family: MountainsofChristmas, Trattatello, AmaticSC, fantasy;  }
.content .hl        { background-color: var(--beige); padding: 0 0.25em; font-weight: 500; color: inherit; }
.content    		    { text-align: left; }
.statement			    { width: 50%; min-width: 18em; }
.block 				      { text-align: center; }
.quote              { padding: 0.5em 2em; font-style: italic;  }
.subtitle           { font-size: 1.7em; font-style: italic; text-align: center; }
.card               { background-color: var(--beige); padding: 2em; }
.dot                { background-color: var(--white); width: 20Em; border-radius: 20em; height: 20Em; padding: 2em; margin: 1.5em auto 0; text-align: center; }
.dotb, .dotc        { background: var(--brock); color: var(--white); display: flex; flex-direction: column; padding: 3em; place-content: center; box-shadow: 0em 1.35em 3em var(--brock); } 
.dotc               { background: var(--brood); box-shadow: 0.5em 1em 2em var(--brock); } 
.nice               { font-family: MountainsofChristmas, Trattatello, AmaticSC, fantasy; color: var(--blood); font-size: 1.35rem; text-align: center;  }

::placeholder { font-style: italic; font-weight: 100; opacity: 0.5;  }
::selection   { background-color: var(--beige); }



.content h1       { font-family: 'MountainsofChristmas'; font-size: 5em; margin: 1.35em auto; color: var(--brock); }
.content h2       { font-family: Century Gothic, Montserrat, Avenir, sans-serif; text-align: left; font-weight: 100; font-size: 2.5em;}
.content p        { font-size: 0.95em; width: 100%; }
.content h1 + p   { margin-top: 2em; }
.content input[type=checkbox] + label, .content input[type=radio] + label { margin: -1.5em 0.15em 0 0; width: calc(100% - 3em); }
.content .fineprint { padding-top: unset; }
.content.sidelabel h3 { background-color: var(--white); padding: 0.4em; margin: 1em auto 0.5em 1em; width: auto; font-size: 1.3em; font-weight: 400; }

.dot .fineprint { padding: 1em 1em 0; }
.dot svg.main   { color: var(--cafe); width: 20em; height: 20em; margin: -8em -10em; opacity: 0.55; position: absolute; }
.dotc svg.main  { color: var(--beige); margin: 1.5em 1.5em 0; height: 11em; width: 11em; opacity: 0.85; }

@media only screen and (max-width: 421px) {
  .content            { font-size: 0.9em; }
  .content h1         { font-size: 2.7em; margin-bottom: 0; }  
  .content h2         { font-size: 2em; }  
  .dot                { width: 18Em; border-radius: 20em; height: 18Em; padding: 1em; margin: 1em auto 0; }
  .dotb               { box-shadow: -0.35em 2em 3em var(--brock); padding: 1.65em; }
  .dotc svg.main      { margin: 0.8em 2.5em 0; height: 9em; }

 .content.sidelabel h3{ margin-left: -1.7em; }
}



div > .fineprint { padding-top: 3em; }
.fineprint a { display: inline-block; }

svg.deco + label { margin: -1em 0 -3em; text-align: center; font-size: 0.8em; color: var(--cafe); }
label + .content h1 { margin: 0.75em auto; }


/* Links */

.button 		{ display: block; margin: 1.5em auto; padding: 1em 2em; text-align: center; }
.button:hover 	{ background-color: var(--beige); color: var(--hover); }

.button svg { margin: 0.3em auto 0; position: static; height: 3em;  width: 3em; }

*[id*="nam"] { font-weight: 700; font-size: 1.5em; }



.export h1    {  font-size: 3em; }

.hl { padding: 0 0.3em; color: var(--beige); background-color: var(--blood); font-weight: 900; }





/* /////////////////////////////////////////////////////// */
/*                                                         */
/*  /////////// ---------- IMAGES ---------- ////////////  */
/*                                                         */
/* /////////////////////////////////////////////////////// */




svg { isolation: isolate; overflow: initial; background-color: transparent;
  width: 1.5em; height: 1.5em;
  fill-rule: evenodd; fill: currentColor; /* applies to SVG images, makes take up the font color that applies in this div / element */
   }

li svg  { width: 4rem; height: 4rem; margin: 1em auto; }
h2 svg  { top: 0.25em; }

.off    { opacity: 0.2; }
.yes    { color: var(--cafe); }
.no     { color: var(--beige); }

.illust { position: fixed; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 80%; width: 100%; opacity: 0.1; color: var(--cafe); z-index: -1; }
.deco   { display: block; margin: 3em auto; height: 2.5em; width: 2.5em;  }

body > div > div > svg { margin: 3em auto 0; display: block; height: 3em; width: 3em; }


@media only screen and (max-width: 421px) {
  .illust { padding-bottom: 6em; }
}






/* /////////////////////////////////////////////////////// */
/*                                                         */
/* ///////////    -------- TABLES --------    ///////////  */
/*                                                         */
/* /////////////////////////////////////////////////////// */


table       { width: 100%; border-collapse: collapse; margin: 1em auto;}
td, th      { border-top: 1px solid currentColor; padding: 0.35em 0; }
tr:last-child td { border-bottom: 1px solid currentColor;  }


td:last-child { text-align: right; }
td:not(:last-child) { padding-right: 0.3em; }
td:first-child { width: 70%; min-width: 9em; }



@media only screen and (max-width: 609px) {
  table             { font-size: 0.8em; }
  td:first-child    { width: 60%; }
}


/* /////////////////////////////////////////////////////// */
/*                                                         */
/* /////////// -------- LIST STYLES --------  ///////////  */
/*                                                         */
/* /////////////////////////////////////////////////////// */



ul {  display: flex; flex-wrap: wrap; justify-content: center;  align-content: center; width: 100%; margin: 1em auto; position: relative; }
ul::after { clear: both;  }

a li { color: inherit; }

li { display: flex; flex-direction: column; float: left; text-align: center; vertical-align: middle;  position: relative;
     padding: 0 1.5em; margin: 0.5em 0; }
li:last-of-type { border-right: none; }   
li img { margin: 0.3em auto; display: block; }
li p { font-size: 0.7em; min-width: unset; width: 100%; margin: auto; }
li span { min-width: 3em; margin: unset; }
li span span { min-width: unset; }
li form { margin: 0; padding: 0; min-width: unset; }
li form input[type=submit] { margin: 0; }

ol { type: 1; }
ol > li {
  display: list-item; float: none; width: auto; height: auto; padding: 0; margin: 0.5em 0 0.25em 0;
  background-color: transparent;  font-weight: 700; border: none;
  list-style: decimal inside none; }


.features           { margin: 2em auto; padding: 0em; }
.features li        { font-weight: 400; font-size: 1.2em; width: 11rem; height: 11rem; padding: 0.5em; margin: 0.4em; border-radius: 0.3em;  border: none; } /* box-shadow: 1px 2px 4px var(--brown); } */
.features li img    { margin: 0.3em auto; display: block; }
.features a 		    { color: var(--brown); }
.features a:hover	  { color: var(--blues); }
.features a:active	{ color: var(--blues); }
.features li p      { margin: 0 auto auto; }

.icons              { margin: 0 auto; }
.icons li           { display: grid; grid-template-rows: 5em auto; justify-content: space-between; min-width: 6.7em; width: 24%; place-items: center; padding: 0; }
.icons svg          { height: 5em; width: 100%; padding: 1.5em; color: var(--cafe); }
.icons p            { padding: 0 0.25em; }


.itemlist           { border-top: 0.0625em solid currentColor; width: 100%; padding-top: 0.25rem; }
.itemlist li        { width: 100%; height: auto; display: inline-block; position: relative;
                      padding: 1em 0 0.4em;  margin: 0 0 0.25rem 0; font-size: 1em; text-align: left; border-bottom: 0.0625em solid; }
.itemlist li:last-child { margin-bottom: 0; }
.itemlist a         { display: block; font-size: 1.7em; font-weight: 300; padding-bottom: 0.2em; line-height: 1em; }
.itemlist li p      { font-size: 0.95em; }
.itemlist li span   { padding-right: 0.7em; }
.itemlist li > *:last-child { position: absolute; right: 0; top: 1em; padding: 0; text-align: right; }
.itemlist li svg    { width: 1.5em; height: 1.5em; margin: 0.7em 0;  }
.itemlist form      { width: unset; min-width: unset; max-width: unset; }
.itemlist label + h3{ padding-top: 0; margin-top: 0; }

/* variations */
.title { border-top: none; }
.title li:first-child { font-weight: 700;  }
.single li span:first-child { min-width: 60%; text-align: left; }
.single li span { text-align: center; }
.contact li     { display: grid; grid-template-columns: minmax(11em, 1fr) auto  8em; }
.contact h4     { padding: 0.15em 0; }

.checklist li      { display: grid; width: 100%; grid-template-columns: auto 1fr auto; place-items: center; text-align: left; padding: 0.3em 0; margin: unset; }
.checklist li svg  { width: 3em; height: 2.5em; margin: 0; }
.checklist li div  { height: auto; margin: auto 0; }
.checklist li h3   { font-size: 1.3em; padding: 0 0.7rem 0.15rem; margin: unset; font-weight: 700;}
.checklist li h4   { font-size: 0.7em; padding: 0 0.7rem 0.15rem; }
.checklist li p    { padding: 0 0.7rem; font-weight: 100; font-size: 0.8rem; line-height: 1.15em; }
.checklist li label{ padding: 0 0.7rem 0.5rem; font-weight: 100; font-size: 1.15rem; line-height: 1.15em; margin: unset; }
.checklist li label + p { font-style: italic; font-size: 0.7em; }
.checklist a       { font-size: 0.85em; font-weight: 900; }
.checklist li a svg{ position: static; width: 1.3em; height: 1.3em; }
.checklist li form input[type=submit] { padding: 0; font-size: 0.85em; font-weight: 900; background-color: transparent; margin: unset; }

.cards          { justify-content: space-between; }
.cards li       { padding: 1em; margin: 0.1em; background-color: var(--beige); flex-grow: 1; min-width: 32%; }
.cards a.button { background-color: var(--blues); color: var(--white); margin: unset; }

.covers         { display: grid; grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); grid-gap: 0.5em; }



.quanti          { display: grid; width: 100%; grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); max-width: unset; }
.quanti fieldset { margin: 0.5em; padding: 1em; }
.quanti fieldset:first-child  { grid-column: 1 / 3; max-width: unset; padding: 1em calc(50% - 8em); text-align: center; }
.quanti > *      { margin: 0.5em; }
.quanti input[type=number], .quanti input[type=text] { height: 1.7em; margin: 0; width: calc(100% - 0.5em); }
.quanti label    { font-weight: 100; margin: 0; }
.quanti input[type=submit] { grid-column: 1 / 3; }
.quanti .date    { padding: 0.5em; max-width: 12em; }






.sliders        {  }
.sliders span         { width: 100%;  }

@media only screen and (max-width: 421px) {
  .features li        { font-size: 1em; width: 5rem; height: 7rem; }
  .features li svg    { padding: 0.75em; margin: 0; }
  .itemlist li        { padding: 0.4em 0; font-size: 0.9em;}
  .itemlist li *:last-child { font-size: 0.8em; font-style: italic; top: 0.45em; }
  .itemlist a         { font-size: 1.35em; font-weight: 900; padding-bottom: 0; }
  .checklist li svg   { height: 2em; width: 2em; }
  .checklist li h3    { font-size: 1.15em; }
  .checklist li label { font-size: 0.85em; }
  .quanti             { display: block; width: 100%; }
  .quanti fieldset    { margin: 0.5em 0; grid-template-columns: 15% 35% 15% 35%; padding: 0; background-color: transparent; }
  .quanti label       { font-size: 0.75em;  margin: 0.15em 0; }
  .quanti input[type=number]       { height: 1.3em; margin: 0.15em 0; padding: 0.1em; }

  .quanti fieldset.sliders            { display: grid; grid-template-columns: 30% 70%; padding-top: 1em; }
  .sliders h4                         { margin: 0; padding: 0; font-size: 0.9em; }
  .sliders input[type=range]          { margin: 0.25em 0 0; }
  .sliders input[type=range] + label  { font-size: 0.75em; padding: 0 0 1em; }
  .sliders span                       { padding: 0 0 0.3em; }
  .contact li                         { display: inline-block; }
  .contact li span                    { min-width: 9em; }
  .contact li *:last-child              { top: unset; }
}

.report li                {  }
.report li span           { font-weight: 700; padding: 0 2em 0 0; }
.report li > *:last-child { display: block; float: none; position: static; width: 100%; font-weight: 100; font-style: italic; font-size: 0.9em;}

.ToC          { display: grid; grid-template-columns: 1fr 1fr; }
.ToC li       { text-align: center; padding: 0.7em 1em 1.3em; margin: 0.15em; background-color: var(--beige); display: flex; justify-content: space-between; }
.ToC div      { margin: auto; }

/* .ToC h2       { font-size: 2.5em; margin: 1.5em auto 1em; }
*/

.ToC h3       { font-size: 1em; font-weight: 700;  height: 3.5rem; margin: 0; }
.ToC input[type=checkbox].expand    { top: unset; margin: 0 1em; position: absolute; }
.ToC input[type=checkbox].expand + label { font-size: 0.8rem; padding: 0; }
.ToC label span    { line-height: 1.3em; margin: 0.3em 0; font-size: 0.85em; }
.ToC a        { font-size: 0.85em; display: inline-block; }
.ToC p        { font-size: 1.5em; padding: 0; margin: 0;}
.ToC h3 + p   { font-size: 0.8em; padding: 0; margin: 0 auto 0.3em;}
.ToC li > span   { padding: 0.3em 0; }
.ToC span     { display: block; }
.ToC li svg   { width: 5em; height: 3.3em; }
.ToC li.main   { grid-column: 1 / 3; display: grid; grid-template-columns: 5.5rem 1fr; padding: 0.3em; text-align: left; }
.ToC li.main h3 { height: unset; }


@media only screen and (max-width: 421px) {
  .ToC          { font-size: 0.85em; }
  .ToC li       
                { grid-column: 1 / 3; display: grid; grid-template-columns: 4rem 1fr; padding: 0.8em 0.8em 0.8em 0.3em; text-align: left; width: 100%; }
  .ToC li.main  { grid-template-columns: 4rem 1fr; padding: 1em 0.3em; }
  .ToC li svg   { height: 2rem; width: 2.5em; margin: auto;}
  .ToC li h3    { font-size: 1em; font-weight: 700;  height: auto; margin: 0; padding: 0.1em 0; }
  .ToC span     { display: unset; }
}


ul.content, .content ul   { list-style-position: inside; display: table; margin: 0.3em 0;}
.content li               { text-align: left; display: grid; grid-template-columns: 1em 8em 1fr; padding: 0; }
.content li::before       { content: '• '; display: inline-block; } 
.content li span          { text-indent: 0; min-width: 5.5em; margin-right: 0.5em; }
.content li svg           { height: 1em; width: 1em; margin: 0 0.5em; }

.groups li { display: grid; grid-template-columns: 1fr 9em 9em 6em auto; justify-content: space-between; }


/* /////////////////////////////////////////////////////// */
/*                                                         */
/* /////////// ----------  FORMS  ----------  ///////////  */
/*                                                         */
/* /////////////////////////////////////////////////////// */




form          { min-width: 18rem; max-width: 30rem; position: relative;  }
fieldset form { width: 100%; }

form.only     { position: absolute; margin: 20% auto; top: 0; bottom: 0; left: 0; right: 0; padding: 1em; }

fieldset      { background-color: var(--white); border: none; padding: 1em; max-width: 30em; }
legend        { font-size: 2em; margin: 0 0 1.5em; top: 1em; position: relative; }
fieldset .blocks  input[type=checkbox] + label { margin: 0.15em; width: calc(33.3% - 0.3em); }
fieldset h2   { top: 0.2em; }
fieldset textarea { resize: vertical; }

label, label legend 	{ font-weight: 700; margin: 1em 0 0.15em; width: 100%; display: block; }
label legend          { font-size: inherit; padding: 0; margin: -1em auto 0; top: 0; }
label + span label    { display: inline; position: relative; top: -0.5em; padding: 0 2em 0 0.5em; font-weight: 100;}



input::-webkit-outer-spin-button, input::-webkit-inner-spin-button 
  {  -webkit-appearance: none; margin: 0; }

input::-webkit-autofill, input::-webkit-autofill:hover, input::-webkit-autofill:focus, input::-webkit-autofill:active {
    -webkit-animation-name: autofill; -webkit-animation-fill-mode: both; 
    color: color: var(--brown); background-color: inherit; }

input:-internal-autofill-selected { background-color: var(--beige) !important; }

option::-webkit-option, datalist::-webkit-option 
  { background-color: inherit; }

@-webkit-keyframes autofill { to { color: var(--brown); background: var(--beige); } }


@media only screen and (max-width: 421px) {
  label + span label    { padding: 0 1.5em 0 0; font-weight: 100; font-size: 0.9em;}
}

input[type=text]::selection, input[type=number]::selection, input[type=password]::selection, textarea::selection, form ::selection   
  { background-color: var(--white);}


input + svg.eye { position: absolute; top: 1em; right: 1em; color: var(--blues); opacity: 0.5; }

textarea { height: 8em; resize: vertical; }
textarea.tall { height: 50vh; }

select { background: url(../_img/expand.svg) no-repeat 95% 50% var(--beige); background-size: 1em; }

input[type=text].inline, input[type=number].inline, input[type=password].inline { width: 1.8em; padding: 0; text-align: center; margin: 0; font-weight: 800; }
input[type=text][onblur*=addnew], input[type=text][onchange*=addnew] { margin: 0.3em 0; }



/* checkbox & radio */

input[type=radio], input[type=checkbox] {
  display: inline-block; 
  width: 1.25em; height: 1.25em; margin: 0.25em 0.25em 0.25em 0;
  background-color: var(--cafe); opacity: 0.4; background-size: cover; background-repeat: no-repeat; box-shadow: 1px 2px 2px var(--shadow); }

input[type=radio], input[type=checkbox][onclick*="radio"], input[type=checkbox][onchange*="radio"] 
  { border-radius: 2.5em; }
input[type=radio]:hover, input[type=checkbox]:hover    { opacity: 0.7; }
input[type=radio]:active, input[type=checkbox]:active    { background-color: var(--brock); }
input[type=radio]:checked     { background-image:  url(../_img/radio-dot.svg); opacity: 1; }
input[type=checkbox]:checked  { background-image:  url(../_img/btn-yes.svg); opacity: 1; }

input[type=radio]:not[.hidden]+label, input[type=checkbox]:not[.hidden]+label { 
  font-size: 0.85em; font-weight: 400; vertical-align: middle; 
  width: auto; margin: -1.35em 0 0; min-width: 7em; padding: 0 1em 0.25em 0;
  display: inline-block; }

label[for]:hover    { color: var(--hover); }
label::checked { font-weight: 700; }

input[type=checkbox].expand  { position: relative; top: 0.5em; margin-left: 1em; border-radius: 2em; }
input[type=checkbox].expand + label { display: none; }
input[type=checkbox]:checked.expand + label { display: block; width: 100%; opacity: 0.7; }
input[type=checkbox].expand.hidden + label  { display: block; }
input[type=checkbox].expand.hidden + label svg { display: inline-block; }


input[type=range]         { width: 100%; height: 0.5em; border-radius: 1em; background-image: linear-gradient(to right, rgba(80,64,64,1), rgba(208,192,176,1), rgba(208,192,176,1), rgba(208,192,176,1), rgba(128,16,50,1)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; background: rgba(208,192,176,1); width: 1em; height: 1em; border-radius: 1em; }
input[type=range] + label { display: grid; justify-content: space-around; grid-template-columns: 1fr 1fr 1fr; text-align: center; margin: 0.3em 0; width: 100%; height: 1.5em; }
input[type=range] + label :first-child { text-align: left; }
input[type=range] + label :last-child { text-align: right; }

label svg   { display: block; }
label span  { font-size: 0.7em; font-weight: 100; width: 100%; }

input:disabled + label
  { background-color: var(--inactive); color: var(--text-action); opacity: 0.7; }

input[type=radio].love, input[type=checkbox].love   { background-image:  url(../_img/btn-love.svg); }
input[type=radio].hate, input[type=checkbox].hate   { background-image:  url(../_img/btn-hate.svg); }
input[type=radio].yes, input[type=checkbox].yes     { background-image:  url(../_img/btn-yes.svg); }
input[type=radio].no, input[type=checkbox].no       { background-image:  url(../_img/btn-no.svg); }
input[type=radio].oops, input[type=checkbox].oops   { background-image:  url(../_img/btn-oops.svg); }
input[type=radio].plus, input[type=checkbox].plus   { background-image:  url(../_img/btn-plus.svg); }
input[type=radio].undef, input[type=checkbox].undef { background-image:  url(../_img/btn-info.svg); }
input[type=radio].mars, input[type=checkbox].mars   { background-image:  url(../_img/btn-mars.svg); }
input[type=radio].venus, input[type=checkbox].venus { background-image:  url(../_img/btn-venus.svg); }
input[type=radio].nonbi, input[type=checkbox].nonbi { background-image:  url(../_img/btn-nonbi.svg); }
input[type=radio].next, input[type=checkbox].next   { background-image:  url(../_img/btn-valid.svg); }
input[type=radio].back, input[type=checkbox].back   { background-image:  url(../_img/btn-valid.svg); transform: rotate(180deg); }

input[type=radio].menu, input[type=checkbox].menu   { background-image:  url(../_img/menu.svg); }
input[type=radio].edit, input[type=checkbox].edit   { background-image:  url(../_img/btn-edit.svg);  }


input[type=radio].love:checked, input[type=radio].no:checked, input[type=checkbox].love:checked, input[type=checkbox].no:checked, input[type=radio].venus:checked, input[type=checkbox].venus:checked
  { background-color: var(--blood); }
input[type=radio].yes:checked, input[type=checkbox].yes:checked, input[type=radio].mars:checked, input[type=checkbox].mars:checked 
  { background-color: var(--blues); }
input[type=radio].hate:checked, input[type=checkbox].hate:checked
  { background-color: var(--black); }
input[type=radio]:checked, input[type=checkbox]:checked
  { opacity: 1;  /* background-color: var(--brown); */}

input[type=radio].next[value=''], input[type=checkbox].next[value=''], input[type=radio].back[value=''], input[type=checkbox].back[value='']
  { display: none; }



footer div input[type=checkbox][onclick*="radio"] 
 { height: 2.5em; width: 2.5em; margin: 0.5em; }



/* check or radio blocks */

.blocks { display: inline-flex; flex-wrap: wrap; margin: 1em auto; }

.blocks > input[type=radio], .blocks > input[type=checkbox] {
  display: none;
}

.blocks input[type=radio] + label, .blocks input[type=checkbox] + label {
  background-color: var(--beige); padding: 0.4em 0.8em; text-align: center; margin: 0 0.3em 0.3em 0; min-height: unset; width: auto;
}

.blocks > input[type=radio] + label:hover, .blocks > input[type=checkbox] + label:hover, .blocks > input[type=radio]:checked + label:hover, .blocks > input[type=checkbox]:checked + label:hover {  background-color: var(--hover); color: var(--cream); }
.blocks > input[type=radio]:checked + label, .blocks > input[type=checkbox]:checked + label {  background-color: var(--blues); color: var(--cream);  }

.blocks input[type=submit] { margin: 0.3em; padding: 0.5em; }

.blocks div { display: inline-block; width: 67%; margin-right: 3%; }
.blocks div + div { width: 30%; margin: 0; }
.blocks textarea { margin-bottom: 0; }

.opts                              { display: grid; grid-template-columns: repeat(auto-fill, auto 1fr); }
.opts input[type=checkbox] + label { margin: 0.2em 0 0 0.5em; width: auto; }

.box { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0.3em; }
.box input[type=checkbox] + label, .box input[type=radio] + label { margin: 0; min-height: 5em; position: relative; padding: 1em; }
.box label svg { width: 3em; height: 3em; margin: 1em auto; }

/* Buttons */
input[type=button], input[type=submit]  
{ border: none; background-color: var(--cream); color: var(--blues); font-weight: 700;
	display: block; margin: 1.5em auto; padding: 1em 2em; text-align: center; }
input[type=button]:hover, input[type=submit]:hover 
{ color: var(--hover); }


input[type=checkbox].menu          
                    { padding: 0; position: fixed; top: 0; max-width: unset; z-index: 2; padding: 3em 1.5em 1em; margin: 0; height: 3em; background-color: transparent; background-position: 0.75em; background-size: 1.5em; color: var(--cream); font-weight: 700; top: 0; border-radius: 0;}
input.menu + div    { display: none; }
input.menu:checked  { background-color: var(--blues); left: 0; right: 0; max-width: unset; width: 100%}
input.menu:checked + div { position: fixed; width: 100%; max-width: unset; display: table; right: 0; top: 3em; padding: 1em; background-color: var(--blues); z-index: 2; }

input.menu + div a, input.menu + div span   
                     { padding: 0.8em 0.5em; display: block; color: var(--cream); }
input.menu + div svg { margin: 0 0.5em -0.35em 0; width: 1.5em; height: 1.5em; position: static; }
input.menu + div span{ border: 1px solid var(--cream) ; border-width: 1px 0 0 0; width: 16em; margin: 1.5em 0 0.5em; }


.btns                         
    { display: block; width: auto; padding: 0.5em; max-width: 100%; font-size: 0.85em; margin: 1em auto; text-align: center; }
.btns input[type=button], .btns input[type=submit], .btns a.button      
    { display: inline-block; margin: 1em 0.5em; padding: 0.7em 1.4em; border: 1px solid var(--blues); line-height: 1.3em; background-color: transparent; }
.btns input[type=button].main, .btns input[type=submit].main, .btns a.button.main      
    { background-color: var(--blues); }
.btns input[type=radio]
    { display: inline-block; margin: 2em 1em 0.5em; font-size: 2em; }
.btns p:first-child { font-style: italic; padding-top: 0; }

input[type=button].sec { display: inline-block; }

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

  form { width: 100%; }
  form.login { max-width: calc(100vw - 6em); min-width: unset; right: 1em; top: 1em;  z-index: 2; }
  input.menu { padding: 2.5em 0.75em 1em; background-position: 0.5em; }
  input[type=radio]+label, input[type=checkbox]+label 
    { min-width: unset; margin-right: 0; margin-left: 0.25em; }
  .btns input[type=button]      { padding: 0.4em 0.8em; margin-bottom: 0; }
  .btns input[type=radio]       { margin: 1em; }
  fieldset         { font-size: 0.85em; }
  fieldset legend  { font-size: 1.4em; top: 1.5em; }
}


.important { position: absolute !important; background-color: transparent !important; color: transparent !important; z-index: -1000 !important; width: auto !important; height: auto; top: 0  !important; left: 0  !important; }
input.important:-internal-autofill-selected { display: none; }


input.conditional + * { display: none; }
input.conditional:checked + * { display: inline-block; width: auto; }
input.plus { }


form.auto { display: flex; width: auto; }

h2 + .sidelabel                   { margin: 2em auto; }   
.sidelabel, .sidelabel fieldset   { display: grid; grid-template-columns: 30% 70%; min-width: unset; width: 100%; }
.sidelabel legend                 { grid-column: 1 / 3; }
.sidelabel fieldset legend, .sidelabel h2, .sidelabel h3  
                                  { grid-column: 1 / 3;  }
.sidelabel h4                     { padding: 0.25em 1em 0 0; text-align: right; }
.sidelabel legend + h3            { margin-top: 0;  }
.sidelabel *:not(label) + .blocks, .sidelabel .blocks:first-child    
                                  { grid-column: 1 / 3; justify-content: space-between; margin: 0 auto 1.5em; }
.sidelabel .blocks input[type=radio] + label 
                                  { width: 32%; margin: 0; }
.sidelabel input[type=submit]     { grid-column: 1 / 3; padding: 0.7em 1.4em; margin: 3em auto 1em;  }
.sidelabel input[type=text], .sidelabel input[type=password], .sidelabel input[type=number]
                                  { margin-bottom: auto; }
.sidelabel div input[type=radio]  { margin: 1em 1em 0 0; }


.switches           { display: grid; grid-template-columns: 1fr auto; grid-column: 1/3; grid-gap: 1em 0; margin: 1em auto;}
.switches label     { margin: 0; }


@media only screen and (max-width: 421px) {
  .sidelabel, .sidelabel fieldset   { display: block; }
  .sidelabel h4                     { text-align: left; }
  .sidelabel label                  { margin: 0.8em 0 0; }
  .sidelabel .opts                  { margin-bottom: 1.5em; }
  .switches                         {  }
}


.date                                  { display: grid; grid-template-columns: 1fr 1fr 2fr; width: 100%; grid-gap: 0.5em; }
.date input[type=number]               { text-align: center; }


.third { display: grid; grid-template-columns: 1.5em calc(33.3% - 1.5em) 1.5em  calc(33.3% - 1.5em) 1.5em  calc(33.3% - 1.5em); margin-bottom: 0.3em; }
.third input[type=radio] { margin: 0 0.35em 0 0; }
.third input[type=radio]+label  { margin: 0.05em 0 0; }
 
.switchb                                { width: 100%; position: relative; }
.switchb label                          { width: auto; font-weight: 100; display: inline-block; }
.switchb > div                          { background-color: var(--blues); border-radius: 2em; width: max-content;  height: max-content; padding: 0.25em 0.35em; position: absolute; right: 0;}
.switchb div input[type=radio]          { background-color: transparent; margin: 0; height: 1em; width: 1em; opacity: 0.3;  }
.switchb div input[type=radio]:checked  { background-color: var(--blues); opacity: 1; }
.switchb div input[type=radio][value='0'] { opacity: 0; }
.switchb div input[type=radio][value='0']:checked 
                                      { opacity: 0.5; background: var(--white) ; }
.switchb div input[type=radio] + input[type=radio] { margin-left: 0.3em; }

.switch                                  { text-align: right; }
.switch div                              { background-color: var(--blues); border-radius: 2em; width: 3em; padding: 0.25em; height: 1.5em; position: relative; }
.switch div input[type=checkbox]         { position: absolute; margin: 0 auto; height: 1em; width: 1em; left: 0.3em; border-radius: 1em;
                                           background-color:  var(--beige); opacity: 0.3; transition: right 0.1s 0.3s; transition: left 0.1s 0.3s; }
.switch div input[type=checkbox]:checked { background-image:  url(../_img/btn-yes.svg); opacity: 1; right: 0.3em; left: unset; }





.param      { display: grid; grid-template-columns: 1fr 1fr; place-items: center; }

.scaler                               { display: grid; grid-template-columns: 1fr auto 1fr; place-items: center; padding: 0.3em; font-size: 0.9em;}
.scaler h3                            { grid-column: 1/4; font-size: 1em; font-weight: 700; text-align: center; margin: 0; }
.scaler div:nth-child(2)              { grid-column: 1/4; font-size: 0.8em; width: auto; margin: 0 auto; padding: 0.3em; background-color: var(--blues); border-radius: 2em; }
.scaler div input[type=radio]         { margin: 0; background-color: inherit; opacity: 0;}
.scaler div input[type=radio]:checked { background-color: var(--beige); opacity: 1; background-image: none; }
.scaler label                         { font-size: 0.85em; font-weight: 100; margin: 0 0 0.5em; text-align: center; }


li[onclick] { cursor: pointer; }
span[onclick]       { color: var(--blues); }
span[onclick]:hover { color: var(--hover); }


/* /////////////////////////////////////////////////////// */
/*                                                         */
/* /////////// ----------  Enhance  --------  ///////////  */
/*                                                         */
/* /////////////////////////////////////////////////////// */


h2.main             { font-size: 7em; font-weight: 100; margin: 0.2em auto 0.5em; }
p.main, div.main    { background-color: var(--beige); text-align: center; padding: 1.5em; font-size: 1.15em; margin: 1.5em auto; }
.main b             { background-color: unset; }
.main .fineprint    { padding-top: 0; } 

input.main, textarea.main, select.main, a.main { background-color: var(--blues); color: var(--cream); border-color: var(--blues); }
input.main:hover, textarea.main:hover, select.main:hover, a.main:hover,
input.main:focus, textarea.main:focus, select.main:focus, a.main:focus { background-color: var(--hover); font-weight; 700; color: var(--cream); border-color: var(--hover); }

.main::placeholder { color: var(--white); }

li.main             { background-color: var(--brock); color: var(--beige); margin-top: 2em; text-align: left; }
li.main a           { color: var(--cafe); }

svg.main            { padding: 0; height: 11em; width: 11em; }

form div.main { background-color: var(--blues); color: var(--cream);  }
.main input[type=button].inline, .main input[type=submit].inline { font-weight: 900; font-size: 2em; text-transform: uppercase; }
.main input[type=button].inline:hover, .main input[type=submit].inline:hover { color: var(--brock); }



.sep                { border-top: 4px solid; margin-top: 3em; }



/* /////////////////////////////////////////////////////// */
/*                                                         */
/* /////////// ----------  OBJECTS  --------  ///////////  */
/*                                                         */
/* /////////////////////////////////////////////////////// */


.draw, .read 	{ background-color: var(--beige); padding: 1.5em; min-width: 18rem; max-width: 30rem; position: relative; margin: 2em auto; padding-bottom: 1em; }
.read			    { display: flex; padding: 2em 0 6em; }
.read > div 	{  font-size: 0.8em; width: 49%; display: inline-block; }
.read > div:last-of-type { position: absolute; bottom: 0; width: 100%; top: unset;}
.draw input   { margin: 1em auto; padding: 0.5em 1em; }
.draw h3      { margin: 0 0 1em; font-size: 1.5em; text-align: center; }
.draw h3 span { font-family: MountainsofChristmas; font-size: 1.35em; color: var(--cafe); }

.flex                   { display: grid; grid-template-columns: repeat(4, 1fr); justify-content: space-around; }
.flex div.hexagram      { width: calc(100% - 1em); padding: 1em; margin: 0.5em; text-align: center; font-size: 0.8em; background-color: var(--beige); }
.flex div.hexagram svg  { height: 0.7em; }

/* hexagram */

.hexagram      { display: block; }
.hexagram svg  { height: 0.8em; width: 100%; display: block; margin: 0 auto; }
.hexagram label{ text-align: center; display: block; margin: 0.5em auto 0; height: unset; width: auto; }
.hexagram span { text-align: center; display: block; margin: 0 auto; font-weight: 700; }
.hexagram h2   { margin: 2em auto 1em; }
.hexagram a    { display: block; text-align: center; margin-top: 1em;}


form.noknow    { position: fixed; bottom: 0em; }


@media only screen and (max-width: 421px) {
  .draw           { margin-top: 1em; padding: 1em 0 0.7em;}
  .draw h3        { font-size: 1.2em; }
  .draw h3 span   { font-weight: 700; }
  .flex           { grid-template-columns: repeat(2, 1fr); }
}

/* spectrum */
.spectrum      { width: 100%; height: 16em; position: relative; margin: 3em auto; }
.spectrum span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: max-content; display: inline-block; height: 1em; max-width: 30%; text-align: center; }
.spectrum span:first-child { bottom: unset; }
.spectrum span:nth-child(2) { left: unset; text-align: right; }
.spectrum span:nth-child(3) { top: unset; }
.spectrum span:nth-child(4) { right: unset; text-align: left; }
.spectrum svg  { display: inline-block; width: 55%; height: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }

/* wysiwyg */

.wysiwyg               { color: var(--beige); min-height: 24em; padding: 0 0 3em; }
.wysiwyg h1            { font-size: 3.5em; padding-top: 3rem; color: var(--brown); }

.editor                { padding: 0.5em 0; max-width: 36em;}
.editor > div          { padding: 0.5em 0; position: relative; }
.editor select         { padding: 0; width: 3em; margin: 0; font-weight: 700; background-color: transparent; position: absolute; top: 0.5em; left: -3.5em; text-align-last: right; }
.editor select:hover   { background: url(../_img/btn-edit.svg) no-repeat; background-size: 1em; background-position: right center; color: var(--blues); }


.editor input[type=text]
                      { margin: 0; background-color: transparent; color: var(--brown); font-weight: 100; }
.editor input[type=text].li, .editor textarea.li
                      { margin: 0.3em; border-left: currentColor 2px solid; padding: 0 0.8em; }
.editor select[value="h2"] + svg + input[type=text]
                      { font-family: MountainsofChristmas, Trattatello, AmaticSC, fantasy; color: var(--cafe); font-size: 3em; height: 1.5em; padding: 0; font-weight: 700;}
.editor select[value="h3"] + svg + input[type=text]
                      { font-size: 1.7em; padding: 0.5em 0; font-weight: 100; }
.editor select[value="h4"] + svg + input[type=text]
                      { padding: 0.5em 0 0; font-weight: 700; }                     
.editor select[value="blockquote"] + svg + textarea
                      { font-family: MountainsofChristmas, Trattatello, AmaticSC, fantasy; font-size: 1.4em; height: 1.5em; padding: 0; line-height: 1.15em; font-weight: 100; text-align: right; }
.editor textarea, textarea.editor
                      { resize: vertical; height: 7em; min-height: 1.3em; font-weight: 100; margin: 0; background-color: transparent; color: var(--brown); padding: 0 0.5em; }
.editor input[type=text]:focus, .editor textarea:focus 
                      { background-color: var(--white); min-height: 2.3em; padding: 0.5em; }

.editor div svg       { position: absolute; top: -0.5em; right: 0; height: 1em; width: 1em; margin: 0; }
.editor img           { width: 100%; margin: 1.5em auto; }

.editor li            { display: block; text-indent: -1em; width: calc(100% - 1em); margin: 0; text-align: left;}
.editor li::before    { content: '• '; width: 1em; display: inline-block;  }


svg[onclick]:hover    { color: var(--blues); }

div#viewer            { color: var(--brown); min-height: 20em; }
#block0 svg           { display: none; }

.editor input[type=text]::selection, .editor input[type=number]::selection, .editor input[type=password]::selection, .editor textarea::selection, .editor form ::selection 
 { background-color: var(--beige); }


.test { position: fixed; background-color: black; opacity: 0.5; color: yellow; top: 0; width: 100%; }



.floating { position: absolute; height: 2em; width: max-content; z-index: 1; top: -2.2em; left: 0;}

.floating input[type=button], .floating input[type=checkbox] + label { 
  text-align: center; font-weight: 900; background-color: var(--blood); color: var(--beige); 
  width: 2em; height: 2em; min-width: unset; padding: 0.3em; margin: 0.2em 0;
  display: inline-block; 
}

.floating input[type=checkbox] { display: none; }

.floating input[type=checkbox] + label { vertical-align: top; font-size: 1em; }
.floating input[type=checkbox].expand:checked + label { width: 2em; display: inline-block; opacity: 1; margin: 0.2em 0; background-color: var(--brown); }

.floating input[type=text] { 
    display: inline-block;
    margin: 0; width: auto; height: 2em;
    box-shadow: 2px 2px 4px #555;
}

@media only screen and (max-width: 421px) {
  .editor select  { position: static; text-align-last: unset; }
  .editor svg     { top: 0.5em; }
}



/* Gauges */
div.gauge                     { text-align: left; max-width: 30em; }
div.gauge > *                 { position: relative; border: none; }
div.gauge > span:first-child  { height: 0.75em; background-color: var(--beige); border-radius: 2em; display: block; width: 100%; top: 1em !important; background-image: linear-gradient(to top, rgba(229,223,219,0), rgba(229,223,219,0), rgba(229,223,219,0.5));  }
div.gauge > span:nth-child(2) { height: 0.75em; background-color: var(--blues); border-radius: 2em; top: 0.25em; min-width: 0.75em; background-image: linear-gradient(to top, rgba(229,223,219,0), rgba(229,223,219,0), rgba(229,223,219,0.5)); }
div.gauge > span:nth-child(3) { height: 2em; display: inline-flex; top: -1.2em; width: 100%;  }
div.gauge > span span         {  }
div.gauge > span svg          { display: block; background-color: var(--beige); border-radius: 2em; float: none; width: 2rem; height: 2rem; padding: 0.4rem; margin: 0; }
div.gauge > span svg.done     { background-color: var(--blues); color: var(--beige); background-image: linear-gradient(to top, rgba(229,223,219,0), rgba(229,223,219,0), rgba(229,223,219,0.5));}

div.gauge > div               { display: grid; }
div.gauge span.percent:after { content: attr(width); position: absolute; right: -0.5em; top: -0.65em; padding: 0.35em; background-color: inherit; border-radius: 3em; font-weight: 700; color: var(--textaction); }

@media only screen and (min-width: 421px) {
  div.gauge.thick     { font-size: 1.4em; }
  div.gauge.thick svg { height: 3rem; width: 3rem; padding: 0.55em; }
}
div.vgauge          { display: flex; color: var(--brock);  margin: 3em auto;}
div.vgauge div      { display: inline-flex; }
div.vgauge div div  { display: inline-block; }
div.vgauge div svg  { height: 0.35em; width: 70%; display: block; }
div.vgauge div span { width: 100%; display: block; margin: 0.8em auto; font-weight: 700; font-size: 0.8em; text-align: center; }



div.quizz            { padding-top: 3em; }
div.quizz > div      { grid-template-rows: 5em 1fr 8em; place-items: center; height: 70vh; min-height: 20em; }
div.quizz > div p    { font-size: 1.7em; text-align: center; margin: 0; }
div.quizz > div h2   { font-size: 1.4em; margin: auto auto 0; opacity: 0.5; }
div.quizz > div div  { display: grid; grid-template-columns: 1fr 1fr 1fr; width: 90%; font-size: 0.8em; }
div.quizz > div input[type=radio], div.quizz > div input[type=checkbox], div.quizz span[onclick] svg
                     { height: 2.5em; width: 2.5em; margin: 0.5em auto; display: block; }
div.quizz > div label { margin: auto; width: 100%; text-align: center; font-weight: 100; }
div.quizz div.btns   { display: block; }
div.quizz input[type=number]:read-only { background-color: transparent; }

@media only screen and (max-width: 421px) {
  div.quizz > div input[type=radio]   { height: 1.7em; width: 1.7em; }
  div.quizz > div                     { height: 70vh; grid-template-rows: 4em 1fr 4em; }
}


div.graph             { display: flex; height: 14em; position: relative; margin: 0.5em; width: calc(100% - 1em); }
div.graph > div       { position: absolute; top: 0; bottom: 4em; right: 0; left: 0; width: unset; display: inline-flex; padding: 0.3em 0 0.6em; z-index: 2;} 
div.graph > div span  { width: 0.3em; height: 0.3em; background: currentColor; position: relative; border-radius: 1em; display: inline-block; box-shadow: 1px 1px 3px #333;}
div.graph > div:first-child         { max-width: 100%; position: absolute; bottom: 0; top: unset; margin: 0; padding: 0; display: block; background: unset; z-index: 0;}
div.graph > div:first-child input   { display: none; }
div.graph > div:first-child input:checked + label  { opacity: 0.2; }
div.graph > div:first-child label   { display: inline-block; width: 4em; font-size: 0.5rem; line-height: 1em; margin: 0.3em 0.2em; border-top: 3px solid currentColor; min-width: unset; }
div.graph > div:nth-child(2)    { background-image: linear-gradient(to top, rgba(80,64,64,0.5), rgba(80,64,64,0.2), rgba(208,192,176,0), rgba(208,192,176,0), rgba(208,192,176,0), rgba(208,192,176,0), rgba(208,192,176,0), rgba(160,24,68,0.2), rgba(160,24,68,0.5)); border-top: 5px solid var(--brred); border-bottom: 5px solid var(--black); z-index: 1;} 
div.graph > div:last-child      { position: absolute; bottom: 2.85em; background-color: var(--brock); color: var(--beige); height: 1em; margin: auto auto 0; width: 100%; padding: 0.2em; }
div.graph > div:last-child span { width: unset; background: unset; font-size: 0.5em; box-shadow: unset;}
div.graph > div.col                     { padding: 0.3em 0; margin: 0 0.2em 0 -0.2em; z-index: 1; }
div.graph > div.col + div.col           { margin: 0; }
div.graph > div.col + div.col + div.col { margin: 0 -0.2em 0 0.2em; }
div.graph > div.col span                { width: 0.2em; height: unset; display: inline-block; opacity: 0.7; border-top: 2px solid currentColor; box-shadow: unset;}

@media only screen and (max-width: 421px) {
  div.graph                   { margin: 0; width: 100%; }
  div.graph > div             { bottom: 4em; left: 0; }
  div.graph > div:first-child { }
  div.graph > div:last-child  { }
}





/* /////////////////////////////////////////////////////// */
/*                                                         */
/* ////////// ----------  SEQUENCE  --------  ///////////  */
/*                                                         */
/* /////////////////////////////////////////////////////// */


.seq                  {  }

.seq fieldset         { width: 100%; transition: height 1s 0.3s; height: fit-content; }

.seq fieldset legend  { width: 100%; display: grid; grid-template-columns: 1fr auto; font-size: 1.7em; top: 1.5em; }
.seq fieldset span    { width: 100%; }
.seq fieldset fieldset { background-color: var(--cream); }
.seq fieldset legend span    { margin: auto 0; }

legend svg            { display: inline-block; height: 1em; width: 1em; margin: 0.3em 0 0 0.3em; padding: 0.1rem;  }
legend span span      { display: block; font-size: 0.5em; font-weight: 900; padding: 0.5em 0 0; }
.seq li svg           { width: 1.5rem; margin: 0 0.1em; padding: 0.2rem;  }
svg[onclick*=tog]     { margin: 0 0.5em; }
.seq h4 svg           { position: absolute; height: 5rem; width: 5rem; opacity: 0.4; top: -2.5em; right: 4em;}

.seq li               { transition: color 0s 0.3s; margin: 0 auto; padding: 0.5em 1em; border-top: 2px solid var(--white); }




.saver                { position: fixed; top: 18em; right:0; z-index: 1; width: 14em; padding: 1em; display: grid; grid-template-columns: 1fr auto; 
                        background-color: var(--blues); color: var(--white); font-size: 0.8em; text-align: right; }
.saver input          { font-weight: 700; font-size: 2.3em; text-transform: uppercase; padding: 0; margin: 0 auto 0 0; background-color: transparent; color: inherit; }
.saver svg            { height: 3em; width: 2.2em; margin: 0 0.5em 0 auto; }
.saver p              { grid-column: 1/3; text-align: right; padding: 0; }


@media only screen and (max-width: 421px) {
  .seq fieldset legend { font-size: 1.2em; top: 2em; }
  .seq legend svg      { font-size: 1.2em; }
  .saver               { padding: 0.5rem 1rem; font-size: 0.65em; }
  .seq li              { padding: 0.5em; }
  .seq li span         { min-width: 1em; }
  
}





/* DRAG & DROP STYLE */
*[draggable]          { cursor: move; }

/* drag li */
li[draggable].up      { background-color: var(--brock); color: var(--beige); opacity: 0.5; transition: background-color 1s 0.3s; border-top: none; transition: opacity 1s 0.3s; }
li[ondragenter].space { border-top: 0.5em solid var(--white);; opacity: 0.7; background-color: var(--creig); }
fieldset[ondrop].host { background-color: var(--creig); }


/* drag fieldset */
fieldset[draggable].up        { background-color: var(--brock); color: var(--beige); transition: background-color 1s 0.3s; }
fieldset[ondragenter].space   { opacity: 0.5; background-color: var(--cafe); }


li.empty                { background-color: transparent; border: 1px dashed currentColor; }
li + li.empty, fieldset + li.empty                  { display: none; }
div.empty               { padding: 0.5em; text-align: center; }

.host > div             { display: inline-block; padding: 0.3em; border: 1px dotted var(--cafe); background-color: var(--white); transition: background-color 1s 0.3s; }
.host > div li.empty    { display: block; }
.host > div li.empty *  { display: none; }
li.empty.space          { border-top: 0.5em solid; }

.tempHide               { display: none; }