:root {
  --AFbuttons: #025bf2;   
  --AFborders: #a9a9a9;
  --AFbackground: #f8f8f8;
  --AFvalid: green;
  --AFinvalid: red;
  --AFbgvalid: #eefff8;
  --AFbginvalid: #ffeeee; 
  --AFdisabled: #dddddd; 
}

/*mine*/
fieldset { margin:0;padding:0;border:0;box-sizing: border-box;  }
section { margin:0;padding:0;border:0 }

/* needed basic: */

.AF em { color: var(--AFinvalid); font-size:small; padding:0; height:0px; line-height:1rem; margin:0 5px 2px 0; font-size:86%; display:none }
.AF em.active { color: var(--AFinvalid); height:auto; display:inline-block;   }
.AF .invalid { background-color: var(--AFbginvalid) }
.AF .valid { background: var(--AFbgvalid) }
.AF input:disabled, .AF select:disabled, .AF textarea:disabled { background-color: var(--AFdisabled); }
.AF input.valid:disabled, .AF select.valid:disabled, .AF textarea.valid:disabled { background-color: var(--AFdisabled); }
.AF .readonly { background-color: var(--AFdisabled); }
.AF select.fokus { box-shadow: 0px 0px 0px 2px var(--AFinvalid)  } 
.AF input[type=text].fokus, .AF textarea.fokus { border-color: var(--AFinvalid)  }
.AF fieldset.fokus { border: 1px solid var(--AFinvalid)  }

/*69*/
.AF input,
.AF select,
.AF textarea,
.AF toggle,
.AF button {
	position: relative;
	display: block;
}

.AF { background-color: transparent; }

.AF input,
.AF select,
.AF textarea,
.AF fieldset {
	display: block;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: auto;
    width: 100%;
    font-size: 1rem;
	padding: 8px 10px;
	outline: none;
    border-width: 2px;
    border-style: solid;
    border-color: var(--AFborders);
	border-radius: 0;
	appearance: normal;
	/*-moz-appearance: none;
	-webkit-appearance: none;*/
}
.AF select { padding:6px 6px }
.AF option:first-child, .AF input::placeholder {opacity: .5; }

.AF input[type=number]   { width:6em } /* or type=text pattern='[0-9]{1,3}' */
.AF input[type=radio]    { min-height:auto; display:inline; } 
.AF input[type=checkbox] { min-height:auto; display:inline; }

.AF input.icon      { padding-left: 44px; background-repeat:no-repeat; background-position: 5px center; background-size: auto 100%; }
.AF input.icon.user      { background-image: url(https://cms.cliqbook.de/img/fa/user.66.png); }
.AF input.icon.lock      { background-image: url(https://cms.cliqbook.de/img/fa/lock.66.png); }
.AF input.icon.envelope  { background-image: url(https://cms.cliqbook.de/img/fa/envelope.66.png); }
.AF input.icon.search    { background-image: url(https://cms.cliqbook.de/img/fa/search.66.png); }
.AF input.icon.euro      { background-image: url(https://cms.cliqbook.de/img/fa/euro.66.png); }

.AF input[type=checkbox] { 
    box-shadow: 0px 0px 0px 9px var(--AFbuttons); 
    opacity:.5; 
    height:auto; 
    width:auto; 
    margin:11px; margin-right:22px;  
	-ms-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-webkit-transition: opacity 0.2s; 
}
.AF input[type=checkbox]:checked    { opacity:1; }
.AF input[type=checkbox]:hover      { opacity:1; }
.AF input[type=checkbox].invalid    { box-shadow: 0px 0px 0px 9px var(--AFinvalid)  }
.AF input[type=checkbox].valid      { box-shadow: 0px 0px 0px 9px var(--AFbuttons) }
.AF input[type=checkbox].fokus      { opacity:1; box-shadow: 0px 0px 0px 9px var(--AFinvalid)  }

.AF input[type=radio] { 
    box-shadow: 0px 0px 0px 9px var(--AFbuttons); 
    opacity:.5; 
    height:auto; 
    width:auto; 
    margin:5px; margin-right:16px; 
	-ms-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-webkit-transition: opacity 0.2s; 
}

.AF input[type=radio]:checked   { opacity:1; }
.AF input[type=radio]:hover     { opacity:1; }
.AF input[type=radio]:invalid   { box-shadow: 0px 0px 0px 9px var(--AFinvalid) }
.AF input[type=radio]:valid     { box-shadow: 0px 0px 0px 9px var(--AFbuttons) }
.AF input[type=radio]:fokus     { opacity:1; box-shadow: 0px 0px 0px 9px var(--AFinvalid) }

/*388*/
.AF button, .AF button[type=submit], .AF input[type=submit] { 
	float: right;
    width: auto;
    height: auto;    
	min-height: 37px;
    font-size: 1rem;
	overflow: hidden;    
	margin: 15px;
	padding: 9px 29px;
	outline: none;
	border: 0;
    border-radius: 5px;
    box-shadow: none;    
	text-decoration: none;
	color: #ffffff;
    background-color: var(--AFbuttons);
    opacity: 0.7;
	cursor: pointer;
    transition: opacity 0.2s;
	-ms-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-webkit-transition: opacity 0.2s;
}
/*738*/
.AF button:hover {
	opacity: 1;
}

.AF label { display:inline-block; opacity:1; padding:3px 12px }

/*MY FLEXBOX PROJECT*/

.BX.form { background-color: var(--AFbackground); padding:15px; border:1px solid var(--AFborders); }

.BX .flex { display:flex; flex-wrap: wrap; width:auto; margin:0; padding:0; vertical-align:baseline; background-color:transparent }

.BX .flex > div {
	/*background-color: paleturquoise;*/
    display:inline-block;
    float: left;
	min-height: 1px;
    padding-right: 15px;
    padding-bottom: 5px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.BX .flex > div.z {  padding-right: 0; }

.BX .flex.c1 > div {  width:100%; }
.BX .flex.c2 > div {  width:50%; }
.BX .flex.c3 > div {  width:33.33%; }
.BX .flex.c4 > div {  width:25%; }

.BX .flex > div.c1 {  width:100%; padding-right: 0; }
.BX .flex > div.c2 {  width:50%; }
.BX .flex > div.c3 {  width:33.33%; }
.BX .flex > div.c4 {  width:25%; }

.BX .flex > div.c66 {  width:66.67%; }
.BX .flex > div.c75 {  width:75.00%; }
.BX .flex > div.c83 {  width:83.33%; }
.BX .flex > div.c91 {  width:91.66%; }

.BX .flex > div.c8  {  width: 8.33%; }
.BX .flex > div.c16 {  width:16.66%; }
.BX .flex > div.c41 {  width:41.66%; }
.BX .flex > div.c58 {  width:58.33%; }


/*.AF .flex.box2 > div:nth-child(odd) {  padding-left:0 }
.AF .flex.box2 > div:nth-child(even) {  padding-right:0 }*/

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

.BX .flex {  }
.BX .flex.m > div { width: 100%; padding-right:0 }
.AF button, .AF button[type=submit], .AF input[type=submit] {
	float: none;
}

}