/********************************************** 
form-2.14
**********************************************/

	:root {
		--form-input-minwidth-height: 65px;
		--form-border-radius: 0px;
		--form-label-width: 200px;
		--form-border: solid 1px #fff;
		--form-error-color: 235, 4, 0;
		--form-warning-color: 255, 140, 22;
		--form-completed-color: 93, 179, 37;
		--form-info-color: 74, 144, 226;
		--form-font-size-small: 0.875em;
		--form-line-height: 1.3em;
		--form-icon-color: #aaa;
		--form-tranistion: box-shadow .3s ease-in-out, border-color .15s ease-in-out;
		/* --form-border-focus: #751c71; */
		--form-box-shadow-focus: 0 4px 2px -2px #751c71;
	}

	.formV2 																											{font-size: 16px; /* minimum font-size should be 16px for mobile */;}
	.formV2 .formItemLabelValue, .formV2 .partFormControlAddress .partButton 											{color: #751c71;}
	.formV2 .formItemContainerLabel .formItemLabelRequired, .formV2 .additionalDescription, .formV2 .labelTooltipLabel  {color: #666;}
	.formV2 input, .formV2 textarea, .formV2 .inputReplacer, .formV2 .formControlIcon, .partUpload .uploadSelect, .formV2 .formControlUnit 		{background-color: #fff;}
	
	/* margins & paddings */
	.formV2 .formItemContainer                                			{margin-bottom: 30px; min-height: var(--form-input-minwidth-height);} /* margin between inputs */
	.formV2 input, .formV2 .formControlUnit 							{height: var(--form-input-minwidth-height);}
	.formV2 textarea                                                 	{padding-top:1.6em; padding-bottom: 1.6em; height: calc(var(--form-input-minwidth-height) * 3);} 
	.formV2 input, .formV2 .formControlUnit, .formControlMessageContainer, .formV2 textarea  {padding-left: 1.5em; padding-right: 1.5em;}

	/* aligning */
	.formV2 .formItemContainerLabel, .formV2 .inputReadonly, .formV2 .textareaReadonly, .formV2 .selectReadonly, .formV2 .partFormControlAddress .partButton, .formV2 .readonly .formControlIcon {margin-top: 8px;}
	.formV2 .inputLabel												{margin-top: 8px;}
	.formV2 .inputReplacer 											{margin-top: 7px;}
	.formV2 .inputImage  											{margin-top: 5px;}
	.formV2 .formControlMessageIcon 								{margin-top: 2.5px;}

	/* border radius checkbox */
	.formV2 .inputReplacer 											{border-radius: 2px;}

	/* placeholder */
	.formV2 input::placeholder, .formV2 textarea::placeholder   					{color:#aaa;}

	/* radio & checkbox */

		/* radio color */
		.formV2 input[type="radio"]:checked + label .inputReplacer 					{border-color: #000;}
		.formV2 input[type="radio"] + label .inputReplacer:after  					{background-color: #000;} 

		/* checkbox color */
		.formV2 input[type="checkbox"]:checked + label .inputReplacer 				{border-color: #000;}
		.formV2 input[type="checkbox"] + label .inputReplacer svg 					{fill: #000;}

	/* border */
	.formV2 .formControlIcon,
	.formV2 .formControlFeedback > input, 
	.formV2 .formControlFeedback .formControlDateTimeMobile > input,	
	.formV2 .partFormControlTextarea textarea,	
	.formV2 .formControlUnit,
	.formV2 .inputReplacer,
	.formV2 .inputImage,
	.popperInputTextAutoComplete
	{
		border: var(--form-border);
	}

	/* focus */
	.formV2 .formControlFeedback > input:focus,
	.formV2 .partFormControlTextarea textarea:focus,
	.formV2 input[type="radio"]:focus + label .inputReplacer,
	.formV2 input[type="checkbox"]:focus + label .inputReplacer,
	.formV2 .tagListAddContainer .buttonTagItemAdd:focus,
	.formV2 .partFormControlAddress .partButton:focus,
	.formV2 .inputLabel a:focus
	{
		/* border-color: var(--form-border-focus); */
		box-shadow: var(--form-box-shadow-focus);
		transition: var(--form-tranistion);
	}

        /* popperInputTextAutoComplete */
	.popperInputTextAutoComplete ul 										{max-height: 240px;} /* 6,5 x height of li */
	.popperInputTextAutoComplete ul .partLoadingAnimation 					{height:36px;}
	.popperInputTextAutoComplete ul li										{padding:0.5em 0.5em;}
	.popperInputTextAutoComplete ul li:not(:first-child) 					{border-top: solid 1px rgba(0,0,0,0.15);}
	.popperInputTextAutoComplete ul li:hover, .popperInputTextAutoComplete ul li.focus {background-color: rgba(0,0,0,0.05); color: #000;}

	/* force 100% width on input */
	/* .formV2 .partFormControlInputText input:not(.inputFullWidth) {width: 100vw!important;} */

/********************************************** 
Fundementals
**********************************************/

.formV2                                             		{position: relative; /* needed for formInitialsContainer */}

	/* initials hack */
	.formV2 .formInitialsContainer 								{position: absolute; bottom: 0; right:0; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); white-space: nowrap;}

	/* combined container for mulitple formItemContainer instances */
	.formV2 .formControlCombinedContainer 						{display: flex; align-items: flex-start;}
		.formV2 .formControlCombinedContainer .formItemContainer 	{margin-right: 0.75em; min-width: 0; /* hack to prevent the formItemContainer to grow */;}
		.formV2 .formControlCombinedContainer .formItemContainer:last-child {margin-right: 0;} 

	/* ajax container */
	.formV2 .formControlDynamicContainer 						{margin-left: 0.8em; padding-left: 1em; border-left: solid 0.2em rgba(0,0,0,.1);}
		.formV2 .formControlDynamicContainer .formItemContainerLabel 	{width: calc(var(--form-label-width) - 2em); /* -form-label-width minus margin-left, padding-left and border-left */}
		.formV2 .formControlDynamicContainer .formItemContainerContent  {width: calc(100% - var(--form-label-width) + 2em);}

		/* row for every form item */
		.formV2 .formItemContainer                            	{display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end;}
		.formV2 .partFormControlButtonSubmit.formItemContainer  {margin-bottom: 0;}

		 	/* container for showing label data left */
			.formV2 .formItemContainerLabel                           	 		{width: var(--form-label-width); padding-right: 1em;} /* width of labels */

				/* label value and required */
				.formV2 .formItemContainerLabel label               		{display: inline-block; margin-bottom: 0.25em;}
					.formV2 .formItemContainerLabel label span 					{display: inline; vertical-align: middle; line-height: var(--form-line-height);}
							
					/* value */
					.formV2 .formItemContainerLabel .formItemLabelValue         {word-break: break-word;}
					
					/* required */
					.formV2 .formItemContainerLabel .formItemLabelRequired      {}
						.formV2 .formItemContainerLabel .formItemLabelRequired.required {}
						.formV2 .formItemContainerLabel .formItemLabelRequired.optional {font-size: var(--form-font-size-small);}
							.formV2 .formItemContainerLabel .formItemLabelRequired.optional:before 	{content: '(';}
							.formV2 .formItemContainerLabel .formItemLabelRequired.optional:after 	{content: ')';}

						/* icon */
						.formV2 .formItemContainerLabel .formItemLabelIcon 								{height:1.2em; width: 1.2em; background-color: rgba(0,0,0,0.05); display: inline-flex; justify-content: center; align-items: center; border-radius: var(--form-border-radius);}
							.formV2 .formItemContainerLabel .formItemLabelIcon svg  						{flex: 1 1 auto; max-height: 0.8em; max-width: 0.8em;}

				/* additional description */
				.formV2 .additionalDescription 	  							{margin-bottom: 0.25em; font-size: var(--form-font-size-small); line-height: var(--form-line-height); display: block;}
				.formV2 .formItemContainerLabel .additionalDescription 		{}
				.formV2 .formItemContainerContent .additionalDescription 	{margin-top: 0.3em;}

				/* tooltip */
				.formV2 .formItemContainerLabel .formItemLabelTooltip 							{display: flex; align-items: center; margin-bottom: 0.25em;}
					.formV2 .labelTooltipIcon  																{height:1em; width: 1em; margin-right: 0.25em; display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; border:solid 1px #777}
						.formV2 .labelTooltipIcon svg  															{flex: 1 1 auto; max-height: 0.6em; max-width: 0.6em; fill:#777;}
					.formV2 .labelTooltipLabel 														{font-size: var(--form-font-size-small); line-height: var(--form-line-height);}
					.formV2 .formItemContainerLabel .formItemLabelTooltip:hover .labelTooltipLabel 	{text-decoration: underline;}

						/* apply this to add a tooltip function */
						.formV2 [data-formTooltip]															{position:relative;}
						
						/* tooltip cloud */  
						.formV2 [data-formTooltip]:after 													{content: attr(data-formTooltip); font-size: var(--form-font-size-small); min-width: var(--form-label-width); line-height: var(--form-line-height); text-align: left; position: absolute; top:100%; left:-1em; margin-top:6px; transform: translateY(0%); background: rgba(0,0,0,0.9); color: #fff; border-radius: var(--form-border-radius); pointer-events: none; padding: 0.8em 1em; z-index:30; display: none;}

						/* tooltip arrow */
						.formV2 [data-formTooltip]:before 													{content: ''; font-size: var(--form-font-size-small); position: absolute; top:100%; left:0.1em; margin-top:6px; transform: translatey(-100%) rotate(-180deg); border-width: 5px 6px 0 6px; border-style: solid; border-color: rgba(0,0,0,0.9) transparent transparent transparent; z-index: 99; display: none;}

						/* show tooltip */
						.formV2 [data-formTooltip]:hover:after, .formV2 [data-formTooltip]:focus:after, .formV2 [data-formTooltip]:hover:before, .formV2 [data-formTooltip]:focus:before {display: block;}
						
			/* container for showing form controls right */
			.formV2 .formItemContainerContent                             		{width: calc(100% - var(--form-label-width));} /* set the same with as labels */
			
				.formV2 .formControlContainer                      					 {flex: 0 1 auto; /* IE11 hack to prevent overflow of inputs */ max-width: 100%; /* prevents overflow of inputs */}

					.formV2 .formControlItemContainer 									{display: flex;}

						/* icon */
						.formV2 .formControlIcon 											{width: var(--form-input-minwidth-height); height: var(--form-input-minwidth-height); border-radius: var(--form-border-radius); flex: 0 0 auto; display: flex; justify-content: center; align-items: center;}
						.formV2 .disabled .formControlIcon            						{background-color: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.05); cursor: not-allowed;}
						.formV2 .readonly .formControlIcon            						{background-color: transparent; border-color: transparent; width: auto; height: auto;}
						
							.formV2 .formControlIcon + *  									{margin-left: -1px; /* preventing double border width */ }
								.formV2 .formControlIcon svg 								{flex: 1 1 auto; height: 0.85em; /* not max-height, doesn't work for readonly */ max-width: 0.85em; fill: var(--form-icon-color); overflow: visible; /* fixed FF cut off */;}
						
						/* input */
						.formV2 .formControlFeedback > input, 
						.formV2 .formControlFeedback .formControlDateTimeMobile > input {
							border-radius: var(--form-border-radius); transition: border-color 0.3s ease;
						}
						
						.formV2 .formControlFeedback input.inputFullWidth 					{width: 100vw;}
						.formV2 .formControlFeedback input:focus 							{z-index: 10; /* make sure the border is on top/visible */}
								
						/* textarea */
						.formV2 .partFormControlTextarea textarea               			{border-radius: var(--form-border-radius); transition: border-color 0.3s ease; resize: vertical; display: block; /* prevents margin bottom */}
						.formV2 .partFormControlTextarea .formControlContainer, .formV2 .partFormControlTextarea .formControlFeedback, .formV2 textarea {width: 100%;}
						.formV2 .textareaCharCounter                           				{font-size: var(--form-font-size-small); line-height: var(--form-line-height); display: inline-block; margin-top: 0.3em;}

						/* unit (after input) */
						.formV2 .formControlUnit                					 		{flex: 0 0 auto; margin-left: -1px; /* preventing double border width */ display:flex; align-items: center; justify-content: center; min-width: var(--form-input-minwidth-height); border-radius: var(--form-border-radius);}

						/* readonly */
						.formV2 .inputReadonly, .formV2 .textareaReadonly 					{line-height: var(--form-line-height);}

						/* upload */
						.formV2 .partUpload .uploadButton,  .formV2 .partUpload .uploadSelect  	{border-radius: var(--form-border-radius);}
						.formV2 .partFormControlUpload .partUpload  							{flex: 1 1 auto; /* prevent overlap of upload */}

						/* richtext */
						.formV2 .partRichText									{flex: 1 1 auto;}

						/* password */
						.formV2 .partFormControlInputPassword .formControlFeedback.valid:after {content: normal;} /* prevent checkmark to show over show password icon */

						/* validation */
						.formV2 .formControlFeedback 						{position: relative; display: flex; min-width: 0; /* hack to prevent the formControlFeedback to grow */;}
						.formV2 .formControlFeedback + .formControlFeedback {margin-left: -1px;}

							.formV2 .formControlFeedback > *  				{max-width: 100%;}
						
							/* valid */
							.formV2 .formControlFeedback.valid:after 	{animation: formValidAnimation 0.15s ease-in-out; position: absolute; height: var(--form-input-minwidth-height); width: 1em; right:0.5em; content: ''; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='%2300B900' fill-rule='evenodd' d='M2.853 9.669l4.006 4.006L17.277 3.257l1.604 1.603L6.86 16.88l-5.61-5.609z'/%3E%3C/svg%3E") no-repeat center; background-size: 1em auto;}
							.formV2 .formControlFeedback.valid input, .formV2 .formControlFeedback.valid textarea 	{padding-right: 1.5em;}
								
							@keyframes formValidAnimation { 0% {opacity:0;} 100% {opacity:1;}}

							/* error */
							.formV2 .formControlFeedback.error 				{z-index: 10; /* make sure the border is on top/visible */}

								/* border */
								.formV2 .formControlFeedback.error > input, 
								.formV2 .formControlFeedback.error textarea, 
								.formV2 .formControlFeedback.error .dropDownButton, 
								.formV2 .formControlFeedback.error .inputReplacer
								{
									border-color:rgb(var(--form-error-color)); transition: border-color .15s ease-in-out;
								}

								.formV2 .formControlFeedback.error .dropDownButton .dropDownButtonArrow
								{
									border-left-color: rgb(var(--form-error-color)); transition: border-color .15s ease-in-out;
								}

								/* box shadow */
								.formV2 .formControlFeedback.error > input:focus, 
								.formV2 .formControlFeedback.error textarea:focus,
								.formV2 .formControlFeedback.error input[type="radio"]:focus + label .inputReplacer,
								.formV2 .formControlFeedback.error input[type="checkbox"]:focus + label .inputReplacer,
								.formV2 .formControlFeedback.error .dropDownButton:focus,
								.formV2 .formControlFeedback.error .dropDownButton.active
								{
									box-shadow: 0 0 0 0.2rem rgb(231, 75, 59, 0.15); transition: box-shadow .15s ease-in-out; border-color:rgb(var(--form-error-color));
								}	

								/* label */
								.formV2 .errorLabel 				{animation: formErrorAnimation 0.15s ease-in-out; color: rgb(var(--form-error-color)); display: flex; margin-top: 0.3em; font-size: var(--form-font-size-small); line-height: var(--form-line-height);}
									.formV2 .errorLabelIcon 			{content: ''; margin-top: 0.15em; height:1em; width: 1em; flex: 0 0 auto; margin-right: 0.25em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='%23EB0400' d='M9.1 12.7h1.8v1.8H9.1v-1.8zm0-7.2h1.8v5.4H9.1V5.5zM9.991 1C5.023 1 1 5.032 1 10s4.023 9 8.991 9C14.968 19 19 14.968 19 10s-4.032-9-9.009-9zM10 17.2A7.198 7.198 0 012.8 10c0-3.978 3.222-7.2 7.2-7.2s7.2 3.222 7.2 7.2-3.222 7.2-7.2 7.2z'/%3E%3C/svg%3E") no-repeat center; background-size: contain;}
									.formV2 .errorLabelMessage 			{}
									.formV2 .errorLabelMessage u  		{cursor: pointer;}

									@keyframes formErrorAnimation { 0% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(0); } }

						/* Border radius override */
						.formV2 .formControlFeedback:not(:only-child) input, .formV2 .formControlIcon {border-top-right-radius: 0; border-bottom-right-radius: 0;}
						.formV2 .formControlFeedback + * input, .formV2 .formControlIcon + .formControlFeedback input, .formV2 .formControlIcon + .formControlFeedback .coreDropDown .dropDownButton {border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--form-border-radius)!important; border-bottom-right-radius: var(--form-border-radius)!important;}
						.formV2 .formControlUnit {border-top-left-radius: 0; border-bottom-left-radius: 0;}

/********************************************** 
Form with checkboxes, toggles and radios 
**********************************************/

.formV2 .formItemContainerContent .formListItemContainer               {margin-right: 0.75em; /* minus 0.25 em margin right from label */}
.formV2 .formItemContainerContent .formListItemContainer:last-child    {margin-right: 0;}

.formV2 .partFormControlInputCheckBoxList .formControlFeedback, .formV2 .partFormControlInputRadio .formControlFeedback 			{flex-direction: column;}

.formV2 .partFormControlInputCheckBox .formControlFeedback label, .formV2 .partFormControlInputCheckBoxList .formControlFeedback label, .formV2 .partFormControlInputRadio .formControlFeedback label {
	display: inline-flex; align-items: flex-start; padding-bottom: 0.25em; 
}

.formV2 .partFormControlInputCheckBoxList.horizontal .formControlFeedback, .formV2 .partFormControlInputRadio.horizontal .formControlFeedback {flex-direction: row;}

.formV2 input[type="radio"], .formV2 input[type="checkbox"]               	{/* Contain text within 1px box */ height: 1px; overflow: hidden; width: 1px; /* Keep the layout */ position: absolute; /* Remove any visible trace (e.g. background color) */ clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); /* browsers in the future */ /* Prevent the screen reader to skip spaces between words */ white-space: nowrap; padding:0; border:none} /* hiding input, label takes click over */
.formV2 .inputReplacer                                                	{margin-right: 0.35em; width: 1.25em; height:1.25em; cursor: pointer; flex:0 0 auto; display:flex; align-items:center; justify-content:center; align-self: flex-start;  /* in case the container has a background color */} 
.formV2 .inputLabel 													{margin-right: 0.25em; line-height: var(--form-line-height);}
	.formV2 .inputLabel a 													{color: inherit; outline: none;}

.formV2 .inputImage 														{margin-right: 0.35em; height: 1.5em;  width: 3em; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: var(--form-border-radius);}
	.formV2 .inputImage img 													{flex: 0 1 auto; max-height: calc(100% - 0.35em); max-width: calc(100% - 0.35em);}

.formV2 input[type="radio"] + label .inputReplacer                    	{border-radius: 50%; position: relative;}
.formV2 input[type="radio"] + label .inputReplacer:after              	{content: ''; width:calc(100% - 0.5em); height:calc(100% - 0.5em); border-radius: 50%; opacity:0; transition: opacity 0.3s ease;}
.formV2 input[type="radio"]:checked + label .inputReplacer:after     	{opacity: 1;}

.formV2 input[type="checkbox"] + label .inputReplacer svg             	{opacity: 0; transition: opacity 0.3s ease; flex: 1 1 auto; max-width: 0.85em; max-height: 0.85em;}
.formV2 input[type="checkbox"]:checked + label .inputReplacer svg    	{opacity: 1;}

/* toggle */
.formV2 input.checkboxToggle + label                                    	{}
.formV2 input.checkboxToggle + label .inputReplacer                 	{height: 1.25em; width: 2.5em; flex:0 0 auto; background-color: #999; border:var(--form-border); position: relative; transition: 0.3s ease;}
.formV2 input.checkboxToggle + label .inputReplacer:after           	{content: ''; position: absolute; left: 0; top:0; width: 50%; height:100%; background-color:#fff; transition: left 0.15s ease; /* resetting checkbox basics */ opacity: 1; margin-top: 0px; border:none; transform:rotate(0deg); border-radius: calc(var(--form-border-radius) / 1.5);}
.formV2 input.checkboxToggle:checked + label .inputReplacer         	{background-color: rgb(var(--form-completed-color)); border-color: rgb(var(--form-completed-color));}
.formV2 input.checkboxToggle:checked + label .inputReplacer:after   	{left:50%;}
.formV2 input.checkboxToggle[type="checkbox"]:focus + label .inputReplacer {border-color: transparent;}

/********************************************** 
Input text with autocomplete
**********************************************/

.popperInputTextAutoComplete 									{display: none; background-color: #fff; border-radius: var(--form-border-radius); z-index: 1800; overflow: hidden;}
.popperInputTextAutoComplete[data-popper-placement="top"] 		{box-shadow: 0 -2px 5px 0 rgb(0 0 0 / 23%);}
.popperInputTextAutoComplete[data-popper-placement="bottom"] 	{box-shadow: 0 2px 5px 0 rgb(0 0 0 / 23%);}
.popperInputTextAutoComplete.active 							{display: block;}

	/* list */
	.popperInputTextAutoComplete ul {
		overflow:auto; 
		line-height: var(--form-line-height);
		background-image: linear-gradient(to top, #fff, #fff),
		linear-gradient(to top, #fff, #fff),
		linear-gradient(to top, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0)),
		linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0));
		background-position: bottom center, top center, bottom center, top center;
		background-color: #fff;
		background-repeat: no-repeat;
		background-size: 100% 20px, 100% 20px, 100% 10px, 100% 10px;
		background-attachment: local, local, scroll, scroll;
	}
	.popperInputTextAutoComplete ul li				{cursor: pointer;}

/********************************************** 
Disabled
**********************************************/

.formV2.disabled > *:not(.partFormControlButtonSubmit)      			{pointer-events: none;} /* blocks all fields when submitting */
.formV2 input[type="text"][disabled], .formV2 input[type="number"][disabled], .formV2 textarea[disabled], .formV2 .formItemContainer.disabled .formControlUnit {background-color:rgba(0,0,0,0.05); border-color:rgba(0,0,0,0.05); cursor: not-allowed; opacity: 1; /* opacity for iOS */}
.formV2 textarea[disabled]  																					{overflow: auto; /* remove arrows in IE */}
.formV2 input[type="radio"][disabled] + label > *, .formV2 input[type="checkbox"][disabled] + label > * 		{cursor: not-allowed;}
.formV2 input[type="radio"][disabled] + label .inputReplacer, .formV2 input[type="checkbox"][disabled]:not(.checkboxToggle) + label .inputReplacer {border-color:rgba(0,0,0,0.05); background-color:rgba(0,0,0,0.05);}
.formV2 input[type="checkbox"][disabled].checkboxToggle + label .inputReplacer 								{opacity: 0.3;}

/********************************************** 
Read only with disabled
**********************************************/

.formV2 .formItemContainer.readonly input[disabled], .formV2 .formItemContainer.readonly textarea[disabled], .formV2 .formItemContainer.readonly .formControlUnit  {
	border-color: transparent; background-color: transparent; cursor: default; color: inherit /* FF */; -webkit-text-fill-color: inherit /* Safari */;
}

.formV2 .formItemContainer.readonly input[disabled]  	{padding:0;}
.formV2 .formItemContainer.readonly textarea[disabled]  {padding-left: 0; padding-right: 0; height:auto;}
.formV2 .formItemContainer.readonly .formControlUnit 	{padding-right: 0;}

/* radio */
.formV2 .partFormControlInputRadio.readonly input[type="radio"][disabled], .formV2 .partFormControlInputRadio.readonly input[type="radio"][disabled] + label {display: none;} /* hide input + label */
.formV2 .partFormControlInputRadio.readonly input[type="radio"][disabled][checked] + label {display: inline-flex; } /* show checked labels */
.formV2 .partFormControlInputRadio.readonly input[type="radio"][disabled][checked] + label > * {cursor: default;}
.formV2 .partFormControlInputRadio.readonly input[type="radio"][disabled][checked] + label .inputReplacer {display: none;} /* hide inputReplacer */

/* checkbox list */
.formV2 .partFormControlInputCheckBoxList.readonly input[type="checkbox"][disabled][checked], .formV2 .partFormControlInputCheckBoxList.readonly input[type="checkbox"][disabled][checked] + label {display: inline-flex;}
.formV2 .partFormControlInputCheckBoxList.readonly input[type="checkbox"][disabled][checked] + label > * {cursor: default;}
.formV2 .partFormControlInputCheckBoxList.readonly input[type="checkbox"][disabled][checked] + label .inputReplacer {border-color: transparent; background-color: transparent;} /* remove style */

/* checkbox single */
.formV2 .partFormControlInputCheckBox.readonly input[type="checkbox"][disabled] + label .inputReplacer {background-color:rgba(0,0,0,0.05); border-color:rgba(0,0,0,0.05);} /* remove style */
.formV2 .partFormControlInputCheckBox.readonly input[type="checkbox"] + label > * {cursor: default;}

/* toggle */
.formV2 .partFormControlInputCheckBox.readonly input.checkboxToggle + label .inputReplacer {height: 22px; width: 22px; opacity: 1;}
.formV2 .partFormControlInputCheckBox.readonly input.checkboxToggle + label .inputReplacer:after {display: none;}

/********************************************** 
Messages
**********************************************/

.formV2 .formControlMessage 						{min-height: auto;}
	.formV2 .formControlMessageContainer						{padding-top:0.5em; padding-bottom: 0.25em; display: flex; align-items: flex-start; border-radius:var(--form-border-radius);}
		.formV2 .formControlMessageIcon 							{width: 1em; height:1em; margin-right: 0.4em; flex: 0 0 auto; display: flex; justify-content: center; align-items: center;}
			.formV2 .formControlMessageIcon svg							{flex: 1; max-height: 1em; max-width: 1em;}
			.formV2 .formControlMessageContent  						{line-height: 1.4em; overflow-wrap: break-word;}
			.formV2 .formControlMessageContent > * 						{margin-bottom: 0.25em;}
				.formV2 .formControlMessageContent label u 					{cursor: pointer;}
				.formV2 .formControlMessageContent p 							{}
				.formV2 .formControlMessageContent ul, .formControlMessageContent ol 	{margin-bottom: 0.125em;}
				.formV2 .formControlMessageContent a 							{color: inherit;}

				/* list */			
				.formV2 .formControlMessageContent ul li, .formV2 .formControlMessageContent ol li { position: relative; margin-bottom: 0.125em;}
				.formV2 .formControlMessageContent ul li::before, .formV2 .formControlMessageContent ol li:before {color: inherit; font-size: 1em; position: absolute;}
				
				/* unordered list */
				.formV2 .formControlMessageContent ul li 					{margin-left: 1em;}
					.formV2 .formControlMessageContent ul li:before 			{left: -1em; top:-1px; content: url("data:image/svg+xml,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle fill='rgba(0, 0, 0, 0.5)' cx='3' cy='3' r='3'/%3E%3C/svg%3E");}
				
				/* ordered list */ 
				.formV2 .formControlMessageContent ol li 					{margin-left: 1.5em; counter-increment:li;}
					.formV2 .formControlMessageContent ol li:before 			{left: -1.5em;content: counter(li)'.'; top: 0em; }

/* info */
.formV2 .partFormControlMessageInfo .formControlMessageContainer  			{background-color: rgba(var(--form-info-color), 0.1); color: rgb(var(--form-info-color)); }
	.formV2 .partFormControlMessageInfo .formControlMessageContainer svg 		{fill: rgba(var(--form-info-color));}

/* warning */
.formV2 .partFormControlMessageWarning .formControlMessageContainer			{background-color: rgba(var(--form-warning-color), 0.1); color: rgb(var(--form-warning-color));}
	.formV2 .partFormControlMessageWarning .formControlMessageContainer svg 	{fill: rgba(var(--form-warning-color));}

	/* exception for info and warning message so it's closer to the upper element */
	.formV2 .partFormControlMessageInfo, .formV2 .partFormControlMessageWarning {margin-top: -0.4em;}
	.formV2 .formInitialsContainer + .partFormControlMessageInfo, .formV2 .formInitialsContainer + .partFormControlMessageWarning {margin-top: 0;}

/* privacy */
.formV2 .partFormControlMessagePrivacy .formControlMessageContainer   				{font-size: var(--form-font-size-small); background-color: transparent; padding:0;}

/* completed */
.formV2 .partFormControlMessageCompleted .formControlMessageContainer  				{background-color: rgba(var(--form-completed-color), 0.1); color: rgb(var(--form-completed-color));}
	.formV2 .partFormControlMessageCompleted .formControlMessageContainer svg 		{fill: rgba(var(--form-completed-color));}

/* error */
.formV2 .partFormControlMessageError .formControlMessageContainer  				{background-color: rgba(var(--form-error-color), 0.1); color: rgb(var(--form-error-color)); animation: formErrorShakeAnimation 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0);}
	.formV2 .partFormControlMessageError .formControlMessageContainer strong 		{color: rgb(var(--form-error-color));} /* fall back in case there is a color set on the strong in the index */
	.formV2 .partFormControlMessageError .formControlMessageContainer svg 			{fill: rgba(var(--form-error-color));}
	.formV2 .partFormControlMessageError .formControlMessageContainer .formControlMessageContent ul li:before {content: url("data:image/svg+xml,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle fill='rgb(255, 40, 22)' cx='3' cy='3' r='3'/%3E%3C/svg%3E");}

	/* shake animation */
	@keyframes formErrorShakeAnimation { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0);}}

/********************************************** 
Full width / Responsive
**********************************************/

.formV2 .formItemContainer.fullWidth .formItemContainerLabel, .formV2 .formItemContainer.fullWidth .formItemContainerContent {width: 100%;}

.formV2 .formItemContainer.fullWidth .formItemContainerLabel 	{padding-right: 0;}
.formV2 .formItemContainer.fullWidth .formItemContainerLabel, .formV2 .formItemContainer.fullWidth .inputReadonly, .formV2 .formItemContainer.fullWidth .textareaReadonly, .formV2 .formItemContainer.fullWidth .selectReadonly, .formV2 .formItemContainer.fullWidth .partFormControlAddress .partButton {margin-top: 0;}	


@media (max-width: 767px){
	.formV2 .formItemContainerLabel, .formV2 .formItemContainerContent   	{width:100%!important;} /* used important to overwrite dynamic ajax */
	.formV2 .formItemContainerLabel 										{padding-right: 0;}
		.formV2 .formItemContainerLabel label 									{margin-bottom: 0.1em;}

	.formV2 .formItemContainerLabel, .formV2 .inputReadonly, .formV2 .textareaReadonly, .formV2 .selectReadonly {margin-top: 0;}
	.formV2 .partFormControlDateTime.readonly .formControlIcon {height: auto;}

	.formV2 .formControlDynamicContainer 						{margin-left: 0.45em; padding-left: 1em;}
}

/********************************************** 
Legacy browser support
**********************************************/

/* IE10 & IE11 */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  	

	/* sizes */
	.formV2 input, .formV2 .formControlUnit, li.tagListItem, .tagListAddContainer .tagListMaxItems {min-height: 36px;}
	.formV2 textarea                                                 	{height: calc(36px * 3);} 
	.formV2 .formControlIcon,  .tagListAddContainer .buttonTagItemAdd 	{width: 36px; height: 36px;}
	.formV2 .formControlUnit                                      		{min-width: 36px;}

	.formV2 .formItemContainerLabel                           	 		{width: 200px;}
	.formV2 .formItemContainerContent                             		{width: calc(100% - 200px);}
	
	/* border */
	.formV2 input, .formV2 textarea, .formV2 .inputReplacer, .formV2 .inputImage, .formV2 .formControlIcon, .formV2 .texteditorContent, .formV2 .texteditorControls, .formV2 .formControlUnit, .formV2 li.tagListItem, .formV2 .tagListAddContainer .tagListMaxItems {
		border:solid 1px #aaa;
	}

	/* placeholder */
	.formV2 input:-ms-input-placeholder, .formV2 textarea:-ms-input-placeholder   		{color:#aaa;}
	
	/* clear reset */ 
	.formV2 input::-ms-clear { display: none; }

	/* error */
	.formV2 .formControlFeedback.error > input, .formV2 .formControlFeedback.error textarea, .formV2 .formControlFeedback.error .dropDownButton, .formV2 .formControlFeedback.error .inputReplacer {border-color: rgb(235, 4, 0);}
	.formV2 .errorLabel, .formV2 .partFormControlMessageError .formControlMessageContainer, .formV2 .partFormControlMessageError .formControlMessageContainer strong {color: rgb(235, 4, 0);}
	.formV2 .partFormControlMessageError .formControlMessageContainer 												{background-color: rgba(235, 4, 0, 0.1);}
	.formV2 .partFormControlMessageError .formControlMessageContainer svg 											{fill: rgb(235, 4, 0);}

	/* completed */
	.formV2 input.checkboxToggle:checked + label .inputReplacer, .formV2 .tagListAddContainer .buttonTagItemAdd  	{background-color: rgb(93, 179, 37); border-color: rgb(93, 179, 37);}

	/* info */
	.formV2 .partFormControlMessageInfo .formControlMessageContainer				{background-color: rgba(74, 144, 226, 0.1); color: rgb(74, 144, 226);}
		.formV2 .partFormControlMessageInfo .formControlMessageContainer svg 		{fill: rgb(74, 144, 226);}

	/* warning */
	.formV2 .partFormControlMessageWarning .formControlMessageContainer			{background-color: rgba(255, 140, 22, 0.1); color: rgb(255, 140, 22);}
		.formV2 .partFormControlMessageWarning .formControlMessageContainer svg 		{fill: rgb(255, 140, 22);}
}