/**
 * form.css
 * Copyright 2017 Christian Urban <info@maio31.de>
 * Stylesheet: maio31
 * Threme: maio31
 *
 */

/* remove standard-styles */
input 
{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border:none;
	border-radius: 0;
	font-size: 1.5rem;
	width: 100%
}

/* graceful degradation for ie8 */
input[type='checkbox'],
input[type='radio']
{
  width:auto;
  float:left;
  margin-right: .75rem;
  background:transparent;
  border:none;
}

input[type='checkbox']:checked,
input[type='checkbox']:not(:checked),
input[type='radio']:checked,
input[type='radio']:not(:checked) 
{
  background: transparent;
  position: relative;
  visibility: hidden;
  margin:0;
  padding:0;
}

input[type='checkbox'] + label,
input[type='radio'] + label
{
  cursor: pointer;
}

.mod_article .form > form { padding-top: 1.9rem; }

	.mod_article form > .formbody {}
	
		.mod_article form > .formbody > ul.custom_form 
		{
			display: grid;
			grid-template-columns: repeat(3, minmax(25em, 1fr));
			column-gap: 3em;
		}
			
			.mod_article form > .formbody > ul.custom_form > li
			{
				float: left;
			}
			
			.mod_article form > .formbody > ul.custom_form > li.left 
			{
				//width: 29rem;
			}
			
			.mod_article form > .formbody > ul.custom_form > li.right 
			{
				//width: 61rem;
				//margin-left: 3rem;
				grid-column: 2/4;
			}
					
				/* SEARCH */
				.mod_article .mod_search > form > .formbody .widget 
				{
					display: inline-block;
					float: left;
					margin: 0 1rem 1rem 0;
				}
				
				.mod_article .mod_search > form > .formbody .widget-submit { float: inherit; }
				
					.mod_article .mod_search > form > .formbody .widget > input,
					.mod_article .mod_search > form > .formbody .widget > button
					{
						background: rgb(235,235,235);
						padding: .7rem 1rem;
					}
				/* SEARCH */
		
					.mod_article form > .formbody .widget > label 
					{
						display: none;
					}
					
					.mod_article .form > form > .formbody .widget > input,
					.mod_article .form > form > .formbody .widget > textarea 
					{
						width: 100%;
						text-align: center;
						//background: rgba(55,55,255,.25);
						margin-bottom: 1.5rem;
					}
					
					.mod_article .form > form > .formbody .widget > input
					{
						height: 6rem;
					}
					
					.mod_article form > .formbody .widget > textarea 
					{
						height: 18rem;
						padding: 1.5rem 0;
						vertical-align: middle;
					}
	
					textarea::-moz-placeholder 
					{ 
						/* Mozilla Firefox 19+ */
						line-height:180px;
					}
					textarea::-webkit-input-placeholder 
					{ 
						/* Webkit */
						line-height:180px;
					}
					textarea:-ms-input-placeholder 
					{ 
						/* IE */
						line-height:180px;
					}
					
					.mod_article form > .formbody .widget-checkbox,
					.mod_article form > .formbody .widget-radio
					{
						float: left;
					    margin-top: -9px;		/* margin-top: 3px; */
					}
					
						.mod_article form > .formbody .widget-checkbox > fieldset > span,
						.mod_article .mod_iso_checkout form > .formbody .widget-radio > fieldset > span
						{
							padding-left: 4rem;
							display: inline-block;
							width: 100%;
						}
						
						.mod_article .mod_iso_checkout form > .formbody .widget-checkbox label,
						.mod_article .mod_iso_checkout form > .formbody .widget-radio label
						{
							display: block;
							line-height: 2.5rem;
							margin-bottom: 1rem;
						}
					
							.widget-checkbox input[type='checkbox']:checked + label::before,
							.widget-checkbox input[type='checkbox']:not(:checked) + label::before,
							.mod_iso_checkout .widget-radio input[type='radio']:checked + label::before,
							.mod_iso_checkout .widget-radio input[type='radio']:not(:checked) + label::before
							{
								content:' ';
								display: inline-block;
								width: 28px;
								height: 28px;
								position: relative;
								top: 9px;
								background: white;
								margin-right: 1rem;
								margin-left: -4rem;
							}

							.widget-checkbox input[type='checkbox']:hover + label::before,
							.mod_iso_checkout .widget-radio input[type='radio']:hover + label::before,
							#AltchaAntispam_checkbox:hover 
							{
								background: rgb(222,222,222);
								box-shadow: inset 0 0 0 8px white;
							}

							.widget-checkbox input[type='checkbox']:checked + label::before,
							.mod_iso_checkout .widget-radio input[type='radio']:checked + label::before,
							#AltchaAntispam_checkbox:checked 
							{
								background: rgb(77,77,77);
								box-shadow: inset 0 0 0 8px white;
							}
							
							/* Altcha */
							.mod_article form > .formbody .widget-altcha
							{
								clear: both;
								margin-top: 4rem;
							}
								
								.mod_article form > .formbody .widget-altcha .altcha
								{
									border: none;
								}
								
									.mod_article form > .formbody .widget-altcha .altcha-main
									{
										padding: 0;
										gap: 1rem;
									}
								
										.mod_article form > .formbody .widget-altcha .altcha-checkbox
										{
											width: 28px;
											height: 28px;
										}
								
									#AltchaAntispam_checkbox
									{
										visibility: visible;
										display: inline-block;
										width: 28px;
										height: 28px;
										position: relative;
										background: white;
										cursor: pointer;
									}
							/* Altcha */

					.mod_article form > .formbody .widget-submit
					{
						float: right;
						margin-top: 0;		/* margin-top: 9px; */
					}
					
						.mod_article form > .formbody .widget-submit > button
						{
						    background: white;
							padding: .7rem 1rem;
						}
							
						button
						{
							color: rgb(77,77,77);
						}
						
						button:hover
						{
							background-color: rgb(222,222,222) !important;
							cursor: pointer;
						}
						
	.product > form > .formbody {}
	
		.product > form > .formbody > .options {}
		
			.product > form > .formbody > .options > .widget {}
			
				.product > form > .formbody > .options > .widget > fieldset {}
				
					.product > form > .formbody > .options > .widget > fieldset > legend { margin-bottom: .7rem; }
					
						.product > form > .formbody > .options > .widget > fieldset > legend > .mandatory { display: none; }
				
					.product > form > .formbody > .options > .widget > fieldset > .fieldset_line
					{ 
						background: rgb(77,77,77); 
						width: 100%; height: 1px;
					}
					
					.product > form > .formbody > .options > .widget > fieldset.radio_container > span
					{
						display: inline-block;
						width: 100%;
						height: min-content;
					}
					
					.product > form > .formbody > .options > .widget > fieldset > span.checked
					{
						background: rgba(77,77,77);
					}
				
						.product > form > .formbody > .options > .widget > fieldset > span > input { display: none; }
				
						.product > form > .formbody > .options > .widget > fieldset > span > label 
						{
							display: inline-block;
						}
				
						.product > form > .formbody > .options > .widget > fieldset.radio_container > span > label
						{
							padding: .55rem 1rem;
							width: calc(100% - 2rem);
						}
				
						.product > form > .formbody > .options > .widget > fieldset.checkbox_container > span > label
						{
							padding-bottom: 1rem;
						}
				
						.product > form > .formbody > .options > .widget > fieldset.checkbox_container > span:last-of-type > label
						{
							padding-bottom: 2rem;
						}
					
							.product .widget-checkbox input[type='checkbox']:checked + label::before,
							.product .widget-checkbox input[type='checkbox']:not(:checked) + label::before
							{
								background: rgb(235,235,235);
							}

							.product .widget-checkbox input[type='checkbox']:hover + label::before
							{
								background: white;
								box-shadow: inset 0 0 0 8px rgb(235,235,235);
							}

							.product .widget-checkbox input[type='checkbox']:checked + label::before 
							{
								background: rgb(77,77,77);
								box-shadow: inset 0 0 0 8px rgb(235,235,235);
							}
	
		.product > form > .formbody > .submit_container 
		{
			display: grid;
			grid-template-columns: repeat(2, max-content);
			height: max-content;
			margin-top: 2rem;
			grid-gap: 1rem
		}
	
			.product > form > .formbody > .submit_container > .quantity_container {}
	
				.product > form > .formbody > .submit_container > .quantity_container > label { display: none; }
	
				.product > form > .formbody > .submit_container > .quantity_container > input 
				{ 
					width: 3rem; 
					padding: .7rem 1rem; 
					background: rgb(235,235,235);
					text-align: center;
				}
	
			.product > form > .formbody > .submit_container > input 
			{
				padding: .7rem 1rem;
			}
	
			.product > form > .formbody > .submit_container > input:hover
			{
				background: rgb(77,77,77);
				color: white;
			}
					
	select.tl_chosen { display: block; }				
						
						
@media all and (max-width: 880px)
{
	.mod_article form > .formbody > ul.custom_form 
	{
		grid-template-columns: repeat(auto-fill, minmax(26em, 1fr));
	}
	
	.mod_article form > .formbody > ul.custom_form > li.right { grid-column: auto; }
}

@media all and (max-width: 590px)
{
	.mod_article form > .formbody > ul.custom_form 
	{
		grid-template-columns: 1fr;
	}
}