@font-face {
	font-family: 'Material Symbols Outlined';
	font-style: normal;
	font-weight: 100 700;
	src: url('/Content/fonts/MaterialSymbolsOutlined.woff2') format('woff2');
}

body {
	/* Remove the background from Radzen */
	background: none !important;
}

:root {
	/* Icons */
	--rz-icon-font-family: 'Material Symbols Outlined';
	--rz-icon-size: 20px;
	--rz-body-font-size: 14px;

	/* Colors */
	--rz-primary: #0074b9;
	--rz-primary-lighter: #d0dbf8;
	--rz-primary-light: #009BF7;
	--rz-primary-dark: #00639E;
	--rz-primary-darker: #004D7A;
	--rz-secondary: #62E5CD;
	--rz-secondary-lighter: #B8E6DD;
	--rz-secondary-light: #8AE6D5;
	--rz-secondary-dark: #5AD1BB;
	--rz-secondary-darker: #52BFAB;
	--rz-on-secondary: #000000;

	/* Sidebar menu */
	--rz-sidebar-background-color: #0074b9;
	--rz-panel-menu-background-color: #0074b9;
	--rz-panel-menu-item-border: 1px solid #4c9dce;
	--rz-panel-menu-hover-background-color: #4c9dce;
	--rz-panel-menu-item-background-color: #0074b9;
	--rz-panel-menu-item-padding: 0.75rem 15px;
	--rz-panel-menu-item-2nd-level-hover-background-color: #4c9dce;
	--rz-panel-menu-item-2nd-level-active-background-color: #4c9dce;
	--rz-panel-menu-item-active-background-color: #4c9dce;
	--rz-panel-menu-item-active-indicator: #ffffff;

	/* Sidebar toggle */
	--rz-sidebar-toggle-color: #ffffff;
	--rz-sidebar-toggle-hover-color: #ffffff;
	--rz-sidebar-toggle-background-color: #0074b9;
	--rz-header-background-color: #0074b9;
	--rz-sidebar-toggle-hover-background-color: #0074b9;
	--rz-header-border: 0;
	--rz-sidebar-toggle-border: 0;
	--rz-sidebar-toggle-margin: 0;
	--rz-fieldset-padding: 1rem;
}

.rz-inputtext {
	box-shadow: none;
}

.rz-grid-table thead {
	z-index: 0;
}

.rz-sidebar-toggle {
	width: auto;
}

.rz-splitbutton-menubutton {
	/* Fix the width Bootstrap automatically sets */
	width: auto !important;
}

.rz-dialog {
	width: auto !important;
}

@media (min-width: 1024px) {
	.rz-dialog {
		min-width: 600px;
		max-width: 40%;
		max-height: 80%;
	}

	.rz-dialog-80 {
		max-width: 80%;
	}
}

@media (max-width: 768px) {
	.rz-header, .rz-footer, .rz-body {
		width: 100%;
	}
}