/* enrollment css V010 as of 2017-08-10
/* file structure 
	1.0 color presets, variables 
	2.0 n3u layout
		with screeen size dependencies
	2.1.1 materialize shadow fading
	2.1.2 materialize .nav extensions
		with screeen size dependencies
	2.1.3 further marterialize modifications
		with screeen size dependencies
	2.1.4 sticky toasts
	2.2 screen specific rules
	2.2.1 login screen
	2.2.2 enrollment screen
	2.2.3 log screen
	2.2.4 settings screen
	3.0 L18n

/* 1.0 color presets */
	:root {
		--red: #CC0000;
		--pink: #f10e70;
		--pink_lighten_5: #fff3fd;
		--pink_lighten_2: #CC52A8;#CC52A8
		--pink_accent_3: #ff0a74; /* since V010. before: more reddish, slightly darker: #f50057; */
		/*--pink_accent_4: #CB0158; not used yet */
		--purple: #B30C81;
		--purple_lighten_2: #CC52A8;
		--deep_purple: #701170;
		--indigo: #3434AC;
		--indigo_lighten_2: #6B6AEB;
		/*--blue: ;*/
		--light_blue: #8C7BE6; 
		/*--cyan:;*/
		--cyan_darken_4: #00728C; /* aletrnatives: not so saturated #088AA8; blueish #137FB6*/;
		--cyan_darken_3: hsla(191, 100%, 28%, 0.8);
		--cyan_lighten_5: rgba(249, 251, 255, 1);
		--teal: #2D7F80;
		--teal_lighten_4: hsla(191, 80%, 40%, 0.4); /* --text_select */
		--teal_lighten_2: #2cbbad; /* since V016. used für button hover (same as materializecss default button hover) */
		--teal_lighten_1: #26a599; /* since V016. standard button idle */ 
		--teal_darken_2: #00706b; /* since V012. used on telsearch icon mouseover */ 
		--teal_accent_2: #00bda4; /* since V010. before: a little bit more yellow #00bfa5 */ 
		--teal_accent_3: #00bda4; /* since V010. before: a little bit more yellow #00bfa5 */
		--teal_accent_4: #007f80; /* since V012. approx same visual brightness and hue as --teal, but fully saturated */   
		--green: #36B33A;
		--green_darken_4: #29662B;
		--green_accent_3: #14e18f; /* etwas zu viel gelb #16da6d; */
		--light_green: #77BF13;
		--lime: #61EB99;
		/*--yellow:;*/
		--yellow_lighten_4: #f7f7cf; /* for notes post-it */
		/*--amber:;*/
		--amber_lighten_5: #fffbf0; /* since V011; before #fff8e1 */;
		--amber_lighten_2: #ffd54f;
		/*--orange:;*/
		/*--deep_orange:;*/
		--brown: #795548;  /* standard; user for postit text color */
		/*--grey:;*/
		--grey_lighten_1: #cccccc; /* V016: used for calculated values in input fields */ 
		--grey_lighten_2: #e0e0e0;
		--grey_lighten_3: #eeeeee;
		--grey_lighten_4: #f5f5f5;
		--grey_lighten_5: #fafafa;
		--blue_grey: #626486;

		--positive: var(--green_accent_3);
		/*--info: var();*/
		--negative: var(--pink); 
		--background: var(--cyan_lighten_5);
		--text: rgba(0,0,0,0.87);
		--text_select: var(--teal_lighten_4);
		--active: rgba(0,0,0,0.1);

		--scrolljump: 24px;
	}

	.red { background-color: var(--red) !important; }
	.pink { background-color: var(--pink) !important; }
	.pink.lighten-2 { background-color: var(--pink_lighten_2) !important; }
	.pink.accent-3 { background-color: var(--pink_accent_3) !important; }
	.purple { background-color: var(--purple) !important; }
	.deep-purple { background-color: var(--deep_purple) !important; }
	.indigo { background-color: var(--indigo) !important; }
	.indigo.lighten-2 { background-color: var(--indigo_lighten_2) !important; }
	/*.blue { background-color: var(--blue) !important; }*/
	.light-blue { background-color: var(--light_blue) !important; }
	/*.cyan { background-color: var(--cyan) !important; }*/
	.cyan.darken-4 { background-color: var(--cyan_darken_4) !important; }
	.cyan.lighten-5 { background-color: var(--cyan_lighten_5) !important; }
	.teal { background-color: var(--teal) !important; }
	.green { background-color: var(--green) !important; }
	.green.darken-4 { background-color: var(--green_darken_4) !important; }
	.light-green { background-color: var(--light_green) !important; }
	.lime { background-color: var(--lime) !important; }
	/*.yellow { background-color: var(--yellow) !important; }*/
	.yellow.lighten-4 {background-color: var(--yellow_lighten_4) !important; }
	/*.amber { background-color: var(--amber) !important; }*/
	/*.orange { background-color: var(--orange) !important; }*/
	/*.deep-orange { background-color: var(--deep_orange) !important; }*/
	/*.brown { background-color: var(--brown) !important; }*/
	/*.grey { background-color: var(--grey) !important; }*/
	.grey.lighten-3 { background-color: var(--grey_lighten_3) !important; }
	.grey.lighten-4 { background-color: var(--grey_lighten_4) !important; }
	.grey.lighten-5 { background-color: var(--grey_lighten_5) !important; }
	/*.grey { background-color: var(--grey) !important; }*/
	.blue-grey { background-color: var(--blue_grey) !important; }
/* 2.0 n3u layout */
	body.n3u-scroll-top,
	body.n3u-header-restored {
		padding-top: 36px;
	} 
	body, 
	body.n3u-scrolled,
	body.n3u-header-small {
		padding-top: 36px;
		background-color: var(--background);
		transition: padding-top 0.3s;
	} 
	body.n3u-header-minified {
		padding-top: 0px;
		padding-top: 6px;
	} 
	body.n3u-scrolled > div, 
	body.n3u-header-small > div {
		/*padding-top: 18px;   */
	}

	#n3u-mainNavigation {
		position: absolute;
		z-index: 100;
		padding-top: 0;
		width: 100%;
		top: 0;
	}
	#n3u-mainNavigation .minimal-nav {
		position: fixed;
		padding-top: 0;
		width: 100%;
		top: 0;
		height:12px;
		overflow: hidden;
	}
	#n3u-mainNavigation .minimal-nav .bar {
		position: absolute;
		z-index: -1;
		width:100%;
		height: 6px;
	}
	#n3u-mainNavigation .minimal-nav a {
		display: inline-block;
		width: 15%;
		height: 12px;
		vertical-align: top;
		margin-right: -0.26em;
		cursor: pointer;
	}
	#n3u-mainNavigation .minimal-nav a:hover {
	    background-color: rgba(0,0,0,0.1);
	}
	#n3u-mainNavigation .minimal-nav a:active {
	    background-color: rgb(0, 102, 126);
	}

	.nu3-scroll-top nav {
		box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3);
	}
	.n3u-scrolled nav {
		top: -30px;
		position: fixed;
		z-index: -1;
		transition: top 0.3s ease-out;
		box-shadow: 0 1px 1px 0 rgba(33,34,70,0.2), 0 1px 5px 0 rgba(33,34,70,0.0), 0 3px 1px -2px rgba(33,34,70,0.0);
	}
	.n3u-scrolled nav.focus {
		top: -0px;
		position: fixed;
		z-index: 0;
		transition: top 0.3s ease-out;
	}

	.content-wrapper {
		padding-top: 12px;
		/*transition: padding-top 0.3s;*/
		background-color: var(--background);
	}

	@media only screen and (min-width: 601px) { /*  ========================================== */
		body.n3u-scroll-top,
		body.n3u-header-restored {
			padding-top: 48px;
		} 
		#n3u-mainNavigation {
			position: fixed;
		}
		#n3u-mainNavigation .minimal-nav {
			display: none;
		}
	}
	@media only screen and (min-width: 992px) { /*  ========================================== */
		body.n3u-scroll-top,
		body.n3u-header-restored {
			padding-top: 60px;
		} 
		.content-wrapper {
			padding-top: 24px;
			/*transition: padding-top 0.3s;*/
		}

	}
/* 2.1.1 materialize shadow fading */ 
	body.idle .z-depth-1, .z-depth-1:hover, 
	body.idle nav, nav:hover, 
	body.idle .card-panel, .card-panel:hover, 
	body.idle .card, .card:hover, 
	body.idle .toast, .toast:hover, 
	body.idle .btn, .btn:hover, 
	body.idle .btn-large, .btn-large:hover, 
	body.idle .btn-floating, .btn-floating:hover, 
	body.idle .dropdown-content, .dropdown-content:hover, 
	body.idle .collapsible, .collapsible:hover, 
	body.idle .side-nav, .side-nav:hover {
		box-shadow: 
			0 2px 2px 0 rgba(33,34,70,0.14), 
			0 1px 5px 0 rgba(33,34,70,0.12), 
			0 3px 1px -2px rgba(33,34,70,0.2);
			z-index: 90;
		transition: z-index 0.1s linear, box-shadow 0.1s linear;
	}
	.z-depth-1, 
	nav, 
	.card-panel, 
	.card, 
	.toast, 
	.btn, 
	.btn-large, 
	.btn-floating, 
	.dropdown-content, 
	.collapsible, 
	.side-nav {
		box-shadow: 
			0 1px 1px 0 rgba(33,34,70,0.2), 
			0 1px 5px 0 rgba(33,34,70,0.0), 
			0 3px 1px -2px rgba(33,34,70,0.0);
		transition: z-index 3s 3s, box-shadow 3s 3s linear;
	}
/* 2.1.2 materialize .nav extensions */
	nav {
		position: absolute;
		height: 36px;
		line-height: 36px;
		transition: box-shadow 3s 3s linear, height 0.3s, line-height 0.3s;
	}
	nav .pagetitle-wrapper {
		white-space: nowrap;
		overflow: visible;
		margin-left: 0.5rem;
		font-size: 1.05rem;
		letter-spacing: 0.02rem;
		overflow: visible;
		height: 48px;
		left: inherit;

	} 
	nav #title {
		float: left;
		font-weight: bold;
	}
	nav #title a {
		padding: 10px 5px;
	}
	nav #title a:hover {
		background-color: rgba(0,0,0,0.1);
	}
	nav #nav-mobile {
		display: inline-block;
		/*position: absolute;*/
	}
	nav ul a {
		font-size: 0;
		padding: 0 5px;
	}
	nav ul .select-options a {
		font-size: 1rem;
	}
	nav ul li {
		min-width: 38px;
	}

	nav i, 
	nav i.material-icons {
		display: inline-block;
		vertical-align: middle;
		margin-top: -8px;
		margin-bottom: -4px;
		font-size: 20px;
		height: 48px;
		line-height: 48px;
	}
	nav .logo-wrapper {

	}

	nav .brand-logo {
		background-image: url(../img/enrollment-36-white.svg);
		background-repeat: no-repeat;
		background-size: 20px;
		background-position: 12px 12px;
		background-color: transparent;
		color: transparent;
		left: inherit;
		transform: background-size 0.3s;
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		top: 0.1rem;
		left: -0.1rem;
		width: 3rem;
		/*transform: rotate(-20deg) scale(0.9);;*/
	}
	nav .brand-logo.large {
		background-image: url(../img/icon-next2-rounded-white.svg);
		background-repeat: no-repeat;
		background-size: 36px;
		background-position: 16px 13px;
		background-color: transparent;
		color: transparent;
	}
	nav .options-wrapper {
		float: right;
		white-space: nowrap;
	}
	@media only screen and (min-width: 601px) { /*  ========================================== */
		nav {
			height: 48px;
			line-height: 48px;
		}
		nav .pagetitle-wrapper {
			margin-left: 2.2rem;
		}
		nav ul a {
			font-size: 1rem;
		}
		.thin nav .pagetitle-wrapper {
			height: 34px;
		} 
		nav .options-wrapper i,
		nav .pagetitle-wrapper i,  
		nav .select.collection i {
			display: none;
		}
		nav #showOptions a span i { /* only temporary for settings panel */
			display: inline-block;
			vertical-align: bottom;
			transform: scaleX(0.6);
			transform-origin: left;
		}
		nav #title a {
			padding: 16px 15px 16px 10px ;
		}
		nav ul a {
			padding: 0px 15px;
		}
	}
	@media only screen and (min-width: 993px) {
		nav .pagetitle-wrapper {
			margin-left: 3.5rem;
			font-size: 1.4rem;
			overflow: visible; 	/* default */
			/* margin-left: 5rem;	/* default */
			height: 64px;
		} 
		nav {
			height: 64px;
			line-height: 64px;
		}
		nav .brand-logo {
			background-size: 36px;
			background-position: 18px 12px;
			top: 0.1rem;
			left: 0rem;
			width: 4.5rem;
			/*transform: rotate(-20deg) scale(0.9);;*/
		}
		nav #title a {
			padding: 22px 15px 22px 15px;
		}
		nav ul a {
			padding: 0px 30px;
		}

	}

	/* all settings for the V001 non-materialize sexy options dropdown */
	nav .select.collection {
		margin-top: 0.05rem;
		border: none;
		overflow: visible;
		margin-bottom: 0;
	}
	nav .select.collection .select-options {
		position: absolute;
		visibility: hidden;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		z-index: 10;
		margin-top: -1px;
		background-color: white;
		box-shadow: 
			0 4px 5px 0 rgba(0,0,0,0.14), 
			0 1px 350px 40px rgba(0,0,0,0.05), 
			0 1px 10px 0 rgba(0,0,0,0.12), 
			0 2px 4px -1px rgba(0,0,0,0.3)
	}
	/*	nav .select.collection > a:after {
		content: '\25BC';
		margin-left: 0.6em;
		font-size: 45%;
		margin-top: -1px;
		vertical-align: top;
	} 
	*/
	nav .select.collection:hover .select-options {
		visibility: visible;
	}
	nav .select.collection:hover > a {
		background-color: rgba(0,0,0,0.1); /* same as selected */ 
	} 
	nav .select.collection:hover .select-options a {
		color: rgba(0,0,0,0.87); /* same as default text */
	}
	nav ul#nav-mobile .select-options a {
		white-space: nowrap;
	}
	i.spinner {
		/*visibility: visible;*/
		width: 2em;
		height: 2em;
		/* background-color: red; */
		display: inline-block;
		vertical-align: middle;
		margin-right: -2em;
		background-image: url(../img/spin.svg);
		background-size: 1.3em;
	}
	nav .select.collection:hover .select-options a .spinner {
		visibility: hidden;
	}
	nav .select.collection:hover .select-options a.loading {
		cursor: default;
		color: grey !important;
		margin-right: 2em;
	}
	nav .select.collection:hover .select-options a.loading .spinner {
	    visibility: visible;
		display: inline-block;
		float: right;
		margin-right: -1.7em;
		height: 1.3em;
		width: 1.3em;
		margin-top: 16px;
	}
	nav ul#nav-mobile a[selected] {
		background-color: rgba(0,0,0,0.1); /* same as hover */
		cursor: default;
	}
	/* V002 options tooltips disabled. They dont display correctly any more, due to dropdown arrow positioning  */ 
	#options2 i[title] {
		display: none;
	}
	nav .pagetitle-wrapper ul li.page.active {
		/* prevent materialize default where active items are darkened slightly */
		background-color: transparent;
	}
	/* V009 hidden pages */
	.__pageHidden {
		display: none;
	}
/* 2.1.3 further materialize modifications */
	html, body {
		height: 100%;
	}
	html, 
	body.login {
		background-color: var(--cyan_darken_4);
	}
	html, 
	body,
	nav .modal {
		line-height: 1.5;
		font-family: "OfficinaSansStd", "Roboto", sans-serif;
		letter-spacing: 0.02rem;
		font-weight: normal;
		color: rgba(0,0,0,0.87);
	}
	/*	body.roboto {
		font-family: "Roboto", sans-serif;
		letter-spacing: 0rem;
	}*/
	a {
		color: var(--cyan_darken_3);
	}
	a:hover {
		text-decoration: underline;
	}
	nav a:hover, 
	a.btn {
		text-decoration: none;
	}
	i {
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	p::selection, 
	div::selection, 
	span::selection, 
	input:focus::selection {
		/* didn't find a way to turn the selection highlight to light grey if the window doesn't have the focus any more :-( */ 
		background-color: var(--text_select);
	}
	button.btn i.material-icons, 
	a.btn i.material-icons {
		margin-top:	-0.2em;
		vertical-align: middle;
		margin-right: -0.4em;
	}
	nav .nav-wrapper {
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.material-tooltip {
		/*white-space: nowrap;*/
	}
	.tooltipped:hover {
	    border-bottom: 2px dotted hsla(195, 99%, 39%, 0.35); /* works only on bright backgrounds: 2px dotted lightblue; */
	}
	.caption {
	 font-size: 1.4rem;
	}
	[data-target] {
		cursor: pointer;
	}
	.template {
		display: none !important;
	}
	/* smaller buttons on mobile screens */
		@media only screen and (max-width: 992px) {
			.btn, .btn-large, .btn-flat {
				padding: 0 1.25rem;
			}
		}
		@media only screen and (max-width: 600px) {
			.btn, .btn-large, .btn-flat {
				padding: 0 0.75rem;
			}
		}
	/* establish additional mobile layout helpers large windows >1600px*/
		/* helpers for xl size */ 
		@media only screen and (min-width: 1201px) {
			.show-on-xlarge {
				display: block !important;
			}
			.hide-on-xlarge {
				display: none !important;
			}
		}		

		@media only screen and (max-width: 1200px) {
			.hide-on-large-and-down {
				display: none !important;
			}
			.show-on-large-and-down {
				display: block !important;
			}
		}
		@media only screen and (min-width: 1601px) {
			.row .col.xl6 {
			width: 50%;
			margin-left: auto;
			left: auto;
			right: auto;
			}
			.row .col.push-xl3 {
			    left: 25%;
			}
		}
		/* new layout breakpoint for very large windows >1600px*/
		/* only  realized for the used sizes */ 
		@media only screen and (min-width: 1601px) {
			.row .col.xxl8 {
				width: 66.6666666667%;
				margin-left: auto;
				left: auto;
				right: auto;
			}
		}
		@media only screen and (min-width: 1601px) {
			.row .col.push-xxl2 {
				left: 16.6666666667%;
			}
		}

	/* nowrap Tables */
		table.nowrap td, table.nowrap th {
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		} 

	/* Tables with resolution sensitive columns */
		/* the breakpoints are the same as materializeCSS (see http://materializecss.com/grid.html#grid-responsive)
		/* s <=600px / m >600px / l >992px / xl >1200px  */
		table th.vcol.s, table td.vcol.s {
			display: table-cell;
		}
		table th.vcol.m, table td.vcol.m,
		table th.vcol.l, table td.vcol.l,
		table th.vcol.xl, table td.vcol.xl {
			display: none;
		}
		table.highlight>tbody>tr:hover {
			background-color: rgba(0, 114, 140, 0.07); /* 7% of cyan darken-4 */
			cursor: pointer;
		}
		@media only screen and (min-width: 601px) {
			table th.col.s, table td.col.s {
				display: none;
			}
			table th.vcol.m, table td.vcol.m {
				display: table-cell;
			}
		}
		@media only screen and (min-width: 993px) {
			table th.vcol.m, table td.vcol.m  {
				display: none;
			}
			table th.vcol.l, table td.vcol.l {
				display: table-cell;
			}
		}
		@media only screen and (min-width: 1201px) {
			table th.vcol.l, table td.vcol.l {
				display: none;
			}
			table th.vcol.xl, table td.vcol.xl {
				display: table-cell;
			}
		}
		table.responsive-table {
			white-space: nowrap;
			overflow: scroll;
		}
		@media only screen and (max-width: 992px) {
			table.responsive-table tbody {
				display: inline-block;
			}
		}
    /* generic table enhancements */
		th.filter-dropdown span,
		th.sortable span {
			float: left;
			margin-right: -1.9rem;
		}
		th.filter-dropdown i.filter_list, 
		th.sortable i.sort, 
		th.sorted-up i.sort, 
		th.sorted-down i.sort {
			font-size: 20px;
			vertical-align: middle;
			padding: 2px;
			margin-left: 2.2rem;
			margin-right: -2rem;
			margin-top: -0.6rem;
			margin-bottom: -0.3rem;
			border-radius: 2px;
			color: transparent;
		}
		th.filter-dropdown i.filter_list {
			margin-right: -0.9em;
		}
		th.filter-dropdown:hover i.filter_list:after,
		th.filter-dropdown.filtered i.filter_list:after {
			content: '\25BC';
			color: transparent;
			/* width: 0; */
			position: absolute;
			margin-left: 3px;
			font-size: 40%;
			margin-top: 5px;
			vertical-align: text-top;
		}
		th.filter-dropdown i.filter_list:after,
		th.filter-dropdown.filtered i.filter_list:after {
			color: var(--teal);
			color: transparent;
		}
		th.filter-dropdown:hover i.filter_list:hover:after, 
		th.filter-dropdown.filtered i.filter_list:hover:after {
			color: #81c784; /*var(--green_lighten_2)*/
		}

		th.sorted-up, 
		th.sorted-down, 
		th.filtered {
			/*background-color: rgba(0, 114, 140, 0.07); /* 7% of cyan darken-4 */
		}
		th.sortable i.sort {
			transform: scaleY(-1);
		}
		th.sorted-down i.sort,
		th.sortable.sort-default-down i.sort {
			transform: scaleY(1);
		}
		th.filter-dropdown:hover i.filter_list, 
		th.sortable:hover i.sort {
			color: black;
			cursor: pointer;
		}
		th.filter-dropdown.filtered:hover i.filter_list, 
		th.sortable.sorted-down:hover i.sort,
		th.sortable.sorted-up:hover i.sort,
		th.sortable.sort-default-down:hover i.sort {
			color: var(--teal);
		}
		th.filtered i.filter_list, 
		th.sorted-up i.sort,
		th.sorted-down i.sort {
			color: var(--teal);
		}
		th.filter-dropdown:hover i.filter_list:hover, 
		th.sortable:hover i.sort:hover {
			color: white;
			background: #81c784 /*var(--green_lighten_2)*/;
		}
		th.filter-dropdown i.filter_list:hover, 
		th.sortable i.sort:hover  {
			box-shadow: 0 2px 4px 0 rgba(33,34,70,0.1), 0 1px 5px 0 rgba(33,34,70,0.1), 0 3px 1px -2px rgba(33,34,70,0.1);
			opacity: 0.85;
		}
		/* thead th.sortable span::after {
			content: "sort";
			font-family: 'Material Icons';
			font-weight: normal;
			font-style: normal;
			font-size: 20px;
			line-height: 0;
			width: 1.8rem;
			height: 1.8rem;
			border-radius: 2px;
			padding: 0.2rem;
			padding-top: 0.9rem;
			color: transparent;
			vertical-align: -webkit-baseline-middle;
			margin-top: -1.4rem;
			margin-bottom: -0.8rem;
			margin-left: 0.2rem;
			letter-spacing: normal;
			text-transform: none;
			display: inline-block;
			white-space: nowrap;
			word-wrap: normal;
			direction: ltr;
			-webkit-font-feature-settings: 'liga';
			-webkit-font-smoothing: antialiased;
		}
		thead th.sortable:hover span::after {
			color: black;
		}
		thead th.sortable span:hover::after {
			color: black;
			background: var(--green_lighten_2);
		}
		th.filter-dropdown i.filter_list:hover:after {
			color: #81c784;
		}

		th.sortable.sorted-down span::after {
			color: white;
			background: var(--green_lighten_2);
		}
	/* tooltips */ 
	@media only screen and (min-width: 993px) {
		#toast-container {
			max-width: 25%;
		}
	}
	.toast {
		/* courtesy of https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/ */

		/* ensure word-break in all browsers*/ 
		-ms-word-break: break-all;
		word-break: break-all;
		word-break: break-word;

		/* just in case: the rules for auto-hyphenation */ 
		/*overflow-wrap: break-word;*/
		/*word-wrap: break-word;*/
		/*-webkit-hyphens: auto;*/
		/*-ms-hyphens: auto;*/
		/*-moz-hyphens: auto;*/
		/* hyphens: auto; */
	}
	/* badge */

	/* input */
	.deduplicate td.source:hover:after, 
	.deduplicate td.target:hover:after {
		content: "more_vert";
		font-family: 'Material Icons';
		font-weight: normal;
		font-style: normal;
		font-size: 20px;
		line-height: 0;
		width: 1.8rem;
		height: 1.8rem;
		border-radius: 2px;
		padding: 0.2rem;
		padding-top: 0.9rem;
		color: var(--teal);
		vertical-align: -moz-middle-with-baseline;
		vertical-align: -webkit-baseline-middle;
		margin-top: -1.4rem;
		margin-bottom: -0.8rem;
		margin-left: 0;
		letter-spacing: normal;
		text-transform: none;
		display: inline-block;
		white-space: nowrap;
		word-wrap: normal;
		direction: ltr;
		-webkit-font-feature-settings: 'liga';
		-webkit-font-smoothing: antialiased;
	}
	span.badge {
		position: absolute;
		/* width: 1rem; */
		min-width: 1.25rem;
		height: 1.3rem;
		background-color: #ff89d5;
		background-color: white;
		line-height: 1.5rem;
		font-size: 0.85rem;
		letter-spacing: -0.03em;
		color: white;
		color: var(--purple_lighten_2);
		border-radius: 1rem;
		font-weight: normal;
		padding: 0;
		padding-left: 0.00rem;  /* V010: 0.07rem; */
		padding-right: 0.04rem;  /* V010: 0.00rem */
		margin: 0;
		/* display: none; */
		margin-left: -1.3em;
		margin-top: 0.7em;
	}
	span.badge:empty {
		display: none;
	}
	.modal {
		padding: 0.5em 2em 2em 3em;
		max-width: 31%;
		min-width: 25em;
	}
	.modal .modal-content {
		padding: 1em;
	}
	.modal .modal-footer {
		padding: 0;
		/*margin-bottom: 1.5em;*/
	}
	.modal .modal-footer button {
		min-width: 8em;
	}
	.modal .modal-footer button.left {
		margin-right: 10%;
	}
	.modal._nui_tabbed button:focus {
		outline-color: #1d7d74;
	    outline-style: auto;
	}
	#invoicePrintModal {
		text-align: center;
	}
	#invoicePrintModal .modal-footer {
		margin-left: -1em;
		margin-right: -1em;
		margin-top: 1em;
		display: inline-flex;
		white-space: nowrap;
	}
	#invoicePrintModal .modal-footer .btn {
		margin: 0em 5%;
	}
/* 2.1.4 log screens */
	h6 { 
		font-weight:600; 
		margin-bottom: 1rem;
		/*border-bottom: 1px solid lightgrey;*/
		padding-bottom: 1.3rem;
	}
	#logs .spinner a {
		white-space: nowrap;
		font-weight: normal;
		color: var(--cyan_darken_4);
		visibility: hidden;
	}

	/*#logs .biglabels { margin-bottom: 1rem; }*/
	/*#logs .biglabels [type="checkbox"]+label { display: block; color: initial; font-size: 1rem; }*/

	@media only screen and (min-width: 993px) {
		div.material-tooltip {
			max-width: 25%;
			text-align: left;
			padding-left: 1rem;
		}
	}
	iframe {
		width: 100%;
		border: 0px;
		margin: 0 -0.5em; 
	}
	.log {
		border-bottom: 1px solid #d0d0d0;
	}
	pre {
		font-family: "Letter Gothic Std", "Andale Mono", Consolas, monospace, monospace;
		font-size: 0.7rem;
		font-weight: bold;
	}
	button.btn,
	a.btn {
		font-weight: normal;
		line-height: 2.7em;
	}
	h6 {
		white-space: nowrap;
		padding: 0; 
	}
	h6.pinned {
		background-color: var(--cyan_lighten_5);
		width: 83.3333%;
		margin-left: -0.75em;
		border-left: 0.75em solid transparent;
		border-right: 0.75em solid var(--cyan_lighten_5);
		padding-top: 10px;
		padding-bottom: 10px;
		border-bottom: 1px solid #d0d0d0;
		box-shadow: 0px 4px 4px -4px #d0d0d0;
	}
	.log .infile-nav-container {
		display: inline-block;
	}
	.log .infile-nav-container .nofile  {
		display: none;
		position: absolute;
		vertical-align: bottom;
		line-height: 2.9em;
		font-weight: normal;
	}
	.log .infile-nav-container.loading .spinner {
		visibility: visible;
	}
	.log .infile-nav-container.nofile .nofile {
		display: inline-block;
	}
	.log .infile-nav-container.loading a.btn, 
	.log .infile-nav-container.nofile a.btn {
		visibility: hidden;
		min-width: 5.5em;
	}
	.log .infile-nav-container.loading ~ a.btn.reload {
		visibility: hidden;
	}
/* 2.1.5 sticky toasts */
	.toast.info.sticky {
		color: black;
		/*padding-left: 1.8rem;*/
		/*padding-right: 0.8rem;*/
		background-color: var(--amber_lighten_5);
		margin-top: 0em;
		opacity: 1;
	}
	.toast.info.sticky:focus, 
	.toast.info.sticky:hover {
		background-color: var(--amber_lighten_2);
		/*padding-left: 0.8rem;*/
		/*padding-right: 1.8rem;*/
		cursor: pointer;
	}
	.toast.info.sticky:focus span::after, 
	.toast.info.sticky:hover span::after {
		visibility: visible;
		cursor: pointer;
	}
	.toast.info.sticky.fadeout {
		margin-top: -3em;
		opacity: 0 !important;
		transition: margin-top 0.3s ease-in, opacity 0.3s ease-in;	
	}

/* 2.2.2 enrollment screen */
/* styling for enrollment list */
	#enrollmentlist .action .btn {
		margin-top: -1rem;
		margin-bottom: -0.7rem;
	}
	#enrollmentlist th,
	#enrollmentlist td {
		overflow: hidden;
		text-overflow: ellipsis;
	}  
	#enrollmentlist .template {
		display: none !important;
	}
	#enrollmentlist i.show-details {
		/* content: ""; */
		/* margin-top: 0.2rem; */
		/* position: absolute; */
		height: 20px;
		width: 16px;
		margin-top: 0px;
		margin-bottom: -1px;
		/* position: absolute; */
		line-height: 8px;
		cursor: pointer;
		color: transparent;
		background-image: url(../img/unfold-list-black.svg);
		background-size: 20px;
		background-position-y: -20px;
	}
	#enrollmentlist tbody.show-details i.show-details {
		background-position-y: 0px
	}
	@media only screen and (max-width: 992px) {
		#enrollmentlist table.responsive-table td {
			max-width: 12em;
		}
	}
	#enrollmentlist tr.detail > td {
		/*display: none;*/
		padding: 0px 5px;
	}
	#enrollmentlist tr > td div.blind {
		height:	0px;  /* the required height will be set with javascript on click */ 
		transition: height 0.1s ease-out;
	}
	#enrollmentlist tr.detail > td div.blind {
		/*height: 100%;*/
		max-width: 1070px; /* V012 temporary fix for a weird oversize bug */
	}

	#enrollmentlist tbody.list {
		border-top: 1px solid transparent;
		border-bottom: 1px solid transparent;
	}
	#enrollmentlist tbody.list.show-details {
		border-top: 1px solid #d0d0d0;
		border-bottom: 1px solid #d0d0d0;
		background-color: white;
	}
	#enrollmentlist tbody.list.show-details tr.title {
		border-top: 1px solid #d0d0d0; /* V012 just a wokaround since the tbody border-top doesn't appear as expected */ 		
	}
	#enrollmentlist tbody.show-details tr.detail > td {
		display: table-cell;
	}
	#enrollmentlist table.highlight > tbody > tr.detail:hover, 
	#enrollmentlist table.highlight > tbody > tr.detail:hover tr {
		background-color: transparent;
	}

	/* state icons */
	#enrollmentlist tbody .action:before {
		content: "done";
		font-family: 'Material Icons';
		font-weight: normal;
		font-style: normal;
		font-size: 20px;
		line-height: 0;
		width: 1.8rem;
		height: 1.8rem;
		border-radius: 2px;
		padding: 0.2rem;
		padding-top: 0.9rem;
		color: var(--teal);
		vertical-align: -moz-middle-with-baseline;
		vertical-align: -webkit-baseline-middle;
		margin-top: -1.4rem;
		margin-bottom: -0.8rem;
		margin-left: 0;
		letter-spacing: normal;
		text-transform: none;
		display: inline-block;
		white-space: nowrap;
		word-wrap: normal;
		direction: ltr;
		-webkit-font-feature-settings: 'liga';
		-webkit-font-smoothing: antialiased;
	}
	#enrollmentlist tbody.state_01 tr .action:before { content: "fiber_new"; color: #00bfa5; font-size: 26px; margin-left: -3px; margin-right: 3px; }
	#enrollmentlist tbody.state_02 tr .action:before { content: "delete_forever"; color: var(--red); }
	#enrollmentlist tbody.state_04 tr .action:before { content: "done"; }
	#enrollmentlist tbody.state_06 tr .action:before { content: "done_all"; }
	#enrollmentlist tbody.state_07 tr .action:before { content: "clear"; color: var(--red);}
	#enrollmentlist tbody.state_08 tr .action:before { content: "error"; color: var(--red);}
	#enrollmentlist tbody.state_09 tr .action:before { content: "error_outline"; color: var(--red);}

	/* hide non requested rows, but show the ones specified by the filter */
	#enrollments #enrollmentlist > table > tbody > tr { display: none; } /* hide all states */
	#enrollments #enrollmentlist > table > tbody.state_08 > tr { display: table-row; } /* show errors until the're suppressed manually -> state 09 */
	#enrollments.state_all #enrollmentlist > table > tbody > tr { display: table-row; } /* show all */ 
	#enrollments.state_pending #enrollmentlist > table > tbody.state_01 > tr, 
	#enrollments.state_pending #enrollmentlist > table > tbody.state_04 > tr, 
	#enrollments.state_pending #enrollmentlist > table > tbody.state_02.age_1 > tr, 
	#enrollments.state_pending #enrollmentlist > table > tbody.state_06.age_1 > tr, 
	#enrollments.state_pending #enrollmentlist > table > tbody.state_07.age_1 > tr { 
		display: table-row; 
	}  
	#enrollments.state_01 #enrollmentlist > table > tbody.state_01 > tr { display: table-row; }  
	#enrollments.state_02 #enrollmentlist > table > tbody.state_02 > tr { display: table-row; }  
	#enrollments.state_04 #enrollmentlist > table > tbody.state_04 > tr { display: table-row; }  
	#enrollments.state_06 #enrollmentlist > table > tbody.state_06 > tr { display: table-row; }  
	#enrollments.state_07 #enrollmentlist > table > tbody.state_07 > tr { display: table-row; }  
	#enrollments.state_08 #enrollmentlist > table > tbody.state_08 > tr { display: table-row; }  
	#enrollments.state_09 #enrollmentlist > table > tbody.state_09 > tr { display: table-row; }  

	@media only screen and (max-width: 992px) {
		#enrollments #enrollmentlist > table > tbody.state_08 > tr { display: inline-block; } /* show errors until the're suppressed manually -> state 09 */
		#enrollments.state_all #enrollmentlist > table > tbody > tr { display: inline-block; } /* show all */ 
		#enrollments.state_pending #enrollmentlist > table > tbody.state_01 > tr, 
		#enrollments.state_pending #enrollmentlist > table > tbody.state_04 > tr, 
		#enrollments.state_pending #enrollmentlist > table > tbody.state_02.age_1 > tr, 
		#enrollments.state_pending #enrollmentlist > table > tbody.state_06.age_1 > tr, 
		#enrollments.state_pending #enrollmentlist > table > tbody.state_07.age_1 > tr { 
			display: inline-block; 
		}  
		#enrollments.state_01 #enrollmentlist > table > tbody.state_01 > tr { display: inline-block; }  
		#enrollments.state_02 #enrollmentlist > table > tbody.state_02 > tr { display: inline-block; }  
		#enrollments.state_04 #enrollmentlist > table > tbody.state_04 > tr { display: inline-block; }  
		#enrollments.state_06 #enrollmentlist > table > tbody.state_06 > tr { display: inline-block; }  
		#enrollments.state_07 #enrollmentlist > table > tbody.state_07 > tr { display: inline-block; }  
		#enrollments.state_08 #enrollmentlist > table > tbody.state_08 > tr { display: inline-block; }  
		#enrollments.state_09 #enrollmentlist > table > tbody.state_09 > tr { display: inline-block; }  
	}

	/* definitions below will be overwritten dynamically, according to data in Config */

	#enrollmentlist .state_02 .action > span::before { content: "Deleted "; }
	#enrollmentlist .state_04 .action > span::before { content: "Enrolled "; }
	#enrollmentlist .state_06 .action > span::before { content: "Exported "; }
	#enrollmentlist .state_07 .action > span::before { content: "Rejected "; }
	#enrollmentlist .state_08 .action > span::before { content: "Error "; }
	#enrollmentlist .state_09 .action > span::before { content: "Error suppressed "; }

	#enrollmentlist .state_02 .action span[lang=de]::before { content: "Gelöscht "; }
	#enrollmentlist .state_04 .action span[lang=de]::before { content: "Gebucht "; }
	#enrollmentlist .state_06 .action span[lang=de]::before { content: "OP Übertragen "; }
	#enrollmentlist .state_07 .action span[lang=de]::before { content: "Abgelehnt "; }
	#enrollmentlist .state_08 .action span[lang=de]::before { content: "Fehler "; }
	#enrollmentlist .state_09 .action span[lang=de]::before { content: "Fehler unterdrückt "; }

	#enrollmentlist .state_02 .action span[lang=fr]::before { content: "Supprimé le "; }
	#enrollmentlist .state_04 .action span[lang=fr]::before { content: "Réservé le "; }
	#enrollmentlist .state_06 .action span[lang=fr]::before { content: "Comptabilisé le "; }
	#enrollmentlist .state_07 .action span[lang=fr]::before { content: "Refusé le "; }
	#enrollmentlist .state_08 .action span[lang=fr]::before { content: "Erreur le "; }
	#enrollmentlist .state_09 .action span[lang=fr]::before { content: "Erreur supprimé le "; }

	@media only screen and (min-width: 993px) {
		#enrollmentlist th.education span::before {
			content: "School: ";
		}
		[lang=de] #enrollmentlist th.education span::before {
			content: "Schule: ";
		}
		[lang=fr] #enrollmentlist th.education span::before {
			content: "École: ";
		}
	}

	/* definitions below will be overwritten dynamically, according to data in Config */
	#enrollmentlist .school_M td.education span::before { content: "M: "; }
	#enrollmentlist .school_K td.education span::before { content: "K: "; }
	#enrollmentlist .school_P td.education span::before { content: "P: "; }
	#enrollmentlist .school_WM td.education span::before { content: "WM: "; }
	#enrollmentlist .school_WP td.education span::before { content: "WP: "; }

	/* detail page switch */ 
	#enrollmentlist, .enrollmentdetail {
		opacity: 1;
		margin-left: 0%;
		margin-right: 0%;
	}
	#enrollments.listview .enrollmentdetail {
		opacity: 0;
		margin-left: +100%;
		margin-right: -130%;
		position: absolute;
		width: 100%;
		z-index: 10;
		transition: margin 0.8s, opacity 0.2s ;
	}
	#enrollments.detailview #enrollmentlist {
		opacity: 0;
		margin-left: -100%;
		margin-right: 130%;
		position: absolute;
		width: 100%;
		z-index: 10;
		transition: margin 0.8s, opacity 0.2s ;
		background-color: rgba(249, 251, 255, 1);
		padding-bottom: 2em;
		margin-bottom: 0;
	}
	#enrollments.listview #enrollmentlist {
		opacity: 1;
		margin-left: 0%;
		margin-right: 0%;
		position: absolute;
		width: 100%;
		z-index: 0;
		transition: margin 0s, opacity 0s; /* remove transition upon list restore */
	}
	#enrollmentlist .action span .state_01, 
	#enrollmentlist .action span .state_02, 
	#enrollmentlist .action span .state_04, 
	#enrollmentlist .action span .state_06, 
	#enrollmentlist .action span .state_07, 
	#enrollmentlist .action span .state_08,
	#enrollmentlist .action span .state_09 { /* make shure only the required states will be displayed */
		display: none;
	}  
	#enrollmentlist tr.state_01 .action span .state_01 { display: inline-block; } 
	#enrollmentlist tr.state_02 .action span .state_02 { display: inline-block; } 
	#enrollmentlist tr.state_04 .action span .state_04 { display: inline-block; } 
	#enrollmentlist tr.state_06 .action span .state_06 { display: inline-block; } 
	#enrollmentlist tr.state_07 .action span .state_07 { display: inline-block; } 
	#enrollmentlist tr.state_08 .action span .state_08 { display: inline-block; } 
	#enrollmentlist tr.state_09 .action span .state_09 { display: inline-block; } 

	#enrollmentlist tr td.details * { /* hide details unfold icon */
		visibility: hidden;
	}
	#enrollmentlist tr:hover td.details * {
		visibility: visible;
	}
	#enrollmentlist  > table {
		transition: margin-top 0.3s;
	}
	#enrollmentlist.scrolled  > table {
		margin-top: 46px
	}
	#enrollmentlist thead.headcopy {
		position: fixed;
		top: 36px;
		padding-top: 6px;
		background-color: var(--cyan_lighten_5);
		box-shadow: 0px 4px 4px -4px #d0d0d0;
		z-index: 2;
		visibility: hidden;
	}
	#enrollmentlist.scrolled thead.headcopy {
		visibility: visible;
	}
	/* detail page  */
	table.highlight>tbody>tr.detail:hover {
		cursor: default;
	}
	tbody.show-details .detail.loading .deduplicate [data-targetsystem]:after {
		content: " ";
		height: 1.7rem;
		width: 1.7rem;
		margin-top: -0.3rem;
		margin-left: 0.5rem;
		vertical-align: middle;
		position: absolute;
		background-image: url('../img/spin.svg');
		background-size: 1.7rem;
		background-repeat: no-repeat;
	}
	.deduplicate td.label {
		padding-left: 2em;
	}
	.deduplicate thead {
		border-bottom: none;
		margin-bottom: 1rem;
	}
	.deduplicate td,
	.deduplicate th {
		padding: 5px 5px;
	}
	#enrollmentlist .deduplicate td {
		overflow: visible; /* required for buttons to appear */
	}

	table.deduplicate {
		margin-left: -0.3rem;
	}
	.deduplicate td {
		padding-right: 2rem;
	}
	.deduplicate td.section {
		color: #bbb;
	}
	.deduplicate input:not([type]), 
	.deduplicate input[type=text], 
	.deduplicate input[type=password], 
	.deduplicate input[type=email], 
	.deduplicate input[type=url], 
	.deduplicate input[type=time], 
	.deduplicate input[type=date], 
	.deduplicate input[type=datetime], 
	.deduplicate input[type=datetime-local], 
	.deduplicate input[type=tel], 
	.deduplicate input[type=number], 
	.deduplicate input[type=search], 
	.deduplicate textarea.materialize-textarea {
		border-bottom: 1px solid #c0c0c0;
		height: 1.1rem;
	}
	.deduplicate td.customerTarget input {
		color: var(--pink_accent_3);
	}
	.deduplicate td.customerTarget.idem input {
		color: var(--teal_accent_3);
	}
	.deduplicate td.customerTarget.additional input {
		color: var(--text);
	}
	.deduplicate tbody tr.empty {
		display: none;
	}
	.deduplicate input {
		margin-bottom: 0;
		text-overflow: ellipsis;
	}
	.deduplicate .customerTarget.new {
		display: none;
	}
	.deduplicate td a.btn {
		width: 100%;
	}
	.deduplicate a.btn.source-copy {
		background-image: url(../img/copy-36-white.svg);
		background-repeat: no-repeat;
		background-size: 1.8em;
		background-position-x: 97%;
		background-position-y: 0.3rem;
		float: left;
		margin-top: -0.5em;
		margin-right: -100%;
		/*overflow: visible;*/
		visibility: hidden;
		margin-bottom: -0.5em;
		text-transform: initial;
	}
	.deduplicate.state_01 td:hover a.btn {
		visibility: visible;
	}
	/* buttons in dedupe step_00 */
	.deduplicate .doublet-select a.btn {
		visibility: visible;
	}
	[lang=en] a.btn.new-select:before { content: "New Person"; }
	[lang=de] a.btn.new-select:before { content: "Neue Person"; margin-left: -0.7em; margin-right: -0.7em; }
	[lang=fr] a.btn.new-select:before { content: "Nouvelle Personne"; content: "Nouvelle Personne"; margin-left: -1.3em; margin-right: -1.3em;}

	[lang=en] a.btn.doublet-select:before { content: "Choose"; }
	[lang=de] a.btn.doublet-select:before { content: "Wählen"; }
	[lang=fr] a.btn.doublet-select:before { content: "Choisir"; }

	[lang="en"] .deduplicate a.btn.source-copy:before { text-transform: uppercase; margin-left:-0.4em; content: "copy"; }
	[lang="de"] .deduplicate a.btn.source-copy:before { text-transform: uppercase; margin-left:-0.4em; content: "kopieren"; }
	[lang="fr"] .deduplicate a.btn.source-copy:before { text-transform: uppercase; margin-left:-0.5em; content: "copier"; }
	/* 
	[lang="en"] .deduplicate a.btn.source-copy:before { text-transform: uppercase; content: "copy «"; }
	[lang="en"] .deduplicate a.btn.source-copy:after  { text-transform: uppercase; content: "»"; }
	[lang="de"] .deduplicate a.btn.source-copy:before { text-transform: uppercase; content: "«"; }
	[lang="de"] .deduplicate a.btn.source-copy:after  { text-transform: uppercase; content: "» kopieren"; }
	[lang="fr"] .deduplicate a.btn.source-copy:before { text-transform: uppercase; content: "copier «"; }
	[lang="fr"] .deduplicate a.btn.source-copy:after  { text-transform: uppercase; content: "»"; }
	*/
/* enrollment detail */
	.show-details tr.title td {
		padding-bottom: 5px;
	}
/*   process */
	.process {
	    padding: 10px 0px;
	}
	.process .step {
		display: inline-block;
		line-height: 1em; /* add 0.15 padding-top and 2x 0.2em to receive a bar height of 1.8em = 2x 0.9em border */
		background-color: var(--grey_lighten_3);
		color: var(--text);
		border: 0.3em solid transparent;
		padding-left: 0.2em;
		padding-top: 0.15em;
		margin-right: 0.4em;
	}
	.process .step.dedup.notFound {
		opacity: 0.2;
	}
/*  detail */
	.data_group > i.material-icons[data-folder-for] {
		display: none;
	}
	.state_01.show-details .refine .data_group > i.material-icons[data-folder-for] {
		/* display: inline-block; */
		margin-top: -6px;
		margin-left: -1.3em;
		/*background-color: var(--grey_lighten_2);*/
		position: absolute;
		opacity: .5;
		color: var(--text);
		/* background-color: var(--grey_lighten_3); */
		padding: 0.25em;
		border-radius: 2px;
		transition: box-shadow 0.3s linear;
		box-shadow: none;
	}
	.state_01.show-details .refine .data_group:hover > i.material-icons[data-folder-for] {
		opacity: 1;
		/* background-color: var(--grey_lighten_3); */
		transition: box-shadow 12s 0s ease-out;
		box-shadow: 0 1px 1px 0 rgba(33,34,70,0.2), 0 1px 5px 0 rgba(33,34,70,0.0), 0 3px 1px -2px rgba(33,34,70,0.0);
		cursor: pointer;
	}
	.state_01.show-details .refine .data_group > i.material-icons.less[data-folder-for] {
		background-color: var(--teal_lighten_1);
		opacity: 1;
		color: white;
		transition: box-shadow 3s 3s linear;
	}
	.state_01.show-details .refine .data_group > i.material-icons[data-folder-for]:hover {
		background-color: var(--teal_lighten_2);
		opacity: 1;
		color: white;
		box-shadow: 0 2px 2px 0 rgba(33,34,70,0.14), 0 1px 5px 0 rgba(33,34,70,0.12), 0 3px 1px -2px rgba(33,34,70,0.2);
		transition: box-shadow 0.1s 0s linear;
	}
	i.material-icons.disabled {
		background-color: white !important;
		color: var(--grey_lighten_2) !important;
		box-shadow: none !important;
		opacity: 0.7 !important;
		cursor: default !important;
	}
	.state_01.show-details .person_minified         .refine .data_group i.material-icons.more[data-folder-for="person_minified"],
	.state_01.show-details .address_minified        .refine .data_group i.material-icons.more[data-folder-for="address_minified"],
	.state_01.show-details .contact_minified        .refine .data_group i.material-icons.more[data-folder-for="contact_minified"],
	.state_01.show-details .notes_minified          .refine .data_group i.material-icons.more[data-folder-for="notes_minified"],
	.state_01.show-details .detail                  .refine .data_group i.material-icons.less[data-folder-for] {
		display: inline-block;
	}
	.state_01.show-details .detail.person_minified  .refine .data_group i.material-icons.less[data-folder-for="person_minified"], 
	.state_01.show-details .detail.address_minified .refine .data_group i.material-icons.less[data-folder-for="address_minified"],
	.state_01.show-details .detail.contact_minified .refine .data_group i.material-icons.less[data-folder-for="contact_minified"],
	.state_01.show-details .detail.notes_minified   .refine .data_group i.material-icons.less[data-folder-for="notes_minified"]     {
		display: none;
	}
/*	.state_01.show-details .legend .data_group:hover::before {
		content: "\25BA ";
		color: var(--teal);
		position: absolute;
		margin-top: 0.35em;
		width: 1.2em;
		text-align: center;
		line-height: 1.4em;
		padding-bottom: 0.15em;
		border-radius: 3px;
	}
	.state_01.show-details .legend .data_group::before:hover {
		content: "\25BC ";
		color: green;
	}
	.state_01.show-details .person_minified  .legend .data_group.person_data:hover::before,
	.state_01.show-details .address_minified .legend .data_group.address_data:hover::before { 
		content:'>'; 
		content: "\25BA ";
	}
	.data_group.person_data::hover:before,
	.data_group.address_data::hover:before { 
		background-color: var(--teal);
		color: white;
	}*/

/*   dedupe */
	.detail .state_01.dedup .step.dedup,
	.detail .state_01.refine .step.refine,
	.detail .state_01.send .step.send,
	.process .step.active {
		background-color: var(--green_accent_3);
	}/*
	.process .step::after {
		opacity: 0;
		transition: opacity 1s, background-color 1s, border-left 1s;
	}*/
	.show-details .process .step::after {
		/* due to position:absolute, the arrows on non-visible enrollment detail panes must be hidden */
		content: ".";
		color: transparent;
		position: absolute;
		opacity: 1;
		line-height: 0;
		display: inline-block;
		margin: -0.3em;
		margin-top: -0.45em;
		margin-left: 0.28em;
		border: 0.87em solid transparent;
		border-left: 0.6em solid var(--grey_lighten_3);
    }
	.detail .state_01.dedup  .step.dedup::after,
	.detail .state_01.refine .step.refine::after,
	.detail .state_01.send   .step.send::after,
	.show-details .process   .step.active::after {
		border-left-color: var(--green_accent_3);
	}
	#enrollmentlist .state_01 .person {
		display: inline-block;
		width: 19%;
		line-height: 2.15em;
		padding-bottom: 1em;
	}
	#enrollmentlist .state_01 .submitAction {
		display: inline-block;
		width: 24%;
		vertical-align: bottom;
		margin-bottom: 16px;
	}
	#enrollmentlist .state_01.dedup .customer.target, 
	#enrollmentlist .state_01.dedup .submitAction,
	#enrollmentlist .state_01.refine .customer.doublet {
		display: none;
	}
	.person_container {
		display: initial;
		margin-bottom: -2em; /* V014 to compensate margin-bottom of .person contained */ 
		width: 100%;
		overflow: scroll;
	}
	.person div::after {
		/* force display of empty cells */
		content: ".";
		visibility: hidden;
	}
	.person .label	{
		font-weight: bold;
	}
	.person .label.folder {
		visibility: hidden; /* provisorisch, bis mehrere Adressen zu einer Person oder mehrere Personen zu einer Anmeldung ein- und ausgeblendet werden können */
	}
	.data_group.person_data + div.label { /* provisorisch, bis mehrere Adressen zu einer Person oder mehrere Personen... */
	    height: 0em;
	    margin-top: -0.5em;
	}
	.person .label.folder:before {
		content: "\25B8";
		position: absolute;
		margin-left: -0.8em;
		transform: rotate(90deg);
		transform-origin: 45% 45%;
		transition: transform .5s;
		color: lightgrey;
	}
	.person .label.folder:before::hover {
		color: default;
	}

	.state_01.dedup .person.legend .data_group button.btn, 
	.state_01.refine .person.legend .data_group div.idem button.btn {
		display: none;
	}

	/*Definitions for the buttons in the person legend column of the .state_01.refine screen  */
		/* Definitions for an outdated person legend button 
		.person.legend div.btn {
			display: block;
			width: 100%;
			text-transform: initial;
			text-align: left;
			height: 36px;
			margin-left: -1em;
			margin-top: -6px;
			margin-bottom: 2px;
			padding-top: 0.15em;
		}
		.person.legend div.btn > span {
			padding-left: 0em;
		}	
		*/
	.person.legend .data_group div > span { 
		/* shift labels in the legend column 1em to the right */ 
		padding-left: 1.5em;
	}
	.customer.source .data_group > div > i.directory-lookup {
		float: right;
		margin-right: -1.2em;
		color: var(--teal);
		font-size: 1.5em;
		opacity: 0;
		transition: opacity 3s 3s;
	}
	.customer.source:hover .data_group > div > i.directory-lookup {
		opacity: 0.85;
		transition: opacity 0s;
	}
	.customer.source .data_group > div > i.directory-lookup:hover,
	.customer.source .data_group > div > i.directory-lookup:focus {
		opacity:1;
		color: var(--teal_darken_2);
		cursor:	pointer;
	}
	.person button.btn,
	.person a.btn {
		padding: 0 0.8rem;
		min-width: 10.5em;
	}
	.show-details .person .data_group button.btn {
		position: absolute;
		margin-top: -6px;
		margin-left: -1em;
		min-width: 11.4%; /* since V015; expand all buttons to th same width as the german «Festnetz Geschäft -> » */
		text-align: left;
		padding: 0em 1em;
		text-transform: initial;
	}
	.show-details .person .data_group button.btn i.material-icons {
		float: right;
		padding-left: 0.5em;
		line-height: 36px;
		margin-top: 0;
	}
	.person input {
		margin-bottom: 0;
		text-overflow: ellipsis;
		border-bottom: 1px solid var(--grey_lighten_2); 
		height: 1.1rem;
	}
	.calculatedValue input {
		color: var(--grey_lighten_1);
	}
	.calculatedValue input:active,
	.calculatedValue input:focus {
		color: var(--text);
		opacity: .5;
	}
	.calculatedValue span {
		position: absolute;
		height: 1.7em;
		color: var(--text);
		opacity: 0.15;
		opacity: 0;
		transition: opacity 3s 3s; 
		margin-left: 10.4%;
	}
	.calculatedValue:hover span {
		opacity: 0.2;
		transition: opacity 0.3s;
		border-bottom-color: transparent;
	}
	.calculatedValue span:hover {
		opacity: 1;
		transition: opacity 0s;
	}
	.state_01 .person.doublet input,
	.state_01 .person.target input {
		color: var(--pink_accent_3);
		/*font-weight: bold;*/
	}
	.state_01 .person.doublet input.idem {
		color: var(--teal_accent_3);
		/*font-weight: normal;*/
	}
	.state_01 .person.doublet input.additional, 
	.state_01 .person.target .idem input {
		color: var(--text);
		/*font-weight: normal;*/
	}
	.state_01.dedup .person div.empty_dedup {
		display: none;
	}
	.person_minified  .state_01.refine .person .person_data   div.empty_refine,
	.address_minified .state_01.refine .person .address_data  div.empty_refine,
	.contact_minified .state_01.refine .person .contacts_data div.empty_refine,
	.notes_minified   .state_01.refine .person .notes_data    div.empty_refine {
		display: none;
	}
	.state_01.refine .person div.button {
		display: none;
	}
	/* definitions for the info icon appearing beneath the buttons at the bottom of the dedup screen  */
	.button .tooltipped i.material-icons {
		color: var(--teal);
		vertical-align: middle;
		opacity: 0;
		transition: opacity 3s 3s;
	}
	.person.legend .button .tooltipped i.material-icons {
		color: var(--grey);
	}
	.button:hover .tooltipped i.material-icons {
		opacity: .7;
		transition: opacity 0.3s;
	}
	.button .tooltipped:hover {
		border-bottom: none; 
	}
	.button .tooltipped i.material-icons:hover {
		color: black;
	}

	#enrollmentlist .state_01 .person {
		padding-right: 2em;
	}
	.submitAction .button {
		margin-bottom: 2rem;
	}
	.submitAction button {
		display: flow-root	;
		width: 88%;
	}
	.submitAction .button span.tooltipped {
		float: right;
		line-height: 36px;
		margin-right: -0.5em;
	}
	button.grey.focus {
		/* just a workaround for a bug if button.focus was not selected */
		background-color: #26a69a !important;
		color: white;
	}
/*	.deduplicate th.erp-action .tip {
		font-weight: normal;
		color: var(--brown);
		white-space: normal;
		min-width: 12em;
		background-color: var(--yellow_lighten_4);
		padding: 0.5rem;
		position: absolute;
		margin-top: -3rem;
		margin-left: -2rem;
		max-width: 25%;
		visibility: hidden;
		transition: box-shadow 6s 6s, visibility 0s 5s;
		opacity: 0;
	}
	.deduplicate th.erp-action .tip1 {
		font-weight: normal;
		color: var(--brown);
		white-space: normal;
		min-width: 15em;
		min-height: 9em;
		background-color: hsla(334, 100%, 97%, 1);
		padding: 1.2rem 1.4rem;
		position: absolute;
		margin-top: -1.1rem;
		margin-left: -5rem;
		max-width: 25%;
		transform: rotate(-0.8deg);
		transition: box-shadow 6s 6s, visibility 0s 5s;
		font-family: "ITCZemkeHandW01";
		color: hsl(191, 100%, 28%);
		font-size: 1.5rem;
		line-height: 1.5em;
		zoom: 0.8;
	}*/
	/* data-component="tip"  */
		.tip {
			font-weight: normal;
			color: var(--brown);
			white-space: normal;
			min-width: 12em;
			background-color: var(--yellow_lighten_4);
			/*padding: 0.5rem;*/
			position: absolute;
			/*margin-top: -3rem;*/
			/*margin-left: -2rem;*/
			max-width: 25%;
			visibility: hidden;
			transition: box-shadow 6s 6s, visibility 0s 5s;
			opacity: 0;
		}
		.tip1 {
			min-width: 15em;
			min-height: 9em;
			max-width: 25%;
			font-family: "ITCZemkeHandW01";
			font-size: 1.5rem;
			/*color: hsl(191, 100%, 28%);*/
			color: rgb(197, 0, 56);
			line-height: 1.5em;
			background-color: hsla(334, 100%, 97%, 1); /* .tip .icon must hav ethe same background color ! */
			/*padding: 1.2rem 1.4rem;*/
			margin-top: -2rem;
			margin-left: -9rem;
			transform: rotate(-0.8deg);
			zoom: 0.8;
		}
		.tip .tip-content {
			margin: 0.8em 1.1em;
		}
		.tip-minifier {
			position: absolute;
			padding: 1.5em 1rem;
			visibility: hidden;
		}
		.tip-minifier:hover {
			visibility: visible;
			opacity: 1;
		}

		.tip-minifier:before {
			position: absolute;
			content: "x";
			min-width: 1em;
			margin-top: -1.5em;
			margin-left: -0.9em;
			overflow: hidden;
			height: 1.2em;
			width: 1.3em;
			line-height: 1em;
			padding-left: 0.4em;
		}
		.tip:hover .tip-minifier:before {
			visibility: visible;
			/*opacity: 0.5;*/
		}
		.tip-minifier:hover:before {
			content: "m";
		/*	opacity: 1;
		*/}
		.tip-minifier:hover ~ .tip-content {
			display: none; /* hide standard text */
		}
		.tip a {
			color: rgb(197, 0, 56);
		}
		.tip a:link, 
		.tip a:hover {
			color: hsl(191, 100%, 28%);
			text-decoration: none;
		}

		.tip.minified:hover .tip-minifier {
			display: none;
		}

/*	.tip.minified, 
	.tip1.minified {
		min-width: 0;
		min-height: 0;
		padding: 0;
	}
*/
	.tip1.minified {
		min-width: 1em;
		width: 1em;
		min-height: 1.2em;
		height: 1em;
		overflow: hidden;
		margin-top: -1.25em;
		margin-left: -8.35em;
	}
	.tip.minified .tip-content {
		display: none ;
	}
	.tip .tip-icon {
		display: none;
		position: absolute;
		z-index: 10;
		background-color: hsla(334, 100%, 97%, 1); /* same as .tip */
		font-size: 0.8em;
		width: 1.5em;
		height: 1.5em;
		text-align: center;
	}
	.tip:hover .tip-icon:hover {
		display: block;
	}
	.tip.minified .tip-icon {
		display: block
		/*position: absolute;*/
		/*margin-top: -0.9em;*/
		/*margin-left: -0.9em;*/
		/*visibility: visible;*/
	}
	.tip1.minified:hover {
		min-width: 15em;
		min-height: 9em;
	}
	.tip.minified:hover .tip-content {
		display: inherit;
	}

	tbody.list.show-details .deduplicate.step_00 th.erp-action .tip.step_00 {
		visibility: visible;
		opacity: 1;
		box-shadow: 0 1px 1px 0 rgba(33,34,70,0.2), 0 1px 5px 0 rgba(33,34,70,0.0), 0 3px 1px -2px rgba(33,34,70,0.0); /* same as z-depth-1 */
		/*transition: box-shadow 0.5s 1.1s, visibility 0s 0s;*/
	}
	tbody.list.show-details .deduplicate.step_01 th.erp-action .tip.step_01 {
		visibility: visible;
		opacity: 1;
		box-shadow: 0 1px 1px 0 rgba(33,34,70,0.2), 0 1px 5px 0 rgba(33,34,70,0.0), 0 3px 1px -2px rgba(33,34,70,0.0); /* same as z-depth-1 */
		transition: box-shadow 0.5s 1.1s, visibility 0s 0s, opacity 0s 6s;
    }

/* 3.0 L18n */
	[lang] [lang] {
		display: none;
	} 
	[lang="en"] [lang="en"], 
	[lang="fr"] [lang="fr"], 
	[lang="de"] [lang="de"] {
		display: initial;
	} 
	/*      ->   find more settings in the .nav class  */