﻿/*----------
Blue button
------------*/

.button-blue{
    
	background-color: #18aed0;
	padding: 6px 16px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	color: #ffffff;
	font-size: 12px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	display: inline;
	width: auto;
	overflow: hidden;
    cursor: pointer;
}
	.button-blue:hover{background-color: #10829c;}
	.button-blue:active{background-color: #34c1e1;}

	.button-bewerk{background-image: url('/img/icons.png'); background-position: 10px -127px; background-repeat: no-repeat; padding: 6px 16px 6px 30px;}	
	.button-bewerk-sml{background-image: url('/img/icons.png'); background-position: 8px -127px; background-repeat: no-repeat; padding:0px; height: 28px; width: 30px; display: block;}

	.button-top{
    display:block;
    float:right;
}
/*----------
Green button
------------*/
.button-green{
	background-color: #7eb642;
	padding: 6px 16px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	color: #ffffff;
	font-size: 12px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	display: inline;
	width: auto;
    cursor: pointer;
	overflow: hidden;
}
	.button-green:hover{background-color: #6c9c38;}
	.button-green:active{background-color: #92ca56;}

	.button-toevoegen{background-image: url('/img/icons.png'); background-position: 10px -16px; background-repeat: no-repeat; padding: 6px 16px 6px 30px;}
	.button-login{background-image: url('/img/icons.png'); background-position: 11px 10px; background-repeat: no-repeat; padding: 6px 16px 6px 30px; display: inline; margin-left: 10px;}
	.button-toevoegen-sml{background-image: url('/img/icons.png'); background-position: 8px -16px; background-repeat: no-repeat; padding:0px; height: 28px; width: 30px; display: block;}
	
/*----------
Red button
------------*/
.button-red{
	background-color: #d32028;
	padding: 6px 16px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	color: #ffffff;
	font-size: 12px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	display: inline;
	width: auto;
    cursor: pointer;
	overflow: hidden;
}
	.button-red:hover{background-color: #bf1a22;}
	.button-red:active{background-color: #ef4c53;}

	.button-logout{background-image: url('/img/icons.png'); background-position: 11px 10px; background-repeat: no-repeat; padding: 6px 16px 6px 30px; display: inline; margin-left: 10px;}
	.button-x{background-image: url('/img/icons.png'); background-position: 10px -100px; background-repeat: no-repeat; padding: 6px 16px 6px 30px;}
	.button-x-sml{background-image: url('/img/icons.png'); background-position: 8px -100px; background-repeat: no-repeat; padding:0px; height: 28px; width: 30px; display: block;}
	
	
/*----------
Input
------------*/
::-webkit-input-placeholder{color: #94a5ae !important;}
:-moz-placeholder{color: #94a5ae !important; opacity: 1;}
::-moz-placeholder{color: #94a5ae !important; opacity: 1;}
:-ms-input-placeholder{color: #94a5ae !important;}
   
:invalid {box-shadow: none;}
:-moz-submit-invalid {box-shadow: none;}
:-moz-ui-invalid {box-shadow:none;}

textarea,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="file"],
input[type="password"]{
	border: 0px;
	background-color: #f0f3f4;
	padding: 8px 16px 7px 16px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	color: #3c4549;
	font-size: 12px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	display: inline-block;
	width: 285px;
	overflow: hidden;	
}
textarea {
    -webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
}
    textarea:focus,
	input[type="text"]:focus,
	input[type="number"]:focus,
	input[type="email"]:focus,
	input[type="file"]:focus,
	input[type="password"]:focus,
	input[type="text"]:hover,
	input[type="number"]:hover,
	input[type="email"]:hover,
	input[type="file"]:hover,
	input[type="password"]:hover{
		-webkit-box-shadow: 0px 0px 3px 0px rgba(24, 174, 208, 1.00);
		-moz-box-shadow:    0px 0px 3px 0px rgba(24, 174, 208, 1.00);
		box-shadow:         0px 0px 3px 0px rgba(24, 174, 208, 1.00);
	}
	.smalltxt{width: 137px !important; margin-right: 8px;}

/*----------
Login
------------*/	
.loginbox input[type="password"],
.loginbox input[type="text"]{
	border: 0px;
	background-color: #ffffff;
	padding: 8px 16px 7px 16px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	color: #3c4549;
	font-size: 12px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	display: inline-block;
	width: 285px;
	overflow: hidden;	
	-webkit-box-shadow: 0px 0px 6px 0px rgba(30, 30, 30, 0.10);
	-moz-box-shadow:    0px 0px 6px 0px rgba(30, 30, 30, 0.10);
	box-shadow:         0px 0px 6px 0px rgba(30, 30, 30, 0.10);
}	.loginbox input[type="text"]{margin-bottom: 10px;}

	.loginbox input[type="text"]:hover,
	.loginbox input[type="password"]:hover,
	.loginbox input[type="text"]:focus,
	.loginbox input[type="password"]:focus{
		background: #fff !important;
		-webkit-box-shadow: 0px 0px 3px 0px rgba(24, 174, 208, 1.00) !important;
		-moz-box-shadow:    0px 0px 3px 0px rgba(24, 174, 208, 1.00) !important;
		box-shadow:         0px 0px 3px 0px rgba(24, 174, 208, 1.00) !important;
	}
		.inputerror{
			background: #fff3f3 !important;
			-webkit-box-shadow: 0px 0px 3px 0px rgba(249, 8, 8, 1.00) !important;
			-moz-box-shadow:    0px 0px 3px 0px rgba(249, 8, 8, 1.00) !important;
			box-shadow:         0px 0px 3px 0px rgba(249, 8, 8, 1.00) !important;
		}



/*----------
Search
------------*/
.search{width: 300px; height: 30px; position: relative; display: inline-block}
	.search input[type="text"]{background: #fff; width: 300px;}
	.search input[type="button"]{
		border: 0px;
		background: #fff url('/img/icons.png') no-repeat 2px -45px;				
		width: 26px;
		padding: 0px;
		margin: 0px;
		height: 26px;
		cursor: pointer;
		position: absolute;
		right: 3px;
		top: 2px;		
		
		-webkit-border-top-right-radius: 30px;
		-webkit-border-bottom-right-radius: 30px;
		-moz-border-radius-topright: 30px;
		-moz-border-radius-bottomright: 30px;
		border-top-right-radius: 30px;
		border-bottom-right-radius: 30px;
	}

/*----------
Select
------------*/
.selectbox{ 
	border: 0px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	color: #3c4549;
	font-size: 12px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	display: inline-block;
	overflow: hidden;
	background: #f0f3f4 url('/img/icons.png') no-repeat right 10px top -72px;
	width: 285px;
	
}
.white {background: #fff url('/img/icons.png') no-repeat right 10px top -72px;}
	.selectbox select{
		background: transparent;   
	   padding: 0px 16px 0px 16px;
	   font-size: 12px;
	   line-height: 1;
	   border: 0;
	   border-radius: 0;   
		width: 320px;
	   -webkit-appearance: none;
	   -moz-appearance:    none;
	   appearance:         none;
	   }
			.selectbox:hover,
			.selectbox:focus{
				-webkit-box-shadow: 0px 0px 3px 0px rgba(24, 174, 208, 1.00);
				-moz-box-shadow:    0px 0px 3px 0px rgba(24, 174, 208, 1.00);
				box-shadow:         0px 0px 3px 0px rgba(24, 174, 208, 1.00);
			}	 
	   
	  