:root {
	--logo-small: var(--brand-logo-light-small);
	--logo-large: var(--brand-logo-light-large);

	--contrast-threshold: var(--brand-color-contrast-threshold);

	--bs-primary: var(--brand-color-light-primary, var(--bs-primary-default));
	--bs-secondary: var(--brand-color-light-secondary, var(--bs-secondary-default));
	--bs-success: var(--brand-color-light-success, var(--bs-success-default));
	--bs-danger: var(--brand-color-light-danger, var(--bs-danger-default));
	--bs-warning: var(--brand-color-light-warning, var(--bs-warning-default));
	--bs-info: var(--brand-color-light-info, var(--bs-info-default));
	--bs-dark: var(--brand-color-light-dark, var(--bs-dark-default));
	--bs-light: var(--brand-color-light-light, var(--bs-light-default));
	--bs-grey: var(--brand-color-light-gray, var(--bs-grey-default));
	--bs-light-grey: var(--brand-color-light-lightGrey, var(--bs-light-grey-default));
	--bs-lighter: var(--brand-color-light-lighter, var(--bs-lighter-default));
	--bs-thin-grey: var(--brand-color-light-thinGrey, var(--bs-thin-grey-default));
	--bs-white: var(--bs-white-default);

	--login-background: var(--login-light-background, var(--login-background-default));

	--main-header-color: var(--main-header-light-color, var(--main-header-color-default));
	--main-header-background: var(--main-header-light-background, var(--main-header-background-default));
	--main-header-navigation-active: var(--main-header-light-button-background, var(--main-header-light-background, var(--gray-200)));

	--bs-body-color: var(--main-body-light-color, var(--bs-body-color-default));
	--bs-body-bg: var(--main-body-light-background, var(--bs-body-bg-default));

	--text-color-body: var(--bs-body-color, var(--bs-body-color-default));
	--bg-color-body: var(--bs-body-bg, var(--gray-100));
}

[data-bs-theme="dark"] {
	color-scheme: dark;
}

[data-bs-theme="dark"]:root {
	--logo-small: var(--brand-logo-dark-small);
	--logo-large: var(--brand-logo-dark-large);

	--bs-primary: var(--brand-color-dark-primary, var(--bs-primary-default));
	--bs-secondary: var(--brand-color-dark-secondary, var(--bs-secondary-default));
	--bs-success: var(--brand-color-dark-success, var(--bs-success-default));
	--bs-danger: var(--brand-color-dark-danger, var(--bs-danger-default));
	--bs-warning: var(--brand-color-dark-warning, var(--bs-warning-default));
	--bs-info: var(--brand-color-dark-info, var(--bs-info-default));
	--bs-dark: var(--brand-color-dark-dark, var(--bs-dark-default));
	--bs-light: var(--brand-color-dark-light, var(--bs-light-default));
	--bs-grey: var(--brand-color-dark-gray, var(--bs-grey-default));
	--bs-light-grey: var(--brand-color-dark-lightGrey, var(--bs-light-grey-default));
	--bs-lighter: var(--brand-color-dark-lighter, var(--bs-lighter-default));
	--bs-thin-grey: var(--brand-color-dark-thinGrey, var(--bs-thin-grey-default));

	--login-background: var(--login-dark-background, var(--login-background-default));

	--main-header-color: var(--main-header-dark-color, var(--main-header-color-default));
	--main-header-background: var(--main-header-dark-background, var(--main-header-background-default));
	--main-header-navigation-active: var(--main-header-dark-button-background, var(--main-header-dark-background, var(--gray-200)));

	--bs-body-color: var(--main-body-dark-color, var(--bs-body-color-default));
	--bs-body-bg: var(--main-body-dark-background, var(--gray-100));
}


/*** Layout ***/
/*** Steps ***/
.step-wrapper.finished .step,
.step-wrapper.current .step:after {
	background-color: var(--bs-primary);
}

.user-profile,
.user-icon {
	--currentBackgroundColor: var(--main-header-background);
	background: var(--currentBackgroundColor) !important;
	color: rgb(from var(--currentBackgroundColor) calc(calc(calc(calc(calc(calc(r * 299) + calc(g * 587)) + calc(b * 114)) / 1000) - 140) * -1000) calc(calc(calc(calc(calc(calc(r * 299) + calc(g * 587)) + calc(b * 114)) / 1000) - 140) * -1000) calc(calc(calc(calc(calc(calc(r * 299) + calc(g * 587)) + calc(b * 114)) / 1000) - 140) * -1000)) !important;
}

/*** User Profile ***/
.user-profile:hover,
.user-icon:hover,
.dropdown-wrapper.active .user-profile,
.dropdown-wrapper.active .user-icon {
	--currentBackgroundColor: var(--main-header-navigation-active);
}

@media (min-width: 992px) {
	.in-notifications-mode .user-icon {
		background-color: var(--main-header-background);
	}
}