/********************************************** 
Configuration 
**********************************************/

.formV2                                                         	{position: relative; /* initials */}
.formV2 .partContentText                                        	{}
.formV2 .partContentText p                                      	{margin-bottom: 15px;}
.formV2 .partContentText.privacyText                            	{font-size: 14px;}     
.formV2 .partButton {background-color: #000; transition: 0.3s;}
             

/* sizes */



.formV2 label, .formV2 input, .formV2 select, .formV2 textarea, .formV2 .dropDownButtonValue span  	{color: inherit; font-family: inherit; font-weight: inherit; line-height: 1.4em; font-size: 16px; /* this must be minimal 16px to prevent mobile zoom */ }
.formV2 input                                                     	{padding:0px 10px; height:36px; } /* set height of input with padding */
.formV2 textarea                                                  	{padding:8px 10px; height:106px;} /* set height of textarea */

.formV2 .formControlIcon 											{width: 36px; border:solid 1px #999;}
.formV2 .formControlIcon svg 										{fill: #999;}

.formV2 .formItemContainerLabel, .formV2  .formItemContainerContent label	{min-height: 36px;}
.formV2 .formItemContainerLabel, .formV2 .formItemContainerContent label span.inputLabel {padding: 4px 0px;}

.formV2 .formItemContainerLabel                           	 		{width: 250px; font-weight: 400; color: #000;} /* width of labels */
.formV2 .formItemContainerContent                             		{width: calc(100% - 250px);} /* set the same with as labels */
.formV2 .formItemContainer                                			{margin-bottom: 10px;} /* set the margin below the inputs */
/* border */
.formV2 input, .formV2 textarea, .formV2 label, .formV2 span.inputReplacer {
	border:solid 1px #fff;
}

/* border radius */
.formV2 input, .formV2 textarea, .formV2 .dropDownButton, .formV2 .partFormControlErrorMessage .errorMessageContainer, .formV2 .partFormControlCompletedMessage, .formV2 .formControlIcon, .tagListAddContainer .tagListMaxItems, .tagListAddContainer .tagAdd, .tagList li.tagListItem {
	border-radius: 0px;
}

/* focus */
.formV2 input, .formV2 textarea, .formV2 input[type="radio"]:focus + label span.inputReplacer, .formV2 input[type="checkbox"]:focus + label span.inputReplacer, .tagListAddContainer .tagAdd {
	transition: box-shadow .15s ease-in-out;
}

.formV2 input:focus, .formV2 textarea:focus, .formV2 input[type="radio"]:focus + label span.inputReplacer, .formV2 input[type="checkbox"]:focus + label span.inputReplacer, .tagListAddContainer .tagAdd:focus /* border focus */ {
	box-shadow: 0 0 0 0.2rem rgba(0,0,0,.1);
}

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

.formV2 .formItemContainer                            	{display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end;}
.formV2 .partFormControlButtonSubmit.formItemContainer  {margin-bottom: 0;}

		.formV2 .formItemContainerContent                   {}
				.formV2 .formControlContainer                       {}
				.formV2 .formControlContainer.horizontal            {display: flex;} 
				.formV2 .partFormControlInputCheckBoxList .formControlContainer.horizontal, .formV2 .partFormControlInputRadio .formControlContainer.horizontal {flex-wrap: wrap;}
				.formV2 .formControlContainer.vertical              {display: flex; flex-direction: column;} 

		.formItemContainerContentResult                          	{}

		.formV2 input, .formV2 textarea, .formV2 .partDropDown 	 	{flex: 1 1 auto; min-width: 0; /* min-width bug fix low resolution (320 pixels) */}
		.formV2 textarea                                        	{resize: vertical;}

/* full width */
.formV2.formItemContainerFullWidth .formItemContainerContent, .formV2.formItemContainerFullWidth .formItemContainerLabel {width: 100%;}
.formV2.formItemContainerFullWidth .formItemContainerLabel 	{min-height: auto;}

/* label */
.formV2 label                                       		{border-color: transparent; border-left: none; display:inline-flex; align-items: center;}
.formV2 label a                                     		{color: #000;}
.formV2 .formItemContainerLabel                     		{display: flex; flex-wrap: wrap; align-items: center;}
.formV2 .formItemContainerLabel label               		{word-break: break-word; display: inline-block; margin-right: 4px;}

/* required */
.formV2 label.required:after 								{content: '*'; color: #999;}

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

/* text under textarea */
.formV2 .spanAdditional                           			{display: block; margin-top: 10px; font-size: 14px;}

/* icon */
.formV2 .formControlIcon 									{flex: 0 0 auto; border-right: none; display: flex; justify-content: center; align-items: center; }
.formV2 .formControlIcon svg 								{flex: 1 1 auto; max-height: 15px; max-width: 15px; min-width: 15px;}
.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; margin-right: 5px;}

/* label before or behind input for units */
 .formV2 .textLabel                                      	{border:solid 1px #999; border-left: none; padding:0 10px; display:flex; align-items: center;}

/* initials hack */
.formV2 .formInitialsContainer 								{position: absolute; bottom: 0; right:0; z-index: -1; width: 20px; height: 20px; overflow: hidden;}
.formV2 .formInitialsContainer > *  						{color: transparent;}
.formV2 .formInitialsContainer input  						{border-color: transparent; color: transparent;}

/********************************************** 
Feedback
**********************************************/

/* Completed */
.formV2 .partFormControlCompletedMessage                                                                    {border:solid 1px#5DB325; background-color: rgba(93, 179, 37, 0.1); padding:20px; padding-bottom: 5px; margin-bottom: 30px;}
.formV2 .partFormControlCompletedMessage .partContentText p                                                 {color: #5DB325; font-weight: 700;}

/* Error */
.formV2 input.error, .formV2 textarea.error, .formV2 .partFormControlErrorMessage .errorMessageContainer  	{border-color: #e74b3b;}
.formV2 label.error, .formV2 .partFormControlErrorMessage .errorMessageContainer              				{color: #e74b3b;}
.formV2 .partFormControlErrorMessage .errorMessageContainer ul li:before   									{background-color: #e74b3b;}

.formV2 .partFormControlErrorMessage .errorMessageContainer                         						{padding:20px; padding-bottom: 10px; flex:1 1 auto; border-width: 1px; border-style: solid; background-color:rgba(231, 75, 59,0.1); line-height:1.4em; animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0);}
.formV2 .partFormControlErrorMessage .errorMessageContainer p                         						{font-weight:700; margin-bottom: 10px;}
.formV2 .partFormControlErrorMessage .errorMessageContainer ul                        						{font-size: 16px; padding-bottom: 5px;}
.formV2 .partFormControlErrorMessage .errorMessageContainer ul li 											{margin-bottom: 5px; display: flex;}
.formV2 .partFormControlErrorMessage .errorMessageContainer ul li:before 									{content: ''; width:6px; height: 6px; flex: 0 0 auto; border-radius: 50%; margin-top: 8px; margin-right: 8px;}
.formV2 .partFormControlErrorMessage .errorMessageContainer ul li label                       				{min-height: auto; display: inline-block; line-height: 1.4em; border:none;}
.formV2 .partFormControlErrorMessage .errorMessageContainer ul li a                       					{display: inline-block; color: inherit; text-decoration: none;}
.formV2 .partFormControlErrorMessage .errorMessageContainer ul li span                    					{text-decoration:underline; cursor: pointer;}

.formV2 .partFormControlErrorMessage .errorMessageContainer ul li a:first-letter, .formV2 .partFormControlErrorMessage .errorMessageContainer ul li label:first-letter  {text-transform: uppercase;}

/* animation */
@keyframes shake {
	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);
	}
}

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

.formV2 .formItemContainerContent .formControlContainer.horizontal .formListItemContainer                {margin-right: 15px;}
.formV2 .formItemContainerContent .formControlContainer.horizontal .formListItemContainer:last-child    {margin-right: 0;}

.formV2 input[type="radio"], .formV2 input[type="checkbox"]               {opacity: 0; width: 0px; height: 0px; padding: 0px; border: none; position: absolute;} 
.formV2 span.inputReplacer                                                {margin-right: 6px; width: 22px; height:22px; cursor: pointer; flex:0 0 auto; display:flex; align-items:center; justify-content:center;} 

.formV2 input[type="radio"] + label span.inputReplacer                    {border-radius: 50%; position: relative;}
.formV2 input[type="radio"] + label span.inputReplacer:after              {content: ''; width:calc(100% - 10px); height:calc(100% - 10px); border-radius: 50%; background-color: #000; opacity:0; transition: opacity 0.15s ease;}
.formV2 input[type="radio"]:checked + label span.inputReplacer:after      {opacity: 1;}

.formV2 input[type="checkbox"] + label span.inputReplacer                 {text-align: center;}
.formV2 input[type="checkbox"] + label span.inputReplacer svg             {opacity: 0; transition: opacity 0.3s;}
.formV2 input[type="checkbox"] + label span.inputReplacer svg.check       {width: 16px;}
.formV2 input[type="checkbox"] + label span.inputReplacer svg.close       {width: 12px;}
.formV2 input[type="checkbox"]:checked + label span.inputReplacer svg     {opacity: 1;}

/* toggle */
.formV2 input.checkboxToggle + label                                    {}
.formV2 input.checkboxToggle + label span.inputReplacer                 {height: 26px; width: 52px; flex:0 0 auto; background-color: #999; border:solid 1px #999; position: relative; transition: 0.3s ease;}
.formV2 input.checkboxToggle + label span.inputReplacer:after           {content: ''; position: absolute; left: 0; top:0; width: 50%; height:100%; background-color:#fff; transition: left 0.3s ease; /* resetting checkbox basics */ opacity: 1; margin-top: 0px; border:none; transform:rotate(0deg);}
.formV2 input.checkboxToggle:checked + label span.inputReplacer         {background-color: #5DB325; border-color: #5DB325;}
.formV2 input.checkboxToggle:checked + label span.inputReplacer:after   {left:50%;}
.formV2 input.checkboxToggle[type="checkbox"]:focus + label span.inputReplacer {border-color: transparent;}

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

.formV2 input[type="text"][disabled], .formV2 textarea[disabled] 												{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 span.inputReplacer, .formV2 input[type="checkbox"][disabled]:not(.checkboxToggle) + label span.inputReplacer {border-color:rgba(0,0,0,0.05); background-color:rgba(0,0,0,0.05);}
.formV2 input[type="checkbox"][disabled].checkboxToggle + label span.inputReplacer 								{opacity: 0.3;}

/********************************************** 
Disabled with read only
**********************************************/

.formV2 .readonly input[disabled], .formV2 .readonly textarea[disabled]       {border-color: transparent; background-color: transparent; cursor: default; color: inherit /* FF */; -webkit-text-fill-color: inherit /* Safari */;}
.formV2 .readonly input[disabled]                                             {padding:0}
.formV2 .readonly textarea[disabled]                                          {padding-left: 0; padding-right: 0; height:auto;}

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

/* checkbox list */
.formV2 .partFormControlInputCheckBoxList .readonly input[type="checkbox"][disabled], .formV2 .partFormControlInputCheckBoxList .readonly input[type="checkbox"][disabled] + label {display: none;} /* hide input + label */
.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 span.inputReplacer {border-color: transparent; background-color: transparent;} /* remove style */

/* checkbox single */
.formV2 .partFormControlInputCheckBox.readonly input[type="checkbox"][disabled] + label span.inputReplacer {border-color: transparent; background-color: transparent;} /* remove style */
.formV2 .partFormControlInputCheckBox.readonly input[type="checkbox"] + label span.inputReplacer svg {opacity: 1;}
.formV2 .partFormControlInputCheckBox.readonly input[type="checkbox"] + label > * {cursor: default;}

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


/********************************************** 
Responsive
**********************************************/

@media (max-width: 767px){
	.formV2 .formItemContainer                              					{flex-direction: column;}
		.formV2 .formItemContainerLabel, .formV2 .formItemContainerContent   	{width:100%;}
		.formV2 .formItemContainerLabel 										{min-height: auto;}			
}

/********************************************** 
Form reset
**********************************************/

.formV2 input, .formV2 textarea, .formV2 button, .formV2 select {-webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none;}
.formV2 [type="number"]::-webkit-inner-spin-button, .formV2 [type="number"]::-webkit-outer-spin-button  {-webkit-appearance: none; margin: 0;}
.formV2 input[type=number]                                    	{-moz-appearance:textfield;}

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

/* IE10 & IE11 */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
	.formV2 .readonly .formControlIcon {width: 15px;} 
}