#wrap1 {
/*	background: none repeat scroll 0 0 white;
	border: 1px solid #ddd;
	box-shadow: none;
	margin: 0 auto; */
/*	max-width: 1024px; */
	min-width:       var(--WINDOW_MIN_WIDTH);
}

#wrap2 {
   border:         medium none;
    margin-top:    0;
    margin-bottom: 0;
/*    max-width: calc(100% - 30px);
	margin-left:   var(--FORM_CONTAINER_MARGIN);
    margin-right:  var(--FORM_CONTAINER_MARGIN);*/
}

#wrap2::after {
   content: "";
}

#wrap1.popUp > #wrap2:after, #wrap1.noWizard > #wrap2:after {
    content: "";
}

#syncForm {
	display:        flex;
	flex-direction: column;
    margin-left:    var(--FORM_CONTAINER_MARGIN);
    margin-right:   var(--FORM_CONTAINER_MARGIN);
}

.headline {
    font: var(--FONT_PAGE_HEADER);
}


.workSetDiv, .workSetDiv.noWizard {
	display:          flex;
    flex-direction:   column;
	width:            100%;
	align-self:       center;
    background-color: var(--COLOR_FORM_CONTAINER);
    max-width:        calc(var(--FORM_CONTAINER_MAX_WIDTH));
/* W\E4 re zum Zentrieren der container, aber dann ist dort teilweise die Breite nicht so wie berechnet
   display: flex;
   flex-direction: column;
   align-items: center;
   */
}

/******************** Messages below header ********************/

div.messageDiv > div {
    display:        flex;
    flex-direction: row;
    gap:            var(--HINT1_ICON_TO_LABEL_GAP);
    padding:        var(--HINT1_PADDING);
    background:     var(--COLOR_HINT1_BACKGROUND);
    word-break:     break-word;
}
div.messageDiv > div > ul {
	display:              block;
	font:                 var(--FONT_HINT1_TEXT);
	letter-spacing:       var(--FONT_HINT1_TEXT_LETTERSPACING);
	margin-block-start:   0;
    margin-block-end:     0;
    padding-inline-start: 0;
}
div.messageDiv > div > div:first-of-type {
	min-width:      var(--HINT1_ICON_BACKGROUND_SIZE);
	height:         var(--HINT1_ICON_BACKGROUND_SIZE);
	border-radius:  50%;
}
div.messageDiv > div.infoMessage {
    border-left: var(--HINT1_INFO_BORDER);
    color:       var(--COLOR_HINT1_INFO_LABEL);
}
div.messageDiv > div.errorMessage {
    border-left: var(--HINT1_WARNING_BORDER);
    color:       var(--COLOR_HINT1_WARNING_LABEL);
}
div.messageDiv > div.infoMessage > div:first-of-type {
    background:  url("../images/alert.svg") no-repeat scroll center center var(--COLOR_HINT1_ICON_BACKGROUND);
}
div.messageDiv > div.errorMessage > div:first-of-type {
    background:  url("../images/attention_white.svg") no-repeat scroll center center var(--COLOR_HINT1_WARNING_ICON_BACKGROUND);
}
.messageDiv ul li {
    list-style-type: none;
}
.messageType {
/*    display: none;*/
}


.controlMessage {
	margin-top:     var(--FIELD_ERROR_MESSAGE_GAP);
	padding-left:   calc( var(--FIELD_ERROR_MESSAGE_ICON_WIDTH) + var(--FIELD_ERROR_MESSAGE_ICON_TEXT_GAP) );
	background:     url("../images/attention.svg") no-repeat scroll 0 center transparent;
	font:           var(--FONT_ERROR_MESSAGE);
	letter-spacing: var(--FONT_ERROR_MESSAGE_LETTER_SPACING);
	color:          var(--COLOR_TEXT_WARNING);
	overflow: hidden;
}


.navigationDiv {
	margin-top: 	var(--NAVIGATION_MARGIN_TOP);
}
@media (max-width: 767px) {
	div.navigationDiv:not(:first-of-type) {
		margin-top: var(--FORM_FIELD_ROW_GAP); /* if single-column-displaystyle, back/forward buttons are below each other, and distance between two buttons should not be the distance of the whole navigation block to rest of page as in two-column-displaystyle*/ 
	}
}


#privacyDiv {
	margin-top: 	var(--PRIVACY_MARGIN_TOP);
}

#footerDiv {
	display:          flex;
    justify-content:  center;
    margin-top:       var(--FORM_TO_FOOTER_GAP);    
	z-index:          25;
	background-color: var(--COLOR_CANVAS_PRIMARY);
}
.footerDiv {	
	display:        flex;
	width:          100%;
	max-width:      var(--FOOTER_MAX_WIDTH);
	padding-left:   var(--FOOTER_HORIZONTAL_PADDING);
	padding-right:  var(--FOOTER_HORIZONTAL_PADDING);
	flex-direction: row;
    gap:            var(--FOOTER_COLUMNS_GAP);
	font:           var(--FONT_FOOTER);
	letter-spacing: var(--FONT_FOOTER_LETTER_SPACING);
	padding-bottom: 5px;
}
.footerDiv.noWizard {
}
.footerDiv > a {
    vertical-align: middle;			
    cursor:         pointer;  
    
    padding-top: var(--FOOTER_LABEL_VERTICAL_PAD); 
    padding-bottom: var(--FOOTER_LABEL_VERTICAL_PAD); 
	box-shadow: var(--FOOTER_BOXSHADOW); 
	transition: var(--TRANSITION_FADE_BORDER);

    font: var(--FONT_FOOTER);
    letter-spacing: var(--FONT_FOOTER_LETTERSPACING);
    color: var(--COLOR_FOOTER);
}
.footerDiv > a:focus {
  	box-shadow:     var(--FOOTER_BOXSHADOW_FOCUS);
}
.footerDiv > a:hover {	
  	box-shadow:     var(--FOOTER_BOXSHADOW_HOVER);
	cursor: pointer;
}
.footerDiv > span {
    vertical-align: middle;			
    margin-left:    auto;
    margin-right:   0;
    cursor:         pointer;
}

/* actions in actionDiv, not displayed at the moment but rerendered as Buttons in worksetDiv
#backwardAction {
    background: #f9ec43;
    border: 1px solid #e9c000;
    box-sizing: border-box;
    color: #000;
    float: left;   
    padding: 8px 25px;
    text-decoration: none;
    white-space: nowrap;
    display: flex;
}

#forwardAction {
    background: #f9ec43;
    border: 1px solid #e9c000;
    box-sizing: border-box;
    color: #000;
    float: right;   
    padding: 8px 25px;
    text-decoration: none;
    white-space: nowrap;
    display: flex;
}
*/

/******************** Amount (should be made a control and then placed in controls.js) ********************/

.amount {
/*    border: 10px solid #f9ec42;
    box-sizing: border-box;
    font-family: ARAGWalsheimMd,Helvetica,sans-serif;
    font-size: 16px;
    margin: 30px 20px 0;
    padding: 0 30px 30px;    
    width: calc(100% - 40px); */
}

.amount > div:first-child {
	margin-top:     var(--FORM_SECTION_HEADER_IN_ITEM_MARGIN_TOP); /* Control not implemented via no-label and real section header above, since this would produce the item-spacing between header and rows, but no spacing is (breaking the generell grid rule) defined here */ 
	font:           var(--FONT_AMOUNT_TITLE);
    letter-spacing: var(--FONT_AMOUNT_TITLE_LETTER_SPACING);
}

.amount > div:last-child {
    display: table;
    width:   100%;
}

.amount > div:last-child > div {
    display: table-row;
}

.amount > div:last-child > div > div {
	display:        table-cell;
    position:       relative; /* Added for css after trick for euro, see there; remove once css after trick some lines below was removed */
    padding-top:    var(--SPACE_6);
	padding-bottom: var(--SPACE_6);
	padding-left:   0;
/*	padding-right:  var(--SPACE_4);*/
	padding-right:  calc( var(--SPACE_4) + 16px ); /* Added for css after trick for euro, see there; remove and use line above once css after trick some lines below was removed */
    vertical-align: middle;    
	box-shadow:     var(--AMOUNT_BORDER_TEXT_SECONDARY);
    font:           var(--FONT_AMOUNT_ITEM);
	letter-spacing: var(--FONT_AMOUNT_ITEM_LETTER_SPACING);
}

.amount > div:last-child > div:last-child > div {
    font:           var(--FONT_COPY_STRONG);
	letter-spacing: var(--FONT_COPY_STRONG_LETTER_SPACING);
	box-shadow:     var(--AMOUNT_BORDER_TEXT_PRIMARY);
}

.amount > div:last-child > div > div:last-child {
    text-align: right;
}
.amount > div:last-child > div > div:last-child:after {
    text-align:   right;
	content:      " \20AC";    
    position:     absolute; /* Next three lines only necessary so Euro-sign does not break into next line in smaller resultions with 2-line row text; when amount control is made a real control instead of rendering in runner, do not use "css after" but render Euro sign as part of price label text */ 
    padding-left:  8px;
    right:        19px;
}


.helpClass > a > label {
    cursor: pointer;
}

@media (max-width: 960px) {

#wrap2 {
    margin: 0;    
/*    width: calc(100% - 3px);*/
}	
	
}

@media (max-width: 767px) {
	
.item {
 	flex: 0 1 100%;
 	min-width: 100%;
}

/* Not used?
div.paginationNumber > span {
    display: none;
	
}
*/

}