/*** Task List ***/

.content:has(> #tasklistActionsContainer) {
	max-width: 1000px;
}

#tasklistActionsContainer {
	display: flex;
	flex-direction: row;
	gap: 20px;
}

#tasklistActionsContainer > table {
	flex-grow: 1;
}

#tasklistActionsContainer > sl-card {
	width: 300px;
}

@media screen and (max-width: 900px) {
	#tasklistActionsContainer {
		flex-direction: column;
	}

	#tasklistActionsContainer > sl-card.card-header {
		width: auto;
		max-width: 1200px;
		flex-grow: 1;
	}
}


table.tasklist {
	width: 100%;
	border-collapse: collapse;
}

table.tasklist th:first-child,
table.tasklist td:first-child {
	width: 14px;
}

table.tasklist th:last-child,
table.tasklist td:last-child {
	width: 14px;
	text-align: right;
}

table.tasklist th {
	background-color: #f8f9fa;
	border-bottom: 1px solid #e9ecef;
	padding: 10px;
	text-align: left;
}

table.tasklist td {
	border-bottom: 1px solid #e9ecef;
	padding: 10px;
}

table.tasklist tr.clickable,
table.tasklist tr.clickable * {
	cursor: pointer;
}

table.tasklist tr.clickable:hover {
	background-color: #f8f9fa;
}

table.tasklist tr.closed td {
	opacity: 0.6;
}

table.tasklist tr.mandatory * {
	color: #e79c99;
}

table.tasklist tr.open * {
	color: #4a90e2;
}

table.tasklist svg.progressPie {
	width: 20px;
	height: 20px;
	margin: -5px 5px -5px -5px;
}

#tasklistActionsContainer .card-header {
	max-width: 300px;
}

#tasklistActionsContainer .card-header [slot='header'] {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#tasklistActionsContainer .card-header h3 {
	margin: 0;
}

#tasklistActionsContainer .card-header sl-icon-button {
	font-size: var(--sl-font-size-medium);
}

.tinyButton {
	cursor: pointer;
}

svg.progressPie circle.fullCircle {
	stroke: var(--sl-color-primary-200);
}

svg.progressPie circle.percentageCircle {
	stroke: var(--sl-color-primary-800);
}

/*** Process ***/

.validation-toast {
	display: none;
}

.validationError {
	--sl-input-label-color: red;
}

sl-input::part(form-control-label),
sl-textarea::part(form-control-label),
sl-radio-group::part(form-control-label),
sl-select::part(form-control-label) {
	margin-bottom: 6px;
}

sl-radio {
	margin-bottom: 10px;
}

sl-input,
sl-checkbox,
sl-select,
sl-textarea {
	margin-top: 10px;
	margin-bottom: 25px;
}

sl-alert {
	margin-bottom: 25px;
}

#loadingIndicator.htmx-request {
	display: block;
}

div.twocolumns {
	display: flex;
	gap: 2em;
}

div.twocolumns > * {
	flex-grow: 1;
}

#throbber {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 120px;
}

#throbber > div {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

sl-breadcrumb:not(:defined),
sl-checkbox:not(:defined),
sl-radio-group:not(:defined),
sl-textarea:not(:defined),
sl-input:not(:defined),
sl-alert:not(:defined) {
	display: block;
	opacity: 0;
}

.ChUidFieldsContainer {
	display: flex;
	flex-direction: row;
	gap: 5px;
	align-items: baseline;
}

.ChUidFieldsContainer sl-input::part(input) {
	box-sizing: border-box;
	width: 6ch;
	text-align: center;
	padding-left: 0;
	padding-right: 0;
}

sl-checkbox {
	display: block;
}