:root {
  --svg-fill-color: red;
  --line-hair: .05em;
  --field-padding: .25em;
}
/* MAIN ELEMENTS */
.main-page > .xforms-group
, .main-page > xforms-group
{
  background-color:var(--form-background-color);
  outline:solid var(--line-thin) black;
  position:relative;
  margin: 2em 0;
  padding: 1em 2em;
}
xforms-group > xforms-group:first-of-type xforms-input:first-of-type {
  margin-top: 3em;
}

.xforms-control, span.xforms-control.xforms-appearance-minimal.xforms-enabled
{
  margin-bottom:1em;
  display:table-row;
  height:2.7em;
}
xforms-submit[xf-focus] button {
  animation: waiting 1.5s infinite;
  outline:solid var(--line-thin) black;
}
@keyframes waiting {
  0%,100% {
    background-color: pink;
    color:black;
    }
  50% {
    background-color: purple;
    color:yellow;
    }
}
xforms-input[xf-hidden=true] {
  display:none !important;
}

.xforms-label {
  display: inline-block; 
  width: 18ex; 
  font-weight:600;
  vertical-align:top;
  padding-top:.35em;
}
.xforms-group >.xforms-label
{
  margin: 1em 0 ; 
  width: auto; 
  text-align: left;
}
button > .xforms-label {
  width:auto;
  padding:0;
}
.xforms-value {
  padding: var(--field-padding);
}
xforms-textarea xforms-body {
  display:inline-block;
}
fieldset + fieldset, .xforms-group + .xforms-group
, xforms-group + xforms-group 
{
  margin-top: 1.5em;
}
.xforms-group > div.xforms-label 
{
  font-style:oblique;
  display:block;
  margin-bottom:1em;
}
.powered-by-xforms {
  position:absolute;
  right:0;
  bottom:0;
  text-align:right;
  padding:0 1em;
  border-left:solid var(--line-hair) black;
  border-top:solid var(--line-hair) black;
  background-color:var(--light-blue);
  color:black;
  font-style:oblique;
  font-size:.8em;
}
span.xforms-alert-icon {
  display:inline-block;
  margin-left:.3em;
  background-image:url(times-circle.svg);
}
span.xforms-alert-value,
xforms-alert-mark:hover + xforms-alert {
  font-size:.8em;
  max-width:16em;
  padding:0 .5em;
  line-height:1.65em;
  color:red;
  background-color:#ffe;
}
.xforms-required .xforms-required-icon {
    display: none;
}

xforms-input,
xforms-select1,
xforms-select,
xforms-secret,
xforms-textarea,
xforms-input[xf-bound]:not([xf-notrelevant]),
xforms-secret[xf-bound]:not([xf-notrelevant])
{
  position:relative;
  display:block;
  margin-bottom:2.5em;
}
xforms-input xforms-label,
xforms-select1 xforms-label, 
xforms-select xforms-label,
xforms-textarea xforms-label
{
  position:absolute;
  transition: all;
  transition-duration: .5s;
  margin-left:.5em;
  font-style:italic;
  color:#666;
}
xforms-textarea xforms-body,
xforms-select1 xforms-body,
xforms-select xforms-body,
xforms-input xforms-body, 
xforms-body > input, 
xforms-body > select {
  height:2.5em;
}
xforms-textarea,xforms-body textarea {
  min-height:10em;
  display:block;
}
xforms-body * {
  padding:0 .5em;
  
}
xforms-body textarea {
  padding:1em .5em;
}
xforms-input[xf-focus] xforms-label,
xforms-select1[xf-focus] xforms-label, 
xforms-select[xf-focus] xforms-label,
xforms-textarea[xf-focus] xforms-label,
xforms-secret xforms-label, /* required as the browser does not tell xforms that the pwd field has a value until it is focused, causing a vertical shift when submit is clicked with prefilled data */
xforms-label.field-has-data
{
  margin-top:-1.6em;
  margin-left:0;
  font-style:normal;
  color:var(--blue);
}

xforms-input[xf-invalid] > xforms-alert-mark,  
xforms-select1[xf-invalid] > xforms-alert-mark,  
xforms-select[xf-invalid] > xforms-alert-mark,
xforms-textarea[xf-invalid] > xforms-alert-mark  
{
  margin-left:.3em;
  display:inline;
  min-width:.5em;
  background-image:url(times-circle.svg);
  background-repeat:no-repeat;
  position:absolute;
}
xforms-input[xf-invalid]:not([xf-focus]) input,
xforms-select1[xf-invalid]:not([xf-focus]) select,
xforms-select[xf-invalid]:not([xf-focus]) select,
xforms-textarea[xf-invalid]:not([xf-focus]) textarea
{
  outline: solid .1em red;
}
*[xf-required] input,
*[xf-required] select,
*[xf-required] textarea {
  background-color:var(--lichtgeel);
}
xforms-alert-mark::after {
  content: "\2002\2002";
}
xforms-select1 {
  margin-right:1em;
}
xforms-select1[xf-ref=attendancetype_id] select {
  width:12em;
}

@media screen and (max-width:1000px) {
  .xforms-label {
    display:block;
  }
}