@import url(fonts.css);

:root{
	--primary-color: #b70032; /* dark-red */
	--primary-color-lighter: #B700326F; 
	--secondary-color: #f2ca00; /* yellow */
	--tertiary-color: #028FC3; /* blue */
	--warning-color: #FBB900; /* orange */
	--positive-color: #00A765; /* green */
	--black: #000000;
	--black-transparent:  #00000029;
	--dark-grey-darker: #2c2e2f;
	--dark-grey: #3a3e3f;
	--header-grey: #F0F1F4;
	--middle-grey: #B1B6BA;
	--middle-grey-lighter: #c8ccd1;
	--grey-transparent: #838f9745;
	--grey: #dadee1;
	--light-grey: #f0f1f4;
	--middle-light-grey: #eaeced;
	--white: #ffffff;
	--h2-color: var(--dark-grey);
	--h3-color: var(--dark-grey);
	--prim-red: #B70032;
    --prim-fontcolor: #3A3E3F;
}

*{
	box-sizing: border-box;
	transition: all .25s ease-out,all .25s ease-out;
}

html{
	overflow-x: hidden;
}

body{
	margin: 0px;
	padding: 0px;
	color: var(--dark-grey);
	font-family: MarcWeb !important;
	font-size: 16px;
	line-height: 26px;
	color: var(--dark-grey);
	overflow-x: hidden;
	background: var(--white);
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
}
	body #divContent{
		margin-top: 116px;
		display: flex;
		flex-direction: column;
	}
		body #divContent > br{
			display: none;
		}

		/*body[data-popup-modal="true"]:before{
			z-index: 99999 !important;
		}*/

		body[data-popup-modal="true"]{
/*			position: fixed;*/
		    width: 100%;
		    overflow-y: scroll !important;
		}

a{
	text-decoration: none;
	color: inherit;
}

a:hover{
	color: var(--primary-color);
}

ul{
	margin: 0px;
	padding: 0px;
}

.no-padding {
	padding: 0 !important;
}

body #divContent{
	min-height: calc(100vh - 323px);
	margin-top: 130px;
}

.frontendOutputMessage{
    padding: 20px 30px 40px 30px;
}

/*body[data-token="my_events"] #divContent,
body[data-token="events"] #divContent{
	margin-top: 390px;
}*/

@media only screen and (min-width: 767px){
	body #divContent{
		min-height: calc(100vh - 196px)
	}
}



/** * MARGIN & PADDING ---------------------------------------------------------------------- * **/
.noMargin{
	margin: 0px !important;
}

.noPadding{
	padding: 0px !important;
}


/* ** DISPLAY ------------------------------------------------------------------------------- ** */
.showBlock{
	display: block;
}
.showFlex{
	display: flex;
}
.hide{
	display: none;
}

/* ** DISPLAY -> FLEX ** */
.flex-wrapper{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
	.flex-wrapper.row{
		flex-direction: row;
	}

	.flex-wrapper.column{
		flex-direction: column;
	}

	.flex-wrapper.twoColumns > div,
	.flex-wrapper.threeColumns > div:not(.session),
	.flex-wrapper.fourColumns > div,
	.flex-wrapper.fiveColumns > div {
		width: 100%;
		margin: 0px 0px 60px 0px;
	}
		.flex-wrapper.twoColumns > div:last-child,
		.flex-wrapper.threeColumns > div:last-child{
			padding-bottom: 0px;
		}

	.flex-wrapper.order > div{
		width: 100%;
	}
	.flex-wrapper.order > br{
		display: none;
	}


	

@media only screen and (min-width: 767px){
	.flex-wrapper{
		flex-direction: row;
	}
	.flex-wrapper.wrap{
		flex-wrap: wrap;
	}
		.flex-wrapper.twoColumns > div{
			width: calc((100% - 100px) / 2);
			margin: unset;
		}
		.flex-wrapper.threeColumns > div:not(.session),
		.flex-wrapper.threeColumns > div.session{
			width: calc((100% - 129px) / 3);
			margin: unset;
		}
		.flex-wrapper.fourColumns > div{
			width: calc((100% - 120px) / 4);
			margin: unset;
		}
		.flex-wrapper.fiveColumns > div{
			width: calc((100% - 100px) / 5);
			margin: unset;
		}
}


/** * TEXT ---------------------------------------------------------------------------------- * **/
/** * TEXT --> GENERALL ** */
.text{
	margin-bottom: 15px;
	font-size: 16px;
	line-height: 26px;
}

.textSmall{
	font-size: 15px;
	line-height: 25px;
}


/** * TEXT --> WEIGHT ** */
.bold{
	font-weight: 700;
}
	.semiBold{
		font-weight: 600;
	}


/** * TEXT --> COLOR ** */
.primaryColorText{
	color: var(--primary-color);
}

.whiteColorText{
	color: var(--white);
}

/** * TEXT --> FONTSIZE ** */
.smallFontSize{
	font-size: 14px;
	line-height: 24px;
}
.bigFontSize{
	font-size: 18px;
	line-height: 28px;
}


/** * TEXT --> HEADLINES ** */
.headline-highlight{
	font-size: 28px;
	line-height: 38px;
	margin-bottom: 18px;
	word-break: break-word;
}

.headline-1{
	font-size: 32px;
	line-height: 36px;
	margin-bottom: 25px;
	word-break: break-word;
}
	.headline-1 .sub-headline{
		font-size: 16px;
		line-height: 20px;
		word-break: break-word;
	}

.headline-2{
	font-size: 20px;
	line-height: 27px;
	margin-bottom: 16px;
	word-break: break-word;
}
#contact .headline-2{
	font-size: 24px;
	line-height: 30px;
	margin-bottom: 21px;
	word-break: break-word;
	min-height: 30px;
}
	.headline-2 .sub-headline{
		font-size: 11px;
		line-height: 15px;
		word-break: break-word;
	}

.headline-3{
	font-size: 18px;
	line-height: 24px;
	word-break: break-word;
}

.subheadline{
	font-weight: bold;
	word-break: break-word;
}


@media only screen and (min-width: 767px){
	.headline-1{
		font-size: 36px;
		line-height: 46px;
		margin-bottom: 58px;
	}
	#events_info_v1 .headline-1{
		margin-bottom: 20px;
	}
	div[id^="events_content_info_"] .headline-1,
	.info .headline-1{
		font-size: 28px;
		line-height: 38px;
		margin-bottom: 20px;
	}	
}

/* ** INPUT-FIELDS ------------------------------------------------------------------------------- ** */
input[type=text]{
	border-color: var(--grey);
	border-radius: 0px;
}
input[type=text].readonly{
	pointer-events: none;
    border: 0 none !important;
    background: #f0f1f4 !important;
    /* color: var(--middle-grey-lighter); */
    color: #c8ccd1 !important;
    cursor: context-menu;
    border-left: 2px solid var(--middle-grey-lighter) !important;
    opacity: 1 !important;
}

.text-wrapper.readonly{
	position: relative;
}

.text-wrapper.readonly:after{
	content: '*';
    position: absolute;
    right: -10px;
    z-index: 1;
    bottom: 14px;
    color: var(--middle-grey);
}

.hint{
	font-size: 12px;
    color: var(--middle-grey);
    line-height: 16px;
    margin-top: -15px;
    margin-bottom: 15px;
}

/** * BACKGROUNDS --------------------------------------------------------------------------- ** */
.primaryColorBackground{
	background: var(--primary-color);
	color: var(--white);
}

.secondaryColorBackground{
	background: var(--secondary-color);
	color: var(--white);
}

.positiveColorBackground{
	background: var(--positive-color);
	color: var(--white);
}

.lightGreyBackground{
	background: var(--light-grey);
}

.greyBackground{
	background: var(--grey);
}

.darkGreyBackground{
	background: var(--dark-grey);
	color: var(--white);
}

.blackTransparentBackground{
	background: rgba(0, 0, 0, 0.77);
	color: var(--white);
}

.backgroundShadow{
	-webkit-box-shadow: 0px 3px 6px var(--black-transparent);
	-moz-box-shadow: 0px 3px 6px var(--black-transparent);
	box-shadow: 0px 3px 6px var(--black-transparent);
}

/** * BORDERS --------------------------------------------------------------------------- ** */
.primaryColorBorder{
	border-color: var(--primary-color);
	background: var(--white);
	color: var(--primary-color);
}


/* ** CHANGEABLE BACKGROUNDS --------------------------------------------------------------- ** */
/** Weiß - normal**/
.backgroundColor_1{
	color: var(--dark-grey);
	background: var(--white);
}
	.backgroundColor_1:before{
		background: var(--white);
	}


/** Hellgrau **/
.backgroundColor_2{
	color: var(--dark-grey);
	background: var(--light-grey);
}
	.backgroundColor_2:before{
		background: var(--light-grey);
	}
	.backgroundColor_2 .lightGreyBackground{
		background: white;
	}

	.backgroundColor_2,
	.backgroundColor_2 .tab-wrapper .tab,
	.backgroundColor_2 .tab-wrapper{
		border-color: var(--grey);
	}
	.backgroundColor_2 .accordion-wrapper .accordion{
		border-color:var(--middle-grey);
	}

	.backgroundColor_2 .accordion-wrapper .accordion .accordion-header{
		color: var(--dark-grey);
		background: var(--middle-grey);
	}
		.backgroundColor_2 .accordion-wrapper .open .accordion-header{
			color: var(--dark-grey);
		}
	.backgroundColor_2 .accordion-wrapper .accordion .toggleIcon{
		color: var(--dark-grey);
	}
	.backgroundColor_2 .accordion-wrapper .accordion.open .toggleIcon{
		color: var(--dark-grey);
	}

	.backgroundColor_2 #filter-form{
		background: var(--middle-grey-lighter);
	}


/** Dunkelgrau **/
.backgroundColor_3 h2,
.backgroundColor_3 h3,
.backgroundColor_3{
	color: var(--white);
	background: var(--dark-grey);
}
	.backgroundColor_3:before{
		background: var(--dark-grey);
	}

	.backgroundColor_3 .btn-primary{
		background: transparent;
		border-color: var(--white);
		border-color: var(--white);
	}

	.backgroundColor_3 .btn-primary:hover{
		color: var(--dark-grey);
		background: var(--white);
	}

	.backgroundColor_3 .primaryColorText{
		color: var(--light-grey);
	}

	.backgroundColor_3 .sessionTypeBadge{
		color: var(--dark-grey);
	}

	.backgroundColor_3 .lightGreyBackground{
		color: var(--dark-grey);
	}
		.backgroundColor_3 .lightGreyBackground .btn-primary{
			background: var(--primary-color);
			color: var(--white);
		}
		.backgroundColor_3 .lightGreyBackground .btn-primary:hover{
			color: var(--primary-color);
			background: var(--light-grey);
			border-color: var(--primary-color);
		}
	.backgroundColor_3,
	.backgroundColor_3 .tab-wrapper .tab,
	.backgroundColor_3 .tab-wrapper{
		border-color: var(--gray-300);
	}

	.backgroundColor_3#agenda .calendar-row_half:after{
		border-color: var(--gray-300);
	}

	.backgroundColor_3#agenda .calendar-row_full:after{
		border-color: var(--gray-600);
	}

	.backgroundColor_3 .darkGreyBackground{
		background: var(--light-grey);
		color: var(--dark-grey);
	}
	.backgroundColor_3 .accordion-wrapper .accordion .accordion-header{
		color: var(--dark-grey);
	}
	.backgroundColor_3 .accordion-wrapper .open .accordion-header{
		color: var(--white); 
	}
	.backgroundColor_3 .accordion-wrapper .accordion .toggleIcon{
		color: var(--dark-grey);
	}
	.backgroundColor_3 .accordion-wrapper .accordion.open .toggleIcon{
		color: var(--white);
	}


/** Rot **/
.backgroundColor_4 h2,
.backgroundColor_4 h3,
.backgroundColor_4{
	color: var(--white);
	background: var(--primary-color);
}
	.backgroundColor_4:before{
		background: var(--primary-color);
	}

	.backgroundColor_4 .btn-primary{
		background: transparent;
		border-color: var(--white);
		color: var(--white);
	}

	.backgroundColor_4 .btn-primary:hover{
		color: var(--primary-color);
		background: var(--white);
		border-color: var(--white);
	}
	.backgroundColor_4 .sessionTypeBadge{
		color: var(--dark-grey);
		box-shadow: -1px 0px 6px -1px var(--dark-grey);
	}

	.backgroundColor_4 .primaryColorText{
		color: var(--light-grey);
	}

	.backgroundColor_4 .lightGreyBackground{
		color: var(--dark-grey);
	}
		.backgroundColor_4 .lightGreyBackground .btn-primary{
			background: var(--primary-color);
			color: var(--white);
		}
		.backgroundColor_4 .lightGreyBackground .btn-primary:hover{
			color: var(--primary-color);
			background: var(--light-grey);
			border-color: var(--primary-color);
		}

	.backgroundColor_4,
	.backgroundColor_4 .tab-wrapper .tab,
	.backgroundColor_4 .tab-wrapper{
		border-color: var(--black-transparent);
	}
	.backgroundColor_4 .tab-wrapper .tab.active{
		color: var(--middle-grey);
	}
		.backgroundColor_4 .tab-wrapper .tab:hover{
			color: var(--middle-grey);
		}

	.backgroundColor_4#agenda .calendar-row_half:after{
		border-color: var(--black-transparent);
	}

	.backgroundColor_4#agenda .calendar-row_full:after{
		border-color: var(--dark-grey);
	}

	.backgroundColor_4 .darkGreyBackground{
		background: var(--light-grey);
		color: var(--dark-grey);
	}

	.backgroundColor_4 .accordion-wrapper .accordion .accordion-header{
		color: var(--dark-grey);
		background: var(--white);
	}
		.backgroundColor_4 .accordion-wrapper .open .accordion-header{
			color: var(--white);
		}
	.backgroundColor_4 .accordion-wrapper .accordion .toggleIcon{
		color: var(--dark-grey);
	}
	.backgroundColor_4 .accordion-wrapper .accordion.open .toggleIcon{
		color: var(--white);
	}
	.backgroundColor_4 .swiper-scrollbar-horizontal .swiper-scrollbar-drag{
		background: var(--dark-grey) !important;
	}




/* ** BADGES ------------------------------------------------------------------------------- ** */
/* ** BADGES -> SESSION TYPE ** */
.sessionTypeBadge{
	background: var(--grey);
	font-size: 15px;
	line-height: 25px;
	text-align: center;
	padding: 3px 15px;
	width: fit-content;
	margin-bottom: 17px;
}
	.vector_event,
	.sessionTypeBadge.primaryColorBorderLeft{
		border-left: 8px solid var(--primary-color);
	}
	.webinar,
	.sessionTypeBadge.warningColorBorderLeft{
		border-left: 8px solid var(--warning-color);
	}
	.training,
	.sessionTypeBadge.tertiaryColorBorderLeft{
		border-left: 8px solid var(--tertiary-color);
	}
	.fair_conference,
	.sessionTypeBadge.positiveColorBorderLeft{
		border-left: 8px solid var(--positive-color);
	}

/* ** BADGES -> LIVE ** */
.liveBadgeParent{
	position: relative;
}
	.liveBadgeParent .liveBadge{
		padding: 7px 35px;
		line-height: 19px;
		width: fit-content;
		position: absolute;
		left: -8px;
    	top: 20%;
    	z-index: 1;
    	-webkit-box-shadow: 0px 0px 6px var(--primary-color-lighter);
		-moz-box-shadow: 0px 0px 6px var(--primary-color-lighter);
		box-shadow: 0px 0px 6px var(--primary-color-lighter);
	}
		.liveBadgeParent .liveBadge:before{
			content: "";
			display: block;
			position: absolute;
			left: 14px;
			top: 12px;
			height: 8px;
			width: 8px;
			border-radius: 100%;
			background: var(--white);
			
		}

@media only screen and (min-width: 767px){
	.liveBadgeParent .liveBadge{
		left: -13px;
	}
}



/* ** BUTTONS ----------------------------------------------------------------------------- ** */
/* ** BUTTONS --> LINKS ** */
.link{
	cursor: pointer;
	width: fit-content;
}
	.link:hover,
	.link.underline{
		text-decoration: underline;
	}

.button{
	cursor: pointer;
}

/* ** BUTTONS --> BUTTON PRIMARY ** */
.btn-primary{
	cursor: pointer;
	width: fit-content;
	padding: 9px 40px;
	text-align: center;
	margin-top: 50px;
	border: 1px solid var(--primary-color);
}
	.btn-primary:hover{
		background: transparent;
		color: var(--primary-color);
	}
	#events_review .btn-primary{
		margin-top: 30px;
	}

.btn-secondary{
	cursor: pointer;
	width: fit-content;
	padding: 15px 50px;
	text-align: center;
	margin-top: 10px;
	border: 2px solid;
}

[class^="btn-"].disabled{
	background: var(--light-grey);
    border: var(--middle-grey);
    color: var(--middle-grey);
    pointer-events: none;
}


@media only screen and (min-width: 767px){
	.btn-primary{
		padding: 9px 70px;
	}
	.btn-secondary{
		padding: 15px 80px;
	}
}

/* ** BUTTONS --> FILTER ** */
.filter{
	padding-left: 49px !important;
	position: relative;
}
	.filter:before{
		content: url(/custom/img/microsite/1854/Filter.svg);
    	filter: invert(100%);
		position: absolute;
		height: 20px;
		width: 20px;
		left: 19px;
		top: 12px;
		display: inline-block;
	}
	.filter:hover:before{
		filter: invert(10%) sepia(74%) saturate(6844%) hue-rotate(337deg) brightness(82%) contrast(104%);
	}


/* ** BUTTONS --> TOTOP ** */
.scrollToTop{
	height: 40px;
	z-index: 999;
    width: 40px;
    position: fixed;
    right: 0px;
    background: #eaeced;
    bottom: 66px;
    cursor: pointer;
    opacity: 1;
    -webkit-box-shadow: 0px 3px 6px var(--black-transparent);
    -moz-box-shadow: 0px 3px 6px var(--black-transparent);
    box-shadow: 0px 3px 6px var(--black-transparent);
    transition: all .25s ease-out, opacity .6s ease-in-out !important;
}
	.scrollToTop:before{
		content: "\f106";
	    font-family: FontAwesome;
	    font-size: 30px;
	    position: absolute;
	    top: 5px;
    	right: 10px;
	}
	.scrollToTop:hover{
		background: var(--primary-color);
		color: var(--white);
	}

	.scrollToTop.hidden{
		transition: all .25s ease-out, opacity .6s ease-in-out !important;
		opacity: 0;
		pointer-events: none;
		cursor: context-menu;
		display: block;
	}

/* ** ACCORDION ------------------------------------------------------------------------- ** */
.accordion-wrapper{
	display: flex;
	flex-direction: column;
	background: transparent;
}
	.accordion-wrapper .accordion{
		border: 1px solid var(--grey);
		margin-bottom: 5px;
		position: relative;
	}
	.accordion-wrapper .accordion .toggleIcon{
		right: 25px;
		top: 7px;
		position: absolute;
		cursor: pointer;
		font-size: 22px;
	}
		.accordion-wrapper .accordion .toggleIcon:after{
			content: '\f0dd';
			font-family: FontAwesome;
		}
		.accordion-wrapper .accordion.open .toggleIcon:after{
			content: '\f0d8';
		}
		.accordion-wrapper .accordion .accordion-header{
			background: var(--grey);
			padding: 12px 55px 12px 25px;
			cursor: pointer;
		}
		.accordion-wrapper .accordion.open .accordion-header{
			background: none;
		}
		.accordion-wrapper .accordion:not(.open) .accordion-header:hover{
			color: var(--primary-color);
		}
		.accordion-wrapper .accordion .accordion-body{
			height: 0px;
			padding: 0px 25px 0px 25px;
			overflow: hidden;
		}
		.accordion-wrapper .accordion.open .accordion-body{
			height: fit-content;
			padding: 0px 25px 40px 25px;
		}
			.accordion-wrapper .accordion .accordion-body .link{
				padding: 20px 0px 0px 0px
			}

			.accordion-wrapper .accordion .accordion-body .link i{
				margin-right: 20px;
				font-size: 20px;
			}
		

			


/* ** TABS ------------------------------------------------------------------------------ ** */
.tab-wrapper{
	display: flex;
	border-bottom: 2px solid var(--light-grey);
	width: 100%;
	padding-bottom: 15px;
	margin-bottom: 35px;
}
	.tab-wrapper .tab{
		padding: 0px 25px;
		border-right: 2px solid var(--light-grey);
		cursor: pointer;
	}
	.tab-wrapper .tab:last-child{
		border-right: none;
	}
	/*.tab-wrapper .tab:first-child{
		padding-left: 0px;
	}*/
	.tab-wrapper .tab.active{
		background: rgba(0, 0, 0, 0.77);
		color: white;
		transition: none;
	}

	.tab-wrapper .tab.active:hover{
		color: white;
		background: rgba(0, 0, 0, 0.77);
	}

	.tab-wrapper .tab:hover{
		color: var(--primary-color);
	}
		.tab-wrapper .tab .subtitle{
			font-size: 13px;
			font-weight: normal;
			padding-top: 2px;
			transition: none;
		}
		
.events .section.tab-content{
	display: none;
}
.events .section.tab-content.active{
	display: block
}

/* ** POPUPS ----------------------------------------------------------------------------- ** */
.u2d-popup.show{
	display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    z-index: 99999999;
}

.u2d-popup,
.u2d-popup__wrapper,
.u2d-popup__content{
	box-shadow: none !important;
	border: none !important;
}

.u2d-popup .u2d-popup__body{
	padding: 20px 40px 40px;
	position: relative;
}

#bodyMicrosite #bodyRegistration {
    font-family: MarcWeb;
}
#bodyMicrosite #bodyRegistration {
    width: 100%;
}
#bodyMicrosite div#registration.show .u2d-popup__body {
	padding: 0px;
}

.u2d-popup .u2d-popup__body .u2d-popup__close{
	position: absolute;
    background: var(--light-grey);
    box-shadow: 0px 3px 6px #00000029;
    width: 39px;
    height: 39px;
    border-radius: 100%;
    top: -16px;
    right: -16px;


}

	.u2d-popup .u2d-popup__body .u2d-popup__close:before,
	.u2d-popup .u2d-popup__body .u2d-popup__close:after {
		content: '';
		width: 2px;
		height: 25px;
    	top: 7px;
    	right: 18px;
		display: block;
		background: var(--primary-color);
		transform: rotate(-45deg);
    	position: absolute;
	}
	.u2d-popup .u2d-popup__body .u2d-popup__close:after{
		transform: rotate(45deg);
		top: 7px;
    	right: 18px;
	}

	#registration .u2d-popup__body{
	    max-height: calc(100vh - 40px);
	}



/* ** TABLE ------------------------------------------------------------------------------ ** */
.table{
	margin: 40px 0px 0px 0px;
	padding-bottom: 20px;
	border-top: 1px solid var(--grey);
	overflow-x: auto;
	-webkit-overflow-scrolling: auto;
}
	.table .table-body{
		display: flex;
		flex-direction: column;
	}
	.table .row{
		display: flex;
		border-left: 1px solid var(--grey);
	}
		.table .row .cell{
			padding: 15px 20px;
			vertical-align: top;
			border: 1px solid var(--grey);
			border-width: 0px 1px 1px 0px;
			width: 100%;
			min-width: 100px;
		}


/* ** IMAGES ----------------------------------------------------------------------------- ** */
.visual{
	display: flex;
	overflow: hidden;
    align-items: center; 
    justify-content: center;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    padding-bottom: 57.88%; /* Images alwas same format*/
    background: var(--grey);
}
.visual.round{
	border-radius: 100%;
	width: 150px;
	height: 150px;
	padding: unset;
	margin-bottom: 30px;
}
	.visual img{
		position: absolute;
		object-fit: cover;
		width: 100%;
		height: auto;
	}
	.visual:not(.round) img{
		padding-top: 57.88%; /* Images centert 16:9*/
	}

	.visual iframe{
		height: 100%;
		width: 100%;
		border: none;
	}

	

/* ** DESKTOP & MOBILE ------------------------------------------------------------------- ** */
.desktop{
	display: none;
}
.mobile{
	display: flex;
}

@media only screen and (min-width: 767px){
	.desktop{
		display: flex;
	}
	.desktop.visual{
		display: flex !important;
	}
	.mobile{
		display: none;
	}

}

body[data-popup-modal="true"] {
	overflow: hidden;
}

body[data-popup-modal="true"]:before{
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
	z-index: 1050;
}

.u2d-popup {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1050;
	display: none;
	width: 100%;
	height: 100%;
	overflow: hidden;
	outline: 0;
	pointer-events: none;
}

.u2d-popup.modal {
	pointer-events: auto;
	overflow-y: auto;
}

.u2d-popup.show {
	display: block;
}

.u2d-popup__wrapper {
	transition: transform .3s ease-out;
	position: relative;
	max-width: 95%;
	margin: 1.75rem auto;
	z-index: 1;
}

.u2d-popup.compact .u2d-popup__wrapper{
	max-width: -moz-fit-content;
	max-width: fit-content;
	width: auto;
}

.u2d-popup__content {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid rgba(0,0,0,.2);
	outline: 0;
	box-shadow: 3px 3px 6px -2px #aaaaaa;
}


.u2d-popup.show .u2d-popup__content {
	animation: fadeInDown; /* referring directly to the animation's @keyframe declaration */
	animation-duration: 0.25s; /* don't forget to set a duration! */
}
.u2d-popup.dismiss .u2d-popup__content {
	animation: fadeOutUp; /* referring directly to the animation's @keyframe declaration */
	animation-duration: 0.25s; /* don't forget to set a duration! */
}

.u2d-popup__header {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1rem;
	border-bottom: 1px solid #dee2e6;
}

.u2d-popup__body {
	position: relative;
	flex: 1 1 auto;
	padding: 1rem;
}

.u2d-popup__footer {
	display: flex;
	flex-wrap: wrap;
	flex-shrink: 0;
	align-items: center;
	justify-content: flex-end;
	padding: .75rem;
	border-top: 1px solid #dee2e6;
}

.u2d-popup__close {
	cursor: pointer;
}
.popup-detail-wrapper iframe {
	/* position: relative; */
	border: none;
}


/* mobile view bis und ab iPad pro 12" */
	@media (max-width: 767px) and (orientation: portrait) {
		#divContent .popup-detail-wrapper iframe {
			width: 100vw;
		}
	}	
	@media (max-width: 768px) {
		.popup-detail-wrapper iframe {
			width: 80vw;
			height: 100vh;
		}
	}
	@media (min-width: 769px) and (max-width: 1366px) {
		.popup-detail-wrapper iframe {
			width: 80vw;
			height: 80vh;
		}
	}
	@media(min-width: 1367px) {
		.popup-detail-wrapper iframe {
			width: 1085px;
			max-height: 90vh;
			/* height: fit-content !important; */
		}
	}
/* ** LOGIN ------------------------------------------------------------------- ** */

.login .login-form{
	margin: 200px auto;
	max-width: 700px;
	padding: 20px;
	gap: 20px;
}
	.login .login-form .form-group:not(:last-child){
		margin-bottom: 30px;
	}
		.login .login-form .form-group .input-group{
			flex-wrap: unset;
			justify-content: space-between;
		}

			.login .login-form .form-group .input-group #msPasswordInput_togglePasswordView{
				height: 100%;
			}

		.login .login-form .form-group input{
			width: calc(100% - 20px - 38px);
		    border-radius: 5px;
		    border-color: var(--middle-grey);
		}

/* ######## APPROVAL CSS #232890  ######## */

body.approval_events #divContent {
    margin-top: 200px;
	background: var(--light-grey);
}
body.approval_events .approval-table {
	/* display: grid; */
	grid-template-columns: 90%;
	justify-content: center;
	margin-bottom: 30px;
	padding: 0 20px;
}
div#approval-wrapper {
    max-width: 1270px;
    margin: 0 auto;
}
	body.approval_events .table-header,
	body.approval_events .table-content,
	body.approval_events .table-footer {
		display: grid;
	}
	body.approval_events .table-header {
		grid-template-columns: 2fr 1fr 1fr;
	}
	body.approval_events .table-content {
		grid-template-columns: repeat(4, 1fr);
	}
	body.approval_events .table-footer {
		grid-template-columns: repeat(4, 1fr);
	}
	body.approval_events .classification-participants {
		grid-template-columns: 2fr repeat(6, 1fr);
	}
	body.approval_events .table-footer p {
		border: 1px solid #bcbcbc;
		border-top: none;
	}

body.approval_events .approval-table p {
	padding: 10px;
	margin: 0;
}

body.approval_events .approval-table .table-header,
body.approval_events p.column-head {
	color: var(--dark-grey-darker);
	font-weight: bold;
}
	body.approval_events .approval-table .table-header {
		background: #b1b6ba;
	}
	body.approval_events .approval-table.staffing .table-header {
		background: #c2d69b;
	}
	.approval-table div[class^="table-"]:not(.table-footer) p {
		border: 0.5px solid #b1b6ba;
		border-top: none;
	}	
	.approval-table.staffing div[class^="table-"]:not(.table-footer),
	.approval-table.staffing div[class^="table-"]:not(.table-footer) p {
		border: 0.5px solid #c2d69b;
		border-top: none;
	}

body.approval_events div.headline-2 {
	font-size: 18px;
	padding-left: 30px;
}
body.approval_events .content-header .headline-2 {
	cursor: pointer;
}
body.approval_events .event-item {
    margin-bottom: 15px;
    border: 1px solid var(--gray-400);
    padding: 15px 0px 2px;
    border-radius: 3px;
	background: #fff;
}	
body.approval_events .button-wrapper.secondary {
    width: 40%;
    text-align: right;
}
body.approval_events .button-wrapper.secondary .button {
	width: initial;
	text-decoration: none;
    text-align: left;
    margin-top: unset;
    margin-right: 15px;
    padding: 1px 3px;
    font-size: 12px;
	border-radius: 2px;
	background: transparent;
	color: var(--primary-color);
	transition: all .3s ease-in-out;
}
body.approval_events .button-wrapper.secondary .button:hover {
	color: #fff;
	background: var(--primary-color);
}

body.approval_events .header-container {
    display: flex;
    justify-content: space-between;
	position: relative;
}

@media(max-width: 680px) {

	body#bodyMicrosite.approval_events .header-container {
		display: block;
	}

}

@media(max-width: 767px) {

	body#bodyMicrosite.approval_events .button-wrapper.secondary {
		width: initial;	
	}
	
}

@media(min-width: 768px) {

	body.approval_events .button-wrapper .button {
		display: inline-block;
	}

}

@media(max-width: 1366px) {

	body.approval_events .content {
		padding: 20px 10px;
	}
	body.approval_events .button-wrapper.secondary .button {
		text-decoration: underline;
	}
	
}
@media(min-width: 1367px) {

	body.approval_events .content {
		padding: 20px 30px;
		margin: 30px;
	}
	body.approval_events .button-wrapper .button {
		margin-right: 50px;
	}
	body.approval_events .button-wrapper .button:first-of-type {
		margin-left: 20px;
	}
	body.approval_events .button-wrapper.secondary .button:hover {
		color: #fff;
		background: var(--primary-color);
	}

}


	.content-header .headline-2.header-container-active  {
		position: relative;
	}
	.content-header .headline-2.header-container-active:after {
		content: '\f0d8';
	}
	.content-header .headline-2:after {
		content: '\f0dd';
		font-family: FontAwesome;
		position: absolute;
		font-size: 21px;
		top: -5px;
		left: 10px;
	}
	.table-container {
		padding: 0px 18px;
		height: 0;
		opacity: 0;
		overflow: hidden;
		transition: height 0.3s ease-out, margin 0s, opacity 0s;
	}
	.table-container.header-container-active {
		transition: height 0.9s ease-out, margin 0s, opacity 0.2s;
		opacity: 1;
		margin: 60px auto;
	}
	ul.anchor-menu {
		margin: 50px;
		overflow: visible;
	}
	ul.anchor-menu li {
		background: #fff;
	}
	ul.anchor-menu li {
		display: inline-block;
		padding: 2px 5px;
		border: 1px solid var(--gray-500);
		margin: 2px 5px;
		line-height: 24px;
		transition: all .2s ease-in-out;
	}

	ul.anchor-menu li:hover {
		background: var(--gray-300);
		color: var(--primary-color);
	}


/* ######## END APPROVAL ######## */


/* ######## SCROLL TOP BTN ######## */

#scrollBtn {
	display: none; 
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: 1px solid var(--primary-color);
    outline: none;
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
    border-radius: 5px;
    width: 50px;
    height: 50px;
	box-shadow: 0px 3px 20px -7px #333;
  }
  
  #scrollBtn:hover {
	background-color: #fff; 
	color: var(--primary-color);
  }

  #scrollBtn:after {
    content: '\f0d8';
    font-family: FontAwesome;
    position: absolute;
	font-size: 28px;
    bottom: 10px;
    left: 16px;
}

/* ######## END SCROLL TOP BTN ######## */




/* ** NOPERSON POPUP ----------------------------------------------------------- ** */
#noPerson{
	background: rgb(0 0 0 / 65%);
	pointer-events: none;
}

	#noPerson .u2d-popup__body{
		width: 450px;
	    padding: 30px 40px;
	}
		#noPerson .u2d-popup__body .headline-1{
			color: var(--primary-color);
    		margin-top: 10px;
		}

		#noPerson .u2d-popup__body .text{
			font-size: 18px;
		    line-height: 28px;
		}