html{
	height:100%;
}
body{
	height:100%;
	font-size:18px;
	line-height:1.3;
	background:#FFF;
}
body, input, textarea, select, a{
	font-family:Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
	color:#333;
}
h1{
	position:relative;
	margin-bottom:30px;
	font-size:32px;
	font-weight:normal;
	line-height:1;
}
	h1 span{
		display:block;
		font-size:16px;
		line-height:32px;
	}
	h1 span.right{
		position:absolute;
		top:0px;
		right:0px;
	}
input.text{
	max-width:100%;
	padding:5px 6px;
	border:solid 1px #333;
}
input.date{
	max-width:100%;
	padding:4px 6px;
	width:10em;
	border:solid 1px #333;
	box-sizing:border-box;
}
.button, input.submit{
	display:inline-block;
	padding:5px 6px;
	background:#AAA;
	border:solid 1px #AAA;
	color:#FFF;
	cursor:pointer;
	text-align:left;
	text-decoration:none;
}
input.submit{
	padding:7px 40px 7px 15px;
	box-sizing:border-box;
	background-image:url(../images/arrow_right.png);
	background-repeat:no-repeat;
	background-position:right center;
	font-size:20px;
}
input.button, input.submit, button.submit{
	background-color:#126B27;
	border:solid 1px #126B27;
}
.button:hover, input.submit:hover{
	background-color:#333;
	border:solid 1px #333;
}
textarea{
	max-width:100%;
	width:225px;
	height:75px;
	padding:5px 6px;
	border:solid 1px #333;
	box-sizing:border-box;
}
select{
	padding:5px 6px;
	border:solid 1px #333;
	box-sizing:border-box;
	background:#FFF;
	font-size:16px;
}
	select option{
		color:#333;
	}
.icon{
	padding-left:50px !important;
	background:no-repeat 10px 5px;
}
.icon_company{
	background-image:url(../images/input/company.png);
}
.icon_calendar{
	background-image:url(../images/input/calendar.png);
}
.icon_number{
	background-image:url(../images/input/number.png);
}
.icon_person{
	background-image:url(../images/input/person.png);
}
.icon_phone{
	background-image:url(../images/input/phone.png);
}
.icon_email{
	background-image:url(../images/input/email.png);
}
.icon_password{
	background-image:url(../images/input/password.png);
}
.icon_article{
	background-image:url(../images/input/article.png);
}
.icon_comment{
	background-image:url(../images/input/comment.png);
}
th, td{
	padding:0px 0px 4px 4px;
	text-align:left;
	vertical-align:middle;
}
* + th, * + td{
	padding:0px 0px 4px 4px;
}
tr.complete td{
	color:#AAA;
}
th.top{
	vertical-align:top;
}
.data thead th{
	
}
.data tfoot td{
	border-top:solid 1px #AAA;
}
.order_by{
	display:inline-block;
	text-decoration:none;
}
	.order_by:after{
		content:"";
		position:relative;
		display:inline-block;
		margin-left:5px;
		width:6px;
		height:6px;
		border-top:solid 2px #333;
		border-right:solid 2px #333;
		transform:rotate(-45deg);
		opacity:.25;
	}
	.order_by_current:after{
		top:-2px;
		transform:rotate(135deg);
		opacity:.75;
	}
	.order_by[href$="/desc/"]:after{
		top:0;
		transform:rotate(-45deg);
	}
	.order_by:hover:after{
		opacity:1;
	}
label{
	display:block;
	position:relative;
	cursor:pointer;
}
	label input.checkbox{
		position:absolute;
		top:0px;
		left:0px;
		visibility:hidden;
	}
		label input.checkbox ~ span{
			position:relative;
			display:block;
			padding:10px 15px 10px 45px;
			background:#AAA;
			color:#FFF;
		}
		label input.checkbox ~ span::before{
			content:"";
			position:absolute;
			top:14px;
			left:16px;
			width:8px;
			height:8px;
			border:solid 2px #FFF;
		}
	label:hover input.checkbox ~ span, label input.checkbox:checked ~ span{
		background:#333;
	}
		label input.checkbox:checked ~ span::before{
			top:12px;
			left:14px;
			width:16px;
			height:16px;
			border:0px;
			background:url(../images/check.png) center no-repeat;
		}
.options{
	text-align:right;
}
	.options a{
		display:inline-block;
		width:24px;
		height:24px;
		background:no-repeat center;
		background-size:contain;
	}
	.options a.change{
		background-image:url(../images/change_24.png);
	}
	.options a.delete{
		background-image:url(../images/remove_24.png);
	}
.delete{
	display:block;
	width:15px;
	height:15px;
	background:url(../images/cross_15.png) no-repeat center;
}
.center{
	position:relative;
	margin:0px auto;
	margin:0px 50px;
}
.msg{
	margin-bottom:24px;
	padding:15px 0px;
	border-top:solid 1px #CCC;
	border-bottom:solid 1px #CCC;
	color:#2BB24C;
}
.msg_error, .error{
	margin-bottom:24px;
	color:#CD0025;
	background:rgba(255,255,255,.5);
}
.cyclus_approve .error{
	padding:10px;
}
.big input.text, .big .button, .big textarea, .big .file_upload_dropdown > a, .big .file_button, .big select{
	width:100%;
	padding:10px 12px;
	box-sizing:border-box;
	font-size:20px;
}
.big * + input.text, .big * + .button, .big * + textarea, .big * + .file_upload, .big * + .file_upload_dropdown, .big * + select, .big * + label{
	margin-top:22px;
}
.big input.button{
	background-image:url(../images/arrow_right.png);
	background-repeat:no-repeat;
	background-position:right center;
}
.big textarea{
	height:150px;
}
.clear{
	clear:both;
}
.file_16, .file_32{
	position:relative;
	display:inline-block;
	padding-left:21px;
	background:url(../images/icons/file.png) no-repeat left top;
	background-size:16px;
	line-height:16px;
	max-width: 100%;
	box-sizing: border-box;
	word-break:break-all;
}
.file_32{
	padding-left:37px;
	line-height:32px;
	background-size:32px;
}
.file_doc, .file_docx{
	background-image:url(../images/icons/word.png);
}
.file_xls, .file_xlsx{
	background-image:url(../images/icons/excel.png);
}
.file_txt{
	background-image:url(../images/icons/txt.png);
}
.file_pdf{
	background-image:url(../images/icons/pdf.png);
}
.file_jpg, .file_jpeg, .file_gif, .file_png{
	background-image:url(../images/icons/image.png);
}
.file_preview{
	margin-top:100px;
}
	.file_preview span{
		position:absolute;
		left:0px;
		bottom:100%;
		margin-bottom:5px;
		width:95px;
		height:95px;
		border:solid 1px #DDD;
		background:no-repeat center;
		background-size:contain;
	}
.data{
	width:100%;
}
	.data thead{
		
	}
		.data thead th{
			padding:5px;
		}
	.data tbody{
	
	}
		.data tbody td{
			padding:5px;
			border-top:solid 1px #EEE;
		}
		.data tbody tr[href]{
			cursor:pointer;
		}
		.data tbody tr[href]:hover td{
			background:#F5F5F5;
		}
/* cyclus */
.cyclus{

}
* + .cyclus{
	margin-top:20px;
}
	.cyclus_info{
		margin-bottom:20px;
		padding-bottom:10px;
		border-bottom:dotted 2px #000;
	}
		.cyclus_info .options{
			float:right;
		}
	.cyclus_comments{

	}
		.comment{
			position:relative;
			padding:5px 10px;
			background:#EEE;
			width:95%;
			box-sizing:border-box;
		}
		.comment + .comment{
			margin-top:20px;
		}
		.comment_verscombi{
			margin-left:5%;
		}
		/*
		.comment_verscombi::before{
			content:"";
			position:absolute;
			top:-1px;
			left:-5px;
			width:0px;
			height:0px;
			border-bottom:solid 10px #126B27;
			border-left:solid 10px transparent;
			border-right:solid 10px transparent;
			-ms-transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
			overflow:hidden;
		}
		*/
		.comment:nth-child(2n){
			background:#F5F5F5;
		}
			.comment_header{
				position:relative;
				border-bottom:solid 1px #CCC;
				padding-bottom:5px;
				color:#777;
				font-size:90%;
			}
				.comment_user{
					
				}
				.comment_date{
					/*
					position:absolute;
					top:0px;
					right:0px;
					*/
				}
			.comment_text{
				padding:5px 0px;
			}
			.comment_attachments{
				border-top:solid 1px #CCC;
				padding-bottom:5px;
			}
				.comment_attachments a{
					margin-top:5px;
				}
				.comment_attachments .file_preview{
					margin-top:105px;
				}
	.cyclus form{
		margin-top:20px;
	}
.form_attachments{
	position:relative;
	top:11px;
}
	.form_attachments > div{
		position:relative;
		padding:10px 40px 10px 0px;
	}
	.form_attachments > div + div{
		border-top:solid 1px #CCC;
	}
		.form_attachments > div a{
			position:absolute;
			top:16px;
			right:10px;
			width:20px;
			height:20px;
			background:url(../images/remove.png) no-repeat center;
			background-size:contain;
		}
.cyclus_approve{
	margin-top:20px;
	padding:10px;
	background:#666;
	color:#FFF;
}
.cyclus_error{
	margin-top:20px;
	padding:10px;
	border:solid 1px #CD0025;
	color:#CD0025;
}
/* file upload */
.file_upload_dropdown{
}
	.file_upload_dropdown > a{
		display:block;
		position:relative;
		padding:5px 6px;
		border:solid 1px #AAA;
		background:url(../images/arrow_down.png) no-repeat right center #AAA;
		line-height:20px;
		border-radius:2px;
		text-align:left;
		color:#FFF;
		overflow:hidden;
		cursor:pointer;
		text-decoration:none;
	}
	.file_upload_dropdown_container{
		padding-top:5px;
	}
		.file_upload_dropdown_container_comment{
			padding:5px 12px;
			background:#DDD;
			color:#999;
		}
		.file_upload_dropdown_container .file_button{
			background-image:url(../images/add.png);
			background-repeat:no-repeat;
			background-position:12px center;
			padding-left:40px;
		}
		.file_upload_dropdown_container label{
			padding:10px 12px;
			background:#EEE;
		}
			.file_upload_dropdown_container label a{
				text-decoration:none;
			}
.file_upload{
	overflow:hidden;
}
	.file_button{
		display:inline-block;
		position:relative;
		width:80px;
		padding:5px 6px;
		border:solid 1px #AAA;
		background:#AAA;
		line-height:20px;
		border-radius:2px;
		text-align:left;
		color:#FFF;
		overflow:hidden;
		cursor:pointer;
	}
	@media all and (min-width: 1px){
		.file_button{
			width:auto;
		}
	}
			.file_button img{
				display:block;
				margin:3px 10px;
			}
			.file_button_text{
				padding:2px 0px 2px 70px;
				background:url(../images/input/upload.png) no-repeat 0px center;
			}
		.file_loader{
			position:absolute;
			left:0px;
			bottom:0px;
			width:0%;
			height:3px;
			background:#e2722a;
		}
		.file_button input{
			position:absolute;
			top:-5px;
			right:-5px;
			font-size:100px;
			width:110%;
			opacity:.01;
			filter:alpha(opacity=1); 
			z-index:999;
			cursor:pointer;
		}
		.file_button input::-webkit-file-upload-button{
			cursor:pointer;
		}
#body{
	min-height:100%;
	background:#126B27;
}
#header{
	height:100px;
	background:#FFF;
}
	#header .center{
		height:100%;
	}
	#page_logo{
		position:relative;
		top:10px;
	}
		#page_logo::before{
			content:"";
			display: inline-block;
			height: 80%;
			vertical-align: middle;
		}
		#page_logo img{	
			max-height:80px;
			vertical-align: middle;
		}
	#menubutton{
		display:none;
	}
	#menu{
		position:absolute;
		top:37px;
		right:0px;
		height:26px;
	}
		#menu_home{
			display:none;
		}
		#menu a{
			float:left;
			position:relative;
			font-size:19px;
			text-decoration:none;
			line-height:26px;
			color:#333;
		}
		#menu a + a{
			margin-left:19px;
		}
			#menu a + a::before{
				content:"";
				position:absolute;
				top:4px;
				left:-10px;
				width:1px;
				height:19px;
				background:#333;
			}
#container{
	padding:50px 0px;
}
	.content{
		position:relative;
		margin:0px auto;
		padding:35px 45px;
		background:#FFF;
	}
/* login */
#login{
	width:310px;
}
/* klachten */
#cyclus_reopen{
	float:right;
	margin-left:20px;
	min-height:30px;
	padding:24px;
	background:#666;
	color:#FFF;
}
input[name=tab]{
	display:none;
}
#cyclus_tabs{
	display:none;
}
#cyclus_supplier{
	float:left;
	width:83%;
}
	#cyclus_supplier h1{
		display:none;
	}
#cyclus_customer{
	float:left;
	width:83%;
}
	#cyclus_customer h1{
		display:none;
	}
#cyclus_tabs ~ #cyclus_supplier{
	margin-right:2%;
	width:40%;
}
	#cyclus_tabs ~ #cyclus_supplier h1{
		display:block;
	}
#cyclus_tabs ~ #cyclus_customer{
	width:40%;
}
	#cyclus_tabs ~ #cyclus_customer h1{
		display:block;
	}
#attachments{
	float:right;
	width:15%;
}
#attachments .file_preview{
	margin-top:105px;
}
* + #leverancier_cyclus{
	margin-top:20px;
}
@media all and (max-width: 899px){
	.mobile_show_900{
		display:none;
	}
}
@media all and (max-width: 750px){
	h1 span.right{
		position:static;
	}
	#body{
		width:100%;
		overflow:hidden;
	}
	#header{
		position:relative;
		z-index:2;
	}
		#header .center{
			margin:0px 10px;
		}
		#page_logo img{
			max-width:100%;
			max-height:none;
		}
		#menubutton{
			display:block;
			position:absolute;
			right:0px;
			bottom:10px;
			padding-left:25px;
			line-height:15px;
			font-size:23px;
			font-weight:bold;
			text-transform:uppercase;
			cursor:pointer;
		}
			#menubutton span{
				position:absolute;
				top:0px;
				left:0px;
				width:19px;
				height:3px;
				background-color:#333;
			}
				#menubutton span::before{
					content:"";
					position:absolute;
					top:6px;
					left:0px;
					width:100%;
					height:3px;
					background-color:#333;
				}
				#menubutton span::after{
					content:"";
					position:absolute;
					top:12px;
					left:0px;
					width:100%;
					height:3px;
					background-color:#333;
				}
		#menu{
			position:absolute;
			top:100%;
			right:-160px;
			width:150px;
			height:auto;
			padding:0px;
			background:#FFF;
			text-align:right;
			transition:right .5s ease;
		}
			#menu a{
				float:none;
				display:block;
				padding:0px 10px;
				border-top:solid 1px #333;
				line-height:38px;
			}
			a#menu_home{
				display:block;
				position:absolute;
				top:0px;
				left:0px;
				width:100%;
				box-sizing:border-box;
			}
			#menu a + a{
				margin:0px;
			}
				#menu a + a::before{
					display:none;
				}
		.menu #menu{
			right:-10px;
		}
		#container{
			position:relative;
			right:0px;
			width:100%;
			padding:10px 0px;
			overflow:hidden;
			transition:right .5s ease;
		}
		#container.center{
			margin:0px;
		}
		.menu #container{
			right:160px;
		}
		#body .content{
			margin:0px 10px;
			width:auto;
			padding:20px;
		}
		#cyclus_reopen{
			min-height:0px;
			padding:10px;
		}
		#cyclus_tabs{
			display:block;
			margin-bottom:20px;
			border-bottom:solid 1px #333;
			overflow:hidden;
		}
			#cyclus_tabs label{
				float:left;
				padding:5px 10px;
				border:solid 1px #999;
				border-bottom:none;
				background:#EEE;
				color:#999;
			}
		#container #cyclus_supplier, #container #cyclus_customer{
			float:none;
			width:auto;
		}
		#cyclus_tabs ~ #cyclus_supplier, #cyclus_tabs ~ #cyclus_customer{
			display:none;
		}
		#attachments{
			display:none;
		}
		#tab_l:checked ~ #cyclus_tabs label[for=tab_l], #tab_k:checked ~ #cyclus_tabs label[for=tab_k]{
			background:#FFF;
			color:#333;
		}
		#tab_l:checked ~ #cyclus_supplier, #tab_k:checked ~ #cyclus_customer{
			display:block;
		}
	#login_logo img{
		max-width:80%;
	}
}