/* Elements converted from <div> to <button> keep their original div presentation.
   Buttons that already existed before that conversion keep the browser and
   reset.css defaults their component rules were written against. Zero
   specificity lets every component rule win. */
:where(button:not(.button_standard, .wizard-inline-action, .wizard-row-remove, .logout-button, .menu-action,
	.greybox, .member-current-absence-card, .member-time-leave-member-open, .member-time-leave-daily-open,
	.member-time-leave-absence-open, .salary-action, .org-dashboard-section-toggle, .ticket-pin-toggle,
	.header-language-menu button, [class*="ui-"])) {
	appearance: none;
	display: block;
	box-sizing: content-box;
	border: 0;
	padding: 0;
	background-color: transparent;
	color: inherit;
	text-align: inherit;
	cursor: pointer;
}

/* reset.css gives buttons a fixed font; converted elements inherit like divs. */
button { font: inherit; }
button:where(.button_standard, .wizard-inline-action, .wizard-row-remove, .logout-button, .menu-action,
	.greybox, .member-current-absence-card, .member-time-leave-member-open, .member-time-leave-daily-open,
	.member-time-leave-absence-open, .salary-action, .org-dashboard-section-toggle, .ticket-pin-toggle,
	.header-language-menu button, [class*="ui-"]) { font: 99% sans-serif; }

/*------------------------------
=BASIC SETUP
------------------------------*/

/* Theme files set --p-* tokens. The app uses this stable semantic interface. */
:root {
	--p-org: #1ccfc9;
	--p-font-body-size: 14px;
	--p-font-body-line: 22px;
	--p-font-ui-family: Helvetica, Arial, sans-serif;
	--p-font-display-family: Helvetica, Arial, sans-serif;
	--p-border-width: 1px;
	--p-border-width-2: 2px;
	--p-radius-2: 2px;
	--p-radius-3: 3px;
	--p-radius-4: 4px;
	--p-radius-5: 6px;
	--p-radius-6: 8px;
	--p-radius-8: 10px;
	--p-radius-10: 12px;
	--p-radius-15: 18px;
	--p-radius-pill: 999px;
	--resource-action-collapsed-width: 15px;
	--p-entity-client: #27ae60;
	--p-entity-client-hover: #2ecc71;
	--p-entity-client-guest: #69e29c;
	--p-entity-client-border: #27ae60;
	--p-entity-finance: #176b73;
	--p-entity-finance-hover: #20868f;
	--p-entity-timesheet: #e4644b;
	--p-entity-timesheet-hover: #e48d7c;
	--p-entity-project: #237fd0;
	--p-entity-project-hover: #458fd0;
	--p-entity-project-guest: #4ca7e2;
	--p-entity-project-border: #2980b9;
	--p-entity-task: #4c87ab;
	--p-entity-task-hover: #7099b3;
	--p-entity-category: #e63838;
	--p-entity-category-hover: #e66363;
	--p-entity-category-guest: #e5868e;
	--p-entity-category-border: #d92231;
	--p-entity-bill: #987ad4;
	--p-entity-bill-hover: #b29fd8;
	--p-entity-archived: #aaa;
	--p-entity-archived-hover: #888;
	--p-action-danger: var(--p-error-dark);
	--p-action-danger-text: var(--p-surface-1);
	--color-org-global: var(--p-org);
	--color-background-mainmenu: var(--p-mainmenu);
	--color-background-primary: var(--p-surface-1);
	--color-background-secondary: var(--p-surface-2);
	--color-background-tertiary: var(--p-surface-3);
	--color-background-quaternary: var(--p-surface-4);
	--color-background-item: var(--p-item);
	--color-background-item-low-priority: var(--p-item-low);
	--color-background-item-low-priority-hover: var(--p-item-low-hover);
	--color-background-item-high-priority: var(--p-item-high);
	--color-background-item-high-priority-hover: var(--p-item-high-hover);
	--color-text-primary: var(--p-text-1);
	--color-text-secondary: var(--p-text-2);
	--color-border-highlight: var(--p-accent);
	--color-success-bright: var(--p-success-bright);
	--color-success-dark: var(--p-success-dark);
	--color-warning-bright: var(--p-warning-bright);
	--color-warning-dark: var(--p-warning-dark);
	--color-error-bright: var(--p-error-bright);
	--color-error-dark: var(--p-error-dark);
	--font-body-size: var(--p-font-body-size);
	--font-body-line: var(--p-font-body-line);
	--font-ui-family: var(--p-font-ui-family);
	--font-display-family: var(--p-font-display-family);
	--color-border-primary: var(--p-ui-panel-border);
	--color-highlight: var(--p-accent);
	--border-width: var(--p-border-width);
	--border-width-2: var(--p-border-width-2);
	--radius-2: var(--p-radius-2);
	--radius-3: var(--p-radius-3);
	--radius-4: var(--p-radius-4);
	--radius-5: var(--p-radius-5);
	--radius-6: var(--p-radius-6);
	--radius-8: var(--p-radius-8);
	--radius-10: var(--p-radius-10);
	--radius-15: var(--p-radius-15);
	--radius-pill: var(--p-radius-pill);
	--shadow-xs: var(--p-shadow-xs);
	--color-ui-panel: var(--p-ui-panel);
	--color-ui-panel-border: var(--p-ui-panel-border);
	--color-ui-hover: var(--p-ui-hover);
	--color-menu-text: var(--p-menu-text);
	--color-menu-shell: var(--p-menu-shell);
	--color-menu-hover: var(--p-menu-hover);
	--color-menu-active: var(--p-menu-active);
	--scrollbar-thumb: var(--p-scrollbar-thumb);
	--color-progress-fill: var(--p-progress-fill);
	--target-progress-base: 0%;
	--target-progress-remainder: 100%;
	--target-progress-delta: 0%;
	/* The target signals of the active chart palette (public/chart_palettes.css). */
	--color-target-progress-base: var(--chart-neutral, #3F3F7B);
	/* The unfilled part of a target bar. Most themes use the card colour for tertiary,
	   so a share of the secondary text colour keeps the track visible in every theme. */
	--color-target-progress-rest: color-mix(in srgb, var(--color-text-secondary) 22%, var(--color-background-tertiary));
	--color-target-progress-over: var(--chart-negative, #e33955);
	--color-target-progress-quota-over: var(--chart-positive, #2EEA8C);
	--color-target-progress-task: #278192;
	--color-plan-milestone: #6a51a3;
	--color-plan-receipt: #2171b5;
	--color-absence-progress-taken: #3F3F7B;
	--color-absence-progress-over: #e33955;
	--color-table-border: var(--p-table-border);
	--color-tooltip-bg: var(--p-tooltip-bg);
	--color-tooltip-text: #fff;
	--color-action-danger: var(--p-action-danger);
	--color-action-danger-text: var(--p-action-danger-text);
	--entity-client: var(--p-entity-client);
	--entity-client-hover: var(--p-entity-client-hover);
	--entity-client-guest: var(--p-entity-client-guest);
	--entity-client-border: var(--p-entity-client-border);
	--entity-finance: var(--p-entity-finance);
	--entity-finance-hover: var(--p-entity-finance-hover);
	--entity-timesheet: var(--p-entity-timesheet);
	--entity-timesheet-hover: var(--p-entity-timesheet-hover);
	--entity-project: var(--p-entity-project);
	--entity-project-hover: var(--p-entity-project-hover);
	--entity-project-guest: var(--p-entity-project-guest);
	--entity-project-border: var(--p-entity-project-border);
	--entity-task: var(--p-entity-task);
	--entity-task-hover: var(--p-entity-task-hover);
	--entity-category: var(--p-entity-category);
	--entity-category-hover: var(--p-entity-category-hover);
	--entity-category-guest: var(--p-entity-category-guest);
	--entity-category-border: var(--p-entity-category-border);
	--entity-bill: var(--p-entity-bill);
	--entity-bill-hover: var(--p-entity-bill-hover);
	--entity-archived: var(--p-entity-archived);
	--entity-archived-hover: var(--p-entity-archived-hover);
}

.practice-transition-hosts,
.practice-transition-review-project {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.practice-transition-eligibility-help {
	margin: -10px 0 20px;
	color: var(--color-text-secondary);
	font-size: 16px;
	line-height: 22px;
}

/* The first colors of the active chart palette under its selector on the settings page. The palette
   includes the override by colour-vision assistance, so the row shows what the charts use. A palette
   can have fewer than eight colors. */
.chart-palette-swatches {
	display: flex;
	height: 14px;
	margin: 8px 0 12px;
}

.chart-palette-swatches > span {
	flex: 0 0 32px;
}

.chart-palette-swatches > span:nth-child(1) { background-color: var(--chart-series-1); }
.chart-palette-swatches > span:nth-child(2) { background-color: var(--chart-series-2); }
.chart-palette-swatches > span:nth-child(3) { background-color: var(--chart-series-3); }
.chart-palette-swatches > span:nth-child(4) { background-color: var(--chart-series-4); }
.chart-palette-swatches > span:nth-child(5) { background-color: var(--chart-series-5); }
.chart-palette-swatches > span:nth-child(6) { background-color: var(--chart-series-6); }
.chart-palette-swatches > span:nth-child(7) { background-color: var(--chart-series-7); }
.chart-palette-swatches > span:nth-child(8) { background-color: var(--chart-series-8); }

.chart-palette-cvd-note {
	display: none;
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--color-text-secondary);
}

html[data-cvd="1"] .chart-palette-cvd-note {
	display: block;
}

.user-practice-transition-section {
	max-width: 760px;
	margin: 28px 0 32px;
}

.user-organization-dashboard-invitations {
	margin: 0 0 24px 20px;
}

.user-organization-dashboard-invitation {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 760px;
	min-height: 50px;
	padding: 6px 0;
}

.user-organization-dashboard-invitation-details {
	flex: 1 1 360px;
	min-width: 0;
}

.user-organization-dashboard-invitation-host {
	overflow: hidden;
	line-height: 20px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.user-organization-dashboard-invitation-help {
	max-width: 540px;
	color: var(--color-text-secondary);
	font-size: 12px;
	line-height: 16px;
}

.user-organization-dashboard-invitation-actions {
	display: flex;
	flex: 0 1 220px;
	gap: 10px;
}

.user-organization-dashboard-invitation-actions .button_standard {
	flex: 1 1 100px;
	min-width: 0;
}

.user-organization-dashboard-invitations-empty {
	color: var(--color-text-secondary);
	font-style: italic;
}

.user-organization-dashboard-graphs > p,
.user-practice-transition-section > p,
.user-practice-transition-section > div {
	margin-left: 20px;
}

.user-practice-transition-lead {
	max-width: 680px;
	line-height: 1.55;
}

.user-practice-transition-status,
.user-practice-transition-note {
	margin-top: 18px;
	padding: 14px 16px;
	border-left: 4px solid var(--color-success-dark);
	background: var(--color-background-secondary);
}

.user-practice-transition-status p {
	margin-bottom: 4px;
}

.user-practice-transition-status small {
	color: var(--color-text-secondary);
}

/* The action starts at the left edge of the paragraphs above it. */
.user-practice-transition-section .practice-transition-launch {
	width: auto;
	margin: 14px 0 0 20px;
	font-size: 14px;
	text-align: left;
}

@media (max-width: 900px) {
	.user-organization-dashboard-invitation {
		align-items: stretch;
		flex-direction: column;
		gap: 8px;
	}

	.user-organization-dashboard-invitation-details,
	.user-organization-dashboard-invitation-actions {
		flex-basis: auto;
		width: 100%;
	}
}

.practice-transition-project {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 8px 4px;
}

.practice-transition-project-select-all {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 2px;
	padding: 6px 4px 10px;
	border-bottom: 1px solid var(--color-ui-panel-border);
	font-weight: bold;
}

.practice-transition-boundary {
	margin-top: 18px;
	padding: 14px 16px;
	border-left: 4px solid var(--color-notice, #2f9d68);
	background: var(--color-ui-panel);
}

.practice-transition-dashboard {
	max-width: 760px;
	margin: 14px 0 22px;
	padding: 14px 18px;
	border: 1px solid var(--color-ui-panel-border);
	border-radius: 4px;
}

.practice-transition-request {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 10px 0;
}

.practice-transition-request small {
	display: block;
	margin-top: 4px;
	color: var(--color-text-secondary);
}

.practice-transition-rate {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-left: 28px;
}

.practice-transition-rate > span {
	flex: 1 1 140px;
	min-width: 140px;
}

.practice-transition-rate > .organization-input {
	flex: 0 1 160px;
	min-width: 100px;
}

html[data-cvd="1"] {
	--p-accent: #0072a5;
	--p-success-bright: #9ce49c;
	--p-success-dark: #2dac56;
	--p-warning-bright: #ffdcaa;
	--p-warning-dark: #ffa500;
	--p-error-bright: #f08c7f;
	--p-error-dark: #a01010;
}

html[data-theme="light"][data-cvd="1"] {
	--p-success-bright: #dff5ec;
	--p-success-dark: #16845c;
}

@font-face {
	font-family: 'Pacifico';
	font-style: normal;
	font-weight: 400;
	src: local('Pacifico Regular'), local('Pacifico-Regular'), url(/fonts/google_pacificio.woff) format('woff');
}

html {
	width: 100%;
	height:100%;
}

footer, header, section, aside, nav, article {
	display: block;
}

body {
	font-size: var(--font-body-size);
	line-height: var(--font-body-line);
	font-family: var(--font-ui-family);
	background-color: var(--color-background-primary);
	color: var(--color-text-primary);
}

/* Optional: headings / “display” elements */
h1, h2, h3, .display {
	font-family: var(--font-display-family);
}

@view-transition {
	navigation: auto;
}

::view-transition-group(root) {
	animation: .2s;
}

header {
	width: 100%;
}

main {
	display: flex;
	flex: 1;
	overflow-y: auto;
}

main a {
	color: var(--color-text-secondary);
}

h1, h2 {
	font-size: 28px;
	/*line-height: 44px;*/
	padding: 22px 0;
}

h3 {
	font-size: 18px;
	line-height: 22px;
	padding: 22px 22px 22px 0;
}

h4 {
	font-size: 16px;
	line-height: 15px;
	padding: 20px 0 8px;
}

em {
	font-style:  italic;
}

p {
	margin: 1em 0;
}

progress {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	background: var(--color-background-secondary);
	color: var(--color-progress-fill);
	border: 1px solid var(--color-background-quaternary);
}

progress::-webkit-progress-bar {
	background: var(--color-background-secondary);
}
progress::-webkit-progress-value {
	border-radius: 0;
	background: var(--color-progress-fill);
}
progress::-ms-fill {
	border-radius: 0;
	background: var(--color-progress-fill);
}
progress::-moz-progress-bar {
	border-radius: 0;
	background: var(--color-progress-fill);
}

select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
}

input:not([type=checkbox]):not([type='range']) {
	-moz-appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
	text-rendering: auto;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-indent: 0;
	text-shadow: none;
	display: inline-block;
}

input:not([type=checkbox]):not([type='range']):not([type='number']) {
	appearance: textfield;
}

textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
	text-rendering: auto;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-indent: 0;
	text-shadow: none;
	background-color: transparent;
	color: var(--color-text-primary);
}

textarea:focus {
	border: 2px solid var(--color-org-global);
}

rect:hover {
	fill: var(--color-org-global);
}

/*------------------------------
=BASIC: SCROLLBARS
------------------------------*/

/*------------------------------
=SCROLLBARS: FIREFOX
------------------------------*/
/*
@-moz-document url-prefix() {
* {
		scrollbar-width: thin;
		scrollbar-color: var(--scrollbar-thumb) transparent;
	}
}
*/

/*------------------------------
=SCROLLBARS: CHROME
------------------------------*/
::-webkit-scrollbar {
	width: .5rem;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb);
	border-radius: var(--radius-pill);
}

.HolyGrail {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#contentcontainer {
	display: flex;
	width: 100%;
}

#content {
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	font-size: 16px;
	width: 100%;
	padding-top: 30px;
	padding-left: 3%;
	padding-right: 3%;
	padding-bottom: 50px;
	flex: 4.5;
	overflow-y: auto;
	/*zoom: .8; -moz-transform: scale(.8); -moz-transform-origin: 0 0*/
}

/* Single-line labels truncate here; feature rules only define their size. */
.text-crop,
header .menu-button > .menu-text,
.modalContainer .select2-container--default .select2-selection--multiple .select2-selection__choice,
.accordion-header .title,
.accordion-header .subtitle,
.resource-box-top-center,
.resource-box-item-title > :is(div, span, button):not(.resource-action.remove),
.resource-box-item-info-role,
.logbookentry .logdate,
.logbookentry .logmessage,
.expense-description,
.ratedetails-mainrate div,
.ratedetails-relativerates div,
.ts_mikron .info,
.ts_mikron .info div,
.ts_mikron.compact .info,
.ts_mikron.compact .info div,
.mikron-bookmark-editor-name,
.mikron-bookmark-label-container .mikron-bookmark-editor-item .label-name,
.modal-ticket-assignresource .preliminary-label .label-name,
.bill :is(div, span),
.billgen-table-description,
.bill-reduction-project-header strong,
.bill-reduction-target-copy strong,
.bill-reduction-target-copy small,
.modalContainer .template-tile-name,
.modalContainer .template-tile-caption {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.markupresult {
	margin-bottom: 10px;
	line-height: 16px;
	overflow: auto;
	max-height: 600px;
	overflow-y: auto;
	min-height: 40px;
}

.markupresult:hover,
.modal-description:hover {
	background-color: var(--color-background-tertiary);
	border-radius: var(--radius-3);
}

.markupresult p {
	margin: 0;
}

.diff{overflow:auto;}
.diff ul{overflow:auto;font-size:13px;list-style:none;margin:0;padding:0;display:table;width:100%;}
.diff del, .diff ins{display:block;text-decoration:none;}
.diff li{padding:0; display:table-row;margin: 0;height:1em;}
.diff li.ins,
.expense-status-closed { background: var(--color-success-bright); color: var(--color-success-dark); }
.diff li.del,
.expense-status-open { background: var(--color-error-bright); color: var(--color-error-dark); }
.diff li:hover{background:var(--color-warning-bright)}
/* try 'whitespace:pre;' if you don't want lines to wrap */
.diff del, .diff ins, .diff span{white-space:pre-wrap;font-family:courier;}
.diff del strong{font-weight:normal;background:var(--color-error-bright);}
.diff ins strong{font-weight:normal;background:var(--color-success-bright);}
.diff li.diff-comment { display: none; }
.diff li.diff-block-info { background: none repeat scroll 0 0 var(--color-background-quaternary); }

/*------------------------------
=UI COMPONENTS
------------------------------*/

/*------------------------------
=FLASH MESSAGES
------------------------------*/

.formerror {
	border: 2px solid red !important;
}

.flashmessages {
	text-align: center;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
}

.flashmessages.flash-leaving {
	opacity: 0;
	transition: opacity .8s;
}

/* Notifications stay outside the modal's inert background. */
#tt-notifications {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1100;
	display: flex;
	flex-direction: column;
	pointer-events: none;
}

#tt-toasts,
#tt-errors {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#tt-errors:not(:empty) + #tt-toasts:not(:empty) {
	margin-top: 8px;
}

.flash-message {
	position: relative;
	display: flex;
	align-items: center;
	text-align: center;
}

.flash-content {
	flex: 1;
	min-width: 0;
	padding: 0 24px;
	overflow-wrap: anywhere;
}

.flash-dismiss {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	padding: 2px;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	font-size: 20px;
	line-height: 20px;
	white-space: nowrap;
}

.field-error {
	color: var(--color-error-dark);
	font-size: 0.9em;
	margin: 4px 0 8px;
}

[aria-invalid="true"] {
	outline: 2px solid var(--color-error-dark);
	outline-offset: 1px;
}

.notice {
	flex: 1;
	padding: 10px;
	border: 1px solid var(--color-success-dark);
	background: var(--color-success-bright);
	color: var(--color-success-dark);
}

.error {
	flex: 1;
	padding: 10px;
	border: 1px solid var(--color-error-dark);
	background: var(--color-error-bright);
	color: var(--color-error-dark);
}

.warning {
	flex: 1;
	padding: 10px;
	border: 1px solid var(--color-warning-dark);
	background: var(--color-warning-bright);
	color: var(--color-warning-dark);
}

.hidden {
	display: none;
}

/*------------------------------
=ITEMS
------------------------------*/

.items {
	flex-direction: column;
	align-items: center;
	background: var(--color-background-secondary);
	padding: 10px 10px 5px 10px;
}

.item {
	width: 100%;
	background-color: var(--color-background-item);
	cursor: pointer;
	margin-bottom: 6px;
}

.item:hover {
	background-color: var(--color-ui-hover);
}

.item a {
	text-decoration: none;
}

/*------------------------------
=HEADER
------------------------------*/

.header-top {
	display: flex;
	align-items: center;
	background-color: var(--color-org-global);
	height: 55px;
}

.header-top a {
	color: var(--color-text-primary);
	text-decoration: none;
}

#header-left {
	flex: 1 0;
	text-align: left;
	padding-left: 10px;
}

#header-center {
	flex: 1 0;
	text-align: center;
}

#header-right {
	flex: 1 0;
	text-align: right;
	padding-right: 10px;
}

#header-bottom-container {
	height: 7px;
	background-color: var(--color-org-global);
}

#header-bottom {
	height: 100%;
	width: 100%;
	background-color: #000000;
	opacity: .2;
}

.appname {
	font: 400 100px/1.3 'Pacifico', Helvetica, sans-serif;
	font-size: 38px;
	opacity: .7;
	margin-bottom: 8px;
	cursor: pointer;
}

.appname a {
	color: black;
}

.appname:hover {
	opacity: .9;
}

#org_info {
	display: flex;
	justify-content: flex-start;
}

#login_info {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.smalltext {
	display: none;
}
header .menu-button {
	position: relative;
	box-sizing: border-box;
	overflow: visible;
	border-radius: var(--radius-3);
	transition: .3s ease;
	-webkit-transition: .3s ease;
	border:1px solid  var(--color-background-primary);
	color: var(--color-background-primary);
	font-size: 14px;
	font-weight:bold;
	padding: 0 10px;
	height: 30px;
	cursor: pointer;
}

header .menu-button .menu-text {
	height: 20px;
	padding-top: 5px;
}

html:is([data-theme="light"], [data-theme="dark"]) #org_info > .header-organization-switcher {
	border-right-width: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

html:is([data-theme="light"], [data-theme="dark"]) #org_info > .header-organization-switcher + a > .menu-button {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

header .menu-button > .menu-text {
	overflow: hidden;
}

header .menu-button:hover {
	background-color: rgba(0,0,0,.2);
}

header .menu {
	display: none;
	position: absolute;
	top: 100%;
	margin-top: 7px;
	font-weight: normal;
}

.header_menu_right {
	right: 0;
}

.header_menu_left {
	left: 0;
}

.absence-entry-group .menu,
header .menu, .accordion .menu, .item .menu {
	box-sizing: border-box;
	width: 220px;
	max-width: calc(100vw - 20px);
	padding: 6px;
	border: 1px solid var(--color-ui-panel-border);
	border-radius: var(--radius-5);
	background: var(--color-background-primary);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
	color: var(--color-text-primary);
	font-size: 14px;
	line-height: 1.35;
	text-align: left;
}

/* An open header menu stays above the notification stack. */
header .menu-button.open .menu {
	display: block;
	z-index: 1200;
}

header .menu > a,
.accordion .menu > :is(div, button) > a,
.item .menu > :is(div, button) > a {
	display: block;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.absence-entry-group .menu > button,
header .menu > a > div, header .menu > details > summary, header .menu > form > button, header .menu > button, .accordion .menu > :is(div, button), .item .menu > :is(div, button) {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	width: 100%;
	min-height: 38px;
	padding: 8px 10px;
	border: 0;
	border-radius: var(--radius-3);
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1.35;
	text-align: left;
	white-space: normal;
	overflow-wrap: anywhere;
	cursor: pointer;
}

header .menu > a:hover > div,
header .menu > details > summary:hover,
header .menu > form > button:hover,
header .menu > button:hover,
.accordion .menu > :is(div, button):hover,
.item .menu > :is(div, button):hover,
.absence-entry-group .menu > button:hover {
	background-color: var(--color-ui-hover);
}

header .menu > a[aria-current="page"] > div {
	background-color: color-mix(in srgb, var(--color-org-global) 16%, var(--color-background-primary) 84%);
	font-weight: 600;
}

.menu-divider {
	height: 1px;
	margin: 6px 4px;
	padding: 0;
	border: 0;
	background: var(--color-ui-panel-border);
}

.menu-action-create::before {
	content: "+";
	display: inline-flex;
	flex: 0 0 20px;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
	font-size: 20px;
	font-weight: 400;
}

/*------------------------------
=LANGUAGE CONTROLS
------------------------------*/

.header-language-control {
	position: relative;
	display: inline-block;
	margin-right: 8px;
	text-align: left;
}

.header-language-control summary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	box-sizing: border-box;
	overflow: hidden;
	padding: 0;
	border-radius: 50%;
	background: transparent;
	font-size: 18px;
	cursor: pointer;
	list-style: none;
	transition: background-color 160ms ease, transform 160ms ease;
}

.header-language-control .language-flag-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 25px;
	transform: scale(1.3);
}

.header-language-control summary::-webkit-details-marker {
	display: none;
}

.header-language-control--login {
	position: fixed;
	top: 8px;
	right: 20px;
	z-index: 100;
	margin: 0;
}

.header-language-control--login .header-language-menu {
	top: 44px;
}

.header-language-menu {
	position: absolute;
	top: 38px;
	right: 0;
	z-index: 1000;
	width: 190px;
	overflow: hidden;
	background: var(--color-background-primary);
	border: 1px solid var(--color-ui-panel-border);
	border-radius: var(--radius-3);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

.header-language-menu form {
	margin: 0;
}

.header-language-menu button {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 9px 12px;
	border: 0;
	background: transparent;
	color: var(--color-text-primary);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.header-language-menu button > span:nth-of-type(2) {
	flex: 1 1 auto;
}

.header-language-menu button:not([aria-current])::after {
	content: "";
	flex: 0 0 20px;
}

.header-language-menu button:hover,
.header-language-menu button:focus-visible {
	background: var(--color-ui-hover);
	outline: none;
}

.header-language-menu .language-flag {
	flex: 0 0 28px;
	font-size: 18px;
}

.header-language-menu .language-current {
	flex: 0 0 20px;
	text-align: right;
}

.header_menu_right > .header-language-control {
	display: block;
	margin: 0;
	padding: 0;
}

.header_menu_right > .header-language-control > summary {
	justify-content: flex-start;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 8px 10px;
}

.header_menu_right > .header-language-control > summary:hover,
.header_menu_right > .header-language-control > summary:focus-visible,
.header_menu_right > .header-language-control[open] > summary {
	background-color: var(--color-ui-hover);
	outline: none;
}

.header_menu_right > .header-language-control > summary::after {
	content: "";
	flex: 0 0 7px;
	width: 7px;
	height: 7px;
	margin: -3px 3px 0 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 160ms ease;
}

.header_menu_right > .header-language-control[open] > summary::after {
	margin-top: 3px;
	transform: rotate(225deg);
}

.header_menu_right .language-flag-circle {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin-right: 9px;
	font-size: 20px;
	transform: none;
}

.header-language-name {
	flex: 1 1 auto;
}

.header_menu_right > .header-language-control > .header-language-menu {
	position: static;
	width: 100%;
	box-sizing: border-box;
	margin: 4px 0;
	padding: 4px;
	border: 0;
	border-radius: var(--radius-3);
	background: var(--color-background-secondary);
	box-shadow: none;
}

header .header_menu_right .header-language-menu:hover {
	background-color: var(--color-background-primary);
}

/*------------------------------
=UI: INPUT FIELDS
------------------------------*/

.organization-input, .organization-input-small{
	font-size: 16px;
	line-height: 22px;
	background-color: var(--color-background-primary);
	margin-bottom: 10px;
	width:100%;
	box-sizing: border-box;
	border: 2px solid var(--color-background-secondary);
	color: var(--color-text-primary);
}

.organization-input {
	padding: 5px;
}

/* The hidden label of a field is its caption on the top border, and the placeholder
   is an example. The caption stays out of flow. A flextable row shows its own label.
   The block display puts the caption on the line of its field in Firefox too. */
label.visually-hidden:not(.flextable *):has(+ .organization-input:not([type="checkbox"], [type="radio"], [type="color"], [type="file"])) {
	z-index: 1;
	display: block;
	width: auto !important;
	height: auto !important;
	margin: -7px 0 0 6px !important;
	padding: 0 4px !important;
	max-width: calc(100% - 20px);
	overflow: hidden !important;
	clip: auto !important;
	text-overflow: ellipsis;
	font-size: 11px;
	line-height: 14px;
	color: var(--color-text-secondary);
	background-color: var(--color-background-primary);
	pointer-events: none;
}

.organization-settings-field-action > label.visually-hidden {
	top: 0;
	left: 0;
}

/* A colour field has the height of the other fields. */
input[type="color"].organization-input {
	height: 34px;
	padding: 2px;
}

select.organization-input {
	background-image: url(/icons/arrow_down_select.svg);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
	padding-right: 32px;
}

select.organization-input[multiple] {
	background-image: none;
	padding-right: 5px;
	min-height: 110px;
}

select.organization-input[multiple]:focus {
	background-image: none;
}

.tt-filter-multiselect-summary {
	margin: -6px 0 10px 0;
	font-size: 12px;
	line-height: 14px;
	color: var(--color-text-secondary);
}

.modalContainer .select2-container {
	width: 100% !important;
	margin-bottom: 10px;
}

.modalContainer .select2-container--default .select2-selection--multiple {
	background-color: var(--color-background-primary);
	border: 1px solid var(--color-background-quaternary);
	border-radius: var(--radius-4);
	min-height: 34px;
	padding-bottom: 5px;
	padding-right: 5px;
}

.modalContainer .select2-container--default .select2-selection--multiple .select2-selection__rendered {
	margin-left: 0;
	padding: 0;
	list-style: none;
}

.modalContainer .select2-container--default .select2-selection--multiple .select2-selection__choice {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	background-color: var(--color-background-tertiary);
	background-color: color-mix(in srgb, var(--color-background-secondary) 78%, var(--color-background-primary) 22%);
	border: 1px solid var(--color-background-quaternary);
	border: 1px solid color-mix(in srgb, var(--color-background-quaternary) 70%, var(--color-text-secondary) 30%);
	border-radius: var(--radius-4);
	color: var(--color-text-primary);
	line-height: 20px;
	margin-left: 5px;
	margin-top: 5px;
	max-width: 100%;
	padding: 0;
	padding-left: 21px;
	padding-right: 8px;
	vertical-align: bottom;
}

.modalContainer .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	position: absolute;
	left: 0;
	top: 0;
	padding: 0 6px;
	color: var(--color-text-secondary);
	border-right: 1px solid var(--color-background-quaternary);
	border-top-left-radius: var(--radius-4);
	border-bottom-left-radius: var(--radius-4);
	font-size: 1em;
	font-weight: bold;
}

.modalContainer .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: var(--color-text-primary);
	background-color: color-mix(in srgb, var(--color-background-quaternary) 45%, transparent);
}

.modalContainer .select2-container--default .select2-search--inline .select2-search__field {
	color: var(--color-text-primary);
	margin-top: 5px;
	margin-left: 5px;
}

.modalContainer .select2-container--default .select2-search--inline .select2-search__field::placeholder,
.modalContainer .select2-container--default .select2-search--inline .select2-search__field::-webkit-input-placeholder {
	color: var(--color-text-secondary);
}

.modalContainer .select2-container--default.select2-container--focus .select2-selection--multiple {
	border: 1px solid var(--color-org-global);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-org-global) 40%, transparent);
}

.modalContainer .select2-container--default .select2-dropdown {
	background-color: var(--color-background-primary);
	border: 1px solid var(--color-background-quaternary);
	border-radius: var(--radius-4);
}

.modalContainer .select2-container--default .select2-search--dropdown .select2-search__field {
	background-color: var(--color-background-primary);
	border: 1px solid var(--color-background-secondary);
	color: var(--color-text-primary);
}

.modalContainer .select2-container--default .select2-results__options {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
	background-color: var(--color-background-primary);
	color: var(--color-text-primary);
}

.modalContainer .select2-container--default .select2-results__option {
	background-color: var(--color-background-secondary);
	color: var(--color-text-primary);
}

.modalContainer .select2-container--default .select2-results__option--selected {
	background-color: var(--color-background-secondary);
	background-color: color-mix(in srgb, var(--color-org-global) 16%, var(--color-background-secondary) 84%);
	box-shadow: inset 3px 0 0 var(--color-org-global);
	color: var(--color-text-primary);
}

.modalContainer .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: var(--color-org-global);
	color: var(--color-background-primary);
}

.modalContainer .select2-container--default .select2-results__option--highlighted.select2-results__option--selected {
	background-color: var(--color-background-secondary);
	background-color: color-mix(in srgb, var(--color-org-global) 16%, var(--color-background-secondary) 84%);
	box-shadow: inset 3px 0 0 var(--color-org-global);
	color: var(--color-text-primary);
}

.modalContainer .select2-container--default .select2-results__option[aria-disabled=true] {
	color: var(--color-text-secondary);
}

.select2-container--open .select2-dropdown {
	z-index: 2100;
}

.organization-input:focus, .organization-input-small:focus{
	background: var(--color-background-primary);
	box-shadow: none;
	border: 2px solid var(--color-org-global);
	outline: none;
}

/* An invalid field keeps its error colour while it has the focus. */
[aria-invalid="true"]:focus {
	border-color: var(--color-error-dark);
	outline: 2px solid var(--color-error-dark);
	outline-offset: 1px;
}

select.organization-input:focus {
	background-image: url(/icons/arrow_down_select.svg);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}

.organization-input:invalid, .organization-input-small:invalid {
	box-shadow: none;
}

.organization-input:disabled, .organization-input-small:disabled {
	color: var(--color-text-secondary);
}

.organization-input-small {
	padding: 0 0 0 5px;
}

.organization_show_id {
	border: 2px solid var(--color-ui-panel-border);
	font-size: 24px;
	font-family: monospace;
	color: var(--color-text-secondary);
	background-color: var(--color-background-tertiary);
	padding: 22px;
	border-radius: var(--radius-3);
	text-align: center;
}

/*------------------------------
=UI: BUTTONS
------------------------------*/

div.button_standard > a {
	color: var(--color-background-primary);
}

.button_standard {
	text-align: center;
	-webkit-appearance: none;
	background-color:var(--color-org-global);
	border-radius: var(--radius-3);
	transition: .3s ease;
	-webkit-transition: .3s ease;
	border:1px solid var(--color-org-global);
	display:inline-block;
	color: var(--color-background-primary);
	font-size: 14px;
	font-weight:bold;
	line-height: 28px;
	min-width: 30px;
	cursor: pointer;
}

.button_standard:hover {
	background-color: var(--color-background-tertiary);
color:var(--color-org-global);
}

.button_standard:active {
	position:relative;
	top:1px;
}

.button_standard:focus {
	background:var(--color-org-global);
	background-color:var(--color-org-global);
	color: var(--color-background-primary);
	outline:0 !important;
}

.button_standard:disabled {
	background-color: var(--color-background-secondary);
		border: var(--color-ui-panel-border) solid 1px;
}

.button_standard:disabled:hover {
	background-color: var(--color-background-secondary);
	color:  var(--color-background-primary);
}

.button_wide {
	height: 50px;
	font-size: 16px;
	width: 100%;
	text-align: center;
}

.button_wide:disabled {
	background-color: var(--color-background-secondary);
}

.upload_button {
	border:1px solid var(--color-org-global);
	color:var(--color-org-global);
	display:inline-block;
	font-weight:bold;
	line-height: 28px;
	min-width: 30px;
}

label.upload_button input[type="file"] {
	position: fixed;
	top: -1000px;
}

.button_red {
	background-color: var(--color-action-danger);
	border:1px solid var(--color-action-danger);
	color: var(--color-action-danger-text);
}

.button_red:hover {
	background-color: var(--color-action-danger-text);
color:var(--color-action-danger);
}

.button_red:focus {
	background:var(--color-action-danger);
	background-color:var(--color-action-danger);
	color: var(--color-action-danger-text);
	outline:0 !important;
}

.button_yellow {
	background-color: var(--color-warning-dark);
	border:1px solid var(--color-warning-dark);
}

.button_yellow:hover {
	background-color: var(--color-background-tertiary);
color:var(--color-warning-dark);
}

.button_yellow:focus {
	background:var(--color-warning-dark);
	background-color:var(--color-warning-dark);
	color: var(--color-background-primary);
	outline:0 !important;
}

/*------------------------------
=UI: CONTENT SHELL
------------------------------*/

.content_new_ressource {
	display: flex;
	min-height: 80px;
	background: url(/icons/plus_circle_lightgrey.svg) center no-repeat;
	background-size: 28px 28px;
	cursor: pointer;
	margin-top: 20px;
}

.content_new_ressource:hover {
	background: var(--color-background-secondary) url(/icons/plus_circle_grey.svg) center no-repeat;
	background-size: 28px 28px;
}

.content_header {
	display: flex;
}

.content_header_title {
	flex: 9;
}

.content_header_menu {
	flex: 1;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

.content_header_menu_item {
	flex: 1;
	align-self: center;
	cursor: pointer;
	max-width: 50px;
	min-width: 50px;
}

html[data-theme="dark"] .content_header_menu .icon.settings:not(.archive-black.active, .office-black.active, .filter.active),
html[data-theme-variant="dark"] .content_header_menu .icon.settings:not(.archive-black.active, .office-black.active, .filter.active) {
	filter: invert(1);
	opacity: 60%;
}

.contextmenu-button {
	width: 35px;
	line-height: 35px;
	text-align:center;
	z-index: 1;
	top:100px;
	right: 0;
	border: 1px solid var(--color-ui-panel-border);
	border-left: 0;
	position: fixed;
	background: var(--color-ui-panel);
	overflow:hidden;
	transform: rotate(180deg);
	transition: background .1s ease-in-out;
	cursor: pointer;
	font-size: 18px;
}

.contextmenu-button:hover {
	background: var(--color-org-global);
	color: var(--color-background-primary);
}

.contextmenu-content {
	position: fixed;
	right: 0;
	width: 0;
	height: auto;
	top:100px;
	max-height: 90%;
	border: 0 solid var(--color-ui-panel-border);
	/*list-style-type: none;*/
	margin: 0;
	padding: 0;
	z-index:100;
	background: var(--color-ui-panel);
	overflow: auto;
	font-size: 14px;
}

.contextmenu-content select {
	width: 100%;
	/*min-width:90%;
	max-width:90%;*/
}

.contextmenu-content input[type='checkbox'] {
	vertical-align: middle;
}

.contextmenu-content .selectors .selector-box:not(:last-child) {
	padding-bottom:10px;
}

.contextmenu-button-open{
	z-index: 101; /*important to remove the border between the button and the menu if menu is extended*/
	margin: 0 331px 0 0;
	border: 1px solid var(--color-ui-panel-border);
	border-right: 0;
	transform: rotate(0deg);
}

.contextmenu-content-open{
	width:330px;
	border: 1px solid var(--color-ui-panel-border);
}

.right-field-button {
	display: inline-block;
	position: absolute;
	margin-top: -2px;
}

/*------------------------------
=MODAL
------------------------------*/

.modalContainer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, .8);
	z-index: 1000;
	opacity: 0;
	transition: opacity 100ms ease-in;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow-y: auto;
}

.modalContainer:target {
	opacity:1;
}

.modalDialog {
	position: relative;
	flex: 1;
	max-width: 400px;
	margin: auto 0;
}

@media all and (max-width: 800px) {
	.modalDialog { flex: 8; }
}

@media all and (max-width: 600px) {
	.modalDialog { flex: 16; }
}

.modalHeader {
	padding: 0 30px;
	background-color: var(--color-background-primary);
	border-radius: var(--radius-5) var(--radius-5) 0 0;
	border: 5px solid var(--color-background-primary);
	min-height: 30px;
}

.modalHeader > h2 {
	font-size: 24px;
	text-align: center;
}

.modalHeader .title-text {
	font-size: 18px;
	font-weight: bold;
	width: 100%;
	box-sizing: border-box;
	border: none;
	overflow: hidden;
	resize: none;
	padding: 0;
	min-height: 30px;
}

.modalHeader .title-text:hover {
	background-color: var(--color-background-tertiary);
}

.modalHeader .title-text:focus {
	background-color: var(--color-background-tertiary);
	border: 2px solid var(--color-org-global);
	outline: none !important;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .1) inset;
}

.modalBody{
	display: flex;
		flex-direction: column;
		align-content: flex-end;
		font-size: inherit;
		background-color: var(--color-background-primary);
		padding: 20px 40px 40px 40px;
		border-radius: 0 0 var(--radius-5) var(--radius-5);
		border: 5px solid var(--color-background-primary);
}

.modalAside {
	position: relative;
	flex: 2;
	padding-top: 4px;
	min-width: 100px;
}

.modalContainer.modal-content-standard .modalBody {
	font-size: 16px;
	line-height: 22px;
}

/* A caption reaches into the gap above its field, so a modal keeps more room between fields. */
.modalBody label.visually-hidden:not(.flextable *) + .organization-input {
	margin-bottom: 16px;
}

/* Two form columns, which stack in a narrow window. The gap leaves room for the field buttons. */
.modalDialog.modalDialog-columns {
	width: min(760px, calc(100vw - 48px));
	max-width: 760px;
}

.modal-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 0 48px;
	margin-bottom: 12px;
}

.modal-columns > div {
	flex: 1 1 300px;
	min-width: 0;
}

.modal-columns > div > h3:first-child {
	margin-top: 0;
	padding-top: 0;
}

.modal-check {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin-bottom: 16px;
}

.modal-check input {
	flex: none;
}

.modal-check + .right-field-button {
	margin-top: -7px;
}

/*------------------------------
=UI: WIZARDS
------------------------------*/

.modalDialog.modalDialog-wide {
	width: min(1040px, calc(100vw - 48px));
	max-width: 1040px;
}

[data-wizard] [hidden] {
	display: none !important;
}

.wizard-progress {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.wizard-progress li {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	gap: 8px;
	min-width: 0;
	color: var(--color-text-secondary);
	font-size: 14px;
}

.wizard-progress li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border: 1px solid var(--color-ui-panel-border);
	border-radius: 50%;
	background: var(--color-background-secondary);
}

.wizard-progress li.is-active {
	color: var(--color-text-primary);
	font-weight: bold;
}

.wizard-progress li.is-active span {
	border-color: var(--color-success-dark);
	background: var(--color-success-dark);
	color: white;
}

.organization-setup-expense,
.organization-setup-explanation,
.organization-setup-review-card {
	padding: 18px;
	margin-bottom: 16px;
	border: 1px solid var(--color-ui-panel-border);
	border-radius: var(--radius-5);
	background: var(--color-background-secondary);
}

.organization-setup-explanation p + p {
	margin-top: 12px;
}

[data-organization-setup-review] {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.organization-setup-review-card {
	flex: 1 1 300px;
	min-width: 0;
	margin: 0;
}

.organization-setup-review-card:first-child,
.organization-setup-review-card:last-child,
.organization-setup-review-card:nth-child(2) {
	flex-basis: 100%;
}

.organization-setup-review-expense {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--color-ui-panel-border);
}

.organization-setup-review-expense h5 {
	margin: 0;
	font-size: inherit;
	font-weight: bold;
}

.organization-setup-review-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-ui-panel-border);
}

.organization-setup-review-heading h4 {
	margin: 0;
}

.organization-setup-review-value {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	padding-top: 10px;
	overflow-wrap: anywhere;
}

.organization-setup-review-value dt {
	flex: 1 1 160px;
	color: var(--color-text-secondary);
}

.organization-setup-review-value dd {
	flex: 1 1 120px;
	min-width: 0;
	margin: 0;
	font-weight: bold;
}

.organization-setup-color {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 8px;
	border-radius: 50%;
	border: 1px solid var(--color-ui-panel-border);
}

.organization-setup-modal .wizard-progress {
	flex-wrap: wrap;
}

.organization-setup-modal .wizard-progress li {
	flex: 1 1 130px;
}

.wizard-panel {
	min-height: 330px;
}

.wizard-panel > h3 {
	margin-bottom: 0;
}

.wizard-intro {
	max-width: 720px;
	margin: 0 0 20px;
	color: var(--color-text-secondary);
}

.wizard-choice-grid,
.wizard-field-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 20px;
}

.wizard-choice-grid > *,
.wizard-field-grid > * {
	flex: 1 1 calc(50% - 8px);
	min-width: 0;
}

.wizard-choice {
	display: flex;
	box-sizing: border-box;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--color-ui-panel-border);
	border-radius: var(--radius-5);
	cursor: pointer;
}

.wizard-choice:has(input:checked) {
	border-color: var(--color-org-global);
	background: var(--color-background-secondary);
}

.wizard-choice input {
	margin-top: 4px;
}

.wizard-choice strong,
.wizard-choice small {
	display: block;
}

.wizard-choice small {
	margin-top: 4px;
	color: var(--color-text-secondary);
	font-size: 16px;
	line-height: 22px;
}

.project-task-requirement {
	margin: 4px 0 20px;
}

.project-task-requirement > h4 {
	margin-bottom: 8px;
}

.project-task-requirement-disclaimer,
.project-task-requirement-host-only {
	margin: 8px 0 0;
	color: var(--color-text-secondary);
	font-size: 14px;
	line-height: 20px;
}

.wizard-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	margin-bottom: 16px;
}

.wizard-field .organization-input,
.wizard-assignment-row .organization-input,
.project-setup-access-grid .organization-input {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
}

.wizard-list {
	margin: 0 0 20px;
	padding: 14px;
	border: 1px solid var(--color-ui-panel-border);
	border-radius: var(--radius-5);
}

.wizard-list legend {
	padding: 0 6px;
	font-weight: bold;
}

.wizard-assignment-row {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 7px 42px 7px 0;
}

.wizard-assignment-row > label:first-child {
	display: flex;
	flex: 1 1 220px;
	align-items: center;
	gap: 8px;
}

.wizard-assignment-row > label:nth-child(2) {
	flex: 0 1 180px;
	min-width: 130px;
}

.project-setup-new-category {
	position: relative;
}

.project-setup-new-category > label:nth-of-type(1) {
	flex: 1.25 1 0;
	min-width: 180px;
}

.project-setup-new-category > label:nth-of-type(2) {
	flex: .7 1 0;
	min-width: 110px;
}

.project-setup-new-category > label:nth-of-type(3),
.project-setup-new-category > label:nth-of-type(4) {
	flex: .8 1 0;
	min-width: 120px;
}

.project-setup-new-category .wizard-row-remove {
	position: absolute;
	top: 50%;
	right: 0;
	width: 30px;
	transform: translateY(-50%);
}

.project-setup-budget-row {
	display: flex;
	position: relative;
	gap: 12px;
	align-items: center;
	padding: 7px 42px 7px 0;
}

.project-setup-budget-row > label {
	flex: 1 1 0;
	min-width: 130px;
}

.project-setup-budget-row .organization-input {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
}

.project-setup-budget-row .wizard-row-remove {
	position: absolute;
	top: 50%;
	right: 0;
	width: 30px;
	transform: translateY(-50%);
}

.wizard-inline-action,
.wizard-row-remove {
	border: 0;
	background: transparent;
	color: var(--color-text-secondary);
	cursor: pointer;
}

.wizard-inline-action:hover,
.wizard-row-remove:hover {
	color: var(--color-text-primary);
}

.wizard-actions {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid var(--color-ui-panel-border);
}

.wizard-actions-primary {
	display: flex;
	gap: 10px;
}

.wizard-result {
	margin: 16px 0;
	padding: 18px;
	border-radius: var(--radius-5);
	background: var(--color-background-secondary);
}

.wizard-validation {
	margin: 10px 0;
	color: var(--color-error-dark);
	font-weight: 600;
}

.wizard-result .button_standard {
	display: inline-block;
	margin-top: 12px;
}

.project-setup-access-grid {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 10px;
	border-bottom: 1px solid var(--color-ui-panel-border);
}

.project-setup-access-grid > * {
	flex: 1 1 0;
	min-width: 120px;
}

.project-setup-access-grid > :first-child {
	flex: 1.5 1 0;
	min-width: 180px;
}

.project-setup-access-grid > :last-child {
	flex: .7 1 0;
	min-width: 90px;
}

.project-setup-access-header {
	color: var(--color-text-secondary);
	font-size: 14px;
}

.project-setup-member.is-selected {
	background: var(--color-background-secondary);
}

.project-setup-member-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
}

.project-setup-member-toggle > input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 0;
}

.project-setup-member-name {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	overflow-wrap: anywhere;
}

.project-setup-poweruser-badge {
	padding: 2px 6px;
	border: 1px solid var(--color-ui-panel-border);
	border-radius: 999px;
	color: var(--color-text-secondary);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
}

.project-setup-member:not(.is-selected) > label:not(.project-setup-member-toggle) {
	display: none;
}

.project-setup-member:not(.is-selected) {
	display: block;
}

.project-setup-mobile-label {
	display: none;
}

.project-setup-auto-approve {
	text-align: center;
}

.dashboard-titlebar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.dashboard-project-setup {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	background-color: transparent;
	cursor: pointer;
}

.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

@media all and (max-width: 900px) {
	.project-setup-modal .modalBody {
		padding: 18px 24px 28px;
	}

	.wizard-progress li {
		font-size: 0;
	}

	.wizard-progress li span {
		font-size: 13px;
	}

	.project-setup-access-header {
		display: none;
	}

	.project-setup-access-grid {
		flex-wrap: wrap;
		align-items: end;
	}

	.project-setup-access-grid > :not(.project-setup-member-toggle) {
		flex: 1 1 calc(50% - 5px);
		min-width: 0;
	}

	.project-setup-access-grid > .project-setup-member-toggle {
		flex: 1 0 100%;
		font-weight: 600;
	}

	.project-setup-mobile-label {
		display: block;
		margin-bottom: 5px;
		color: var(--color-text-secondary);
		font-size: 14px;
	}

	.project-setup-auto-approve {
		text-align: left;
	}

	.project-setup-new-category {
		flex-wrap: wrap;
	}

	.project-setup-budget-row {
		flex-wrap: wrap;
	}

	.project-setup-new-category > label,
	.project-setup-budget-row > label {
		flex: 1 1 calc(50% - 6px);
		min-width: 0;
	}
}

@media all and (max-width: 620px) {
	.wizard-choice-grid,
	.wizard-field-grid,
	.project-setup-access-grid {
		flex-direction: column;
		align-items: stretch;
	}

	.wizard-assignment-row {
		padding-right: 36px;
	}

	.wizard-choice-grid > *,
	.wizard-field-grid > *,
	.project-setup-new-category > label,
	.project-setup-budget-row > label {
		flex-basis: 100%;
	}

	.project-setup-access-grid > .project-setup-member-toggle,
	.project-setup-access-grid > :not(.project-setup-member-toggle) {
		flex: 0 0 auto;
		min-width: 0;
	}

	.wizard-assignment-row > label:nth-child(2) {
		flex-basis: 120px;
		min-width: 120px;
	}

	.project-setup-new-category .wizard-row-remove {
		width: 24px;
	}

	.project-setup-budget-row .wizard-row-remove {
		width: 24px;
	}
}

.modalAside h3 {
	padding: 0 0 15px 0;
}

.modalAsideButton {
	position: relative;
	margin-bottom: 10px;
	font-size: 16px;
	padding: 8px;
	background-color: var(--color-background-secondary);
	line-height: 22px;
	text-align: center;
	cursor: pointer;
}

.modalFooter {
	margin: 20px 30px 20px 20px;
	background-color: var(--color-background-primary);
	border-top: 1px solid var(--color-border-primary);
	padding: 15px 0 0 0;
	text-align: right;
}
.modalSubmit {
	max-width: 320px;
	margin: 0 auto 0 auto;
}

/* Global busy overlay for long-running destructive actions (e.g. org delete) */
.global-busy-overlay {
	position: fixed;
	inset: 0;
	z-index: 11000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--color-background-primary) 78%, transparent);
	backdrop-filter: blur(1px);
}

.global-busy-overlay-panel {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: var(--color-background-primary);
	border: 1px solid var(--color-background-quaternary);
	border-radius: var(--radius-5);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
	color: var(--color-text-primary);
	font-size: 14px;
	font-weight: 600;
}

.global-busy-overlay-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid var(--color-border-primary);
	border-top-color: var(--color-border-highlight);
	border-radius: 50%;
	animation: global-busy-overlay-spin .8s linear infinite;
}

@keyframes global-busy-overlay-spin {
	to {
		transform: rotate(360deg);
	}
}

body.busy-overlay-active {
	cursor: progress;
}

body.busy-overlay-active * {
	cursor: progress !important;
}

.modal-description {
	width: 100%;
	box-sizing: border-box;
	border: none;
	overflow: auto;
	resize: none;
	margin-bottom: 19px;
	max-height: 600px;
	overflow-y: auto;
	min-height: 40px;
}

.modal-description:focus {
	background-color: var(--color-background-tertiary);
	outline: none !important;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .1) inset;
	border-radius: var(--radius-3);
	color: var(--color-text-primary);
}

.btnClose {
	color: var(--color-text-secondary);
	margin-top: 15px;
	font-size: 30px;
	text-decoration: none;
	position: absolute;
	right: 15px;
	top: 0;
	cursor:pointer;
	z-index: 100;
}

.btnClose:hover {
	color: var(--color-text-primary);
}

/*------------------------------
=TABS
------------------------------*/

/*------------------------------
=TABS: LINKS
------------------------------*/
/* Clearfix */
.tab-links:after {
		display:block;
		clear:both;
		content:'';
}

.tab-links li {
		margin: 0 5px;
		float:left;
		list-style:none;
}

.tab-links a {
		padding:9px 15px;
		display:inline-block;
		border-radius: var(--radius-3) var(--radius-3) 0 0;
		background:var(--color-background-quaternary);
		font-size:16px;
		font-weight:600;
		color:var(--color-text-secondary); transition: linear .15s;
		-webkit-transition: linear .15s;
		text-decoration:none;
		width: 110px;
}

.tab-links a:hover {
		background:var(--color-background-secondary);
}

li.activetab a, li.activetab a:hover {
		color:var(--color-text-primary);
		background: var(--color-background-primary);
}

/*------------------------------
=TABS: CONTENT
------------------------------*/

.tab-content {
	border-radius: var(--radius-5);
	border: 5px solid var(--color-background-primary);
	background: var(--color-background-primary);
}

.tab {
		display:none;
}

.tab.activetab {
		display:block;
}

/*------------------------------
=LIST AND ACCORDION
------------------------------*/

.outerframe {
	background-color: var(--color-background-tertiary);
	border: 1px solid var(--color-background-secondary);
	padding: 23px;
	margin-bottom: 20px;
}

.additem {
	padding-top: 5px;
	padding-bottom: 5px;
	font-size:24px;
	text-align: center;
	color: var(--color-text-secondary);
	cursor: pointer;
	width: 30px;
	margin: 0 auto;
}

.additem:hover {
	color: var(--color-text-primary);
}

.additem a {
	color: var(--color-text-secondary) !important;
	text-decoration: none;
}

.additem a:hover {
	color: var(--color-text-primary) !important;
}

.accordion {
	color: var(--color-text-primary);
}

.accordion a {
	text-decoration: none;
}

.accordion-header  {
	display: flex;
	margin-top: 18px;
	border-radius: var(--radius-3) var(--radius-3) 0 0;
	color: var(--color-background-primary);
	font-size:16px;
	height: 40px;
	transition: .1s ease;
	-webkit-transition: .1s ease;
}

.accordion-header .title>span{
	position: absolute;
	font-size: 14px;
	font-style:italic;
	color: var(--color-text-primary);
}

.client .accordion-header {
	background-color: var(--entity-client);
}

.client.guest-client .accordion-header {
	background-color: var(--entity-client-guest);
	border: 1px solid var(--entity-client-border);
}

.client .accordion-header:hover {
	background-color: var(--entity-client-hover);
}

.accordion.client.internal-client {
	--theme-entity-color: var(--entity-finance);
}

.client.internal-client .accordion-header {
	background-color: var(--entity-finance);
	color: #fff;
}

.client.internal-client .accordion-header:hover {
	background-color: var(--entity-finance-hover);
}

.client.internal-client .accordion-header .subtitle {
	color: rgba(255, 255, 255, .82);
}

.timesheet .accordion-header {
	background-color: var(--entity-timesheet);
}

.timesheet .accordion-header:hover {
	background-color: var(--entity-timesheet-hover);
}

.project .accordion-header {
	background-color: var(--entity-project);
}

.project.guest-project .accordion-header {
	background-color: var(--entity-project-guest);
	border: 1px solid var(--entity-project-border);
}

.project .accordion-header:hover {
	background-color: var(--entity-project-hover);
}

.task .accordion-header {
	background-color: var(--entity-task);
}

.task .accordion-header:hover {
	background-color: var(--entity-task-hover);
}

.category .accordion-header {
	background-color: var(--entity-category);
}

.category .accordion-header:hover {
	background-color: var(--entity-category-hover);
}

.category.guest-category .accordion-header {
	background-color: var(--entity-category-guest);
	border: 1px solid var(--entity-category-border);
}

.bill .accordion-header {
	background-color: var(--entity-bill);
}

.bill .accordion-header:hover {
	background-color: var(--entity-bill-hover);
}

.archived .accordion-header {
	background-color: var(--entity-archived) !important;
}

.archived .accordion-header:hover {
	background-color: var(--entity-archived-hover) !important;
}

.accordion-header .clickarea {
	display: flex;
	flex: 1;
	align-items: center;
	height: 100%;
	cursor: pointer;
	overflow: hidden;
}

.accordion-header .title{
	flex: initial;
	padding-left: .5em;
}

.accordion-header .subtitle{
	flex: 1;
	font-size: 14px;
	font-style:italic;
	color: var(--color-text-secondary);
	display: inline-block;
}

.absence-entry-group .menu-button,
.accordion .menu-button, .item .menu-button {
	flex: 0;
	min-width: 36px;
	height: 100%;
	float: right;
	background: url(/icons/menu_button.svg) center 50% no-repeat;
	background-size: 26px 26px;
}

.absence-entry-group .menu-button:hover,
.accordion .menu-button:hover, .item .menu-button:hover {
	background-image: url(/icons/menu_button_circle_white.svg);
}

html:is([data-theme="oblivion"], [data-theme="starwars"], [data-theme="spacepirate"]) :is(.accordion-header, .absence-entry-group) .menu-button:not(:hover),
html:is([data-theme="dark"], [data-theme-variant="dark"]) .absence-entry-group .menu-button:not(:hover) {
	background-image: url(/icons/menu_button_lightgrey.svg);
}

.absence-entry-group .menu,
.accordion .menu,.item .menu {
	display: none;
	position: fixed;
	right: 10px;
	margin-top: 36px;
	z-index: 1000;
}

.menu-button.open .menu {
	display: block;
}

.accordion-body {
	position: relative;
	background: var(--color-background-secondary);
	color: var(--color-text-primary);
	padding: 15px 10px 10px 10px;
	border-bottom-right-radius: var(--radius-3);
	border-bottom-left-radius: var(--radius-3);
	z-index: 0; /*revenge of the mikron_directforwardarrow*/
	transition: opacity .25s ease-out;
}

/* Fade accordion content in whenever a body switches from display: none. */
@starting-style {
	.accordion-body { opacity: 0; }
}

.accordion-body:has(.item .menu-button.open) {
	z-index: 1;
}

.accordion-body-inner {
	background: var(--color-background-primary);
	padding: 20px;
}

.accordion-flexcontainer {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.accordion-innerflexbox {
	flex:1;
	height: 100%;
}

.autosave-status {font-size: 13px;height: 22px;}
.autosave-status-pending { font-size: 13px; color: var(--color-text-secondary); }
.autosave-status-saved { font-size: 13px; color: var(--color-success-dark); }

.accordion-description {
	margin-bottom: 10px;
}

.accordion-description .autosave-status:empty {
	display: none;
}

/*------------------------------
=FORM
------------------------------*/

.feedback-input {
	color:var(--color-text-primary);
	font-family: Helvetica, Arial, sans-serif;
	font-weight:500;
	font-size: 18px;
	line-height: 22px;
	padding: 13px 13px 13px 0;
	margin-left: 54px;
	background-color: rgba(0, 0, 0, 0) !important;
	width: -webkit-fill-available;
	width: -moz-available;
	box-sizing: border-box;
	border: 3px solid rgba(0,0,0,0);
}

.feedback-input:focus{
	border: 3px solid rgba(0,0,0,0);
	outline: none;
}

.focused{
	color: var(--color-border-highlight);
	border: var(--color-border-highlight) solid 3px;
}

.feedback-input:invalid {
	box-shadow: none;
}

/*------------------------------
=UI: LOGIN INPUT DECORATORS
------------------------------*/

/* Ugly hack to keep Chrome from filling the field with a yellow background.*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
		transition: background-color 5000s;
		-webkit-transition: background-color 5000s;
}

input:focus{
	border: var(--color-border-highlight) solid 3px;
	/*border:#30aed6 solid 3px;*/
}

input:-webkit-autofill::first-line {font-size: 18px}

#name{
	background-image: url(/icons/user.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
	background-color: var(--color-background-primary);
	margin-bottom: 16px;
}

#name:focus{
	background-image: url(/icons/user.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

.password-input{
	background-image: url(/icons/lock.svg);
	background-size: 28px 28px;
	background-position: 11px 11px;
	background-repeat: no-repeat;
	margin-bottom: 16px;
	background-color: var(--color-background-primary);
}

#email {
	background-image: url(/icons/email.svg);
	background-size: 30px 30px;
	background-position: 11px 11px;
	background-repeat: no-repeat;
	margin-bottom: 16px;
	background-color: var(--color-background-primary);
}

#comment{
	background-image: url(/icons/comment.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

/*------------------------------
=UI: SIDEBAR NAVIGATION
------------------------------*/

#cssmenu-button {
	position: relative;
	width: 25px;
	height: 75px;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background-color: var(--color-org-global);
}

#cssmenu-button :is(div, span) {
	flex: 1;
	color: var(--color-background-primary);
	font-size: 18px;
	text-align: center;
}

#cssmenu {
	min-width: 150px;
	max-width: 250px;
	background: var(--color-background-mainmenu);
	position: relative;
	overflow-y:auto;
	flex: 1.3;
	font-size: 16px;
}

#cssmenu ul li.active {
	background-color: var(--color-org-global);
}

#cssmenu-button-container {
	display: none;
}

#cssmenu-body {
	width: 100%;
}

#cssmenu-body li {
	position: relative;
}
#cssmenu-body a {
	display: block;
	padding: 15px 20px;
	color: var(--color-menu-text);
	text-decoration: none;
	text-transform: uppercase;
}

.logout-form {
	margin: 0;
	padding: 0;
}

.logout-button {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-align: left;
}

#cssmenu-body .logout-button {
	padding: 15px 20px;
	color: var(--color-menu-text);
	text-transform: uppercase;
}

.logout-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}
#cssmenu-body ul,
#cssmenu-body ul li,
#cssmenu-body ul ul {
	list-style: none;
	margin: 0;
}
#cssmenu-body ul li {
	border-top: 1px solid rgba(255,255,255,.03);
}
#cssmenu-body ul li:hover {
	position: relative;
	z-index: 599;
	cursor: default;
	background: var(--color-menu-hover);
}
#cssmenu-body ul li:hover > ul {
	visibility: visible;
}
#cssmenu-body > ul > li > a {
	padding: 15px 15px 15px 30px;
}
#cssmenu-body > ul > li > a:hover {
	color:  var(--color-background-primary);
}
#cssmenu-body ul li.active {
	background: var(--color-menu-active);
}

html[data-org-id]:not([data-org-id=""]) #cssmenu-body ul li.active {
	background: var(--color-org-global);
}

.img-circle {
	border-radius: 50%;
}

.menu-icon-container {
	width: 82px;
	height: 82px;
	margin: 60px auto;
	background: var(--color-menu-shell);
	overflow: hidden;
}

.menu-logo-image,
.ticket-member-logo-image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.menu-user-icon {
	width: 100%;
	height: 100%;
	position: relative;
	top: 9px;
	background-color: var(--color-menu-hover);
	-webkit-mask-image: url(/icons/user.svg);
	mask-image: url(/icons/user.svg);
}

.menu-office-icon {
	width: 90%;
	height: 90%;
	position: relative;
	top: 9px;
	background-color: var(--color-menu-hover);
	-webkit-mask-image: url(/icons/office.svg);
	mask-image: url(/icons/office.svg);
}

/*------------------------------
=UI: TOOLTIPS
------------------------------*/

:is(a, button).tooltip {
	position: relative;
	text-decoration: none;
	line-height: normal;
	font-weight: normal;
	font-size: 14px;
}

:is(a, button).tooltip:after {
	content: attr(data-tooltip);
	position: absolute;
	margin-bottom: 5px;
	background: var(--color-tooltip-bg);
	white-space: pre-line;
	padding: 5px 15px;
	box-sizing: border-box;
	overflow-wrap: anywhere;
	max-height: var(--tooltip-max-height, calc(100vh - 16px));
	overflow: auto;
	color: var(--color-tooltip-text);
	display: none;
	z-index: 1000;
}

:is(a, button).tooltip:is(:hover, :focus-visible):after {
	left: var(--tooltip-left, 0px);
	top: var(--tooltip-top, auto);
	bottom: var(--tooltip-bottom, 100%);
	width: min(290px, var(--tooltip-max-width, calc(100vw - 16px)));
	white-space: pre-line;
}

:is(a, button).tooltip:is(:hover, :focus-visible):before {
	bottom: 70%;
}

:is(a, button).tooltip:is(:hover, :focus-visible):after,
:is(a, button).tooltip:is(:hover, :focus-visible):before {
	display: var(--tooltip-display, block);
}

.resource-search-bar {
	border-radius: var(--radius-8) !important;
	border: 2px solid var(--color-background-secondary);
	background-image: url(/icons/magnifying_glass_lightgrey.svg);
	background-size: 30px 30px;
	background-position: 11px 11px;
	background-repeat: no-repeat;
	margin: 50px 0 10px 0;
}

/*------------------------------
=UI: RESOURCE LISTS
------------------------------*/

/*------------------------------
=UI: RESOURCE BOXES
------------------------------*/

.resource-box {
	background-color: var(--color-background-tertiary);
	box-sizing: border-box;
	height:100%;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-background-secondary);
	font-size: 14px;
	border-radius: var(--radius-5);
}

/* Detail panels use the same narrow layout whether they contain a graph,
   a list, or a list beside selected-resource details. Larger layouts retain
   their feature widths and heights. */
@media (max-width: 600px) {
	.accordion-innerflexbox.resource-panel {
		flex-basis: 100%;
		min-width: 0;
		max-width: 100%;
	}

	.resource-panel .resource-box,
	.resource-panel .resource-box-body,
	.resource-panel .resource-box-body-flexcontainer,
	.resource-panel .resource-box-body-list {
		min-width: 0;
		max-width: 100%;
		box-sizing: border-box;
	}

	.accordion-innerflexbox.resource-chart-panel {
		height: auto;
	}

	.resource-chart-panel > :is(.client-stats, .project-stats, .category-stats, .member-stats) {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.resource-chart-panel .mg-wrapper {
		flex: 1 1 400px;
		min-width: 0;
		min-height: 400px;
		max-width: 100%;
	}

	.resource-split-panel {
		container-type: inline-size;
		container-name: resource-split-panel;
	}

	.resource-split-panel .resource-box-body-flexcontainer > .resource-box-body:first-child {
		flex: 0 0 100px;
	}

	.resource-split-panel .resource-box-body-flexcontainer > .resource-box-body:first-child .resourcelist-resource {
		padding-inline: 5px calc(5px + var(--resource-action-collapsed-width));
	}

	.resource-panel .resource-action:hover {
		max-width: 100%;
	}

	.resource-panel .resource-box-item-info {
		flex-direction: column;
		gap: 4px;
	}

	.resource-panel .resource-box-item-info-role {
		flex: 0 0 auto;
		width: 100%;
	}

	.resource-panel .resource-box-item-title > :is(div, span, button):first-child,
	.resource-panel .resource-box-item-info-role {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.resource-panel .resource-box-body.resource-box-content {
		flex: 1;
		overflow-y: auto;
		overflow-wrap: anywhere;
	}

	.resource-panel .resource-box-content > * {
		min-width: 0;
		max-width: 100%;
		box-sizing: border-box;
	}

	.resource-panel .resource-box-content :is(input, select, button, fieldset) {
		min-width: 0;
		max-width: 100%;
	}

	.resource-panel .resource-box-content .button_standard {
		box-sizing: border-box;
		white-space: normal;
		line-height: 20px;
		padding-block: 5px;
	}

	.resource-panel .resource-box-item-title:has(.rate-mainrate-rate) {
		flex-wrap: wrap;
		gap: 4px;
	}

	.resource-panel .resource-box-item-title:has(.rate-mainrate-rate) > :first-child {
		min-width: 100%;
	}

	.resource-panel .resource-box-item-title > .rate-mainrate-rate:not(.resource-action) {
		min-width: 0;
		max-width: 100%;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.resource-panel :is(.ratedetails-mainrate, .ratedetails-relativerates) {
		flex-wrap: wrap;
		gap: 6px 0;
	}

	.resource-panel :is(.ratedetails-mainrate, .ratedetails-relativerates) > :first-child {
		min-width: 100%;
	}

	.resource-panel :is(.ratedetails-mainrate, .ratedetails-relativerates) > :first-child > div {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.resource-panel .ratedetails-separator-caption {
		position: static;
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	.resource-panel .budget-list > .budget {
		flex-wrap: wrap;
	}

	.resource-panel .budget-details {
		flex-basis: 100%;
		overflow-wrap: anywhere;
	}

	.resource-panel .projectsetting-billable {
		flex-wrap: wrap;
		gap: 8px;
	}

	.resource-panel .projectsetting-billable-field {
		flex: 1 1 100%;
		min-width: 0;
	}

	.resource-panel .projectsetting-billable-actions {
		flex: 0 0 auto;
		margin: 0;
	}

	.resource-panel .projectsetting-billable-spacer {
		display: none;
	}

	/* A nested panel can be narrower than a phone. Stack its panes when the
	   sidebar would leave less than 140 pixels for selected-resource details. */
	@container resource-split-panel (max-width: 239px) {
		.resource-box-body-flexcontainer {
			flex-direction: column;
		}

		.resource-box-body-flexcontainer > .resource-box-body:first-child {
			width: 100%;
		}

		.resource-split-panel .resource-box-body.resource-box-content {
			border-left: 0;
			border-top: 1px solid var(--color-background-secondary);
		}
	}
}

.resource-box-modal {
	height: 300px;
	margin-bottom: 30px;
}

.resource-box-top {
	display: flex;
	align-items: center;
	text-align: center;
	line-height: 42px;
	background-color: var(--color-background-secondary);
	border-bottom: 1px solid var(--color-background-secondary);
	border-radius: var(--radius-5) var(--radius-5) 0 0;
}

.resource-box-top-info {
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: auto;
}

.resource-box-top-center {
	font-weight: bold;
	font-size: 16px;
	flex: 1;
	width: 0;
}

/* The right slot mirrors the 40px info slot, so the title is centred in the
   box also when the slot is empty. */
.resource-box-top-right {
	display: flex;
	justify-content: flex-end;
	min-width: 40px;
}

/* Budget overview cards align their title left (d3Classes.css), so their
   empty right slot needs no width. */
.org-budget-project-card .resource-box-top-right {
	min-width: 0;
}

.resource-box-body-flexcontainer {
	display: flex;
	flex: 1;
	min-height: 0;
}

.resource-box-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 200px;
	min-height: 0;
	background-color: var(--color-background-tertiary);
}

.resource-box-body-list {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	list-style: none;
	margin-left: 0em;
	width: 100%;
	font-size: 14px;
}

.resource-box-body.resource-box-content {
	display: flex;
	border-left: 1px solid var(--color-background-secondary);
	flex: 2;
	overflow-x: hidden;
}

.resourcelist-resource {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	height: auto;
	box-shadow: var(--shadow-xs);
	margin: 10px 5px 5px 5px;
	background-color: var(--color-background-item);
	position: relative;
	cursor: pointer;
	border-radius: var(--radius-5);
	padding: 10px;
}

.resourcelist-resource.selected {
	background-color: var(--color-org-global);
	color: var(--color-background-primary);
	font-weight: bold;
}

.resourcelist-resource:hover {
	background-color: var(--color-ui-hover);
}

/* The Oblivion, Star Wars and Space Pirate themes give every list item their own background.
   A selected item gets a tint of the theme accent and the primary text colour. The repeated
   [data-theme] matches the specificity of the dark-variant item rules, and this file loads
   after the theme files, so these rules win. */
html:is([data-theme="oblivion"], [data-theme="starwars"], [data-theme="spacepirate"])[data-theme] .resourcelist-resource.selected {
	background: color-mix(in srgb, var(--color-progress-fill) 22%, var(--color-background-item));
	box-shadow: inset 3px 0 0 var(--color-progress-fill);
	color: var(--color-text-primary);
	opacity: 1;
}

html:is([data-theme="oblivion"], [data-theme="starwars"], [data-theme="spacepirate"])[data-theme] .resourcelist-resource.selected :is(.resource-box-item-info-role, .memberlist-membername-inactive) {
	color: inherit;
}

/* A touch screen keeps the hover state after a tap. The hover look of a selected item then
   changes when the user taps elsewhere, although the selection stays. A hovered selected item
   keeps its selected colours, and only a device that can hover shows the hover effect. */
.resourcelist-resource.selected:hover {
	background-color: var(--color-org-global);
	color: var(--color-background-primary);
}

@media (hover: hover) {
	.resourcelist-resource.selected:hover {
		opacity: .8;
	}

	html:is([data-theme="oblivion"], [data-theme="starwars"], [data-theme="spacepirate"])[data-theme] .resourcelist-resource.selected:hover {
		background: color-mix(in srgb, var(--color-progress-fill) 32%, var(--color-background-item));
		color: var(--color-text-primary);
		opacity: 1;
	}
}

.resourcelist-resource.preliminary-member {
	padding: 8px 0 8px 0;
	border-radius: var(--radius-4);
	background-color: var(--color-background-secondary);
}

.resourcelist-resource.preliminary-member:hover {
	background-color: var(--color-ui-hover);
}

.resource-box-item-container {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.resource-box-item-title {
	display: flex;
	width: 100%;
	font-size: 16px;
}

.resource-box-item-title h5
{
	padding: 15px 0 0 10px;
}

.resource-box-item-title > :is(div, span, button):first-child {
	flex: 1;
	width: 0;
}

.resource-box-item-info,
.resource-box-item-info-member {
	display: flex;
	width: 100%;
}

.resource-box-item-info-role {
	color: var(--color-text-secondary);
	font-style: italic;
	flex: 1;
	width: 0;
	font-weight: normal;
}

.resource-box-item-info-icons {
	height: 20px;
	min-width: 20px;
	display: flex;
	justify-content: flex-start;
}

.resource-box-item-info-icon > span {
	font-size: 9px;
	bottom: -8px;
	left: 90%;
	position: absolute;
	color: var(--color-text-secondary);
}

.resource-box-bottom {
	height: 42px;
	text-align: center;
	border-top: 1px solid var(--color-background-primary);
	background-color: var(--color-background-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0 0 var(--radius-5) var(--radius-5);
}

/*------------------------------
=UI: ICONS
------------------------------*/

.icon {
	background-repeat: no-repeat;
	background-position: center;

	cursor: pointer;
}

.icon.tooltip {
	background-size: 25px 25px !important;
	cursor: pointer;
	width: 40px;
	height: 40px;
	z-index: 0;
}

.icon.tooltip-small {
	background-size: 15px 15px !important;
	width: 20px;
	height: 20px;
}

.icon.organization-shortcut-icon {
	background-size: 28px 28px !important;
	min-width: 40px;
	min-height: 40px;
	opacity: .6;
}

.icon.organization-shortcut-icon:hover {
	opacity: 1;
}

.icon.settings {
	opacity: 30%;
	background-size: 30px 30px !important;
	min-height: 50px;
	min-width: 50px;
}

.icon.settings.active {
	opacity: 80% !important;
}

.icon.resource-box-icon {
	background-size: 25px 25px !important;
	min-height: 40px;
	min-width: 40px;
}

.icon.resource-box-item-info-icon {
	background-size: 18px 18px !important;
	min-width: 24px;
	height: 20px;
	position: relative;
}

.icon.messenger {
	background-size: 38px 38px !important;
	height: 38px;
	width:  38px;
}

.icon.help {
	background-image: url(/icons/help_circle_blue.svg);
}
.icon.graph-black {
	background-image: url(/icons/graph_black.svg);
}
.icon.archive-black {
	background-image: url(/icons/archive_black.svg);
}
.icon.archive-grey {
	background-image: url(/icons/archive_circle_grey.svg);
}
.icon.client-project-archive-toggle,
.icon.resource-box-archive-toggle,
.icon.settings.archive-black {
	cursor: pointer;
	border-radius: var(--radius-pill);
	transition: transform 120ms ease-in-out, filter 120ms ease-in-out;
}
.icon.client-project-archive-toggle:hover,
.icon.resource-box-archive-toggle:hover,
.icon.settings.archive-black:hover {
	transform: scale(1.08);
}
.icon.client-project-archive-toggle.is-active,
.icon.resource-box-archive-toggle.is-active,
.icon.settings.archive-black.active {
	background-image: url(/icons/archive_black.svg);
	filter:
		drop-shadow(0 0 1px rgba(227, 57, 85, 0.9))
		drop-shadow(0 0 6px rgba(227, 57, 85, 0.75))
		saturate(1.25)
		contrast(1.08);
}
.icon.client-project-archive-toggle.is-loading,
.icon.resource-box-archive-toggle.is-loading {
	opacity: 0.6;
	pointer-events: none;
}
.icon.filter {
	background-image: url(/icons/filter_black.svg);
}
.icon.office-black {
	background-image: url(/icons/office.svg);
}
.icon.plus-black {
	background-image: url(/icons/plus_circle_black.svg);
}
.icon.settings.office-black,
.icon.settings.filter {
	border-radius: var(--radius-pill);
	transition: transform 120ms ease-in-out, filter 120ms ease-in-out;
}
.icon.settings.office-black.active,
.icon.settings.filter.active {
	filter:
		drop-shadow(0 0 1px rgba(227, 57, 85, 0.9))
		drop-shadow(0 0 6px rgba(227, 57, 85, 0.75))
		saturate(1.25)
		contrast(1.08);
}
.icon.bookmark-black {
	background-image: url(/icons/bookmark_black.svg);
}
.icon.resource-add {
	background-image: url(/icons/plus_circle_lightgrey.svg);
}
.icon.resource-add:hover {
	background-image: url(/icons/plus_circle_grey.svg);
}
.icon.resource-remove {
	background-image: url(/icons/minus_circle_lightgrey.svg);
}
.icon.resource-remove:hover {
	background-image: url(/icons/minus_circle_grey.svg);
}
.icon.company-lightgrey {
	background-image: url(/icons/office_circle_lightgrey.svg);
}
.icon.organization-managed {
	background-image: url(/icons/office_circle_lightgrey.svg);
}
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
	.icon.organization-managed {
		background-image: none;
		background-color: var(--entity-project);
		-webkit-mask-image: url(/icons/office_circle_grey.svg);
		mask-image: url(/icons/office_circle_grey.svg);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-size: 20px 20px;
		mask-size: 20px 20px;
	}
}
.icon.superuser-grey {
	background-image: url(/icons/superuser_circle_grey.svg);
}
.icon.manager-black {
	background-image: url(/icons/manager_circle_black.svg);
}
.icon.manager-grey {
	background-image: url(/icons/manager_circle_grey.svg);
}
.icon.accountant-grey {
	background-image: url(/icons/accountant_circle_grey.svg);
}
.icon.user-grey {
	background-image: url(/icons/user_circle_grey.svg);
}
.icon.redo-circle-grey {
	background-image: url(/icons/redo_circle_grey.svg);
}
.icon.download-circle-grey {
	background-image: url(/icons/download_circle_grey.svg);
}
.icon.filter-circle-grey {
	background-image: url(/icons/filter_circle_grey.svg);
}
.icon.ticket-grey {
	background-image: url(/icons/ticket_circle_grey.svg);
}
.icon.check-green {
	background-image: url(/icons/check_circle_green.svg);
}
.icon.check-grey {
	background-image: url(/icons/check_circle_grey.svg);
}
.icon.cancel-red {
	background-image: url(/icons/exit_circle_red.svg);
}
.icon.cancel-grey {
	background-image: url(/icons/exit_circle_grey.svg);
}
.icon.ticket-cancel-grey {
	background-image: url(/icons/exit_circle_grey.svg);
}
.icon.ticket-cancel-grey:hover {
	background-image: url(/icons/exit_circle_red.svg);
}
.icon.ticket-smiley-grey {
	background-image: url(/icons/smiley_lightgrey.svg);
}
.icon.ticket-smiley-grey:hover {
	background-image: url(/icons/smiley_yellow.svg);
}
.icon.attention-blue {
	background-image: url(/icons/attention_circle_blue.svg);
}
.icon.attention-red {
	background-image: url(/icons/attention_red.svg);
}
.icon.attention-lightgrey {
	background-image: url(/icons/attention_circle_lightgrey.svg);
}
.icon.message-send-grey {
	background-image: url(/icons/papersend_circle_lightgrey.svg);
}
.icon.message-send-green {
	background-image: url(/icons/papersend_circle_green.svg);
}
.ui-datepicker-trigger {
	background: url(/icons/calendar.svg) center no-repeat;
	background-size: 18px 18px;
	opacity: 50%;
}

/*------------------------------
=UI: RESOURCE ROW ACTIONS
------------------------------*/

.resource-action {
	width: var(--resource-action-collapsed-width);
	height: 100%;
	transition: .3s ease;
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 0;
	background: var(--color-background-secondary);
	border-radius: 0 var(--radius-5) var(--radius-5) 0;
}

.resource-action:hover {
	width: 100px;
	transition: width .35s ease-in-out;
	transition-delay: .5s;
}

/*------------------------------
=UI: RESOURCE ROW ARCHIVE ACTION
------------------------------*/

.resource-action.archive:hover {
	background-color: var(--color-warning-dark);
}

.resource-action.archive :is(div, span, button) {
	-webkit-mask: url(/icons/archive_black.svg) no-repeat 50% 50%/30px 30px;
	mask: url(/icons/archive_black.svg) no-repeat 50% 50%/30px 30px;
	background-color: var(--color-warning-bright);
	height: 100%;
	visibility: hidden;
}

.resource-action.archive:hover :is(div, span, button)  {
	visibility: visible;
	transition-delay: .5s;
}

/*------------------------------
=UI: RESOURCE ROW DELETE ACTION
------------------------------*/

.resource-action.remove:hover {
	background-color: var(--color-error-dark);
}

.resource-action.remove :is(div, span, button) {
	visibility: hidden;
	opacity: 0;
	background-image: radial-gradient(ellipse farthest-corner at center, var(--color-error-bright) 0%, var(--color-error-dark) 100%);
	color: var(--color-text-primary);
	text-shadow: none;
	font-size: 36px;
		font-family: var(--font-ui-family);
		width: 100%;
		height: 100%;
		text-align: center;
		line-height: 66px;
		font-weight: bold;
}

.resource-action.remove:hover :is(div, span, button)  {
	visibility: visible;
	transition: opacity .5s ease-in-out;
	opacity: 1;
	transition-delay: .5s;
}

/*------------------------------
=UI: FLEX TABLE
------------------------------*/

.flextable {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.flextable .row {
	flex: 1;
	padding: 5px 0 5px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.flextable .cell {
	flex: 1;
	line-height: normal;
}

.flextable .cell input {
	vertical-align: baseline;
}

.flextable .cell-content-center{
	display: flex;
	align-items: center;
	justify-content: center;
}

.flextable .cell-select {
	flex: 2;
}

/* A table of settings: the label takes the free width, and the controls align at the right
   next to the help icon. A checkbox needs only its own width. When the label has less than
   12em beside a select, the select and the help icon move below the label. */
.settings-list .row {
	flex-wrap: wrap;
	gap: 6px 16px;
	min-height: 34px;
	padding: 8px 0;
	border-bottom: 1px solid var(--color-background-secondary);
}

.settings-list .cell {
	flex: 0 1 230px;
	margin-left: auto;
}

.settings-list .cell:has(> input[type="checkbox"]) {
	flex: 0 0 auto;
}

.settings-list .cell:first-child {
	flex: 1 1 12em;
	min-width: 0;
	margin-left: 0;
}

.settings-list .cell-content-center {
	flex: 0 0 28px;
	margin-left: 0;
}

.settings-list .row:last-child {
	border-bottom: 0;
}


.cell-select select {
	margin-bottom: 0;
}

/*------------------------------
=RESOURCES
------------------------------*/

/*------------------------------
=HOME
------------------------------*/

.thumb {
	background: url(/icons/thumb.svg) no-repeat top;
	background-size: contain;
	margin: 0 auto;
	width: 75%;
}

.home {
	display: flex;
	flex-flow: row wrap;
	height: 90%;
}

.home > * {
	flex: 1 100%;
}

.middle-center {
	text-align: left;
	margin: 0 auto;
	max-width: 800px;
}

@media all and (min-width: 200px) {
	.aside { flex: 1 auto; }
	.aside-1 { order: 1; margin-top: 30px;}
	.thumb   { height: 150px;}
	.middle    { order: 2; margin: 30px;}
	.aside-2 { order: 3; }
}

@media all and (min-width: 800px) {
	.middle    { flex: 2 0; }
	.aside-1 { order: 1; margin-top: 80px; }
	.thumb   { height: 400px;}
	.middle    { order: 2;}
	.aside-2 { order: 3; }
}

.organizations {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.organization-box {
	width: 300px;
	height: 300px;
	margin: 40px 40px 0 0;
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-10);
	box-shadow: 5px 5px 5px var(--color-background-quaternary);
}

.organization-box:hover {
	opacity: .8;
}

.organization-box-mainlink {
	flex: 5;
	text-decoration: none;
	color: #000;
	padding-top: 13px;
	padding-bottom: 13px;
	padding-left: 23px;
	padding-right: 23px;
}

.organization-box-mainlink:hover {
	color: #000;
}

.organization-box-items {
	position: relative;
	color: var(--color-background-primary);
	flex: 4;
}

.organization-box-shortcuts {
	display: flex;
	height: 60px;
}

.organization-box-shortcuts a {
	text-align: center;
	flex: 1;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	background-size: 28px 28px;
}

.organization-box-shortcuts a:hover {
	opacity: .9;
}

.d3-settings-icon {
	position: absolute;
	top:2px;
	right:2px;
	z-index:9999;
	cursor:pointer;
	height: 30px;
	width: 30px;
	background: url(/icons/settings_lightgrey.svg) center no-repeat;
	background-size: 26px 26px !important;
	margin: 10px 10px 0 0;
}

.organization-settings-button:hover {
	-webkit-filter: invert(1);
		filter: invert(1);
}

.org-dashboard-section {
	position: relative;
	min-height: 40px;
}

.org-dashboard-section-body {
	margin: 20px 0 20px 0;
}

.org-dashboard-section-body > :is(a, button).tooltip {
	position: absolute;
    left: 180px;
    top: -10px;
}

.logbookentry {
	font-size: 14px;
	display: flex;
	flex-direction: row !important;
	align-items: center;
	margin-top: 5px;
}

.logbookentry .errorclass {
		height:10px;
		width:10px;
		border-radius: var(--radius-10);
		margin: 10px 10px;
}

.logbookentry .errorclass.neutral-grey {
	border: 2px solid var(--color-ui-panel-border);
}

.logbookentry .errorclass.normal-green,
.ts_mikron .reviewstatus .accepted {
	border: 2px solid var(--color-success-dark);
	background-color: var(--color-success-bright);
}

.logbookentry .errorclass.medium-yellow {
	border: 2px solid var(--color-warning-dark);
	background-color: var(--color-warning-bright);
}

.logbookentry .errorclass.critical-red,
.ts_mikron .reviewstatus .rejected {
	border: 2px solid var(--color-error-dark);
	background-color: var(--color-error-bright);
}

.logbookentry .logdate {
	flex: unset;
	padding-left: 10px;
}

.logbookentry .logmessage {
	flex: 1;
}

/*------------------------------
=ORGANIZATION SETTINGS
------------------------------*/

.label-container {
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	height:100%;
	gap: 10px;
	padding: 10px;
}

.label {
	display: flex;
	align-items: center;
	box-shadow: 1px 1px 1px 0 rgb(0 0 0 / 25%);
	color: #f9f9f9;
	font-weight: bold;
	border-radius: var(--radius-4);
	padding: 3px 29px;
	height: 25px;
}

.label-action {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	flex: 0;
	gap: 4px;
}

.label:hover,
.label:focus-within {
	padding: 3px;
}

.label:hover > .label-action,
.label:focus-within > .label-action {
	display: flex;
}

.label-action-color {
	display: flex;
	border-radius: var(--radius-15);
	width: 8px;
	height: 8px;
	border: 3px solid rgba(0, 0, 0, .33);
}

.label-action-color > input {
	padding: 0;
	margin: 0;
	border: none;
	width: 10px;
	flex: 1;
	height: auto;
	opacity: 0;
	cursor: pointer;
}

.label-action-remove,
.label-action-toggle {
	color: rgb(0 0 0 / 33%);
	font-size: 24px;
	cursor: pointer;
	line-height: 1;
	user-select: none;
}

.label-action-toggle {
	opacity: .75;
}

.label-action-toggle:hover {
	opacity: 1;
	transform: scale(1.08);
}

.label-action-toggle-undo {
	font-size: 21px;
	margin-left: 10px;
}

.label-name {
	position: relative;
}

.ldap-dashboard-link:hover {
	color: var(--color-org-global);
}

#myLdapTestResult {
	height:  600px;
	font-size: 8pt;
	font-family: monospace;
	background-color: var(--color-background-secondary);
	width: 100%;
	padding: 10px;
	overflow: auto;
	border: 1px solid var(--color-background-secondary);
	margin-bottom: 20px;
}

/*------------------------------
=MEMBERS
------------------------------*/

.member-information-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 32px;
	margin: 0 0 30px 20px;
}

.member-information-group {
	flex: 1 1 190px;
	max-width: 280px;
}

.member-information-group h5 {
	margin: 0 0 8px;
	color: var(--color-text-primary);
}

.member-information-group ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.member-information-group li {
	display: flex;
	align-items: baseline;
	gap: 16px;
	min-height: 24px;
	font-size: 14px;
	line-height: 20px;
}

.member-information-group li span {
	flex: 1 1 auto;
	color: var(--color-text-secondary);
}

.member-information-group li strong {
	flex: 0 0 auto;
	color: var(--color-text-primary);
}

.member-current-absence-summary,
.member-stored-leave {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 24px;
}

.member-project-panel {
	flex: 3;
}

.member-projectsettings-box {
	height: 560px;
	min-width: 500px;
}

.category-graph-panel,
.member-graph-column {
	flex: 3;
	min-width: 500px;
}

/* The Assigned Categories box beside the graph column takes the height of the
   row. Its list scrolls, so a long list does not make the row taller. When the
   row wraps, the box keeps a usable height. */
.member-categories-column {
	display: flex;
	flex-direction: column;
	height: auto;
}

.member-categories-box {
	flex: 1 1 0;
	min-width: 300px;
	min-height: 360px;
	height: auto;
}

/* The summary or the stored-leave control fills the first row of the member
   page; the column gap of the page separates it from the graph row. */
.member-organization-settings {
	display: block;
	max-width: 520px;
}

.member-time-leave-band > :is(.member-time-leave-summary, .member-stored-leave) {
	margin: 0;
}

.member-current-absence-summary,
.member-stored-leave {
	align-items: center;
}

.member-current-absence-card {
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	height: 50px;
	padding: 8px 14px;
	border: 1px solid var(--color-background-secondary);
	border-radius: 0;
	background: var(--color-background-primary);
	color: var(--color-text-primary);
	cursor: pointer;
}

.member-time-leave-report-launch {
	display: inline-flex;
	align-items: center;
	height: 50px;
	padding: 0 18px;
	border-radius: 0;
	line-height: normal;
}

.member-current-absence-card img {
	width: 22px;
	height: 22px;
	opacity: .72;
}

.member-current-absence-card:hover,
.member-current-absence-card:focus-visible {
	border-color: var(--color-org-global);
	outline: none;
}

.member-time-leave-symbol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-size: 20px;
	font-weight: bold;
	line-height: 1;
	color: var(--color-text-secondary);
}

/* The member summary has two groups: work time for the selected range and
   leave for the leave year. Rows use the absence dialog layout: label left,
   value right, and thin separators. The annual leave row has the dialog's bar.
   Each row is a button that opens the matching dialog. */
.member-time-leave-summary {
	min-width: 0;
	margin: 0 0 20px;
}

/* Some parts set their own display (the bar is a flex box), so hidden parts
   need this rule to stay hidden. */
.member-time-leave-summary [hidden] {
	display: none !important;
}

.member-time-leave-summary-group-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	margin: 0;
	padding: 0 0 6px;
	color: var(--color-text-primary);
	font-size: 13px;
	font-weight: 600;
	line-height: 16px;
}

.member-time-leave-range,
.member-time-leave-range-note {
	color: var(--color-text-secondary);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	font-variant-numeric: tabular-nums;
}

.member-time-leave-range-note {
	margin: 0 0 6px;
}

.member-time-leave-rows {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--color-border-primary);
	border-bottom: 1px solid var(--color-border-primary);
}

.member-time-leave-row {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	min-height: 60px;
	padding: 9px 8px;
}

.member-time-leave-row + .member-time-leave-row {
	border-top: 1px solid var(--color-border-primary);
}

/* The two groups are columns: "Work time" and "Leave" are the column headers
   and their rows stack below them. A group needs at least 420px, so the groups
   stack when the member panel is narrower than two groups and the gap. Each
   column has a maximum width, so values stay near their labels on wide
   screens. All rows have one minimum height, so the separators of both
   columns line up. When a long text wraps one row, both columns keep one
   height and their rows share it, so the last separators still line up. Do
   not use a container query here: inline-size containment in the column flex
   box of the member page makes the band very tall. */
.member-time-leave-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 32px;
}

.member-time-leave-summary > * {
	flex: 0 0 100%;
	min-width: 0;
}

.member-time-leave-summary > .member-time-leave-summary-group {
	display: flex;
	flex: 1 1 420px;
	flex-direction: column;
}

.member-time-leave-summary-group > .member-time-leave-rows {
	flex: 1 1 auto;
}

.member-time-leave-rows > .member-time-leave-row {
	flex: 1 0 auto;
}

.member-time-leave-row:hover {
	background-color: var(--color-ui-hover);
}

.member-time-leave-row:focus-visible {
	outline: 2px solid var(--color-org-global);
	outline-offset: -2px;
}

.member-time-leave-row-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.member-time-leave-row .project-target-progress-row-heading {
	gap: 2px 12px;
}

/* The dialog's single row has a bold label. In this list the values carry the
   weight, so the labels are regular. */
.member-time-leave-summary .member-time-leave-row .project-target-progress-label {
	font-weight: 400;
}

.member-time-leave-row .project-target-progress-values {
	column-gap: 8px;
}

.member-time-leave-row .project-target-progress-numbers {
	font-weight: 600;
	white-space: nowrap;
}

.member-time-leave-chevron {
	flex: 0 0 auto;
	color: var(--color-text-secondary);
	font-size: 18px;
	line-height: 20px;
}

.member-time-leave-row:is(:hover, :focus-visible) .member-time-leave-chevron {
	color: var(--color-org-global);
}

.member-time-leave-load-failed {
	margin: 8px 0 0;
	color: var(--color-warning-dark);
}

.member-time-leave-report-body,
.member-time-leave-daily-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px 24px 24px;
}

.modalDialog.member-time-leave-report-dialog {
	flex: 0 1 1480px;
	width: min(1480px, calc(100vw - 32px));
	max-width: min(1480px, calc(100vw - 32px));
	margin: 16px 0;
}

.member-time-leave-report-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--color-ui-panel-border);
	border-radius: var(--radius-4);
	background: var(--color-background-secondary);
}

.member-time-leave-report-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.member-time-leave-report-form .organization-input {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
}

.member-time-leave-report-members {
	flex: 1 0 100%;
}

.member-time-leave-report-range {
	display: flex;
	flex: 7 1 540px;
	align-items: end;
	gap: 10px;
}

.member-time-leave-report-range .member-time-leave-report-field {
	flex: 1 1 150px;
}

.member-time-leave-report-year {
	flex: 2 1 130px;
}

.member-time-leave-report-status {
	flex: 3 1 190px;
}

.date-range-duration {
	display: flex;
	align-items: center;
	min-height: 35px;
	padding: 0 4px;
	color: var(--color-text-secondary);
	white-space: nowrap;
}

.date-range-duration[hidden] {
	display: none;
}

.member-time-leave-archived {
	display: flex;
	align-items: center;
	gap: 5px;
	min-height: 35px;
}

.member-time-leave-report-footer {
	display: flex;
	flex: 1 0 100%;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 4px;
}

.member-time-leave-report-actions {
	display: flex;
	gap: 8px;
}

.member-time-leave-report-actions .button_standard {
	box-sizing: border-box;
	height: 34px;
	padding: 2px 18px;
	line-height: 28px;
	text-align: center;
	text-decoration: none;
}

.member-time-leave-report-actions .member-time-leave-csv {
	border-color: var(--color-org-global);
	background: transparent;
	color: var(--color-org-global);
}

.member-time-leave-report-actions .member-time-leave-csv:hover {
	background: var(--color-background-tertiary);
}

.member-time-leave-report-context {
	margin: 0 2px;
	color: var(--color-text-secondary);
}

.member-time-leave-report-table-wrap {
	max-width: none;
	overflow: visible;
}

.member-time-leave-daily-table-wrap {
	max-width: min(92vw, 1500px);
	overflow: auto;
}

.member-time-leave-report-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
}

.member-time-leave-daily-table {
	width: max-content;
	min-width: 100%;
	border-collapse: collapse;
}

.member-time-leave-report-table th,
.member-time-leave-report-table td {
	padding: 8px 6px;
	border-right: 1px solid var(--color-background-secondary);
	border-bottom: 1px solid var(--color-background-secondary);
	text-align: center;
	vertical-align: middle;
}

.member-time-leave-daily-table th,
.member-time-leave-daily-table td {
	padding: 7px 9px;
	border: 1px solid var(--color-background-secondary);
	text-align: right;
	white-space: nowrap;
}

.member-time-leave-report-table thead th {
	background: var(--color-background-secondary);
	font-size: 12px;
}

.member-time-leave-daily-table thead th {
	background: var(--color-background-secondary);
}

.member-time-leave-col-member {
	width: 19%;
}

.member-time-leave-col-status {
	width: 9%;
}

.member-time-leave-col-metric {
	width: 8%;
}

.member-time-leave-metric-header {
	height: 120px;
	padding: 0 2px 6px !important;
	vertical-align: bottom !important;
}

.member-time-leave-metric-header span {
	display: inline-block;
	position: relative;
	left: calc(50% - 18px);
	bottom: 3px;
	transform: rotate(-45deg);
	transform-origin: left center;
	white-space: nowrap;
}

.member-time-leave-group-headers th {
	padding-top: 9px;
	padding-bottom: 9px;
	border-top: 1px solid var(--color-background-secondary);
}

.member-time-leave-group-header {
	border-left: 3px solid color-mix(in srgb, var(--color-text-secondary) 55%, transparent);
	border-bottom: 2px solid var(--color-org-global) !important;
	font-weight: bold;
	letter-spacing: .02em;
}

.member-time-leave-report-table thead .member-time-leave-group-time {
	background: color-mix(in srgb, var(--color-org-global) 8%, var(--color-background-secondary));
}

.member-time-leave-report-table thead .member-time-leave-group-absence {
	background: color-mix(in srgb, var(--color-org-global) 15%, var(--color-background-secondary));
}

.member-time-leave-report-table thead .member-time-leave-group-annual {
	background: color-mix(in srgb, var(--color-org-global) 22%, var(--color-background-secondary));
}

.member-time-leave-report-table tbody tr > :nth-child(3),
.member-time-leave-report-table tbody tr > :nth-child(7),
.member-time-leave-report-table tbody tr > :nth-child(9),
.member-time-leave-report-table thead tr:last-child > :nth-child(1),
.member-time-leave-report-table thead tr:last-child > :nth-child(5),
.member-time-leave-report-table thead tr:last-child > :nth-child(7) {
	border-left: 3px solid color-mix(in srgb, var(--color-text-secondary) 55%, transparent);
}

.member-time-leave-report-table tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--color-background-secondary) 45%, transparent);
}

.member-time-leave-report-table tr > :first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--color-background-primary);
	text-align: left;
}

.member-time-leave-report-table thead tr > :first-child {
	z-index: 2;
	background: var(--color-background-secondary);
}

.member-time-leave-report-table button {
	padding: 2px 5px;
	border: 0;
	border-radius: var(--radius-3);
	background: transparent;
	color: var(--color-text-primary);
	font: inherit;
	cursor: pointer;
}

.member-time-leave-report-table button:hover,
.member-time-leave-report-table button:focus-visible {
	background: var(--color-background-tertiary);
	color: var(--color-org-global);
	outline: none;
}

.member-time-leave-report-table .member-time-leave-member-open {
	font-weight: bold;
	text-align: left;
	text-decoration: underline;
}

.member-absence-overview-dialog {
	flex: 0 1 680px;
	width: min(680px, calc(100vw - 32px));
	max-width: min(680px, calc(100vw - 32px));
}

.member-absence-overview-body {
	display: flex;
	gap: 20px;
	padding: 20px 24px 26px;
}

.member-absence-overview-section {
	flex: 1 1 0;
	min-width: 0;
}

.member-absence-overview-section h3 {
	margin: 0 0 10px;
	padding: 0;
	font-size: 16px;
}

.member-absence-overview-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.member-absence-overview-list li {
	padding: 10px 0;
	border-bottom: 1px solid var(--color-background-secondary);
}

.member-absence-overview-list li:first-child {
	padding-top: 0;
}

.member-absence-overview-person {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.member-absence-overview-usage {
	flex: 0 0 auto;
	padding: 2px 7px;
	border-radius: var(--radius-pill);
	background: var(--color-background-secondary);
	color: var(--color-text-secondary);
	font-size: 11px;
	line-height: 16px;
}

.member-absence-overview-return {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 4px 0 0;
	color: var(--color-org-global);
	font-size: 12px;
	font-weight: bold;
}

.member-absence-overview-range {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 3px;
	color: var(--color-text-secondary);
	font-size: 12px;
}

.member-absence-overview-duration {
	text-align: right;
}

.member-absence-overview-next-workday {
	margin: 3px 0 0;
	color: var(--color-org-global);
	font-size: 12px;
	font-weight: bold;
}

.member-absence-overview-empty {
	margin: 0;
	color: var(--color-text-secondary);
	font-style: italic;
}

@media (max-width: 1100px) {
	.member-time-leave-report-table-wrap {
		overflow: auto;
	}

	.member-time-leave-report-table {
		min-width: 1040px;
	}
}

@media (max-width: 720px) {
	.member-time-leave-report-form {
		display: flex;
		align-items: stretch;
		flex-direction: column;
	}

	.member-time-leave-report-range {
		display: flex;
		align-items: stretch;
		flex-direction: column;
	}

	.member-time-leave-report-footer,
	.member-absence-overview-body {
		align-items: stretch;
		flex-direction: column;
	}

	.member-absence-overview-body {
		display: flex;
	}
}

.dashboard {
	border-bottom: 1px solid var(--color-background-secondary);
	background-color: var(--color-background-secondary);
	padding: 10px 20px 10px 20px;
	cursor: pointer;
}

.dashboard p {
	font-weight: bold;
	font-size: 18px;
	text-align: center;
	color: var(--color-text-secondary);
	margin: .5em 0;
}

.memberlist {
	display: flex;
	flex-direction: column;
	flex: 1.5;
	max-width: 280px;
	min-width: 150px;
	border-right: 1px solid var(--color-background-secondary);
}

.memberlist .resource-box-item-title h5 {
	padding: 3px 0 5px 0;
	line-height: 1
}
.memberlist .resource-box-item-title h5 span {
	display: inline-block;
	height: 10px;
	width: 10px;
	border-radius: var(--radius-10);
	margin: 0 auto;
	border: 2px solid rgba(0, 0, 0, .1);
	margin: 0 5px 0 0;
}
.memberlist-membername-inactive,
.bill .properties.billcanceled {
	text-decoration: line-through;
	color: var(--color-text-secondary);
}

#member {
	flex: 3.5;
	padding: 20px;
	overflow-y: auto;
}

#member > .accordion-flexcontainer {
	flex-wrap: nowrap;
}

#membersettings .settargetrole {
	display: none;
}

/*------------------------------
=CLIENTS
------------------------------*/

.client-identity {
	flex: 0 1 auto;
	min-width: min(60px, 100%);
	width: max-content;
	max-width: 100%;
	text-align: center;
	overflow-wrap: anywhere;
}

.client-identifier-badge {
	box-sizing: border-box;
	display: inline-block;
	min-width: 2em;
	max-width: 100%;
	padding: 0 .45em;
	background: var(--color-background-quaternary);
	border-radius: 1em;
	color: var(--color-text-primary);
	font-size: 22px;
	font-weight: bold;
	line-height: 2em;
	margin-bottom: 10px;
}

/*------------------------------
=CLIENTS: PROJECT SETTINGS / BUDGETS
------------------------------*/

.client-d3stats {
	flex: 2.5;
	min-width: 500px;
	display: flex;
	flex-direction: column;
	height: auto;
}

.client-d3stats > :is(.client-stats, .project-stats) {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.client-d3stats > :is(.client-stats, .project-stats) > [id$="_Totals"] {
	flex: 0 0 auto;
}

.client-d3stats > :is(.client-stats, .project-stats) > .mg-wrapper {
	flex: 1 1 400px;
	min-height: 400px;
}

/* The title area of a client project row is the keyboard target that selects the project. */
.enabledprojects .ajaxprojectload > .resource-box-item-container[role="button"] {
	cursor: pointer;
}

.enabledprojects .ajaxprojectload > .resource-box-item-container[role="button"]:focus-visible {
	outline: 2px solid var(--color-org-global);
	outline-offset: -2px;
}

.internal-client-finance-row,
.internal-client-project-row {
	margin-top: 20px;
}

.internal-client-finance-box {
	flex: 1 1 300px;
	height: 500px;
}

.internal-client-project-row .client-projectsettings {
	flex: 1 1 100%;
}

.client-accountants {
	flex: 1;
	min-width: 300px;
	height: auto;
	min-height: 500px;
}

.accordion-flexcontainer:has(> .client-projectsettings .client-project-detail:not([hidden]) .budget-list > :is(.budget-budget, .budget-quota)) > .client-accountants {
	display: none;
}

.client-projectsettings,
.project-d3stats,
.project-membersettings {
	flex: 2.5;
	min-width: 500px;
	height: 560px;
}

.projectsetting-billable {
	display: flex;
	align-items: center;
}

.projectsetting-billable-field {
	flex: 1;
	flex-basis: 150px;
}

.projectsetting-billable-actions {
	flex: 0;
	flex-basis: 60px;
	margin: 10px;
}

.projectsetting-billable-spacer {
	flex: 9;
}

.client-project-categories {
	min-width: 350px;
	height: 400px;
	margin-top: 20px;
}

.clientproject {
	background-color: var(--color-background-primary);
	padding: 0 15px 15px 15px;
}

.client-expenses,
.project-budgets,
.project-enabledcategories {
	flex: 1;
	min-width: 300px;
	height: 560px;
}

.project-budgets {
	height: 560px;
	min-height: 560px;
}

.project-overview {
	padding-bottom: 10px;
}

.project-overview-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	gap: 18px;
}

.project-task-list {
	display: flex;
	flex-direction: column;
}

.project-task-row,
.project-overview-target-group {
	padding-bottom: 15px;
}

.project-task-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.project-task-heading .project-tasks {
	flex: 1 1 auto;
	width: auto;
	color: var(--color-text-primary);
	font-weight: 600;
	line-height: 21px;
}

.project-task-completion {
	flex: 0 0 auto;
	color: var(--color-text-secondary);
	font-size: 12px;
	line-height: 18px;
	font-variant-numeric: tabular-nums;
}

.project-task-targets:empty {
	display: none;
}

.project-overview-targets {
	gap: 0;
}

.project-overview-scope-heading {
	margin: 0;
	color: var(--color-text-primary);
	font-size: 14px;
	line-height: 20px;
}

.project-target-progress-note {
	margin: 4px 0 14px;
	color: var(--color-text-secondary);
	font-size: 12px;
	line-height: 17px;
}

.project-target-progress {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.project-target-progress-note {
	margin: -6px 0 0;
}

.project-target-progress-row {
	min-width: 0;
}

.project-target-progress-row.is-child {
	margin-left: 18px;
}

.project-target-progress-row-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.project-target-progress-name,
.project-target-progress-values {
	display: flex;
	min-width: 0;
	align-items: baseline;
	gap: 6px;
}

.project-target-progress-name {
	flex: 1 1 auto;
	flex-wrap: wrap;
}

.project-target-progress-label {
	min-width: 0;
	color: var(--color-text-secondary);
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	overflow-wrap: anywhere;
}

.project-target-progress-completion,
.project-target-progress-status {
	color: var(--color-text-secondary);
	font-size: 11px;
}

.project-target-progress-badge {
	padding: 0 5px;
	border: var(--border-width) solid var(--color-border-primary);
	border-radius: var(--radius-pill);
	color: var(--color-text-secondary);
	font-size: 10px;
	line-height: 16px;
}

.project-target-progress-values {
	flex: 0 1 auto;
	flex-wrap: wrap;
	justify-content: flex-end;
	max-width: 100%;
	font-size: 12px;
	line-height: 18px;
	text-align: right;
}

.project-target-progress-numbers {
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}

.project-target-progress-track {
	position: relative;
	display: flex;
	width: 100%;
	height: 12px;
	overflow: hidden;
	border-radius: var(--radius-pill);
	background: var(--color-target-progress-rest);
}

.project-target-progress-segment {
	display: block;
	height: 100%;
	flex: 0 0 auto;
}

.project-target-progress-segment.is-base {
	width: var(--target-progress-base);
	background: var(--color-target-progress-base);
}

.project-target-progress-segment.is-remainder {
	width: var(--target-progress-remainder);
	background: var(--color-target-progress-rest);
}

.project-target-progress-segment.is-delta {
	width: var(--target-progress-delta);
	background: var(--color-target-progress-over);
}

.project-target-progress-row.is-quota.is-over .project-target-progress-segment.is-delta {
	background: var(--color-target-progress-quota-over);
}

.project-target-progress-row.is-completion .project-target-progress-segment.is-base {
	background: var(--color-target-progress-task);
}

.project-target-progress-row.is-archived {
	opacity: 0.72;
}

.client-target-progress {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 22px;
	padding: 18px;
	border: var(--border-width) solid var(--color-border-primary);
	border-radius: var(--radius-5);
	background: var(--color-background-secondary);
}

.client-target-progress[hidden] {
	display: none;
}

.client-project-archived-note {
	display: block;
	margin-bottom: 10px;
	color: var(--color-text-secondary);
	font-size: 10px;
}

/* The project delete dialog lists what the deletion removes. */
.project-delete-impact {
	margin: 0 0 12px 0;
	padding-left: 20px;
}

.clientprojects {
	background: var(--color-background-primary);
}

.client-target-summary {
	margin: 0;
	padding: 15px;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.client-project-detail {
	width: 100%;
}

.client-project-detail[hidden] {
	display: none;
}

.client-target-detail {
	gap: 12px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.client-project-monthly-targets {
	flex: 1;
	min-width: 300px;
	height: 560px;
	min-height: 560px;
}

.client-project-monthly-targets[hidden] {
	display: none;
}

.client-project-monthly-targets .project-budget-chartblock[hidden] {
	display: none;
}

.client-target-detail-section {
	--client-target-section-color: var(--color-border-primary);
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 4px;
}

.client-target-detail-section.is-project {
	--client-target-section-color: var(--entity-project);
}

.client-target-detail-section.is-tasks {
	--client-target-section-color: var(--entity-task);
}

.client-target-detail-section.is-categories {
	--client-target-section-color: var(--entity-category);
}

.client-target-detail-section-heading {
	margin: 0;
	padding-left: 8px;
	border-left: 2px solid var(--client-target-section-color);
	color: var(--color-text-primary);
	font-size: 14px;
	font-weight: 600;
	line-height: 21px;
}

.client-target-detail-section-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.client-target-detail .client-target-scope {
	gap: 4px;
	padding: 0 0 8px;
	border-top: 0;
}

.client-target-detail .client-target-scope:last-child {
	padding-bottom: 0;
}

.client-target-detail .client-target-scope-heading {
	font-weight: 600;
	line-height: 21px;
}

.client-target-progress-heading,
.client-target-summary-project-heading,
.client-target-scope-heading {
	margin: 0;
	padding: 0;
}

.client-target-summary-project {	padding: 14px;
	border: var(--border-width) solid var(--color-border-primary);
	border-radius: var(--radius-5);
}

.client-target-summary-rows,
.client-target-scope {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.client-target-scope {
	padding-top: 12px;
	border-top: var(--border-width) solid var(--color-border-primary);
}

.client-target-scope-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	font-size: 14px;
}

.client-target-scope.is-archived {
	opacity: 0.72;
}

.expense .resource-box-item-title {
	align-items: flex-start;
}

.expense .expense-details {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	white-space: normal;
	overflow: visible;
}

.expense-summary {
	display: flex;
	align-items: start;
	gap: 10px;
}

.expense-interval {
	display: flex;
	flex: 0 0 26px;
	margin-right: 6px;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: var(--radius-pill);
	background: var(--color-background-secondary);
	color: var(--color-text-secondary);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.expense-dates,
.expense-amounts {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.expense-dates {
	flex: 1 1 90px;
}

.expense-amounts {
	flex: 0 1 auto;
	min-width: 110px;
	align-items: flex-end;
	text-align: right;
}

.expense-description {
	margin-top: 8px;
	width: 100%;
	min-width: 0;
	color: var(--color-text-secondary);
}

.expense-tags {
	margin-top: 4px;
}

.expense-status-badge,
.absence-status-badge {
	display: inline-block;
	margin-top: 2px;
	padding: 1px 6px;
	border-radius: var(--radius-pill);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.expense-status-open-recurring,
.absence-status-taken,
.absence-status-counted {
	background: var(--color-background-secondary);
	color: var(--color-text-secondary);
}

@media only screen and (max-width: 1510px) {
	.client-projectsettings { order: 1; }
}

@media only screen and (min-width: 1100px) {
	.client-d3stats { min-width: 750px; }
	.client-projectsettings { min-width: 750px; }
}

@media only screen and (min-width: 2330px) {
	.client-projectsettings { order: 1; }
}

.budget {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	flex: 1;
}

/*------------------------------
=PROJECTS
------------------------------*/

.project-d3stat {
	height: 560px;
}

.project-tasks {
	font-size: 12px;
	color: var(--color-text-secondary);
	padding-bottom: 0;
	width: fit-content;
	line-height: 10px;
}

.project-tasks:hover {
	text-decoration: underline;
	cursor: pointer;
}

@media only screen and (max-width: 1239px) {
	.project-flexcontainer:nth-last-child(2) { order: 1; }
}

@media only screen and (min-width: 1400px) {
	.project-membersettings { min-width: 700px; }
}

@media only screen and (min-width: 1600px) {
	.project-flexcontainer:nth-last-child(2) { order: 1; }
}

/*------------------------------
=CATEGORIES
------------------------------*/

/*------------------------------
=RATES
------------------------------*/

.ratedetails {
	display: none;
	height: auto;
	padding: 20px 0 20px 0;
	background-color: var(--color-background-primary);
	border-top: 1px solid var(--color-background-secondary);
	box-sizing: border-box;
	width: 100%;
}

.ratelistelement {
	overflow: hidden;
	padding: 0;
}

.ratelistelement > .resource-box-item-container {
	box-sizing: border-box;
	padding: 10px 25px 10px 10px;
	position: relative;
	background-color: var(--color-background-item);
}

.ratelistelement > .resource-box-item-container > .resource-action {
	border-left: 1px solid var(--color-background-secondary);
}

.ratelistelement:has(> .resource-box-item-container > .resource-action) {
	background-color: var(--color-background-primary);
}

.ratelistelement:has(> .resource-box-item-container > .resource-action) > .ratedetails {
	width: calc(100% - var(--resource-action-collapsed-width));
}
.ratedetails .rate {
	padding: 0 0 0 20px;

}
.ratedetails-mainrate {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

.ratedetails-separatorline {
	position: relative;
	margin: 0 20px 25px 20px;
		border-top: 1px dashed var(--color-ui-panel-border);
}

.ratedetails-separator-caption {
	position: absolute;
	font-size: 10px;
}

.ratedetails-relativerates {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.ratedetails-relativerates-info {
	color: var(--color-text-secondary);
	font-style: italic;
	font-weight: normal;
	line-height: 16px;
	font-size: 14px;
}

.rate-mainrate-rate {
	display: inline-block;
	float: right;
	text-align: right;
	padding-right: 10px;
	min-width: 110px;
}

.rate-mainrate-selected {
	font-weight: bold;
	background-color: var(--color-background-item);
}

.rate-inbound-color {
	color: var(--color-error-dark);
}

.rate-outbound-color {
	color: var(--color-success-dark);
}

.rate-selector {
	margin-bottom: 0;
	line-height: 18px;
}

.ratelist {
	display: flex;
	padding-bottom: 5px;
}

/*------------------------------
=ORGANIZATION SETTINGS
------------------------------*/

.organization-settings-columns {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.organization-settings-page .organization-settings-identity-column {
	min-width: 300px;
}

.organization-settings-identity-form {
	margin-right: 50px;
	min-width: 250px;
}

.organization-settings-identity-actions {
	display: flex;
}

.organization-settings-color-control {
	flex: 1;
	text-align: right;
	line-height: 3em;
}

.organization-settings-media-column {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 250px;
}

.organization-settings-logo-preview {
	width: 98%;
	height: 85px;
	background: var(--color-background-secondary);
	border: 3px dashed var(--color-ui-panel-border);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.organization-settings-logo-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	align-items: center;
	padding: 15px 0 35px;
}

.organization-settings-column {
	flex: 1;
	min-width: 250px;
	padding-right: 50px;
}

.organization-settings-account-panel {
	min-width: 250px;
}

.organization-settings-field-action {
	display: flex;
	gap: 10px;
	align-items: center;
	position: relative;
}

.organization-settings-field-value {
	flex: auto;
	min-width: 0;
}

.organization-settings-field-help {
	right: -40px;
	margin-top: -10px;
}

@media (max-width: 640px) {
	.organization-settings-columns {
		flex-direction: column;
		gap: 24px;
	}

	.organization-settings-page .organization-settings-identity-column,
	.organization-settings-media-column,
	.organization-settings-column {
		flex: none;
		min-width: 0;
	}

	.organization-settings-page .organization-settings-account-panel {
		flex: 1 1 100%;
		min-width: 0;
	}

	.organization-settings-identity-form {
		margin-right: 0;
		min-width: 0;
	}

	.organization-settings-column {
		padding-right: 0;
	}

	.organization-settings-identity-actions {
		flex-wrap: wrap;
		gap: 8px;
	}

	.organization-settings-identity-actions > div {
		flex: 1 1 130px;
	}

	.organization-settings-page #namefield,
	.organization-settings-page #streetfield {
		box-sizing: border-box;
		position: relative;
		padding-right: 40px;
	}

	.organization-settings-page #namefield > .right-field-button,
	.organization-settings-page #streetfield > .right-field-button {
		right: 0;
	}

	.organization-settings-page #namefield > div,
	.organization-settings-page #streetfield > div {
		position: relative;
	}

	.organization-settings-page input[type="button"],
	.organization-settings-page input[type="submit"] {
		box-sizing: border-box;
		max-width: 100%;
	}

	.organization-settings-logo-preview {
		box-sizing: border-box;
		width: 100%;
	}

	.organization-settings-page .flextable .cell {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	/* A select below its label fills the line. */
	.settings-list .cell:nth-child(2) {
		flex-grow: 1;
	}

	.organization-settings-field-action {
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 10px;
	}

	.organization-settings-field-action > .organization-settings-field-value,
	.organization-settings-field-action > select {
		flex: 1 1 100%;
	}

	.organization-settings-field-action .organization-input {
		margin-bottom: 0;
	}

	.organization-settings-field-action .organization-settings-field-help {
		position: static;
		margin-top: -10px;
	}
}

/*------------------------------
=ORGANIZATION NON-WORKING DAYS
------------------------------*/

.organization-non-working-days {
	max-width: 980px;
}

.organization-non-working-days-box {
	height: min(420px, 60vh);
	min-height: 300px;
}

.organization-non-working-days-header-actions {
	align-items: center;
	gap: 8px;
}

.organization-non-working-days-header-actions .non-working-day-import {
	width: auto;
	margin: 0 6px 0 0;
	white-space: nowrap;
}

.organization-non-working-days-year-control {
	display: flex;
	align-items: center;
	gap: 6px;
}

.organization-non-working-days-year-control .organization-input {
	width: 88px;
	margin: 0;
	padding: 4px 6px;
}

.organization-non-working-day-row,
.organization-non-working-day-add-form {
	display: flex;
	align-items: center;
	gap: 8px;
}

.organization-calendar-import-body,
.member-absence-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 24px;
}

.organization-calendar-import-preview-form,
.absence-range-form,
.organization-calendar-import-actions,
.member-time-leave-actions {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	flex-wrap: wrap;
}

.organization-calendar-import-preview,
.absence-preview-list {
	max-height: 260px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.organization-calendar-import-row,
.absence-preview-row,
.absence-entry {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 4px;
	border-bottom: 1px solid var(--color-background-secondary);
}

.organization-calendar-import-name {
	flex: 1 1 200px;
}

.organization-calendar-import-state,
.absence-entry-state {
	color: var(--color-text-secondary);
	font-size: 12px;
}

.absence-warning {
	margin: 0;
	padding: 0.65rem 0.8rem;
}

.absence-preview-heading {
	margin: 0;
	padding: 8px 0 0;
	color: var(--color-text-secondary);
	font-size: 13px;
	font-weight: 600;
}

.absence-preview-status,
.absence-entries-empty,
.absence-employee-only {
	margin: 0;
	color: var(--color-text-secondary);
	font-size: 0.9em;
}

.absence-entries-empty {
	padding: 0;
}

.absence-entry-not-counted {
	color: var(--color-warning-dark);
	font-size: 0.9em;
	font-weight: 600;
}

.absence-entry .organization-input,
.absence-preview-row .organization-input,
.absence-range-form .organization-input {
	width: auto;
	margin: 0;
}

.absence-tabs {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.absence-tabs .tab-links {
	display: flex;
	flex: 1 1 auto;
	gap: 6px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--color-ui-panel-border);
}

.absence-tabs .tab-links li {
	float: none;
	margin: 0 0 -1px;
}

.absence-tabs .tab-links a {
	box-sizing: border-box;
	width: auto;
	min-width: 150px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: var(--radius-4) var(--radius-4) 0 0;
	text-align: center;
}

.absence-tabs .tab-links li.activetab a,
.absence-tabs .tab-links li.activetab a:hover {
	border-color: var(--color-ui-panel-border);
	border-bottom-color: var(--color-background-primary);
	background: var(--color-background-primary);
}

.absence-tabs .tab-content {
	display: flex;
	flex: 0 0 100%;
	min-width: 0;
	border: 0;
	border-radius: 0;
	background: var(--color-background-primary);
}

/* Absence dialog. One year control at the right end of the tab row applies
   to both tabs and continues the line under the tabs. Both tab panels share
   one place: the second panel moves back over the first, so the panel area
   has the height of the taller panel and the dialog does not move when the
   tab changes. The inactive panel keeps its layout but is invisible, which
   also removes it from focus and from assistive technology. The shared tab
   code still sets `hidden` and the panel roles. (CSS Grid would stack the
   panels directly, but CODE_STYLE does not allow it.) */
.member-absence-body [hidden] {
	display: none !important;
}

.member-absence-body {
	gap: 16px;
}

.member-absence-body .absence-tabs .tab-content > .tab {
	display: flex !important;
	flex: 0 0 100%;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 0;
	padding: 16px 0 0;
}

.member-absence-body .absence-tabs .tab-content > .tab + .tab {
	margin-left: -100%;
}

.member-absence-body .absence-tabs .tab-content > .tab:is([hidden], :not(.activetab)) {
	visibility: hidden;
}

/* One vertical rhythm: 16px between blocks, 24px before a section heading
   and 8px between a heading and its content. */
.absence-tabs .tab-content > .tab > * {
	margin: 0;
}

.absence-tabs .tab-content > .tab > * + * {
	margin-top: 16px;
}

.absence-tabs .tab-content > .tab > .absence-entries-heading {
	margin-top: 24px;
}

.absence-tabs .tab-content > .tab > .absence-entries-heading + .absence-entries {
	margin-top: 8px;
}

.absence-year-control {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid var(--color-ui-panel-border);
	color: var(--color-text-secondary);
}

.absence-year-stepper {
	display: flex;
	align-items: stretch;
}

.absence-year-stepper .absence-year-input {
	width: 72px;
	margin: 0;
	text-align: center;
	appearance: textfield;
}

.absence-year-stepper .absence-year-input::-webkit-inner-spin-button,
.absence-year-stepper .absence-year-input::-webkit-outer-spin-button {
	margin: 0;
	appearance: none;
}

.absence-year-step {
	box-sizing: border-box;
	width: 34px;
	border: 2px solid var(--color-background-secondary);
	background-color: var(--color-background-primary);
	color: var(--color-text-secondary);
	font-size: 20px;
	line-height: 1;
	text-align: center;
}

.absence-year-step:first-child {
	border-right: 0;
	border-radius: var(--radius-3) 0 0 var(--radius-3);
}

.absence-year-step:last-child {
	border-left: 0;
	border-radius: 0 var(--radius-3) var(--radius-3) 0;
}

.absence-year-step:is(:hover, :focus-visible) {
	background-color: var(--color-ui-hover);
	color: var(--color-org-global);
}

/* The summary uses the project target progress row. Within the entitlement
   the bar shows taken days (base segment) and planned days; days above the
   entitlement form the over segment (delta). The status names each part
   with a key in the colour of its segment. */
.absence-progress-row .project-target-progress-label {
	color: var(--color-text-primary);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}

.absence-progress-row .project-target-progress-values {
	font-size: 14px;
	line-height: 20px;
}

.absence-progress-row .project-target-progress-status {
	font-size: 12px;
	line-height: 16px;
}

.absence-progress-row .project-target-progress-track {
	margin-top: 8px;
}

.project-target-progress-segment.absence-progress-planned {
	width: var(--absence-progress-planned);
	background: var(--color-absence-progress-planned);
}

.absence-progress-row {
	/* Absence bars reuse the target rows, but they keep their colors with every chart palette. */
	--color-target-progress-base: var(--color-absence-progress-taken);
	--color-target-progress-over: var(--color-absence-progress-over);
	--color-absence-progress-planned: color-mix(in srgb, var(--color-absence-progress-taken) 50%, #fff);
}

.absence-progress-part {
	white-space: nowrap;
}

.absence-progress-part::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 5px;
	border-radius: var(--radius-pill);
	vertical-align: 0;
}

.absence-progress-part.is-taken::before {
	background: var(--color-absence-progress-taken);
}

.absence-progress-part.is-planned::before {
	background: var(--color-absence-progress-planned);
}

.absence-progress-part.is-left::before {
	background: var(--color-target-progress-rest);
	box-shadow: inset 0 0 0 1px var(--color-ui-panel-border);
}

.absence-progress-part.is-over {
	color: var(--color-warning-dark);
	font-weight: 600;
}

.absence-progress-part.is-over::before {
	background: var(--color-absence-progress-over);
}

.modalContainer .member-edit-section.absence-record {
	margin-top: 16px;
}

.absence-record .member-edit-section-title,
.absence-entries-heading {
	margin: 0;
	padding: 0;
	color: var(--color-text-primary);
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}

.absence-record .member-edit-section-title {
	margin-bottom: 8px;
}

.absence-record > .absence-warning {
	margin-top: 16px;
}

.absence-range-form {
	gap: 8px 12px;
}

.absence-range-field {
	display: flex;
	flex: 0 1 190px;
	flex-direction: column;
	gap: 4px;
	color: var(--color-text-secondary);
}

.absence-range-field .organization-input {
	width: 100%;
}

.absence-range-form .absence-preview-button {
	box-sizing: border-box;
	height: 36px;
	padding: 0 16px;
	border-color: var(--color-org-global);
	background-color: transparent;
	color: var(--color-org-global);
}

.absence-range-form .absence-preview-button:hover {
	background-color: var(--color-ui-hover);
}

.absence-preview {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--color-ui-panel-border);
}

.absence-preview-row,
.absence-entry {
	gap: 12px;
	padding: 6px 0;
}

.absence-preview-day {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 10px;
	min-width: 0;
	cursor: pointer;
}

.absence-preview-day input {
	margin: 0;
}

.absence-preview-date,
.absence-entry-date {
	flex: 0 0 auto;
	min-width: 9.5em;
}

.absence-preview-reason {
	margin-left: auto;
	color: var(--color-text-secondary);
	font-size: 12px;
}

.absence-preview-totals {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--color-text-secondary);
	font-size: 0.9em;
}

.modalSubmit.absence-preview-submit {
	width: 100%;
	margin-top: 8px;
}

.absence-entries .absence-period-group-heading {
	margin: 16px 0 8px;
	padding: 0;
}

.absence-entries .absence-period-group-heading:first-child {
	margin-top: 0;
}

.absence-period-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Period cards: date range, badge, duration and menu on one line, centred
   on the 32px menu button. On narrow screens the duration moves below. */
.absence-entry-group {
	padding: 8px 8px 8px 16px;
	border-radius: var(--radius-5);
	background-color: var(--color-background-item);
	box-shadow: var(--shadow-xs);
}

.absence-entry-group-summary {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.absence-period-toggle {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 16px;
	min-width: 0;
	min-height: 32px;
	padding: 0;
	text-align: left;
}

.absence-period-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	min-height: 32px;
}

.absence-period-toggle:is(:hover, :focus-visible) .absence-period-range {
	text-decoration: underline;
}

.absence-entry-total,
.absence-entry-portion-text {
	color: var(--color-text-secondary);
	font-size: 12px;
}

.absence-entry-total {
	margin-left: auto;
}

.absence-status-badge {
	margin-top: 0;
}

.absence-status-planned,
.absence-status-after-today {
	background: color-mix(in srgb, var(--color-org-global) 18%, var(--color-background-primary));
	color: var(--color-text-primary);
}

.absence-status-ongoing {
	background: var(--color-success-bright);
	color: var(--color-success-dark);
}

.absence-entry-group .menu-button {
	position: relative;
	flex: 0 0 36px;
	height: 32px;
	float: none;
}

.absence-entry-group .menu {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 4px;
}

/* Date rows form columns: date, state, portion and actions. The actions
   column keeps room for Save, so a changed row does not move the others. */
.absence-entry-group-days {
	margin: 8px 0 0;
	padding: 0;
	border-top: 1px solid var(--color-background-secondary);
	list-style: none;
}

.absence-entry-group-days .absence-entry:last-child {
	border-bottom: 0;
}

.absence-entry-day {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	min-width: 0;
}

.absence-entry-controls {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 12px;
}

.absence-entry-controls :is(.absence-entry-portion, .absence-entry-portion-text),
.absence-preview-row select.organization-input {
	box-sizing: border-box;
	flex: 0 0 140px;
	width: 140px;
}

.absence-entry-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	min-width: 160px;
}

.absence-entry-actions .absence-entry-save {
	padding: 0 12px;
}

.absence-entry-delete {
	padding: 4px 0 4px 6px;
	color: var(--color-text-secondary);
	font-size: 13px;
	text-decoration: underline;
}

.absence-entry-delete:is(:hover, :focus-visible) {
	color: var(--color-action-danger);
}

@media (max-width: 600px) {
	/* The tabs need the full width, so the year control takes its own row
	   above them. */
	.absence-year-control {
		flex-basis: 100%;
		justify-content: flex-end;
		order: -1;
		margin-bottom: 16px;
		border-bottom: 0;
	}

	.absence-range-field,
	.absence-range-form .absence-preview-button {
		flex: 1 1 100%;
	}

	.absence-entry,
	.absence-preview-row {
		flex-wrap: wrap;
	}

	.absence-entry-day {
		flex-basis: 100%;
	}

	.absence-entry-controls {
		flex: 1 1 100%;
	}

	.absence-entry-controls :is(.absence-entry-portion, .absence-entry-portion-text) {
		flex: 1 1 auto;
	}

	.absence-entry-actions {
		min-width: 0;
	}

	.absence-entry-total {
		flex-basis: 100%;
		margin-left: 0;
	}

	.absence-entry-group-summary {
		gap: 8px;
	}
}

.member-time-leave-actions {
	margin: 0 0 15px;
}

.organization-non-working-day-row {
	padding: 7px 10px;
}

.organization-non-working-day-row .organization-input,
.organization-non-working-day-add-form .organization-input {
	margin: 0;
}

.non-working-day-date,
.non-working-day-new-date {
	flex: 0 0 155px;
}

.non-working-day-name,
.non-working-day-new-name {
	flex: 1 1 280px;
	min-width: 120px;
}

.non-working-day-repeat-control {
	display: flex;
	align-items: center;
	flex: 0 1 180px;
	gap: 5px;
	min-width: 150px;
	color: var(--color-text-secondary);
	font-size: 12px;
}

.non-working-day-repeat-control label {
	display: flex;
	align-items: center;
	gap: 5px;
}

.non-working-day-repeat-control input {
	flex: 0 0 auto;
	margin: 0;
}

.organization-non-working-day-row .button_standard,
.organization-non-working-day-add-form .button_standard {
	flex: 0 0 auto;
	width: auto;
	min-width: 78px;
	margin: 0;
}

.organization-non-working-day-add-form {
	width: 100%;
	padding: 8px 10px;
	box-sizing: border-box;
}

.organization-non-working-day-empty {
	padding: 18px 12px;
	color: var(--color-text-secondary);
}

.non-working-day-weekend-slot {
	flex: 0 0 70px;
	font-size: 12px;
	color: var(--color-text-secondary);
}

@media (max-width: 720px) {
	.absence-tabs .tab-links {
		gap: 4px;
		padding: 0;
	}

	.absence-tabs .tab-links li {
		flex: 1 1 0;
	}

	.absence-tabs .tab-links a {
		width: 100%;
		min-width: 0;
		padding: 9px 8px;
	}

	.organization-non-working-days-year-control label {
		display: none;
	}

	.organization-non-working-days-year-control .organization-input {
		width: 72px;
	}

	.organization-non-working-days-header {
		flex-wrap: wrap;
	}

	.organization-non-working-days-header .resource-box-top-center {
		flex: 1 1 calc(100% - 40px);
		width: auto;
	}

	.organization-non-working-days-header-actions {
		flex: 1 1 100%;
		flex-wrap: wrap;
		padding: 0 0 6px;
	}

	.organization-non-working-day-row,
	.organization-non-working-day-add-form {
		align-items: stretch;
		flex-wrap: wrap;
	}

	.organization-non-working-day-add-form {
		height: auto;
		min-height: 42px;
	}

	.organization-non-working-day-row .non-working-day-repeat-control {
		flex-basis: 100%;
	}

	.non-working-day-date,
	.non-working-day-new-date {
		flex: 1 1 140px;
	}

	.non-working-day-name,
	.non-working-day-new-name {
		flex: 2 1 180px;
	}
}

/*------------------------------
=SALARIES
------------------------------*/

.salary-resource-box {
	height: min(520px, 52vh);
	min-height: 450px;
}

.modalDialog.member-edit-modal-dialog {
	width: min(960px, calc(100vw - 48px));
	max-width: 960px;
	margin: 24px 0;
}

.member-edit-modal-dialog #membersettings {
	position: relative;
}

.member-employee-settings-list {
	margin-top: 20px;
}

.annual-leave-entitlement-control {
	margin: 20px 0;
	font-weight: bold;
}

.annual-leave-entitlement-field {
	gap: 12px;
}

.annual-leave-entitlement-copy,
.annual-leave-entitlement-value {
	display: flex;
	align-items: center;
}

.annual-leave-entitlement-copy {
	min-width: 0;
}

.annual-leave-entitlement-icon {
	flex: 0 0 18px;
	width: 18px;
	height: 20px;
	margin-right: 15px;
	background-size: 18px 18px;
	cursor: default;
	opacity: .65;
}

.annual-leave-entitlement-value {
	gap: 8px;
	margin-left: auto;
}

.annual-leave-entitlement-field input {
	box-sizing: border-box;
	margin: 0;
	width: 110px;
	height: 32px;
}

.annual-leave-entitlement-unit {
	color: var(--color-text-secondary);
}

.member-edit-actions {
	position: sticky;
	bottom: 0;
	z-index: 5;
	margin-top: 12px;
	padding: 0;
	border-top: 1px solid var(--color-ui-panel-border);
	background: var(--color-background-primary);
}

.member-edit-submit {
	margin: 0;
}

.salarylistelement {
	cursor: default;
}

.salarylist {
	box-sizing: border-box;
	padding: 4px 10px 14px;
}

.salarylist > .salarylistelement {
	margin: 12px 0 18px;
	padding: 14px;
	border: 1px solid var(--color-ui-panel-border);
	border-left: 4px solid var(--color-org-global);
	background: var(--color-background-secondary);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}

.salarylist > .salarylistelement:hover {
	background: var(--color-background-secondary);
}

.salarylist > .salarylistelement.salary-inactive {
	border-left-color: var(--color-text-secondary);
}

.salary-status-row {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 6px;
}

.salary-status {
	padding: 3px 9px;
	border: 1px solid currentColor;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 700;
	line-height: 14px;
}

.salary-status-active {
	background: var(--color-success-bright);
	color: var(--color-success-dark);
}

.salary-status-inactive {
	background: var(--color-background-quaternary);
	color: var(--color-text-secondary);
}

.salary-delete-confirmation {
	position: fixed;
	inset: 0;
	z-index: 1010;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, .72);
}

.salary-delete-confirmation[hidden] {
	display: none;
}

.salary-delete-confirmation-dialog {
	position: relative;
	box-sizing: border-box;
	width: min(440px, calc(100vw - 48px));
	padding: 28px;
	border: 1px solid var(--color-ui-panel-border);
	border-radius: var(--radius-5);
	background: var(--color-background-primary);
	box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}

.salary-delete-confirmation-dialog h3 {
	margin: 0 28px 10px 0;
}

.salary-delete-confirmation-dialog p {
	margin: 0;
	color: var(--color-text-secondary);
}

.salary-delete-confirmation-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 22px;
}

.salary-core-fields,
.salary-date-fields {
	display: flex;
	gap: 8px;
	align-items: flex-end;
}

.salary-date-fields {
	flex: 2;
}

.salary-field {
	flex: 1;
	min-width: 0;
}

.salary-field label,
.salary-work-schedule-title {
	display: block;
	font-size: 10px;
	line-height: 14px;
}

.salary-field input {
	font-size: 12px;
	line-height: 12px;
	margin-bottom: 5px;
	width: 100%;
	box-sizing: border-box;
}

.salary-amount-field {
	flex: 1;
	min-width: 90px;
}

.salary-actions {
	min-width: 54px;
	padding-bottom: 7px;
}

.salary-actions .resource-box-item-info-icons {
	gap: 4px;
}

.salary-actions button.icon {
	padding: 0;
	border: 0;
	background-color: transparent;
}

.salary-work-schedule {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 2px solid var(--color-background-secondary);
}

.salary-work-schedule-title {
	font-weight: bold;
}

.salary-work-schedule-status {
	margin: 6px 0;
	padding: 6px 8px;
	font-size: 12px;
	line-height: 16px;
}

.salary-work-schedule-grid {
	display: flex;
	gap: 6px;
	margin-top: 6px;
}

.salary-work-schedule-day {
	display: flex;
	flex: 1 1 42px;
	flex-direction: column;
	align-items: center;
	min-width: 0;
}

.salary-work-schedule-labels {
	display: flex;
	flex: 0 0 72px;
	flex-direction: column;
	font-size: 10px;
	line-height: 16px;
}

.salary-work-schedule-labels span:nth-child(2) {
	line-height: 24px;
}

.salary-work-schedule-labels span:nth-child(3) {
	line-height: 26px;
}

.salary-work-schedule-day label {
	font-size: 11px;
	line-height: 16px;
	font-weight: bold;
}

.salary-work-schedule-day input[type="checkbox"] {
	height: 24px;
	margin: 0;
}

.salary-work-schedule-day .salary-schedule-hours {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 4px 2px;
	font-size: 12px;
	line-height: 16px;
	text-align: center;
}

.salary-work-schedule-totals {
	display: flex;
	gap: 16px;
	margin-top: 8px;
	font-size: 12px;
	line-height: 18px;
	color: var(--color-text-secondary);
}

@media all and (max-width: 620px) {
	.modalDialog.member-edit-modal-dialog {
		width: calc(100vw - 20px);
		margin: 10px 0;
	}

	.annual-leave-entitlement-field {
		align-items: stretch;
		flex-direction: column;
	}

	.annual-leave-entitlement-value {
		margin-left: 33px;
	}

	.salary-core-fields,
	.salary-date-fields {
		flex-wrap: wrap;
	}

	.salary-date-fields {
		flex-basis: 100%;
	}

	.salary-work-schedule-grid {
		flex-wrap: wrap;
	}

	.salary-work-schedule-labels {
		display: none;
	}

	.salary-work-schedule-day {
		flex-basis: calc(25% - 6px);
	}
}

/*------------------------------
=MIKRONS
------------------------------*/

.mikron_container{
	display: flex;
	align-items: center;
	overflow-x: auto;
	overflow-y: hidden;
	max-width: 100%;
	min-width: 0;
	padding: 20px;
	background-color: var(--color-background-secondary);
	box-sizing: border-box;
}

#new_mikron_form {
	overflow-x: hidden;
}

#content.mikrons-new-content {
	overflow-x: hidden;
}

#content.mikrons-new-content #new_mikron_form {
	width: 100%;
	max-width: 100%;
}

#content.mikrons-new-content .mikron_container {
	width: 100%;
}

/* "Save" and "Clear drafts" on the classic form and the calendar page. */
.mikron-entry-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.mikron-entry-actions .button_standard {
	padding: 0 12px;
}

/* Inline confirmation of a destructive action (openInlineConfirmation). */
.inline-confirm {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	max-width: 640px;
	margin-top: 12px;
	padding: 12px 16px;
	border-left: 3px solid var(--color-action-danger);
	border-radius: var(--radius-5);
	background: var(--color-background-tertiary);
}

.inline-confirm p {
	flex-basis: 100%;
	margin: 0;
}

.inline-confirm .button_standard {
	padding: 0 12px;
}

.mikron-bookmark-empty {
	font-size: 14px;
	color: var(--color-text-secondary);
	margin: 6px 0 22px 0;
}

.mikron-bookmark-labels {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 30px;
}

.mikron-bookmark-labels .label {
	margin: 0;
	box-sizing: border-box;
}

.mikron-bookmark-label {
	border: none;
	cursor: pointer;
}

.mikron-bookmark-label:hover,
.mikron-bookmark-label:focus-within {
	padding: 3px 3px 3px 29px;
	filter: brightness(1.08);
}

.mikron-bookmark-label .label-name {
	white-space: nowrap;
}

.mikron_box {
	background-color: var(--color-background-primary);
	margin-right: 20px;
	min-width: 330px;
	max-width: 330px;
	border-radius: var(--radius-5);
}

html[data-theme-variant="dark"] .mikron_box,
html[data-theme-variant="dark"] .mikron-calendar-draft > .mikron_body {
	background-color: var(--color-background-secondary);
	box-shadow: inset 0 0 0 1px var(--color-ui-panel-border);
}

/* The error box sits in the card flow, so it does not cover the card or the intro. */
.mikron_box .mikron_error {
	margin: 0 0 12px 0;
	padding: .9em;
	background: var(--color-background-primary);
	border: 1px solid var(--color-error-dark);
	border-left-width: 4px;
	border-radius: var(--radius-3);
	font-size: 14px;
	color: var(--color-text-primary);
}

.mikron_error p {
	margin: 15px 0 0 0;
}

.mikron_error #resource_delete_btnClose {
	color: var(--color-error-dark) !important;
}

.mikron_body{
	transition: opacity 200ms, margin-left 200ms ease-in;
	-webkit-transition: opacity 200ms, margin-left 200ms ease-in;
	padding: 28px;
}

.mikron_selector{
	width: 100%;
	margin-bottom:10px;
}

/* The cards of the classic form, the edit dialogs and the drafts of the calendar page. */
.mikron_box .mikron_body > .mikron_selector:first-of-type,
.mikron-calendar-draft .mikron_body > .mikron_selector:first-of-type {
	margin-top: 10px;
}

.mikron-task-requirement {
	display: none;
	margin: -2px 0 10px;
	padding: 8px 10px;
	border-left: 3px solid var(--p-entity-project);
	background: var(--color-background-tertiary);
	color: var(--color-text-primary);
	font-size: 13px;
	line-height: 1.4;
}

.mikron-task-requirement.is-visible {
	display: block;
}

.mikron-task-requirement-grandfathered {
	display: none;
}

.mikron-task-requirement.is-grandfathered .mikron-task-requirement-current {
	display: none;
}

.mikron-task-requirement.is-grandfathered .mikron-task-requirement-grandfathered {
	display: inline;
}

.mikron-task-requirement.is-error {
	border-left-color: var(--color-error-dark);
	background: var(--color-error-bright);
	color: var(--color-error-dark);
}

.btnMikronDelete{
	color: var(--color-text-secondary);
	font-size: 25px;
	line-height: 0;
	text-decoration: none;
	position: relative;
	text-align: right;
	top: 20px;
	right: 15px;
	cursor: pointer;
}

#addButtonDiv{
	cursor: pointer;
	min-width: 30px;
	background: url(/icons/plus_circle_grey.svg) center no-repeat;
	background-size: 28px 28px;
	height: 40px;
}

#addButtonDiv:hover{
	background: url(/icons/plus_circle_black.svg) center no-repeat;
	background-size: 28px 28px;
}

.btnMikronDelete:hover{
	color: var(--color-text-primary);
	cursor: pointer;
}

.mikron-slider-input {
	padding: 4px 5px;
	margin-bottom: 0 !important;
}

.mikron-slider {
	-webkit-appearance: none;
	margin-right: 15px;
	width: 100%;
	height: 8px;
	border-radius: var(--radius-5);
	border: 2px solid var(--color-ui-panel-border);
	background-size: 25% 100%;
	background-repeat: no-repeat;
	background-image: linear-gradient(var(--color-org-global), var(--color-org-global));
	background-color: var(--color-background-quaternary);
}

.mikron-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: var(--color-text-secondary);
	cursor: ew-resize;
	box-shadow: 0 0 2px 0 #555;
	transition: background .3s ease-in-out;
	-webkit-transition: background .3s ease-in-out;
}

.mikron-slider::-moz-range-thumb {
	-webkit-appearance: none;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: var(--color-text-secondary);
	cursor: ew-resize;
	box-shadow: 0 0 2px 0 #555;
	transition: background .3s ease-in-out;
	-webkit-transition: background .3s ease-in-out;
}

.mikron-slider::-webkit-slider-thumb:hover {
	background: var(--color-text-primary);
}

.mikron-slider::-moz-range-thumb:hover {
	background: var(--color-text-primary);
}

/*------------------------------
=MIKRONS: SLIDER TRACK
------------------------------*/
.mikron-slider::-webkit-slider-runnable-track  {
	-webkit-appearance: none;
	box-shadow: none;
	border: none;
	background: transparent;
}

.mikron-slider::-moz-range-track {
	-webkit-appearance: none;
	box-shadow: none;
	border: none;
	background: transparent;
}

/* The labels and the fields of the times, side by side (partial_mikron_entry_times.erb). */
.mikron-entry-times {
	display: flex;
	margin-top: 10px;
}

.mikron-entry-times > .mikronDate,
.mikron-entry-times > .mikronTime {
	flex: 1;
}

.mikronDate {
	height: 30px;
	width: 100%;
	padding-right: 12px;
	float: left;
	text-align: right;
}

.mikronTime {
	text-align: right;
}

.mikronTime input {
	text-align: right;
	padding-right: 10px;
}

.mikronDateText {
	margin-bottom: 12px;
	line-height: 24px;
	text-align: right;
}

.mikronDescription {
	width: 100%;
		margin-top: 10px;
	box-sizing: border-box;
	resize: vertical;
}

/* The badge "Draft" for new Mikrons that are not saved yet: the cards of the classic form, and the
   pane title and the list without times of the calendar page. A draft is in the browser store.
   A running timer and a calendar event have no badge. */
.mikron-entry-badge {
	display: inline-block;
	padding: 1px 8px;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* The bright warning colour with the primary text keeps at least 11:1 contrast in every theme.
   The colour vision setting gives one light warning colour for all themes. Then the dark themes
   have light text on a light background. With that setting the badge uses the third background
   of the theme, so the primary text keeps its contrast, and keeps the warning border. */
.mikron-entry-badge.is-draft {
	border-color: var(--color-warning-dark);
	background: var(--color-warning-bright);
	color: var(--color-text-primary);
}

html[data-cvd="1"] .mikron-entry-badge.is-draft {
	background: var(--color-background-tertiary);
}

/* The running timer has the same dark colours in every theme, so it differs from the coloured
   drafts. Contrast on #0b1118: text #e6edf3 16:1, dot #ff4d6a 5.9:1. White on the stop red
   #c9213d 5.6:1, and the stop red on the bar 3.4:1. */
.mikron-timer-bar,
.mikron-timer-status {
	--mikron-timer-background: #0b1118;
	--mikron-timer-text: #e6edf3;
	--mikron-timer-border: #8a9aab;
	--mikron-timer-dot: #ff4d6a;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	box-sizing: border-box;
	border: 1px solid var(--mikron-timer-border);
	border-radius: var(--radius-6);
	background: var(--mikron-timer-background);
	color: var(--mikron-timer-text);
}

/* The offset cancels the top padding of #content, so no scrolled content shows above the bar. */
.mikron-timer-bar {
	position: sticky;
	top: -30px;
	z-index: 20;
	margin: 0 0 12px;
	--mikron-timer-stop: #c9213d;
	padding: 6px 8px 6px 14px;
	font-size: 14px;
}

.mikron-timer-status {
	margin: 0 0 10px;
	padding: 4px 6px 4px 10px;
	font-size: 13px;
}

/* The slim bar of the idle timer takes the place of the dark bar. It has the height of the dark
   bar, so a start or a stop does not move the page, and "Start timer" is where "Stop timer"
   appears. It is not sticky and takes the colours of the theme. */
.mikron-timer-start {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
	box-sizing: border-box;
	margin: 0 0 12px;
	padding: 6px 8px 6px 14px;
	border: 1px solid var(--color-ui-panel-border);
	border-radius: var(--radius-6);
	background: var(--color-background-secondary);
}

.mikron-timer-start-dot {
	display: inline-block;
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--color-text-secondary);
	opacity: .6;
}

.mikron-timer-start .button_standard {
	margin-left: auto;
	padding: 0 14px;
	line-height: 26px;
}

.mikron-timer-bar-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
	font-weight: bold;
}

.mikron-timer-bar-clock {
	font-weight: bold;
	font-variant-numeric: tabular-nums;
	color: #ffffff;
}

.mikron-timer-since {
	flex: 1 1 auto;
	min-width: 0;
}

.mikron-timer-bar-dot,
.mikron-timer-dot {
	display: inline-block;
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--mikron-timer-dot, #ff4d6a);
	box-shadow: 0 0 0 3px rgb(255 77 106 / 30%);
	animation: mikron-timer-pulse 2s ease-in-out infinite;
}

@keyframes mikron-timer-pulse {
	50% {
		box-shadow: 0 0 0 1px rgb(255 77 106 / 30%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mikron-timer-bar-dot,
	.mikron-timer-dot {
		animation: none;
	}
}

.mikron-timer-bar-stop {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 28px;
	padding: 2px 14px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--mikron-timer-stop);
	color: #ffffff;
	font-weight: bold;
	cursor: pointer;
}

.mikron-timer-bar-stop:hover {
	text-decoration: underline;
}

.mikron-timer-bar-stop:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.mikron-timer-bar-stop:disabled {
	cursor: default;
	text-decoration: none;
}

/* The class rules set display, so the hidden attribute needs its own rule. */
.mikron-timer-start[hidden],
.mikron-timer-bar[hidden],
.mikron-timer-status[hidden] {
	display: none;
}

/* The Form | Calendar switch shares its look with the "Day | Week" buttons of the calendar
   (--mikron-segment-*). The border uses the secondary text for 3:1 against the page. */
.mikrons-new-content,
.mikron-calendar-content {
	--mikron-segment-border: var(--color-text-secondary);
	--mikron-segment-active-background: color-mix(in srgb, var(--color-highlight) 16%, var(--color-background-tertiary));
	--mikron-segment-active-border: var(--color-highlight);
}

.mikron-entry-view-switch {
	display: inline-flex;
	flex: 0 0 auto;
	align-self: center;
	margin-right: 12px;
}

.mikron-entry-view-switch-option {
	padding: .375rem .75rem;
	border: 1px solid var(--mikron-segment-border);
	border-radius: .25rem;
	background: var(--color-background-tertiary);
	color: var(--color-text-primary);
	font-size: 1rem;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
}

.mikron-entry-view-switch-option:not(:first-child) {
	margin-left: -1px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.mikron-entry-view-switch-option:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.mikron-entry-view-switch-option:hover,
.mikron-entry-view-switch-option[aria-current="page"] {
	position: relative;
	border-color: var(--mikron-segment-active-border);
	background: var(--mikron-segment-active-background);
}

.mikron-entry-view-switch-option:focus-visible {
	position: relative;
	z-index: 1;
	outline: 2px solid var(--color-text-primary);
	outline-offset: 2px;
}

/* The bar "Today so far". The project colours are organization data, so the legend and the text
   alternative carry the meaning. */
.mikron-today-progress {
	max-width: 640px;
	margin: 8px 0 4px;
}

.mikron-today-progress-title {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: bold;
	color: var(--color-text-primary);
}

.mikron-today-progress-bar {
	display: flex;
	gap: 2px;
	box-sizing: border-box;
	height: 16px;
	padding: 2px;
	border: 1px solid var(--color-text-secondary);
	border-radius: var(--radius-4);
	background: var(--color-background-tertiary);
}

.mikron-today-progress-segment,
.mikron-today-progress-rest {
	flex: 0 1 auto;
	min-width: 3px;
	border-radius: 2px;
}

.mikron-today-progress-segment,
.mikron-today-progress-swatch {
	--mikron-segment-fill: var(--mikron-segment-color, var(--color-text-secondary));
	background: var(--mikron-segment-fill);
}

.mikron-today-progress-segment.is-unsaved,
.mikron-today-progress-swatch.is-unsaved {
	background: repeating-linear-gradient(135deg, var(--mikron-segment-fill) 0 4px, color-mix(in srgb, var(--mikron-segment-fill) 30%, var(--color-background-tertiary)) 4px 7px);
}

.mikron-today-progress-rest {
	background: color-mix(in srgb, var(--color-text-secondary) 22%, var(--color-background-tertiary));
}

.mikron-today-progress-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 14px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--color-text-primary);
}

.mikron-today-progress-legend li {
	display: flex;
	align-items: center;
	gap: 5px;
}

.mikron-today-progress-swatch {
	display: inline-block;
	flex: 0 0 auto;
	width: 14px;
	height: 10px;
	border: 1px solid var(--color-text-secondary);
	border-radius: 2px;
}

/* Day summaries. The secondary text has less than 4.5:1 contrast in some themes, so these small
   texts use the primary text. */
.mikron-day-summary-line {
	display: flex;
	flex-wrap: wrap;
	gap: 0 12px;
	font-size: 13px;
	color: var(--color-text-primary);
}

.mikron-day-summary-main {
	font-weight: bold;
}

.mikron-day-summary-balance.is-over {
	font-weight: bold;
}

.mikron-calendar-today {
	margin-top: 12px;
	padding: 0 20px;
}

.mikron-day-summary {
	max-width: 640px;
	margin: 12px 0;
}

.mikron-day-summary h4 {
	margin: 0 0 4px;
}

.mikron-day-summary-unavailable {
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--color-text-primary);
}

.mikron-day-summary-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Calendar page for new Mikrons (views/mikrons/calendar.erb). */

/* The state colours mix with the primary text, so that they keep 3:1 against the calendar in
   every theme. The colour vision setting gives one dark red for all themes. */
.mikron-calendar {
	--mikron-calendar-error-border: var(--color-error-dark);
	--mikron-calendar-warning-border: color-mix(in srgb, var(--color-warning-dark) 55%, var(--color-text-primary));
	--mikron-hours-reached: color-mix(in srgb, var(--color-success-dark) 65%, var(--color-text-primary));
	--mikron-hours-short: color-mix(in srgb, var(--color-warning-dark) 55%, var(--color-text-primary));
}

html[data-cvd="1"] .mikron-calendar {
	--mikron-calendar-error-border: color-mix(in srgb, var(--color-error-dark) 50%, var(--color-text-primary));
}

.mikron-calendar-main {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px;
}

.mikron-calendar-grid-column {
	flex: 1 1 520px;
	min-width: 0;
}

/* "Add entry" over the pane. layoutMikronCalendarSide sets the variables when the side column is
   next to the calendar: the row of "Add entry" has the height of the calendar toolbar, and the
   pane goes from the day headings to the end of the week total. Under the calendar, the pane
   takes the height of its content. */
.mikron-calendar-side {
	flex: 0 1 370px;
	min-width: 0;
}

.mikron-calendar-side-actions {
	display: flex;
	align-items: center;
	min-height: var(--mikron-calendar-toolbar-height, auto);
	margin-bottom: var(--mikron-calendar-pane-offset, 12px);
	padding: 0 20px;
}

/* The pane has the background of the card row of the classic form (.mikron_container), and a
   draft is a card of the same width (330px) and spacing as .mikron_box > .mikron_body. */
.mikron-calendar-pane {
	box-sizing: border-box;
	height: var(--mikron-calendar-pane-height, auto);
	overflow-y: auto;
	padding: 20px;
	background-color: var(--color-background-secondary);
	border-radius: var(--radius-5);
}

.mikron-calendar-pane h3 {
	margin: 0 0 12px;
	padding: 0;
}

.mikron-calendar-pane-badge .mikron-entry-badge {
	vertical-align: middle;
}

/* The messages and the timer status are above the card, "Discard draft" is under it. */
.mikron-calendar-draft > .mikron_body {
	background-color: var(--color-background-primary);
	border-radius: var(--radius-5);
}

.mikron-calendar-message {
	margin: 0 0 12px;
	padding: 8px 10px;
	border-left: 3px solid var(--color-border-primary);
	background: var(--color-background-tertiary);
	color: var(--color-text-primary);
	font-size: 13px;
	line-height: 1.4;
}

.mikron-calendar-message p {
	margin: 0;
}

.mikron-calendar-message p + p {
	margin-top: 4px;
}

.mikron-calendar-message.is-warning {
	padding-left: 28px;
	border-left-color: var(--color-warning-dark);
}

.mikron-calendar-message.is-warning.is-single {
	padding-left: 10px;
}

.mikron-calendar-message.is-note {
	border-left-color: var(--color-highlight);
}

.mikron-calendar-message.is-error {
	border: 1px solid var(--mikron-calendar-error-border);
	border-left-width: 4px;
}

.mikron-calendar-discard {
	margin-top: 12px;
}

.mikron-calendar-savebar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 20px;
	padding: 12px 20px;
	background-color: var(--color-background-secondary);
	border-radius: var(--radius-5);
}

.mikron-calendar-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
}

.mikron-calendar-savebar .inline-confirm {
	flex-basis: 100%;
	max-width: none;
	margin-top: 0;
	box-sizing: border-box;
}

/* Map the EventCalendar variables to the Treetops theme, so every theme applies. */
.mikron-calendar .ec {
	color-scheme: inherit;
	color: var(--color-text-primary);
	--ec-color-50: var(--color-background-primary);
	--ec-color-100: var(--color-background-secondary);
	--ec-color-200: var(--color-ui-hover);
	--ec-color-300: var(--color-border-primary);
	--ec-color-400: var(--color-text-secondary);
	--ec-bg-color: var(--color-background-tertiary);
	--ec-text-color: var(--color-text-primary);
	--ec-border-color: var(--color-border-primary);
	--ec-button-bg-color: var(--color-background-tertiary);
	--ec-button-border-color: var(--mikron-segment-border);
	--ec-button-text-color: var(--color-text-primary);
	--ec-button-active-bg-color: var(--mikron-segment-active-background);
	--ec-button-active-border-color: var(--mikron-segment-active-border);
	--ec-button-active-text-color: var(--color-text-primary);
	--ec-today-bg-color: color-mix(in srgb, var(--color-highlight) 8%, var(--color-background-tertiary));
	--ec-highlight-color: color-mix(in srgb, var(--color-highlight) 20%, var(--color-background-tertiary));
	--ec-event-bg-color: var(--color-background-secondary);
	--ec-event-text-color: var(--color-text-primary);
	--ec-now-indicator-color: var(--color-error-dark);
	--ec-popup-bg-color: var(--color-background-tertiary);
}

/* The frame ends at the last day column. The scroll bar of .ec-main has no frame, and the hours
   row closes the frame at the bottom (layoutMikronCalendarFoot). */
.mikron-calendar .ec-main {
	border-color: transparent;
}

.mikron-calendar .ec-header,
.mikron-calendar .ec-body {
	border: solid var(--ec-border-color);
	border-width: 0 1px;
}

.mikron-calendar .ec-header {
	border-top-width: 1px;
}

.mikron-calendar .ec-event.mikron-calendar-saved {
	--ec-event-bg-color: var(--color-background-secondary);
	border-left: 3px solid var(--color-text-secondary);
	cursor: pointer;
}

.mikron-calendar .ec-event.mikron-calendar-saved.is-rejected {
	--ec-event-bg-color: var(--color-background-tertiary);
	background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--color-text-secondary) 22%, transparent) 6px 8px);
	border-left-style: dashed;
}

.mikron-calendar-event-status {
	font-weight: normal;
	font-style: italic;
}

/* An event has no "Draft" badge, so the shape marks a draft: a border on all sides and a wider
   stripe. The highlight colour alone is too light for 3:1 in some light themes. */
.mikron-calendar .ec-event.mikron-calendar-draft-event {
	--ec-event-bg-color: color-mix(in srgb, var(--color-highlight) 22%, var(--color-background-tertiary));
	--mikron-draft-border: color-mix(in srgb, var(--color-highlight) 45%, var(--color-text-primary));
	border: 1px solid var(--mikron-draft-border);
	border-left: 5px solid var(--mikron-draft-border);
}

/* The script gives the text colour, black or white with at least 4.5:1
   (mikronCalendarContrastTextColor). The edge mixes it into the project colour, so the event
   stays visible in light and dark themes. */
.mikron-calendar .ec-event.mikron-calendar-draft-event.has-project-color {
	--ec-event-bg-color: var(--mikron-event-project);
	--ec-event-text-color: var(--mikron-event-text);
	border-color: color-mix(in srgb, var(--mikron-event-text) 60%, var(--mikron-event-project));
}

.mikron-calendar .ec-event.mikron-calendar-draft-event.has-marker-color {
	border-left: 5px solid var(--mikron-event-marker);
}

/* A marker with too little contrast against the fill gets a thin line at its inner edge. */
.mikron-calendar .ec-event.mikron-calendar-draft-event.has-pale-marker::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 1px;
	background: var(--mikron-event-text, var(--color-text-primary));
}

/* The state borders are at the edge of the event, so they stay visible on every project colour. */
.mikron-calendar .ec-event.mikron-calendar-draft-event.is-incomplete {
	border-top: 2px dashed var(--mikron-calendar-warning-border);
	border-right: 2px dashed var(--mikron-calendar-warning-border);
	border-bottom: 2px dashed var(--mikron-calendar-warning-border);
}

.mikron-calendar .ec-event.mikron-calendar-draft-event.is-running {
	--ec-event-bg-color: #0b1118;
	--ec-event-text-color: #e6edf3;
	--mikron-timer-dot: #ff4d6a;
	border: 1px solid #8a9aab;
	border-left: 5px solid #ff4d6a;
	cursor: pointer;
}

.mikron-calendar-event-time .mikron-timer-dot {
	width: 8px;
	height: 8px;
	margin-right: 4px;
	vertical-align: baseline;
}

/* A refused entry keeps its background, so its text keeps its contrast. The ring shows the
   failure on every project colour. */
.mikron-calendar .ec-event.mikron-calendar-draft-event.is-failed {
	border-width: 2px;
	border-style: solid;
	border-left-width: 5px;
	border-color: var(--mikron-calendar-error-border);
	box-shadow: 0 0 0 2px var(--mikron-calendar-error-border);
}

.mikron-calendar .ec-event.mikron-calendar-draft-event.is-focused {
	z-index: 2;
	outline: 2px solid var(--color-text-primary);
	outline-offset: 3px;
}

/* EventCalendar sets the exact height inline. A short event keeps it, so it does not cover the
   next entry; a smaller time line fits a 15-minute event. The keyboard focus shows the full line,
   and the time line has a title for the pointer. */
.mikron-calendar .ec-time-grid .ec-event {
	overflow: clip;
}

.mikron-calendar .ec-time-grid .ec-event.is-short-event {
	padding-block: 0;
	font-size: .75em;
	line-height: 1;
}

.mikron-calendar .ec-time-grid .ec-event.is-short-event:focus-visible {
	min-block-size: 2em !important;
	z-index: 3 !important;
}

/* A range across midnight has one part in each day. Only the last part can change the end. */
.mikron-calendar .ec-event.ec-end-clipped .ec-resizer {
	display: none;
}

.mikron-calendar-event-time,
.mikron-calendar-event-title {
	flex-shrink: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.mikron-calendar-event-time {
	font-weight: bold;
}

.mikron-calendar-event-detail {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* layoutMikronCalendarFoot sets the widths and the offset. The hours row and the week total end at
   the last day column, not under the scroll bar of the calendar. */
.mikron-calendar-foot {
	overflow: hidden;
	margin-right: var(--mikron-calendar-scrollbar-width, 0px);
	border-top: 1px solid var(--color-border-primary);
}

.mikron-calendar-foot-days {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mikron-calendar-foot-day,
.mikron-calendar-week-total {
	box-sizing: border-box;
	border-top: 3px solid var(--color-border-primary);
	background: var(--color-background-tertiary);
	color: var(--color-text-primary);
}

.mikron-calendar-foot-day {
	flex: 0 0 auto;
	min-width: 0;
	padding: 4px 2px 6px;
	border-right: 1px solid var(--color-border-primary);
	text-align: center;
	overflow-wrap: anywhere;
}

.mikron-calendar-foot-day:first-child {
	border-left: 1px solid var(--color-border-primary);
}

.mikron-calendar-foot-total {
	display: block;
	font-size: 15px;
	font-weight: bold;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}

.mikron-calendar-foot-detail {
	display: block;
	font-size: 11px;
	line-height: 1.3;
}

.mikron-calendar-foot-day.is-reached,
.mikron-calendar-week-total.is-reached {
	border-top-color: var(--mikron-hours-reached);
	background: color-mix(in srgb, var(--color-success-dark) 16%, var(--color-background-tertiary));
}

.mikron-calendar-foot-day.is-short,
.mikron-calendar-week-total.is-short {
	border-top-color: var(--mikron-hours-short);
	background: color-mix(in srgb, var(--color-warning-dark) 18%, var(--color-background-tertiary));
}

.mikron-calendar-week-total {
	margin: 8px var(--mikron-calendar-scrollbar-width, 0px) 0 0;
	padding: 6px 12px;
	font-weight: bold;
	font-variant-numeric: tabular-nums;
}

/* The class rules set display, so the hidden attribute needs its own rule. */
.mikron-calendar-foot[hidden],
.mikron-calendar-week-total[hidden],
.mikron-calendar-untimed[hidden],
.mikron-calendar-discard[hidden],
.mikron-calendar-pane-badge[hidden] {
	display: none;
}

.mikron-calendar-untimed {
	margin: 0 0 16px;
}

.mikron-calendar-untimed h4 {
	margin: 0 0 4px;
}

/* The primary text: the secondary text has less than 4.5:1 at this size in some themes. */
.mikron-calendar-untimed-intro {
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--color-text-primary);
}

.mikron-calendar-untimed-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mikron-calendar-untimed-entry {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	width: 100%;
	box-sizing: border-box;
	padding: 6px 10px;
	border: 1px dashed var(--color-warning-dark);
	border-left: 3px solid var(--color-warning-dark);
	border-radius: var(--radius-5);
	background: var(--color-background-tertiary);
	color: var(--color-text-primary);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.mikron-calendar-untimed-entry:hover,
.mikron-calendar-untimed-entry:focus-visible {
	background: var(--color-ui-hover);
}

.mikron-calendar-untimed-entry[aria-current="true"] {
	outline: 2px solid var(--color-highlight);
	outline-offset: 1px;
}

.mikron-calendar-untimed-project {
	font-weight: bold;
}

.mikron-calendar-untimed-reason {
	font-size: 13px;
	color: var(--color-text-primary);
}

@media (max-width: 1000px) {
	.mikron-calendar-side {
		flex-basis: 100%;
	}
}

.mikron-copyarrow {
	margin: auto 20px auto 0;
	height: 64px;
	width: 64px;
	background: url(/icons/plus_circle_grey.svg) center no-repeat;
	background-size: 32px 32px;
	background-position-x: center;
	background-position-y: center;
	cursor: pointer;
}

.mikron_directforwardarrow {
	position: absolute;
	z-index: -1;
	right: -18px;
	top: 10px;
	height: 48px;
	width: 48px;
	background: url(/icons/arrow_right_halfcircle_grey.svg) center no-repeat;
	background-size: 32px 32px;
	cursor: pointer;
}

.mikron_directforwardarrow:hover {
	right: -40px;
}

.mikron-copyarrow:hover {
	background-image: url(/icons/plus_circle_lightgrey.svg);
}
.hidden-from-user {
	position: absolute;
	overflow: hidden;
	clip: rect(0 0 0 0);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
}

/*------------------------------
=TIMESHEETS
------------------------------*/

.filter-icon {
	background: url(/icons/filter_black.svg) center no-repeat;
	opacity: 30%;
	background-size: 30px 30px;
	min-height: 30px;
	min-width: 30px;
	position: relative;
}

.ts_mikron {
	font-size: 14px;
	position: relative;
	background-color:  var(--color-background-item);
	padding: 5px 0 10px 0;
	margin: 5px 0 5px 0;
	border-radius: var(--radius-5);
}

.ts_mikron:hover {
	background-color: var(--color-background-tertiary);
}

.ts_mikron.invalid {
	background-color: var(--color-background-item-high-priority);
}

.ts_mikron.invalid:hover {
	background-color: var(--color-background-item-high-priority-hover);
}

.ts_mikron.compact {
	padding: 0;
	font-size: 14px;
}

.ts_mikron_highlight {
	background-color: var(--color-success-bright);
}

.zigzag {
	position: relative;
	width: 100%;
}
.zigzag:before {
	content: "";
	display: block;
	position: absolute;
	top: -10px;
	width: 100%;
	height: 10px;
}

.ts_mikron_forwarded {
	background-color: var(--color-background-secondary);
}

.ts_mikron_forwarded:hover {
	background-color: var(--color-background-tertiary);
}

.ts_mikron_forwarded:before {
	background:
		linear-gradient(
			45deg, transparent 33.333%,
			var(--color-background-secondary) 33.333%, var(--color-background-secondary) 66.667%,
			transparent 66.667%
		),
		linear-gradient(
			-45deg, transparent 33.333%,
			var(--color-background-secondary) 33.333%, var(--color-background-secondary) 66.667%,
			transparent 66.667%
		);
	background-size: 20px 40px;
}

.ts_mikron_forwarded:hover::before{
	background:
		linear-gradient(
			45deg, transparent 33.333%,
			var(--color-background-tertiary) 33.333%, var(--color-background-tertiary) 66.667%,
			transparent 66.667%
		),
		linear-gradient(
			-45deg, transparent 33.333%,
			var(--color-background-tertiary) 33.333%, var(--color-background-tertiary) 66.667%,
			transparent 66.667%
		);
	background-size: 20px 40px;
}

.ts_mikron_copied {
	background-color: var(--p-copied-item, var(--color-background-secondary));
	margin-top: -5px;
}

.ts_mikron_copied:hover {
	background-color: var(--p-copied-item-hover, var(--color-background-tertiary));
}

.ts_mikron_copied::before {
	background:
		linear-gradient(45deg, transparent 33.333%, var(--p-copied-item, var(--color-background-secondary)) 33.333%, var(--p-copied-item, var(--color-background-secondary)) 66.667%, transparent 66.667%),
		linear-gradient(-45deg, transparent 33.333%, var(--p-copied-item, var(--color-background-secondary)) 33.333%, var(--p-copied-item, var(--color-background-secondary)) 66.667%, transparent 66.667%);
	background-size: 20px 40px;
}

.ts_mikron_copied:hover::before {
	background:
		linear-gradient(45deg, transparent 33.333%, var(--p-copied-item-hover, var(--color-background-tertiary)) 33.333%, var(--p-copied-item-hover, var(--color-background-tertiary)) 66.667%, transparent 66.667%),
		linear-gradient(-45deg, transparent 33.333%, var(--p-copied-item-hover, var(--color-background-tertiary)) 33.333%, var(--p-copied-item-hover, var(--color-background-tertiary)) 66.667%, transparent 66.667%);
	background-size: 20px 40px;
}

.ts_flex {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	position: relative;
	background: inherit;
	padding: 10px 0 0 0;
	cursor: pointer;
}

.ts_mikron .reviewstatus {
	padding-top: 5px;
	flex: 0;
	flex-basis: 60px;
}

.ts_mikron.compact .reviewstatus {
	min-width: 30px;
	max-width: 30px;
}

.ts_mikron .reviewstatus .reviewsymbol {
		display: block;
		height:10px;
		width:10px;
		border-radius: var(--radius-10);
		margin: 10px auto;
		cursor: pointer;
}

.ts_mikron .reviewstatus .open {
	border: 2px solid var(--color-ui-panel-border);
}

.ts_mikron .reviewstatus .processed {
	height: 18px !important;
	width: 18px !important;
	background: url(/icons/lock.svg) center no-repeat;
	background-size: 16px 16px;
	opacity: .4;
	z-index: 100;
	margin: 0 auto;
}

.ts_mikron .info {
	flex: 6;
	flex-basis: 100px;
}

.ts_mikron .info div {
	width: 100%;
}

.ts_mikron.compact .info {
	flex: 4;
}

.ts_mikron .date {
	padding-left: 10px;
	padding-right: 10px;
	min-width: 100px;
		flex: 2;
}

.ts_mikron.compact .date {
	padding-left: 0;
		padding-right: 10px;
		min-width: 80px;
		text-align: right;
		flex: 1;
}

.ts_mikron .desc {
	flex:6;
	flex-basis: 300px;
	padding-right: 20px;
	color: var(--color-text-secondary);
	display: flex;
}

.ts_mikron.compact .desc {
	width: auto;
	padding: 0 0 0 30px;
	overflow: hidden;
	overflow-wrap: break-word;
}

.ts_mikron_fwd {
	flex: 0;
}

.ts_mikron_fwd.open {
	height: 60px;
	min-width: 40px;
	max-width: 40px;
	background: url(/icons/arrow_right_circle_lightgrey.svg) right no-repeat;
	background-size: 24px 24px;
	margin: 0 auto;
}

.ts_mikron_fwd.accepted {
	height: 60px;
	min-width: 40px;
	max-width: 40px;
	background: url(/icons/arrow_right_circle_lightgreen.svg) right no-repeat;
	background-size: 24px 24px;
	margin: 0 auto;
}

.ts_mikron_fwd.rejected {
	height: 60px;
	min-width: 40px;
	max-width: 40px;
	background: url(/icons/arrow_right_circle_lightred.svg) right no-repeat;
	background-size: 24px 24px;
	margin: 0 auto;
}

.ts-bulk-review-modal {
	width: calc(100vw - 80px);
	max-width: 900px;
	min-width: 0;
}

.ts-bulk-review-body {
	padding-top: 0;
	border-radius-bottom-left: 5px;
	border-radius-bottom-right: 5px;
}

.ts-bulk-review-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
}

.ts-bulk-review-actions-label {
	flex-basis: 100%;
	color: var(--color-text-secondary);
}

.ts-bulk-review-choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.ts-bulk-review-summary {
	font-weight: 600;
}

.ts-bulk-review-list {
	height: 380px;
	overflow-y: auto;
	position: relative;
	background: var(--color-background-secondary);
	color: var(--color-text-primary);
	padding: 15px 10px 10px 10px;
	border-radius: var(--radius-3);
	border: 1px solid var(--color-background-quaternary);
	z-index: 0;
}

.ts-bulk-review-empty {
	padding: 18px 12px;
	color: var(--color-text-secondary);
	text-align: center;
}

.ts-bulk-review-list .ts_mikron_wrapper:first-of-type .ts_mikron_seperatorline {
	display: none;
}

.ts-bulk-review-list .ts_mikron_wrapper {
	margin: 0;
}

.ts-bulk-review-footer {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

.mikron-bookmark-modal-dialog {
	max-width: 980px;
}

.mikron-bookmark-modal-body {
	padding: 20px;
}

.mikron-bookmark-resource-box {
	height: 520px;
}

.mikron-bookmark-editor-list {
	flex: 1;
	min-height: 0;
	overflow: hidden;
	padding: 0;
}

.mikron-bookmark-editor-empty {
	color: var(--color-text-secondary);
	font-size: 13px;
	padding: 10px;
}

.mikron-bookmark-label-container {
	width: 100%;
	height: 100%;
	padding: 8px 6px;
	box-sizing: border-box;
}

.mikron-bookmark-list-pane {
	max-width: 320px;
	position: relative;
}

.mikron-bookmark-list-pane .resource-box-bottom {
	border-top: 1px solid var(--color-background-secondary);
}

.mikron-bookmark-list-pane .js-mikron-bookmark-new.is-disabled {
	opacity: .4;
	pointer-events: none;
}

.mikron-bookmark-form-pane {
	padding: 10px 12px 12px;
	overflow-y: hidden;
}

.mikron-bookmark-form-pane #mikron-bookmark-form {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.mikron-bookmark-form-pane #mikron-bookmark-form.hidden {
	display: none;
}

.mikron-bookmark-form-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 18px;
	color: var(--color-text-secondary);
	text-align: center;
}

.mikron-bookmark-form-pane .mikron-bookmark-form-empty.hidden {
	display: none;
}

.mikron-bookmark-form-pane .organization-input {
	margin-bottom: 6px;
}

.mikron-bookmark-meta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
	padding-bottom: 10px;
}

.mikron-bookmark-meta input[type="text"] {
	flex: 1;
	margin-bottom: 0;
}

.mikron-bookmark-meta-options {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mikron-bookmark-duration-field {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
}

.mikron-bookmark-color-field {
	flex: 0 0 72px;
}

.mikron-bookmark-duration-field .mikron-slider-input {
	flex: 0 0 72px;
	box-sizing: border-box;
	width: 72px;
	margin-bottom: 0;
}

.mikron-bookmark-meta input[type="color"] {
	width: 72px;
	min-width: 72px;
	padding: 1px;
	margin-bottom: 0;
}

.mikron-bookmark-form-pane .mikron_body {
	padding: 0;
}

.mikron-bookmark-form-pane .mikron_selector {
	margin-bottom: 6px;
}

.mikron-bookmark-editor-item {
	cursor: pointer;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	overflow: hidden;
}

.mikron-bookmark-editor-item.selected {
	box-shadow: 0 0 0 2px var(--color-org-global), 1px 1px 1px 0 rgb(0 0 0 / 25%);
}

.mikron-bookmark-editor-name {
	display: block;
}

.mikron-bookmark-editor-item .label-center {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}

.mikron-bookmark-label-container .mikron-bookmark-editor-item .label-name {
	display: block;
	width: 100%;
	min-width: 0;
}

.mikron-bookmark-delete-confirm {
	margin: 20px 0 0 50px !important;
}

.mikron-bookmark-delete-confirm h3 {
	padding: 0 26px 8px 0;
}

.mikron-bookmark-delete-confirm-close {
	color: var(--color-text-secondary);
	font-size: 20px;
	position: absolute;
	top: 8px;
	right: 12px;
	cursor: pointer;
}

.mikron-bookmark-delete-confirm-close:hover {
	color: var(--color-text-primary);
}

.mikron-bookmark-form-pane .mikronDescription {
	margin-bottom: 0;
	min-height: 70px;
}

.mikron-bookmark-editor-actions {
	display: flex;
	justify-content: stretch;
	gap: 10px;
	padding-top: 6px;
	margin-top: auto;
}

@media screen and (max-width: 900px) {
	.mikron-bookmark-resource-box {
		height: auto;
	}

	.mikron-bookmark-editor .resource-box-body-flexcontainer {
		flex-direction: column;
	}

	.mikron-bookmark-list-pane {
		max-width: none;
	}
}

.TimesheetDetailTable {
	margin-bottom: 20px;
	border: 2px solid var(--color-table-border);
	text-align: left;
}

.TimesheetDetailTable-Row {
	height: 40px;
}

.TimesheetDetailTable-Header {
	color: dimgray;
	background-color: var(--color-background-tertiary);
	width: 200px;
	max-width: 300px;
	padding: 5px 10px;
	border: 2px solid var(--color-table-border);
	font-weight: bold;
}

.TimesheetDetailTable-HeaderRight {
	text-align: right;
	width: 100px;
}

.TimesheetDetailTable-Data {
	padding: 5px 10px;
	border: 2px solid var(--color-table-border);
}

.TimesheetDetailTable-Sum {
	text-align: right;
	font-weight: bold;
	text-decoration-line: underline;
	text-decoration-style: double;
}

/*------------------------------
=TICKETS
------------------------------*/

/*------------------------------
=TICKETS: MODAL
------------------------------*/

.modal-ticket-resource-container {
	display: flex;
	flex-wrap: wrap;
	padding: 20px 30px 0 30px;
	border-radius: var(--radius-5) var(--radius-5) 0 0;
	background: var(--color-background-primary);
}

.modal-ticket-resource-container .resource-small-change {
	color:  var(--color-text-secondary);
	display: flex;
	justify-content:space-between;
	align-items: center;
}

.modal-ticket-resource-container .ticket-modal-field-row {
	display: flex;
	gap: 12px;
	align-items: flex-end;
}

.modal-ticket-resource-container .ticket-modal-field {
	flex: 1 1 0;
	min-width: 0;
}

.modal-ticket-resource-container .ticket-modal-field > span {
	display: block;
	margin-bottom: 4px;
	overflow-wrap: anywhere;
}

html:is([data-theme="oblivion"], [data-theme="starwars"], [data-theme="spacepirate"]) .modal-ticket-resource-container .organization-input-small {
	border-width: 0;
}

.modal-ticket-resource-container .organization-input-small:focus-visible {
	outline: 2px solid var(--color-org-global);
	outline-offset: 2px;
}

html:is([data-theme="oblivion"], [data-theme="starwars"], [data-theme="spacepirate"]) .modal-ticket-resource-container :is(.title-text, .modal-description, .organization-input-small) {
	background-color: var(--color-background-secondary);
	padding: 4px 6px;
	box-shadow: inset 0 0 0 1px var(--color-ui-panel-border);
}

html:is([data-theme="oblivion"], [data-theme="starwars"], [data-theme="spacepirate"]) .modal-ticket-resource-container :is(.title-text, .modal-description, .organization-input-small):invalid {
	box-shadow: inset 0 0 0 1px var(--color-error-dark);
}

html:is([data-theme="oblivion"], [data-theme="starwars"], [data-theme="spacepirate"]) .modal-ticket-resource-container :is(.title-text, .modal-description, .organization-input-small):focus {
	box-shadow: inset 0 0 0 2px var(--color-org-global);
}

.modal-ticket-asidebutton {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
}

.modal-ticket-assignresource {
	display: none;
	position: absolute;
	background-color: var(--color-background-primary);
	cursor: default;
	width: 200px;
	max-height: 400px;
	border: 1px solid var(--color-background-secondary);
	border-radius: var(--radius-3);
	padding: 40px 10px 10px 10px;
	z-index: 100;
	font-size: 14px;
	margin-top: 8px;
	margin-left: -3px;
	right: 0;
}

.modal-ticket-assignresource .resourcelist-resource.preliminary-label {
	flex-direction: row;
	padding-right: 12px;
	padding-left: 12px;
}

.modal-ticket-assignresource .preliminary-label .label-center {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.modal-ticket-assignresource .preliminary-label .label-name {
	display: block;
}

.modal-ticket-assignresource .resourcelist-resource.preliminary-member {
	background-color: var(--color-background-secondary);
}

.modal-ticket-assignresource .resourcelist-resource.preliminary-member:hover {
	background-color: var(--color-ui-hover);
}

.modal-ticket-preliminary-resource-container {
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	height:100%;
	margin-top: 10px;
}

.modal-ticket-preliminary-resource {
	display: flex;
	align-items: center;
	border-radius: var(--radius-4);
	margin-right: 5px;
	margin-bottom: 5px;
	cursor: pointer;
	transition: color .1s ease-in-out;
	-webkit-transition: color .1s ease-in-out;
	padding-top: 3px;
}

.modal-ticket-preliminary-resource.preliminary-member {
	border: 2px solid var(--color-background-secondary);
}

.modal-ticket-preliminary-resource.preliminary-assignee {
	border: 2px solid var(--entity-task) !important;
}

.modal-ticket-preliminary-resource.preliminary-label {
	color: #f9f9f9;
	font-weight: bold;
}

.modal-ticket-preliminary-resource > .invalid {
	border: 2px solid red !important;
}

.modal-ticket-preliminary-resource > .name {
	padding: 0px 10px 4px 10px;
}

.modal-ticket-preliminary-resource > .remove {
	cursor: pointer;
	padding: 0 20px 0 10px;
	background: url(/icons/exit_circle_grey.svg) center no-repeat;
	background-size: 12px 12px;
	height: 100%;
	margin-bottom: 2px;
}

.modal-ticket-preliminary-resource > .remove:hover {
	background: url(/icons/exit_circle_red.svg) center no-repeat;
	background-size: 12px 12px;
}

.modal-ticket-attachment-remove:hover {
	color: var(--color-error-dark) !important;
}

.modal-ticket-resource-information {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	font-size: 8pt;
	color: var(--color-text-secondary);
	line-height: 14px;
	padding: 0 30px 20px 30px;
	background-color: var(--color-background-primary);
}

.modal-ticket-resource-information div {
	width: auto;
}

.modal-ticket-comments {
	background-color: var(--color-background-primary);
	border-radius: 0 0 var(--radius-5) var(--radius-5);
}

.modal-ticket-comments hr {
	border-top: 1px solid var(--color-background-secondary);
	margin: 0 10px 10px 10px; }

.modal-ticket-comments-list {
	list-style: none;
	flex:1;
	margin:0;
	padding: 0;
}

.modal-ticket-comment-container {
	padding: 0 2rem 1rem 2rem;
	max-width: 90%;
}

.modal-ticket-comment-actions {
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.modal-ticket-comment-container:hover {
	background-color: var(--color-background-secondary);
}

.modal-ticket-comment-container:hover .modal-ticket-comment-actions {
	display: flex;
	min-height: 20px;
}

.modal-ticket-comment-content {
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	min-height: 20px;
	position: relative;
}

.modal-ticket-comment-message {
	background-color: var(--color-background-tertiary);
	padding: 5px;
	margin: 0 20px 0 0;
	flex: 8;
	border: none;
	box-shadow: none;
	resize: none;
	outline: none;
}

.modal-ticket-comment-message .markupresult {
	min-height: 40px;
	height: auto;
	padding: 5px;
}

.modal-ticket-comment-message p {
	margin:  0;
}

.modal-ticket-comments form {
	display: flex;
	align-items: flex-end;
	padding: 2rem;
	max-width: 90%;
}

.modal-ticket-comments form textarea {
	width: 100%;
	border-radius: var(--radius-3);
	border: 1px solid var(--color-background-secondary);
}

.modal-ticket-comments form textarea:focus {
	border: 2px solid var(--color-org-global);
}

.modal-ticket-comments-send {
	flex: 0;
	height: 54px;
	min-width: 40px;
	margin-left: 20px;
	margin-bottom: 19px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal-ticket-comment-reaction {
	display: flex;
	padding: 5px;
	font-size: 18px;
	border: 1px solid transparent;
	max-width: 34px;
	max-height: 34px;
}

.modal-ticket-comment-reaction-count {
	font-size: 14px;
	color: var(--color-text-secondary);
}

.modal-ticket-comment-reaction:hover {
	background-color: var(--color-success-bright);
	border: 1px solid var(--color-success-dark);
	border-radius: var(--radius-3);
	cursor: pointer;
}

.modal-ticket-comment-reaction-active {
	background-color: var(--color-background-secondary);
	border: 1px solid var(--color-border-highlight);
	border-radius: var(--radius-3);
	cursor: pointer;
}

.modal-ticket-comment-reactions-container {
	display: flex;
}

.modal-ticket-comments .modal-ticket-comment-text {
	min-height: 54px;
	height: auto;
	border: 1px solid var(--color-background-secondary);
	border-radius: var(--radius-3);
}

/*------------------------------
=TICKETS: LIST
------------------------------*/

.tickets-project-title {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	padding-bottom: 13px;
}

.ticket-add:hover {
	background: url(/icons/plus_circle_black.svg) center no-repeat;
	background-size: 18px 18px;
}

.ticket {
	flex-wrap: wrap;
	cursor: pointer;
	font-size: 14px;
	background-color: var(--color-background-item);
	color: var(--color-text-primary);
	padding: 5px 10px 0 0;
	margin-bottom: 6px;
}

.ticket:hover {
	background-color: var(--color-background-tertiary);
}

.ticket-low-priority {
	background-color: var(--color-background-item-low-priority);
}

.ticket-low-priority:hover {
	background-color: var(--color-background-item-low-priority-hover);
}

.ticket-high-priority {
	background-color: var(--color-background-item-high-priority);
}

.ticket-high-priority:hover {
	background-color: var(--color-background-item-high-priority-hover);
}

.ticket-title {
	display: flex;
	align-items: center;
	flex: 4;
	min-width: 250px;
	margin-bottom: 5px;
	margin-right: 20px;
	margin-left: 10px;
}

.ticket-pin-toggle {
	border: 0;
	background: transparent;
	color: var(--color-text-secondary);
	font-size: 16px;
	line-height: 1;
	padding: 0;
	margin-right: 8px;
	width: 16px;
	height: 16px;
	cursor: pointer;
	flex: 0 0 auto;
	opacity: 0;
	transition: opacity 120ms ease-in-out;
}

.ticket:hover .ticket-pin-toggle,
.ticket:focus-within .ticket-pin-toggle,
.ticket-pin-toggle.working {
	opacity: 1;
}

.ticket-pin-toggle.active {
	color: var(--color-warning-dark);
	font-weight: bold;
	opacity: 1;
}

.ticket-pin-toggle.working {
	opacity: 0.45;
	pointer-events: none;
}

.ticket-title .ticket-project-label {
	flex: 1;
	margin-right: 20px;
	min-width: 90px;
}

.ticket-title .ticket-name {
	flex: 4;
}

.ticket-center-block {
	display: flex;
	flex: auto;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	max-width: 700px;
}

.ticket-center-one {
	display: flex;
	flex: 1;
	align-content: center;
	justify-content: center;
	align-items: center;
	margin-left: 10px;
	margin-bottom: 5px;
}

.ticket-center-two {
	display: flex;
	flex: 1;
	align-content: center;
	align-items: center;
	justify-content: space-evenly;
	align-items: center;
	min-width: 200px;
	margin-left: 10px;
	margin-bottom: 5px;
}

.ticket-difficulty {
	flex: 1;
	min-width: 25px;
	max-width: 45px;
}

.ticket-difficulty .ticket-difficulty-bar {
	width: 4px;
	height: 14px;
	float: left;
	border-radius: var(--radius-2);
	margin-right: 2px;
}

.ticket-progress {
	flex: 4;
	min-width: 100px;
	max-width: 200px;
}

.ticket-due {
	flex: 1;
	min-width: 90px;
	text-align: left;
}

.ticket-overdue {
	color: var(--color-error-dark);
	font-weight: bold;
}

.ticket-labels {
	display: flex;
	flex:  2;
	justify-content: flex-end;
}

.ticket-label {
	width: 15px;
	height: 15px;
	border-radius: var(--radius-8);
	margin-left: 5px;
}

.ticket-members-container {
	flex: 1;
	min-width: 80px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	margin-left: 10px;
}

.ticket-members {
	width: 30px;
	height: 30px;
	border: 3px solid var(--color-ui-panel-border);
	border-radius: 50%;
	box-sizing: border-box;
	overflow: hidden;
	margin: 0 0 6px 6px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
}

.ticket-members.subscription {
	border-color: var(--color-success-dark);
}

.ticket-members.assignee {
	border-color: var(--entity-task);
}

.ticket-member-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	line-height: 1;
	color: var(--color-text-secondary);
	text-transform: uppercase;
}

.task {
	font-size: 14px;
}

.sort-reverse-box{
	flex:0;
	min-width: 88px;
	margin-left: 10px;
	font-size: 16px;
	/*line-height: 20px;*/
}

.resource_confirm_delete {
	display: none;
	position: absolute;
	padding:.9em;
	margin-top: -100px;
	margin-left: -200px;
	width: 300px;
	background: var(--color-background-primary);
	border: 1px solid var(--color-background-secondary);
	/*border-radius: var(--radius-3);*/
	font-size: 16px;
	z-index: 100;
}

.resource_confirm_delete_open {
	display: block;
}

#resource_delete_btnClose{
	color: lightgray;
	padding-top: 15px;
	font-size: 20px;
	text-decoration: none;
	position: absolute;
	right: 15px;
	top: -8px;
	cursor:pointer;
}

#resource_delete_btnClose:hover{
	color: var(--color-text-primary);
}

/*------------------------------
=BILLS
------------------------------*/

.item.bill {
	display: flex;
}

.item.bill .item-content {
	flex: 1;
	display: flex;
	align-items: center;
	line-height: 32px;
	font-size: 14px;
	min-width: 0;
	color: var(--color-text-primary);
}

.item.bill .menu-button {
	min-width: 40px;
	line-height: 100%;
	height: auto;
	flex: 0;
}

.bill .triangle {
	flex: 0;
	min-width: 40px;
	font-size: 18px;
	text-align: center;
}

.bill .triangle.incoming {
	color: var(--color-error-dark);
}

.bill .triangle.outgoing {
	color: var(--color-success-dark);
}

.bill :is(div, span) {
	min-width: 0;
}

.bill .properties {
	flex: 1;
	display: flex;
	align-items: center;
}

.bill .properties .billnumber {
	flex: 1;
	min-width: 60px;
}

.bill .properties .center {
	display: flex;
	flex-wrap: wrap;
	flex: 100;
	justify-content: space-between;
}

.bill .properties .center > :is(div, span) {
	display: flex;
	flex: 1;
	width: 100%;
	min-width: 350px;
}

.bill .properties .center .lefthandside {
	flex: 3;
	text-align: right;
}

.bill .properties .center .centercenter {
	flex: 1;
	text-align: center;
}

.bill .properties .center .righthandside {
	flex: 3;
	text-align: left;
}

.bill .properties .billamount {
	flex: 1;
	min-width: 85px;
	text-align: right;
	font-weight: bold;
}

/*------------------------------
=BILLS: CREATION / GENERATOR PICKER
------------------------------*/

.biggreything {
	height: 370px;
	background-color: var(--color-background-secondary);
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
}

.biggreything .label {
	padding-top: 10px;
	font-weight: bold;
}

.biggreything .clientselector {
	min-width: 350px;
	display: none;
}

.closebillgenerator {
	position: absolute;
	width: 30px;
	right: 10px;
	font-size: 30px;
	cursor: pointer;
	color: var(--color-text-secondary);
}

.closebillgenerator:hover {
	color: var(--color-text-primary);
}

.biggreything-icon-container {
	width: 120px;
	height: 120px;
	background: var(--color-background-secondary);
	overflow: hidden;
}

.biggreything-flexcontainer {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 100%;
	cursor: pointer;
}

.biggreything-flexcontainer > .label {
	color: var(--color-text-primary);
	box-shadow: none;
}

.biggreything-flexcontainer:hover {
	background: var(--color-background-tertiary);
}

.biggreything-user-icon {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	top: 12px;
	background-color: var(--color-text-secondary);
	-webkit-mask-image: url(/icons/user.svg);
	mask-image: url(/icons/user.svg);
}

.biggreything-office-icon {
	display: block;
	width: 90%;
	height: 90%;
	position: relative;
	top: 12px;
	background-color: var(--color-text-secondary);
	-webkit-mask-image: url(/icons/office.svg);
	mask-image: url(/icons/office.svg);
}

/*------------------------------
=BILLS: GENERATOR TABLE
------------------------------*/

.billgen-project,
.billgen-item {
	position: relative;
	padding: 10px;
}

.billgen-project:hover,
.billgen-item:hover {
	background-color: var(--color-background-tertiary);
}

.billgen-project-delete,
.billgen-item-delete {
	display: none;
	position: absolute;
	font-size: 30px;
	right: 10px;
	cursor: pointer;
	color: var(--color-text-secondary);
}

.billgen-project:hover .billgen-project-delete,
.billgen-item:hover .billgen-item-delete {
	display: block;
}

.billgen-project-delete:hover {
	color: var(--color-text-primary);
}

.billgen-table-header {
	padding: 10px;
}

.billgen-table-row {
	display: flex;
}

.billgen-table-token {
	flex: 1;
}

.billgen-table-description {
	flex: 4;
}

.billgen-table-qty,
.billgen-table-price {
	flex: 1;
	max-width: 130px;
	text-align: right;
}

.billgen-table-project {
	flex: 3;
	max-width: 400px;
	text-align: right;
}

.billgen-table-taxrate {
	flex: 1;
	max-width: 100px;
	text-align: right;
}

.billgen-item-taxrate,
.billgen-item-project {
	line-height: 22px;
	padding: 0 25px 0 0;
	width: 80%;
}

.billgen-table-spacer {
	flex: .1;
	min-width: 30px;
}

.billgen-table-row div input {
	width: 80%;
	padding-bottom: 0;
	text-align: right;
	margin-bottom: 0;
}

.billgen-table-row div textarea {
	margin-bottom: 0;
}

.billgen-table-row div input:disabled {
	border: none;
	background-color: transparent;
}

/*------------------------------
=BILLS: GENERATOR LAYOUT
------------------------------*/

.billgen .billgen-container {
	padding: 20px;
	position: relative;
	width: 100%;
}

.billgen .billgen-title {
	padding: 10px 0 0 0;
	margin: 0;
}

.billgen .billgen-meta {
	display: flex;
	flex-wrap: wrap;
	flex: 1;
	margin-top: 30px;
}

.billgen .billgen-meta-left {
	flex: 1;
	min-width: 300px;
}

.billgen .billgen-meta-labels {
	max-width: 130px;
	float: left;
}

.billgen .billgen-meta-label {
	margin-bottom: 12px;
	line-height: 24px;
}

.billgen .billgen-meta-values {
	max-width: 150px;
	float: left;
}

.billgen .billgen-mikrons {
	display: flex;
	flex: 3;
	min-width: 350px;
	flex-direction: column;
}

.billgen .billgen-mikronlist {
	flex: 1;
	overflow: scroll;
	overflow-x: hidden;
	max-height: 300px;
	border: 2px solid var(--color-ui-panel-border);
}

.billgen .billgen-mikronstats {
	text-align: right;
	font-size: 10px;
}

.billgen .billgen-content {
	flex: 1;
	min-width: 0;
}

.billgen .billgen-heading {
	padding: 20px 0 20px 10px;
	margin: 0;
}

.billgen .billgen-projectname {
	font-weight: bold;
	padding: 10px 0;
}

.billgen .invoice-hours {
	width: 80px;
	text-align: right;
	margin-bottom: 5px;
}

.billgen .billgen-item-token {
	padding-right: 5px;
	text-align: left;
}

.billgen .billgen-subtotal {
	display: flex;
	padding: 10px 0;
}

.billgen .billgen-subtotal-items {
	padding: 10px;
	margin: 0;
}

.billgen .subtotal-spacer {
	flex: 5;
	min-width: 0;
}

.billgen .subtotal-label {
	flex: 1;
	border-top: 1px solid var(--color-ui-panel-border);
	color: var(--color-text-secondary);
	text-align: left;
}

.billgen .subtotal-value {
	flex: 2;
	border-top: 1px solid var(--color-ui-panel-border);
	color: var(--color-text-secondary);
	text-align: right;
}

.billgen .billgen-additem {
	padding-top: 10px;
	font-size: 14px;
	width: auto;
}

.billgen .summary-row {
	display: flex;
	padding: 0 10px;
}

.billgen .summary-row.top {
	border-top: 1px solid var(--color-ui-panel-border);
	padding-top: 10px;
}

.billgen .summary-label {
	flex: 2;
	color: var(--color-text-secondary);
	min-width: 0;
}

.billgen .summary-spacer {
	flex: 3;
	min-width: 0;
}

.billgen .summary-value {
	flex: 2;
	color: var(--color-text-secondary);
	text-align: right;
}

.billgen .billgen-padded {
	padding: 0 10px;
	width: 100%;
}

.billgen .checks .check {
	display: flex;
	align-items: center;
}

.billgen .checks input[type="checkbox"] {
	vertical-align: baseline;
	margin-right: 5px;
}

.billgen .actions {
	display: flex;
	position: relative;
}

.billgen .actions .preview {
	flex: 1;
	text-align: right;
	padding-right: 20px;
}

.billgen .actions .save {
	flex: 1;
	text-align: left;
	padding-left: 20px;
}

/*------------------------------
=BILLS: EXPENSES
------------------------------*/

.expense-modal-dialog,
.taxrate-modal-dialog {
	width: min(620px, calc(100vw - 32px));
	max-width: 620px;
	margin: 32px 0;
}

.expense-modal-dialog.expense-modal-dialog-with-process {
	width: min(900px, calc(100vw - 32px));
	max-width: 900px;
}

.expense-modal-panel-with-process {
	display: flex;
	align-items: stretch;
	border-radius: 0 0 var(--radius-5) var(--radius-5);
	background: var(--color-background-primary);
}

.expense-modal-panel-with-process > .modalBody {
	flex: 1 1 auto;
	min-width: 0;
	border-radius: 0 0 0 var(--radius-5);
}

.expense-process-panel {
	box-sizing: border-box;
	flex: 0 0 260px;
	min-width: 0;
	padding: 24px;
	border: 5px solid var(--color-background-primary);
	border-left: 1px solid var(--color-ui-panel-border);
	border-radius: 0 0 var(--radius-5) 0;
	background: var(--color-background-secondary);
}

.expense-process-panel h3,
.expense-process-panel h4,
.expense-process-panel p,
.expense-process-summary {
	margin: 0;
}

.expense-process-panel h3 {
	font-size: 18px;
	line-height: 22px;
}

.expense-process-summary {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 18px;
}

.expense-process-summary dt {
	color: var(--color-text-secondary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.expense-process-summary dd {
	margin: 3px 0 0;
	color: var(--color-text-primary);
	font-size: 14px;
	font-weight: 600;
}

.expense-process-invoices {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--color-ui-panel-border);
}

.expense-process-invoices h4 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
}

.expense-process-invoices h4 span {
	min-width: 22px;
	padding: 1px 6px;
	border-radius: var(--radius-pill);
	background: var(--color-background-primary);
	font-size: 11px;
	text-align: center;
}

.expense-process-invoices > p {
	margin-top: 10px;
	color: var(--color-text-secondary);
	font-size: 12px;
	line-height: 17px;
}

.expense-process-bill-list {
	display: flex;
	flex-direction: column;
	gap: 7px;
	max-height: 510px;
	margin-top: 10px;
	overflow-y: auto;
}

.expense-process-bill {
	padding: 8px 10px;
	border: 1px solid var(--color-ui-panel-border);
	border-radius: var(--radius-5);
	background: var(--color-background-primary);
	cursor: pointer;
}

.expense-process-bill:hover {
	border-color: var(--color-org-global);
}

.expense-process-bill-number {
	color: var(--color-text-primary);
	font-size: 13px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.expense-process-bill-timing {
	margin-top: 2px;
	color: var(--color-text-secondary);
	font-size: 11px;
}

.expense-modal-tabs-close,
.taxrate-modal-tabs-close {
	margin-top: 48px;
}

.expense-modal .tab-links,
.taxrate-modal .tab-links {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0 24px;
}

.expense-modal .tab-links li,
.taxrate-modal .tab-links li {
	float: none;
	margin: 0;
}

.expense-modal .tab-links a,
.taxrate-modal .tab-links a {
	width: auto;
	min-width: 120px;
	text-align: center;
}

.taxrate-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.taxrate-form-help {
	margin: 0;
	color: var(--color-text-secondary);
	font-size: 16px;
	line-height: 22px;
}

.taxrate-form-grid {
	display: flex;
	gap: 16px;
}

.taxrate-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
	color: var(--color-text-secondary);
}

.taxrate-field-wide {
	flex: 1 1 auto;
}

.taxrate-field-value {
	flex: 0 0 130px;
}

.taxrate-field .organization-input {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
}

.taxrate-value-control,
.taxrate-checkbox {
	display: flex;
	align-items: center;
	gap: 9px;
}

.taxrate-value-control > span {
	flex: 0 0 auto;
	color: var(--color-text-primary);
	font-size: 18px;
}

.taxrate-checkbox {
	align-items: flex-start;
	color: var(--color-text-secondary);
}

.taxrate-checkbox input {
	flex: 0 0 auto;
	margin: 3px 0 0;
}

.taxrate-form .modalSubmit {
	width: min(320px, 100%);
	margin-top: 4px;
}

.taxrate-disclaimer-link {
	align-self: flex-start;
	color: var(--color-text-secondary);
	font-size: 14px;
	text-decoration: underline;
}

.profit-tax-disclaimer-dialog {
	flex: 0 1 920px;
	width: 920px;
	max-width: calc(100vw - 48px);
	margin: 32px 0;
}

.profit-tax-disclaimer-modal .modalBody {
	gap: 24px;
}

.profit-tax-disclaimer-modal h3,
.profit-tax-disclaimer-modal p,
.profit-tax-disclaimer-modal ul,
.profit-tax-disclaimer-modal ol {
	margin-top: 0;
}

.profit-tax-disclaimer-modal h3 {
	margin-bottom: 10px;
	font-size: 18px;
}

.profit-tax-disclaimer-modal ul,
.profit-tax-disclaimer-modal ol {
	margin-bottom: 0;
	padding-left: 22px;
}

.profit-tax-disclaimer-modal li + li {
	margin-top: 6px;
}

.profit-tax-disclaimer-lead {
	margin-bottom: 0;
	font-weight: bold;
}

.profit-tax-disclaimer-columns,
.profit-tax-example-columns {
	display: flex;
	gap: 28px;
}

.profit-tax-disclaimer-columns > section,
.profit-tax-example-columns > section {
	flex: 1 1 0;
	min-width: 0;
}

.profit-tax-arithmetic,
.profit-tax-example {
	padding: 18px;
	border: 1px solid var(--color-ui-panel-border);
	border-radius: var(--radius-5);
	background: var(--color-background-secondary);
}

.profit-tax-arithmetic > p {
	margin-bottom: 12px;
}

.profit-tax-arithmetic code,
.profit-tax-example-math code {
	font-family: inherit;
	font-size: inherit;
}

.profit-tax-example ul.profit-tax-example-math {
	list-style: none;
	padding-left: 0;
}

.profit-tax-example-total {
	margin: 14px 0 8px;
	font-weight: bold;
}

.profit-tax-example-note {
	margin-bottom: 0;
	color: var(--color-text-secondary);
	font-size: 14px;
	line-height: 20px;
}

.taxrate-profit-settings {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 4px;
	padding: 14px 20px 2px;
	border-top: 1px solid var(--color-ui-panel-border);
}

.taxrate-profit-settings .taxrate-field,
.taxrate-profit-settings .taxrate-checkbox {
	font-size: inherit;
}

.expense-form {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.expense-form-section {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.expense-form-section + .expense-form-section {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--color-ui-panel-border);
}

.expense-form-section-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.expense-form-section-heading h4 {
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 22px;
}

.expense-form-section-heading .tooltip {
	flex: 0 0 auto;
}

.expense-form-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
}

.expense-field {
	display: flex;
	flex: 1 1 220px;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
	color: var(--color-text-secondary);
}

.expense-field-compact {
	flex: 1 1 150px;
}

.expense-field-wide {
	flex: 2 1 300px;
}

.expense-field-hint {
	font-size: 12px;
	line-height: 16px;
}

.expense-form-section > .expense-field {
	flex: 0 0 auto;
}

.expense-field > .organization-input,
.expense-form-section > .organization-input,
.expense-amount-field .organization-input {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
}

.expense-form select.organization-input {
	height: 34px;
}

.expense-amount-field {
	display: flex;
	align-items: center;
	gap: 10px;
}

.expense-currency {
	flex: 0 0 auto;
	min-width: 20px;
	color: var(--color-text-primary);
	font-size: 18px;
	text-align: center;
}

.expense-checkboxes {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.expense-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	color: var(--color-text-secondary);
}

.expense-checkbox input {
	flex: 0 0 auto;
	margin: 3px 0 0;
}

.expense-field-checkbox {
	justify-content: flex-end;
	padding-bottom: 5px;
}

.expense-form .modalSubmit {
	width: min(320px, 100%);
	margin-top: 4px;
}

@media all and (max-width: 700px) {
	.expense-modal-dialog,
	.taxrate-modal-dialog {
		width: calc(100vw - 20px);
		margin: 10px 0;
	}

	.expense-modal .tab-links,
	.taxrate-modal .tab-links {
		padding: 0 12px;
	}

	.expense-modal .tab-links a,
	.taxrate-modal .tab-links a {
		min-width: 0;
	}

	.expense-modal-panel-with-process {
		flex-direction: column;
	}

	.expense-modal-panel-with-process > .modalBody {
		border-radius: 0;
	}

	.expense-process-panel {
		flex-basis: auto;
		border-top: 1px solid var(--color-ui-panel-border);
		border-left: 5px solid var(--color-background-primary);
		border-radius: 0 0 var(--radius-5) var(--radius-5);
	}

	.profit-tax-disclaimer-columns,
	.profit-tax-example-columns {
		flex-direction: column;
	}

	.expense-field,
	.expense-field-compact,
	.expense-field-wide {
		flex-basis: 100%;
	}

	.taxrate-form-grid {
		flex-direction: column;
	}

	.taxrate-field-value {
		flex-basis: auto;
	}
}

#credit-modal span {
	flex: 0;
	min-width: 40px;
	margin-left: 20px;
}

.helpblock {
	display: flex;
	align-items: center;
	min-height: 40px;
}

.helpblock > div {
	flex: 1;
}

.helpblock > div > label {
	display: flex;
	align-items: center;
	width: 90%;
}

/*------------------------------
=MEMBER MODALS (CREDENTIALS / LIFECYCLE)
------------------------------*/

.modalContainer .member-edit-section {
	margin-top: 16px;
	padding: 16px;
	border: 1px solid var(--color-ui-panel-border);
	border-radius: var(--radius-4);
	background: var(--color-ui-panel);
}

.modalContainer .member-edit-section-title {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	color: var(--color-text-primary);
}

.modalContainer .member-credentials-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 16px;
	line-height: 22px;
	color: var(--color-text-secondary);
}

.modalContainer .member-edit-section-help {
	margin-bottom: 12px;
	font-size: 16px;
	line-height: 22px;
	color: var(--color-text-secondary);
}

.modalContainer .member-inline-info {
	margin: 0 0 10px;
	padding: 10px;
	border: 1px solid var(--color-background-quaternary);
	border-radius: var(--radius-4);
	background: var(--color-background-secondary);
	color: var(--color-text-secondary);
	line-height: 22px;
}

.modalContainer .member-managed-credentials-section {
	border-color: var(--color-background-quaternary);
	background: var(--color-background-secondary);
}

.modalContainer .member-credentials-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
}

.modalContainer .member-credentials-field {
	flex: 1 1 calc(50% - 6px);
	min-width: 0;
}

.modalContainer .member-credentials-field .organization-input {
	width: 100%;
}

.modalContainer .member-credentials-field-full {
	flex-basis: 100%;
}

@media screen and (max-width: 700px) {
	.modalContainer .member-credentials-field {
		flex-basis: 100%;
	}
}

.modalContainer .member-lifecycle-dialog {
	max-width: 760px;
}

.modalContainer .member-lifecycle-subtitle,
.modalContainer .member-modal-subtitle {
	margin-top: -20px;
	color: var(--color-text-secondary);
	font-size: 16px;
	line-height: 22px;
	text-align: center;
}

.modalContainer .member-lifecycle-intro {
	margin: 0 0 16px;
	color: var(--color-text-secondary);
	line-height: 22px;
}

.modalContainer .member-lifecycle-status-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-start;
}

.modalContainer .member-lifecycle-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border: 1px solid var(--color-ui-panel-border);
	border-radius: var(--radius-pill, 999px);
	background: var(--color-background-secondary);
	color: var(--color-text-primary);
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
}

.modalContainer .member-lifecycle-badge.is-managed {
	border-color: var(--color-org-global);
	background: var(--color-org-global);
	color: var(--color-background-primary);
}

.modalContainer .member-lifecycle-badge.is-warning {
	border-color: var(--color-warning-dark);
	background: var(--color-warning-bright);
	color: var(--color-text-primary);
}

.modalContainer .member-lifecycle-status-copy {
	flex: 1 1 360px;
	color: var(--color-text-secondary);
	line-height: 22px;
}

.modalContainer .member-lifecycle-inline-warning {
	margin-top: 12px;
}

.modalContainer .member-lifecycle-foldout {
	border-top: 1px solid var(--color-ui-panel-border);
	padding-top: 10px;
}

.modalContainer .member-lifecycle-foldout summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--color-text-primary);
	list-style: none;
}

.modalContainer .member-lifecycle-foldout summary::-webkit-details-marker {
	display: none;
}

.modalContainer .member-lifecycle-foldout summary::before {
	content: "+";
	display: inline-block;
	width: 14px;
	margin-right: 6px;
	color: var(--color-text-secondary);
}

.modalContainer .member-lifecycle-foldout[open] summary::before {
	content: "-";
}

.modalContainer .member-lifecycle-compare-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 12px;
}

.modalContainer .member-lifecycle-compare-card {
	flex: 1 1 calc(50% - 7px);
	min-width: 0;
	padding: 16px;
	border: 1px solid var(--color-ui-panel-border);
	border-radius: var(--radius-4, 4px);
	background: var(--color-background-secondary);
}

.modalContainer .member-lifecycle-compare-card h3 {
	margin: 0 0 10px;
	padding: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 22px;
	color: var(--color-text-primary);
}

.modalContainer .member-lifecycle-compare-copy,
.modalContainer .member-lifecycle-note {
	margin: 0 0 10px;
	color: var(--color-text-secondary);
	line-height: 22px;
}

.modalContainer .member-lifecycle-blocked-label {
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 700;
	line-height: 22px;
	color: var(--color-text-primary);
	text-transform: uppercase;
	letter-spacing: .03em;
}

.modalContainer .member-lifecycle-compare-list {
	margin: 0;
	padding-left: 18px;
	color: var(--color-text-secondary);
	line-height: 22px;
}

.modalContainer .member-lifecycle-compare-list li + li {
	margin-top: 4px;
}

.modalContainer .member-lifecycle-confirm-row {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-bottom: 12px;
	color: var(--color-text-secondary);
	line-height: 22px;
}

.modalContainer .member-lifecycle-confirm-row label {
	flex: 1;
	cursor: pointer;
}

@media screen and (max-width: 700px) {
	.modalContainer .member-lifecycle-compare-card {
		flex-basis: 100%;
	}
}

/*------------------------------
=BILLS: ADD-ITEM MODAL
------------------------------*/

.billgen-modal #addresource {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.bill-item-modal-dialog {
	width: min(720px, calc(100vw - 48px));
	max-width: 720px;
}

.billgen-modal .wizard-panel {
	width: 100%;
	min-height: 360px;
}

.billgen-modal .bill-item-form-panel {
	min-height: 0;
}

.billgen-modal .bill-item-progress li {
	font-size: 14px;
}

.bill-item-choice-grid > * {
	flex-basis: 100%;
}

.wizard-choice.is-disabled {
	opacity: .55;
	cursor: not-allowed;
}

.bill-item-expense-list .resource-box-item-container {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
}

.bill-item-form,
.billgen-modalReduction-targets {
	display: flex;
	flex-direction: column;
}

.bill-item-form {
	gap: 12px;
	padding: 20px;
	border: 1px solid var(--color-ui-panel-border);
	border-radius: var(--radius-5);
	background: var(--color-background-secondary);
}

.bill-item-form-field {
	display: flex;
	gap: 18px;
	align-items: center;
	color: var(--color-text-primary);
}

.bill-item-form-field > span:first-child {
	flex: .75 1 0;
	min-width: 140px;
}

.bill-item-form-field > :last-child {
	flex: 1.5 1 0;
	min-width: 0;
}

.bill-item-form-field-multiline {
	align-items: start;
}

.bill-item-form-field-multiline > span:first-child {
	padding-top: 7px;
}

.bill-item-form-control {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.bill-item-form-control .organization-input,
.bill-item-form-control .organization-input-small {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
}

.bill-item-form-control textarea {
	min-height: 72px;
	resize: vertical;
}

.bill-item-number-control > input {
	text-align: right;
}

.bill-item-number-control > span {
	flex: 0 0 30px;
}

.bill-item-output {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	min-height: 34px;
	padding: 7px 10px;
	border: 1px solid var(--color-ui-panel-border);
	border-radius: var(--radius-5);
	background: var(--color-background-primary);
	font-variant-numeric: tabular-nums;
}

.bill-item-form-help {
	margin: 0 0 14px;
	color: var(--color-text-secondary);
}

.bill-reduction-target-fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.bill-reduction-target-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
}

.bill-reduction-target-header legend {
	font-weight: 600;
}

.bill-reduction-target-header label {
	color: var(--color-text-secondary);
	cursor: pointer;
}

.billgen-modalReduction-targets {
	max-height: 220px;
	overflow-y: auto;
	border: 1px solid var(--color-ui-panel-border);
	border-radius: var(--radius-5);
	background: var(--color-background-primary);
}

.bill-reduction-target,
.bill-reduction-project-header {
	display: flex;
	gap: 10px;
	align-items: center;
}

.bill-reduction-target {
	padding: 9px 10px;
	cursor: pointer;
}

.bill-reduction-target-group {
	min-width: 0;
}

.bill-reduction-target-group + .bill-reduction-target-group,
.bill-reduction-target-group + .bill-reduction-target,
.bill-reduction-target + .bill-reduction-target-group {
	border-top: 1px solid var(--color-ui-panel-border);
}

.bill-reduction-project-header {
	padding: 10px;
	background: var(--color-background-secondary);
	cursor: pointer;
}

.bill-reduction-project-header strong {
	flex: 1 1 auto;
	min-width: 0;
}

.bill-reduction-project-targets {
	border-top: 1px solid var(--color-ui-panel-border);
}

.bill-reduction-project-targets .bill-reduction-target {
	padding-left: 32px;
}

.bill-reduction-target + .bill-reduction-target {
	border-top: 1px solid var(--color-ui-panel-border);
}

.bill-reduction-target-copy {
	flex: 1 1 auto;
	min-width: 0;
}

.bill-reduction-target-copy strong,
.bill-reduction-target-copy small {
	display: block;
}

.bill-reduction-target-copy small,
.bill-reduction-target-amount,
.bill-reduction-target-empty {
	color: var(--color-text-secondary);
}

.bill-reduction-target-amount {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bill-reduction-target-empty {
	padding: 18px 10px;
	text-align: center;
}

@media screen and (max-width: 620px) {
	.bill-item-modal-dialog {
		width: calc(100vw - 24px);
	}

	.billgen-modal .modalBody {
		padding-right: 20px;
		padding-left: 20px;
	}

	.bill-item-form-field {
		flex-direction: column;
		gap: 6px;
	}

	.bill-item-form-field > span:first-child,
	.bill-item-form-field > :last-child {
		flex-basis: auto;
	}

	.bill-item-form-field > span:first-child {
		min-width: 0;
	}

	.bill-item-form-field-multiline > span:first-child {
		padding-top: 0;
	}
}

/*------------------------------
=BILLS: TEMPLATE HELPERS
------------------------------*/

.new_bill_ajax {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 40px;
}

/*------------------------------
=CHARTS (D3)
------------------------------*/
.axis path,
.axis line {
	fill: none;
	stroke: var(--color-text-primary);
	shape-rendering: crispEdges;
}

.axis text {
	fill: var(--color-text-primary);
}

.axislabel {
	fill: var(--color-text-primary);
	font-size: 10px;
}

.d3-pie-tip,.d3-chart-tip {
	line-height: 1;
	font-weight: bold;
	padding: 12px;
	background: var(--color-tooltip-bg);
	color: var(--color-tooltip-text);
	border-radius: var(--radius-2);
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
	box-sizing: border-box;
	display: inline;
	font-size: 10px;
	width: 100%;
	line-height: 1;
	color: var(--color-tooltip-bg);
	content: "\25BC";
	position: absolute;
	text-align: center;
}

.d3-tip.n:after {
	margin: -3px 0 0 0;
	top: 100%;
	left: 0;
}

.d3nodata {
	font-size: 18px;
	fill: var(--color-text-secondary);
}
.legend-wrapper {
	position: absolute;
	top: 40px;
	left: 106px;
	width: auto;
	height: auto;
	background-color: color-mix(in srgb, var(--color-tooltip-bg) 80%, transparent);
	color: var(--color-tooltip-text);
	padding: 10px;
	border-radius: var(--radius-5);
}

/*------------------------------
=BILL TEMPLATE EDITOR MODAL
------------------------------*/
.modalContainer .template-editor-dialog {
	width: 100%;
	max-width: min(1160px, calc(100vw - 32px));
	min-width: 0;
}

.modalContainer .template-editor-body {
	padding: 14px 18px 18px;
	min-height: 700px;
	max-height: 900px;
	height: calc(100vh - 200px);
	overflow-y: auto;
	overflow-x: hidden;
}

.modalContainer .template-editor {
	display: flex;
	box-sizing: border-box;
	gap: 16px;
	padding: 0 18px 12px;
	align-items: stretch;
	min-height: 100%;
	min-width: 0;
}

.modalContainer .template-editor-workspace {
	display: flex;
	flex: 1 1 0;
	gap: 16px;
	min-width: 0;
	min-height: 0;
}

.modalContainer .template-editor h4 {
	padding: 8px 0 18px;
}

.modalContainer .template-sidebar,
.modalContainer .template-main,
.modalContainer .template-actions-panel {
	box-sizing: border-box;
	min-width: 0;
	background: var(--color-background-tertiary);
	border: 1px solid var(--color-background-quaternary);
	border-radius: var(--radius-6);
}

.modalContainer .template-sidebar {
	display: flex;
	flex: 0 1 300px;
	flex-direction: column;
	min-height: 0;
	min-width: 240px;
}

.modalContainer .template-main {
	display: flex;
	flex: 1 1 360px;
	flex-direction: column;
	min-height: 0;
	min-width: 360px;
}

.modalContainer .template-sidebar-header,
.modalContainer .template-main-header {
	padding: 10px 12px 8px;
	border-bottom: 1px solid var(--color-background-quaternary);
}

.modalContainer .template-sidebar-header h3,
.modalContainer .template-main-header h3 {
	margin: 0 0 4px;
	font-size: 15px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--color-text-primary);
}

.modalContainer .template-sidebar-header p,
.modalContainer .template-main-header p {
	margin: 0;
	font-size: 12px;
	line-height: 1.35;
	color: var(--color-text-secondary);
}

.modalContainer .template-aside-preview-container {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 10px;
}

.modalContainer .template-group + .template-group {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--color-background-quaternary);
}

.modalContainer .template-group-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.modalContainer .template-group-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--color-text-primary);
	text-transform: uppercase;
}

.modalContainer .template-group-count {
	font-size: 11px;
	color: var(--color-text-secondary);
	background: var(--color-background-secondary);
	padding: 2px 7px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-background-quaternary);
}

.modalContainer .template-tile-grid {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.modalContainer .template-aside-preview {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--color-background-quaternary);
	border-radius: var(--radius-6);
	padding: 0;
	background: var(--color-background-secondary);
	cursor: pointer;
	transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.modalContainer .template-aside-preview:hover {
	border-color: var(--color-org-global);
	box-shadow: 0 3px 10px rgba(28, 207, 201, 0.08);
	transform: translateY(-1px);
}

.modalContainer .template-aside-preview-active {
	border-color: var(--template-active-border, #1ccfc9);
	box-shadow: 0 0 0 1px rgba(28, 207, 201, 0.35);
}

.modalContainer .template-aside-preview-overlay {
	--template-paper-width: 210mm;
	--template-paper-height: 297mm;
	--template-paper-scale: 0.35;
	box-sizing: border-box;
	width: calc(100% - 24px);
	margin: 12px;
	aspect-ratio: 210 / 297;
	position: relative;
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid color-mix(in srgb, var(--color-text-primary) 12%, transparent);
	border-radius: 2px;
	box-shadow: 0 2px 8px rgba(10, 24, 36, 0.16);
}

.modalContainer .template-aside-preview[data-paper-size="A3"] .template-aside-preview-overlay,
.modalContainer .template-center-invoice-overlay[data-paper-size="A3"] {
	--template-paper-width: 297mm;
	--template-paper-height: 420mm;
	aspect-ratio: 297 / 420;
}

.modalContainer .template-aside-preview[data-paper-size="A5"] .template-aside-preview-overlay,
.modalContainer .template-center-invoice-overlay[data-paper-size="A5"] {
	--template-paper-width: 148mm;
	--template-paper-height: 210mm;
	aspect-ratio: 148 / 210;
}

.modalContainer .template-aside-preview[data-paper-size="Letter"] .template-aside-preview-overlay,
.modalContainer .template-center-invoice-overlay[data-paper-size="Letter"] {
	--template-paper-width: 8.5in;
	--template-paper-height: 11in;
	aspect-ratio: 17 / 22;
}

.modalContainer .template-aside-preview[data-paper-size="Legal"] .template-aside-preview-overlay,
.modalContainer .template-center-invoice-overlay[data-paper-size="Legal"] {
	--template-paper-width: 8.5in;
	--template-paper-height: 14in;
	aspect-ratio: 17 / 28;
}

.modalContainer .template-active-indicator {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--color-background-primary) url(/icons/check_circle_green.svg) center no-repeat;
	background-size: 16px 16px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
	display: none;
	pointer-events: none;
	z-index: 2;
}

.modalContainer .template-aside-preview.currently-default .template-active-indicator {
	display: block;
}

.modalContainer .template-aside-preview-overlay iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--template-paper-width);
	height: var(--template-paper-height);
	transform: scale(var(--template-paper-scale));
	transform-origin: left top;
	pointer-events: none;
	border: 0;
}

.modalContainer .template-tile-meta {
	margin-top: 0;
	padding: 10px 12px 11px;
	border-top: 1px solid var(--color-background-quaternary);
	background: var(--color-background-tertiary);
}

.modalContainer .template-tile-name {
	font-size: 12px;
	font-weight: 700;
	color: var(--color-text-primary);
}

.modalContainer .template-tile-caption {
	font-size: 11px;
	color: var(--color-text-secondary);
}

.modalContainer .template-empty-custom {
	margin: 8px 0 2px;
	font-size: 12px;
	line-height: 1.35;
	color: var(--color-text-secondary);
}

.modalContainer .template-empty-custom-hidden {
	display: none;
}

.modalContainer .template-main {
	padding: 0 12px 12px;
	align-items: stretch;
}

.modalContainer .template-center-invoice-container {
	display: flex;
	justify-content: center;
	margin-top: 10px;
	border-radius: var(--radius-6);
	padding: 20px;
	background: #FFFFFF;
	flex: 1 1 auto;
	min-height: 0;
	min-width: 0;
	overflow: hidden;
	background-color: var(--color-background-secondary);;
}

.modalContainer .template-center-invoice-overlay {
	--template-paper-width: 210mm;
	--template-paper-height: 297mm;
	--template-paper-scale: 0.5;
	aspect-ratio: 210 / 297;
	position: relative;
	overflow: hidden;
	width: auto;
	max-width: 100%;
	height: 100%;
}

.modalContainer .template-center-invoice-overlay iframe {
	position: relative;
	width: var(--template-paper-width);
	height: var(--template-paper-height);
	display: block;
	border: 0;
	background: var(--color-background-primary);
	transform: scale(var(--template-paper-scale));
	transform-origin: left top;
	pointer-events: none;
}

.modalContainer .template-center-invoice-overlay textarea {
	width: 100%;
	margin-bottom: 0;
	height: 100%;
	font-size: 10px;
	display: block;
	box-sizing: border-box;
	font-family: monospace;
	white-space: nowrap;
	tab-size: 2;
	border: 1px solid var(--color-background-quaternary);
	border-radius: var(--radius-5);
	padding: 10px;
	background: var(--color-background-primary);
	color: var(--color-text-primary);
}

.modalContainer .template-actions-panel {
	flex: 0 1 180px;
	min-width: 160px;
	padding: 10px 10px 4px;
	position: sticky;
	align-self: flex-start;
}

.modalContainer .template-actions-header {
	margin: 0 0 10px;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--color-text-primary);
}

.modalContainer .template-aside-button-container {
	text-align: center;
}

.modalContainer .template-aside-button-container div {
	margin-bottom: 10px;
}

.modalContainer .template-aside-button-container div input {
	width: 145px;
}

@media screen and (max-width: 1120px) {
	.modalContainer .template-editor {
		flex-direction: column;
	}

	.modalContainer .template-sidebar {
		flex-basis: 280px;
		min-width: 220px;
	}

	.modalContainer .template-main {
		min-width: 0;
	}

	.modalContainer .template-actions-panel {
		flex: 0 0 auto;
		position: static;
		align-self: stretch;
	}

	.modalContainer .template-aside-button-container {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		justify-content: flex-start;
	}

	.modalContainer .template-aside-button-container div {
		margin-bottom: 0;
	}
}

@media screen and (min-width: 761px) and (max-width: 1120px) {
	.modalContainer .template-editor-workspace {
		flex: 0 0 580px;
		height: 580px;
		max-height: 580px;
	}

}

@media screen and (max-width: 760px) {
	.modalContainer .template-editor-workspace {
		flex: 0 0 auto;
		flex-direction: column;
	}

	.modalContainer .template-sidebar,
	.modalContainer .template-main,
	.modalContainer .template-actions-panel {
		flex: 0 0 auto;
		min-width: 0;
	}

	.modalContainer .template-aside-preview-container {
		max-height: 360px;
	}
}

/*------------------------------
=BILL PREVIEW MODAL
------------------------------*/
.bill-preview-dialog {
	--bill-paper-width: 210mm;
	--bill-paper-height: 297mm;
	width: 100%;
	max-width: min(calc(var(--bill-paper-width) + 80px), calc(100vw - 24px));
	padding: 40px;
	box-sizing: border-box;
	background: var(--color-background-secondary);
	border-radius: var(--radius-6);
}

.bill-preview-dialog[data-paper-size="A3"] {
	--bill-paper-width: 297mm;
	--bill-paper-height: 420mm;
}

.bill-preview-dialog[data-paper-size="A5"] {
	--bill-paper-width: 148mm;
	--bill-paper-height: 210mm;
}

.bill-preview-dialog[data-paper-size="Letter"] {
	--bill-paper-width: 8.5in;
	--bill-paper-height: 11in;
}

.bill-preview-dialog[data-paper-size="Legal"] {
	--bill-paper-width: 8.5in;
	--bill-paper-height: 14in;
}

.bill-preview-scroll {
	width: 100%;
	overflow-x: auto;
}

.bill-preview-paper {
	position: relative;
	width: var(--bill-paper-width);
	min-height: var(--bill-paper-height);
	box-sizing: border-box;
	padding: 0;
	overflow: hidden;
	background: #FFFFFF;
	color: #111111;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
}

.bill-preview-paper iframe {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	min-height: var(--bill-paper-height);
	border: 0;
	background: #FFFFFF;
}

.bill-preview-page-breaks {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.bill-preview-page-break {
	position: absolute;
	left: 0;
	right: 0;
	border-top: 2px dashed #9b9b9b;
}

@media screen and (max-width: 900px) {
	.bill-preview-dialog {
		padding: 34px 16px 16px;
	}
}

/*------------------------------
=RESPONSIVE OVERRIDES
------------------------------*/

@media screen and (max-height:900px) {
	#cssmenu-body a {
		padding: 10px 20px;
	}
}

@media screen and (max-height:720px) {

	#cssmenu {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#cssmenu-body {
		flex: 1;
	}

	.menu-icon-container {
		display: none;
	}

	#cssmenu-body a {
		padding: 10px 20px;
	}
}

@media screen and (max-width:900px) {

	#cssmenu {
		display: none;
		position: fixed !important;
		width: 250px;
		height: 100%;
		top: 0;
		bottom: 0;
		overflow-y:auto;
		overflow-x:hidden;
		z-index: 500;
	}

	#cssmenu-button-container {
		display: flex !important;
		align-items: center;
		position: fixed;
		height: 100vh;
		top: 0;
		z-index: 500;
	}

	#cssmenu-button {
		flex: 1;
	}

	#content {
		padding-bottom: 30px;
	}

	.outerframe {
		padding-left: 10px;
		padding-right: 10px;
	}

	.outerframe .items {
		padding: 0;
		background-color: transparent;
	}

	.outerframe .ticket {
		border: 1px solid var(--color-background-secondary);
		margin-bottom: 10px;
	}

	.outerframe .ticket:hover {
		background-color: var(--color-background-primary);
	}

	.bill .properties .center {
		flex-direction: column;
	}

	.bill .properties .center > :is(div, span) {
		min-width: 0;
	}
}

@media (max-width: 600px) {
	.project-task-heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 2px;
	}

	.project-target-progress-row-heading,
	.project-target-progress-values {
		align-items: flex-start;
		flex-direction: column;
		gap: 2px;
		text-align: left;
	}

	.project-target-progress-row.is-child {
		margin-left: 10px;
	}

	.bigtext {
		display: none;
	}

	.smalltext {
		display: block;
	}

	.header-top {
		height: 45px;
	}

	.appname {
		margin-bottom: 14px;
	}

	.organization-box {
		margin: 30px 30px 0 30px;
	}

	/* display mikron list as column on small screens */

	.mikron_container {
		flex-direction: column;
		padding: 20px 0 20px 0;
	}

	.mikron_box#new_mikron_box {
		margin: 0 auto 20px auto;
	}
}

/* Bill export choices keep the original compact export list and add selection, status and amount. */
.bill-export-choice { display: flex; align-items: flex-start; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--color-ui-panel-border); font-size: 12px; line-height: 1.2; cursor: pointer; }
.bill-export-choice > input { flex: 0 0 auto; margin: 1px 0 0; }
.bill-export-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.bill-export-title { display: flex; min-width: 0; }
.bill-export-number { flex: 0 0 90px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bill-export-recipient { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bill-export-date { flex: 0 0 75px; text-align: right; color: var(--color-text-secondary); }
.bill-export-details { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-text-secondary); }
.bill-export-amount { font-weight: bold; }
.bill-release-context > div { display: flex; justify-content: space-between; gap: 10px; }
.bill-release-context dd { margin: 0; }
.bill-generator-tax-error { padding: 16px; }
.bill-generator-tax-error button { margin: 10px; }
.bill-export-options label { display: flex; align-items: center; }
.bill-export-options label > span { flex: 5; order: -1; }
.bill-export-options label > input { flex: 1; margin: 0; }
.bill-export-options label::after { content: ""; flex: 5; }
.bill-export-options label:has(input:disabled) > span { color: #ccc; }
.bill-export-actions { display: flex; justify-content: space-between; margin-top: 20px; }
.bill-export-actions button { width: 130px; }

/* Shared ticket/task fields and upload controls. */
.ticket-assignment-field { display: flex; align-items: flex-start; }
.ticket-modal-field-row.ticket-modal-field-row-new { padding-bottom: 20px; }
.ticket-assignment-field-project { padding-top: 5px; }
.ticket-assignment-field-member { margin-bottom: 22px; }
.ticket-assignment-field > span { flex: 4; min-width: 0; }
.ticket-assignment-field > .ticket-assignment-control { flex: 13; min-width: 0; }
.ticket-resource-picker { max-height: 380px; display: flex; flex-direction: column; }
.ticket-resource-picker .resource-box-body-list { padding-bottom: 10px; }
.modalAside button.modal-ticket-asidebutton { border: 0; }
.modalAside button.modalAsideButton { box-sizing: border-box; width: 100%; white-space: normal; }
.ticket-aside-actions-title { padding-top: 10px; }
.ticket-aside-save { margin: 10px 0; }
.ticket-aside-save button, .modalAside .resource_delete > button, .modalAside .resource_confirm_delete > .ticket-resource-delete { width: 100%; padding: 4px; white-space: normal; }
.ticket-attachment-limit { font-size: 11px; color: var(--color-text-secondary); line-height: 1.4; }
.ticket-attachments-working { font-size: 12px; color: var(--color-text-secondary); margin-top: 10px; }
.modal-ticket-attachments-list { margin: 4px 0 10px; }
.modal-ticket-attachment-row { display: flex; align-items: center; gap: 10px; margin: 4px 0; color: var(--color-text-secondary); font-size: 12px; }
.ticket-attachment-download-link { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text-secondary); text-decoration: none; min-width: 0; }
.ticket-attachment-icon { font-size: 11px; line-height: 1; }
.ticket-attachment-filename { overflow-wrap: anywhere; }
button.modal-ticket-attachment-remove { flex: 0 0 auto; border: 0; background: transparent; color: inherit; font: inherit; min-width: 28px; min-height: 28px; padding: 0; }
/* Persisted list filters and incremental paging remain usable at narrow widths. */
.active-filter-chips:not([hidden]) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 10px 0;
}
.resource-list-pages {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 30px 0 20px 0;
	text-align: center;
}
.active-filter-chips .filter-chip, .active-filter-chips .filter-clear-all,
.resource-list-more {
	width: auto;
	max-width: 100%;
	min-height: 36px;
	padding: 6px 12px;
	white-space: normal;
	overflow-wrap: anywhere;
}
.resource-list-pages p { margin: 0; font-size: 12px; color: var(--color-text-secondary); }
.modalSubmit :is(.filter-reset, .absence-preview-discard) { display: block; width: 100%; height: 40px; margin-top: 10px; text-align: center; background-color: transparent; border: 1px solid var(--color-org-global); color: var(--color-org-global); }
.empty-state {
	padding: 16px;
	color: var(--color-text-primary);
	background: var(--color-background-secondary);
	border-radius: var(--radius-5);
}
.empty-state p { margin: 0; }

/* Compatibility for native controls and fields introduced with functional fixes. */
span.icon, .content_header_menu_item > span { display: block; }
button.content_new_ressource { width: 100%; }
button.menu-trigger { width: 100%; height: 100%; }
#content .menu-button { position: relative; }
#content .menu-button > button.menu-trigger { position: absolute; inset: 0; display: block; font-size: 0; }
header .menu-button > button.menu-trigger { width: 100%; height: 20px; padding: 5px 0 0; white-space: nowrap; text-overflow: ellipsis; }
header .menu-button > button.menu-trigger > .bigtext { display: block; }
@media (max-width: 600px) {
	header .menu-button > button.menu-trigger > .bigtext { display: none; }
	header .menu-button > button.menu-trigger > .smalltext { display: block; }
}
button.tooltip { display: inline-block; text-align: left; cursor: help; }
button.label-action-toggle, button.label-action-remove { font-size: 24px; line-height: 1; }
button.label-action-toggle-undo { font-size: 21px; }
button.js-mikron-bookmark-apply, button.js-mikron-bookmark-select { display: flex; text-align: left; }
.mikron-bookmark-form-pane label { display: block; }
.mikron-unavailable-selection { padding: 10px; font-size: 12px; }
.mikron_error .mikron-error-close { float: right; width: auto; min-width: 28px; min-height: 28px; }
.grow-1 { flex: 1; min-width: 0; }
.grow-2 { flex: 2; min-width: 0; }
.grow-3 { flex: 3; min-width: 0; }
.spacer-10 { flex: 0 0 10px; }
.is-hidden, [hidden] { display: none !important; }
.item.bill button.item-content { width: 100%; }
.bill .properties .lefthandside > span, .bill .properties .billprocessed > span,
.expense-dates > span, .expense-amounts > span, .expense-process-bill > span { display: block; }
button.expense-process-bill { width: 100%; text-align: left; }
.bill-month-totals { color: var(--color-text-secondary); text-align: right; margin: 10px 10px 0 0; font-size: 12px; line-height: 1; }
.bill .properties, .bill .properties .center, .bill .properties .center .billprocessed { min-width: 0; }
.billgen-meta-label, .billgen-field-label { display: block; }
button.dashboard { box-sizing: border-box; width: 100%; }
.dashboard > span { display: block; font-weight: bold; font-size: 18px; text-align: center; color: var(--color-text-secondary); margin: .5em 0; }
.memberlist-member-open { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.memberlist-picture { flex: none; margin: 0; }
.memberlist-member-open:hover { color: inherit; }
.member-information-group li > a { display: flex; flex: 1; align-items: baseline; gap: 16px; color: inherit; text-decoration: none; }
.member-information-group li > a:is(:hover, :focus-visible) span { text-decoration: underline; }
.member-workspace { display: flex; width: 100%; height: 100%; }
.organization-invitation-info { flex: 2; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding-left: 20px; font-size: 12px; line-height: 16px; color: var(--color-text-secondary); }
.organization-invitation-info > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-time-leave-configuration-warning, .member-time-leave-metric-range { font-weight: normal; font-size: 11px; line-height: 14px; color: var(--color-text-secondary); white-space: nowrap; }
button.biggreything-flexcontainer > span { display: block; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

.mikron-duration-control { display: flex; margin: 5px 0 15px 0; align-items: center; }
.timesheet-stats { display: flex; justify-content: space-between; gap: 20px; }

/* Project member settings: grouped permission rows with one aligned control
   column; inheritance notes sit under their label. */
.project-member-settings { padding: 0 15px 15px 15px; }
.project-member-settings .project-member-permissions-title { padding-bottom: 0; }
.project-member-permissions { max-width: 520px; padding-bottom: 10px; }
.project-member-permission-group { min-width: 0; margin: 14px 0 0 0; padding: 0; border: 0; }
.absence-period-group-heading,
.member-time-leave-title {
	padding: 0 0 6px 0;
	font-size: 11px;
	font-weight: bold;
	line-height: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
}
.project-member-permission {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 40px;
	padding: 4px 0;
	border-top: 1px solid var(--color-border-primary);
}
.project-member-permission-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.project-member-permission-label .project-member-inherited { font-size: 12px; line-height: 16px; font-style: italic; }
.project-member-permission-label .project-member-inherited,
.project-member-permission:has(input:disabled, select:disabled) .project-member-permission-label,
.project-member-permission-control :is(input, select):disabled { color: var(--color-text-secondary); }
.project-member-permission-control { flex: 0 0 160px; display: flex; align-items: center; }
.project-member-permission-control :is(input, select):disabled { opacity: 1; }
.project-member-permission-control select.organization-input { width: 100%; margin: 0; }
.project-member-permission-control input[type="checkbox"] { margin: 0; }
.project-member-permission-dependent { border-top-style: dashed; }
.project-member-permission-dependent .project-member-permission-label { padding-left: 16px; font-size: 13px; line-height: 17px; }
.project-member-permissions-submit { margin-top: 14px; }
.project-member-permissions-submit .button_standard { padding: 1px 6px; vertical-align: middle; }
@media (max-width: 600px) {
	.resource-panel .project-member-settings { min-width: 0; padding-inline: 10px; overflow-wrap: anywhere; }
	.resource-panel .project-member-permission-control { min-width: 0; }
	.project-member-permission { flex-wrap: wrap; gap: 6px 12px; }
	.project-member-permission-control { flex: 0 0 auto; }
	.project-member-permission-control:has(select) { flex-basis: 100%; }
}

/* Project overview: single hour targets open from their progress row title
   and from the pie settings menu; monetary rows stay percentage-only here. */
button.project-target-progress-edit { display: inline; text-align: left; cursor: pointer; }
button.project-target-progress-edit:is(:hover, :focus-visible) { text-decoration: underline; }
.modalSubmit .budget-delete-open { margin-top: 10px; }
/* Secondary confirmation layered over the budget dialog. */
/* The absence dialog uses the same confirmation for entries and periods. */
.modalBody .budget-delete-confirm,
.modalBody .absence-delete-confirm { top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); box-shadow: var(--shadow-xs); }
.budget-delete-confirm h3,
.absence-delete-confirm h3 { padding-right: 24px; }

/* Budget and quota cards: kind badge, amount, limit type and scope. The accent
   matches the chart lines: the negative and the neutral color of the chart palette. */
.budget-list > .budget {
	--budget-accent: var(--color-target-progress-over);
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-left: 4px solid var(--budget-accent);
	cursor: default;
}
.budget-list > .budget.budget-quota { --budget-accent: var(--color-target-progress-base); }
.budget-list > .budget.budget-contract { --budget-accent: var(--color-target-progress-task); }
.budget-list > .budget.budget-milestones { --budget-accent: var(--color-plan-milestone); }
.budget-list > .budget.budget-receipts { --budget-accent: var(--color-plan-receipt); }
.budget-list > .budget:has(button.budget-details):hover { background-color: var(--color-ui-hover); }
.budget-kind {
	flex: 0 0 auto;
	min-width: 56px;
	padding: 3px 8px;
	border-radius: var(--radius-pill);
	background: var(--budget-accent);
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	line-height: 14px;
	letter-spacing: .04em;
	text-align: center;
	text-transform: uppercase;
}
.budget-details {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
button.budget-details { cursor: pointer; }
.budget-details .budget-amount { font-size: 16px; font-weight: bold; line-height: 20px; }
.budget-details .budget-meta {
	font-size: 12px;
	line-height: 16px;
	color: var(--color-text-secondary);
	overflow-wrap: anywhere;
}
.budget-redacted .budget-details .budget-amount { font-weight: normal; }
.content_new_ressource.budget-add { min-height: 50px; }
.budget-form-hint { margin: -6px 0 0 0; font-size: 12px; line-height: 16px; color: var(--color-text-secondary); }
.budget-form-amount { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.budget-form-amount .organization-input { flex: 1; min-width: 0; margin: 0; }
.budget-form-unit { flex: 0 0 auto; min-width: 48px; color: var(--color-text-secondary); }
.budget-form-amount .field-error { order: 1; flex-basis: 100%; }
.plan-fields { min-width: 0; margin: 0; padding: 0; border: 0; }

/* Grouped Projects list: the header is a client row without a detail view. */
.accordion-header .project-client-group-name { flex: 1; min-width: 0; margin: 0; padding: 0 .5em; font-size: 16px; line-height: 40px; }