body {
	display: none;	
	margin: 0;
    -webkit-text-size-adjust: 100%;
}

.header1 {
	position:         sticky;
	top:              -1px; /* Find out why top:0 leaves a one pixel space above which will show 1 pixel line content scrolled behind the header*/ 
	padding-top:      1px;
/*	width:            calc(100% - 2* var(--FORM_CONTAINER_MARGIN));*/
	z-index:          25;
	background-color: var(--COLOR_CANVAS_PRIMARY);
}

.showHeader.header1 {
	display:         flex;
	justify-content: center;
}

.header1 .headerOpacityDiv {
    position:   absolute;
    width:      100%;
    height:     calc(100% - 1px); /*-1px: yet another effect of top -1px of header1*/
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.45);
    z-index:    20;
}

.messageDiv {
    display:          none;
  	padding-left:	  calc( var(--FORM_CONTAINER_PADDING) - (var(--ITEM_GAP) / 2));
  	padding-right:	  calc( var(--FORM_CONTAINER_PADDING) - (var(--ITEM_GAP) / 2));
  	max-width:        calc( var(--FORM_CONTAINER_MAX_WIDTH ) - (2 * (var(--FORM_CONTAINER_PADDING) - (var(--ITEM_GAP) / 2))));
  	width:            calc(100%  - ( 2 * var(--FORM_CONTAINER_PADDING)) + var(--ITEM_GAP) );
	align-self:       center;
   	background-color: var(--COLOR_FORM_CONTAINER);
}

.workSetDiv {
    position: relative;
}

.workSetDiv.noWizard {
    margin-bottom: 0;
}

.workSetDiv.popUp {
    margin-bottom: 0;
    top: 0;
}

.tableDiv {	
	height: calc(100% - 6px);	
    margin: 10px 20px;
}

.tableDivPopUp {
    margin: 10px 20px;  
    width: calc(100% - 40px);
}

.tableNoCaption {
}

.tableOverflow {
    -webkit-overflow-scrolling: touch;	
	overflow-x: auto;
}

.actionDiv {
    display: none;
    /*margin: 30px 2px -30px;*/
    padding-top: 95px;
    width: 100%;
}

.actionDiv.popUp {
    margin: 10px 20px -50px;
}

.controlParamsDiv {
	display:none;
}

.transparentDiv {
    background: none repeat scroll 0 0 transparent;
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

.load {
    background-color: #fff;
    border: 1px solid #94b494;
    border-radius: 8px;
    font-family: ARAGWalsheimMd,Helvetica,sans-serif;
    font-size: 80%;
    left: 50%;
    position: fixed;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    white-space: nowrap;
    padding: 5px 20px;
    display: flex;
    align-items: center;
    color: #94b494;
}

div.load > div.letter {
    animation-name: loadingF;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-direction: linear;
}

div.l-1 {animation-delay: .48s;}
div.l-2 {animation-delay: .6s;}
div.l-3 {animation-delay: .72s;}
div.l-4 {animation-delay: .84s;}
div.l-5 {animation-delay: .96s;}
div.l-6 {animation-delay: 1.08s;}
div.l-7 {animation-delay: 1.2s;}
div.l-8 {animation-delay: 1.32s;}
div.l-9 {animation-delay: 1.44s;}
div.l-10 {animation-delay: 1.56s;}

@keyframes loadingF {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.opacityDiv {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.45);
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 20;
}

.opacityDiv.popUp {
    z-index: 32;
}

.aboutDiv {
    background: url("../images/about.png") no-repeat scroll 0 0 transparent;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
    color: #ffffff;
    font-family: ARAGWalsheimMd,Helvetica,sans-serif;
    font-size: 10px;
    height: 350px;
    left: calc(50% - 175px);
    position: fixed;
    top: -400px;   
    transition: top 0.5s ease-out 0s;
    width: 350px;
    z-index: 30;
}

.aboutDiv a#close {
    background: transparent url("../images/close.png") no-repeat scroll 0 0;
    float: right;
    height: 20px;
    position: relative;
    right: 81px;
    text-decoration: none;
    top: 7px;
    width: 21px;
}

.aboutDiv div#userAgent {
	height: 38px;
	overflow: auto;
}

.aboutDiv table {
    margin: 10px;
    position: relative;
    top: 20px;    
    width: calc(100% - 20px);
}

.aboutDiv td {
    padding-left: 10px;
    vertical-align: 0;
}

.printDiv {
    background-color: #fff;
    border: 1px solid #666;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    margin: 0 20px;
    position: absolute;
    width: calc(100% - 40px);
    top: 85px;
    z-index: 35;
}

/******************** PopUpDiv ********************/

.popUpDiv { /* Ask for values for new layout */
	background-color: var(--COLOR_POPUP_BACKGROUND);
/*	border:           var(--POPUP_BORDER);
	border-radius:    var(--POPUP_BORDER_RADIUS);*/
/*	box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);*/
/*	height:           calc(100% - 105px);*/
    height:     100%;
	overflow:   hidden;
	position:   fixed;
    top:        50%;
    left:       50%;
    -webkit-transform: translate(-50%, -50%);
    transform:  translate(-50%, -50%);
    margin:     auto;
	opacity:    0;
    xtransition: top 0.5s ease-out 0s;
	transition: var(--HELPPOPUP_TRANSITION);
    width:      calc(100% - 40px);
    z-index:    30;
}
div.popUpWithoutClose > a#actionCloseTop {
    display: none;
}
.popUpDiv.popUpWithoutClose > div {
    top:        0px;
    height:     100%;
    margin-top: 0px;
}
.popUpDiv.popUpCentered.opened {
	opacity: 1;
}
.popUpDiv.popUpCentered {
	position:  fixed;
    top:       50%;
    left:      50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin:    auto;
	opacity:   0;
}
.popUpDiv.mobile.popUpCentered {
	position:   fixed;
	min-height: inherit;
}

/******************** HelpDiv ********************/
/* Commented out: alternate version of HelpDiv sizing, remove if active version works in all situations  
.helpDiv a#actionCloseTop {
    position:        absolute;
	top:             var(--HELPPOPUP_CLOSE_MARGIN_TOPRIGHT);
	right:           var(--HELPPOPUP_CLOSE_MARGIN_TOPRIGHT);
	height:          var(--HELPPOPUP_CLOSE_ICON_SIZE);
	width:           var(--HELPPOPUP_CLOSE_ICON_SIZE);
	background:      url("../images/close.svg") no-repeat scroll 0 0 transparent;
	text-decoration: none;
	z-index:         10;
}
.helpDiv > div { //No standard margin/padding around embedded iframe, since background color differs for some help-texts but shall always cover whole help-popup	
	xheight: 100%;
    margin: 0;
    width:  100%;
}
.helpDiv > div > iframe, .helpDiv > div > object {
    xheight: 100%;
    width:  100%;
}
.helpDiv.opened {
    opacity: 1;
}
.helpDiv.mobile > div {
    -webkit-overflow-scrolling: touch;
  	overflow-y: scroll;
}
.helpDiv {
    margin: 0 20px;
    position: absolute;
    width: calc(100% - 40px);
    top: 85px;
    z-index: 35;
}

.helpDiv {
	opacity: 0;
    transition: opacity 0.5s;
}
*/



.helpDiv > div {	
	height: calc(100%);
    width: calc(100%);
}

.helpDiv > div > iframe, .helpDiv > div > object {
    height: 100%;
    position: absolute;
    width: 100%;
}

.helpDiv a#actionCloseTop {
    position:        absolute;
	top:             var(--HELPPOPUP_CLOSE_MARGIN_TOPRIGHT);
	right:           var(--HELPPOPUP_CLOSE_MARGIN_TOPRIGHT);
	height:          var(--HELPPOPUP_CLOSE_ICON_SIZE);
	width:           var(--HELPPOPUP_CLOSE_ICON_SIZE);
	background:      url("../images/close.svg") no-repeat scroll 0 0 transparent;
	text-decoration: none;
	z-index:         10;
}

/* permanent focus since return, enter and space keys always closes the iframe independent of the focus */
.helpDiv a#actionCloseTop {
	box-shadow: var(--FIELD_BOXSHADOW_FOCUS);
}

.helpDiv.opened {
    opacity: 1;
}
.helpDiv.mobile > div {
    -webkit-overflow-scrolling: touch;
  	overflow-y: scroll;
}
.helpDiv {
    position:  fixed;
	top:       50%;
	left:      50%;
	transform: translate(-50%, -50%);
	margin:    0 0;
    width:     var(--HELPPOPUP_WIDTH);
    max-width: var(--HELPPOPUP_MAX_WIDTH);
    z-index:   35;
}
.helpDiv {
	opacity: 0;
    transition: opacity 0.5s;
}







.printDiv > iframe, .popUpDiv > div, .printDiv > object {	
	height: calc(100% - 60px);
    margin: 10px;
    position: absolute;
    top: 40px;
    width: calc(100% - 20px);
}

.popUpDiv > div > iframe, .popUpDiv > div > object {
    height: 100%;
    position: absolute;
    width: 100%;
}


.printDiv a#actionCloseTop, .popUpDiv a#actionCloseTop {
    background: url("../images/close.svg") no-repeat scroll 0 0 transparent;
    float: right;
    height: 20px;
    position: relative;
    right: 20px;
    text-decoration: none;
    top: 20px;
    width: 21px;
}

.aboutDiv.opened {
    top: 85px; /* Change to position:fixed, top:50%, translate(0, -50%), but this only seems to work on non-mobile? */
}

.popUpDiv.opened {
    xtop: 85px; /* Change to position:fixed, top:50%, translate(0, -50%), but this only seems to work on non-mobile? */
}

.popUpDiv.mobile {
	xposition: absolute;
	xmin-height: 600px;
}

.popUpDiv.mobile.opened {
	xposition: absolute;
	xtop: 80px; /* Change to position:fixed, top:50%, translate(0, -50%), but this only seems to work on non-mobile? */
}

.container {
   	display:          flex;
   	flex-wrap:        wrap;
  	padding-left:	  calc( var(--FORM_CONTAINER_PADDING) - (var(--ITEM_GAP) / 2));
  	padding-right:	  calc( var(--FORM_CONTAINER_PADDING) - (var(--ITEM_GAP) / 2));
/*  	max-width:        calc( var(--FORM_CONTAINER_MAX_WIDTH ) - (2 * (var(--FORM_CONTAINER_PADDING) - (var(--ITEM_GAP) / 2))));
  	width:            calc(100%  - ( 2 * var(--FORM_CONTAINER_PADDING)) + var(--ITEM_GAP) );
	align-self:       center; */
/*   	background-color: var(--COLOR_FORM_CONTAINER);*/
}

.controlContainer {
   	display: flex;
   	flex-wrap: wrap;
}

/*div.container > div.item > div.control:nth-child(2n+1) {
	margin-left: 10px;
	margin-right: 5px;
}

.container > .item:nth-child(2n+1) > .control {
	margin-left: 10px;
	margin-right: 5px;
}

.control.disabled {
	background-color: #dfe8df;
}

div.container.H1Container> div.item > div.control {
	padding-right: 0px;
	margin-right: 0px;
}

div.container.H1Container> div.item > div.control:nth-child(2n+1) {
	margin-left: 10px;
	margin-right: 0px;
}

div.container.H1Container> div.item > div.control:nth-child(2n) {
	margin-left: 5px;
}*/

.item {
 	flex: 0 1 auto;
    min-width: calc(50% - var(--ITEM_GAP));
    max-width: calc(50% - var(--ITEM_GAP));
    width:     calc(50% - var(--ITEM_GAP));
}

.itemFull {
 	flex: 0 1 100%;
/* 	min-width: 100%; */
}
.itemFullMaxWidth {
	max-width: calc(100% - var(--ITEM_GAP));
}

.item, .itemFull {
	margin-top:    var(--FORM_FIELD_ROW_GAP);
	padding-left:  calc( var(--ITEM_GAP) / 2);
	padding-right: calc( var(--ITEM_GAP) / 2);
}

.itemCenter {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	min-width: 100%;
}

.itemSub {
    padding-top: 1px;
}

/*.labelClass {
}*/

/*.labelClass.radio2 {
	color: #000;	
    font-family: ARAGWalsheimMd,Helvetica,sans-serif;
    font-size: 16px;	
    text-align: center;
    padding: 10px 20px;
    margin-top: 20px;
    width: 100%;
}*/

.labelClass input {	
	margin: 0 3px;		
}

.labelClass label a {	
    color: #000;
}

.topLabelClass {
    color: #000;
    font-family: ARAGWalsheimMd,Helvetica,sans-serif;
    font-size: 15px;
    padding: 10px 20px;
}

.labelRadioClass {
    color: #000;
    font-family: ARAGWalsheimMd,Helvetica,sans-serif;
    font-size: 15px;
    padding: 0 20px 0;
    text-align: center;
    white-space: nowrap;					
}


/******************** Info (used for FieldMapping without mapable and target) ********************/

.infoClass {
    font:            var(--FONT_INFO);
	letter-spacing:  var(--FONT_INFO_LETTERSPACING);
	color:           var(--COLOR_INFO);
}



.layerEndClass {
	display: none;
}

.commentClass {
	color: #000;	
    font-family: ARAGWalsheimMd,Helvetica,sans-serif;
    font-size: 15px;	
}

.commentClass a {	
    background: url("../images/link.gif") no-repeat scroll 0 center transparent;
    color: black;
	font-weight: bold;    
    padding-left: 10px;
    text-decoration: none;
}

.commentClass a:hover {
    text-decoration: underline;
}

.commentClass.reference {
    background-color: #dfe8df;
    border: 1px solid #94b494;
    margin: 10px 20px;
    padding: 20px 10px;    
}

.helpClass {
    display: flex;
    font-family: ARAGWalsheimMd,Helvetica,sans-serif;
    font-size: 15px;
    font-weight: bold;
}

.helpClass > a {
    background: url("../images/helplnk.png") no-repeat scroll 0 0 transparent;
    color: #000;
    min-height: 32px;
    padding-left: 50px;
    padding-top: 5px;
    text-decoration: none;
}

.resultClass, .resultSumClass {
	color: #000;	
    font-family: ARAGWalsheimMd,Helvetica,sans-serif;
    font-size: 13px;	
    padding: 8px 10px;
    text-align: right;
}

.resultSumClass {
	font-weight: bold;
}

.textAlignRight {
	text-align: right;
}

.dataClass {	  
/*    box-sizing: border-box;
    display: table;
    padding: 10px 8px;
    position: relative;
    background-color: #fff;
    border: 1px solid #d8d8d8;
    box-shadow: 0 1px 2px 0px rgba(0,0,0,0.25);
    margin-bottom: 5px;
  	margin-right: 5px;
  	width: 100%;*/
}

/* ********************* Captcha1 ****************************/

.labelClass.captcha1 { /* make control and move to controls.css */
	display:         flex;
	justify-content: center;
    font:            var(--FONT_CAPTCHA1_LABEL);
	letter-spacing:  var(--FONT_CAPTCHA1_LABEL_LETTERSPACING);
	color:           var(--COLOR_CAPTCHA1_LABEL);
}
.data.captcha1 { /* make control and move to controls.css */
	display:         flex;
	justify-content: center;
	margin-top:      var(--CAPTCHA1_LABEL_TO_CAPTCHA_GAP);
}
.data.captcha1 > div { /*reset justify-content again, otherwise captcha image popup will be shifted to the right and thus the "done" button is cut off*/
		justify-content: left;
}	

@media (max-width: 767px) {
	div > .pagination {
		padding-left:  20px;
    	padding-right: 20px;	
	}
}


.dataClass > .fieldHelpClass {
    height: 40px;
    margin: 10px 0 0 -40px;
    position: relative;
    width: 40px;
}

.inputClass,
.inputTextClass,
.inputIntegerClass,
.inputDecimalClass,
.inputDateAndTimeClass,
.inputTimeClass { 
	border: medium none;
    color: #4c4c4c;
    font-family: ARAGWalsheimMd,Helvetica,sans-serif;
    font-size: 15px;
    width: 100%;
    
    appearance: none;
	-moz-appearance: none; /* Firefox */
	-webkit-appearance: none; /* Safari and Chrome */
	background-color: white;
}

.inputDisabledClass {
    background-color: #dfe8df;
    font-family: ARAGWalsheimMd,Helvetica,sans-serif;
    font-size: 15px;
}

.inputTextClass {
    resize: none;
    white-space: pre-line;
   	overflow: hidden;
}

.inputTextDisabledClass {
    background-color: #dfe8df;
    border: 1px solid #d8d8d8;
    box-shadow: 0 1px 3px #d8d8d8;
    color: #4c4c4c;
    font-family: ARAGWalsheimMd,Helvetica,sans-serif;
    font-size: 16px;
    height: 38px;
    padding: 10px;
    resize: none;
    white-space: pre-line;
    width: calc(100% - 20px);
    overflow: hidden;
}

.inputTextList {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}

.inputTextDisabledList {
    background: transparent none repeat scroll 0 0;
    border: medium none;
    box-sizing: border-box;
    cursor: pointer;
    width: 100%;
    overflow: hidden;
}

.labelDataArray {
	padding: 0 3px;	
}

.dataArray {
	background-color: #F5F5F5;
	padding: 0 3px;
}



.popUpAction {
	padding-top:8px;
	float:right;		
}

.popUpAction input, 
.popUpAction a {
	margin-left:4px;		
}

.popUpAction a {
	font-family:Arial,sans-serif;
	color:#000000;	
	font-size:12px;
	white-space:nowrap;	 
	text-decoration:none;
	padding:2px 20px 0 0;		
}

.fieldHelpClass {
    background:      url("../images/info.svg") no-repeat scroll center center transparent;
    display:         inline-block;
	min-width:       var(--FIELD_HELP_SIZE);
	width:           var(--FIELD_HELP_SIZE);
	height:          var(--FIELD_HELP_SIZE);
    background-size: var(--FIELD_HELP_SIZE);
    text-decoration: none;
    cursor:          pointer;
}

.OBJECTTYPE_ANTRAG {
	background:transparent url(../images/ANTRAG.gif) no-repeat scroll center center;
	padding: 0 0 0px 16px;
	text-decoration:none;
}

.OBJECTTYPE_UNKNOWN {
	background:transparent url(../images/link.gif) no-repeat scroll center center;
	padding: 0 0 0px 16px;
	text-decoration:none;
}

.noBorder {
	border: 0 none;
}