form {
    text-align: left;
    display: flex;
    flex-flow: row wrap;
    margin: calc(-0.25 * var(--padding));
}
form .form-field, form .form-spacer, .buttons {
    display: block;
    width: 100%;
    margin: calc(0.25 * var(--padding)) 0px;
    padding: 0px calc(0.25 * var(--padding));
}
form .form-field.flex {
    display: flex;
}
form .form-field.quart {
    flex: 1 1 max(calc(1 * var(--flex-base)), 25%);
}
form .form-field.half {
    flex: 2 1 max(calc(1 * var(--flex-base)), 50%);
}
form .form-field.full, form .buttons, form .button-wrapper {
    flex: 1 1 100%;
}
form .form-field.fieldset {
    padding: 0;
    margin: 0;
}
form .form-field.conditional,
form .form-field.form-step {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    height: auto;
    pointer-events: none;
}
form .form-field.conditional:not(.scond) {
    margin: 0
}
form .form-field.conditional.scond,
form .form-field.form-step.form-step-visible {
    pointer-events: all;
    opacity: 1;
    max-height: 10000px;
    overflow: visible;
}
form .form-field .form-label {
    margin-bottom: 5px;
}
.form-input-wrapper, .form-input-wrapper input  {
    width: 100%;
}
.form-data {
    position: relative;
}
.checkboxes {
    display: block;
}
form .buttons, form .button-wrapper, .buttons, .button-wrapper  {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    padding: 0;
    margin: calc(-.25 * var(--padding));
    width: auto;
}
form .buttons, form .button-wrapper {
    margin: 0
}
.buttons > .button, .buttons > button, 
form .button-wrapper button, form .button-wrapper .button {
    flex: 1 1 100px;
    margin: calc(.25 * var(--padding))
}
.buttons > .button:only-of-type, .buttons > button:only-of-type {
    right: 0;
    margin: 0 0 0 auto;
}
form .button-wrapper button, form .button-wrapper .button {
    margin: calc(0.25 * var(--padding))
}
.form-textarea-wrapper, .form-textarea-wrapper textarea {
    width: 100%;
}
button[type="reset"], form:invalid button[type="submit"] {
    background-color: var(--dark);
}
form:invalid button[type="submit"] {
    cursor: not-allowed
}
.form-textarea-wrapper textarea {
    min-height: 200px;
    resize: none;
}
input, textarea, select, form fieldset {
    border: none;
    font-size: 1em;
    border-radius: 0;
} 
input, textarea, select, input[class*="box"] {
    border: none;
    padding: 10px;
    width: 100%;
    font-size: 1em;
    font-family: inherit;
    font-weight: 300;
    color: var(--dark);
    background-color: rgba(var(--light-rgb), 1);
    transition: opacity .5s ease-in-out;
    opacity: .5;
    outline: none
}
input[type="date"], .flatpickr-input + input, .flatpickr-input.flatpickr-mobile {
    min-height: calc(1.2rem + 20px)
}
form .form-field p {
    padding: 0px
}
textarea {
    height: 6rem;
    resize: none;
}
.switchlabel input, .switchlabel textarea {
    color: transparent;
}
.switchlabel ::-webkit-input-placeholder {
    color: transparent;
    transition: color 0.5s ease-in;
}
.switchlabel ::-moz-placeholder {
    color: transparent;
    transition: color 0.5s ease-in;
}
.switchlabel ::-ms-placeholder {
    color: transparent;
    transition: color 0.5s ease-in;
}
.switchlabel ::placeholder {
    color: transparent;
    transition: color 0.5s ease-in;
}
.labelup input, .labelup textarea {
    color: var(--dark);
}
.labelup ::-webkit-input-placeholder {
    color: var(--dark);
}
.labelup ::-moz-placeholder {
    color: var(--dark);
}
.labelup ::-ms-placeholder {
    color: var(--dark);
}
.labelup ::placeholder {
    color: var(--dark);
}
input:focus, textarea:focus, select:focus, 
.labelup input, .labelup textarea, .labelup select {
    outline: none;
    opacity: 1
}
.form-field.readonly input,
.form-field.readonly textarea {
    pointer-events: none;
    opacity: 1;
    background-color: transparent;
    padding: 0;
    font-weight: 600;
    text-align: left;
}
not(.switchlabel) input:invalid, .switchlabel.labelup input:invalid {
    color: var(--red);
}
form fieldset {
    padding: 0;
    display: flex;
    margin: 10px;
    flex: 1 1 100px;
}
form fieldset > .form-field {
    padding: 0;
    margin: 0;
    flex: 2 1 50px;
    min-width: 0;
}
form fieldset > .form-field:last-of-type {
    flex: 1 1 25px;
}
form fieldset > .form-field:first-of-type input {
    border-radius: 5px 0px 0px 5px;
    border-right: none;
}
form fieldset > .form-field:last-of-type input {
    border-radius: 0px 5px 5px 0px;
    border-left: none;
}
div.formular form .form-label {
    display: none;
}
form .form-select-wrapper {
    position: relative;
}

form .switchlabel {
    position: relative;
    margin-top: 1rem;
}
form label {
    display: block;
}
form .switchlabel label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px calc(10px + 0.25 * var(--padding));
    transform: scale(1) translate(0,0);
    transform-origin: bottom left;
    transition: opacity .5s ease-in-out, transform .5s ease-in-out;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    line-height: 1.2;
}
form .switchlabel.labelup label {
    transform: scale(0.6) translate(0%,-160%);
    opacity: .5
}


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
    text-align: center;
    padding-left: calc(20px + 1rem);
    padding-right: calc(20px + 1rem);
}
.quantity-nav {
    position: absolute;
    width: 100%;
    height: 2.5em;
    bottom: 0;
    left: 0;
    pointer-events: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.quantity-nav .quantity-button {
    pointer-events: auto;
    color: rgba(var(--base-color-rgb), 1);
    width: auto;
    padding: 10px;
    cursor: pointer;
    opacity: 0.33;
    transition: opacity 0.5s ease-in;
}
input:hover + .quantity-nav .quantity-button {
    opacity: 0.7;
}
.quantity-nav .quantity-button:hover {
    opacity: 1;
}
.radio {
	display: block;
}
input[type='checkbox'],
input[type='radio'] {
  width:auto;
  float:left;
  margin-right: .75em;
  background:transparent;
  border:none;
}
input[type='checkbox']:checked,
input[type='checkbox']:not(:checked),
input[type='radio']:checked,
input[type='radio']:not(:checked) {
  background: transparent;
  position: relative;
  visibility: hidden;
  margin:0;
  padding:0;
}

input[type='checkbox'] + label,
input[type='radio'] + label {
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
div.formular input[type='checkbox'] + label,
div.formular input[type='radio'] + label {
    display: block !important;
}

input[type='checkbox']:not(.cm-app-label) + label:before,
input[type='checkbox']:not(.cm-app-label) + label:before,
input[type='radio'] + label::before {
    content: '';
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1rem;
    height:1rem;
    border-radius: 50%;
    position: relative;
    background-color: var(--blue-dark);
    background-image: url(../images/check.png);
    margin-right: 0.3em;
    background-size: 0%;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-size .2s ease-in;
    text-align: center;
    font-size: 1rem;
    line-height: 1.7em;
    text-indent: 0px;
    flex: 0 0 1rem;
}
input[type='checkbox']:checked  + label::before,
input[type='radio']:checked  + label::before {
    background-size: 85%;
}
.datasec label{
    font-size: 0.8rem;
}
#form-result > p {
    text-align: center;
}
#form-result > p > i {
    display: block;
    margin: 0 auto 0.5em;
    font-size: 3rem;
}
form .file-upload {
    background-color: rgba(var(--dark-rgb), .05);
    padding: var(--padding);
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: stretch
}
form .file-upload > * {
    flex: 1 1 100%
}
form input.hpt,
form input#files,
form input#uploadedfiles {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -100;
    visibility: hidden;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
}
#preview p {
    font-size: 0.8em;
    line-height: 1.2;
    margin: 0;
}
#preview p span {
    flex-flow: row
}
form label[for="files"] {
    opacity: 1;
    text-align: center;
}
form label[for="files"].uip {
    opacity: .6;
}
form label[for="files"].uip i:before {
    display: block;
    animation: spinning 1.2s infinite linear;
}
@keyframes spinning {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}
form #preview .deletebutton {
    opacity: .5;
    cursor: pointer;
    color: var(--red);
    transition: opacity .5s ease-in-out
}
form #preview .deletebutton:hover {
    opacity: 1
}