/*html { 
	font-size: 62.5%; 
}

body {
    font-size: 1.4rem;
    font-family: Lato, Open Sans, sans-serif;
    letter-spacing: .03rem;
    line-height: 1.8rem;
    color: #333;
    text-rendering: optimizeLegibility;
}

p {
    line-height: 1.7em;
}

h2 {
	text-align: center;
}

strong {
	font-weight: bold;
}*/

div.flow-container {
	margin: 0 0 2rem 0;
}

div.flow-container.collapsible {
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 0.8rem;
}
	
	div.flow-container-header {
		padding: 0 0 1rem 0;
		text-align: center;
	}
	
	div.collapsible div.flow-container-header {
		cursor: pointer;
		padding: 1rem 1rem;
		text-align: left;
	}
	
		div.flow-container-header h2 {
			margin: 0;
			font-size: 1.8rem;
			font-weight: 700;
			padding: 0 0 1rem 0;
			border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
		}
		
		div.collapsible div.flow-container-header h2 {
			padding: 0;
			border-bottom: 0 none;
		}
		
			div.flow-container.collapsible > div.flow-container-header > h2:before {
				display: inline-block;
				width: 1em;
				text-align: center;
				content: "\f107"; /* "\f055";  \f196 */
				font-family: FontAwesome;
			}
			
			div.flow-container.collapsed > div.flow-container-header > h2:before {
				content: "\f105"; 
			}
	
	div.collapsible div.flow-container-body {
		border-top: 1px dashed rgba(0, 0, 0, 0.1);
		padding: 1rem 0 0 0;
		margin: 0 1rem 1rem 1rem;
	}
	
	div.collapsed div.flow-container-body {
		display: none;
	}
	
	div.flow-container-body h3 {
		border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
		font-size: 1.6rem;
		text-align: center;
		margin: 2rem 0;
		padding: 0 0 1rem 0;
	}
	
	div.flow-container-body h3:first-child {
		margin-top: 0;
	}
	
div.flow-section {
	margin: 0 auto;
	max-width: 90rem;
	font-size: 1.4rem;
}

div.flow-section-inner {
	position: relative;
	margin: 7rem 4rem 5rem;
	
}

	div.location {
		position: absolute;
		top: -2rem;
		bottom: -2rem;
		width: 3rem;
		background: #eee;
		/* border: 1px solid #7B7B7B;  */
		box-sizing: border-box;
		/* box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); */
		z-index: 0;
		border-radius: 5px;
		margin-left: -1.5rem;
	}
	
	div.location-1 {
		left: 0;
		background: rgba(0, 115, 207, 0.25);
		border-color: rgba(0, 115, 207, 1);
	}
	
	div.location-2 {
		left: 33.333%;
		background: rgba(255, 121, 0, 0.25);
		border-color: rgba(255, 121, 0, 1);
	}
	
	div.location-3 {
		left: 66.667%;
		background: rgba(0, 115, 207, 0.25);
		border-color: rgba(0, 115, 207, 1);
	}
	
	div.location-4 {
		left: 100%;
		background: rgba(238, 233, 226, 1);
	}
	
		div.location-label {
			position: absolute;
			top: -2em;
			left: -7.5rem;
			margin-left: 50%;
			width: 15rem;
			text-align: center;
			font-weight: bold;
		}

div.flow-group {
	border: 1px solid #0073CF;
	border-radius: 5px;
	margin: 1rem 0 1rem 0;
	background: rgba(255, 255, 255, 0.2); /*rgba(0, 115, 207, 0.05);*/
	position: relative;
	z-index: 1
}

div.flow-section-inner > div.flow-group {
	margin-left: -4rem;
	margin-right: -4rem;
}

div.flow-group-if {
	border-radius: 0.4rem 0.4rem 0 0;
}

div.flow-group-if-no-else {
	border-radius: 0.4rem;
}

div.flow-group-elseif {
	margin-top: -1rem;
	border-top: 0 none;
	border-radius: 0;
}

div.flow-group-else {
	margin-top: -1rem;
	border-top: 0 none;
	border-radius: 0 0 0.4rem 0.4rem;
}

	div.flow-group-header {
		padding: 0px 0.5rem;
		color: #fff;
		line-height: 2.8rem;
		overflow: hidden;
		display: flex;
	}
	
	div.flow-group-group > div.flow-group-header {
		background: rgba(0, 115, 207, 0.75);
		float: none;
		padding-left: 0.5rem;
		margin-bottom: 0;
		border-radius: 0;
	}
	
		div.flow-group div.flow-group-group > div.flow-group-header {
			background: rgba(0, 115, 207, 0.15);
			color: rgba(0, 115, 207, 1);
		}
		
			div.flow-group div.flow-group-group > div.flow-group-header span.flow-group-title,
			div.flow-group div.flow-group-group > div.flow-group-header div.flow-info-toggle {
				color: rgba(0, 115, 207, 1);
			}
	
		
		span.flow-group-statement {
			color: #fff !important;
			display: block;
			background: rgba(0, 115, 207, 1); /*#00579C;*/
			text-transform: uppercase;
			padding: 0 1rem;
			border-radius: 0.4rem 0 0 0.4rem;
			margin: 0.5rem 0 0 0;
			font-size: 80%;
			line-height: 2.3rem;
			float: left;
			font-weight: bold;
		}
		
		div.flow-group-group > div.flow-group-header span.flow-group-statement {
			margin-top: 3px;
			line-height: 22px;
		}
		
		span.flow-group-title {
			font-weight: bold;
			display: block;
			float: left;
			margin: 0 0.5rem 0 0;
		}
		
		div.flow-group-group > div.flow-group-header span.flow-group-title {
			cursor: pointer;
			flex-grow: 1;
		}
		
		div.flow-group-group > div.flow-group-header span.flow-group-title:before {
			display: inline-block;
			width: 1em;
			text-align: center;
			content: "\f107"; /* "\f055";  \f196 */
			font-family: FontAwesome;
		}
		
		div.flow-group-group.collapsed > div.flow-group-header span.flow-group-title:before {
			content: "\f105"; 
		}
		
		div.flow-group-if-no-else > div.flow-group-header > span.flow-group-title,
		div.flow-group-if > div.flow-group-header > span.flow-group-title, 
		div.flow-group-elseif > div.flow-group-header > span.flow-group-title, 
		div.flow-group-else > div.flow-group-header > span.flow-group-title {
			background: rgba(0, 115, 207, 0.75); /*#00579C;*/
			padding: 0 1rem;
			border-radius: 0 0.4rem 0.4rem 0;
			margin: 0.5rem 0 0 0;
			line-height: 2.3rem;
			font-weight: normal;
		}
		
		span.flow-group-label {
			color: #fff !important;
			display: block;
			float: left;
			background: rgba(0, 115, 207, 1);
			line-height: 2.3rem;
			padding: 0 1rem;
			border-radius: 0.4rem;
			margin: 0.5rem 0.5rem 0 0.5rem;
			font-size: 80%;
			font-weight: bold;
			text-transform: uppercase;
		}
		
		div.flow-group-group > div.flow-group-header > span.flow-group-label {
			margin-top: 0.3rem;
			line-height: 2.2rem;
			align-self: flex-start;
		}
		
	div.flow-group-body {
		padding: 1rem; 
		clear: both;
		border-bottom: 1px dashed #999;
		margin: -1px;
	}
	
	div.flow-group-group.collapsed > div.flow-group-body {
		display: none; 
	}
	
	div.flow-group-body:last-child {
		border-bottom: 0 none;
	}
		
		div.flow-group-body-comments {
			text-align: center;
			margin: 0 5rem 1rem;
		}
		
		div.flow-group-body-comments div.rich-text p,
		div.flow-group-body-comments div.rich-text ul {
			margin-bottom: 0;
		}
		
		div.flow-group-body-comments:last-child {
			margin-bottom: 0;
		}

div.flow-group:first-child {
	margin-top: 0;
}		

div.flow-group:last-child {
	margin-bottom: 0;
}

div.flow-arrow {
	border-bottom: 2px solid #333;
	box-sizing: border-box;
	padding: 0.5rem;
	text-align: center;
	margin: 0 1.5rem 1rem 1.5rem;
	position: relative;
}

	div.flow-arrow:before {
		content: "";
		width: 4px;
		height: 4px;
		border-radius: 4px;
		display: block;
		position: absolute;
		left: -4px;
		bottom: -5px;
		background: #fff;
		border: 2px solid #333
	}
	
	div.flow-arrow-text {
		margin: 0 -3rem;
	}

div.flow-arrow.from-1-to-2,
div.flow-arrow.from-2-to-1 {
	margin-left: calc(0% + 1.5rem);
	width: calc(33.333% - 3rem);
}

div.flow-arrow.from-1-to-3,
div.flow-arrow.from-3-to-1 {
	margin-left: calc(0% + 1.5rem);
	width: calc(66.667% - 3rem);
}

div.flow-arrow.from-1-to-4,
div.flow-arrow.from-4-to-1 {
	margin-left: calc(0% + 1.5rem);
	width: calc(100% - 3rem);
}
	
	
div.flow-arrow.from-2-to-3,
div.flow-arrow.from-3-to-2 {
	margin-left: calc(33.333% + 1.5rem);
	width: calc(33.333% - 3rem);
}	

div.flow-arrow.from-2-to-4,
div.flow-arrow.from-4-to-2 {
	margin-left: calc(33.333% + 1.5rem);
	width: calc(66.667% - 3rem);
}

div.flow-arrow.from-3-to-4,
div.flow-arrow.from-4-to-3 {
	margin-left: calc(66.667% + 1.5rem);
	width: calc(33.333% - 3rem);
}

	div.flow-arrow.from-2-to-1:before,
	div.flow-arrow.from-3-to-1:before, 
	div.flow-arrow.from-3-to-2:before,
	div.flow-arrow.from-4-to-1:before,
	div.flow-arrow.from-4-to-2:before,
	div.flow-arrow.from-4-to-3:before {
		left: auto;
		right: -4px;
	}
	
	div.flow-arrow.from-2-to-1:after,
	div.flow-arrow.from-3-to-1:after, 
	div.flow-arrow.from-3-to-2:after,
	div.flow-arrow.from-4-to-1:after,
	div.flow-arrow.from-4-to-2:after,
	div.flow-arrow.from-4-to-3:after {
		left: -2px;
		right: auto;
		border-width: 4px 8px 4px 0px; 
	}

div.flow-arrow-wrapper {
	/* overflow: hidden; */
}	

div.flow-group div.flow-arrow-wrapper {
	margin: 0 3rem;
}

div.flow-group div.flow-group div.flow-arrow-wrapper {
	margin: 0 2rem;
}

div.flow-group div.flow-group div.flow-group div.flow-arrow-wrapper {
	margin: 0 1rem;
}

div.flow-group div.flow-group div.flow-group div.flow-group div.flow-arrow-wrapper {
	margin: 0 0rem;
}

div.flow-group div.flow-group div.flow-group div.flow-group div.flow-group div.flow-arrow-wrapper {
	margin: 0 -1rem;
}


div.flow-info {
	display: none;
	padding: 1rem 1.5rem;
	text-align: left;
	background: rgba(255, 255, 255, 1);
	box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
	border-radius: 0.4rem;
	position: relative;
}

div.flow-group > div.flow-info {
	margin: 1rem;
}

div.flow-arrow > div.flow-info {
	margin: 0.5rem -3rem;
}
	
	div.flow-info-toggle {
		cursor: pointer;
		display: inline-block;
		color: rgba(0, 115, 207, 1);
	}
	
	div.flow-group-header > div.flow-info-toggle {
		color: #fff;
		float: right;
	}
	
	div.flow-info-toggle:hover {
		color: #FF7700;
	}
		
		div.flow-info-toggle:before {
			display: inline-block;
			font-family: FontAwesome;
			content: "\f05a";
			margin: 0 0.5rem;
			text-align: center;
		}
	
	div.flow-info-close {
		position: absolute;
		top: 0px;
		right: 0;
		cursor: pointer;
		color: rgba(0, 0, 0, 0.25);
	}
	
	div.flow-info-close:hover {
		color: rgba(0, 0, 0, 0.5);
	}
		
		div.flow-info-close:before {
			display: block;
			font-family: FontAwesome;
			content: "\f00d";
			width: 2rem;
			line-height: 2rem;
			font-size: 1rem;
			text-align: center;
		}
	
	div.flow-info div.rich-text p, 
	div.flow-info div.rich-text ul {
		margin-bottom: 0;
	}

div.flow-arrow:after {
	content: "";
	width: 0px;
	height: 0px;
	display: block;
	position: absolute;
	right: -2px;
	bottom: -5px;
	border-color: transparent #333;
	border-style: solid;
	border-width: 4px 0px 4px 8px; 
}

.zorgvragend .zorgaanbiedend {
	opacity: 0.5;
}

.zorgvragend div.location-3,
.zorgvragend div.location-4, 
.zorgaanbiedend div.location-1,
.zorgaanbiedend div.location-4 {
	background: rgba(0, 0, 0, 0.25);
}

.zorgvragend .patient {
	opacity: 0.5;
}

.zorgaanbiedend .zorgvragend {
	opacity: 0.5;
}

.zorgaanbiedend .patient {
	opacity: 0.5;
}

@media screen and (max-width: 720px) {
	div.flow-section {
		font-size: 1.2rem;
	}
}