:root {
    /* Logo / sizing */
    --logo: url('../CustomerFiles/Images/DSR.jpg');
    --logoWidth: 650px;
    --logoHeight: 75px;
    --navbarHeight: 100px;

    /* Brand core */
    --primary: #171717;
--text-color: #404040;
    --color-white: #FFFFFF;
    --color-black: #000000;
    --eg-dark-jade: #144537;
    --eg-grey-100: #FAFAFB; /* bg subtle */
    --eg-grey-200: #F4F5F7;
--product-100: #0e96ce;
    --product-400: #31a886;
--product-500: #0088C0;
--product-500-09: #005585;
    --background-secondary: #FFFFFF;

    /* Typography */
    --font-family: var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");
    --font-size: 15px;
    --textColor: var(--text-color);

    /* Page / surfaces */
    --backgroundColor: var(--background-secondary) !important;
    --inputBackgroundColor: var(--background-secondary);
    --inputBorderRadius: 0px;

    /* Buttons (primary) */
    --buttonBorderRadius: 0px;
    --buttonBackgroundColor: var(--product-500);
    --buttonBorderColor: var(--product-500);
    --buttonTextColor: var(--color-white);
    --buttonBackgroundColorHover: var(--product-500-09);
    --buttonBorderColorHover: var(--product-500-09);
    --buttonTextColorHover: var(--color-white);
    --buttonBoxShadowHover: none;

    /* Secondary / Tertiary */
    --secondButtonColor: var(--eg-dark-jade);
    --secondButtonBackgroundColor: var(--eg-grey-200);
    --secondButtonBorderColor: var(--eg-grey-200);
    --secondButtonColorHover: var(--eg-dark-jade);
    --secondButtonBackgroundColorHover: var(--eg-grey-200);
    --secondButtonBorderColorHover: var(--eg-grey-200);

    --thirdButtonColor: var(--eg-dark-jade);
    --thirdButtonBackgroundColor: var(--eg-grey-100);
    --thirdButtonBorderColor: rgba(20,69,55,0.12);
    --thirdButtonColorHover: var(--eg-dark-jade);
    --thirdButtonBackgroundColorHover: var(--eg-grey-200);
    --thirdButtonBorderColorHover: rgba(20,69,55,0.18);

    /* Cancel / status */
    --buttonCancelBackgroundColor: var(--eg-grey-200);
    --buttonCancelBackgroundColorHover: var(--eg-grey-200);
    --buttonCancelColor: var(--eg-dark-jade);
    --buttonCancelColorHover: var(--eg-dark-jade);
    --buttonCancelBorderColor: var(--eg-grey-200);
    --buttonCancelBorderColorHover: var(--eg-grey-200);

    /* Navbar / menu */
    --navbarColor: var(--color-white);
    --navbarBorderBottom: 1px solid #e5e7eb;
    --navbarBoxShadow: none;
    --navButtonColor: var(--primary);
    --navButtonColorHover: var(--product-100);
    --navButtonBackgroundColor: transparent;
    --navButtonBackgroundColorHover: transparent;

    --navbarTopMenuButtonColor: var(--primary);
    --navbarTopMenuButtonColorHover: var(--product-100);
    --navbarTopMenuButtonBackgroundColor: transparent;
    --navbarTopMenuButtonBackgroundColorHover: transparent;

    --navbarToggleColor: var(--primary);
    --navbarToggleColorHover: var(--product-100);
    --navbarToggleBackgroundColorHover: transparent;

    --navbar-toggler-width: 50px;
    --navbar-toggler-border-radius: 0px;
    --navbar-toggler-color: var(--primary);
    --navbar-toggler-color-hover: var(--product-100);
    --navbar-toggler-background-color: transparent;
    --navbar-toggler-background-color-hover: transparent;

    --menuToggleColor: var(--primary);
    --menuToggleColorHover: var(--product-100);
    --menuToggleBackgroundColor: transparent;
    --menuToggleBackgroundColorHover: transparent;

    /* Dropdowns */
    --loginDropdownColor: var(--primary);
    --loginDropdownColorHover: var(--color-white);
    --loginDropdownBackgroundColor: var(--color-white);
    --loginDropdownBackgroundColorHover: var(--product-100);

    /* Links */
    --linkColor: var(--product-500);
    --linkColorHover: var(--product-500-09);
    --linkTextDecoration: underline;
    --linkTextDecorationHover: underline;

    /* Sidebar */
    --bs-nav-link-color: var(--primary);
    --bs-nav-link-hover-color: var(--product-500);
    --navbar-border-bottom: none;
    --navLinkBorderBottom: none;
    --navLinkBorderTop: none;
    --sidebarTextTransform: none;
    --sidebarFontSize: inherit;
    --sidebarFontWeight: 600;
    --sidebarColor: var(--product-500);
    --sidebarMenuButtonRadius: 0px;
    --sidebarMenuButtonColor: var(--color-white);
    --sidebarMenuButtonColorHover: var(--color-white);
    --sidebarMenuButtonBackgroundColor: var(--product-500);
    --sidebarMenuButtonBackgroundColorHover: var(--product-100);
    --sidebarSubItemColor: var(--color-white);
    --sidebarSubItemColorHover: var(--color-white);
    --sidebarSubItemsBackgroundColor: var(--product-500);
    --sidebarSubItemBackgroundColorHover: var(--product-100);
    --sidebarSubItemTextIndent: none;
    --sidebarNavLinkHover: none;
    --sidebarMenuItemMargin: 0;

    /* “Open page” chip */
    --openPageColor: var(--color-white);
    --openPageColorHover: var(--color-white);
    --openPageBackgroundColor: var(--product-500);
    --openPageBackgroundColorHover: var(--product-100);
    --openPageSubitemColor: var(--openPageColor);
    --openPageSubitemColorHover: var(--openPageColorHover);

    /* Breadcrumb */
    --breadcrumbBackgroundColor: var(--product-100);
    --breadcrumbColor: var(--primary);
    --breadcrumbColorClick: var(--product-500);
    --breadcrumbColorHover: var(--product-500);
    --breadcrumbBorderBottom: 5px solid var(--product-500);

    --subItemsBoxShadow: none;
    --sectionHeadlineBackgroundColor: inherit;
    --sectionHeadlineColor: var(--primary);
    --sectionHeadlineTextAlign: left;
    --sectionHeadlineFontSize: 20px;

    /* Cards */
    --bs-card-border-width: 0px;
    --bs-card-border-color: #e5e7eb;
    --card-border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    --card-border-radius: 0px;
    --card-box-shadow: none;
}

.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: transparent;
}

.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);
    font-weight: var(--sidebarFontWeight);
}

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

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

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

.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: var(--sidebarMenuItemMargin);
}

.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;
    text-decoration: none;
}

.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: transparent;
    color: var(--textColor) !important;
    text-align: left;
}

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

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

.lifted-corners-card,
.small-padding-card,
.no-padding-card,
.card {
    border-radius: var(--card-border-radius);
    border: var(--card-border);
    box-shadow: var(--card-box-shadow);
}

.lifted-corners-card .lifted-corners-card,
.small-padding-card .small-padding-card,
.no-padding-card .no-padding-card,
.card .card {
    box-shadow: none;
}

.card .card {
    border: none;
}

.small-padding-card {
    margin-bottom: 16px;
}

.dx-texteditor.dx-editor-outlined,
.dx-texteditor.dx-editor-outlined.form-control,
.form-control,
.dx-texteditor-input {
    border-radius: var(--inputBorderRadius);
    max-height: inherit;
    font-size: inherit;
}

table.form-control,
.form-control {
    padding: 12px 16px;
}

.create-boardmembership-person,
.ae-company,
.add-education {
    padding: 12px 16px !important;
}

table.form-control td {
    padding: 0 !important;
}

.dx-texteditor.dx-editor-outlined,
.dx-texteditor.dx-editor-outlined.form-control {
    padding: 5px 8px;
    background-color: var(--inputBackgroundColor);
}

.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,
.dx-texteditor-input {
    background-color: var(--inputBackgroundColor);
}

@media (max-width: 1450px) {
    .radioContainer .form-control {
        font-size: inherit;
        line-height: inherit;
    }
}

.applied-search-criterias {
    background-color: #b3d9ff;
    color: var(--textColor);
}