/* 
	Document   : css
	Created on : 20-okt-2012, 22:50:53
	Author	 : FOX Creation
	Description:
		Grijs:			#464646;
		Oranje: (lijst)	#ff5b00;	[header balk bovenaan - dunne lijn]
		Oranje: (rest)	#ff9c00;	[header balk onderaan]
		Licht grijs		#c7c4c6;	[border bij kolommen]
		
*/

@import url('https://fonts.googleapis.com/css?family=Lato:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Indie+Flower:400,700&display=swap');

@font-face {
	font-family: 'Cooper';
	src: url('/fonts/cooper.eot');
	src: url('/fonts/cooper.eot?#iefix') format('embedded-opentype'),
		 url('/fonts/cooper.woff') format('woff'),
		 url('/fonts/cooper.ttf') format('truetype'),
		 url('/fonts/cooper.svg#cooper') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Default settings */
html, body{
	height:			100%;			/* CSS Sticky Footer Code */
}

*{
	box-sizing: 	border-box;
}

body{
	margin:			0;
	padding:		0;
	background:		white;
	font-family:	'Lato', Arial;
	font-weight:	400;
	font-size:		14px;
}

a{			
	color:				#ff5b00;
	font-weight:		bold;
	text-decoration:	none;
}

.header a, .footer a{
	color:				white;
	font-weight:		bold;
}
			
a:hover{	text-decoration:underline;	}
a img{		border:			0;			}

.left{		float:		left;		}
.right{		float:		right;		}
.clear{		clear:		both;	display:block;	}

h1, h2, h3, h4{
	font-family:		'Cooper';
	color:				#ff5b00;
}

h1{
	font-size:			175%;
}
h2{
	font-size:			125%;
}

.orange{
	color:				#ff5b00;	
}

::selection{
	background-color:	#FC9A26;
	color:				white;
}

.mobile{				display: none !important; 		}
.desktop{				display: block !important;	 	}
/* Default settings */


/* Pagina opbouw */
.wrapper_page{
	min-height:			100%;				/* CSS Sticky Footer Code */
	height:				auto !important;
	height:				100%;
	margin-bottom:		-100px;				/* hoogte footer */
}

.header, .footer, .wrapper_container{
	width:				100%;
	max-width: 			950px;
	margin:				0px auto;
}
/* Einde Pagina opbouw  */



/* Header */
.wrapper_header{
	width:				100%;
	background:			url('/images/header_bg.jpg') bottom repeat-x #464646;
	min-height:			160px;
}

	.header{
		min-height:			160px;
	}
	
	.header .topHeader{
		width:				100%;
		height:				150px;
	}

	.header img#logo{
		width:				145px;
		height:				150px;
		display:			inline-block;
	}

	.header #logoBlock{
		display:			inline-block;
		padding:			1.5rem 3rem;
		vertical-align:		top;
	}

		#logoBlock h1, #logoBlock h2{
			display:			inline-block;
		}

		.topHeader #logoBlock h1{
			font-family:		'Indie Flower';
			font-size:			4rem;
			margin:				0;
		}

		.topHeader #logoBlock h2{
			font-family:		'Cooper';
			color:				white;
			font-size:			3rem;
			margin:				0;
		}

		.topHeader #logoBlock h4{
			font-family:		'Indie Flower';
			font-weight:		normal;
			font-style: 		italic;
			color:				white;
			margin:				-1.5rem 0;
			padding:			0;
			width:				100%;
			text-align: 		right;
		}
	
	.topHeader .profielBox{
		background:			url('/images/profielbox_bg.png') bottom left no-repeat;
		width:				237px;
		min-height:			100px;
		display:			block;
		
		float:				right;
		text-align:			right;
		color:				white;

		box-sizing: 		border-box;
		padding:			1rem 1rem 0.5rem 1rem;
		margin-right:		-1rem; /* align with rest below */
	}
	
		.profielBox h5{
			margin:				0;
			padding:			0;

			color:				white;
			font-family:		'Indie Flower';
			font-size:			20px;
			letter-spacing:		1px;
			line-height:		0.8em;
		}

		.profielBox ul{
			list-style:			none;
			margin:				0;
		}

		.profielBox li{
			margin:				.5em 0;
		}
		.profielBox li.groupStart{ 			margin-bottom: 	0; }
		.profielBox li.groupStart + li{ 	margin-top: 	0; }
		
		.profielBox p sup{
			color:				#ff9c00;
		}
		
		.profielBox form, .profielBox p{
			margin:				0;
			padding:			0px;
		}

		.profielBox .smallform .row label{
			display:			inline-block;
			width:				45%;
			padding-right:		0.5em;
		}

		.profielBox .smallform .row input{
			display:			inline-block;
			width:				55%;
		}
		
	.header .lowHeader{
		float:					right;
		width:					90%; /* 950 - 145px */
		text-align:				right;
		margin-bottom:			1%;
	}

		.lowHeader ul{
			margin:					0;
			padding:				0;
		}

		.lowHeader ul li{
			display:				inline-block;
			margin-right:			2vw;
		}

			.header .lowHeader li:last-of-type{
				margin-right:			0px;
			}

		.lowHeader ul li a{
			font-weight:			bold;
			font-size:				1rem;
		}
			.lowHeader a:hover{
				text-decoration:		none;
				color:					#464646;
			}
/* Einde header */

/* Container */
	[class^='flash-']{
		display:				block;
		margin:					1rem auto 0px;
		padding:				1rem 50px;
		border:					1px solid;		
		background-repeat:		no-repeat;
		background-position:	10px center;
	}

	.flash-info {
		color:					#00529B;
		background-color:		#BDE5F8;
		background-image:		url('/images/icons/info.png');
	}
	.flash-success {
		color:					#4F8A10;
		background-color:		#DFF2BF;
		background-image:		url('/images/icons/success.png');
	}
	.flash-warning {
		color:					#9F6000;
		background-color:		#FEEFB3;
		background-image:		url('/images/icons/warning.png');
	}
	.flash-error {
		color:					#D8000C;
		background-color:		#FFBABA;
		background-image:		url('/images/icons/error.png');
	}

	/** reset for when in modal */
		#dialogFlash{
			width:					100%;
			border-color: 			initial;
			color:					white;
			background:				#ff5b00;
			margin:					1rem 0;
			padding:				1rem 2rem;
		}

	.container{
		margin:					5% auto;
		margin-bottom:			0px;
		padding-bottom:			30px;
	}

	.container.admin{
		margin-top:				0;
	}
	
	.container p{
		clear:					both;
		padding:				.5em 0px;
		line-height:			1.5em;
	}
	
	.container #hulp_stappen{
		margin-top:				2rem;
		padding-top:			2rem;
		clear:					both;
		min-height:				150px;
		border-top:				1px dashed #476474;
	}

	.container .kolom_drie{
		display:				inline-block;
		vertical-align: 		top;
		width:					33%;
		padding-right:			2em;
		
		text-align:				justify;
		line-height:			1.5em;
	}

		.kolom_drie:first-of-type{		padding-right:	3em;						}
		.kolom_drie:last-of-type{		padding-left:	1em;	padding-right: 0;	}
	
		.kolom_drie img{
			float:			right;
			width:			2rem;
			max-width:		65px;
			margin:			0.5rem 0;
		}

		.kolom_drie h3{
			color:			#464646;
		}

		.kolom_drie .hulp_tip{
			display:		block;
			margin-top:		5%;
			padding:		1em 1.5em 1em 0;
			background:		#FAFAFA;
		}

			.hulp_tip p{
				margin:		0;
				padding: 	.5rem 0 0 .5rem;
			}

		.kolom_drie ul{
			margin-top:		0;
			padding-top:	0;
			list-style: 	square;
			text-align:		left;
		}

		.kolom_drie #register-form{
			text-align:		left;
			padding-left:	10px;
		}

		.kolom_drie #register-form label{
			display:		inline-block;
			width: 			40%;
			padding-right:	0.5em;
			text-align:		right;
		}

		.kolom_drie #register-form input{
			display:		inline-block;
			width: 			60%;
		}

		.public-link-support{ /* public link invite */
			font-size:		0.7rem;
			margin-top:		5rem;
		}

			.public-link-support h4{
				margin-bottom:	0;
				padding-bottom:	0;
			}

			.public-link-support .hulp_tip{
				margin-top:		0;
			}

			.kolom_drie ol{
				margin:			0 1.5rem;
				padding:		0;
			}
		
		label[for='User_geslacht']{
			margin-top:			30px;
		}
		
		.genderRadio{
			display:			inline-block;
			width:				100px;
			height:				65px;
		}
		
		.genderRadio label{
			width:				30px !important;
		}
		
		.genderRadio input{
			display:			inline-block;
			margin:				30px 15px 30px 0px !important;
			vertical-align:		top;
		}
		
		.genderRadio img{
			height:				65px;
			display:			inline-block;
		}
		
		#register_dialog{		display:	none;}

		#profile_edit input, #contact-form input, #contact-form textarea{
			width:				50%;
			max-width:			300px;
		}
		#profile_edit #passwordChange, #passwordChange input{
			display:			inline-block;
			vertical-align: 	middle;
			margin-top:			0.35em;
		}
	
	#spacer{									/* CSS Sticky footer */
		clear:				both;
		display:			block !important;
		height:				100px;				 /* hoogte footer */
	}
	
	.conditions{
		display:			block;
		width:				100%;
	}
	
	.conditions .privacy, .conditions .voorwaarden{
		float:				left;
		width:				400px;
	}
	
	.conditions .privacy p, .conditions .voorwaarden p{
		margin-top:		0px;
		padding-right:		30px;
		text-align:			justify;
	}
	
	.conditions .privacy h3, .conditions .voorwaarden h3{
		margin:				0;
		padding:			0;
	}	
	
	table.changelog{
		width:				100%;
	}
	
	.changelog th{
		border-bottom:		1px groove #ff5b00;
	}
	
	
	/* FAQ */
	.faq, .faq ul{
		list-style:			none;
		margin:				0;
		padding:			0;
	}
	
	.faq li[id^='q']{
		cursor:					pointer;
		display:				block;
		min-height:				30px;
		width:					100%;
	}

	.faq ul{
		display:			none;
	}
	
	.faq .answer li{
		margin:					0px 1px;
		border:					1px solid #464646;
		padding:				5px 25px;
	}

	.faq .answer li p{
		margin:				0px 0px 10px 0px;
		padding:			0;
		text-align:			justify;
	}

	.faq .answer ul{ /* List item in answer */
		display:			block !important;
		list-style:			circle;	
	}
	
	.faq .answer ol li, .faq .answer ul li{
		border:				0px !important;
	}
	/* /FAQ */
	
/* Einde container */

/* Footer */
.wrapper_footer{
	clear:				both;
	background:			url('/images/footer_bg.jpg') repeat-x #464646;
	width:				100%;
	height:				100px;				/* hoogte footer */
}

	.footer{
		width:				95%; /** Overrule the 100% above */
		margin:				0 auto;
		padding-top:		15px;
		color:				white;
	}

	.footer .footerConditions{
		float:				left;
	}

	.footer .credits{
		float:				right;
		text-align:			right;
		color:				white;
	}

	.footer a{
		font-family:		'Cooper';
	}

	.footer a:hover{
		color:				#ff5b00;
		text-decoration:	none;
	}
/* Einde footer */


/* User beheerpaneel */
.list-view{
	margin-top:			-39px;
}

.list-view .pager{
	clear:				both;
}

.list-view .summary{	
	float:				right;
	padding-right:		25px;
}

.list-view .items{
	clear:				both;
	margin-top:			45px;
}

.button, .buttonNotUrgent{
	float:				right;
	margin-top:			0.6em;
	cursor:				pointer;
}

.button.left{
	float:				left;
	margin-bottom:		15px;
}

.button a{	
	background:			#ff5b00; 
	color:				white !important; 
	padding:			10px;
	text-decoration:	none !important;
}

/* Statisch lijstoverzicht - per gebruiker apart */
.ui-dialog{
	font-size:			12px !important;
	font-family:		'Lato' !important; /* to prevent jquery-ui to overrule */
}
	/* set white background */
	.ui-widget-content{
		background:			white !important;
	}

	.ui-widget-content a{
		color:				#ff5b00 !important;
		font-weight:		bold;
	}

	.ui-widget-header{
		background:			none !important;
		border:				0 !important;
		color:				#ff5b00 !important;
	}

	.ui-widget-header .ui-icon{
		background-color:	#ff5b00 !important;	/* to ensure the white cross icon is shown */
	}

	.ui-dialog-title{
		font-family:	'Cooper' !important;
		font-size:		1.3em !important;
	}
	/* remove radius borders */
	.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br{
		border-radius:		0 !important;
	}

	/** Ensure the widget overlay scales when screen resizes */
	.ui-widget-overlay{
		width:				100% !important;
		height:				100% !important;
		position:			fixed !important;
	}

	/** Update tooltip display */
	.ui-tooltip-default{
		border-color:		#ff5b00 !important;
		background-color:	white !important;
		color:				black !important;
	}

	.ui-tooltip-default .ui-tooltip-titlebar{
		background:			none !important;
	}


.items{
	display:			block;
	clear:				both;
	box-sizing: 		border-box;
}

.items.inActive{
	display:			none;
}

.items h3{
	margin-left:		25px;
}

.lijstOverzicht{
	display:				inline-block;
	vertical-align: 		top;
	width:					49%;
	min-height:				90px;
	margin:					2em 1% 0 1%;
	padding:				.5em 1.5em;
	border:					1px solid #464646;
	box-sizing: 			border-box;
}

	.lijstOverzicht:nth-of-type( odd ){
		margin-left:		0;
	}

	.lijstOverzicht:nth-of-type( even ){
		margin-right:		0;
	}

.lijstOverzicht[id^='lijst']:hover{
	background:			#e3e3e3 !important;
	cursor:				pointer;
}

.yearSeperation{
	clear:				both;
	width:				100%;
	border-bottom:		1px solid #464646;
	margin-top:			2em;
}

	.yearSeperation .year{
		font-size:		125%;
		font-weight:	bold;
		color:			#464646;
	}

	#eigenLijsten .yearSeperation .year{
		margin-left:	1.3em;
	}

	#andereLijsten .yearSeperation .year{
		margin-right:	1.3em;
	}

/* Moving all AndereLijsten to be aligned right */
	#andereLijstenButton{
		text-align:		right;
	}

	#andereLijsten .year,
	#andereLijsten h3, #andereLijsten .datum, #andereLijsten .omschrijving{
		text-align:			right;
	}

	#andereLijsten h3.empty{
		margin-right:		25px;
	}

#eigenLijsten h3.empty{
	float:				left;
}

/* Buttons */
.lijstOverzicht[id$='LijstenButton']{
	cursor:				pointer;
	background:			none;
}

.lijstOverzicht.sel[id$='LijstenButton']{
	background:			#e3e3e3;
}

.lijstOverzicht h2{
	padding:			0;
	margin:				2% 0 0;
	font-family:		'Cooper';
}

.lijstOverzicht[id$='LijstenButton'] .omschrijving{
	width:				100% !important;
}
/* End Buttons */

	.lijstOverzicht .datum{
		color:				#b4b4b4;
		font-size:			70%;
	}

	.lijstOverzicht h3{
		padding:			0;
		margin:				10px 0px 0px 0px;
		color:				#464646;
		width:				95%;
		font-weight:		normal;
		font-family:		'Cooper';
	}

	.lijstOverzicht .omschrijving{
		font-size:			75%;
		padding:			1% 0;
		margin-bottom:		1%;
		width:				95%;
	}

		/* To ensure they're aligned left, preferred by margin instead of float:right; */
		#andereLijsten .lijstOverzicht h3,
		#andereLijsten .lijstOverzicht .omschrijving{
			margin-left:	5%;
		}
	
	#eigenLijsten .lijstOverzicht .status{
		margin-top:			2%;
		font-size:			75%;
	}
	
	.status .todo{
		color:				red;
		display:			inline-block;
		font-weight:		bold;
	}
	
	.status .done{
		color:				green;
		display:			inline-block;
		font-weight:		bold;
	}
	
	.lijstOverzicht.nieuweLijst{
		background:			url('/images/groeneplus.jpg') center center no-repeat #7fbe3f;
	}

	.lijstOverzicht.sinterklaas{
		background:			url('/images/icons/mijter.png') no-repeat;
	}

	.lijstOverzicht.geboorte{
		background:			url('/images/icons/baby.png') no-repeat;
	}

	.lijstOverzicht.trouwerij{
		background:			url('/images/icons/rings.png') no-repeat;
	}

	.lijstOverzicht.jubileum{
		background:			url('/images/icons/jubileum.png') no-repeat;
	}

	.lijstOverzicht.kerst{
		background:			url('/images/icons/mistletoe.png') no-repeat;
	}

	.lijstOverzicht.verjaardag{
		background:			url('/images/icons/birthday.png') no-repeat;
	}

	.lijstOverzicht.overig{
		background:			url('/images/icons/gift.png') no-repeat;
	}

	#eigenLijsten .lijstOverzicht{
		background-position: 	top right !important;
		background-size:		11% auto;
	}

	#andereLijsten .lijstOverzicht{
		background-position: top left !important;
		background-size:		11% auto;
	}
/* Einde statisch lijstOverzicht */

/* Jui Dialog */
.ui-dialog{
	max-height:			97% !important;
	overflow-y:			auto !important;
	overflow-x:			hidden !important;
}

.lijstBeheer, .groepBeheer{
	width:					100%;
	min-height:				100px;
	display:				block;
}

.tabs{
	min-height:		200px;
	margin:			10px 0px;
}

.tab{
	margin:			0;
	padding:		0;
}

.tab li{
	display:		inline-block;
	width:			auto;
	margin:			0;
	padding:		10px 25px;
	border:			1px solid #e3e3e3;
	margin-bottom:	-2px;
	background:		#eee;
	font-weight:	bold;
	cursor:			pointer;
}

.tab li:first-child{
	margin-left:	0px;
}

.tab li.active{
	background:		white;
	border-bottom:	0px;
}

.tabContent{
	display:		none;
	background:		white;
	padding:		1% !important;
	border:			1px solid #e3e3e3;
}

#content_groepsleden.tabContent{
	padding:		0px 3px !important;
}

.tabContent.active{
	display:		block;
	width:			100%;
}

	.tabContent .flash-success{
		width:				100% !important;
	}

	.tabTextBlock{
		margin:				1em 0;
		padding:			0.5em 1.5em 0.5em 1.5em;
		border:				1px solid #e3e3e3;
		background:			#e3e3e31c; /* transparant gray */
	}
	
	#content_wensen #item_add{
		display:			none;
		padding:			20px; /* see .lijstitem to align */
	}

		/* Correct forms in CreateList, UpdateList and CreateListItem */
		.ui-dialog-content #lijst-form input, .ui-dialog-content #lijst-form textarea, .ui-dialog-content #lijst-form select,
		.ui-dialog-content #lijst-item-form input, .ui-dialog-content #lijst-item-form textarea{
			width:			50% !important;
		}
	
	#content_wensen .lijstItem{
		width:				100%;
		display:			block;
		margin:				5px 0;
		padding:			1rem;
		font-size:			100%;
		border:				1px solid #e3e3e3;
		background:			#e3e3e31c; /* transparant gray */
	}

		/* Plus icon for adding a new list item with hover transition */
		.plus-icon{
			position: 					relative;
			display:					block;
			width: 						50px;
			height: 					50px;
			left:						50%;
			margin-left:				-25px;
			background:					#ff5b00;
			cursor: 					pointer;
			-webkit-border-radius: 		50%;
			-moz-border-radius: 		50%;
			border-radius: 				50%;
			
		}

		.plus-icon:before,
		.plus-icon:after{
			content: 					"";
			position: 					absolute;
			background-color: 			white;
			transition: 				transform 0.25s ease-out;
		}

		/* Vertical line */
		.plus-icon:before{
			top: 						20%;
			left: 						50%;
			height: 					60%;
			width: 						4px;
			margin-left: 				-2px;
		}

		/* horizontal line */
		.plus-icon:after{
			left: 						20%;
			top: 						50%;
			width: 						60%;
			height: 					4px;
			margin-top: 				-2px;
		}
			
		.plus-icon:hover:before{ transform: rotate(90deg); }
		.plus-icon:hover:after{ transform: rotate(90deg); }
	
	#lijst_wensen .tabContent{
		width:				100%;
		display:			block;
		margin:				0px auto 5px auto;
		padding:			10px;
	}
	
	#lijst_wensen .tabContent .lijstItem{
		width:				100% !important;
		margin:				0px auto;
	}
	
	.lijstItem h4{
		font-family:		'Cooper';
		margin:				0;
		padding:			0;
	}
	
	.lijstItem .inputFields{
		width:				75%;
		float:				left;
	}
	
	.inputFields .inlineEditButton{
		height:				20px;
		margin-right:		10px;
		float:				left;
		clear:				both;
		display:			none;
	}
	
	.inputFields div{
		display:			block;
		min-height:			20px;
	}
	
	.lijstItem .lijstItemButtons{
		width:				20%;
		float:				right;
	}
	
	.legenda div{
		width:				32%;
		display:			inline-block;
		margin-right:		2%;
	}
		.legenda div:last-of-type{
			margin-right:	0;
		}
	
	.lijstItemButtons a, .legenda a{
		display:			block;
		width:				100%;
		margin-bottom:		10px;
		padding:			5px 10px;
		font-weight:		normal;
		text-align:			center;
	}
	
	.lijstItemButtons a:last-child, .legenda a:last-child{
		margin-bottom:		0px;
	}


	.lijstItemButtons a.eigenLijst,
	.lijstItemButtons a.vriendenLijst, .legenda a.vriendenLijst{
		border:				1px solid #ff5b00;
		color:				#ff5b00;
		font-weight: 		bold;
	}
	/* selected by user */
	.lijstItemButtons a.vriendenLijst.active, .legenda a.vriendenLijst.active{
		background:			#ff5b00 !important;
		color:				white !important;
	}
	/* selected by other user */
	.lijstItemButtons a.vriendenLijst.activeOther, .legenda a.vriendenLijst.activeOther{
		background:			#464646;
		color:				white !important;
		border:				0;
	}
	
	/* Button om te zien wie de gebruiker is die gereserveerd heeft */
	.lijstItemButtons img.gesererveerdContactInfo{
		position:			absolute;
		height:				1.2rem;
		margin-top:			6px;
	}
	
	.lijstItemButtons a.vriendenLijst.disabled, .legenda a.vriendenLijst.disabled{
		pointer-events:		none;
		cursor:				default;
	}
	
	.lijstItemButtons a.vriendenLijst.active.disabled{
		margin-top:			5px;
	}
	
	.lijstItemButtons a.vriendenLijst.hidden{
		display:			none;
	}

	.buttonwide{	
		border:				1px solid #ff5b00; 
		width:				80%;
		display:			block;
		text-align:			center;
		margin:				10px auto;
		cursor:				pointer;
		color:				#ff5b00;
		padding:			10px;
	}

		.lijstItemButtons a:hover,
		.buttonwide:hover{
			text-decoration: 	none;
			background:			#ff5b00;
			border-color:		#ff5b00;
			color:				white !important; /* to overrule ui-widget-content a */
		}

		.buttonwide.inverse{
			border-color:		white;
			color:				white !important;
		}

		.buttonwide.inverse:hover{
			background-color:	white;
			color:				#ff5b00 !important;
		}

	/* /Lijst */
	
	
	/* Groep & Lijst Delen */	
	#content_gebruikers h4{
		margin:				0;
		padding:			0;
	}

	h3.leftHeading, h3.rightHeading{
		width:				48%;
		margin-bottom:		0;
	}
	
	h3.leftHeading{
		float:				left;
		clear:				both;
	}
	
	h3.rightHeading{
		float:				right;	
		text-align:			right;
	}
	
	.tabContent p{
		padding:			0;
		margin:				1em 0;
	}
	
	#alleGebruikersOverzicht, #gebruikersInGroep,
	#adresboekContainer, #gebruikersGedeeldMetLijst,
	.groepsLeden{
		list-style-type:	none; 
		margin:				0; 
		padding:			0px 0px 0px 5px; 
		float:				left;
		width:				48%;
		min-height:			300px;
		height:				300px;
		overflow:			auto;
		display:			block;
		border:				2px groove #e1e1e1;
	}
	
	#groepGebruikersOverzichtinAdresboek{
		float:				right;
	}

	#alleGebruikersOverzicht, #adresboekContainer{
		margin-right:		4%;
		clear:				both;
	}
	
	#alleGebruikersOverzicht li, #gebruikersInGroep li, .groepsLeden li,
	#adresboekContainer li, #gebruikersGedeeldMetLijst li{
		width:				95%;
		background:			none !important;
	}
	
	#adresboekContainer li ul, #gebruikersGedeeldMetLijst li ul{
		list-style-type:	none; 
		margin:				0px 0px 0px 2px; 
		padding:			0px 0px 0px 5px;
		width:				100%;
	}

	#alleGebruikersOverzicht li, #gebruikersInGroep li,
	#adresboekContainer li, #gebruikersGedeeldMetLijst li,
	.groepsLeden li{ 
		margin:				5px 0px;
		padding:			5px;
		color:				#464646 !important;
	}	

	#alleGebruikersOverzicht li ul li, #gebruikersInGroep li ul li,
	#adresboekContainer li ul li, #gebruikersGedeeldMetLijst li ul li,
	.groepsLeden li ul li{
		display: 			inline-block;
    	width: 				45%;
    	margin: 			3px 0 !important;
    	padding: 			0 0 0 .7em !important;
    	border: 			0;
    	border-left: 		1.5px solid #ff5b00 !important;    
	}
	
	#alleGebruikersOverzicht li, #gebruikersInGroep li,
	#adresboekContainer li, #gebruikersGedeeldMetLijst li{
		cursor:				move;
	}
	
	#groepGebruikersOverzicht li{
		cursor:				pointer;
	}
	
	#alleGebruikersOverzicht li.admin, #gebruikersInGroep li.admin, 
	.groepsLeden li.inAdresboek{
		background:			#e4e4e4;
	}

	#alleGebruikersOverzicht li span.mail, #gebruikersInGroep li span.mail,
	.groepsLeden li span.mail{
		font-size:			75%;
		font-weight:		normal;
	}

	/** Adding transition for mobile swiping & prevent user selection */
	#alleGebruikersOverzicht li.mobileSwipe, #gebruikersInGroep li.mobileSwipe,
	#adresboekContainer li.mobileSwipe, #gebruikersGedeeldMetLijst li.mobileSwipe{
		left:				0;
		right:				0;
		-webkit-transition: left 1s ease-in-out,right 1s ease-in-out;
		-moz-transition: 	left 1s ease-in-out,right 1s ease-in-out;
		-o-transition: 		left 1s ease-in-out,right 1s ease-in-out;
		transition: 		left 1s ease-in-out,right 1s ease-in-out;
		-webkit-user-select:none;
   		-moz-user-select: 	none;
 		-ms-user-select: 	none;
  		user-select: 		none;
	}

	#content_delen .button{
		margin:				0px 0px 10px 0px;
	}
	
	#content_delen .button a{
		color:				white !important;
		padding:			5px;
		width:				100px;
		display:			block;
		text-align:			center;
	}
	
	#uniqueListLink{
		width:				100%;
		padding:			0.5em;
		border:				0.5px solid #ff5b00;
		background:			white;
	}

		#uniqueListLink:focus, #uniqueListLink:focus-within{
			outline:		none !important;
		}

	.swipe-right{
		position:			relative;
		background:			#F5CB9D !important;
		left:				70% !important;
		right:				initial !important;
	}

	.swipe-left{
		position:			relative;
		background:			#F5CB9D !important;
		left:				initial !important;
		right:				70% !important;		
	}
	
	#groepGebruikersOverzicht .ui-selected { 
		border-color:		#ff5b00;
	}

	/* Sharing list, sending invites */
	#sharingLoadingOverlay{
		display:			none;
	}
	
	#invitationGif{
		position:			absolute;
		top:				40%;
		left:				34%;
		z-index:			3501;
	}
	/* /Groep */	
/* Einde jui Dialog */


/* Adresboek */
.contact_container{
	width:					64%;
	float:					left;
	display:				block;
	border-right:			1px solid #e3e3e3;
	margin-right:			1%;
	padding-right:			2em;
}

.groep_container{
	width:					35%;
	float:					left;
	display:				block;
}

[class^='flash-'][id$='groep']{
	text-align:				right;
	background-position:	right;
	padding:				15px 50px 15px 10px;
}

.contact_container h3, .groep_container h3{
	margin:					0;
	padding:				0;
}

.contact_container p, .groep_container p{
	font-size:				85%;
	margin:					0 0 1em 0;
	padding:				0;
	text-align:				justify;
}

.adresboek{
	display:				block;
}

.contactpersoon .naam, .contactpersoon .email{
	width:					40%;
	display:				inline-block;
	padding:				1% 2% 2% 0;
	word-wrap:				break-word;
	font-size:				85%;
}

.contactpersoon .buttons, .groep .buttons{
	display:				inline-block;
	text-align:				left;
	vertical-align:			bottom;
}

.contactpersoon .buttons img, .groep .buttons img{
	width:					15px;
	margin:					2px;
}

	div[id$='editable']{
		cursor:					pointer;
	}

	.contactpersoon .naam, .contactpersoon .email,
	#contactpersoon_add_form .column{
		width:				40% !important;
	}
	
	.contactpersoon .buttons,
	#contactpersoon_add_form .column.buttons{
		width:				20% !important; /** Move buttons of view to it TODO */
	}

.groep .groepsNaam{
	display:				inline-block;
	padding:				1% 2% 2% 0;
	word-wrap:				break-word;
	font-size:				85%;
	cursor:					pointer;
}

.groep .groepsNaam .amount{
	display:				inline-block;
	font-size:				85%;
}

	.groep .groepsNaam,
	#groep_add_form .column{
		width:				70% !important;
	}

	.groep .buttons,
	#groep_add_form .column.buttons{
		width:				30% !important;
	}
	
/** Corrct button input width */
#contactpersoon_add_form .column.buttons input, 
#groep_add_form .column.buttons input{
	width:				100% !important;
	max-width:			100% !important;
}


/* Beheerpaneel */
/* Globale menu */
.span-19 #content{
	padding-top:			0px;
	margin-top:				0px;
}

.beheer_acties ul{
	margin:					0;
	padding:				0;
	border-left:			1px solid #464646;
	border-bottom:			1px solid #4b4b4b;
}

.beheer_acties ul li{
	display:				inline-block;
	margin:					5px 25px;
	padding:				0;
	width:					auto !important;
}

.beheer_acties ul li a{
	color:					#464646;
}


/** Responsive design */
@media only screen and (max-width: 975px) {
	/* Ensure default of 950px is taken care of for smaller screen */
	.ui-dialog{
		width:			95% !important;
		left:			2.5% !important;
		top:			2% !important;
	}

	.header .lowHeader{
		margin-right:	1rem;
	}

	.header .profielBox{
		margin-right:	0;
	}

	.wrapper_container{
		padding:		0 1rem;
	}
}

@media only screen and (max-width: 920px) {
	.kolom_drie #register-form label, .kolom_drie #register-form input{
		display:		block;
		width: 			100%;
		text-align:		left;
	}
}

@media only screen and (max-width: 820px) {
	#logo{
		display:				none !important;
	}

	.contact_container{
		width:					100%;
		float:					none;
	}

	.groep_container{
		width:					100%;
		float:					none;
	}
}

@media only screen and (max-width: 660px) {
	body{
		font-size:			2vw;
	}

	.mobile{				display: block !important; }
	.desktop{				display: none !important; 	}

	.wrapper_header, .header, .header .topHeader{
		height:				auto;
		min-height: 		auto;
		background:			#464646;
		text-align:			center;
	}

	.header #logoBlock{
		padding-top:		0;
	}
	
	.topHeader .profielBox{
		float:				none;
		clear:				both;
		width:				100%;
		min-height:			auto;
		padding:			0.5rem 1rem;
		text-align: 		left;
		background:			#848E99;
		border:				1px solid white;
	}

		.smallform, .profielBox p, .profielBox li{
			text-align: 	left !important;
			display:		inline-block;
			font-size:		2.2vw;
		}

		.profielBox form{ 
			margin: 		0;
			padding:		1% 0 0 0;
		}

		.profielBox .smallform .row{
			display:		inline-block;
			width:			47%;
			margin-right:	3%;
		}

		.profielBox .smallform .row label{
		    width: 			38%;
		}

		.profielBox .smallform .row input{
		    width: 			62%;
		}

		.profielBox .smallform .row input[type='submit']{
		    width: 			100%;
		}

		.smallform input{
			padding:		0.2em;
		}
	
		.profielBox h5{
			font-size:		3vw;
			margin-top:		0.5rem;
		}

		.profielBox ul{
			margin:			0;
			padding:		0;
		}

		.profielBox li, .lowHeader a{
			margin:			0 !important; /** overrule .groupStart */
			width:			auto;
		}

			.lowHeader li a{
				margin-right:	1rem !important; /** ensure sub menu to have spacing */
			}

		.profielBox li + li::before, .lowHeader a + a::before{
		    content: '\00a0 | \00a0';
		    padding: 0 5px;
		}

	.header .lowHeader{
		background:		#FF9D01;
		float:			none;
		width:			100%;
		margin:			0;
		padding:		0.5em 1rem;
	}

	.header .lowHeader a{
		font-size: 		2vw;
	}

	/** Home page */
	.container .kolom_drie{
		display:		block;
		clear:			both;
		width:			100%;
		padding:		0 0 !important; /* undo the first and last-of-type */
	}

	.container .kolom_drie img{
		float:			right;
		margin-left:	2rem;
		padding:		0;
		width:			15%;
	}

	/** List shares */
	.ui-dialog{
		max-height:		none !important;
	}

	.ui-dialog .ui-dialog-titlebar{
		padding-left:	0 !important;
	}

	.ui-dialog .ui-dialog-content{
		padding:		0 !important; /* Ensuring more space for dialog content */
	}

	.tabTextBlock{
		padding-left:		0.5em;
		padding-right:		0.5em;
	}

	.tab li{
		width:			25%;
		height:			10%;
		padding:		2% 0;
		text-align:		center;
		vertical-align: middle;
		font-size:		2.5vw;
	}

	.tabContent h3{
		margin:			0.5rem 0 .25rem 0;
	}

	.tabContent p{
		font-size:		.8em;
	}

	.lijstItem .inputFields, .lijstItem .lijstItemButtons{
		width:				100%;
		float:				none;
		clear:				both;
		display:			block;
		font-size:			.8em;
	}

	.lijstItemButtons a, .legenda a{
		display:			inline-block;
		margin:				1% 2.5%;
	}

		.lijstItemButtons a:first-of-type, .legenda a:first-of-type{
			margin-left:	0;
		}

		.lijstItemButtons a:last-of-type, .legenda a:last-of-type{
			margin-right:	0;
		}		

	.lijstItemButtons a{
		width:				45%;
	}

	/** Creating new list and Adding list item */
	.ui-dialog-content #lijst-form input, .ui-dialog-content #lijst-form textarea, .ui-dialog-content #lijst-form select,
		.ui-dialog-content #lijst-item-form input, .ui-dialog-content #lijst-item-form textarea{
    	width: 		100% !important;
    	max-width: 	100% !important;
    }
	#lijst-form input[type='submit'],
	#lijst-item-form input[type='submit'],
	#user-form input[type='submit']{ 
		margin-left: 0 !important;
	}

	/** Update way groups are displayed in mobile */
	#adresboekContainer li ul, #gebruikersGedeeldMetLijst li ul{
		margin:				0 .1rem;
		padding:			0;
	}


	#alleGebruikersOverzicht li ul li, #gebruikersInGroep li ul li,
	#adresboekContainer li ul li, #gebruikersGedeeldMetLijst li ul li,
	.groepsLeden li ul li{
		width: 				auto;
		font-size:			.8em;
		margin:				0.2em !important;
		padding:			0 !important;
    	border-bottom: 		1.5px solid #ff5b00 !important;
    	border-left:		0 !important;
	}

	/** Login page */
	#login-form label{ width: 25% !important; white-space: nowrap;	}
	#login-form input{ width: 70% !important; }
	#login-form input[type='submit']{ margin-left: 25%; }

	/** Profile edit page */
	#user-form label{ width: 30% !important; } /* make it responsive */
	#user-form input{ display: inline-block; }
	#user-form #passwordChange{display: block; margin-left: 30% !important; }
}

@media only screen and (max-width: 450px) {
	body{
		font-size:			11px;
	}

	.header #logoBlock{
		padding-left:		0;
		padding-right:		0;
	}

	.topHeader #logoBlock h1{
		font-size:			3.5rem;
	}

	.topHeader #logoBlock h2{
		font-size:			2.5rem;
	}

	.genderRadio{
		width: 			auto !important;
		height: 		auto !important;
		margin-right:	2%;
	}

	.genderRadio input{
		margin:			30px 2% 30px 0;
	}

	.genderRadio img{
		height: 	15vw;
	}

	input + input, textarea + textarea, select + select{
		margin-left:		0 !important;
	}
}

@media only screen and (max-width: 310px) {
	.topHeader #logoBlock h1{
		font-size:			3rem;
	}

	.topHeader #logoBlock h2{
		font-size:			2rem;
	}

	#user-form label, #user-form input{
		display:	block !important;
		width: 		100% !important;
	}
	#user-form input[type='checkbox']{
		display:	inline-block !important;
		margin-left: 0 !important;
		width:		auto !important;
	}
	#user-form #passwordChange{ margin-left: 0 !important; }

	label[for='User_geslacht']{ margin-top: 0; }
	.genderRadio{ text-align:center; }
	.genderRadio input{ margin: 0 auto !important; }
	.genderRadio img{ height: 40px; }
}