@charset "utf-8";
/* CSS Document */
/* global print default */

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/media/fonts/Lato-Black.ttf') format('truetype'); 
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('/media/fonts/Lato-BlackItalic.ttf') format('truetype'); 
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('/media/fonts/Lato-Bold.ttf') format('truetype'); 
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 500;
  src: local(''),
       url('/media/fonts/Lato-BoldItalic.ttf') format('truetype'); 
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/media/fonts/Lato-Regular.ttf') format('truetype'); 
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('/media/fonts/Lato-Italic.ttf') format('truetype'); 
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('/media/fonts/Lato-Light.ttf') format('truetype'); 
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  src: local(''),
       url('/media/fonts/Lato-LightItalic.ttf') format('truetype'); 
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 200;
  src: local(''),
       url('/media/fonts/Lato-Thin.ttf') format('truetype'); 
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 200;
  src: local(''),
       url('/media/fonts/Lato-ThinItalic.ttf') format('truetype'); 
}

@font-face {
  font-family: 'Trim';
  font-style: normal;
  font-weight: bold;
  src: local(''),
       url('/media/fonts/Trim-Bold.woff') format('woff'),
			 url('/media/fonts/Trim-Bold.woff2') format('woff2'); 
}

$fs-1: 16px;
$fs-2: 14px;
$ff-1: 'Lato', Arial, sans-serif;
$fw-1: normal;
$lh-1: 1.75rem;
$mc-1: #003d60; // Hier die Farbe ersetzen.
$mw: 1300px;
$ff: 'Font Awesome 5 Free';

$fc: white;
$mc-blue: #0D3691;
$mc-purple: #7D3153;
$mc-orange: #E42C1A;

:root {
	--grid-columns: 7;
	--grid-width: calc(100% / var(--grid-columns));
}


// Mixins
@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	-ms-border-radius: $radius;
	border-radius: $radius;
}
// .box { @include border-radius(10px); }

@mixin box-sizing($sizing) {
	-webkit-box-sizing: $sizing;
	-moz-box-sizing: $sizing;
	box-sizing: $sizing;
}
// .box { @include box-sizing(border-box); }

@mixin transition($transition) {
	-webkit-transition: $transition;
	transition: $transition;
}
// .box { @include transition(all 0.3s ease-out); }

@mixin appearance($appearance) {
	-webkit-appearance: $appearance;
	-moz-appearance:    $appearance;
	appearance:         $appearance;
}
// .box { @include appearance($appearance); }

@mixin box-shadow($shadow...) {
	-moz-box-shadow:    $shadow;
	-webkit-box-shadow: $shadow;
	box-shadow:         $shadow;
}
// .box { @include box-shadow($shadow); }

@mixin transform($value...) {
	-webkit-transform:  $value;
	-ms-transform:      $value;
	transform:          $value;
}
// .box { @include transform($value);}

@mixin fontawesome($icon, $size, $color){
	content: $icon;
	font-family:$ff;
	font-weight:900;
	font-size: $size;
	color:$color;
}

body, html, input[type="search"] {
	box-sizing: border-box;
}
*, *::before, *::after {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
}
html {
	font-size: $fs-1;
}

body{
background: rgb(255,255,255);
background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(237,240,243,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(237,240,243,1) 100%);
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(237,240,243,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#edf0f3",GradientType=1);
}

body, button, input, select, textarea {
	color: $fc;
	font-family: $ff-1;
	font-size: $fs-1;
	font-style: normal;
	font-weight: $fw-1;
	line-height: $lh-1;
}

p{
	margin-bottom: 0.5rem;
}

h1 {
	font-size: 38px;
	line-height: 40px;
	font-style: normal;
	letter-spacing: 0px;
	text-transform: none;
	margin-bottom: 25px;
}

h1,h2,h3,h4,h5,h6{
	font-size: 38px;
	color:$fc;
	font-weight:900;
	font-family:'trim';
	text-transform: uppercase;
}



select {
	padding:0;
}

a img {border:0;}
img {display:block;max-width:100%;height:auto;}
ul, ol {padding-left:15px;}
#TopMenu ul, #HauptMenu ul, #LocaleSwitch ul, #Veranstaltungsliste ul, #LogIO ul {list-style:none;padding-left:0;}
.GroupFieldset > p > .LabelRadiogroupInput {display: block;}
fieldset {border-right: 0;border-left: 0;border-top:0;&:first-child{border-top:1px;}fieldset {border: 0;}}
.Frage, #LogInUser, #LogInPassword {margin-bottom: 3px;}
.GroupFieldsetInvoiceAddress {background-color: #efefef;border-top: 0 none;padding-top: 2px;padding: 10px 36px;}
.FrageSeparateinvoiceAddress, .FrageSeparatedeliveryAddress {margin-bottom: 0;}
/* Hauptnavigation */

/* Topnavigation */

/* Buttons */
.submit, .IsButton, .prevPane, .firstPane, %Button, .FieldseparateInvoiceDelivery .LabelCheckboxInput, .FieldPListPermit .LabelCheckboxInput {
	font-size: $fs-1;
	color: $mc-orange;
	background-color: white;
	cursor: pointer;
	display: inline-block;
	padding: 0.25rem 1rem ;
	transition: all 0.2s ease 0s;
	font-weight: 500;
	text-transform:uppercase;
	border:0;
	&:hover {
		background:#003d60;
		color:$fc;
	}
	
	&#submitAnmeldung{
		padding: 0.0rem 0.8rem ;
	}
}
.FieldseparateInvoiceDelivery .LabelCheckboxInput {
	padding-left: 36px;
}
#Printbutton {
	text-align: left;
	a {
		@extend %Button;

	}
}

/* Input und Textfelder */

/* Anmeldeformular - Steps */
#FormTabs {
	line-height: 52px;
	border-bottom: 1px solid #efefef;
	display: inline-block;
	margin-bottom: 25px;
	width: 100%;
	#FormSteps {
		&::after {content:"";clear: both;display:block;}
		.FormStep {
			height: auto;
			position: relative;
			a {
				top: 0;
				padding-left: 0px;
				padding-right: 30px;
				color:white;
				text-transform:uppercase;
				font-family: "trim";
				&.active {
					border-bottom:0;
					text-decoration: underline;
				}
			}
			&::after {
				content: "\f105";
				font-family: $ff;
				font-weight: 900;
				margin-left: 11px;
				position: absolute;
				right: 11px;
				top: 0px;
			}
			&:last-child::after {
				display: none;
			}
		}
	}
}
/* Anmeldeformular - PaneButtons */
.PaneButtons {
	list-style: none;
	padding-left: 0;
	margin-top: 40px;
	margin-bottom: 35px;
	display: inline-block;
	border-top: 1px dotted #efefef;
	padding-top: 20px;
	&::after {content:"";clear:both;display:block;}
	.PaneButtonLeft, .PaneButtonCenter, .PaneButtonRight {
		float: left;
		width: calc(100% / 3);
		min-height: 1px;
	}
	.PaneButtonLeft {
		text-align: left;
	}
	.PaneButtonCenter {
		text-align: left;
		width: 100%;
		position: absolute;
		top: 60px;
		
		.PaneButtonCenterContent {
			padding-top: 0;
			width:100%;
		}
	}
	.PaneButtonRight {
		text-align: right;
		float: right;
	}
}
// Hauptnavigation im Header
#Header, #Gesamt {
	#Navigation-Content {
		display:flex;
		justify-content:space-between;
		
		padding:20px 0px;
		
		.logo{
			max-width:306px;
			z-index:101;
			a {
				margin-top:5px;
				display: inline-block;
				position:relative;
				
			}
		}
		
		#HauptMenuRahmen{
			display:flex;
			align-self:flex-end;
		}
		
		#HauptMenu {
			ul {
				margin-bottom: 0;
				&::after{content:"";clear:both;display:block;}
				.mainMenue {
					float: left;
				}
				li {
					position: relative;
					ul {
						display: none;
						position: absolute;
						left: 0;
					}
					&:hover {
						ul {
							display: inline-block;
						}
					}
				}
			}
			.MenueLevel2 {
				padding-top: 3px;
				z-index: 9999;
				min-width: 200px;
				border: 1px solid #bac3c6;
				background-color: #fff;
				border-top: 0px;
				border-bottom-width: 5px;
				a {
					background-color: #FFF;
					padding: 5px 20px;
					display: block;
					color: $fc;
					&:hover, &.Self {
						color: $fc;
					}
				}
			}
		}
	}
}

// Hauptnavigation in einer der Sidebars
.Sidebar, .Leftbar {
	#Navigation {
		#HauptMenuRahmen {
			#HauptMenu {
				ul {
					&::after{content:"";clear:both;display:block;}
					.mainMenue {
						float: none;
						a {
							display: block;
						}
					}
				}
			}
		}
	}
}

// Startseite Buchungsnummernfeld
#Buchungsnummer, #SearchForm {
	&::after {content:"";clear:both;display:block;}
	#EingabeBN, #WeiterBN,
	#EingabeSearch, #SearchBN {
		float: left;
	}
}


// Error-Meldung

.error {
	background-color: #ed6767;
	box-shadow: 0 4px 9px rgba(0, 0, 0, 0.3), 0 0 0 1px #fff inset;
	color: $fc;
	font-size: 0.9em;
	padding: 0 9px;
	padding-left: 30px;
	line-height: 23px;
	width: 23px;
	overflow: hidden;
	height: 23px;
	padding-left: 16px;
	box-sizing: border-box;

	p {
		margin: 0;
		display: inline;
	}
	em {
		display:none;
		border-color: #fff transparent transparent !important;
		border-width: 9px;
		bottom: -18px;
		&::after {
			-moz-border-bottom-colors: none;
			-moz-border-left-colors: none;
			-moz-border-right-colors: none;
			-moz-border-top-colors: none;
			border-color: #ed6767 transparent transparent;
			border-image: none;
			border-style: solid;
			border-width: 9px;
			bottom: -7px;
			content: "";
			display: block;
			height: 0;
			left: -9px;
			position: absolute;
			width: 0;
		}
	}
	&::before {
		background-color: #d74141;
		border-color: #fff currentcolor #fff #fff;
		border-style: solid none solid solid;
		border-width: 1px 0 1px 1px;
		color: $fc;
		content: "\f071";
		display: inline-block;
		font-family: $ff;
		font-weight: 900;
		font-size: 13px;
		height: 23px;
		left: 0px;
		line-height: 21px;
		position: absolute;
		text-align: center;
		top: 0;
		width: 24px;
	}
	&:hover {
		transition: all 0.2s ease 0s;
		width: auto;
		padding-left: 30px;
		height: auto;
		overflow: visible;
		z-index: 99999;
	}
}

// Eventnavigation
#Rahmen{
position:relative;
}
#SidebarLeft #SecondLevelMenu{
	margin-bottom:0;
}

#stickybar{
	float:right;
}

#SecondLevelMenu {
	margin-bottom:15px;
	ul {
		list-style: none;
		padding-left: 0;
	}
	a {
		display: block;
		text-decoration: none;
	}
	#SecondLevelMenuRahmen {
		hyphens: auto;
		max-width: calc(var(--grid-width) * 3,5);
		width: 100%;
		
		ul {
			
			margin:0;
			
			#NavEventLI, li {
				> a {
					padding-bottom: 5px;
					font-weight: 500;
					line-height: 20px;
					&.Self {
						color: $fc;
					}
					
					&[name*="top"]{
						font-size:20px;
						text-transform:uppercase;
					}
				}
				#EventNav, ul {
					
					list-style:none;
					
					.InfoStep, li {
						list-style: outside none none;
						margin-bottom: 0;
						a {
							color: $fc;
							text-decoration: none;
							font-weight: normal;
							padding-bottom: 0;
							line-height: 24px;
							&.Self{
								
							}
							&:hover {
								font-weight: bold;
							}
						}
					}
				}
				#EventNav {
					> li {
						position: relative;
						&:last-child {
							margin-bottom: 0;
						}
					}
				}
			}
			#NavEventLI {
				> a.Self {
					text-decoration: none;
				}
			}
		}
	}
}

.MeFormListEvent {
	padding-left: 20px;
	.AttendanceCheckbox {
		float: left;
		margin-left: -20px;
	}
}
#PanesFormAfterMAQ{
	.MeFormListEventLi:nth-child(3){
		margin-bottom:50px;
	}
}

.MeFormListEventLi {

	.AttendanceCheckbox { 
		display: inline-block;
		margin-left: -19px;
		position: relative;
		top: 0px;
		input[type="radio"], input[type="checkbox"] {
			margin-right: 0px;
		}
	}
	.MeFormListEventDatenWithCheckbox {
		display: inline-block;
		vertical-align: top;
		width: 100%;
	}
	
	.MeFormListEventDaten h2 {
		font-size: 18px;
		padding-left: 10px;
		font-family:'Lato';
	}
	
	.MeFormEventForm{
		
		margin-left: 20px;
		margin-top: 20px;
		
	}
	
	&:last-child{
		margin-bottom:50px;
	}
	
}
#EventStartFormular, .EventConfirmationStart {
	.EventName, .EventAddText1, .EventDates, .EventAddText2, .EventLocation {
		padding-left: 0px;
	}
}

#EventAnmeldung{
	margin-bottom:0;
}

#HTMLAbAnswers {
	margin-bottom: 25px;
}
.Slideshow {
	margin-bottom: 15px;
	img {
		max-width: 100%;
		height: auto;
		width: 100%;
	}
}


#ZusatztextUnterDatenschutz,
#FormHTMLTextAboveCancallationStatement,
#FormHTMLTextBelowCancallationStatement,
#FormHTMLTextAbovePrivacyStatement,
#ZusatztextUeberDatenschutz,
#FormHTMLTextBelowPrivacyStatement,
#FormHTMLTextAboveObeyRules,
#FormHTMLTextBelowObeyRules,
#FormHTMLTextBelowPermit,
#FormHTMLTextAbovePermit {
	font-size: 13px;
	padding-left: 25px;
	padding-right: 25px;
	margin-bottom: 6px;
	margin-top: 6px;
	background-color: #efefef;
	padding-bottom: 18px;
	padding-top: 18px;
	* {
		font-size: 13px !important;
		line-height: 16px;
	}
}

.ErrorHint,
.invalid-feedback{
	color:white !important;
	text-shadow:0 0 5px rgba(0,0,0,0.5);
	text-align:left;
	width:100%;
	margin-bottom: 10px;
	font-size: 16px;
	
	> p{
		margin:0;
		display:inline-block;
	}
	
	&::before{
		content: "\f06a";
		font-family: 'Font Awesome 5 Free';
		font-weight:900;
		color:white;
		display:inline-block;
		margin-right: 5px;
	}
}

#GMap {
	width: 100%;
}
.Frage::after {
	content: "";
	clear: both;
	display: block;
}

#Attendance{
	.teilnehmerabfrage{
		> label {

			margin-right:5px;
			margin-bottom:10px;
			
			input{
				top: -1px;
			}
		}
		
		> select {
			display: block;
			margin-left:25px;
			width:90% !important;
		}
		
		select + .LabelRadiogroupInput{
			margin-top:10px;
		}
	}
}


.GroupFieldsetQuestions {
	.Frage {
		.LabelRadioGroup {
			font-weight: 500;
		}
		.LabelRadiogroupInputAlignleft, .LabelRadiogroupInputStandard {
			display: inline-block;
			margin-right: 23px;
			&:last-child {
				margin-right: 0;
			}
		}
		.RadioGroupFieldset {
			margin-bottom: 23px;
			padding-top: 10px;
			
			.LabelRadiogroupInput{
				> input.RadiogroupInput{
					top: 8px;
				}
			}
		}
		.LabelRadioGroupMultirowalignleft, .LabelRadioGroupAlignleft {
			display: block;
			width: 100%;
			clear: both;
			margin-right: 0;
			margin-bottom: 8px;
		}
		.RadioGroupFieldsetStandard {
			.LabelRadiogroupInputStandard {
				padding-right: 0;

			}
		}
		.LabelRadiogroupInputStandard, .LabelRadiogroupInputAlignleft {
			padding-left: 20px;
			&::after{content:"";clear:both;display:block;}
			.RadiogroupInput {
				float: left;
				margin-left: -21px;
				
			}
		}
	}
}

.GroupFieldsetRegistrator{
	.Frage {
		.RadioGroupFieldset {
			
			.LabelRadiogroupInput{
				> input.RadiogroupInput{
					top: 0px;
				}
			}
		}
	}
}

.LongDesFolded {
	margin-bottom: 25px;
	margin-top: 10px;
}
input[type="radio"], input[type="checkbox"] {
	margin-right: 9px;
}
#ZusatztextUnterDatenschutz:empty {
	display: none !important;
}
.LongDesHlFolded, .DisplayEventGroupHlFolded {
	border-bottom: 1px solid #EFEFEF;
	color: $fc;
	cursor: pointer;
	font-weight: normal;
	margin: 15px 0;
	padding: 4px 12px 13px;
	position: relative;
	min-height: 34px;
	&[title="Text verbergen"] {
		color: $fc;
	}
	.ToggleLongDesIcon, .ToggleEventDisplayGroupIcon {
		background-color: #FFF;
		color: $fc;
		height: 26px;
		line-height: 0;
		position: absolute;
		right: 16px;
		top: 3px;
		width: 14px;
		&.fa-chevron-right, &.fa-toggle-right {
			&::after, &::before {
				content: "";
				background-color: #AAA;
				display: inline-block;
				width: 2px;
				height: 16px;
				position: absolute;
				right: 0;
			}
		}
		&.fa-chevron-right, &.fa-toggle-right {
			&::before {
				transform: rotate(45deg);
				bottom: 0;
			}
		}
		&.fa-chevron-right, &.fa-toggle-right {
			&::after {
				transform: rotate(135deg);
				top: 0;
			}
		}
		&.down {
			margin-top: -4px;
			transform: rotate(90deg);
		}
	}
}

#calroot {
	width: 251px;
	height: 227px;
	padding: 12px 11px;
	border: 0;
	@include box-shadow(0 0 6px rgba(0, 0, 0, 0.41), 0px 0px 0px 1px rgba(0, 0, 0, 0.11));
	@include border-radius(2px);
	#calhead {
		margin-bottom: 13px;
		#calprev, #calnext {
			width: 20px;
			height: 20px;
			background: unset;
			&::after {
				content: "\f053";
				font-family: $ff;
				font-weight: 900;
				text-align: center;
				display: block;
				padding-top: 3px;
				box-sizing: border-box;
			}
		}
		#calnext::after  {
			content:"\f054";
		}
		#caltitle {
			width: calc(100% - 40px);
			select {
				font-size: 13px;
				border: 0;
				padding-right: 6px;
				&#calmonth {
					margin-right: 5px;
				}
			}
		}
	}
	.calweek a {
		width: 29px;
		height: 23px;
		line-height: 24px;
		margin-left: 0px;
		margin-right: 4px;
		margin-bottom: 2px;

		&:last-child {
			margin-right: 0px;
			margin-bottom: 0px;
		}
	}
	#caldays {
		border-bottom: 0px;
		height: auto;
		span {
			width: 29px;
			margin-right: 4px;
			margin-bottom: 2px;
			height: 23px;
			line-height: 24px;
			&:last-child {
				margin-right: 0px;
			}
		}
	}

	#caldays span, .calweek a {
		&:nth-child(7), &:nth-child(6) {
			color: $fc;
			&#calcurrent {
				color: $fc;
			}
		}

	}
	#caldays span, .calweek a {
		&.caloff {
			&:nth-child(7), &:nth-child(6) {
				color: $fc;
			}
		}
	}


}
#CalendarSmallCage, .calendar_cage {
	.info {
		padding: 10px 20px;
	}
	div#nav {
		background-color: #FFF;
		color: $fc;

		#prev_month, #next_month {
			background: none;
			border: none;
			height: auto;
			border-radius: unset;
			position: relative;
			& > form {
				position: relative;
				z-index: 100;
			}
			&::after {
				font-family: $ff;
				font-weight: 900;
				display: inline-block;
				height: 25px;
				top: 3px;
				left: 11px;
				position: absolute;
				z-index: 99;
				color: $fc;
			}
		}
		#prev_month::after {content: "\f053";}
		#next_month::after {content: "\f054";}

		#CalendarSmallPrevMonth, #CalendarSmallNextMonth, #CalendarLargePrevMonth, #CalendarLargeNextMonth {
			height: 25px;
			width: 20px;
		}

		#week_days_header {
			width: 100%;
			tr td {
				color: $fc;
				height: 40px;
				font-weight: 500;

			}
		}
	}
	#timetravel {
		font-size: 18px;
		color: $fc;
	}
	table {
		td {
			width: 40px;
			height: 31px;
			background-color: #fff;
			border: 0;
			border-right: 1px solid #FFF;
			border-bottom: 1px solid #FFF;
			&.events {
				background-color: $mc-1 !important;
				color: #FFF !important;
			}
		}
	}
}
.InputfieldAlignleft {
	width: 100%;
}
#Gesamt {
	.TextInput, .EmailInput, .UrlInput, .NumberInput, .CurrencyInput, .TextareaInput, .SelectInput, .FileInput, #SucheEingabe, .customfile {
		width: 65%;
	}
}
/*#FormTabs #FormSteps .FormStep {
&::after {
content: "";
position: absolute;
right: 12px;
top: -1px;
width: 100%;
height: 4px;
background-color: #000;
right: 0%;
}
&::before {
content: "";
display: block;
height: 30px;
width: 30px;
background-color: #FFF;
border-radius: 100%;
position: absolute;
top: -14px;
left: 46%;
text-align: center;
color: #fff;
z-index: 99999;
padding-top: 4px;
box-sizing: border-box;
border: 4px solid #000;
}
&:first-child::after {
left: 46%;
}
&:last-child::after {
left: -50%;
}
a {
margin-top: 32px;
}
}*/

// Captcha
.CaptchaSpam {
	border: 1px solid #efefef;
	padding: 20px 30px 25px;
	&::after {content:"";clear:both;display:block;}
	#CaptchaImage {
		margin-left: 45%;
	}
	.LabelTextInput.LabelTextCaptchaSpam {
		width: 90%;
		margin-right: 0px;
		&::after{content:"";clear:both;display:block;}
		#CaptchaQuestion {
			width: 50%;
			display: inline-block;
			float: left;
			line-height: 40px;
		}
		#CaptchaSpamResult {
			width: 50%;
			box-sizing: border-box;
			margin: 0px;
			float: left;
		}
	}
	.CaptchaSpamInfo {
		width: 10%;
		float: left;
		font-size: 13px;
		padding: 0 10px;
	}
}

// *************************************************** Kleine Formatierung
#RegHLSummery, #DataSummeryParticipation, #DataSummeryRegistrator, #DataSummeryParticipant, #DataSummeryRegistratorQuestions, #lpPageFormElementPermit, #DataSummeryEvents, #DataSummeryRepresentative,    {margin-bottom: 50px;}
#DataSummeryParticipation, #DataSummeryParticipant, #DataSummeryParticipantQuestions {h3 {margin-bottom: 10px;}}
#DataSummeryParticipationYes, #DataSummeryParticipationNo, #DataSummeryParticipationYesAddP {font-weight: normal;}
.GroupFieldsetQuestions {h3 {margin-bottom: 15px;}}
div >, form >  { .GroupFieldset h3 {font-weight: 500;margin-bottom: 10px;padding-bottom: 9px;}}
.PanesInfo {margin-bottom: 20px;}
// *************************************************** Webseitenspezifische Einstellungen
a {
	color: $fc;
	font-weight: 500;
	text-decoration: none;
	&:hover, &:focus {
		text-decoration: none;
	}
}
#Header, #Footer {
	width: 100%;
}
#FooterContent, #Inhalte, #Navigation-Content, #TopMenuRahmen, #ClickpathNaviRahmen {
	max-width: $mw;
	width:100%;
	margin: 0 auto;
}

#Inhalte {
	margin-bottom:0;
	display:flex;
}

#Navigation{
	top:20px;
	position:fixed;
	display:flex;
	justify-content:center;
	width:100%;
	background:white;
	z-index:2;
}

.Inhalt {
	max-width: calc(var(--grid-width) * 5);
	width:100%;
	padding: 100px 60px 80px 50px;
	order: 2;
	
	background: rgb(13,54,145);
	background: -moz-linear-gradient(180deg, rgba(13,54,145,1) 0%, rgba(125,49,83,1) 50%, rgba(228,44,26,1) 100%);
	background: -webkit-linear-gradient(180deg, rgba(13,54,145,1) 0%, rgba(125,49,83,1) 50%, rgba(228,44,26,1) 100%);
	background: linear-gradient(180deg, rgba(13,54,145,1) 0%, rgba(125,49,83,1) 50%, rgba(228,44,26,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0d3691",endColorstr="#e42c1a",GradientType=1);
	
	.PanesInfoJumpTarget{
		max-width:670px;
		width:96%;
		line-height:20px;
		margin-bottom:50px;
		
		h2{
			border-bottom:dotted 1px $fc;
			padding-bottom:20px;
			margin-bottom:20px;
		}
		
		.HTMLtext span{
			color:white !important;
		}
		
		&#LongDescription5,
		&#LongDescription6{
			img{
				width:100%;
			}
		}
	}
}

.Sidebar {
	order: 1;
	width: calc(var(--grid-width) * 2);
	margin-right:2px;
}

.Sidebar {
	padding: 100px 60px 80px 100px;
	
	background: rgb(13,54,145);
	background: -moz-linear-gradient(180deg, rgba(13,54,145,1) 0%, rgba(125,49,83,1) 50%, rgba(228,44,26,1) 100%);
	background: -webkit-linear-gradient(180deg, rgba(13,54,145,1) 0%, rgba(125,49,83,1) 50%, rgba(228,44,26,1) 100%);
	background: linear-gradient(180deg, rgba(13,54,145,1) 0%, rgba(125,49,83,1) 50%, rgba(228,44,26,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0d3691",endColorstr="#e42c1a",GradientType=1);
}

.Leftbar, .Sidebar{
	color:$fc !important;
}

.Leftbar{
	display:none;
}
#SidebarEventserieFormular {
		/*display: flex;
		flex-direction: row;
		justify-content: center;*/
}

.ListEventName {
	a {
		text-decoration: none;
		color: $fc;
	}
}
.GroupFieldset {
	margin-bottom: 20px;
}
.GroupFieldset, #EventStartFormular, .FormTopHintDoubleOptIn, #TextTopFormular, #Clickpath, #lpPageFormElementPrivacy{
	
	width: 100%;
}
.GroupFieldsetInvoiceAddress {
	display: none;
}
.GroupFieldsetInvoiceAddress, .GroupFieldsetDeliveryAddress {
	margin-top: 0px !important;
}
.DateSeperator, .TimeSeperator {
	margin-right: 4px;
}

.Dateinput {
	&::after {
		content:"";
		clear:both;display:block;
	}
}
.DateInput, .DateSelectInput {
	margin-bottom: 4px;
}
.DateInput.DateinputCalender {
	float: left;
margin-right: 5px;
}
#Navigation {
	#HauptMenu {
		padding-bottom:7px;
		ul {
			
			li {
				&.mainMenue > a {
					display: block;
					text-decoration: none;
					color: $mc-1;
					line-height: 20px;
					font-weight: 400;
					font-size: 1rem;
					font-style: normal;
					letter-spacing: 0px;
					text-transform: uppercase;
					padding: 0 1.65rem;
					
					&:hover {
						text-decoration: underline;
					}
				}
			}
		}
	}
}
.login-failed {
	display: block;
	padding: 8px 14px;
	background-color: #ec7f7f;
	border: 1px solid #dd5e5e;
	border-radius: 3px;
	color: $fc;
	font-size: 14px;
	padding-left: 36px;
	position: relative;
	&::before {
		content: "!";
		display: block;
		position: absolute;
		left: 0;
		padding: 0 14px;
		font-size: 32px;
		top: 5px;
	}
}

.SidebarHtml, #PrintForm, #LogInOut, #CalendarSmallHome {
	margin-top: 0px;
	margin-bottom: 23px;
}
input {
	&[type="text"], &[type="email"], &[type="password"], &[type="date"], &[type="number"], &[type="url"] {
		-webkit-box-flex: 1;
		-webkit-flex-grow: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
		height: 34px;
		height: 2.125rem;
		padding-right: 60px;
		padding-right: 3.75rem;
		border-radius: 0;
		border: 1px solid $fc;
		border: .0625rem solid $fc;
		box-shadow: none;
		outline: none;
		color: $fc;
		padding-top: 5px;
		padding-top: .3125rem;
		padding-bottom: 5px;
		padding-bottom: .3125rem;
		padding: .375rem .75rem;
		background:transparent;
		&.invalid {
			box-shadow: 0px 0px 1px 1px #FFF inset, 0px 0px 7px -2px #ff7474 inset, 0px 0px 2px 0px #ff6868 !important;
			border-color: #FF5B5B;
			border-radius: 3px;
		}
	}
}
.SelectInput, .DateSelectInput, .TextInput {
	@extend input[type="text"];
}
input[type="number"] {
    padding-right: 3px;
}
textarea {
    height: auto !important;
}
.SelectInput {
	padding-top: 5px;
	padding-bottom: 5px;
}
.TextareaInput {
	border: 0.0625rem solid $fc;
	border-radius: 0;
	padding-top: 5px;
	padding-top: 0.3125rem;
	padding-bottom: 5px;
	padding-bottom: 0.3125rem;
	padding: 0.375rem 0.75rem;
	margin-bottom: 2px;
}
.SidebarHtml, #PrintForm, #LogInOut, #CalendarSmallHome {
	margin-top: 0px;
	margin-bottom: 23px;
}
.EventKontakt  {
	.KontaktHTMLText {
		> {
			p {
				&:first-child {
					margin-bottom: 23px;
					border-bottom: 1px dashed $mc-1;
					padding-bottom: 13px;
				}
				&:last-child {
					margin-top: 23px;
					border-top: 1px dashed $mc-1;
					padding-top: 13px;
				}
			}
			.contactImage {
				margin-bottom: 12px;
			}

		}
		.sb-c-imagetopofname, .sb-c-imagetopofdata {
			margin-top: 12px;
			margin-bottom: 12px;
		}
	}
}
.FieldPriceCategory {
	margin-top: 10px;
}
.HTMLtextBelow {
	margin-top: 26px;
	padding-top: 8px;
	border-top: 2px solid #FFF;
}
.Frage.FieldPListPermit {
	input {
		position: relative;
		z-index: 999;
		left: 15px;
	}
	.LabelCheckboxInput {
		padding-left: 40px;
		margin-left: -22px;
	}
}
.ParticipantListHQ {
	background-color: $mc-1;
	color: #FFF;
	padding: 3px 34px;
}
.PListDesHTMLtop {
	margin-bottom: 16px;
}


.LabelTextInput, .LabelRadioGroup, .LabelTextarea, .LabelDateInput, .LabelDatetimeInput, .LabelTimeInput, .LabelSelect, .LabelFileUpload {
	line-height: 20px;
	min-height: 30px;
	padding-top: 5px;
}

.QGroupHtmlTop, .QGroupHtmlBot {
	clear: both;
	margin-bottom: 8px;
	margin-top: 8px;
}
.Formular h3, #Answers h3, .Sidebar h2, .AnmeldungTagesordnung > h2, #GoogleMapsConf h2, div[id*="FktAddresses"] h2, .PBDNotificationObligationRevocation h3 {
	font-size: 1.5rem;
	font-weight: 500;
}
.Formular h3, #Answers h3, .AnmeldungTagesordnung > h2,  #GoogleMapsConf h2, div[id*="FktAddresses"] h2 {
	border-bottom: 1px dotted #e5e5e5;
	margin-bottom: 20px !important;
	display: inline-block;
	width: 100%;
}

#PanesFormSummery h2{
	margin-bottom:25px;
}

#Answers {
	margin-bottom: 25px;
	h3 {
		margin-top: 12px;
	}
	.AnswerPerson,
	.AdditionalQuestionGroup{
		margin-bottom: 50px;
	}
	.AnswerAntwortValue {
		font-weight: 400;
	}
	.AnswerAntwortLabel {
		display: inline-block;
		width: 35%;
		margin-bottom: 4px;
	}
	.AnswerAntwortHL {
		font-weight: 600;
	}
}

.EventConfirmationStart,
#CalendarHint,
#qrcode,
.PBDNotificationObligationRevocation,
#lpPageFormElementPrivacy,
#DsEscorts{
		margin-bottom:50px;
	div > h3{
		font-size: 18px;
	}
}

#Confirmation {
	

	
	> h2 {
		margin-bottom: 25px;
	}
	
	h3.ConfEventName{
		font-size: 1.25rem;
		font-weight: 500;
	}
	.ConfEventName,
	.ConfEventDates{
		margin-bottom:0;
	}
}

#DSMultiEventList{
	
	h5.DsEventname{
		font-family:'Lato';
		font-size: 18px;
	}
}

.Sidebar, .Leftbar {
	color: #22272a;
	
	.SidebarHtml, #LogInOut, .CalendarSmall {
		padding-top: 10px;
		position: relative;
		
		h2 {
			font-family:Lato;
			text-transform: uppercase;
			margin-bottom: 15px;
			display: inline-block;
			position: relative;
			padding-top: 10px;
			padding-bottom:5px;
			font-size: 20px;
			font-weight: 500;
		}
	}
}

#NavEventUL {
	margin-top: 23px;
	border-top: 4px solid #E3E3E3;
	padding-top: 10px;
	position: relative;

}
#NavEventLI {

	position: relative;
	
	> a {
	margin-bottom: 15px;
	display: inline-block;
	position: relative;
	padding-top: 10px;
	margin-top: -14px;
		
		color: #22272a;
		font-size: 18px;
		font-weight: 400;
	}
}
.SidebarHtml #SidebarBuchungsnr {
	width: 100%;
	margin-bottom: 4px;
	margin-top: 3px;
}

#ObeyRulesFrage, .Frage.FieldDatenschutz, #PermitFrage, .Formular > .PflichtfeldHinweis {
	margin-bottom: 23px;
}
.Formular .PflichtfeldHinweis {
	margin: 10px 0px 26px;
}

.VList {
	list-style: none;
}
#Header {
	position:fixed;
	background:#fff;
	z-index:2;
	top:0;
	
	.header-area{
		margin:auto;
	}
	
	#LocaleSwitch {
		float: left;
		background-color: #3c506e;
		height: 40px;
		width: 120px;
		position: relative;
		margin-left: -14px;
		margin-top: -8px;
		&::before {
			content: "Sprache:";
			display: block;
			color: #FFF;
			text-transform: uppercase;
			font-size: 10px;
			font-weight: 500;
			padding: 16px 20px 13px;
		}
		ul {
			position: absolute;
			top: 12px;
			right: 0;

			li, li a {
				color: #FFF;
				font-size: 10px;
				font-weight: 500;
				text-transform: uppercase;
			}
			li {
				height: 24px;
				display: inline-block;
				width: 40px;
				background-color: #3c506e;
				padding: 0 11px;
				margin-left: 76px;

			}
			li {
				opacity: 0;
				visibility: hidden;
				height: 0;
				transition: all 0.2s ease 0s;
				padding-top: 5px;
			}
			&:hover {
				li {
					opacity: 1;
					visibility: visible;
					height: 24px;
				}
			}
		}
	}
}
:lang(de) #LocaleSwitch ul li[title="Deutsch"],
:lang(en) #LocaleSwitch ul li[title="English"],
:lang(fr) #LocaleSwitch ul li[title="français"] {
	padding-left: 2px;
	position: relative;
	top: -1px;
	opacity: 1;
	visibility: visible;
	height: 24px;
	&::after {
		content: "";
		display: inline-block;
		background: url(/media/images/language-block.png) no-repeat 0 0;
		position: absolute;
		right: 10px;
		top: 9px;
		width: 10px;
		height: 7px;
	}

}

.AttendanceCheckbox {
	left: 0px;
	position: relative;
	top: 25px;
}

.OVList.OVListIconSet {
	li {
		margin-bottom: 1.5rem;
		padding-bottom: 1.5rem;
		border-bottom: 1px solid #8c8c8c;
		.OVListEventIcon, .OVListEventDaten, .OVListEventPicture {
			float: left;
		}
		.OVListEventIcon {
			width: 5%;
		}
		.OVListEventDaten {
			width: 70%;
			.OVListEventname {
				color: $mc-1;
				font-size: 1.5625rem;
				margin-bottom: 1rem;
			}
		}
		.OVListEventPicture {
			width: 25%;
		}
	}
}
#Zahlungspflicht {
	margin-top: 20px;
	margin-bottom: 20px;
}
.EventPictureDiv {
	margin-bottom: 30px;
}

#LogIn {
	input {
		&[type="text"], &[type="password"] {
			width: 100%;
		}
	}
}
#EventStartFormular{
	.EventName {
		margin-bottom: 0px !important;
		border-bottom: 0px;
	}
	.EventDates{
		margin-bottom:0;
	}
}
.FormSalutation2.Salutation2 {
    margin-top: 12px;
}
.FormSalutation.Salutation {
	margin-top:20px;
 	margin-bottom: 12px;
	
	font-family:'Trim';
	font-size: 20px;
	line-height: 20px;
}
#SidebarEventList li {
	text-decoration:none;
	position:relative;
}
#SidebarEventList li .OVListShortD {
	display:none;
}
#SidebarEventList li:hover .OVListShortD {
	display:block;
	position:fixed;
}

#EMailFrage, #EMailFrageDecline {
	margin-bottom: 35px;
}
#Footer {
	
	background-color: #fff;
	padding-top: 3rem;
	
	#FooterContent {
		padding-top: 16px;
		padding-bottom: 18px;
		position:relative;
		
		#FooterContentText{
			
			> div{
				width:100%;
			}
			
			#metal--footer{
				
				display:flex;
				flex-direction:row;
				padding-bottom: 3rem;
				
				h4{
					font-family: "Lato", sans-serif;
					font-size: 1.5rem;
					color: #003d60;
				}
				
				.logos{
					width:16.666666%;
					
					img{
						max-width: 65px;
						width: 100%;
						
						&:first-of-type{
							max-width:60%;
							margin-bottom:20px;
						}
					}
					
				}
				.navi{
					width:16.666666%;
					
					h4{
						margin-bottom: 1rem;
						
					}
					
					ul{
						list-style: none;
						margin-bottom: 1rem;
						padding-left:0;
						
						li{
							line-height: 1.5rem;
							a{
								font-weight:400;
								color:$mc-1;
								font-size:1rem;
								
								&:hover{
									text-decoration:underline;
								}
							}
						}
					}
					
				}
				.social{
					width:66.6666666%;
					
					h4{
						margin-bottom: 1rem;
					}
					
					ul{
						display: flex;
						gap: .5rem;
						list-style: none;
						padding: 0;
						
						li{
							background: #fff;
							border: 1px solid #318eca;
							height: 60px;
							width: 60px;
							
							&:hover{
								background-color: #318eca;
								border-color: #318eca;
								
								img{
									filter: brightness(0) invert(1);
								}
							}
							
							a{
								align-items: center;
								display: flex;
								height: 100%;
								justify-content: center;
								width: 100%;
							}
							
							img{
								max-height: 38px;
								max-width: 38px;
							}
						}
					}
				}
				
			}
			
			#powered-by{
				text-align:right;
				font-size: 1.25rem;
				font-weight:400;
				color: #333;
				
				img{
					max-width:80px;
					display:inline;
					margin-left:5px;
					margin-right:5px;
					margin-bottom:5px;
				}
				
				a{
					font-size: 1.25rem;
					font-weight:400;
					
					&:hover{
						color:#cd1536;
					}
				}
				
			}
		}
	}
		
	a {
		color: #333;
		text-decoration: none;
		&:hover {
			color: $mc-1;
		}
	}
}

.OVList {
	> li {
		padding-bottom: 20px;
		padding-left: 0px;
		padding-right: 12px;
		position: relative;
		.OVListEventDaten {
			.OVListEventname {
				transition: all 0.2s ease 0s;
				font-size:20px;
				margin-bottom: 0;
				display: inline-block;
				a {
					color: $mc-1;
					transition: all 0.2s ease 0s;
					font-size:1.25rem;
					font-weight:500;
				}
				&:hover {
					a {
						color: $mc-1 !important;
					}
				}
			}
			.OVListDate{
				margin-bottom:0;
			}
		}
	}
}
#FormularBuchungsnummer {
	padding: 23px 37px 32px;
	background-color: #f9f9f9;
	margin-bottom: 23px;
	display: inline-block;
	width: 100%;
	margin-top: 40px;
	
	#BNtop {
		margin-bottom: 6px;
		.bn-title {
			font-weight: normal;
		}
	}
	#Buchungsnummer {
		#EingabeBN {
			.BuchungsnrLabel {
				
			}
			#Buchungsnr {
				width: 380px;
				height: 40px;
				line-height: 27px;
				display: inline-block;
				border-top-left-radius: 3px;
				border-bottom-left-radius: 3px;
			}
		}
		#WeiterBN {
			.submitBuchungsnummer {
				height: 40px;
				margin-left: 3px;
				line-height: 27px;
				font-weight: 500;
				padding-left: 34px;
				padding-right: 34px;
				border-top-left-radius: 0px;
				border-bottom-left-radius: 0px;
				border:0;
			}
		}
	}
}

#OffeneVeranstaltungen{
	margin-top:40px;
	
	.textOVTopFound{
		margin-bottom:25px;
	}
}
#HeaderContent{
	width:100%;
}
#NavigationTop {
		position: relative;
		padding:0;
		z-index:110;
		width: 100%;
	
		#TopMenuRahmen{
			
		}
	
		#TopMenu {
			text-align: right;
			ul {
				&::after {content:"";clear:both;display:block;}
				display: inline-block;
				margin-bottom:0;
				display:flex;
				justify-content:flex-end;
				li {
					margin-left: 30px;
					a {
						color: $mc-1;
						font-size:14px;
						font-weight: 400;
						&:hover {
							color: $mc-1;
						}
					}
				}
			}
		}
	}
.customfile {
	background: #fff;
	width: 65%;
	border: 1px solid #bababa;
	@include border-radius(0px);
	.customfile-feedback {
		color: #666666;
		&-populated {
			color: #666666;
			padding-left: 23px;
			font-size: 14px;
			font-weight: normal;
		}
	}
	.customfile-feedbacksize {
		color: #666666;
		padding: 12px 28px;
		padding-right: 80px;
		&:empty {
			padding: 0px;
		}
	}
	.customfile-button {
		width: auto;
		font-size: 1rem;
		color: #fff;
		background-color: $mc-1;
		cursor: pointer;
		display: inline-block;
		padding: 6px 18px;
		border-radius: 3px;
		border: 0;
		transition: all 0.2s ease 0s;
		font-weight: 500;
		&:hover {
			opacity: 0.8;
		}
	}
}
.InputfieldAlignleft {
    width: 100%;
	margin-bottom: 3px;
}
#InhaltCalendar {
	float: none;
	width: 100%;
	#CalendarLarge {
		width: 100%;
	}
}

.range{
	width: 12%;
}
.slider, .slideralignleft {
	margin-top: 16px;
}
.escortData {
    border: 1px solid #efefef;
    padding: 23px 30px 20px;
    border-top: 1px solid #efefef !important;
	
		> fieldset{
			> h3{
				font-size: 18px;
			}
		}
}
.Frage .HTMLtextBelow.HTMLtextBelowAlignleft {
    margin-top: 0px;
    padding-left: 25px;
    padding-top: 0px !important;
    line-height: 16px;
}
// Sidebar Login-Menu ###########################################
.LogInButton {
	&::after{content:"";clear:both;display:block;}
	#LogInAuto, #LogInSubmit {
	}
	#LogInAuto {
		font-size: 14px;
		margin-top: 6px;
		#AutoLogin {
			position: relative;
			top: 2px;
		}
	}
	#LogInSubmit {
		margin-top: 8px;
	}
}

.LogInHint {
	font-size: 12px;
	position: relative;
	line-height: 18px;
	margin-top: 10px;
	> a{
		color:#333;
		
		&:hover{
			color:$mc-1;
		}
	}
}
// Sidebar Login-Menu *******************************************

// Mehrsprachenschalter 
#LocaleSwitch {
	float: none;
	margin-bottom: 23px;
}

// Top Navigation
.shariff {
    margin-top: 32px;
}
.AlternativeEvents {
li {
		margin-bottom: 8px;
	}
}
.Sidebar #GMapRahmen {
    margin-top: 18px;
}
#DataSummeryEvents {
	border: 1px solid #efefef;
	padding: 20px 30px 30px;
	> h3 {
		
	}
	ul {
		li {
			border-bottom: 0px;
			margin-bottom: 12px;
			h3 {
				border-bottom: 0px;
				padding: 0;
				margin: 0px !important;
				display:block;
			}
		}
	}
}
.ConfEventData {
    margin-top: 12px;
}


#Clickpath {
	display: inline-block;
	margin-top: 0px;
	border-radius: 3px;
	width: 100%;
	
	.breadcrumb{
		background:transparent;
		margin-bottom: 0;
		padding:0;
		margin-top: 18px;
	}
	
	
	.clickpath_link {
		margin-right: 12px;
		color: #808080;
		&:last-child {
			margin-right: 0px;
			&::after {
				display: none;
			}
		}
		&::after {
			content: "\f105";
			margin-left: 12px;
			font-family: $ff;
			font-weight: 900;
			color: #333;
		}

	}
	a {
		font-size: 12px;
		font-family: $ff-1;
		font-weight: 500;
		color: #333;
		display: inline-block;
		padding-top: 2px;
		padding-bottom: 2px;
	}
}
#barcode, #grcode, #qrcode {
    margin-bottom: 50px;
}
#GMapRahmen {
    margin-top: 18px;
}
#GoogleMapsConf {
	h2 {
		margin-bottom: 12px;
	}
}

.AnmeldungTagesordnung, div[id*="FktAddresses"] {
	h2 {
		font-weight: normal;
		margin-bottom: 16px;
		padding-bottom: 9px;
	}
}
.FieldSalutation .RadioGroupFieldset {
    padding-top: 4px;
}
#CalendarSmallHome #CalendarSmallCage table {
	.WeekDay5,.WeekDay6 {
		background-color: #efefef;
		color: #868686;
	}
	.WeekDay6 {
		background-color: #dedede;
	}
}
.FieldSubTypeAlignleft {
	.customfile {
		width: 100% !important;
	}
}

.css-trafficlight {
	display: inline-block;
	width: 60px;
	height: 20px;
	border-radius: 4px;
	position: relative;
	background-color: #585858;
}

.FreePlaces{

	display: flex;
	background: rgba(0, 0, 0, 0.1);
	padding: 5px 10px;
	border-radius: 5px;
	font-size: 10px;
	text-transform: uppercase;
	font-weight: 500;
	color: rgba(0,0,0,0.7);
	
	> span{
		margin-left:10px;
	}
	
	.css-trafficlight {
			display: inline-block;
			width: 60px;
			height: 20px;
			border-radius: 4px;
			position: relative;
			background-color: rgba(0,0,0,0.5);
			align-self: center;
			box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.8);
	}

	.css-trafficlight span {
			content: "";
			color: white;
			position: absolute;
			border-radius: 14px;
			width: 16px;
			height: 16px;
			left: 2px;
	}    

	.trafficlightrot span {
			top: 2px;
			left: 42px;
			background-color: #F61616;
			box-shadow: 0 0 14px #F61616;
	}

	.trafficlightgelb span {
			top: 2px;
			left: 22px;
			background-color: #FCD424;
			box-shadow: 0 0 14px yellow;
	}

	.trafficlightgruen span {
			top: 2px;
			left: 2px;
			background-color: #0FE80F;
			box-shadow: 0 0 14px #0FE80F;
	}
}


/* Termine Kalender */
.EventAppointmentMonth {
	margin-top: 30px;
	&::after{content:"";clear:both;display:block;}
	> div:first-child[id^=EventAppointmentMonth]  {
		width: 50%;
		padding-right: 10px;
		border-right: 1px solid #AAA;
		.EventAppointmentMonthHeader {
			&::after {clear:"";clear:both;display:block;}
			padding: 7px 0;
			padding-top: 0px;
			.EventAppointmentMonthPrev, .EventAppointmentMonthNext {
				.UpdateEventAppointmentsMonth {
					border: 4px solid #FFF;
					background-color: #CD1536;
					border-radius: 100px;
					width: 40px;
					height: 40px;
					color: #FFF;
					font-weight: 500;
					@include box-shadow(0px 0px 3px rgba(0, 0, 0, 0.4));
				}
			}
			.EventAppointmentMonthCenter {
				line-height: 40px;
				color: #333;
				font-weight: 500;
				font-size: 23px;
			}
		}
		.EventAppointmentMonthTable {
			button {
				&.ActiveAppointmentsByDay {
					background-color: RGBA(205, 21, 54, 0.1);
					color: #cd1536;
					padding: 0.25rem;
					border-radius: 100%;
					transition: all .3s ease 0s;
					border: 0;
					&.SelectedEventAppointmentDay {
						background-color: #cd1536;
						color: #FFF;
					}}}
			thead {
				tr {
					th {
						color: #555555;
						&.EventAppointmentKW {

						}
						&.EventAppointmentKW {
							color: #cd1536;
						}}}}
			tbody {
				tr {
					th {
						&.EventAppointmentKW {
							color: rgba(205, 21, 54, 0.5);
						}
					}
					td {
						color: #a6a6a6;
						height: 40px;
						width: 40px;
						padding: 1px;
						span {
							padding: 0.25rem;
							height: 40px;
							width: 40px;
							display: table-cell;
							vertical-align: middle;
							text-align: center;
						}
						button {
							height: 100%;
							width: 100%;
							display: table-cell;
							vertical-align: middle;
							text-align: center;
						}}}}}}
	div[id^=EventAppointmentMonthData] {
		text-align: left;
		border-left: 1px solid #AAA;
		position: relative;
		left: -1px;
		.EventAppointmentsByDayHeader {
			border-bottom: 1px solid #AAA;
			color: #333;
			font-weight: 500;
			font-size: 23px;
			padding: 0px 23px 14px;
		}
		ul {
			padding-left: 0px;
			list-style: none;
			border-top: 0px;
			li {
				padding-left: 23px;
				padding-top: 5px;
				p.EventappointementDates {
					&::before {
						content: "\f017";
						font-family: 'Font Awesome 5 Free';
						margin-right: 7px;
						margin-left: -1px;
					}
				}
				.EventappointementLabel {
					font-weight: 500;
				}
				.EventappointementDates {
					color: #777;
				}
			}
		}
	}
}
.SelectedEventAppointment {
    border-bottom: 2px solid #AAA;
    padding: 10px 0;
}
.SelectedEventAppointments {
	list-style: none;
	.SelectedEventAppointment {
		.EventappointementDates {
			&::before {
				content: "\f017";
				font-family: 'Font Awesome 5 Free';
				margin-right: 7px;
				margin-left: -1px;
			}
		}
	}
}
.EventAppointmentMonth .EventAppointmentMonthTable td.Appointments span {
	border-radius: 100px;
}

#ModalHideInfos{
	
	.modal-content{
		background:#103088;
	}
	
	#HideInfos {
		width: 600px;
		left: calc(50% - (600px / 2));

		display: flex;
		align-items: center;
		justify-content: center;
		background:transparent;

		#preconfirmation, #Buchungsnr {
			margin-right: 3px;
			height: 34px;
		}
	}
}
#exposeMask {
	background-color: #000;
}


// NEWSLETTER Abmeldung - START
#anmelden + #NewsletterAbmeldung {
	background-color: #ececec;
	padding: 23px 23px 20px;
	border-radius: 7px;
	border: 1px solid #d9d9d9;
}
#NewsletterAbmeldung {
	margin-top: 12px;
	#abmelden {
		.newsletterTitle {
			font-size: 23px;
			margin-bottom: 12px !important;
			line-height: 28px;
			font-weight: 500;
			border-bottom: 1px solid #d7d7d7;
			padding-bottom: 12px;
			color: #333;
		}
		.newsletterDescription {
			margin-bottom: 12px;
		}
		
		#EMailFrageAbsage {
			background-color: #ddd;
			border: 1px solid #efefef;
			padding: 6px 6px 6px 18px;
			border-radius: 7px;
			.LabelTextInput {
				font-weight: 500;
				line-height: 20px;
				min-height: 30px;
				padding-top: 5px;
			}
		}
		.PflichtfeldHinweis {
			margin-top: 8px;
			display: block;
			margin-bottom: 8px;
			font-size: 12px;
		}
		.NewsletterAbsageBottom {
			margin-bottom: 0px;
		}
	}
}
// NEWSLETTER Abmeldung - END
#iconbar, #FormularSearch {
    display: none;
}

// Trafficlight - START
.css-trafficlight {
	display: inline-block;
	width: 60px;
	height: 20px;
	border-radius: 4px;
	position: relative;
	background-color: #585858;
}

.css-trafficlight span {
	content: "";
	color: white;
	position: absolute;
	border-radius: 14px;
	width: 16px;
	height: 16px;
	left: 2px;
}

.trafficlightrot span {
	top: 2px;
	left: 42px;
	background-color: #F61616;
	box-shadow: 0 0 14px #F61616;
}

.trafficlightgelb span {
	top: 2px;
	left: 22px;
	background-color: #FCD424;
	box-shadow: 0 0 14px yellow;
}
.trafficlightgruen span {
	top: 2px;
	left: 2px;
	background-color: #0FE80F;
	box-shadow: 0 0 14px #0FE80F;
}
// Trafficlight - END
div[class*="_popover"] .btn, div[class*="_modal"] .btn {
	font-size: 9px;
	padding: 6px;
	width: 23px;
	height: 23px;
	line-height: 0;
	background-color: #fff;
	border:0;
}

div[class*="endOfQuestion"] {
	display: inline-block;
	margin-left: 5px;
	top: -2px;
	
	.InfoButtonIcon{
		color:red;
		font-size:12px;
	}
}

div[class*="afterLabel"] {
	display: inline-block;
	margin-right: 10px;
}

div[class*="beforeLabel"] {
	display: inline-block;
	margin-right: 10px;
	float: left;
}

div[class*="beforeQuestion"] {
	display: inline-block;
	float: left;
}

.LabelTextInput,.LabelRadioGroup,.LabelTextarea,.LabelDateInput,.LabelDatetimeInput,.LabelTimeInput,.LabelSelect,.LabelFileUpload {
	width:30%;
	margin-right:2%;
	display:block;
	float:left;
}
.endOfQuestion_popover_right,
.endOfQuestion_modal{
    margin-right: -30px;
    position: relative;
    left: -36px;
	.icon{
		display:block;
	}
}

#ParticipantListPane #ParticipantsList{
	
	li.PListFirstInColumn{
		float:none;
		width:100%;
		padding:10px;
		background-color: #f2efed;
		transition:background-color 0.2s;
		&:hover{
			
			background-color:rgba(0,0,0,0.03);
		}
	}
	
	.PlistItem0{
		position:relative;
	}
	
	div.PListPersonData{

		color:grey;
		
		.PListName{
			
			color:#333;
		}
		
		a{
			color:grey;
		}
	}
}

#Heroe-Img{
	display:block;
	display:flex;
	justify-content:center;
	min-height:50vh;
	margin-top:138px;
	position:relative;
	margin-bottom:2px;
	
	/* Gradient Background */
	background: linear-gradient(90deg, #0d3691, #7d3153);
	background-size: 400% 400%;

	-webkit-animation: HeroeGradient 20s ease infinite;
	-moz-animation: HeroeGradient 20s ease infinite;
	-o-animation: HeroeGradient 20s ease infinite;
	animation: HeroeGradient 20s ease infinite;
	
	/* Gradient Background END */
	
	
	
	/* Gradient Background static */
	
	/*background: rgb(13,54,145);
	background: -moz-linear-gradient(90deg, rgba(13,54,145,1) 0%, rgba(125,49,83,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(13,54,145,1) 0%, rgba(125,49,83,1) 100%);
	background: linear-gradient(90deg, rgba(13,54,145,1) 0%, rgba(125,49,83,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0d3691",endColorstr="#7d3153",GradientType=1);*/
	
	/* Gradient Background STATIC END*/
	
	img{
		max-width: 1200px;
		width: 100%;
	}
}

/* GRADIENT KEYS */

@-webkit-keyframes HeroeGradient {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@-moz-keyframes HeroeGradient {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@-o-keyframes HeroeGradient {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@keyframes HeroeGradient {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}

.FktAddressData{
	margin-top: 12px;
}

.popover-header {
	color: black;
}

	
.SelectInput {
	background: transparent;
	
	option {
		-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	}
	option:not(:checked) {
		background-color:darkgrey;
		color:white;
	}
		
	option:checked {
		background-color:darkgrey;
		color:white;
	}
} 


#FktAddressGroup11List{
	
	display: grid;
  grid-template-columns: auto auto;
  grid-row-gap: 50px;
  grid-column-gap: 50px;
	
	> li{
		
		text-align:center;
		padding:0;
		
		img{
			float:none;
			margin:0;
			display: inline;
		}
		
		.FktAddressImage{
			
		}
	}
}

/* Button Back to Top
 Erweiterte Konfiguration, Inhalt */

#btn--backToTop{
	opacity:0;
	padding:10px;
	border-radius:20px;
	background:white;
	width:35px;
	height:35px;

	position:fixed;
	right:20px;
	bottom:50px;
	z-index:999999999;

	box-shadow:0 0 0 0.5 rgba(0,0,0,.5);
	@include transition(all 0.4s ease-in-out);

	&::before{

		@include fontawesome("\f062", 18px, #fff);

		position: absolute;
		top: 4px;
		left: 10px;
		
		color:#173D5D;
	}
	
	&.visible{
		opacity:0.8;
	}
}