:root {
	--logo: url('../CustomerFiles/Images/logo-ffd.png');
	--logoHeight: 44px;
	--logoWidth: 250px;
	--navbarHeight: 100px;
	--font-family: inherit;
	--textColor: #000000;
	--font-size: 15px;
	--backgroundColor: inherit !important;
	--color-white: #FFFFFF;
	--color-black: #000000;
	--button-border-radius: none;
	--buttonBackgroundColor: #d51310;
	--buttonBorderColor: #d51310;
	--buttonTextColor: var(--color-white);
	--buttonBackgroundColorHover: #d51310;
	--buttonBorderColorHover: #d51310;
	--buttonTextColorHover: var(--color-white);
	--buttonBoxShadowHover: none;
	--secondButtonColor: #000000;
	--secondButtonBackgroundColor: #E0DDDB;
	--secondButtonBorderColor: #E0DDDB;
	--secondButtonColorHover: #000000;
	--secondButtonBackgroundColorHover: #E0DDDB;
	--secondButtonBorderColorHover: #E0DDDB;
	--thirdButtonColor: #333333;
	--thirdButtonBackgroundColor: #efefef;
	--thirdButtonBorderColor: #E7E7E7;
	--thirdButtonColorHover: #333333;
	--thirdButtonBackgroundColorHover: #E7E7E7;
	--thirdButtonBorderColorHover: #E7E7E7;
	--buttonCancelBackgroundColor: #E0DDDB;
	--buttonCancelBackgroundColorHover: #E0DDDB;
	--buttonCancelColor: #000000;
	--buttonCancelColorHover: #000000;
	--buttonCancelBorderColor: #E0DDDB;
	--buttonCancelBorderColorHover: #E0DDDB;
	--navbarColor: var(--color-white);
	--navbarBorderBottom: none;
	--navbarBoxShadow: none;
	--navButtonBackgroundColor: inherit;
	--navButtonBackgroundColorHover: inherit;
	--navButtonColor: #000000;
	--navButtonColorHover: #d51310;
	--navbarTopMenuButtonColor: #000000;
	--navbarTopMenuButtonColorHover: #d51310;
	--navbarTopMenuButtonBackgroundColor: inherit;
	--navbarTopMenuButtonBackgroundColorHover: inherit;
	--navbarToggleBackgroundColorHover: inherit;
	--navbarToggleColor: #000000;
	--navbarToggleColorHover: #d51310;
	--navbar-toggler-width: 50px;
	--navbar-toggler-border-radius: none;
	--navbar-toggler-background-color: inherit;
	--navbar-toggler-background-color-hover: inherit;
	--navbar-toggler-color: #000000;
	--navbar-toggler-color-hover: #d51310;
	--menuToggleColor: #000000;
	--menuToggleBackgroundColor: inherit;
	--menuToggleColorHover: #d51310;
	--menuToggleBackgroundColorHover: var(--navButtonBackgroundColorHover);
	--loginDropdownBackgroundColor: #FFFFFF;
	--loginDropdownColor: #000000;
	--loginDropdownBackgroundColorHover: #FFFFFF;
	--loginDropdownColorHover: #d51310;
	--bs-nav-link-color: #d51310;
	--bs-nav-link-hover-color: #d51310;
	--navbar-border-bottom: none;
	--navLinkBorderBottom: none;
	--navLinkBorderTop: none;
	--sidebarTextTransform: none;
	--sidebarFontSize: inherit;
	--sidebarColor: var(--color-white);
	--sidebarMenuButtonColor: #000000;
	--sidebarMenuButtonColorHover: #d51310;
	--sidebarMenuButtonBackgroundColor: inherit;
	--sidebarMenuButtonBackgroundColorHover: inherit;
	--sidebarSubItemsBackgroundColor: inherit;
	--sidebarSubItemBackgroundColorHover: inherit;
	--sidebarSubItemColor: #000000;
	--sidebarSubItemColorHover: #d51310;
	--sidebarSubItemTextIndent: none;
	--sidebarNavLinkHover: none;
	--openPageBackgroundColor: inherit;
	--openPageBackgroundColorHover: inherit;
	--openPageColor: #000000;
	--openPageColorHover: #d51310;
	--openPageSubitemColor: var(--openPageColor);
	--openPageSubitemColorHover: var(--openPageColorHover);
	--linkColor: #d51310;
	--linkColorHover: #d51310;
	--linkTextDecoration: none;
	--linkTextDecorationHover: underline;
	--backgroundColor: var(--color-white);
	--subItemsBoxShadow: none;
	--sectionHeadlineBackgroundColor: inherit;
	--sectionHeadlineColor: #d51310;
	--sectionHeadlineTextAlign: left;
	--sectionHeadlineFontSize: 20px;
	--breadcrumbBackgroundColor: #314E5E;
	--breadcrumbColor: var(--color-white);
	--breadcrumbColorClick: var(--color-white);
	--breadcrumbColorHover: var(--color-white);
	--breadcrumbBorderBottom: 5px solid var(--breadcrumbColor);
	--card-border-radius: none;
    --card-border: 1px solid rgba(0, 0, 0, 0.15);
	--inputBackgroundColor: inherit;
}

.custom-toggler.navbar-toggler-icon {
    width: var(--navbar-toggler-width);
	height: var(--navbar-toggler-width);
}

.custom-toggler.navbar-toggler-icon > .top-menu-button-icon {
    background-color: var(--navbar-toggler-background-color);
    color: var(--navbar-toggler-color);
    border-radius: var(--navbar-toggler-border-radius);
    width: var(--navbar-toggler-width);
	height: var(--navbar-toggler-width);
    padding: 14px;
}

.custom-toggler.navbar-toggler-icon > .top-menu-button-icon:hover {
    background-color: var(--navbar-toggler-background-color-hover);
    color: var(--navbar-toggler-color-hover);
}

#menu-toggle.d-md-block {
    display: block !important;
}

.mobile-menu-button.d-md-none {
    display: none !important;
}

#menu-toggle {
	border-radius: var(--button-border-radius);
	color: var(--menuToggleColor) !important;
	background-color: var(--menuToggleBackgroundColor) !important;
}

#menu-toggle:hover {
	color: var(--menuToggleColorHover) !important;
	background-color: var(--menuToggleBackgroundColorHover) !important;
}

.navbar-brand {
	height: var(--logoHeight);
	max-height: none;
}

#logo {
    background-position: 0;
    background-size: 100%;
    background-image: var(--logo);
    width: var(--logoWidth);
    height: var(--logoHeight);
	margin-left: 15px;
}

body {
    font-family: var(--font-family);
	color: var(--textColor);
	font-size: var(--font-size);
	padding-top: var(--navbarHeight);
	background-color: var(--backgroundColor) !important;
}

.background-color {
	background-color: var(--backgroundColor) !important;
}

a {
    color: var(--linkColor);
	text-decoration: var(--linkTextDecoration);
}

a:hover,
a:focus {
    color: var(--linkColorHover);
	text-decoration: var(--linkTextDecorationHover);
}

a.button,
a.nav-link {
	text-decoration: none;
}

.link-on-background {
	color: var(--linkColor);
}

.link-on-background:hover,
.link-on-background:focus {
	color: var(--linkColorHover);
    text-decoration: var(--linkTextDecorationHover);
}

.link-on-card {
	color: var(--linkColor) !important;
}

.link-on-card:hover,
.link-on-card:focus {
	color: var(--linkColorHover) !important;
    text-decoration: var(--linkTextDecorationHover);
}

.show-more-event .right-side-link {
	padding: 0;
}

.button-color {
	background-color: var(--buttonBackgroundColor);
	border: 1px solid var(--buttonBorderColor);
	color: var(--buttonTextColor);
}

.button-color:hover {
	background-color: var(--buttonBackgroundColorHover);
	border: 1px solid var(--buttonBorderColorHover);
	color: var(--buttonTextColorHover);
	box-shadow: var(--buttonBoxShadowHover);
}

.second-button-color {
	background-color: var(--secondButtonBackgroundColor);
	border: 1px solid var(--secondButtonBorderColor);
	color: var(--secondButtonColor);
}

.second-button-color:hover {
	background-color: var(--secondButtonBackgroundColorHover);
	border: 1px solid var(--secondButtonBorderColorHover);
	color: var(--secondButtonColorHover);
	box-shadow: var(--buttonBoxShadowHover);
}

.third-button-color {
	background-color: var(--thirdButtonBackgroundColor);
	border: 1px solid var(--thirdButtonBorderColor);
	color: var(--thirdButtonColor);
}

.third-button-color:hover {
	background-color: var(--thirdButtonBackgroundColorHover);
	border: 1px solid var(--thirdButtonBorderColorHover);
	color: var(--thirdButtonColorHover);
	box-shadow: var(--buttonBoxShadowHover);
}

.accept-color {
	background-color: var(--buttonBackgroundColor);
    border: 1px solid var(--buttonBorderColor);
	color: var(--buttonTextColor)!important;
}

.accept-color:hover {
	background-color: var(--buttonBackgroundColorHover);
	border: 1px solid var(--buttonBorderColorHover);
	color: var(--buttonTextColorHover) !important;
	box-shadow: var(--buttonBoxShadowHover);
}

.cancel-color {
	background-color: var(--buttonCancelBackgroundColor);
	border: 1px solid var(--buttonCancelBorderColor);
	color: var(--buttonCancelColor);
}

.cancel-color:hover {
	background-color: var(--buttonCancelBackgroundColorHover);
	border: 1px solid var(--buttonCancelBorderColorHover);
	color: var(--buttonCancelColor);
	box-shadow: var(--buttonBoxShadowHover);
}

.btn,
.button {
	border-radius: var(--button-border-radius);
}

.navbar {
	border-bottom: var(--navbarBorderBottom);
	box-shadow: var(--navbarBoxShadow);
	height: var(--navbarHeight);
}

.navbar,
.navbar-collapse {
	background-color: var(--navbarColor);
}

.top-menu-button {
	color: var(--navbarTopMenuButtonColor);
	background-color: var(--navbarTopMenuButtonBackgroundColor) !important;
}

.top-menu-button:hover {
	color: var(--navbarTopMenuButtonColorHover);
	background-color: var(--navbarTopMenuButtonBackgroundColorHover) !important;
}

.top-menu-button-icon-bar {
	background-color: var(--navbarTopMenuButtonBackgroundColor) !important;
}

.top-menu-button:hover > .top-menu-button-icon-bar {
	background-color: var(--navbarTopMenuButtonBackgroundColorHover) !important;
}

@media (max-width: 1150px) {
	.navbar-toggler {
		color: var(--navbarToggleColor);
		height: var(--navbarHeight);
	}

	.navbar-toggler:hover {
		color: var(--navbarToggleColorHover);
		background-color: var(--navbarToggleBackgroundColorHover) !important;
	}
}

.custom-toggler .navbar-toggler-icon {
	background-image: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-nav > .nav-item > .nav-link,
.navbar-nav > .nav-item > .nav-link:active {
	color: var(--navButtonColor);
	border-bottom: var(--navLinkBorderBottom) !important;
}

.navbar-nav > .nav-item > .nav-link:focus,
.navbar-nav > .nav-item > .nav-link:hover {
	color: var(--navButtonColorHover);
}

@media (min-width: 1200px) {
    .navbar-expand-xl .navbar-nav > .nav-item > .nav-link {
		border-bottom: none !important;
    }
}

.navbar-nav > .nav-item > .username-button {
	max-width: 100%;
}

.offcanvas.offcanvas-start {
	border-right: var(--navbar-border-bottom);
}

.nav-link,
.nav-link:active {
	color: var(--navButtonColor);
}

.nav-link:focus,
.nav-link:hover {
	color: var(--bs-nav-link-hover-color);
}

.btn.nav-button-color,
.btn.nav-button-color:active {
	color: var(--navButtonColor);
	background-color: var(--navButtonBackgroundColor);
}

.nav-button-color:hover {
	color: var(--navButtonColorHover);
	background-color: var(--navButtonBackgroundColorHover);
}

.navbar .dropdown-menu {
	background-color: var(--loginDropdownBackgroundColor);
}

.navbar .dropdown-menu .dropdown-item {
	background-color: var(--loginDropdownBackgroundColor);
}

.navbar .dropdown-menu .dropdown-item .nav-link {
	color: var(--loginDropdownColor);
}

.navbar .dropdown-menu:hover {
	background-color: var(--loginDropdownBackgroundColorHover);
}

.navbar .dropdown-menu .dropdown-item:hover {
	background-color: var(--loginDropdownBackgroundColorHover);
}

.navbar .dropdown-menu .dropdown-item .nav-link:hover {
	color: var(--loginDropdownColorHover);
	text-decoration: var(--sidebarNavLinkHover) ;
}

.navbar .dropdown-toggle.nav-button-text-color {
	border: 0;
}

#sidebar-wrapper {
	margin-top: var(--navbarHeight);
	text-transform: var(--sidebarTextTransform);
	font-size: var(--sidebarFontSize);
}

.sidebar-color {
	background-color: var(--sidebarColor);
}

.sidebar-button-color {
	border-bottom: var(--navLinkBorderBottom) !important;
	border-top: var(--navLinkBorderTop) !important;
    background-color: var(--sidebarMenuButtonBackgroundColor);
}

.sidebar-subitem-color {
	border-bottom: var(--navLinkBorderBottom) !important;
	border-top: var(--navLinkBorderTop) !important;
	background-color: var(--sidebarMenuButtonBackgroundColor);
}

.sidebar-button-color:hover {
	background-color: var(--sidebarMenuButtonBackgroundColorHover);
}

.sidebar-button-text-color {
	color: var(--sidebarMenuButtonColor) !important;
}

.sidebar-button-text-color:hover {
	color: var(--sidebarMenuButtonColorHover) !important;
}

.sidebar-subitem-text-color {
    color: var(--sidebarSubItemColor) !important;
	text-indent: var(--sidebarSubItemTextIndent);
}

.sidebar-subitem-text-color:hover {
	color: var(--sidebarSubItemColorHover) !important;
}

#sidebar-menu-items {
	margin: 0px 10px;
}

.sidebar-nav li a,
.sidebar-nav .top-item li {
	padding: 5px 0;
}

.sidebar-nav li a:hover {
	text-decoration: var(--sidebarNavLinkHover) ;
}

.open-page {
    background-color: var(--openPageBackgroundColor) !important;
    border-color: var(--openPageBackgroundColor) !important;
}

.open-page:hover {
    background-color: var(--openPageBackgroundColorHover) !important;
    border-color: var(--openPageBackgroundColorHover) !important;
}
.open-page > a {
    color: var(--openPageColor) !important;
}

.open-page > a:hover {
    color: var(--openPageColorHover) !important;
}

.sidebar-subitem-color.open-page > a {
	color: var(--openPageSubitemColor) !important;
}

.sidebar-subitem-color.open-page > a:hover {
	color: var(--openPageSubitemColorHover) !important;
}

.breadcrumb-color {
    background-color: var(--breadcrumbBackgroundColor);
}

.breadcrumb-text-color {
    color: var(--breadcrumbColor) !important;
}

.breadcrumb-text-color:hover,
.breadcrumb-text-color:focus {
    color: var(--breadcrumbColorHover) !important;
}

.clickableBreadCrumb > .breadcrumb-text-color:hover {
    color: var(--breadcrumbColorClick) !important;
    cursor: pointer;
    text-decoration: none;
}

.breadcrumb-bottom-color {
    border-bottom: var(--breadcrumbBorderBottom);
}

.section-headline {
	background-color: var(--sectionHeadlineBackgroundColor);
	color: var(--sectionHeadlineColor);
	text-align: var(--sectionHeadlineTextAlign);
	font-size: var(--sectionHeadlineFontSize);
}

.sub-items {
	box-shadow: var(--subItemsBoxShadow);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: inherit;
}

.dropdown-item:focus,
.dropdown-item:hover {
    background-color: inherit;
}

.alreadyParticipating {
    background-color: green;
    color: #ffffff !important;
}

.alreadyParticipating:hover {
	background-color: green !important;
	color: #ffffff !important;
}

.cancelledParticipation, .waitingParticipant {
    background-color: darkgray !important;
    color: #fff !important;
}

.cancelledParticipation:hover, .waitingParticipant:hover {
	background-color: darkgray !important;
	color: #fff !important;
}

.loading {
    width: 20px;
    height: 20px;
    right: -22px;
    background-image: url('../CustomerFiles/Images/ajax-loader.gif');
}

.big-loading {
    width: 50px;
    height: 50px;
    background-image: url('../CustomerFiles/Images/ajax-loader2.gif');
}

.ui-spinner-button {
	background-color: #314E5E;
	color: #fff !important;
}

.ui-spinner-button:hover {
	background-color: #314E5E;
	color: #fff !important;
}

.section-headline2 {
	background-color: #444;
	color: #ffffff !important;
}

.section-headline3 {
	background-color: #888;
	color: #ffffff;
}

.unpaid-button-color {
    background-color: #c00418;
    color: #fff;
}

.lifted-corners-card {
	border-radius: var(--card-border-radius);
    border: var(--card-border);
}

.form-control,
.form-control input[type="text"],
.form-control .dxeButtonEditButton_iOS,
.form-control .dxeSpinIncButton_iOS,
.form-control .dxeSpinDecButton_iOS,
.form-control .dxeSpinLargeIncButton_iOS,
.form-control .dxeSpinLargeDecButton_iOS {
	background-color: var(--inputBackgroundColor);
}

.myProfileRadioButton {
    padding: 5px 4px 5px 10px;
}