/* menu of mobile form */
#form_pagenavigation_menuTrigger {
	display: none;
}

/********************************************
*                                          *
* default 'bullet' navigation (Styleguide) *
*                                          *
********************************************/

#form_pagenavigation.bullet {
	margin-bottom: 1em;
	position: relative;
	overflow: hidden;
}

/* pagetitle of mobile form */
#form_pagenavigation.bullet #form_pagenavigation_currentPageTitle {
	display: none;
}

#form_pagenavigation.bullet #form_pagenavigation_list{
	/* CSS counters to number the steps */
	counter-reset: step;
	width: 100%;
	padding: 0;
	margin: 0;
}

/* PageNavigation one page entry */
#form_pagenavigation.bullet #form_pagenavigation_list li {
	list-style-type: none;
	color: white;
	font-size: 1em;
	min-width: 11%;
	float: left;
	position: relative;
	text-align:center;
	margin-left: 0;
	margin-bottom: 0.5em;
}
/* PageNavigation pagenumber bullets */
#form_pagenavigation.bullet #form_pagenavigation_list li:before {
	background-color: #676767;
	border-radius: 50%;
	color: #ffffff;
	content: counter(step, decimal);
	counter-increment: step;
	display: block;
	font-size: 1em;
	left: 50%;
	line-height: 1.5em;
	margin-left: calc(1.5em * -0.5);
	margin-top: calc(1.5em * -0.5);
	position: absolute;
	top: calc(1.5em + 1.5em / 3);
	width: 1.5em;
	z-index: 3;
}
#form_pagenavigation.bullet #form_pagenavigation_list li.pageGroup:before {
	box-shadow: 0.1em 0.08em 0.05em 0.05em #676767;
}

#form_pagenavigation.bullet #form_pagenavigation_list .pageGroupCounter{
	border: 1px solid #676767;
	border-radius: 50%;
	color: #333333;
	font-size: 0.8em;
	left: 50%;
	line-height: calc(0.8em * 1.5);
	margin-left: calc(0.8em * 0.9);
	margin-top: calc(0.8em * 0.5);
	padding: 0 calc(0.8em * 0.4);
	position: absolute;
	top: calc(2 * 1.5em - 0.5em);
	z-index: 6;
}

/* PageNavigation element Div */
#form_pagenavigation.bullet #form_pagenavigation_list li div{
	height: calc(1.5em + 2.5em);
	max-width: 100%;
	z-index: 4;
}
/* PageNavigation Button */
#form_pagenavigation.bullet #form_pagenavigation_list li div button {
	height: 100%;
	border: none;
	background-color: transparent;
	padding: 0 1.5%;
	position: relative;
	z-index: 5;
	max-width: 100%;
}
#form_pagenavigation.bullet #form_pagenavigation_list li.navigateAble div button {
	cursor: pointer;
}
/* PageNavigation element text */
#form_pagenavigation.bullet #form_pagenavigation_list li div button span{
	color: #333333;
	white-space: nowrap;
	position: relative;
	top: -1.5em;
	padding: 0 0.75em;
}
/* Safari Fix */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
    #form_pagenavigation.bullet #form_pagenavigation_list li div button span{
        top: -1.8em;
    }
}}

#form_pagenavigation.bullet #form_pagenavigation_list li.navigateAble div button span {
	border-bottom: none;
}
/* PageNavigation Text */
#form_pagenavigation.bullet #form_pagenavigation_list li.navigateAble div button:hover span {
	border-bottom: 1px solid #0e5ca1;
}
/* PageNavigation even/odd label alternation */
#form_pagenavigation.bullet #form_pagenavigation_list li.pageNrEven div button span {
	top: 2.1em;
}
#form_pagenavigation.bullet #form_pagenavigation_list li.pageNrEven .pageGroupCounter{
	margin-top: -1.55em;
}

/* PageNavigation connecting lines  */
#form_pagenavigation.bullet #form_pagenavigation_list li div:before, #form_pagenavigation.bullet #form_pagenavigation_list li div:after {
	background-color: transparent;
	top: calc(1.5em + 1.5em / 3);
	content: "";
	height: 3px;
	position: absolute;
	width: 50%;
	z-index: 1;
}
#form_pagenavigation.bullet #form_pagenavigation_list li div:before{
	left: 0;
}
#form_pagenavigation.bullet #form_pagenavigation_list li div:after {
	left: 50%;
}

/* marking previous steps */
/*  - the pagenumber bullets */
#form_pagenavigation.bullet #form_pagenavigation_list li.pageBefore:before {
	background-color: #2075CF;
	color: #ffffff;
}
/*  - the Element Div (with text) */
#form_pagenavigation.bullet #form_pagenavigation_list li.pageBefore div, #form_pagenavigation.bullet #form_pagenavigation_list li.pageBefore div span {
	color: #2075CF;
}
/* the lines before and after */
#form_pagenavigation.bullet #form_pagenavigation_list li.pageBefore div:before, #form_pagenavigation.bullet #form_pagenavigation_list li.pageBefore div:after {
	background-color: #2075CF;
}

/* marking current step */
/*  - the pagenumber bullets */
#form_pagenavigation.bullet #form_pagenavigation_list li.pageCurrent:before {
	background-color: #0e5ca1;
	color: #ffffff;
}
/*  - the Element Div (with text) */
#form_pagenavigation.bullet #form_pagenavigation_list li.pageCurrent div, #form_pagenavigation.bullet #form_pagenavigation_list li.pageCurrent div span {
	color: #0e5ca1;
	font-weight: bold;
}
/* the lines before */
#form_pagenavigation.bullet #form_pagenavigation_list li.pageCurrent div:before {
	background-color: #2075CF;
}

/* marking next steps - not visited yet */
/*  - nothing to change - default colors */

/* marking next steps - but already visited before */
/*  - the pagenumber bullets */
#form_pagenavigation.bullet #form_pagenavigation_list li.pageAfterVisited:before {
	background-color: #2075CF;
	color: #ffffff;
}
/*  - the Element Div (with text) */
#form_pagenavigation.bullet #form_pagenavigation_list li.pageAfterVisited div, #form_pagenavigation.bullet #form_pagenavigation_list li.pageAfterVisited div span {
	color: #2075CF;
}
/* the lines before and after */
#form_pagenavigation.bullet #form_pagenavigation_list li.pageAfterVisited div:before, #form_pagenavigation.bullet #form_pagenavigation_list li.nextPageWasVisited div:after {
	background-color: #2075CF;
}

/* lines not needed before the first step and after the last */
#form_pagenavigation.bullet #form_pagenavigation_list li:first-child div:before, #form_pagenavigation.bullet #form_pagenavigation_list li:last-child div:after {
	content: none;
	background: none;
}

/********************************************
 *                                          *
 * default 'arrow' navigation (Alternative) *
 *                                          *
 ********************************************/
 
/* PageNavigation area - begin */
#form_pagenavigation.arrow {
	padding-bottom: 1em;
	position: relative;
	overflow: hidden;
}

/* pagetitle of mobile form */
#form_pagenavigation.arrow #form_pagenavigation_currentPageTitle {
	display: none;
}

/* Navigation background-color */
#form_pagenavigation.arrow #form_pagenavigation_list {
	/* CSS counters to number the steps */
	counter-reset: step;
	width:100%;
	padding:0;
	margin:0;
	/* background: #eeeeee; */
	color: #333333;
}

/* a icon before the navigationbar */
#form_pagenavigation.arrow #form_pagenavigation_list:before {
	content: ' ';
	float: left;
	width: 1.2em;
	font-size: calc(1.2em * 2);
	line-height: calc(1.2em * 0.66);
	text-align: center;
}

/* PageNavigation one page entry */
#form_pagenavigation.arrow #form_pagenavigation_list li {
	background-color: #eeeeee;
	list-style-type: none;
	color: #333333;
	font-size: 1.2em;
	line-height: 2em;
	min-width: 1em;
	float: left;
	position: relative;
	text-align:center;
	margin: calc(2em / 16) 0;
}
#form_pagenavigation.arrow #form_pagenavigation_list:after {
	content: ".";
	visibility: hidden;
	display: block;
	height: 0;
	clear: both;
}
/* PageNavigation arrow separators */
#form_pagenavigation.arrow #form_pagenavigation_list li:before {
	background-color: transparent;
	border-radius: 0;
	color: transparent;
	content: '';
	counter-increment: step;
	display: block;
	font-size: calc(2em * 0.5);
	left: 0px;
	line-height: calc(2em * 0.75);
	margin: 0;
	position: absolute;
	top: calc(2em * -0.125);
	z-index: 1;
	width: 0;
	height: 0;
	border-top: calc(2em * 0.625) solid transparent;
	border-bottom: calc(2em * 0.625) solid transparent;
	border-left: calc(2em * 0.468) solid #ffffff;
}

#form_pagenavigation.arrow #form_pagenavigation_list li.pageGroup:before {
	box-shadow: none;
}

#form_pagenavigation.arrow #form_pagenavigation_list li .pageGroupCounter {
	background-color: #eeeeee;
	border: 1px dashed #ffffff;
	border-radius: 50%;
	color: #333333;
	font-size: calc(1.2em * 0.66);
	right: 0;
	line-height: 1.2em;
	margin-left: calc(1.2em * 0.66);
	margin-top: calc(1.2em * 0.66);
	padding: 0 1.2em;
	position: absolute;
	top: 50%;
	z-index: 3;
}

/* PageNavigation element Div */
#form_pagenavigation.arrow #form_pagenavigation_list li div {
	background-color: #eeeeee;
	color: #333333;
	height: 2em;
	max-width: 100%;
	z-index: 5;
}
/* PageNavigation Button */
#form_pagenavigation.arrow #form_pagenavigation_list li div button {
	height: 100%;
	border: none;
	background-color: transparent;
	padding: 0 0.33em;
	margin-left: 1.5em;
	position: relative;
	z-index: 6;
	max-width: 100%;
	overflow: visible;
	top: -0.2em;
}
#form_pagenavigation.arrow #form_pagenavigation_list li.navigateAble div button {
	cursor: pointer;
}
/* PageNavigation element text */
#form_pagenavigation.arrow #form_pagenavigation_list li div button span {
	background-color: #eeeeee;
	color: #333333;
	white-space: nowrap;
	margin: 0;
	padding: 0 0.33em;
	top: 0;
}
#form_pagenavigation.arrow #form_pagenavigation_list li div button span:before {
	content: counter(step, decimal)'. ';
}
#form_pagenavigation.arrow #form_pagenavigation_list li.navigateAble div button span {
	border-bottom: none;
}
/* PageNavigation Text */
#form_pagenavigation.arrow #form_pagenavigation_list li.navigateAble div button:hover span {
	border-bottom: 1px solid #ffffff;
}

/* arrowhead before first entry */
#form_pagenavigation.arrow #form_pagenavigation_list li:first-child div:before {
	width: 0;
	height: 0;
	border-top: 1em solid transparent;
	border-bottom: 1em solid transparent;
	border-left: 0.75em solid #eeeeee;
	top: auto;
	content: "";
	position: absolute;
	z-index: 2;
	left: 0;
}

/* default arrowhead  */
#form_pagenavigation.arrow #form_pagenavigation_list li div:after {
	content: "";
	position: absolute;
	z-index: 3;
	left: 100%;
	border-top: 1em solid transparent;
	border-bottom: 1em solid transparent;
	border-left: 0.75em solid #eeeeee;
}

/* arrowbody of previous steps */
#form_pagenavigation.arrow #form_pagenavigation_list li.pageBefore div, #form_pagenavigation.arrow #form_pagenavigation_list li.pageBefore div span {
	background-color: #2075CF;
	color: #ffffff;
}
/* arrowhead of previous steps */
#form_pagenavigation.arrow #form_pagenavigation_list li.pageBefore div:after {
	border-left-color: #2075CF;
}
/* groupCounter of previous steps */
#form_pagenavigation.arrow #form_pagenavigation_list li.pageBefore .pageGroupCounter {
	background-color: #2075CF;
	color: #ffffff;
}

/* arrowbody of current step */
#form_pagenavigation.arrow #form_pagenavigation_list li.pageCurrent div, #form_pagenavigation.arrow #form_pagenavigation_list li.pageCurrent div span {
	background-color: #0e5ca1;
	color: #ffffff;
}
/* arrowhead of current step */
#form_pagenavigation.arrow #form_pagenavigation_list li.pageCurrent div:after {
	border-left-color: #0e5ca1;
}
/* groupCounter of current steps */
#form_pagenavigation.arrow #form_pagenavigation_list li.pageCurrent .pageGroupCounter {
	background-color: #0e5ca1;
	/*color: #ffffff;*/
	color: #333333;
}

/* arrowbody of next but visited steps */
#form_pagenavigation.arrow #form_pagenavigation_list li.pageAfterVisited div, #form_pagenavigation.arrow #form_pagenavigation_list li.pageAfterVisited div span {
	background-color: #2075CF;
	color: #ffffff;
}
/* arrowhead of next but visited steps */
#form_pagenavigation.arrow #form_pagenavigation_list li.pageAfterVisited div:after {
	border-left-color: #2075CF;
}
/* groupCounter of next but visited steps */
#form_pagenavigation.arrow #form_pagenavigation_list li.pageAfterVisited .pageGroupCounter {
	background-color: #2075CF;
	color: #ffffff;
}

/* last PageNavigation arrow separators */
#form_pagenavigation.arrow #form_pagenavigation_list li:last-child:after {
	content: ' ';
	right: calc(2em * -0.47);
	position: absolute;
	top: calc(2em * -0.125);
	z-index: 1;
	border-top: calc(2em * 0.625) solid transparent;
	border-bottom: calc(2em * 0.625) solid transparent;
	border-left: calc(2em * 0.468) solid #ffffff;
}

/* #form_pagenavigation.arrow #form_pagenavigation_list li:last-child div:after { */
/* 	margin-left: -0.075em; */
/* } */
/* #form_pagenavigation.arrow #form_pagenavigation_list li:last-child button { */
/* 	padding-right: 0.25em; */
/* } */
/* PageNavigation area - end */


/* Overlay for subpages */
#form_pagenavigation.bullet #form_pagenavigation_list li .navigatorOverlay {
	height: auto;
	display: none;
}

#form_pagenavigation.bullet #form_pagenavigation_list li:hover .navigatorOverlay {
	display: block;
}


#form_pagenavigation.bullet #form_pagenavigation_list li div:focus-within ~ .navigatorOverlay {
	display: block;
}

#form_pagenavigation.bullet .navigatorOverlay {
	position: relative;
	font-size: 1.2em;
	width: 90%;
	background-color: #fff;
	padding: 0.25em;
	border: 1px solid #0e5ca1;
	border-radius: 0.25em;
	white-space: normal;
	z-index: 99;
	margin: 0 auto;
}

#form_pagenavigation.bullet .navigatorOverlay button {
	color: #0e5ca1;
	text-decoration: none;
	line-height: 1.8em;
	width: 100%;
	cursor: pointer;
}

#form_pagenavigation.bullet .navigatorOverlay button:hover {
	text-decoration: underline;
	color: #333333;	
}

#form_pagenavigation.arrow #form_pagenavigation_list li .navigatorOverlay {
	height: auto;
	display: none;
}

#form_pagenavigation.arrow #form_pagenavigation_list li:hover .navigatorOverlay {
	display: block;
}

#form_pagenavigation.arrow #form_pagenavigation_list li div:focus-within ~ .navigatorOverlay {
	display: block;
}

#form_pagenavigation.arrow #form_pagenavigation_list li.navigateAble:hover .navigatorOverlay ~ .pageGroupCounter {
	display: none;
}

#form_pagenavigation.arrow #form_pagenavigation_list li.navigateAble:focus-within .navigatorOverlay ~ .pageGroupCounter {
	display: none;
}

#form_pagenavigation.arrow .navigatorOverlay {
	position: relative;
	font-size: 1.2em;
	width: 100%;
	padding: 0.25em;
	white-space: normal;
	z-index: 99;
	margin: 0 auto;
	border-left: 3px solid #ffffff;
}

#form_pagenavigation.arrow #form_pagenavigation_list li .navigatorOverlay button {
	color: #333333;
	text-decoration: none;
	line-height: 1.8em;
	width: 100%;
	cursor: pointer;
	margin: 0;
}

#form_pagenavigation.arrow #form_pagenavigation_list li.pageCurrent .navigatorOverlay button {
	color: #ffffff;
}

#form_pagenavigation.arrow #form_pagenavigation_list li.pageBefore .navigatorOverlay button,
#form_pagenavigation.arrow #form_pagenavigation_list li.pageAfterVisited .navigatorOverlay button {
	color: #ffffff;
}

#form_pagenavigation.arrow #form_pagenavigation_list li .navigatorOverlay button:hover {
	text-decoration: underline;	
}

.navigatorOverlay::before, .navigatorOverlay::after {
	display: none;
}