@font-face {
	font-family: 'productIcon';
	src: url("fonts/producticons.woff") format("woff"); 
}

html { 
	font-size: 62.5%; 
	height: 100%;
}

body {
	background-color: #ffffff;
	box-sizing: border-box;
	color: #333;
	font-size: 1.6rem;
    font-family: Prompt, Arial, sans-serif;
	font-weight: 200; 
	/* letter-spacing: -.03rem; */
	line-height: 1.25em;
	min-height: 100%;
	padding: 1rem; 
	position: relative;
	text-rendering: optimizeLegibility;
	width: 100%;
}

.tab {
	display: none;
}

.tab.active {
	display: block;
}

/* ============================== */
/* HEADER 
/* ============================== */

header {
	background: #ffffff;
	/* border-bottom: 1px solid #FF7700; */
	box-shadow: 0 0rem 2rem rgba(0, 0, 0, 0.15);
	clear: both;
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	z-index: 100;
}

header.blue {
	background: #0073CF;
	box-shadow: none;
}

	header.blue div.header-icon svg g {
		fill: #ffffff;
	}

body.has-hero header {
	background: transparent;
	box-shadow: none;
	position: absolute;
	left: 1rem;
	right: 1rem;
	top: 1rem;
}

body.has-hero header.sticky {
	background: #ffffff;
	box-shadow: 0 0rem 2rem rgba(0, 0, 0, 0.15);
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
}

	div.top-bar {
		height: 5.6rem;
	}

		div.top-bar-left {
			float: left;
			padding: 0 0 0 1.5rem;
		}
			
			div.header-icon {
				float: left;
				line-height: 5.6rem;
			}
			
				div.header-icon svg.icon-left {
					height: 4rem;
					/* margin: 0 -2rem; */
					vertical-align: middle;
					width: 3rem;
				}

				div.header-icon svg.icon-right {
					height: 2.15rem;
					margin: 0 2rem 0 1rem;
					vertical-align: middle;
					width: 23.5rem;
				}
			
		div.top-bar-right {
			float: right;
		}
		
			div.top-bar-right a.button {
				/* background: transparent; */
				/* border: 1px solid #7b7b7b; */
				box-sizing: border-box;
				/* color: #7B7B7B; */
				float: left;
				font-size: 1.6rem;
				line-height: 3.2rem;
				margin: 1.2rem 1.5rem 0 1.5rem;
			}
			
			div.top-bar-right a.button:hover {
				/* background: #7B7B7B; */
				/* color: #fff; */
			}
			
			div.top-bar-right a.button.login:after {
				display: none;
			}

/* ============================== */
/* MENUS 
/* ============================== */

div#nav-toggle {
	color: #ffffff;
	cursor: pointer;
	display: none;
	float: left;
	width: 5.6rem;
}

div#nav-toggle:hover {
	background: #00579C;
}

	div#nav-toggle:before {
		content: '\f0c9';
		display: block;
		font-family: FontAwesome;
		font-size: 2rem;
		line-height: 5.6rem;
		text-align: center;
		width: 100%;
	}

	div#nav-toggle.expanded:before {
		content: '\f00d';
	}
	
	div#nav-toggle span.button-label {
		display: none;
	}

div.generated-menu {
	/* border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 0.8rem;
	padding: 1rem 2rem 2rem; */
}

	ul.generated-menu {

	}

	ul.generated-menu li {
		padding: 0 0 0 2rem;
		position: relative;
	}

		ul.generated-menu div.branch-toggle {
			color: #0073CF;
			display: block;
			left: 0rem;
			padding: 1rem 0 0;
			position: absolute;
			top: 0;
			text-align: center;
			width: 2rem;
		}

			ul.generated-menu div.branch-toggle:before {
				content: '\f105';
				font-family: FontAwesome;
			} 

		ul.generated-menu div.branch-toggle:hover {
			color: #FF7700;
			cursor: pointer;
		}

			ul.generated-menu div.branch-toggle:hover:before {
				content: '\f107';
			}

			ul.generated-menu li.open > div.branch-toggle:before {
				content: '\f107';
			}

			ul.generated-menu li.open > div.branch-toggle:hover:before {
				content: '\f106';
			}

		ul.generated-menu div.menu-item-label {
			font-weight: 300;
			padding: 1rem 0 0;
		}

		ul.generated-menu li.active > div.menu-item-label {
			font-weight: bold;
		}

			ul.generated-menu div.menu-item-label a {
				text-decoration: none;
			}

		div.generated-menu > ul.generated-menu > li:first-child {
			padding-left: 0;
		}

			div.generated-menu > ul.generated-menu > li:first-child > div.branch-toggle {
				display: none;
				padding-top: 0;
			}

			div.generated-menu > ul.generated-menu > li:first-child > div.menu-item-label {
				padding-left: 2rem;
				padding-top: 0;
			}

			div.generated-menu > ul.generated-menu.hide-root > li:first-child > div.branch-toggle, 
			div.generated-menu > ul.generated-menu.hide-root > li:first-child > div.menu-item-label {
				display: none;
			}

		ul.generated-menu li ul {
			display: none;
		}

		ul.generated-menu li.open > ul {
			display: block;
		}

div.vertical-menu {
	display: block;
}	

	div.vertical-menu ul li {
		margin: 0 0 2rem 0;
	}
	
	div.vertical-menu ul li:last-child {
		margin: 0;
	}
		
		div.vertical-menu ul li div.menu-item-label {
			border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
			color: rgba(0, 0, 0, 0.25);
			font-weight: 700;
			padding: 0.5rem 0;
		}
		
		div.vertical-menu ul li.active div.menu-item-label {
			font-weight: 700;
		}
		
			div.vertical-menu ul li div.menu-item-label a {
				color: #0073CF;
				display: block;
				text-decoration: none;
			}
			
			div.vertical-menu ul li div.menu-item-label a:hover {
				color: #FF7700;
			}
				
				div.vertical-menu ul ul li {
					margin: 0;
				}
				
					div.vertical-menu ul ul li div.menu-item-label {
						border-bottom: 0 none;
						font-weight: 300;
					}

div.breadcrumbs-bar {
	border-left: 1px solid #0073CF; /*rgba(255, 255, 255, 0.9);*/
	float: left;
	margin: 1.5rem 0;
	padding: 0 0 0 2rem;
}

	ul.breadcrumbs {
		font-weight: 300;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
		ul.breadcrumbs li {
			/* color: rgba(255, 255, 255, 1) !important; */
			color: #0073CF;
			display: inline;
			/* float: left; */
			font-size: 1.4rem;
			line-height: 2.6rem;
		}
		
		ul.breadcrumbs li:before {
			/* color: rgba(255, 255, 255, 1) !important; */
			content: '\f105';
			font-family: FontAwesome; 
			padding: 0 0.5em;
		}
		
		ul.breadcrumbs li:first-child {
			display: inline-block;
			overflow: hidden;
			width: 1em;
			vertical-align: top;
		}
		
		ul.breadcrumbs li:first-child:last-child {
			display: inline;
			overflow: hidden;
			width: auto;
			vertical-align: top;
		}
		
		ul.breadcrumbs li:first-child:before {
			display: none;
		}
		
		ul.breadcrumbs li a {
			/* color: rgba(255, 255, 255, 1) !important; */
			color: #0073CF;
		}
		
		ul.breadcrumbs li a:hover {
			/* color: rgba(255, 255, 255, 1) !important; */
		}
		
		ul.breadcrumbs li:first-child a {
			text-decoration: none;
		}
		
			ul.breadcrumbs li:first-child a:before {
				content: '\f015';
				font-family: FontAwesome; 
				padding: 0 0.5em 0 0;
			}
			
			ul.breadcrumbs li:first-child:last-child:before {
				content: '\f015';
				display: inline;
				font-family: FontAwesome; 
				padding: 0 0.5em 0 0;
			}

header.blue div.breadcrumbs-bar {
	border-left: 1px solid rgba(255, 255, 255, 0.9);
}

header.blue ul.breadcrumbs li {
	color: rgba(255, 255, 255, 1) !important;
}

header.blue ul.breadcrumbs li:before {
	color: rgba(255, 255, 255, 1) !important;
}

header.blue ul.breadcrumbs li a {
	color: rgba(255, 255, 255, 1) !important;
}

header.blue ul.breadcrumbs li a:hover {
	color: rgba(255, 255, 255, 1) !important;
}

/* ============================== */
/* SEARCH
/* ============================== */

div.search-button {
	color: #0073CF;
	cursor: pointer;
	float: left;
	width: 5.6rem;
}

header.blue div.search-button {
	color: #ffffff;
}

div.search-button:hover {
	color: #FF7700 !important;
}

	div.search-button:before {
		content: '\f002';
		display: block;
		font-family: FontAwesome;
		font-size: 2rem;
		line-height: 5.6rem;
		text-align: center;
		width: 100%;
	}

	div.search-button span.button-label {
		display: none;
	}

div.search-close-button {
	color: rgba(0, 0, 0, 0.25);
	cursor: pointer;
	float: left;
	font-size: 2rem;
	line-height: 5.6rem;
	position: absolute;
	right: 0;
	text-align: center;
	top: 0;
	width: 5.6rem;
}

div.search-close-button:hover {
	color: #FF7700;
}

	div.search-close-button:before {
		content: '\f00d';
		font-family: FontAwesome;
	}

	div.search-close-button span.button-label {
		display: none;
	}

div.search-bar {
	background-color: #F2F2F2; /*#00579C;*/
	display: none;
	margin: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}

div.input-container.search {
	border-radius: 1.3rem;
	margin: 0;
	padding: 0 0.5rem 0 1rem;
}

div.search-bar div.input-container.search {
	background: #ffffff;
	margin: 0.7rem 0 0 0;
}

	div.input-container.search div.input-field {
		border: 0 none;
	}

div.search-bar form.search {
	margin: 0 auto;
	max-width: 80rem;
	padding: 0 5.6rem;
}

	form.search div.search-icon {
		color: rgba(0, 0, 0, 0.25);
		float: left;
		font-size: 1.6rem;
		line-height: 4rem;
		width: 2rem;
		text-align: center;
	}
	
		form.search div.search-icon:before {
			content: '\f002';
			font-family: FontAwesome;
		}
	
	form.search input.query {
		box-sizing: border-box;			
		display: block;
		float: left;
		font-size: 1.8rem;
		line-height: 4rem;
		margin: 0;
		padding: 0 1rem;
		width: calc(100% - 10rem) !important;
	}
	
		div.search-bar form.search input.query {
			/* color: #ffffff; */
		}

	form.search input.submit {
		border-radius: 0.8rem !important;
		cursor: pointer;
		font-size: 1.6rem;
		line-height: 3rem !important;
		margin: 0.5rem 0;
		padding: 0;
		text-align: center;
		width: 8rem;
	}

	div.search-bar form.search input.submit {
		/* background: #ffffff; */
		/* color: #0073CF; */
	}
		
div.search-results-count {
	border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
	margin: 0 0 2rem 0;
	padding: 2rem 0;
}

ul.search-results-list li {
	border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
	margin: 0 0 2rem 0;
	padding: 0 0 2rem 0;
}

	ul.search-results-list li h3 {
		border: 0 none;
		margin: 0;
		padding: 0;
	}
	
	ul.search-results-list li b {
		font-weight: 700;
	}
	
	ul.search-results-list li br {
		display: none;
	}
	
	ul.search-results-list li a.search-result-url {
		color: rgba(0, 0, 0, 0.25);
	}

div.search-results-pager {
	text-align: center;
}

	div.search-results-pager a.previous-page,
	div.search-results-pager a.next-page {
		margin: 0 2rem;
	}
	
		div.search-results-pager a.previous-page:before {
			content: '\f137';
			display: inline-block;
			font-family: FontAwesome;
			margin: 0 0.25em 0 0;
			text-decoration: none;
		}
		
		div.search-results-pager a.next-page:after {
			content: '\f138';
			display: inline-block;
			font-family: FontAwesome;
			margin: 0 0 0 0.25em;
			text-decoration: none;
		}

div.search-block {
	max-width: 68rem;
}

div.search-message {
	padding: 2rem 0;
}

/* ============================== */
/* HERO 
/* ============================== */

div.hero {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	/* overflow: hidden; */
	padding: 20rem 0 0rem 0;
	position: relative;
	z-index: 0;
}

	div.hero:before {
		background: linear-gradient(160deg, rgba(0, 115, 207, 0.75) 0%, rgba(0, 0, 0, 0.25) 75%);
		bottom: 0; 
		content: '';
		left: 0;
		position: absolute;
		right: 0;
		top: 0%;
		z-index: -1;
	}

	div.hero-inner {
		box-sizing: border-box;
		margin: 0 auto;
		max-width: 1440px;
		/* overflow: hidden; */
		padding: 4rem 2rem;
		/* position: relative; */
		/* text-align: center; */
	}

	div.hero h1 {
		/* border-bottom: 2px solid #FF7700; */
		color: #ffffff;
		font-size: 8rem;
		/* font-weight: bold; */
		line-height: 1em;
		/* margin: 0 -5rem 0 -5rem;*/
		padding: 0 0 2rem 0; 
	}

	div.hero h1:after {
		background: #FF7700;
		content: '';
		display: block;
		height: 3px;
		left: -1rem;
		margin: 1.5rem 0 0;
		position: absolute;
		right: -1rem;
	}

	div.hero p.subtitle {
		color: #ffffff;
		font-size: 3rem;
		margin: 2rem 0 0;
		padding: 0;
	}

	div.hero div.hero-html {
		/* margin: 4rem 0 0; */
	}

	div.hero a {
		border-color: #ffffff;
		border-radius: 1.6rem;
		color: #ffffff;
		font-size: 2rem;
		font-weight: 300;
		margin: 4rem 0 1rem;
	}
	
	div.hero a.left {
		margin-right: 1rem;
	}

	div.hero a:hover {
		background-color: #ffffff;
		color: #0073CF;
	}

	div.hero a:after {
		display: none;
	}

	div.sub-hero {
		background: #F2F2F2;
	}
	
	div.sub-hero-inner {
		box-sizing: border-box;
		margin: 0 auto;
		max-width: 1440px;
		/* overflow: hidden; */
		padding: 4rem 2rem 2rem 2rem;
	}

	div.sub-hero-inner div.column h3 {
		border-top: 0;
		border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
		padding: 0 0 1rem;
	}

	div.sub-hero div.columns-container {
		margin: 0 -2rem;
	}

	div.sub-hero div.column-container {
		padding: 0 2rem;
	}

	/* div.sub-hero div.column a.button {
		display: block;
		text-align: center;
	} */

	div.sub-hero h2 {
		font-weight: 300;
	}

/* ============================== */
/* MAIN 
/* ============================== */

main {
	background: #ffffff;
	display: block;
}

div.main-columns {
	align-items: flex-start;
	display: flex;
	flex-direction: row;
	margin: 0 auto;
	max-width: 1440px;
	padding: 5.6rem 0 0 0;
}

body.has-hero div.main-columns {
	padding-top: 2rem;
}

	div.left-column {
		box-sizing: border-box;
		/* float: left; */
		flex-grow: 0;
		flex-shrink: 0;
		order: 1;
		padding: 0 2rem;
		/* position: sticky;
		top: 7.6rem; */
		width: 25%;
	}

	div.main-column {
		box-sizing: border-box;
		flex-grow: 1;
		flex-shrink: 0;
		/* float: left; */
		order: 2;
		padding: 0 2rem;
		width: 50%;
	}

	div.right-column {
		box-sizing: border-box;
		/* float: left; */
		flex-grow: 0;
		flex-shrink: 0;
		order: 3;
		padding: 0 2rem;
		position: sticky;
		top: 7.6rem;
		width: 25%;
	}
	
	div.loading-page {
		color: rgba(0, 0, 0, 0.2);
		font-size: 5rem;
		padding: 10rem;
		text-align: center;
	}

	/* ------------------------------ */
	/* COLUMNS */
	/* ------------------------------ */

	div.columns-container {
		display: flex;
		flex-direction: row;
		margin: 0 -1rem;
		/* overflow: hidden; */
	}

		div.column-container {
			box-sizing: border-box;
			padding: 0 1rem;
		}

		div.column {
			box-sizing: border-box;
			height: 100%;
		}

		div.column-100p {
			width: 100%;
		}

		div.column-75p {
			width: 75%;
		}

		div.column-66p {
			width: 66.667%;
		}

		div.column-50p {
			width: 50%;
		}

		div.column-33p {
			width: 33.333%;
		}

		div.column-25p {
			width: 25%;
		}

	/* ------------------------------ */
	/* BLOCK */
	/* ------------------------------ */

	div.content-block {
		margin: 2rem 0;
	}
	
	div.block {
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 0.8rem;
		padding: 2rem;
		position: relative;
	}
	
		div.block h2 {
			border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
			font-size: 1.8rem;
			margin: 0 0 1rem 0;
			padding: 0 0 1rem;
		}
		
		div.block .button {
			display: block;
		}
		
		div.block div.input-field input[type="submit"] {
			display: block;
			width: 100%;
		}

		div.block-close-button {
			color: rgba(0, 0, 0, 0.05);
			cursor: pointer;
			height: 4rem;
			position: absolute;
			right: 0;
			top: 0;
			width: 4rem;
		}
		
		div.block-close-button:hover {
			color: rgba(0, 0, 0, 0.25);
		}
		
			div.block-close-button:before {
				content: '\f00d';
				display: block;
				font-family: FontAwesome;
				font-size: 1.6rem;
				line-height: 4rem;
				text-align: center;
				width: 100%;
			}

			div.block-close-button span.button-label {
				display: none;
			}

	/*div.block-title {
		border-radius: 0.8rem;
		overflow: hidden;
	}

		div.block-title.image div.title {
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			padding: 20rem 0 0 0;
			position: relative;
		}

			div.block-title.image div.title:before {
				background: rgba(0, 115, 207, 0.1);
				bottom: 0; 
				content: '';
				left: 0;
				position: absolute;
				right: 0;
				top: 0;
			}

		div.block-title.image h1 {
			background: rgba(0, 115, 207, 0.75);
			color: #ffffff;
			margin: 0;
			padding: 1rem 2rem;
			position: relative;
		}

		div.block-title.image p.subtitle {
			background: rgba(0, 115, 207, 1);
			color: #ffffff;
			margin: 0;
			padding: 1rem 2rem;
		}*/
	
	div.block-title.image {
		border-radius: 0.8rem;
		background-position: bottom center;
		background-repeat: no-repeat;
		background-size: cover;
		overflow: hidden;
		margin-left: -2rem;
		margin-right: -2rem;
		padding: 20rem 2rem 2rem;
		position: relative;
	}

		div.block-title.image:before {
			background: rgba(0, 115, 207, 0.3);
			bottom: 0; 
			content: '';
			left: 0;
			position: absolute;
			right: 0;
			top: 0%;
		}

		div.block-title.image h1 {
			background: #ffffff;
			border-radius: 1.6rem 1.6rem 1.6rem 0;
			display: inline-block;
			font-size: 4.6rem;
			line-height: 1em;
			margin: 0;
			padding: 1rem 2rem;
			position: relative;
		}

		div.block-title.image p.subtitle {
			background: rgba(0, 115, 207, 1);
			border-radius: 0 1.6rem 1.6rem 1.6rem;
			color: #ffffff;
			display: inline-block;
			font-size: 2.6rem;
			line-height: 1em;
			margin: 0.5rem 0 0 0;
			padding: 1rem 2rem;
			position: relative;
		}

	div.block-columns {
		margin: 0;
	}

	div.column.block {
		padding-bottom: 0;
		padding-top: 0;
	}

	div.block-title {
		border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
		color: rgba(0, 0, 0, 0.25);
		font-weight: 300;
		padding: 0 0 0.5rem 0;
	}
	
	div.border-top {
		border-top: 1px dashed rgba(0, 0, 0, 0.1);
	}

	/* ------------------------------ */
	/* INDEX BLOCK */
	/* ------------------------------ */
	
	nav#TableOfContents ul:first-child {
		border-left: 1px dashed rgba(0, 0, 0, 0.1);
		display: block;
		padding: 0 0 0 2rem;
	}
	
		nav#TableOfContents ul li {
			font-weight: 300;
		}

		nav#TableOfContents ul:first-child > li > a {
			font-weight: 700;
		}
		
			nav#TableOfContents ul li a {
				display: block;
				padding: 0.5rem 0;
				text-decoration: none;
			}
		
		a.generated-anchor {
			display: none;
			font-size: 0.8em;
			line-height: 1em;
			text-decoration: none;
		}

		*:hover > a.generated-anchor {
			display: inline;
		}
		
		a.generated-anchor:before {
			color: rgba(0, 115, 207, 0.3);
			content: '\f0c1';
			font-family: FontAwesome;
			margin: 0 0.2em;
		}
	
	/* ------------------------------ */
	/* FAQ */
	/* ------------------------------ */
	
	ul.faq {
		display: block;
	}
	
		ul.faq > li {
			background: #E5F1FA;
			border-radius: 0.8rem;
			line-height: 1.5em;
			margin: 0 0 2rem;
			overflow: hidden;
		}
		
		div.section.blue-light ul.faq > li {
			background: #fff;
		}
		
		div.section.blue ul.faq > li {
			background: #fff;
		}
		
			ul.faq li div.faq-question {
				color: #0073CF;
				cursor: pointer;
				font-weight: 700;
				padding: 1rem 1.5rem 1rem 3.5rem;
				position: relative;
 			}
			
			ul.faq li div.faq-question:hover {
				color: #FF7700;
			}
			
				ul.faq li div.faq-question:before {
					content: '\f059';
					display: block;
					font-family: FontAwesome;
					font-weight: normal;
					left: 1.5rem;
					position: absolute;
					text-align: left;
					top: 1rem;
					width: 2rem;
				}
			
			ul.faq li div.faq-answer {
				border-top: 1px dashed rgba(0, 0, 0, 0.1);
				/* color: #333; */
				display: none;
				margin: 0 1.5rem 1rem 1.5rem;
				padding: 1rem 0 0 0;
			}
			
			div.section.blue ul.faq li div.faq-answer, 
			div.section.blue ul.faq li div.faq-answer div.rich-text * {
				color: #333;
			}
				
				ul.faq li div.faq-answer div.rich-text p:last-child {
					margin-bottom: 0;
				}
			
	/* ------------------------------ */
	/* CONNECTOR COMPARISON */
	/* ------------------------------ */
	
	table.compare-connectors {
		table-layout: fixed;
		width: 100%;
	}
	
	table.compare-connectors th {
		width: 12%;
	}
	
	table.compare-connectors th:first-child {
		width: 28%;
	}
	
	span.nvt,
	span.does-support, 
	span.does-not-support {
		display: inline-block; 
		text-align: center;
		width: 100%;
	}
	
	span.nvt {
		/* line-height: 2.5em; */
	}
	
		span.does-support:before, 
		span.does-not-support:before {
			font-family: FontAwesome;
			font-size: 2rem;
			line-height: 1em; 
		}
		
		span.does-support:before {
			color: green;
			content: '\f058';
		}
		
		span.does-not-support:before {
			color: red;
			content: '\f057';
		}
	
	div.table-header-info {
		margin: 0 auto;
		position: relative;
		width: 1em;
	}
	
		div.table-header-info-icon {
			color: rgba(0, 0, 0, 0.5);
			text-align: center;
		}
		
			div.table-header-info-icon:before {
				content: '\f05a';
				cursor: pointer;
				font-family: FontAwesome;
				font-size: 2rem;
			}
		
		div.table-header-info-text {
			background: #fff;
			border-radius: 0.8rem;
			bottom: 2em;
			box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.5);
			display: none;
			left: 50%;
			line-height: 1.5em;
			margin: 0 0 0 -10rem;
			padding: 2rem;
			position: absolute;
			width: 20rem;
		}
		
		div.table-header-info:hover div.table-header-info-icon {
			color: rgba(0, 0, 0, 1);
		}
		
		div.table-header-info:hover div.table-header-info-text {
			display: block;
		}
	
	/* ------------------------------ */
	/* FORMS */
	/* ------------------------------ */
	
	form {
		/* margin: 0 auto; */
		/* max-width: 80rem; */
	}	

	div.block-form form {
		max-width: 80rem;
	}
	
	div.input-container {
		background: rgba(0, 0, 0, 0.025);
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 0.8rem; 
		margin: 0 0 1rem 0;
		overflow: hidden;
		padding: 1rem; 
	}
	
	div.input-container.submit {
		background: transparent;
		border: 0 none;
		padding: 0;
	}
	
		div.input-label {
			box-sizing: border-box;
			color: rgba(0, 0, 0, 0.25);
			font-size: 1.4rem;
			/* font-weight: 300; */
			line-height: 1em;
			margin: 0 0 1rem 0;
			text-transform: uppercase;
		}
		
		div.input-container.submit div.input-label {
			display: none;
		}
		
			div.input-label label {
				
			}
			
		div.input-field {
			border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
			box-sizing: border-box;
		}
		
		div.input-container.checkboxselectmultiple div.input-field, 
		div.input-container.radioselect div.input-field, 
		div.input-container.submit div.input-field {
			border-bottom: 0;
		}
		
			div.input-field input {
				font-family: Prompt, Arial, sans-serif;
				font-size: 1.6rem;
				font-weight: 200;
				line-height: 1.25em;
				color: #333;
			}
			
			input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="color"]) {
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
			}
			
			div.input-field input:focus,
			div.input-field textarea:focus {
				outline-style: none;
				box-shadow: none;
				border-color: transparent;
			}
			
			div.input-field label {
				color: #333;
				display: block;
				margin: 0 0 1rem 2rem;
			}
			
			div.input-field ul li:last-child label {
				margin-bottom: 0;
			}
			
				div.input-field label input {
					display: block;
					float: left;
					margin-left: -2rem;
				}
			
			div.input-field input[type=text], div.input-field input[type=email], div.input-field input[type=password] {
				background: transparent;
				border: 0 none;
				width: 100%;
			}
			
			div.input-field input[type=submit] {
				background: #FF7700;
				border: 0 none;
				border-radius: 0.8rem;
				color: #fff;
				/* font-weight: 700; */
				line-height: 2em;
				padding: 0 0.75em;
				white-space: nowrap;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none
			}
			
			div.input-field input[type=submit]:hover {
				background: #E57005;
				cursor: pointer;
			}
			
			div.input-field input[type=submit]:after {
				content: '\f138';
				display: inline-block;
				font-family: FontAwesome;
				font-weight: normal;
				margin: 0 0.25em 0;
			}

			div.input-field span.form-loading {
				background: rgba(0, 0, 0, 0.4);
				border: 0 none;
				border-radius: 0.8rem;
				color: #fff;
				cursor: default;
				display: inline-block;
				line-height: 2em;
				padding: 0 0.75em;
				white-space: nowrap;
			}
			
			div.input-field textarea {
				background: transparent;
				border: 0 none;
				color: #333;
				font-family: Prompt, Arial, sans-serif;
				font-size: 1.6rem;
				height: 7.5em;
				line-height: 1.25em;
				width: 100%;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none
			}

		div.input-container.textinput.extraatje {
			border: 0;
			height: 0;
			margin: 0;
			padding: 0;
			width: 0;
		}
			
		div.input-container ul.errorlist li {
			background: rgba(255, 0, 0, 0.1);
			border-radius: 0.4rem;
			margin: 0 0 1rem;
			padding: 0.5em;
		}
	
	div.submission-confirmation {
		background: rgba(0, 0, 0, 0.025);
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 0.8rem; 
		margin: 0 0 1rem 0;
		padding: 2rem; 
	}

	div.submission-confirmation > :last-child {
		margin-bottom: 0;
	}
	
	/* ------------------------------ */
	/* SCROLL-IN POPUP */
	/* ------------------------------ */
	
	div.scrollin-popup {
		background: #fff;
		border-radius: 1.6rem 1.6rem 0 0;
		bottom: 0;
		box-shadow: 0 0rem 2rem rgba(0, 0, 0, 0.15);
		box-sizing: border-box;
		display: none;
		left: 4rem;
		max-width: 40rem;
		padding: 0 2rem;
		position: fixed;
		width: calc(100% - 8rem);
		z-index: 110;
	}
	
		div.scrollin-popup h2 {
			border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
			font-size: 1.8rem;
			margin: 0 0 1rem 0;
			padding: 0 0 1rem;
		}
		
		div.scrollin-popup div.input-field input[type="submit"] {
			display: block;
			width: 100%;
		}
		
		div.scrollin-popup-close {
			color: rgba(0, 0, 0, 0.25);
			cursor: pointer;
			position: absolute;
			right: 2rem;
			top: 2rem;
		}
		
		div.scrollin-popup-close:hover {
			color: rgba(0, 0, 0, 0.5);
		}
		
			div.scrollin-popup-close:before {
				content: '\f00d';
				font-family: FontAwesome;
				font-size: 1.6rem;
				line-height: 1.8rem;
			}
	
	/* ------------------------------ */
	/* TABS */
	/* ------------------------------ */
	
	div.tabs-container {
		margin: 0 0 2rem 0;
	}

	ul.tab-headers {
		border-bottom: 1px solid #0073CF;
	}
	
	#tabs {
		overflow: hidden;
	}

	#tabs ul,
	ul.tab-headers {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	ul.tab-headers {
		overflow: hidden;
	}

	#tabs ul li,
	ul.tab-headers li {
		float: left;
		margin: 0;
	}

	#tabs ul li:before,
	ul.tab-headers li:before {
		display: none;
	}
	
	#tabs ul li:before {
		display: none;
	}

	#tabs ul li:hover {
		background-color: #fff;
	}
	
	#tabs ul li a,
	ul.tab-headers li a {
		border-bottom: 3px solid transparent;
		display: block;
		padding: 0.5em 1em;
		text-decoration: none;
	}
	
	#tabs ul li.currenttab a,
	ul.tab-headers li.current a {
		border-color: #0073CF;
		display: block;
		font-weight: bold;
		padding: 0.5em 1em;
		text-decoration: none;
	}
	
	div.tab-body {
		background: rgba(0, 0, 0, 0.05);
		display: none;
		overflow: auto;
		padding: 2rem 2rem;
	}
	
	div.tab-body > *:last-child > *:last-child {
		margin-bottom: 0;
	}
	
	div.tab-body.current {
		display: block;
	}
	
	div.tab-body > div.block-text > div.rich-text > h3 {
		border-top: none;
		margin-top: 0;
		padding: 0;
	}

	div.tab-body pre {
		background: transparent;
		padding: 0;
	}
	
	/* ------------------------------ */
	/* FHIR SPECS TABLE */
	/* ------------------------------ */
	
	#sdtable {
		margin: 0 0 1.5em 0;
		/* max-height: 50rem; */
		/* overflow: auto; */
	}
	
	#sdtable div.tab-body {
		padding: 1rem;
	}
	
	#sdtable img {
		margin: 0;
		display: inline;
	}
	
	#sdtable table {
		border-spacing: 0;
		font-family: inherit !important;
		font-size: 1.4rem !important;
		margin: 0;
		table-layout: fixed;
		word-break: break-word;
	}
	
	#sdtable table tr {
		border: 0 none !important;
		font-family: inherit !important;
		font-size: inherit !important;
	}
	
	#sdtable table td, #sdtable table th {
		background: transparent;
		border: 0;
		font-family: inherit !important;
		line-height: 1.5em;
	}

	/*#sdtable tr td:nth-child(2), #sdtable tr td:nth-child(3) {
		max-width: 35px;
	}*/

	#sdtable tr td:nth-child(5) {
		/* word-break: break-all; */
	}
	
	#sdtable tr th:nth-child(1) {
		width: 26%;
	}
	
	#sdtable tr th:nth-child(2) {
		width: 7%;
	}
	
	#sdtable tr th:nth-child(3) {
		width: 7%;
	}
	
	#sdtable tr th:nth-child(4) {
		width: 25% !important;
	}
	
	#sdtable tr th:nth-child(5) {
		width: 35%;
	}

	#sdtable .hierarchy {
		padding: 0px 4px 0px 4px;
		vertical-align: top;
	}

	#sdtable tr.hierarchy {
		padding: 0px 4px 0px 4px;
		vertical-align: top;
	}

	#sdtable img.hierarchy {
		background-color: transparent !important;
		border: 0;
		padding: 0;
		vertical-align: top;
	}

	#sdtable tr:hover td {
		background-color: rgba(0, 0, 0, 0.05); 
	}
		
	/*.mustsupport {
		font-size: 0;
		background-image: url('https://tio.zorgdomein.nl/fhir/guide/assets/img/mustsupport.png');
		display: block;
		background-repeat: no-repeat;
		padding: 0 3px;
		float: left;
		width: 16px;
		margin-top: 3px;
	}*/
	
	.currenttab {
		background-color: #fff !important;
	}
	
	a.fhir-definition-link {
		position: relative;
	}
	
	div.fhir-definition-popup-container {
		position: relative;
	}
	
		div.fhir-definition-popup {
			background: #fff;
			border-radius: 0.8rem;
			bottom: 2em;
			box-shadow: 0 0rem 2rem rgba(0, 0, 0, 0.15);
			box-sizing: border-box;
			left: 1rem;
			margin: 0 0 1rem 0;
			position: absolute;
			right: 1rem;
			z-index: 9;
		}
		
		div.fhir-definition-popup:before {
			bottom: -15px;
			color: #fff;
			content: '▼';
			font-size: 20px;
			left: 20px;
			line-height: 20px;
			position: absolute;
			text-shadow: 0 0.4rem 0.3rem rgba(0, 0, 0, 0.2);
			transform: scaleX(2);
		}
		
		div.fhir-definition-popup div.popup-header {
			background: #F2F2F2; /*#E5F1FA;*/
			border-radius: 0.8rem 0.8rem 0 0;
			color: #7B7B7B;
			font-size: 1.8rem;
			font-weight: bold;
			height: 4rem;
			line-height: 4rem;
			padding: 0 2rem;
			overflow: hidden;
		}
		
			div.fhir-definition-popup div.popup-header div.close {
				color: rgba(0, 0, 0, 0.25);
				cursor: pointer;
				font-size: 1.6rem;
				position: absolute;
				right: 0;
				text-align: center;
				top: 0;
				width: 4rem;
			}
			
			div.fhir-definition-popup div.popup-header div.close:hover {
				color: rgba(0, 0, 0, 0.5);
			}
		
		div.fhir-definition-popup div.popup-body {
			/* bottom: 0; */
			/* left: 0; */
			max-height: 40rem;
			overflow: auto;
			padding: 4rem 4rem 0 4rem;
			/* position: absolute; */
			/* right: 0; */
			/* top: 4rem; */
		}
		
		/* Firefox scroll issue workaround */
		div.fhir-definition-popup div.popup-body:after {
			content: ' ';
			display: block;
			height: 4rem;
			width: 100%;
		}
		
			div.fhir-definition-popup div.popup-body div.loading {
				color: #F2F2F2;
				font-size: 6rem;
				padding: 4rem;
				text-align: center;
			}
			
			div.fhir-definition-popup div.popup-body p {
				line-height: 1.25em;
				margin: 0;
			}
			
			div.fhir-definition-popup div.popup-body b {
				font-weight: bold;
			}
			
			div.fhir-definition-popup div.popup-body table {
				margin: 0;
			}
			
				div.fhir-definition-popup div.popup-body table tr {
					/* border-bottom: 1px dashed rgba(0, 0, 0, 0.1); */
				}
				
					div.fhir-definition-popup div.popup-body table tr td {
						background: transparent;
						padding: 0.5rem;
					}
	
	/* ------------------------------ */
	/* ZD DOCUMENTS DIAGRAM */
	/* ------------------------------ */
	
	div.zd-document-diagram {
		margin: 8px auto !important;
		max-width: 500px;
		font-size: 1.4rem;
		padding: 0 60px;
	}

	div.zd-document-diagram div.element {
		background: rgba(0, 0, 0, 0.05);
		margin: 8px 0 0 0;
		padding: 8px;
		line-height: 1em;
		border-radius: 3px;
	}

	div.zd-document-diagram div.element.blue {
		background-color: hsl(210, 60%, 90%);
	}
		
		div.zd-document-diagram div.element.blue div.reference, div.element.blue.target-element, div.element.blue div.arrow {
			border-color: hsl(210, 60%, 60%);
		}

	div.zd-document-diagram div.element.orange {
		background-color: hsl(30, 90%, 90%);
	}
		
		div.zd-document-diagram div.element.orange div.reference, div.element.orange.target-element, div.element.orange div.arrow {
			border-color: hsl(30, 90%, 60%);
		}

	div.zd-document-diagram div.element.yellow {
		background-color: hsl(60, 100%, 90%);
	}
		
		div.zd-document-diagram div.element.yellow div.reference, div.element.yellow.target-element, div.element.yellow div.arrow {
			border-color: hsl(60, 100%, 60%);
		}

	div.zd-document-diagram div.element.pink {
		background-color: hsl(300, 60%, 90%);
	}
		
		div.zd-document-diagram div.element.pink div.reference, div.element.pink.target-element, div.element.pink div.arrow {
			border-color: hsl(300, 60%, 60%);
		}

	div.zd-document-diagram div.element.cyan {
		background-color: hsl(180, 60%, 90%);
	}
		
		div.zd-document-diagram div.element.cyan div.reference, div.element.cyan.target-element, div.element.cyan div.arrow {
			border-color: hsl(180, 60%, 60%);
		}

	div.zd-document-diagram div.element.green {
		background-color: hsl(90, 60%, 90%);
	}

		div.zd-document-diagram div.element.green div.reference, div.element.green.target-element, div.element.green div.arrow {
			border-color: hsl(90, 60%, 60%);
		}

	div.zd-document-diagram div.element-label {
		display: inline-block;
	}	

	div.zd-document-diagram div.element-header {
		font-weight: bold;
		cursor: pointer;
		display: inline-block;
	}

		div.zd-document-diagram div.element-header:before {
			display: inline-block;
			width: 1em;
			text-align: center;
			content: "\f107"; /* "\f055";  \f196 */
			font-family: FontAwesome;
		}
		
		div.zd-document-diagram div.collapsed div.element-header:before {
			content: "\f105"; 
		}
		
	div.zd-document-diagram div.collapsed div.child-elements {
		display: none;
	}

	div.zd-document-diagram div.reference {
		position: relative;
		border-width: 3px;
		border-style: solid;
		border-color: red;
		padding: 5px;
	}
		
		div.zd-document-diagram div.arrow {
			border-color: red;
			border-style: solid;
			cursor: default;
			/* top: 1.2rem; */
		}

	div.zd-document-diagram div.element a i.fa {
		color: #333;
		opacity: 0.5;
	}
		
		div.zd-document-diagram div.element a:hover i.fa {
			opacity: 1;
		}

	div.zd-document-diagram div.target-element {
		border-width: 3px;
		border-style: solid;
		border-color: red;
		padding: 5px;
	}

	div.zd-document-diagram div.element-info-button {
		display: inline-block;
		position: relative;
	}

	/* ------------------------------ */
	/* MISC */
	/* ------------------------------ */
	
	.page-date {
		color: rgba(0, 0, 0, 0.25);
		border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
		margin: 0 0 2rem 0;
		padding: 0 0 1rem 0;
	}

/* ============================== */
/* FIXED BOTTOM CONTAINER */
/* ============================== */


	/* ------------------------------ */
	/* NOTIFICATIONS */
	/* ------------------------------ */

	ul.notifications {
		bottom: 5rem;
		overflow: hidden;
		position: fixed;
		right: 1rem;
	}

		ul.notifications li {
			background: #F2F2F2;
			border: 1px solid rgba(0, 0, 0, 0.1);
			border-radius: 0.8rem;
			box-sizing: border-box;
			clear: both;
			float: right;
			font-size: 1.4rem;
			margin: 0 0 1rem 0;
			max-width: 320px;
			padding: 1rem 2rem 1rem 1rem;
			position: relative;
		}

		ul.notifications li div.close {
			color: rgba(0, 0, 0, 0.15);
			cursor: pointer;
			height: 1em;
			font-size: 1.4rem;
			line-height: 1em;
			position: absolute;
			right: 0.5rem;
			top: 0.5rem;
			text-align: center;
			width: 1em;
		}

		div.notification div.close:hover {
			color: rgba(0, 0, 0, 0.25);
		}
		
			div.notification div.close:before {
				content: '\f00d';
				font-family: FontAwesome;
			}

	div.notification > div.close {
		display: none;
	}
	
	/* ------------------------------ */
	/* QUICK QUESTION */
	/* ------------------------------ */
	
	div.quick-question {
		bottom: 1rem;
		border-radius: 1.6rem 1.6rem 0 1.6rem;
		box-shadow: 0 0rem 2rem rgba(0, 0, 0, 0.15);
		box-sizing: border-box;
		float: right;
		max-width: calc(100% - 2rem);
		position: fixed;
		overflow: hidden;
		right: 1rem;
		z-index: 1;
	}
	
		div.quick-question-header {
			background: #0073CF;
			padding: 1rem 2rem;
			position: relative;
		}
		
			div.quick-question-header h2 {
				color: #fff;
				font-size: 1.8rem;
				line-height: 2rem;
				margin: 0;
			}
			
			div.quick-question-toggle {
				color: rgba(255, 255, 255, 0.5);
				cursor: pointer;
				line-height: 2rem;
				position: absolute;
				right: 1rem;
				top: 1rem;
			}
			
			div.quick-question-toggle:hover {
				color: rgba(255, 255, 255, 1.0);
			}
			
				div.quick-question-toggle:before {
					content: '\f063';
					font-family: FontAwesome;
					font-size: 1.6rem;
					line-height: 1.8rem;
				}
		
		div.quick-question-body {
			background: #fff;
			/* border-top: 1px dashed rgba(0, 0, 0, 0.1); */
			/* border-radius: 0.8rem 0.8rem 0 0.8rem; */
			/* margin: 1rem 0 0 0; */
			max-width: 100%;
			overflow: hidden;
			/* padding: 1rem 0 0 0; */
			padding: 0 2rem;
			width: 30rem;
		}
		
			div.quick-question div.input-field input[type="submit"] {
				display: block;
				width: 100%;
			}
			
			div.quick-question div.input-field textarea {
				height: 5em;
			}
	
	div.quick-question.collapsed {
		/*animation: zoomswing 1s ease;
		animation-delay: 5s;
		animation-iteration-count: 1;
		transform-origin: right bottom;*/
	}
	
	div.quick-question.collapsed div.quick-question-toggle {
		display: none;
	}

	div.quick-question.collapsed div.quick-question-header {
		cursor: pointer;
	}
	
	div.quick-question.collapsed div.quick-question-header:hover h2 {
		color: #FF7700;
	}
	
	div.quick-question.collapsed div.quick-question-body {
		display: none;
	}

/* ============================== */
/* FOOTER */
/* ============================== */
	
footer {
	background-color: #F2F2F2;
	/* border-top: 1px solid rgba(0, 0, 0, 0.05); */
	/* bottom: 0; */
	color: #505050;
	display: block;
	font-size: 1.4rem;
	position: relative;
	width: 100%;
}

	footer * {
		color: #505050;
	}
	
	footer div.footer-inner {
		margin: 0 auto;
		/* max-width: 1440px; */
		padding: 2rem;
		text-align: center;
	}
	
	div.footer-bottom {
		border-top: 1px solid rgba(0, 0, 0, 0.05);
		margin: 3rem 0 0 0;
		overflow: hidden;
		padding: 3rem 0 0 0;
	}
		
		div.footer-icon {
			margin: 0 0 1rem;
		}
		
			div.footer-icon svg {
				width: 15rem;
			}
			
		div.footer-disclaimer {
			line-height: 2rem;
		}

		div.fhir-disclaimer {
			font-size: 1.2rem;
			margin: 4rem 0 0;
			position: relative;
		}

		div.fhir-disclaimer:before {
			background: #FF7700;
			content: '';
			display: block;
			height: 2px;
			left: -3rem;
			position: absolute;
			right: -3rem;
			top: -2rem;
			z-index: 0;
		}
		
/* ============================== */
/* COOKIE BAR */
/* ============================== */

.cc-window {
	align-items: center;
	background: #FF7700;
	box-sizing: border-box;
	color: #fff;
	display: flex;
	height: 5.6rem;
	left: 0;
	opacity: 1;
	overflow: hidden;
	padding: 1rem 2rem;
	position: fixed;
	right: 0;
	top: 0;
	transition: opacity 1s ease;
	z-index: 9999;
}

.cc-window.cc-invisible {
    opacity: 0;
}

	.cc-window .cc-message {
		flex-grow: 1;
	}
	
	a.cc-btn {
		background: #FF7700;
		border: 1px solid #fff !important;
		border-radius: 0.8rem;
		color: #fff;
		cursor: pointer;
		display: inline-block;
		font-weight: 700;
		line-height: 2em;
		padding: 0 0.75em;
		text-decoration: none;
		white-space: nowrap;
	}
	
	a.cc-btn:hover {
		background: #fff !important;
		color: #FF7700 !important;
	}

@keyframes zoomswing {
	25% {
		transform: scale(1.05);
	}
	
	50% {
		transform: scale(1.0);
	}
	
	75% {
		transform: scale(1.05);
	}
	
	100% {
		transform: scale(1.0);
	}
}

@media screen and (max-width: 1400px) {
	html {
		font-size: 56.25%;
	}
}	

@media screen and (max-width: 1200px) {
	html {
		font-size: 50%;
	}
}	

@media screen and (max-width: 1000px) {
	
	html {
		font-size: 62.5%;
	}
	
	div#nav-toggle {
		display: block;
	}

	div.breadcrumbs-bar {
		display: none;
	}

	div.index-block {
		display: none;
	}
	
	div#main-navigation {
		background: #F2F2F2;
		border: 1rem solid #fff;
		border-top: 0;
		border-radius: 0;
		bottom: 0rem;
		display: none;
		font-size: 2rem;
		left: 0rem;
		margin: 0;
		overflow-y: scroll;
		position: fixed;
		top: 6.6rem;
		right: 0rem;
		z-index: 11;
	}

	div#main-navigation ul.generated-menu div.menu-item-label {
		padding-top: 2rem;
	}

	div#main-navigation ul.generated-menu div.branch-toggle {
		padding-top: 2rem;
	}

	div#main-navigation.expanded {
		display: block;
	}

	div.main-columns {
		display: block;
	}

	div.left-column, div.main-column, div.main-column.full-width, div.right-column {
		float: none;
		width: 100%;
	}

	div.left-column:empty {
		display: none;
	}
}

@media screen and (max-width: 720px) {
	
	html {
		font-size: 50%;
	}

	div.columns-container {
		display: block;
	}

	div.columns-container div.column-75p,
	div.columns-container div.column-50p,
	div.columns-container div.column-33p,
	div.columns-container div.column-25p {
		width: auto;
	}

	div.columns-container div.block {
		margin-bottom: 2rem;
	}

	div.columns-container div.column-container:last-child div.block {
		margin-bottom: 0;
	}

}

@media screen and (max-width: 500px) {
	div.footer-icon {
		display: block;
		padding: 0;
	}

	div.hero h1 {
		font-size: 6rem;
	}
}