@font-face 
{
  font-family: 'BRLWC';
  font-style: normal;
  font-weight: 300;
  font-display: auto;
  src: url('typo/barlow-condensed-v1-latin-300.woff2') format('woff2');
}
@font-face 
{
  font-family: 'BRLWC';
  font-style: normal;
  font-weight: 600;
  font-display: auto;
  src: url('typo/barlow-condensed-v1-latin-600.woff2') format('woff2');
}
:root
{
  --c-one: 0,0,0;
  --c-one-100: rgba(var(--c-one),1);
  --c-one-050: rgba(var(--c-one),.5);
  --c-one-030: rgba(var(--c-one),.3);
  --c-one-020: rgba(var(--c-one),.2);
  --c-two: 255,255,255;
  --c-two-100: rgba(var(--c-two),1);
  --c-two-050: rgba(var(--c-two),.5);
  --c-three: 130,0,200;
  --c-three-100:rgba(var(--c-three),1);
  --c-three-080:rgba(var(--c-three),.8);
  --c-three-050:rgba(var(--c-three),.5);
  --c-four: 200,0,100;
  --c-four-100:rgba(var(--c-four),1);
  --c-four-050:rgba(var(--c-four),.5);
  --c-five: 255,180,0;
  --c-five-100:rgba(var(--c-five),1);
  --c-five-050:rgba(var(--c-five),.5);
  --c-five-020:rgba(var(--c-five),.2);
  --c-nocolor: rgba(var(--c-two),0);
  --s-nrml: 0.5s;
}
*, *:before, *:after
{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
html 
{ 
	margin: 0;
	padding: 0;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body 
{ 
	padding: 0;
	margin: 0;
	/* background-color: var(--c-two-100);  */
 background-color: var(--c-five-100);
  color: var(--c-one-100);
	font-size: 18px; 
	line-height: 21px; 
	font-family:'BRLWC';
	font-weight: 300;
}
.fixedback
{
  width: 100vw;
  height:100vh;
  /* ; */
  background-image: url('../../graphics.main/back-qrcoder.svg');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  position: fixed;
  z-index: 0;
}
.wrapper
{
  width:100vw;
  min-height:100vh;
  margin: 0 auto;
  padding: 32px;
  display: flex;
  flex-direction: column;
  /* flex-wrap: wrap;
  flex-grow: 0; */
  align-items: center;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  max-width: 1200px;
  gap: 32px;
  /* background-color: var(--c-five-100);
  background-image: url('../../graphics.main/back-qrcoder.svg');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat; */
  /* background: linear-gradient(to bottom, var(--c-two-100) 0%, var(--c-four-100) 100%); */
  /* border:1px dashed red; */
}
header
{
  /* border:1px solid red; */
  /* background-color: var(--c-two-050); */
  /* background: linear-gradient(to bottom, var(--c-two-100), var(--c-two-050)); */
  padding: 32px;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  flex-direction: column;
  /* width: 100vw; */
  margin-top: 32px;
  margin-bottom: 32px;
  position: relative;
  /* top: 0px; */
  z-index: 3;
  /* backdrop-filter: blur(10px); */
  /* transform: scale(0.75); */
}
section
{
  /* border:1px solid red; */
  /* width: calc(100% - 32px); */
  width: 100%;
  /* flex-grow:0; */
  background-color: var(--c-two-100);
  border-radius:16px;
  padding: 24px 32px;
  /* gap:16px; */
  /* margin: 16px; */
  /* display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start; */
  box-shadow: 0px 0px 12px var(--c-one-020);
}
footer
{
  /* background-color: var(--c-three-080); */
  /* background-image: url('../../graphics.main/back-qrcoder.svg');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat; */
  margin-top: 32px;
  color: var(--c-two-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  min-height: 200px;
  position: relative;
  z-index: 0;
  backdrop-filter: blur(10px);
  /* position: fixed;
  z-index: 5;
  bottom:0px; */
  
  /* border-top: 10px solid var(--c-two-050); */
}

._answer
{
  /* background-color: var(--c-five-100); */
  /* margin-top: 8px;
  margin-bottom: 8px; */
  padding: 8px 0 8px 8px;
  border-left: 2px solid var(--c-four-100);
  margin-bottom: 16px;
}
._chooser
{
  /* background-color: var(--c-two-100); */
  width: 100%;
  padding: 0 0 16px 0;
  /* padding: 16px 32px; */
  padding-bottom: 16px;
}
._entries
{
  /* background-color: var(--c-two-100); */
  width: 100%;
  padding: 16px 0;
 border-top: 1px dashed var(--c-one-030);
}
._options
{
/* background-color: var(--c-two-100);  */
 width: 100%;
  padding: 16px 0;
  border-top: 1px dashed var(--c-one-030);
}
/* .__ontop
{
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}*/
.__onbottom
{
 padding-bottom: 0px;
}
._preview
{
  /* border-radius: 16px; */
  /* background-color: var(--c-two-100);  */
  /* width: calc(100% - 32px); */
  /* margin: 16px auto;*/
  padding: 0 0 16px 0; 
  /* box-shadow: 0px 0px 12px var(--c-one-020); */
  display: flex;
  justify-content: center;
  flex-direction: column;
  /* border:1px dashed red; */
}
._loader
{
  /* width: calc(100% + 64px); */
  /* margin: 0 -32px; */
  padding: 16px 0 0 0;
  border-top:1px dashed var(--c-one-030);
}
._codeinfo
{
  border-bottom:1px dashed var(--c-one-030);
  padding: 16px 0px;
}
._codeinfo:first-of-type
{
  /* width: calc(100% + 64px);
  margin: 0 -32px; */
  padding: 0px 0px 16px 0px;
 
}
._button
{
  background-color: var(--c-three-100);
  color: var(--c-two-100);
  border-color: transparent;
  border-radius: 8px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  height:48px;
  transition-property: background-color;
  transition-duration: var(--s-nrml);  
}
._qrcode
{
  width: 75%;
  margin: 16px auto;
  /* border:1px solid blue; */
}
._underlay
{
  background-color: var(--c-one-020);
  border-radius: 4px;
  position: relative;
   z-index: 0;
  top:-64px;
  color: var(--c-two-100) !important;
  font-size:125%;
  height:32px;
  width:80px;
  margin: 0 auto -32px calc(50% - 40px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* align-self: center; */
  /* justify-self: center; */
}
.__alert
{
  background-color: var(--c-four-100);
  color:var(--c-two-100);
  padding: 16px;
  margin-top: 8px;
  border-radius: 8px;
}
.___rowed
{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 16px;
}
.___largegap
{
  /* display: flex;
  flex-direction: row;
  flex-wrap: nowrap; */
  gap: 96px;
}
.___lc
{
  justify-content: flex-start;
  align-items: center;
}
.___hidden
{
  display: none;
}
._inner
{
  display: flex;
  /* flex-direction: row; */
  justify-content: flex-start;
  align-items: flex-start;
  /* max-width: 1200px; */
  padding: 0px !important;
  /* margin-bottom: 32px; */
  /* margin: 16px 0px; */
  /* border:1px solid green; */
  gap:32px !important;
}
.__reversed
{
  flex-direction: row-reverse;
}
 ._outbreaker
{ 
  
  /* background: linear-gradient(to bottom, var(--c-one-030), var(--c-two-100)); */
  background-color: var(--c-five-100);
  margin: -18px -26px -18px -48px;
  padding: 16px 32px 16px 32px;
  width:calc(50% + 80px) !important;
  border-radius: 0 10px 10px 0;
  color:var(--c-two-100);
  border-left:4px dotted var(--c-two-100);
  /* background-image: url('../../graphics.main/back-qrcoder.svg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat; */
  /* display: flex;
  flex-direction: row;
  margin: 0 auto; */
}
._c11, ._c12, ._c13, ._c14, ._c15
{
  /* flex-grow: 1; */
  /* padding: 0px;*/
  /* margin: 16px 0px;  */
  /* flex-shrink: auto; */
  /* border:1px dotted orange; */
}
._c11
{
  width: 100%;
}
._c12
{
  width: 50%;
}
._c13
{
  width: 33%;
}
._c23
{
  width: 66%;
}
._c14
{
  width: 25%;
}
._c15
{
  width: 20%;
}
._c45
{
  width: 80%;
}
.___tmr
{
  margin-top:16px;
}
.___tml
{
  margin-top:32px;
}
.___tmb
{
  margin-top:48px;
}
._hasinline
{
  /* border:1px dashed green; */
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--c-one-050);
}
._inliner
{
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  /* border:1px solid red */
}
._inlineicon
{
  /* border:1px solid red; */
  margin: 0 ;
  padding: 0;
align-self: flex-start;
  display: inline-flex;
}
._inlineicon img
{
  height: 20px;
  width: 20px;
  margin-top: 2px;
  animation-name: pulse;
  animation-duration: 1.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes pulse {
    0%{ transform: scale(1.0);filter: blur(0px);}
    100%{ transform: scale(0.8);filter: blur(1px);}
}
 form span
{
 /* display: flex;
  flex-direction: column;
  margin: 0 auto;*/
  /* border:1px solid blue; */
} 
form
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0px;
  /* border-radius: 16px; */
  /* width: calc(100% - 32px); */
  /* max-width: 600px; */
 /* margin: 16px auto 0 auto; */
 /* box-shadow: 0px 0px 12px var(--c-one-020); */
}
form div._separator
{
  border-top:1px dashed var(--c-one-030);
  width: 100%;
  margin-top: 8px;
  padding-top: 16px;
  /* display: flex;
  flex-direction: column; */
  /* margin:16px auto  0 auto;*/
  /* padding: 0 32px;  */
  /* padding: 0px; */
  /* border:1px dashed red; */
  /* background-color: var(--c-two-100); */
}

input,textarea,select
{
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  border: 1px solid var(--c-one-020);
  border-radius: 4px;
  width: 100%;
  height:48px;
  font-family: 'BRLWC';
  font-size: 130%;
  padding: 0 8px;
  background-color: var(--c-two-100);
  color: var(--c-one-100);
  position: relative;
  z-index: 1;
  margin-bottom:8px;
}
::placeholder
{
  color:var(--c-one-030);
}
textarea
{
  min-height:120px;
  max-height: 240px;
  resize: vertical;
}
select 
{
  background-image: url('../../graphics.main/form--button--select.svg');
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: calc(100% - 12px); 
}
.__needed
{
  border:2px solid var(--c-four-100);
}
.__divider
{
  font-size: 50%;
}
input[type=submit], input[type=button]
{
  background-color: var(--c-three-100);
  color: var(--c-two-100);
  border-color: transparent;
  border-radius: 8px;
  font-weight: 600;
  /* text-transform: lowercase; */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height:48px;
  cursor: pointer;
  transition-property: background-color;
  transition-duration: var(--s-nrml);
}
input[type=checkbox]
{
 width: 48px;
 height:48px;
 border-radius: 50%; 
 background-image: url('../../graphics.main/form--button--uncheck.svg');
 background-size: 36px 36px;
 background-repeat: no-repeat;
 background-position: center center;
  cursor: pointer;
}
input[type=submit]:hover, input[type=button]:hover
{
  background-color: var(--c-four-100);
}
/* input[type=submit]:disabled */
input[type=checkbox]:checked
{
 background-image: url('../../graphics.main/form--button--check.svg');
}
input[type=text]:read-only
{
  color:var(--c-four-050);
}
textarea:has(+ div._underlay)
{
  /* border:1px dashed red; */
  background-color: var(--c-two-050);
}
h1, h2, h3, h4, h5, h6, p
{
  margin: 0px;
  padding: 0px;
  line-height: 120%;
}
h1, h2, h3, h4, h5, h6
{
  margin-bottom: 8px;
  font-weight: 300;
  padding: 4px 0px;
  width: auto;
}
h1
{
  font-size: 400%;
  margin-bottom: 0px;
  margin-top: 32px;
  color: var(--c-three-100);
}
/* h2
{
  border:1px dotted white;
} */
h1:has(em)
{ 
  line-height: 90%;
  margin-top: 0px;
}
h2
{
  font-size: 200%;
}
h3
{
  font-size: 160%;
  margin-bottom: 0px;
}
h4
{
  font-size:145%;
}
p, ul 
{
  line-height: 135%;  
}
.__alert p:not(:last-of-type)
{
  margin-bottom: 4px;
}
ul
{
  list-style-type: none;
  padding-left: 0px;
  /* padding-right: 64px; */
}
ul li
{
  margin-bottom: 8px;
  margin-left: 24px;
}
ul li::before
{
  content: '▸';
  margin-left: -24px;
  color: var(--c-one-100);
  display: inline-block;
  width: 24px;
  height: 100%;
  text-align: left;
}
.wrapper p + p
{
  margin-top: 8px;
}
strong,b
{
  font-weight: 600;
}
p em, p i, ul i, ul em
{
  color:var(--c-four-100);
  font-style: normal;
}
p i::before, 
ul i::before
{
  content: '‹';
  /* margin-right: 2px; */
  /* color:var(--c-four-100); */
}
p i::after, ul i::after
{
  content: '›';
  /* margin-left: 2px; */
  /* color:var(--c-four-100); */
}
h1 em,h1 i
{
  font-size: 33%;
  line-height:100%;
  font-style: normal;
  padding-left: 32px;
  color:var(--c-four-100);
}
summary
{
  font-size: 130%;
  /* font-weight: 600; */
  color:var(--c-one-100);
  /* background-color: var(--c-two-050); */
  padding: 8px 0px;
  /* border-radius: 4px;
  border: 1px solid var(--c-one-020); */
  /* margin-bottom: 8px; */
  list-style-type: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
summary::after
{
  content: '▸';

  margin-left: 8px;
  margin-right: 8px;
  color: var(--c-four-100);

  text-align: center;
  justify-content: center;
  align-items: center;
}
details:has(div._answer)[open] summary
{
  color: var(--c-four-100);
}
details[open] summary::after
{
  content: '✖︎';
  /* margin-left: 8px;
  margin-right: 8px; */
  /* color: var(--c-four-100); */
}
summary::-webkit-details-marker,
summary::marker
 {
	display: none;
}
details:has(div._answer)
{
  /* border: 1px solid var(--c-one-020);  */
  margin-bottom: 4px;
  margin-top: 4px;
}
code
{
  display: block;
  font-size: 80%;
  line-height: 120%;
  font-family: monospace;
  font-weight: 300;
  color:var(--c-two-100);
  background-color: var(--c-four-100);
  padding: 16px;
  margin-top: 8px;
  border-radius: 8px;
  /* border: 1px solid var(--c-one-020); */
}
.__l
{
  font-size: 130%;
}
.__s
{
  font-size: 80%;
  /* color:var(--c-one-030); */
}
.wrapper a
{
  text-decoration: none;
  color: var(--c-four-100);
  font-weight: 600;
  transition-property: background-color, color;
  transition-duration: var(--s-nrml);
  padding: 0px 4px;
  border-radius: 3px;
  margin-left: -2px;
}
.wrapper a:hover
{
  /* text-decoration: none; */
  background-color: var(--c-four-100);
  color: var(--c-two-100);
  /* font-weight: 600; */
}
.wrapper a.__lastofline::after
{
  content: '…';
  margin-left: 2px;
}
 a._button
{
  text-decoration: none !important;
color: var(--c-two-100);
border-radius:8px;
}
 a._button:not(.__disabled):hover
{
  text-decoration: none !important;
  background-color: var(--c-four-100);
}
a.__disabled,a.__disabled:hover
{
  background-color: var(--c-one-020);
  cursor: default;
}
h3:not(:first-of-type):has(+details)
{
  /* border:1px dotted green; */
  margin-top: 16px;
}
p:has(+select),p:has(+input),p:has(+textarea),p:has(+div)
{
  color:var(--c-one-030);
  padding-bottom: 4px;
}
footer a
{
  color: var(--c-two-100);
  text-decoration: none;
  margin: 0px 8px;
}
footer a:hover
{
  color: var(--c-two-50);
  /* text-decoration: none;
  margin: 0px 8px; */
}
footer p:has(a)
{
  /* border:1px dotted blue; */
  /* width:100vw; */
  margin-bottom: 16px;
}
._headlogo
{
  width: 96px;
  aspect-ratio: 1 / 1;
  height:96px;
  border-radius: 25%;
  /* border: 4px solid var(--c-two-050); */
  background-color: var(--c-two-050);
  margin-bottom: -56px;
  padding: 16px;
  /* filter: drop-shadow(0px 0px 4px var(--c-one-050)); */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  /* animation-name: pulse;
  animation-duration: 2.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; */
  backdrop-filter: blur(10px);
}
.__fixed
{
  display: inline-block;
  width:150px;
  color: var(--c-one-050);
}
@media only screen
and (max-width : 800px)
{
 ._inner
  {
    /* border:red 1px solid; */
    flex-direction: column-reverse;
    gap:32px;
  }
  ._inner div._c12
  {
    /* border:1px dashed orange; */
    width:100%;
  }
  .___rowed
  {
   flex-direction: column;
  }
  .___largegap
  {
    gap:32px;
  }
  ._outbreaker
  { 
    margin: 0px -26px -18px -26px;
    padding: 16px 32px 16px 32px;
    width:calc(100% + 52px) !important;
    border-radius: 0 0 10px 10px;
    border-top:4px dotted var(--c-two-100);
    border-left-width: 0px;
  }
._c12, ._c13,._c14,._c15
{
  width: 100%;
}
.___lc
{
  flex-direction: row !important;
}
}
@media only screen
and (max-width : 600px)
{
  .wrapper
  {
    padding: 8px;
  }
  h1:has(em)
  { 
    margin-left: 16px;
  }
  .___rowed
  {
    flex-direction: column;
  }
  ._qrcode
  {
    width: 100%;
  }
  .__fixed
  {
    width: 100%;
  }
  .__notxt
  {
    display: none;
  }
  ._headlogo
  {
    margin-bottom: -26px;
  }
}