@import url('telerik.css');
@import url('../fonts/font-awesome/css/all.min.css');
@import url('fonts.css');

/* -------------------------------------------------------------------------- */
/* Root Elements */
/* -------------------------------------------------------------------------- */

:root {
	/* Variables */
	/*--kendo-color-primary: var(--color-primary, --kendo-color-primary);*/
	/* Images & Logos */
	--site-logo: transparent url(images/siteLogo.png) no-repeat;
	--sign-in-background: url(images/signInBackground.png) var(--bg-primary);
	/* Background Colors */
	--bg-primary: #003866;
	--bg-subtle: hsl(207, 100%, 30%);
	--bg-light: #FFFFFF;
	--bg-disabled: #A4ACB9;
	--bg-esclated: #FF6A00;
	--bg-routed: #FFA500;
	--bg-overdue: #CC0000;
	--bg-due: #6A6A6A;
	--bg-future: #076B32;
	--bg-assigned-group: #005499;
	--bg-assigned-current: #3376AD;
	--bg-card-primary: #F6F6F6;
	--bg-card-metadata: #D6D6D6;
	--bg-active: #10274b;
	--bg-hover: #6190CA;
	/* Colors */
	--color-primary: var(--kendo-color-primary);
	--color-secondary: var(--kendo-color-secondary);
	--color-secondary-subtle: var(--kendo-color-secondary-subtle);
	--color-secondary-on-surface: var(--kendo-color-secondary-on-surface);
	--color-dark-subtle: var(--kendo-color-dark-subtle);
	--color-info-subtle: var(--kendo-color-info-subtle);
	--color-info-subtle-hover: var(--kendo-color-info-subtle-hover);
	/* Text Colors */
	--text-primary: var(--kendo-color-on-app-surface); /*#333333;*/
	--text-primary-subtle: var(--kendo-color-primary-subtle);
	--text-secondary: var(--kendo-color-secondary); /*#006080;*/
	--text-secondary-subtle: var(--kendo-color-secondary-subtle);
	--text-disabled: #A4ACB9;
	--text-light: #A6CFF9;
	--text-error: var(--kendo-color-error);
	--text-warning: var(--kendo-color-warning);
	--text-information: var(--kendo-color-info);
	/* Border Radius */
	--border-radius-none: var(--kendo-border-radius-none);
	--border-radius-xs: var(--kendo-border-radius-xs);
	--border-radius-sm: var(--kendo-border-radius-sm);
	--border-radius-md: var(--kendo-border-radius-md);
	--border-radius-lg: var(--kendo-border-radius-lg);
	--border-radius-xl: var(--kendo-border-radius-xl);
	--border-radius-xxl: var(--kendo-border-radius-xxl);
	--border-radius-xxxl: var(--kendo-border-radius-xxxl);
	--border-radius-full: var(--kendo-border-radius-full);
	/* Spacing */
	--spacing-0: var(--kendo-spacing-0);
	--spacing-1: var(--kendo-spacing-1);
	--spacing-2: var(--kendo-spacing-2);
	--spacing-3: var(--kendo-spacing-3);
	--spacing-4: var(--kendo-spacing-4);
	--spacing-5: var(--kendo-spacing-5);
	--spacing-6: var(--kendo-spacing-6);
	--spacing-7: var(--kendo-spacing-7);
	--spacing-8: var(--kendo-spacing-8);
	--spacing-9: var(--kendo-spacing-9);
	--spacing-10: var(--kendo-spacing-10);
	--spacing-11: var(--kendo-spacing-11);
	--spacing-12: var(--kendo-spacing-12);
	--spacing-13: var(--kendo-spacing-13);
	--spacing-14: var(--kendo-spacing-14);
	/* Letter Spacing */
	--letter-spacing-tightest: var(--kendo-letter-spacing-tightest);
	--letter-spacing-tighter: var(--kendo-letter-spacing-tighter);
	--letter-spacing-tight: var(--kendo-letter-spacing-tight);
	--letter-spacing-normal: var(--kendo-letter-spacing-normal);
	--letter-spacing-wide: var(--kendo-letter-spacing-wide);
	--letter-spacing-wider: var(--kendo-letter-spacing-wider);
	--letter-spacing-widest: var(--kendo-letter-spacing-widest);
	/* Font Sizes */
	--font-size-xxs: var(--kendo-font-size-xxs);
	--font-size-xs: var(--kendo-font-size-xs);
	--font-size-sm: var(--kendo-font-size-sm);
	--font-size-md: var(--kendo-font-size-md);
	--font-size-lg: var(--kendo-font-size-lg);
	--font-size-xl: var(--kendo-font-size-xl);
	--font-size-xxl: 4.8rem;
	/* Font Weights */
	--font-weight-thin: var(--kendo-font-weight-thin);
	--font-weight-extra-light: var(--kendo-font-weight-extra-light);
	--font-weight-light: var(--kendo-font-weight-light);
	--font-weight-normal: var(--kendo-font-weight-normal);
	--font-weight-medium: var(--kendo-font-weight-medium);
	--font-weight-semibold: var(--kendo-font-weight-semibold);
	--font-weight-bold: var(--kendo-font-weight-bold);
	/* Fonts */
	--icon-font: "Font Awesome 6 Pro", "Font Awesome 6 Duotone", "Font Awesome 6 Brands";
	--body-font: "roboto", "Segoe UI", Arial, Helvetica, sans-serif;
	font-size: 62.5%;
}

	:root body {
		margin: 0;
		font-size: var(--font-size-md);
		color: var(--text-primary);
		scroll-behavior: smooth;

		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: subpixel-antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

/* -------------------------------------------------------------------------- */
/* Main Elements */
/* -------------------------------------------------------------------------- */

*, *:before, *:after {
	box-sizing: border-box;
	text-size-adjust: 100%
}

.js-focus-visible :focus:not(.focus-visible) {
	outline: none;
}

html, body {
	font-family: var(--body-font);
	margin: 0;
	height: 100vh;
	line-height: var(--font-lineheight-1);
	font-size: 1.4rem;
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	overflow-y: scroll;
	padding: 0;
}

dd {
	margin-bottom: 0.5rem;
	margin-inline-start: 0;
}

hr {
	border: none;
	border-block-start: 0.1rem solid var(--color-dark-subtle);
}

#app {
	height: 100vh;
}

.divider {
	border-bottom: 0.1rem solid rgba(0, 0, 0, 0.0625);
	border-bottom-width: 0.1rem;
	border-bottom-style: solid;
	border-bottom-color: rgba(0, 0, 0, 0.063);
	height: 0.1rem;
	overflow: hidden;
}

/* -------------------------------------------------------------------------- */
/* Container Styling */
/* -------------------------------------------------------------------------- */
.accordion {
	width: min(100%, 600px);
	margin: 2rem auto;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

	/* Hide the checkbox inputs */
	.accordion input {
		display: none;
	}

	/* Style the labels to look like headers */
	.accordion label {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 20px;
		background: #f8f9fa;
		cursor: pointer;
		font-weight: 500;
		color: #2c3e50;
		border-bottom: 1px solid #edf2f7;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

		/* Add arrow indicator */
		.accordion label::after {
			content: '↓';
			font-size: 1.2em;
			transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		}

	/* Rotate arrow when expanded */
	.accordion input:checked + label::after {
		transform: rotate(180deg);
	}

	/* Change background on hover */
	.accordion label:hover {
		background: #edf2f7;
		color: #1a365d;
	}

	/* Style the content sections */
	.accordion .content {
		max-height: 0;
		overflow: hidden;
		background: #ffffff;
		transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		transform-origin: top;
		transform: scaleY(0);
		opacity: 0;
	}

	/* Content expansion animation */
	.accordion input:checked + label + .content {
		max-height: 500px;
		padding: 20px;
		transform: scaleY(1);
		opacity: 1;
	}

	/* Add bounce effect to label */
	.accordion input:checked + label {
		background: #e2e8f0;
		animation: bounce 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	/* Content styling */
	.accordion .content p {
		margin: 0;
		line-height: 1.6;
		color: #4a5568;
	}

	/* Add hover state to content */
	.accordion .content:hover {
		background: #fafafa;
	}


/* -------------------------------------------------------------------------- */
/* Grid Elements */
/* -------------------------------------------------------------------------- */

.main-grid {
	height: 100%;
}

/* -------------------------------------------------------------------------- */
/* Column Elements */
/* -------------------------------------------------------------------------- */

.logo-column {
	padding-inline-start: 2rem;
	overflow: hidden;

	display: flex;
	flex-direction: row;
	align-items: center;
}

.profile-column {
	height: 100%;
	border-left: 0.1rem solid hsl(207, 100%, 80%);

	display: flex;
	flex-direction: row;
	align-items: center;
}

.menu-container {
	display: flex;
	align-items: center;
}

.menu-column {
	height: 100%;
	background-color: var(--bg-primary);
	transition: width 300ms ease;
}

.content-column {
}

/* -------------------------------------------------------------------------- */
/* Account Menu */
/* -------------------------------------------------------------------------- */



/* -------------------------------------------------------------------------- */
/* Navigation Menu */
/* -------------------------------------------------------------------------- */

.nav-menu-link-icon,
.nav-menu-link-text {
	font-size: 1.4rem;
	align-self: center;
	text-align: center;
	vertical-align: middle;
	height: auto;
}




.main-layout.rtl .settings-menu {
	right: initial;
	left: -1rem;
}

	.main-layout.rtl .settings-menu:before {
		left: initial;
		right: 23.8rem;
	}
	.main-layout.rtl .settings-menu:after {
		left: initial;
		right: 23.8rem;
	}

/* -------------------------------------------------------------------------- */
/* Personalisation Wizard */
/* ---------------------------------------------------------------------------*/
.personalisation-window {
	border-radius: var(--border-radius-xl);
}

.personalisation-window .k-window-titlebar {
	border-start-start-radius: var(--border-radius-xl);
	border-start-end-radius: var(--border-radius-xl);
}

/* -------------------------------------------------------------------------- */
/* Menu Overflows */
/* -------------------------------------------------------------------------- */

.overflow-menu {
	background-color: ghostwhite;
	border-bottom-color: antiquewhite;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	margin-bottom: 1rem;
}

.overflowed {
	font-size: 1.4rem;
	text-align: center;
	color: dimgray !important;
}

.overflowed a:visited {
	color: dimgray !important;
}

.overflowed .nav-link:hover {
	background-color: rgba(255, 255, 255, 0.1) !important;
}

/* -------------------------------------------------------------------------- */
/* Extra small devices (480px) */
/* -------------------------------------------------------------------------- */

@media (max-width: 480px) {
	.accordion {
		margin: 1rem auto;
	}

		.accordion label {
			padding: 10px 14px;
			font-size: 0.9rem;
		}

		.accordion .content {
			font-size: 0.85rem;
		}

		.accordion input:checked + label + .content {
			padding: 14px;
			max-height: 300px; /* Adjusted for smaller screens */
		}

	/* Smaller bounce on mobile */
	@keyframes bounce {
		0%, 100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-1px);
		}
	}
}

/* -------------------------------------------------------------------------- */
/* Extra small devices (phones, 600px and down) */
/* -------------------------------------------------------------------------- */
/*Burger Only*/
@media only screen and (max-width: 600px) {
	.userIdentity {
		display: contents;
		content: "600";
	}
}

/* -------------------------------------------------------------------------- */
/* Small devices (portrait tablets and large phones, 600px and up) */
/* -------------------------------------------------------------------------- */

/*Burger Only*/
@media only screen and (min-width: 600px) {
	.userIdentity {
		display: contents;
		content: "600+";
	}
}

/* -------------------------------------------------------------------------- */
/* Medium devices (landscape tablets, 768px and up) */
/* -------------------------------------------------------------------------- */

/*Hide Welcome*/
@media only screen and (min-width: 768px) {
	.userIdentity {
		display: contents;
		content: "768+";
	}

	.accordion label {
		padding: 12px 16px;
		font-size: 0.95rem;
	}

	.accordion .content {
		font-size: 0.9rem;
	}

	.accordion input:checked + label + .content {
		padding: 16px;
	}
}

/* -------------------------------------------------------------------------- */
/* Large devices (laptops/desktops, 992px and up) */
/* -------------------------------------------------------------------------- */

/*Hide Welcome*/
@media only screen and (min-width: 992px) {
	.userIdentity {
		display: contents;
		content: "992+";
	}
}

/* -------------------------------------------------------------------------- */
/* Extra large devices (large laptops and desktops, 1200px and up) */
/* -------------------------------------------------------------------------- */

/*Full display*/
@media only screen and (min-width: 1200px) {
	.userIdentity {
		display: contents;
		content: "1200+";
	}
}




/* -------------------------------------------------------------------------- */
/* Old styles - Still to be cleaned */
/* -------------------------------------------------------------------------- */

img {
	max-width: 100%;
	height: auto;
}

.btn-link {
	color: #0366d6;
	text-decoration: none;
}

.loading-progress {
	position: relative;
	display: block;
	width: 8rem;
	height: 8rem;
	margin: 20vh auto 1rem auto;
}

	.loading-progress circle {
		fill: none;
		stroke: #e0e0e0;
		stroke-width: 0.6rem;
		transform-origin: 50% 50%;
		transform: rotate(-90deg);
	}

		.loading-progress circle:last-child {
			stroke: #1b6ec2;
			stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
			transition: stroke-dasharray 0.05s ease-in-out;
		}

.loading-progress-text {
	position: absolute;
	text-align: center;
	font-weight: bold;
	inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

	.loading-progress-text:after {
		content: var(--blazor-load-percentage-text, "Loading");
	}

/* General Anchor styling */

a, a:visited {
	text-decoration: none;
	color: #006080;
	font-weight: 400;
}

	a:hover {
		color: #5d9ccf;
	}

	a.control {
		text-transform: lowercase;
	}

	a:disabled,
	a:visited:disabled,
	a[disabled],
	a:visited[disabled] {
		color: var(--bg-disabled);
		cursor: default;
		pointer-events: none;
	}

.btn-primary {
	color: #fff;
	background-color: #1b6ec2;
	border-color: #1861ac;
}

.search-field {
	min-width: 13.5rem;
	width: 75%;
	font-size: 1.3rem;
	padding-right: 2.5rem;
}

/* Processware Task form (TF) input(textbox),
	input(spinbutton), textarea, select general styling */
.tf-control input[role=textbox],
.tf-control input[role=spinbutton],
.tf-control .tf-text-block textarea, .tf-control select {
	font-size: var(--font-size-xl);
	padding-block-start: var(--spacing-2);
	padding-block-end: var(--spacing-2);
}

	.tf-control .tf-browse{

	}

	input[type=submit],
	input[type=button],
	a.button,
	div.task-button,
	button.button {
		cursor: pointer;
		background: hsl(207, 100%, 30%);
		color: #fff;
		border: 0.1rem solid hsl(207, 100%, 25%);
		border-radius: var(--spacing-2);
		font-size: 1.1rem;
		font-weight: 400;
		padding: 1rem 1.5rem;
		min-width: 7rem;
		font-family: var(--body-font);
	}

		input[type=text]:disabled,
		input[type=number]:disabled,
		input[type=password]:disabled,
		input[type=button]:disabled,
		textarea:disabled,
		select:disabled, select[disabled] {
			border: 0.1rem solid var(--bg-disabled);
			color: var(--bg-disabled);
			background: var(--bg-disabled);
			box-shadow: 0 0 0 #333 !important;
			cursor: default;
			pointer-events: none;
		}

		input[type=checkbox]:disabled,
		input[type=radio][disabled]  {
			color: var(--bg-disabled);
			cursor: default;
			pointer-events: none;
		}

.predecessors {
	display: grid;
	grid-gap: 1rem;
	height: 100%;
	width: 100%;
	grid-template-columns: auto 2fr;
	grid-template-rows: auto;
	grid-template-areas: "branch-steps .";
}

.branch-step-list {
	overflow-x: hidden;
	overflow-y: scroll;
	background: #f6f6f6;
	height: 100%;
	width: auto;
}

.branch-step-detail {
	padding: 1.5rem;
	overflow-y: scroll;
	overflow-x: hidden;
}

.branch-steps {
	list-style: none;
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	flex-wrap: nowrap;
	justify-content: flex-start;
	justify-items: flex-start;
	align-items: center;
	padding: 1.5rem;
	grid-area: branch-steps;
}
	.branch-step {
		background-color: #dddddd;
		padding: 1rem 1.5rem 1rem 1.5rem;
		max-width: 13em;
		line-height: 1em;
		display: flex;
		flex-direction: column;
		flex: 0 0 auto;
		justify-content: flex-start;
		justify-items: center;
		align-items: flex-start;
		border-radius: 0.3rem;
		overflow: hidden;
		margin-bottom: 0.8rem;
		box-shadow: 0 0.1rem 0.2rem 0 rgb(0 0 0 / 10%);
	}

		.branch-step .step {
			font-weight: 700;
		}

		.branch-step .step-title
		{
			font-weight: 500;
			margin-bottom: 1rem;
			word-wrap: break-word;
			line-height: 1.9rem;
			word-break: break-word;
		}

		.branch-step .step,
		.branch-step .meta {
			display: block;
			font-size: 1.1rem;
			clear: both;
		}

		.branch-step .step {
			font-weight: 700;
		}

		.branch-step .meta {
			display: flex;
			flex-direction: column;
			flex: 0 0 auto;
			justify-content: flex-start;
			justify-items: center;
			align-items: flex-start;
			font-weight: 400;
		}

		.branch-step.selected {
			cursor: default;
			background-color: hsl(207, 100%, 30%);
		}

			.branch-step.selected *{
				color: #fff;
			}

.column-group,
.control-grid {
	width: 100%;
	margin-bottom: 1rem;
	border-radius: 0.3rem;
	box-shadow: 0 0.1rem 0.2rem 0 rgba(0, 0, 0, 0.1);
}

	.column-group > .column-group-header,
	.control-grid > .control-grid-header {
		height: auto;
		overflow: hidden;
		min-height: 0;
		padding: 0.5em;
		border-radius: 0.3rem 0.3rem 0 0;
		background-color: hsl(207, 100%, 30%);
		color: #fff;
		display: flex;
		flex: 0 0 auto;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
	}

	.column-group .column-group-title,
	.control-grid .control-grid-title {
		width: 80%;
		word-wrap: break-word;
		padding-left: 1rem;

		font-size: 1.5rem;
		font-weight: 400;
		color: #fff;
		white-space: normal;
	}

	.column-group .column-group-buttons,
	.control-grid .control-grid-buttons {
		z-index: 20;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		padding-right: 1rem;
		padding-left: 1rem;
		display: flex;
		margin: 0;
		flex: 0 0 auto;
		flex-direction: row;
		align-items: center;
		justify-items: flex-start;
		flex-wrap: nowrap;
	}

		.column-group .column-group-buttons button,
		.control-grid .control-grid-buttons button {
			background-color: #fff;
			color: hsl(207, 100%, 25%);
			font-size: 1.1rem;
			font-weight: 700;
			font-family: "Font Awesome 6 Pro", "Font Awesome 6 Duotone", "Font Awesome 6 Brands";
			border-radius: 0;
			padding: 0.7rem;
			min-width: 4rem;
			box-shadow: 0 0.1rem 0.2rem 0 rgba(0, 0, 0, 0.1);
			cursor: pointer;
			padding: 0.7rem;
			min-width: 4rem;
		}

		.column-group button,
		.control-grid button {
			cursor: pointer;
			background: hsl(207, 100%, 30%);
			border: 0.1rem solid hsl(207, 100%, 25%);
		}

			.column-group button[disabled],
			.control-grid button[disabled] {
				cursor: default;
				box-shadow: none;
				cursor: default;
				pointer-events: none;
				background: #DDD;
			}

				.column-group button[disabled]:hover,
				.control-grid button[disabled]:hover {
					cursor: default;
					box-shadow: none;
					cursor: default;
					pointer-events: none;
					background: #DDD;
				}

			.column-group .column-group-buttons button:hover,
			.control-grid .control-grid-buttons button:hover {
				border: none;
				background-color: #3376ad;
				color: #fff;
				-moz-box-shadow: 0 0 0.7rem #333 !important;
				-webkit-box-shadow: 0 0 0.7rem #333 !important;
				box-shadow: 0 0 0.7rem #333 !important;
				background-color: #3376ad;
				z-index: inherit;
			}

			.column-group .column-group-buttons button:not(:first-of-type):not(:last-of-type),
			.control-grid .control-grid-buttons button:not(:first-of-type):not(:last-of-type) {
				border-left: 0.1rem solid hsl(207, 100%, 25%);
				border-top: 0.1rem solid hsl(207, 100%, 25%);
				border-bottom: 0.1rem solid hsl(207, 100%, 25%);
				border-right: none;
			}

			.column-group .column-group-buttons button:first-of-type,
			.control-grid .control-grid-buttons button:first-of-type {
				border-left: 0.1rem solid hsl(207, 100%, 25%);
				border-top: 0.1rem solid hsl(207, 100%, 25%);
				border-bottom: 0.1rem solid hsl(207, 100%, 25%);
				border-right: none;
				border-radius: 0.8rem 0 0 0.8rem;
			}

			.column-group .column-group-buttons button:last-of-type,
			.control-grid .control-grid-buttons button:last-of-type {
				border-left: 0.1rem solid hsl(207, 100%, 25%);
				border-top: 0.1rem solid hsl(207, 100%, 25%);
				border-bottom: 0.1rem solid hsl(207, 100%, 25%);
				border-right: 0.1rem solid hsl(207, 100%, 25%);
				border-radius: 0 0.8rem 0.8rem 0;
			}

			.column-group > .column-group-content,
			.control-grid > .control-grid-content {
				background: #fbfbfb;
				overflow: auto;
				padding: 0.5rem 1rem 1rem 1rem;
				max-height: 100%;
				border-bottom-left-radius: 0.3rem;
				border-bottom-right-radius: 0.3rem;
			}

				.column-group > .column-group-content > table,
				.control-grid > .control-grid-content > table {
					width: 100%;
				}

				.column-group > .column-group-content th,
				.control-grid > .control-grid-content th {
					border-bottom: 0.1rem solid #808080;
				}

					.column-group > .column-group-content th:not(:last-of-type),
					.control-grid > .control-grid-content th:not(:last-of-type) {
						border-right: 0.1rem solid #999999;
					}

				.column-group > .column-group-content td,
				.control-grid > .control-grid-content td {
					padding: 0.7rem;
					vertical-align: middle;
					background: #fbfbfb;
					margin: 0;
					text-align: left;
					font-size: 1.2rem;
					white-space: nowrap;
					overflow: hidden;
				}

				.column-group > .column-group-content td:not(:last-of-type),
				.control-grid > .control-grid-content td:not(:last-of-type) {
					border-right: 0.1rem solid #e9e9e9;
				}

				.column-group > .column-group-content .column-group-header,
				.control-grid > .control-grid-content .control-grid-header {
					border-right: 0.1rem solid #999999;
				}

				.column-group > .column-group-content .column-group-caption,
				.control-grid > .control-grid-content .control-grid-caption {
					padding: 0.5rem;
					text-align: center;

					font-size: 1.1rem;
					font-weight: 500;
					background: #fff;
					color: hsl(207, 100%, 25%);
				}

.result-cards {
	margin-top: 2rem;
	display: grid;
	grid-area: itemList;
	grid-gap: 0.5em;
}

	.result-card {
		display: grid;
		width: 100%;
		grid-template-areas: "primaryContent additionalContent";
		grid-template-columns: 2fr 1fr;
		grid-template-rows: auto;
		align-items: center;
		align-content: center;
		justify-content: flex-start;
		border-radius: 0.3rem;
		box-shadow: 0 0.1rem 0.2rem 0 rgba(0, 0, 0, 10%);

		border-end-end-radius: 0.5rem;
	}

	.result-card:hover {
	}

	.result-card-link:hover,
	.result-card-link:hover .result-card-description {
		color: #5d9ccf;
		cursor: pointer;
	}

	.result-card-link[disabled]:hover,
	.result-card-link[disabled]:hover .result-card-description {
		cursor: default;
	}

	.result-card-description {
		font-size: 2.6rem;
		display: inline-block;
		max-width: 99%;
		word-wrap: break-word;
		color: #006080;
		font-weight: 300;
	}

	.result-card-primary-content {
		height: 100%;
		padding: 0.8rem 1rem;
		color: var(--text-primary);
		background-color: var(--bg-card-primary);
	}

		.result-card-primary-content > div > label {
			margin-right: 0.3rem;
			font-size: 1.1rem;
			font-weight: 400;
			color: var(--text-primary);
		}

		.result-card-primary-content > div > span {
			margin-right: 0.3rem;
			display: inline-block;
			font-size: 1.2rem;
			font-weight: 700;
			color: var(--text-primary);
		}

	.result-card-primary-content .id > span {
		color: #000000;
		font-size: 1.1rem;
		margin-right: 0;
		font-weight: 500;
		display: inline-block;
	}

	.result-card-primary-content > a {
		font-size: 2.6rem;
		font-weight: 300;
		display: inline-block;
		max-width: 99%;
		word-wrap: break-word;
		padding-bottom: 0.8rem;
	}

div.id {
}

	.id span {
		color: #000000;
		font-size: 1.1rem;
		margin-right: 0;
		font-weight: 500;
		display: inline-block;
	}

/*.details {
	border-top-left-radius: 0.4rem;
	border-bottom-left-radius: 0.4rem;
	height: 100%;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	min-width: 10rem;
	grid-area: taskDetails;
	padding: 0.8rem 1rem;
}*/

	.details > a {
		font-size: 2.6rem;
		font-weight: 300;
		display: inline-block;
		max-width: 99%;
		word-wrap: break-word;
	}

		.taskInstance-status {
			grid-area: taskStatus;
			display: inline-flex;
			flex: 0 0 auto;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
		}

		.taskInstance-status {
			color: #fff;
			font-weight: 400;
			margin-right: 0.3rem;
		}

		.originator {
			padding-bottom: 0.5rem;
		}

			.originator label {
				font-weight: 400;
				font-size: 1.1rem;
				color: #666666;
				margin-right: 0.3rem;
			}

			.originator span {
				font-weight: 500;
				font-size: 1.2rem;
				display: inline-block;
				margin-right: 0.3rem;
				color: #595959;
			}

.result-card-additional-content {
	min-width: 7rem;
	width: 100%;
	height: 100%;
	padding: 1rem;
	padding-top: 1.25rem;
	overflow: hidden;
	background-color: var(--bg-card-metadata);

	border-end-end-radius: 0.5rem;
	border-start-end-radius: 0.5rem;
}

		.result-card-additional-content div {
		}

		.result-card-additional-content label {
			font-size: 1.1rem;
			font-weight: 400;
			color: #666666;
			margin-right: 0.3rem;
		}

		.result-card-additional-content span {
			font-size: 1.2rem;
			font-weight: 700;
			color: #595959;
		}


.task-instance-summary-overdue-button,
.task-instance-summary-duetoday-button,
.task-instance-summary-other-button,
.task-instance-summary-total-button {
	width: 100%;
}

	.task-instance-summary-overdue-button .count-button,
	.task-instance-summary-duetoday-button .count-button,
	.task-instance-summary-other-button .count-button,
	.task-instance-summary-total-button .count-button {
		width: 100%;
		justify-content: stretch;
	}

	.count-button-items {
		width: 100%;
		justify-items: flex-end;
	}

	.count-button .count-button-number {
		font-size: var(--font-size-xxl);
	}

	.count-button .count-button-item-icon {
		font-size: calc(var(--font-size-xl) + 1rem);
		align-content: center;
		justify-self: flex-start;
	}


.breadcrumb {
	font-size: 1.1rem;
	color: #333;
	display: flex;
	flex: 0 0 auto;
	flex-direction: row;
}

	.breadcrumb-item.active{
		font-weight: 700;
		max-width: 100%;
		word-wrap: break-word;
	}

	.breadcrumb > i {
		padding-right: 0.5rem;
	}

header h3 {
	font-size: 1.2rem;
	margin-top: 0;
	margin-bottom: 1rem;
	font-weight: 500;
	color: hsl(207, 100%, 25%);
}

.valid.modified:not([type=checkbox]) {
	outline: 0.1rem solid #26b050;
}

.invalid {
	outline: 0.1rem solid var(--red-9);
}

.validation-errors {
	color: var(--red-9);
}

#blazor-error-ui {
	background: lightyellow;
	bottom: 0;
	box-shadow: 0 -0.1rem 0.2rem rgba(0, 0, 0, 0.2);
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

	#blazor-error-ui .dismiss {
		cursor: pointer;
		position: absolute;
		right: 0.75rem;
		top: 0.5rem;
	}

.blazor-error-boundary {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
	padding: 1rem 1rem 1rem 3.7rem;
	color: white;
}

	.blazor-error-boundary::after {
		content: "An error has occurred."
	}

/*
	Modal Styling
*/

.modal {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.25);
	animation-name: appear;
	animation-duration: 300ms;
}

.modal-dialog {
	width: 80%;
	max-width: none;
	background: white;
	position: relative;
	margin: 0 2rem;
	max-height: calc(100vh - 4rem);
	text-align: left;
	display: flex;
	flex-direction: column;
	border-radius: 0.3rem;
	overflow: hidden;
	box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.2), 0 0.6rem 2rem 0 rgba(0, 0, 0, 0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: slide-in;
	animation-duration: 0.5s;
}

.modal-header,
.modal-footer {
	display: flex;
	align-items: center;
	padding: 1rem;
}

.modal-header {
	border-bottom: 0.1rem solid #dbdbdb;
	justify-content: space-between;
	background: hsl(207, 100%, 30%);
	color: #fff;
}

	.modal-header .modal-title {
		border: none;
		font-size: 1.5rem;
		font-weight: 400;
	}

.modal-footer {
	border-top: 0.1rem solid #dbdbdb;
	justify-content: flex-end;
}

.modal-close {
	cursor: pointer;
	padding: 1rem;
	margin: -1rem -1rem -1rem auto;
}

.modal-body {
	overflow: auto;
	padding: 0;
}

.modal-content {
	border: none;
}

/* ------------------------------------------------------------------------ */
/* Animations */
/* ------------------------------------------------------------------------ */

@keyframes appear {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes slide-in {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes bounce {
	0%, 100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-2px);
	}
}

@keyframes slideDown {
	from {
		transform: translateY(-10px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.browse-page {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.25);
	animation-name: appear;
	animation-duration: 300ms;
}

.browse-page-modal {
	width: 100%;
	max-width: 550px;
	background: white;
	position: relative;
	margin: 0 20px;
	max-height: calc(100vh - 40px);
	text-align: left;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: slide-in;
	animation-duration: 0.5s;
}

.browse-page-header,
.browse-page-footer {
	display: flex;
	align-items: center;
	padding: 1rem;
}

.browse-page-header {
	border-bottom: 1px solid #dbdbdb;
	justify-content: space-between;
}

.browse-page-footer {
	border-top: 1px solid #dbdbdb;
	justify-content: flex-end;
}

.browse-page-close,
.browse-page-first,
.browse-page-previous,
.browse-page-next,
.browse-page-last {
	cursor: pointer;
	padding: 1rem;
	margin: -1rem -1rem -1rem auto;
}

.browse-page-body {
	overflow: auto;
}

.browse-page-content {
	padding: 1rem;
}

.browse-button,
.column-group .browse-button,
.control-grid .browse-button  {
	border: none;
	background: transparent;
}
	.browse-button:hover {
		cursor: pointer;
	}

	.browse-button:focus {
		outline: 0;
		text-decoration: none;
	}

	.browse-button:after {
		content: "\f2d2";
		font-family: var(--icon-font);
		font-weight: 400;
	}

@keyframes appear {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg)
	}

	100% {
		transform: rotate(360deg)
	}
}

.browse-start-processes-container {
}

.step-completed {
	font-size: 1.1rem;
	margin-bottom: 1rem;
}

	.step-completed > .sub-header {
		font-weight: 400;
		font-size: 1.1rem;
	}

	.step-completed > span {
		max-width: 20rem;
		padding-right: 0.5rem;
		font-weight: 500;
	}

#browse-start-processes .step-completed .sub-header,
#browse-start-processes .step-completed span,
#browse-start-processes .step-completed .browse-step-restart {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.browse-step-restart {
	max-width: 20rem;
	padding-right: 0.5rem;
	text-decoration: underline;
	color: #00749b;
	font-weight: 400;
	text-decoration: none;
}
	.browse-step-restart:hover {
		color: #5d9ccf;
		text-decoration: none;
		cursor: pointer;
	}

.tick-mark,
.correct-mark,
.green {
	color: #51a351;
}

.form-view,
.form-edit {
	padding-top: 1.1rem;
}

.forms-layout {
	display: grid;
	grid-gap: 1rem;
	min-width: 30vw;
	max-width: 75vw;
}

	.forms-layout > button {
		width: fit-content;
	}

.taskInstance-description {
	color: hsl(207, 100%, 25%);
	margin: 0;
	font-weight: 300;
	margin-top: 0;
	font-size: 3.2rem;
	border-bottom: 0.1rem solid #f6f6f6;
	max-width: 100%;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
}

.form-page > .page-grid {
	table-layout: fixed;
}

.metadata {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: -0.5rem;
}

.meta-item {
	font-size: 1.1rem;
	color: #404040;
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
}

	.meta-item > .meta-value {
		font-weight: 500;
		padding-right: 0.2rem;
	}

.tf-form-commands {
	/*margin-top: 1rem;
	padding-left: 0.4rem;
	display: flex;
	flex: 0 0 auto;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: flex-start;*/
}

	.tf-form-commands > .tf-command {
		/*margin-right: 0.5rem;*/
	}

		.tf-form-commands > .tf-command:hover,
		.tf-form-commands > .tf-form-reset:hover {
			/*-moz-box-shadow: 0 0 0.7rem #333;
			-webkit-box-shadow: 0 0 0.7rem #333;
			box-shadow: 0 0 0.7rem #333;
			border: 0.1rem solid #2d699a;
			background-color: #3376ad;
			color: #fff;
			z-index: inherit;*/
		}

.control-cell {
	min-height: 3rem;
	padding-bottom: 0.3rem;
}

	.tf-control-caption > .tf-label {
		font-size: 1.1rem;
		font-weight: 500;
	}

	.tf-control-caption .required:after {
		color: #CC0000;
		content: "*";
		margin-left: 0.3rem;
	}

	.control-field {
		font-size: 1.2rem;
	}

		.control-field > .label-control {
			font-size: inherit;
			font-weight: 300;
		}

	.tf-validation {
		color: var(--text-error);
		font-size: var(--font-size-fluid-1);
	}


.tf-columns, .tf-grid {
	width: 100%;
	margin-bottom: 1rem;
	border-radius: 0.3rem;
	box-shadow: 0 0.1rem 0.2rem 0 rgba(0, 0, 0, 0.1);
}

	.tf-columns .tf-columns-header,
	.tf-grid .tf-grid-header {
		height: auto;
		min-height: 0;
		padding: 0.5em;
		border-radius: 0.3rem 0.3rem 0 0;
		background-color: hsl(207, 100%, 30%);
		color: #fff;

		display: flex;
		flex: 0 0 auto;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
	}

		.tf-columns .tf-columns-header .tf-columns-header-title,
		.tf-grid .tf-grid-header .tf-grid-header-title {
			width: 80%;
			-ms-word-wrap: inherit;
			word-wrap: inherit;
			padding-inline-start: 1rem;


			font-size: 1.5rem;
			font-weight: 400;
			color: #fff;
			white-space: normal;
		}

	.tf-columns-body-container,
	.tf-grid-body-container{
		overflow-x: auto;
		padding-inline-start: 1rem;
		padding-inline-end: 1rem;
		padding-block-start: 0.5rem;
		padding-block-end: 1rem;

		width: 100%;
	}

	.tf-columns .tf-columns-body,
	.tf-grid .tf-grid-body {
		background: #fbfbfb;

		max-height: 100%;

		border-end-start-radius: 0.3rem;
		border-end-end-radius: 0.3rem;

		min-width: max-content;
		white-space: nowrap;
		border-collapse: collapse;
	}

	.tf-columns-body-container .noItems,
	.tf-grid-body-container .noItems {
		padding-block-start: var(--spacing-6);
		color: #666;
		font-size: var(--font-size-lg);
		font-weight: var(--font-weight-semibold);
	}

	.tf-columns .tf-columns-body .tf-columns-body-header th,
	.tf-grid .tf-grid-body .tf-grid-body-header th {
		font-size: 1.1rem;
		font-weight: 500;
		background: #fff;
		color: hsl(207, 100%, 25%);
		position: sticky;
		top: 0;
		z-index: 10;
		text-align: center;
		vertical-align: middle;
		justify-items: center;

		padding: var(--spacing-2);
		border-bottom: 0.1rem solid #808080;

		overflow: hidden;
	}

	.tf-columns th:not(:last-of-type),
	.tf-grid th:not(:last-of-type) {
		border-inline-end: 0.1rem solid #999999;
	}

	.tf-columns .tf-columns-body td,
	.tf-grid .tf-grid-body td {
		border-collapse: collapse;
		border-end-start-radius: 0.3rem;
		border-end-end-radius: 0.3rem;

		text-align: center;
		vertical-align: middle;
		justify-items: center;

		padding: var(--spacing-2);
	}

	.tf-columns td:not(:last-of-type),
	.tf-grid td:not(:last-of-type) {
		border-inline-end: 0.1rem solid #e9e9e9;
	}

.dashboardQuickActions li {
	margin: 0.3rem 0;
	margin: 0 0.3
	white-space: nowrap;
	overflow: hidden;
	max-width: 100%;
	-ms-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	list-style: none;
}

.dashboardQuickActions li a {
	text-decoration: none;
	text-transform: none;
	font-size: 1.1rem;
	color: #333;
	font-weight: 400;
}

.dashboardQuickActions li a:hover {
	color: #5d9ccf;
}

.gauges-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 0.5rem;
	justify-content: flex-start;
	align-content: flex-start;
}

.gauges-wrapper {
	box-shadow: 0 0.1rem 0.2rem 0 rgba(0, 0, 0, 0.1);
	height: 100%;
	padding: 1rem 2rem 1rem 2rem;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: min-content auto;
	grid-gap: 0.5rem;
	border-radius: 0.3rem;
	background-color: #f6f6f6;
}

	.gauges-wrapper a {
		cursor: pointer;
		max-width: 100%;
		height: 100%;
		white-space: nowrap;
	}

	.gauges-wrapper > header h3 {
		font-size: 1.2rem;
		margin-top: 0;
		font-weight: 500;
		color: hsl(207, 100%, 25%);
		max-width: 76rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.gauges-wrapper a > .gauge {
		display: grid;
		grid-template-areas: "icon number number" "status status status" "link link link";
		grid-template-columns: repeat(3, minmax(5rem, 1fr));
		grid-template-rows: auto min-content min-content;
		grid-auto-flow: column;
		grid-gap: 0.3rem;
		justify-items: flex-end;
		align-items: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding: 1rem;
		border-radius: 0.3rem;
	}

	.gauges-wrapper a > .gauge i {
		grid-area: icon;
		opacity: 0.3;
		justify-self: flex-start;
		font-size: 5em;
	}

	.gauges-wrapper .plainTile {
		background-color: #fafafa;
		color: inherit;
	}

	.gauges-wrapper .other {
		background-color: #aaaaaa;
		color: #4d4d4d;
	}

	.gauges-wrapper .all {
		background-color: #e2e2e2;
		color: #333;
	}

	.gauges-wrapper a div > .number {
		grid-area: number;
		grid-column: 1 / 4;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		max-width: 100%;
		line-height: 1;
		padding: 0 0.1rem 0 0.1rem;
		font-size: 4.8rem;
		font-weight: 300;
	}

	.gauges-wrapper a .other div {
		background-color: transparent;
		color: #ffffff;
	}

	.gauges-wrapper .other .link {
		color: #e9e9e9;
		font-weight: 500;
		background-color: transparent;
	}

	.gauges-wrapper .all .link {
		color: #aaaaaa;
		font-weight: 500;
	}

	.gauges-wrapper .status {
		grid-area: status;
		grid-column: 1 / 4;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-bottom: 0.2rem;
		font-size: 1.3rem;
	}

	.gauges-wrapper .link {
		text-transform: lowercase;
		font-size: 1.1rem;
		font-weight: 700;
		grid-area: link;
		grid-column: 1 / 4;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-bottom: 0.2rem;
	}

	.gauges-wrapper a:disabled,
	.gauges-wrapper a[disabled],
	.gauges-wrapper a.selected {
		cursor: default;
		pointer-events: none;
		border-radius: 0.3rem;
		color: #DDD;
	}

	.gauges-wrapper a:hover > div {
		-moz-box-shadow: 0 0 0.5rem #333;
		-webkit-box-shadow: 0 0 0.5rem #333;
		box-shadow: 0 0 0.5rem #333;
		border-radius: 0.3rem;
	}

#newProcessSection .taskButtons {
	padding: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex: 0 0 auto;
	justify-content: flex-start;
	align-content: flex-start;
	align-items: flex-start;
	white-space: normal;
}

.processGroupButtons .button,
.processButtons .button,
.taskButtons .button,
.taskButtons .task-button {
	align-content: center;
	align-items: center;
	justify-content: center;
	justify-items: center;
	background: hsl(207, 100%, 30%);
	color: #fafafa;
	word-break: break-word;
	overflow-wrap: break-word;
	word-wrap: break-word;
	text-overflow: ellipsis;
	overflow: hidden;
	line-height: 1.5em;
	vertical-align: middle;
	font-size: 1.3rem;
	text-align: center;
}

body input[type=submit],
body input[type=button],
body .button,
body button.button {
	cursor: pointer;
	background: hsl(207, 100%, 30%);
	color: #fff;
	border: 0.1rem solid hsl(207, 100%, 25%);
	border-radius: 0.3rem;
	min-width: 7rem;
}
	.button.primary-button {
		font-size: 1.2rem;
		font-weight: 400;
		padding: 1rem 1.5rem;
		max-width: 100%;
	}

	.button.secondary-button {
		padding: 0.8rem 2rem;
		font-size: 1rem;
		max-width: 100%;
	}

.processGroupButtons .button:before,
.processButtons .button:before,
.taskButtons .button:before,
.taskButtons .task-button:before {
	font-size: 2.1rem;
	font-family: var(--icon-font);
	background: #4d93cc; /*CSS variable needed */
	height: 100%;
	font-weight: 400;
	vertical-align: middle;
	text-align: center;
	justify-self: center;
	align-self: center;
	align-content: center;
	align-items: center;
	display: inline-grid;
	width: 100%;
	position: relative;
}

.processGroupButtons .button,
.processButtons .button,
.taskButtons .button,
.taskButtons .task-button {
	align-content: center;
	align-items: center;
	justify-content: center;
	justify-items: center;
	background: hsl(207, 100%, 30%); /*CSS variable required*/
	color: #fafafa;
	word-break: break-word;
	overflow-wrap: break-word;
	word-wrap: break-word;
	text-overflow: ellipsis;
	overflow: hidden;
	padding: 0 0 0 0;
	line-height: 1.5em;
	vertical-align: middle;
	font-size: 1.3rem;
	text-align: center;
}

.processGroupButtons,
.processButtons,
.taskButtons {
	position: relative;
	list-style-type: none;
	padding: 0.5em;
	display: flex;
	gap: 1rem;
	flex: 1 1 auto;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0;
}

/*	.processGroupButtons li,
	.processButtons li,
	.taskButtons li {
		padding: 0.5em;
	}*/



.button:hover, .task-button:hover {
	box-shadow: 0 0 0.7rem #333 !important;
	border: 0.1rem solid #2d699a;
	background-color: #3376ad; /*CSS variable required*/
	color: #fff;
	z-index: inherit;
}

.button-icon, .task-button-icon {
	font-size: 2.8rem;
	background: #4d93cc; /*CSS variable required*/
	align-content: center;
	align-items: center;
	display: flex;
	height: 100%;
	width: 100%;
	justify-content: center;
}

.button-text, .task-button-text {
	padding-inline-start: 2rem;
	padding-inline-end: 2rem;
}

.main-content-page {
	background: #fff;
	padding: var(--spacing-7);
	position: relative;
	display: flex;
	flex-direction: column;
}

.paging {
	font-size: 1.1rem;
	color: #666666;
	text-align: center;
	display: grid;
	grid-template-areas: "pagingItemNumbers pagingSortBy pagingSortBy";
	grid-template-columns: auto auto auto;
	grid-template-rows: auto;
	align-items: center;
	grid-gap: 1rem;
}

.paging div {
	font-size: inherit;
	display: flex;
	flex: 0 0 auto;
	flex-direction: row;
	align-items: center;
}

.paging .pagingItemNumbers {
	justify-content: flex-start;
	flex-wrap: wrap;
	grid-area: pagingItemNumbers;
}

.paging .pagingSortBy {
	justify-content: flex-end;
	grid-area: pagingSortBy;
	flex-wrap: nowrap;
}

.paging .pagingItemNumber {
	font-weight: 700;
	color: #000000;
	margin-right: 0.5rem;
	margin-left: 0.5rem;
}

.paging.bottom {
	grid-template-areas: "pagingItemNumbers pagingPageSize pagingPrevNrNext";
	grid-template-columns: auto auto auto;
}

.pagingPageSize {
	justify-content: center;
	grid-area: pagingPageSize;
}

.pager-prev-nr-next {
	justify-content: flex-end;
	grid-area: pagingPrevNrNext;
}

	.pager-prev-nr-next span {
		font-weight: 700;
		margin-left: 0.5rem;
		margin-right: 0.5rem;
	}


.pendingTasks-container,
.startedProcesses-container,
.startedTasks-container,
.completedProcesses-container,
.completedTasks-container {
	display: grid;
	grid-template-areas: "sidebar pendingGauges" "sidebar itemList";
	grid-template-columns: auto 1fr;
	grid-template-rows: auto 1fr;
	grid-gap: 1rem;
	justify-items: flex-start;
	align-items: flex-start;
}

	.pendingTasks-container nav {
		margin-bottom: 0;
		grid-area: pendingGauges;
		width: 100%;
		padding-right: 0.5rem;
	}

		.pendingTasks-container nav .gauges-wrapper {
			display: grid;
			grid-template-areas: "header header header header" ". . . .";
			grid-template-columns: repeat(4, 1fr);
			grid-template-rows: auto auto;
			grid-gap: 0.5rem;
			justify-items: flex-start;
			justify-content: flex-start;
			align-items: center;
			align-content: center;
			overflow: hidden;
			padding: 0.5rem;
		}

		.gauges-wrapper a div i {
			font-size: 2.6rem;
			opacity: 0.4;
			grid-area: icon;
			justify-self: flex-start;
		}

		.pendingTasks-container nav .gauges-wrapper a {
			margin-bottom: 0;
			width: 100%;
			max-width: 100%;
		}

		.pendingTasks-container nav .gauges-wrapper > header {
			width: auto;
			align-self: center;
			grid-area: header;
		}
			.pendingTasks-container nav .gauges-wrapper .notFiltered {
				padding: 1rem;
				border-radius: 0.3rem;
			}

			.pendingTasks-container nav .gauges-wrapper .overdue {
				background-color: #CC0000;
				color: #fff;

			}

			.pendingTasks-container .pendingTaskSelector {
				border-radius: 0.3rem;
			}

.gauges-wrapper .notFiltered {
	display: grid;
	grid-template-areas: "icon number number" "status status status";
	grid-template-columns: repeat(3, minmax(5rem, 1fr));
	grid-template-rows: auto min-content;
	height: 100%;
	grid-auto-flow: column;
	grid-gap: 0.3rem;
	justify-items: flex-end;
	align-items: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sidebar {
	width: 20rem;
	padding: 0;
	display: block;
	grid-area: sidebar;
}

.sidebarFilters {
	border-radius: 0.3rem;
	background-color: #f6f6f6;
	--bg-primary: #f6f6f6;
	margin-top: 0;
}

.sidebarFiltersForm {
	display: grid;
	grid-gap: 0.4rem;
}

	.sidebarFiltersForm header {
		font-size: 1.3rem;
	}

	.sidebarFiltersForm > header > h3 > a {
		padding-left: 0.5rem;
		text-decoration:auto none;
		font-size: 1.1rem;
		font-weight: 400;
	}

	.sidebarFiltersForm div label,
	.sidebarFiltersForm div span,
	.sidebarFiltersForm div input,
	.sidebarFiltersForm div select {
		font-size: 1.1rem;
	}

	.sidebarFiltersForm div label,
	.sidebarFiltersForm div span {
		font-weight: 500;
		margin-top: 0.5rem;
		margin-bottom: 0.3rem;
	}

	.sidebarFiltersForm input[type="text"],
	.sidebarFiltersForm input[type="date"],
	.sidebarFiltersForm input[type="number"] {
		padding: 0.5rem 0.5rem;
	}

	.sidebarFiltersForm input[type="text"],
	.sidebarFiltersForm input[type="date"],
	.sidebarFiltersForm input[type="number"],
	.sidebarFiltersForm select {
		width: 95%;
	}

	.sidebarFiltersForm > .filterButtons {
		display: grid;
		grid-gap: 0.6rem;
		margin-top: 1rem;
	}

	.sidebarFiltersForm .button.secondary-button {
		max-width: 50%;
	}

.search-results {
	width: 80%;
}

	.search-results-header {
		font-size: 2.2rem;
		font-weight: 300;
		color: hsl(207, 100%, 15%);
	}

		.search-results-header > h2 {
			font-weight: 300;
			font-size: 2.2rem;
		}

.item-list {
	display: grid;
	grid-area: itemList;
	grid-gap: 0.5em;
}

.startNewProcess-container {
	display: grid;
	grid-template-areas: "favouriteTasks-container favouriteTasks-container mostUsedTasks-container mostUsedTasks-container" "browseProcess-container browseProcess-container browseProcess-container browseProcess-container";
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto auto;
	grid-gap: 1rem;
}

.favouriteTasks-container {
	grid-area: favouriteTasks-container;
}

.browseProcess-container {
	grid-area: browseProcess-container;
}

.container-description {
	text-overflow: ellipsis;
	white-space: normal;
	margin-bottom: 0.5rem;
	justify-content: flex-start;
	align-items: center;
	font-size: 1.3rem;
	font-weight: 400;
}

.container-action-link {
	font-size: 1.1rem;
	text-transform: lowercase;
}

/* Process Start - Filter */

.filter {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: flex-start;
	align-content: center;
	align-items: center;
}

/*.filter-input {
	padding: 0.75rem;
	font-size: var(--font-size-3);
}*/

/* Apply the animation when an item is selected */
.browse-step > div:not([hidden]) /*.process-groups,
.browse-step > div:not([hidden]) .processes,
.browse-step > div:not([hidden]) .tasks*/ {
	animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	/*opacity: 1;*/
}

i.help-spaced,
i.help,
i.help-inline {
	display: inline-block;
	color: grey;
	cursor: help;
}

i.help {
	font-size: 1.3rem;
}

i.help-inline {
	font-size: 1.8rem;
}

i.help-spaced {
	margin-top: 2.2rem;
	margin-left: 1rem;
}