:root {
	--web-font-family: var(--zui-font-family), sans-serif;
}

html, body {
	font-family: var(--web-font-family);
}

/*
	ZUi v2 to v3 migration:
	This was set by zui in v2 but is left to the application itself in v3.
	Removing it has an effect and should be adapted in the respective style sheets thoroughly.
*/
* {
	box-sizing: border-box;
}

/*circumvent font resets*/
zui-thumbnail, zui-interaction-dialog, zui-toast-notification {
	font-family: var(--web-font-family);
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0px;
	margin-bottom: 8px;
	font-weight: 500;
	line-height: 1.2;
}

	h1:focus {
		outline: none;
	}

/*Browser default font size: 16px*/

h1 {
	font-size: 2.5rem;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.75rem;
}

h4 {
	font-size: 1.5rem;
}

h5 {
	font-size: 1.25rem;
}

h6 {
	font-size: 1rem;
}

a, .btn-link {
	color: var(--web-color-link);
	outline: none;
}

.valid.modified:not([type=checkbox]) {
	outline: 1px solid var(--web-color-confirm);
}

iframe {
	border-width: 0;
}

/*
	ZUi update set font: var(--zui-typography-body); to some elements.
	Thus changing the basic font size from 16px to 14px for all children.
*/
zui-scrollable-directive {
	font-size: 16px !important;
}

zui-divider {
	margin: 7px 8px;
}

/*ZUi icon
	not calling it zui-icon to avoid confusion with the HTML tag
*/
.zuii {
	/*for some reason, this is not handled by zui itself*/
	color: var(--web-color-icon);
}

.zuii-greyed-out {
	color: var(--web-color-icon-greyed-out);
}

/*ZUi interactive icon*/
.zuiii {
	width: calc(var(--zui-gu) * 4);
}

zui-button[emphasis='default'] {
	---zui-button-bg-background-color: var(--zui-semantic-sys--bg--3rd-default--enabled);
}

	zui-button[emphasis='default']:hover {
		---zui-button-bg-background-color: var(--zui-semantic-sys--bg--3rd-default--hover);
	}

	zui-button[emphasis='default']:active {
		---zui-button-bg-background-color: var(--zui-semantic-sys--bg--3rd-default--pressed);
	}


zui-button[emphasis='default'][disabled] {
	---zui-button-bg-background-color: var(--zui-semantic-sys--bg--3rd-default--disabled);
}


	zui-button[emphasis='default'][disabled]:hover {
		---zui-button-bg-background-color: var(--zui-semantic-sys--bg--3rd-default--disabled);
	}


	zui-button[emphasis='default'][disabled]:active {
		---zui-button-bg-background-color: var(--zui-semantic-sys--bg--3rd-default--disabled);
	}

.zui-button-min-fit {
	--zui-button-width: auto;
	--zui-button-min-width: var(---zui-button-default-width);
}

.non-user-select {
	-webkit-user-select: none;
}

/*
	Context menu on iOS is not handled over contextmenu event.
	This prevents callouts on long presses but is not supported on other platforms/browsers.
	Note: Thanks, Apple...
*/
.non-ios-callout {
	-webkit-touch-callout: none;
}

[theme] {
	/*
		The numbers in the comments behind represent the associated ZUi grayscale (-gs-) color code or
		other color code (with respective abbrevation in front) for light (left) and dark (right) theme.
	*/
	/*Area*/
	--web-color-main-area-bg: var(--zui-semantic-sys--bg--2nd-default--enabled); /*20*/ /*105*/
	--web-color-control-area-bg: var(--zui-semantic-sys--bg--1st-default--enabled); /*10*/ /*100*/
	/*Item*/
	--web-color-main-area-item-bg: transparent;
	--web-color-main-area-item-bg-hover: var(--zui-semantic-sys--bg--2nd-default--hover); /*30*/ /*110*/
	--web-color-main-area-item-bg-selected: var(--zui-semantic-sys--bg--2nd-default--hover); /*30*/ /*110*/
	/*Page Navigation Pill*/
	--web-color-pill-bg: var(--zui-semantic-sys--bg--3rd-default--enabled); /*30*/ /*110*/
	/*Menu Items*/
	--web-special-menu-item-background: var(--zui-semantic-sys--bg--3rd-selected--enabled); /*40*/ /*120*/
	/*Message Box*/
	--web-color-message-bg: var(--zui-semantic-sys--bg--3rd-default--enabled); /*30*/ /*110*/
	--web-color-message-info: var(--zui-semantic-sys--bg--information--enabled); /*pb-100*/ /*pb-90*/
	--web-color-message-warning: var(--zui-core-color-SC-Y-90);
	--web-color-message-error: var(--zui-core-color-SC-R-110);
	/*Text*/
	--web-color-text: var(--zui-semantic-sys--fg--default--enabled); /*100*/ /*50*/
	--web-color-text-title: var(--zui-semantic-sys--fg--highlight--enabled); /*120*/ /*10*/
	--web-color-text-details: var(--zui-core-color-GS-80);
	/*Icon*/
	--web-color-icon: var(--zui-semantic-sys--fg--default--enabled); /*100*/ /*50*/
	--web-color-icon-hover: var(--zui-semantic-sys--fg--default--hover); /*70*/ /*80*/
	--web-color-icon-active: var(--zui-semantic-sys--fg--default--pressed); /*85*/ /*70*/
	--web-color-icon-disabled: var(--zui-semantic-sys--fg--default--disabled); /*100 0.5*/ /*50 0.5*/

	--web-color-icon-primary: var(--zui-semantic-sys--fg--default--enabled); /*100*/ /*50*/
	--web-color-icon-primary-hover: var(--zui-core-color-GS-85);
	--web-color-icon-primary-active: var(--zui-core-color-PB-100);
	--web-color-icon-subtle: var(--zui-core-color-GS-50);
	/*Indicator*/
	--web-color-selected: var(--zui-core-color-PB-100);
	--web-color-selected-hover: var(--zui-core-color-PB-90);
	/*Button*/
	--web-color-highlight-button-bg: var(--zui-semantic-sys--bg--information--enabled);
	--web-color-highlight-button-text: var(--zui-core-color-GS-30);
	/*remove if custom dropdown menus are replaced with zui's select'*/
	--web-color-dropdown-item-bg: var(--zui-semantic-sys--bg--2nd-default--enabled); /*20*/ /*105*/
	--web-color-dropdown-item-bg-hover: var(--zui-semantic-sys--bg--2nd-default--hover); /*30*/ /*110*/
	--web-color-dropdown-item-bg-active: var(--zui-semantic-sys--bg--2nd-default--pressed); /*40*/ /*115*/
}

[theme='light'] {
	/*Background*/
	--web-color-background: var(--zui-core-color-GS-10);
	/*Area*/
	--web-color-page-margin: var(--zui-core-color-GS-40);
	/*Item*/
	--web-color-main-area-item-border: var(--zui-core-color-GS-50);
	/*Page Navigation Pill*/
	--web-color-pill-border: var(--zui-core-color-GS-60);
	/*Table*/
	--web-color-table-line: var(--zui-core-color-GS-40);
	--web-color-table-header: var(--zui-core-color-GS-30);
	--web-color-table-row-alternate: var(--zui-core-color-GS-20);
	--web-color-table-row-highlight: var(--zui-core-color-GS-30);
	/*Text*/
	--web-color-text-active: var(--zui-core-color-GS-85);
	--web-color-text-subtle: var(--zui-core-color-GS-90);
	--web-color-text-disabled: var(--zui-core-color-GS-70);
	/*Login*/
	--web-color-text-login: var(--zui-core-color-GS-120);
	--web-color-text-login-placeholder: var(--zui-core-color-GS-80);
	--web-color-outline-login-hover: var(--zui-core-color-GS-110);
	--web-color-outline-login-focus: var(--zui-core-color-GS-90);
	/*Icon*/
	--web-color-icon-greyed-out: var(--zui-core-color-GS-60);
	--web-color-icon-subtle-hover: var(--zui-core-color-GS-80);
	/*Link*/
	--web-color-link: var(--zui-core-color-PB-110);
	--web-color-link-hover: var(--zui-core-color-PB-80);
	--web-color-link-active: var(--zui-core-color-PB-100);
	/*Indicator*/
	--web-color-confirm: var(--zui-core-color-AC-CG-110);
	--web-color-selectable: var(--zui-core-color-GS-60);
	/*Progress Bar*/
	--web-color-progress-bar-highlight-background: var(--zui-core-color-GS-50);
	--web-color-progress-bar-highlight-foreground: var(--zui-core-color-GS-85);
	--web-color-progress-bar-primary-highlight-background: var(--zui-core-color-GS-50);
	--web-color-progress-bar-primary-highlight-foreground: var(--zui-core-color-PB-100);
	/*Input*/
	--web-color-input-bottom-line: var(--zui-core-color-GS-60);
	--web-color-input-bottom-line-hover: var(--zui-core-color-GS-120);
	--web-color-input-bottom-line-focus: var(--zui-core-color-GS-100);
}

[theme='dark'] {
	/*Background*/
	--web-color-background: var(--zui-core-color-GS-100);
	/*Area*/
	--web-color-page-margin: var(--zui-core-color-GS-90);
	/*Items*/
	--web-color-main-area-item-border: var(--zui-core-color-GS-80);
	/*Page Navigation Pill*/
	--web-color-pill-border: var(--zui-core-color-GS-120);
	/*Table*/
	--web-color-table-line: var(--zui-core-color-GS-110);
	--web-color-table-header: var(--zui-core-color-GS-100);
	--web-color-table-row-alternate: var(--zui-core-color-GS-105);
	--web-color-table-row-highlight: var(--zui-core-color-GS-110);
	/*Text*/
	--web-color-text-active: var(--zui-core-color-GS-70);
	--web-color-text-subtle: var(--zui-core-color-GS-60);
	--web-color-text-disabled: var(--zui-core-color-GS-85);
	/*Login*/
	--web-color-text-login: var(--zui-core-color-GS-20);
	--web-color-text-login-placeholder: var(--zui-core-color-GS-70);
	--web-color-outline-login-hover: var(--zui-core-color-GS-50);
	--web-color-outline-login-focus: var(--zui-core-color-GS-60);
	/*Icon*/
	--web-color-icon-greyed-out: var(--zui-core-color-GS-90);
	--web-color-icon-subtle-hover: var(--zui-core-color-GS-10);
	/*Link*/
	--web-color-link: var(--zui-core-color-PB-80);
	--web-color-link-hover: var(--zui-core-color-PB-70);
	--web-color-link-active: var(--zui-core-color-PB-90);
	/*Indicator*/
	--web-color-confirm: var(--zui-core-color-AC-CG-100);
	--web-color-selectable: var(--zui-core-color-GS-80);
	/*Progress Bar*/
	--web-color-progress-bar-highlight-background: var(--zui-core-color-GS-90);
	--web-color-progress-bar-highlight-foreground: var(--zui-core-color-GS-40);
	--web-color-progress-bar-primary-highlight-background: var(--zui-core-color-GS-90);
	--web-color-progress-bar-primary-highlight-foreground: var(--zui-core-color-PB-90);
	/*Input*/
	--web-color-input-bottom-line: var(--zui-core-color-GS-120);
	--web-color-input-bottom-line-hover: var(--zui-core-color-GS-120);
	--web-color-input-bottom-line-focus: var(--zui-core-color-GS-120);
}