:root {
	--mdc-theme-background: #F7F9FA;
	/*--mdc-theme-surface: #F7F9FA;*/
	--mdc-theme-surface: #fff; /* #252f3f; /* bg-gray-800 */
	--mdc-theme-primary: #C51565; /* cerise-red-600, was #6200ee before 22.01.23 */
	--mdc-tab-height: 42px;
	--mdc-icon-font: 'Material Symbols Outlined';
	/*--mdc-theme-on-primary: #;*/

	--mdc-typography-font-family: 'Open Sans', 'sans-serif';
	--mdc-typography-font-weight: 400;

	/* also change for tailwind in src/css/tailwind.css */
	--mdc-typography-headline1-font-family: 'Montserrat', 'sans-serif';
	--mdc-typography-headline2-font-family: 'Montserrat', 'sans-serif';
	--mdc-typography-headline3-font-family: 'Montserrat', 'sans-serif';
	--mdc-typography-headline4-font-family: 'Montserrat', 'sans-serif';
	--mdc-typography-headline5-font-family: 'Montserrat', 'sans-serif';
	--mdc-typography-headline6-font-family: 'Montserrat', 'sans-serif';

	/* also change for tailwind in src/css/tailwind.css */
	--mdc-typography-headline1-font-weight: 500;
	--mdc-typography-headline2-font-weight: 500;
	--mdc-typography-headline3-font-weight: 500;
	--mdc-typography-headline4-font-weight: 500;
	--mdc-typography-headline5-font-weight: 500;
	--mdc-typography-headline6-font-weight: 500;

	/*--mdc-dialog-min-width: 95vw;*/
	/*--mdc-dialog-max-height: calc(100vh - 32px);*/
	--mdc-dialog-max-width: calc(100vw - 32px);

	/*--header-height: 105px;*/
	--tw-gray-200: #e5e7eb;

	/* for example for buttons */
	--mdc-shape-small: 1.5rem;

	--mdc-list-vertical-padding: 0;
}

body {
	font-family:'Open Sans', sans-serif;
	font-weight: 400;
	/*background-color: #F7F9FA;*/
	background-color: #ffffff; /* was #ffffff;*/
	font-size:10px; /* set em-size for whole page. 1em = 10px */
}

.bg-grey {
	background-color: #F7F9FA;
}

.modal-backdrop {
	/* disable old modal backdrop because it doesn't work with legacy content and vaadin router */
	display: none;
}

.wrapper-xl .wrapper {
	width: 100%; /* was 1400px */
	max-width: 1600px; /* was 100%; */
	margin-bottom: 64px;
}

.wrapper-xl main .heading h1 {
	padding: 2rem 2rem 2rem calc(2rem + 3px); /* 3px for state border */
}
.wrapper-xl main .heading {
	margin: 0;
	top: 0;
	background-color: #fff;
	border-bottom: 1px solid #eee;
}

.wrapper-xl .global_back {
	display: none;
}

.wrapper-xl main {
	margin: 0;
	padding: 2rem;
}

#mainmenu [mwc-list-item][activated] {
	border-left: 3px solid var(--mdc-theme-primary);
}

/*
 * Refactoring UI, page 63

base: 16px

spacing and size
4px
8px
12px
16px
24px
32px
48px
64px
96px
128px
192px
256px
384px
512px
640px
768px

font sizes
12px
14px
16px
18px
20px
24px
30px
36px
48px
60px
72px
*/

.bold, strong, b {
	font-weight: 700;
}

.primary-content {
	color: hsl(202, 57%, 15%);
}

.secondary-content {
	color: hsl(201, 23%, 34%);
}

.tertiary-content {
	color: hsl(203, 15%, 47%);
}