/* HOME OFFERTE FORMULIER */

.subform .webform-field{
	width: calc(50% - 10px);
	margin: 5px !important;
	float:left;
}

	.subform .webform-field input[type=text],
	.subform .webform-field select{
		width:100%;
		min-width:inherit;
	}
	
	.subform .webform-field.field-textarea{
		width:calc(100% - 10px);
		float:none;
		clear:both;
		height:50px;
		box-sizing:border-box;

	}

	.subform .webform-field-height {
		height: 60px;
	}

	.subform .webform .webform-field.field-textarea textarea{
		width:100%;
		height: 100%;
		box-sizing:border-box;
		resize: none;
		padding: 5px 12px;
	}
	
.subform .send_button{
	margin:0;
	padding:0;
	float:right;
	height:36px;
	margin-right: 5px;
}

	.subform .send_button a{
		width:154px;
	}

.subform .webform-field:nth-child(2n+0):not(.error_text){
	margin-right:0;
}

/******* CONTACT FORMULIER *******/

#contact.webform{
	width:420px;
	max-width: 100%;
	margin: 0 -5px;
}

.webform .webform-field{
	margin:0 10px 10px 0;
	float:left;
}


#contact.webform .webform-field {
	width: calc(50% - 10px);
	margin: 0 5px 10px;
}
	#contact.webform .webform-field input,
	#contact.webform .webform-field select {
		width: 100%;
		min-width: 1px;
		margin-bottom: 0;
	}


#contact.webform .webform-field.field-textarea {
	width: calc(100% - 10px);
	margin: 0 5px;
}
	#contact.webform .webform-field.field-textarea textarea{
		width:100%;
		height:80px;
	}

.webform .required_text{
	display:none;
}

.webform .error_text{
	color:#E70003;
	padding-bottom:30px;
}

.webform-field input[type="text"],
.webform-field input[type="password"],
.webform-field input[type="email"],
.webform-field input[type="url"],
.webform-field input[type="date"],
.webform-field input[type="month"],
.webform-field input[type="time"],
.webform-field input[type="datetime"],
.webform-field input[type="datetime-local"],
.webform-field input[type="week"],
.webform-field input[type="number"],
.webform-field input[type="search"],
.webform-field input[type="tel"],
.webform-field input[type="color"],
.webform-field select,
.webform-field textarea,

.webform-table input[type="text"],
.webform-table input[type="password"],
.webform-table input[type="email"],
.webform-table input[type="url"],
.webform-table input[type="date"],
.webform-table input[type="month"],
.webform-table input[type="time"],
.webform-table input[type="datetime"],
.webform-table input[type="datetime-local"],
.webform-table input[type="week"],
.webform-table input[type="number"],
.webform-table input[type="search"],
.webform-table input[type="tel"],
.webform-table input[type="color"],
.webform-table select,
.webform-table textarea {
	font-family:'Roboto';
    padding: 0px 12px;
    display: inline-block;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	width:194px;
	height:40px;
	font-size:12px;
	color:#333;
}

.webform-table td{
	vertical-align:top;
}

.wf-group .webform-table tr.field-nopadding td.title{
	padding-top:0;
}

.wf-group .webform-table tr td.title{
	padding-top:11px;
}

.webform-table textarea{
	min-height:80px;
}

.webform-table tr.error input,
.webform-table tr.error textarea,
.webform-field.error input{
	border:1px solid #E70003;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.webform-field input:not([type]) {
    padding: 0.5em 0.6em;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */
/* May be able to remove this tweak as color inputs become more standardized across browsers. */
.webform-field input[type="color"] {
    padding: 0.2em 0.5em;
}


.webform-field input[type="text"]:focus,
.webform-field input[type="password"]:focus,
.webform-field input[type="email"]:focus,
.webform-field input[type="url"]:focus,
.webform-field input[type="date"]:focus,
.webform-field input[type="month"]:focus,
.webform-field input[type="time"]:focus,
.webform-field input[type="datetime"]:focus,
.webform-field input[type="datetime-local"]:focus,
.webform-field input[type="week"]:focus,
.webform-field input[type="number"]:focus,
.webform-field input[type="search"]:focus,
.webform-field input[type="tel"]:focus,
.webform-field input[type="color"]:focus,
.webform-field select:focus,
.webform-field textarea:focus {
    outline: 0;
    outline: thin dotted \9; /* IE6-9 */
    border-color: #129FEA;
}

.webform .field input::-webkit-input-placeholder,
.webform .field select::-webkit-input-placeholder,
.webform .field textarea::-webkit-input-placeholder { /* WebKit browsers */
    color:#ccc;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.webform-field input:not([type]):focus {
    outline: 0;
    outline: thin dotted \9; /* IE6-9 */
    border-color: #129FEA;
}

.webform-field input[type="file"]:focus,
.webform-field input[type="radio"]:focus,
.webform-field input[type="checkbox"]:focus {
    outline: thin dotted #333;
    outline: 1px auto #129FEA;
}
.webform-field .pure-checkbox,
.webform-field .pure-radio {
    margin: 0.5em 0;
    display: block;
}

.webform-field input[type="text"][disabled],
.webform-field input[type="password"][disabled],
.webform-field input[type="email"][disabled],
.webform-field input[type="url"][disabled],
.webform-field input[type="date"][disabled],
.webform-field input[type="month"][disabled],
.webform-field input[type="time"][disabled],
.webform-field input[type="datetime"][disabled],
.webform-field input[type="datetime-local"][disabled],
.webform-field input[type="week"][disabled],
.webform-field input[type="number"][disabled],
.webform-field input[type="search"][disabled],
.webform-field input[type="tel"][disabled],
.webform-field input[type="color"][disabled],
.webform-field select[disabled],
.webform-field textarea[disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.webform-field input:not([type])[disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3;
}
.webform-field input[readonly],
.webform-field select[readonly],
.webform-field textarea[readonly] {
    background: #eee; /* menu hover bg color */
    color: #777; /* menu text color */
    border-color: #ccc;
}

.webform-field input:focus:invalid,
.webform-field textarea:focus:invalid,
.webform-field select:focus:invalid {
    color: #b94a48;
    border-color: #ee5f5b;
}
.webform-field input:focus:invalid:focus,
.webform-field textarea:focus:invalid:focus,
.webform-field select:focus:invalid:focus {
    border-color: #e9322d;
}
.webform-field input[type="file"]:focus:invalid:focus,
.webform-field input[type="radio"]:focus:invalid:focus,
.webform-field input[type="checkbox"]:focus:invalid:focus {
    outline-color: #e9322d;
}
.webform-field select {
    border: 1px solid #ccc;
    background-color: white;
}
.webform-field select[multiple] {
    height: auto;
}
.webform-field label {
    margin: 0.5em 0 0.2em;
}
.webform-field fieldset {
    margin: 0;
    padding: 0.35em 0 0.75em;
    border: 0;
}
.webform-field legend {
    display: block;
    width: 100%;
    padding: 0.3em 0;
    margin-bottom: 0.3em;
    color: #333;
    border-bottom: 1px solid #e5e5e5;
}

.wf-group {
	float:left;
	padding:0 60px 30px 0;
	box-sizing:border-box;
}

	.wf-group .webform-table{
		border:0;
	}

		.wf-group .webform-table tr td{
			padding:0 0 10px 0;
			border:0;
		}
		
			.wf-group .webform-table tr td.title{
				padding-right:10px;
				color:#6d6d6d;
			}
			
				.wf-group .webform-table tr td.title span{
					font-size:12px;
					color:#bababa;
				}

.webform-captcha-image{
		position:relative;
	}
	
	.webform-captcha-image .reload{
		position:absolute;
		right:18px;
		top:5px;
		cursor:pointer;
	}
	
.webform-field.error .errorsign{
	display:block;
}

.webform-field .errorsign{
	position:absolute;
	background:url(/images/webform/error.png) no-repeat;
	width:23px;
	height:28px;
	margin:-15px 0 0 220px;
	display:none;
}

.wf-group.group-group-left,
.wf-group.group-group-right {
	box-sizing:border-box;
	float:left;
}

.wf-group.group-group-left {
	padding-right:10px;
}

.wf-group.group-group-right {
	padding-left:10px;
}

.wf-group-title{
	color:#062b48;
	font-weight:800;
	font-size:20px;
	padding-bottom:30px;
}

.send_button {
	padding-top:20px;
	clear:both;
}

.send_button .btn {
	float:right;
}

/***** Custom classes ******/

.group-water{
	width:403px;
}

.wf-group.group-koffie,
.wf-group.group-soep{
	padding-right:0;
	width:332px;
}

.group-overig{

}

	.group-overig .webform-table td.title{
		/*width:134px;*/
	}
	
	.group-overig .webform-table tr:last-child td{
		padding-bottom:0;
	}

#bestellen.webform .webform-table .field{
	text-align: right;
}

	#bestellen.webform .webform-table .field input[type="text"]{
		width:60px;
	}

#bestellen.webform .wf-group{
	width:50%;
}

	#bestellen.webform .wf-group:nth-child(odd) {
		clear:both;
	}

#bestellen.webform .send_button{
	display:none;
}

#login.webform .webform-field{
	margin:0;
	float:none;
}

#login.webform .webform-field input{
	width:100%;
	margin-bottom:10px;
}

#login.webform .error_text{
	display:block;
	position:absolute;
	margin-top:120px;
	width:250px;
}

#orderNoRegistration .logged-in .webform-table .field-bedrijf,
#orderNoRegistration .logged-in .webform-table .field-bedrijf,
#orderNoRegistration .logged-in .webform-table .field-telefoon,
#orderNoRegistration .logged-in .webform-table .field-adres,
#orderNoRegistration .logged-in .webform-table .field-postcode,
#orderNoRegistration .logged-in .webform-table .field-plaats,
#orderNoRegistration .logged-in .webform-table .field-aanhef,
#orderNoRegistration .logged-in .webform-table .field-naam,
#orderNoRegistration .logged-in .webform-table .field-email,
#orderNoRegistration .logged-in .webform-table .field-debiteurnummer
{
    display:none;
}
#orderNoRegistration .logged-in .webform-table .field-textarea textarea
{
    width: 100%;
}