﻿:root {
	/* Theme base colours */
	--app-primary-color: black;
	--app-primary-background-color: white;
	--app-contrast-color: white;
	--app-contrast-background-color: red;
	--app-contrast-link-color: lightblue;
	--app-highlight-color: red;
	--app-highlight-background-color: white;
	/* Page layout colours */
	--app-banner-color: none;
	--app-banner-background-color: black;
	--app-subheader-color: var(--app-primary-color);
	--app-subheader-background-color: lightgray;
	--app-navigation-header-color: var(--app-contrast-color);
	--app-navigation-header-background-color: var(--app-contrast-background-color);
	--app-navigation-color: var(--app-contrast-color);
	--app-navigation-background-color: var(--app-contrast-background-color);
	--app-navigation-footer-color: var(--app-contrast-color);
	--app-navigation-footer-background-color: var(--app-contrast-background-color);
	--app-main-header-color: var(--app-primary-color);
	--app-main-header-background-color: var(--app-primary-background-color);
	--app-main-color: var(--app-primary-color);
	--app-main-background-color: var(--app-primary-background-color);
	--app-main-footer-color: var(--app-primary-color);
	--app-main-footer-background-color: var(--app-primary-background-color);
	--app-footer-color: var(--app-contrast-color);
	--app-footer-background-color: var(--app-contrast-background-color);
	/* RadzenSidebarToggle */
	--rz-sidebar-toggle-color: var(--app-highlight-color);
	--rz-sidebar-toggle-background-color: var(--app-primary-background-color);
	--rz-sidebar-toggle-hover-color: var(--app-contrast-color);
	--rz-sidebar-toggle-hover-background-color: var(--app-contrast-background-color);
	--rz-sidebar-toggle-border: none;
	/* RadzenPanelMenu */
	--rz-panel-menu-icon-color: var(--app-contrast-color);
	--rz-panel-menu-item-color: var(--app-contrast-color);
	--rz-panel-menu-item-background-color: var(--app-contrast-background-color);
	--rz-panel-menu-item-hover-color: var(--app-highlight-color);
	--rz-panel-menu-item-hover-background-color: var(--app-highlight-background-color);
	--rz-panel-menu-item-active-color: var(--app-contrast-color);
	--rz-panel-menu-item-active-background-color: var(--app-contrast-background-color);
	--rz-panel-menu-item-active-indicator: var(--app-contrast-color);
	--rz-panel-menu-item-2nd-level-color: none;
	--rz-panel-menu-item-2nd-level-background-color: none;
	--rz-panel-menu-item-2nd-level-hover-color: none;
	--rz-panel-menu-item-2nd-level-hover-background-color: none;
	--rz-panel-menu-item-2nd-level-active-color: none;
	--rz-panel-menu-item-2nd-level-active-background-color: none;
	--rz-panel-menu-item-2nd-level-active-indicator: none;
	--rz-panel-menu-item-3rd-level-color: none;
	--rz-panel-menu-item-3rd-level-background-color: none;
	--rz-panel-menu-item-3rd-level-hover-color: none;
	--rz-panel-menu-item-3rd-level-hover-background-color: none;
	--rz-panel-menu-item-3rd-level-active-color: none;
	--rz-panel-menu-item-3rd-level-active-background-color: none;
	--rz-panel-menu-item-3rd-level-active-indicator: none;
	--rz-panel-menu-item-border: none;
	--rz-panel-menu-item-border-radius: 0;
}

/* High Contrast */
.xxx {
	--app-banner-color: white;
	--app-banner-background-color: red;
	--app-subheader-color: white;
	--app-subheader-background-color: green;
	--app-navigation-header-color: white;
	--app-navigation-header-background-color: blue;
	--app-navigation-color: white;
	--app-navigation-background-color: red;
	--app-navigation-footer-color: white;
	--app-navigation-footer-background-color: green;
	--app-main-header-color: black;
	--app-main-header-background-color: cyan;
	--app-main-color: black;
	--app-main-background-color: magenta;
	--app-main-footer-color: black;
	--app-main-footer-background-color: yellow;
	--app-footer-color: white;
	--app-footer-background-color: blue;
	/* RadzenSidebarToggle */
	--rz-sidebar-toggle-color: green;
	--rz-sidebar-toggle-background-color: blue;
	--rz-sidebar-toggle-hover-color: blue;
	--rz-sidebar-toggle-hover-background-color: green;
	--rz-sidebar-toggle-border: 1px solid orange;
	/* RadzenPanelMenu */
	--rz-panel-menu-icon-color: orange;
	--rz-panel-menu-item-color: cyan;
	--rz-panel-menu-item-background-color: yellow;
	--rz-panel-menu-item-hover-color: red;
	--rz-panel-menu-item-hover-background-color: cyan;
	--rz-panel-menu-item-active-color: green;
	--rz-panel-menu-item-active-background-color: deepskyblue;
	--rz-panel-menu-item-active-indicator: lightgreen;
	--rz-panel-menu-item-border: 1px solid yellow;
	--rz-panel-menu-item-border-radius: 1rem;
}

wa-page [slot="banner"] {
	color: var(--app-banner-color);
	background-color: var(--app-banner-background-color);
	padding: 0;
}

	wa-page [slot="banner"] img.banner-logo {
		width: 277px;
		height: 64px;
	}

wa-page [slot="subheader"] {
	color: var(--app-subheader-color);
	background-color: var(--app-subheader-background-color);
	padding: 0.5rem 1.0rem 0.5rem 1.0rem;
}

wa-page [slot="navigation-header"] {
	color: var(--app-navigation-header-color);
	background-color: var(--app-navigation-header-background-color);
	padding: 1.0rem;
}

wa-page [slot="navigation"] {
	color: var(--app-navigation-color);
	background-color: var(--app-navigation-background-color);
	padding: 1.0rem;
}

wa-page [slot="navigation-footer"] {
	color: var(--app-navigation-footer-color);
	background-color: var(--app-navigation-footer-background-color);
	padding: 1.0rem;
}

wa-page [slot="main-header"] {
	color: var(--app-main-header-color);
	background-color: var(--app-main-header-background-color);
	padding: 1.0rem;
}

wa-page main {
	color: var(--app-main-color);
	background-color: var(--app-main-background-color);
	padding: 1.0rem;
}

wa-page [slot="main-footer"] {
	color: var(--app-main-footer-color);
	background-color: var(--app-main-footer-background-color);
	padding: 1.0rem;
}

wa-page [slot="footer"] {
	color: var(--app-footer-color);
	background-color: var(--app-footer-background-color);
	padding: 1.0rem;
}

	wa-page [slot="footer"] h6 {
		color: var(--app-footer-color);
	}

	wa-page [slot="footer"] .rz-link-text {
		color: var(--app-contrast-link-color);
	}

	wa-page [slot="footer"] img.footer-logo-left,
	wa-page [slot="footer"] img.footer-logo-right {
		height: 64px;
	}

	wa-page [slot="footer"] img.footer-logo-right {
		transform: scaleX(-1);
	}

.uw-rz-action-card {
	color: color-mix(in srgb, var(--app-highlight-color) 90%, transparent);
}

	.uw-rz-action-card.is-disabled {
		color: color-mix(in srgb, var(--app-highlight-color) 20%, transparent);
	}

	.uw-rz-action-card > div > span {
		color: color-mix(in srgb, var(--app-highlight-color) 90%, transparent);
	}

	.uw-rz-action-card.is-disabled > div > span {
		color: color-mix(in srgb, var(--app-highlight-color) 20%, transparent);
	}

.rz-card.rz-variant-filled.uw-rz-action-card {
	box-shadow: color-mix(in srgb, var(--app-contrast-background-color) 50%, transparent) 0px 0px 8px 0px;
}

	.rz-card.rz-variant-filled.uw-rz-action-card:hover {
		background-color: color-mix(in srgb, var(--app-highlight-color) 10%, transparent);
		cursor: pointer;
	}

	.rz-card.rz-variant-filled.uw-rz-action-card.is-disabled {
		box-shadow: color-mix(in srgb, var(--app-contrast-background-color) 10%, transparent) 0px 0px 8px 0px;
	}

		.rz-card.rz-variant-filled.uw-rz-action-card.is-disabled:hover {
			background-color: unset;
			cursor: auto;
		}


.rz-data-grid {
	--rz-grid-background-color: #FFF4F4;
	--rz-grid-selected-background-color: #FFF0F0;
	--rz-grid-stripe-background-color: white;
	--rz-grid-stripe-odd-background-color: #FFF4F4;
	--rz-grid-frozen-background-color: yellow;
	--rz-grid-frozen-stripe-background-color: #F8F8F8;
	--rz-grid-frozen-stripe-odd-background-color: #FFE8E8;
}

.event-background-none {
}

.event-background-match {
	background-color: red;
}

.event-ebackground-vent {
	background-color: green;
}

.event-background-birthday {
	background-color: purple;
}

.event-background-other {
}

.event-color-none {
}

.event-color-match {
	color: red;
}

.event-color-event {
	color: green;
}

.event-color-birthday {
	color: purple;
}

.event-color-other {
}
