@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-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-four: 200,0,130;
  --c-four-100:rgba(var(--c-four),1);
}
*, *:before, *:after
{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
html 
{ 
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body 
{ 
	padding: 0;
	margin: 0 auto;
	background-color: var(--c-two-100); 
  color: var(--c-one-100);
	font-size: 18px; 
	line-height: 18px; 
	font-family:'BRLWC';
	font-weight: 300;
}
.wrapper
{
  width:100vw;
  min-height:100vh;
  margin: 0 auto;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
form
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border-radius: 16px;
  width: calc(100% - 32px);
  /* max-width: 600px; */
 margin: 16px auto 0 auto;
 box-shadow: 0px 0px 12px var(--c-one-020);
}
._master
{
}
._chooser
{
  background-color: var(--c-two-100);
  width: 100%;
  padding: 16px 32px;
  padding-bottom: 16px;
}
._entries
{
  background-color: var(--c-two-100);
  width: 100%;
  padding: 16px 32px;
 border-top: 1px dashed var(--c-one-030);
}
._options
{
background-color: var(--c-two-100); 
 width: 100%;
  padding: 16px 32px;
  border-top: 1px dashed var(--c-one-030);
}
.__ontop
{
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.__onbottom
{
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
._preview
{
  border-radius: 16px;
  background-color: var(--c-two-100); 
  width: calc(100% - 32px);
  margin: 16px auto;
  padding: 16px 32px;
  box-shadow: 0px 0px 12px var(--c-one-020);
}
._loader
{
  /* background-color: var(--c-two-100); */
  width: calc(100% + 64px);
  /* width: 100%; */
  margin: 0 -32px;
  /* border-radius: 16px; */
  padding: 16px 32px;
  border-top:1px dashed var(--c-one-030);
  /* box-shadow: 0px 0px 12px var(--c-one-020); */
  /* border:1px solid red; */
}
._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;
}
._qrcode
{
  width: 100%;
  /* border-bottom:1px dashed var(--c-one-030); */
}
._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 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.__alert
{
  background-color: var(--c-four-100);
  color:var(--c-two-100);
  padding: 16px 32px;
  margin: 16px;
  border-radius: 16px;
}
.___rowed
{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 16px;
}
.___lc
{
  justify-content: flex-start;
  align-items: center;
}
.___hidden
{
  display: none;
}
._inner
{
  display: flex;
  flex-direction: row-reverse;
  max-width: 1200px;
  padding-bottom: 16px;
  margin-bottom: 32px;
}
._c12, ._c13, ._c14, ._c15
{
  flex-grow: 1;
}
._c12
{
  width: 50%;
}
._c13
{
  width: 33%;
}
._c14
{
  width: 25%;
}
._c15
{
  width: 20%;
}
form span
{
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}
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-050);
  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); 
}
input[type=submit]
{
  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: flex-start;
  align-items: flex-end;
  width: 100%;
  height:48px;
}
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;
}
input[type=checkbox]:checked
{
 background-image: url('../../graphics.main/form--button--check.svg');
}
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: 64px;
  margin-top: 32px;
}
h2
{
  font-size: 200%;
}
h3
{
  font-size: 160%;
  margin-bottom: 0px;
}
.__alert p
{
  margin-bottom: 4px;
}
strong,b
{
  font-weight: 600;
}
em,i
{
  font-size: 33%;
  line-height: 25%;
  font-style: normal;
  padding-left: 32px;
  color:var(--c-three-100);
}
.__l
{
  font-size: 130%;
}
.__s
{
  font-size: 80%;
  color:var(--c-one-030);
}
 a._button
{
  text-decoration: none !important;
}
a.__disabled
{
  background-color: var(--c-one-030);
  cursor: default;
}
p:has(+select),p:has(+input),p:has(+textarea),p:has(+div)
{
  color:var(--c-one-030);
  padding-bottom: 4px;
}

@media only screen
and (max-width : 800px)
{
 ._inner
  {
    /* border:red 1px solid; */
    flex-direction: column-reverse;
  }
  ._inner div._c12
  {
    /* border:1px dashed orange; */
    width:100%;
  }
  .___rowed
  {
  //  flex-direction: column;
  }

}
@media only screen
and (max-width : 600px)
{
 .wrapper
 {
  
   padding: 8px;

 }
  .___rowed
  {
    flex-direction: column;
  }
._c12, ._c13,._c14,._c15
{
  width: 100%;
}
}