.button-styled-as-label {
	color: #757575;
	border: 0;
	font-weight: bold;
	padding-bottom: 0px;
	margin-bottom: 0px;
	background-color: #FFFFFF;
}

.log-pre {
	white-space:pre-wrap;
}

/* An app-table column whose values hold line breaks (cellClass="cell-line-breaks"): every line starts on a
   new line. Only the collapsing is changed, so a column of .mb-table-fit stays unwrapped and a truncate
   column still cuts each line off with an ellipsis. The selector outweighs `app-table .mb-table-fit tbody td`
   in mb-table.scss, whose white-space it overrides. */
app-table tbody > tr > td.cell-line-breaks {
	white-space-collapse: preserve-breaks;
}

.status-initialized {
	color: grey;
}

.show-fields {
	margin-bottom: 10px;
}

.product-field-table > tbody > tr > td {
	border-bottom: 0;
}

.header-area {
	padding: 6px;
	padding-left: 14px;
	border: 1px solid #eeeeee;
	border-bottom: 0px;
	background-color: white;
	margin-bottom: 0px;
}


.btn-group-label {
	color: #555 !important;
	background-color: white !important;
}

.btn-check:checked + .btn-primary {
	color: white !important;
	background-color: #337ab7 !important;
}

.checkbox-in-list .mb-field {
	min-height: 0;
}

.empty-icon {
	margin-left: 25px;
}

.mb-form-stacked-small .mb-field {
	margin-bottom: 8px;
}
.mb-form-stacked-small .mb-label {
	margin-bottom: 3px;
}

.modelling-platform-svg > div {
	padding-top: 10px;
	padding-bottom: 10px;
}

.modelling-platform-svg-rstudio {
	padding-left: 4px;
}

.kpi-card {
	background-color: white;
	border-radius: 4px;
	padding: 16px;
	text-align: left;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	position: relative; /* Nieuwe stijl toegevoegd */
}


.kpi-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.kpi-card-title {
	/*font-size: 16px;*/
	font-weight: bold;
	color: #757575;
}

.kpi-card-content {
	display: flex;
	padding-top: 16px;
	align-items: center;
}

.kpi-card-value {
	font-size: 20px;
	font-weight: bold;
	color: #757575;
}

.kpi-card-difference {
	font-size: 12px;
	position: absolute;
	bottom: 8px;
	right: 8px;
}

.positive {
	color: green;
}

.negative {
	color: red;
}

.bottom-actions .action {
	margin-left: 10px;
}
.bottom-actions .action	a {
	margin-left: 5px !important;
}

.filter-content-block-extended-optimizer {
	.filter-block {
		min-width: 600px !important;
	}
}

.maintain-product-results {
	.id-column {
		width: 10%;
	}
	.name-column {
		width: 40%;
	}
	.code-column {
		width: 40%;
	}
	.row-actions {
		width: 10%;
	}
}

.manage-product-result-mappings {
	.id-column {
		width: 10%;
	}
	.code-column {
		width: 40%;
	}
	.external-code-column {
		width: 40%;
	}
	.row-actions {
		width: 10%;
	}
}

.maintain-model-composition {
	.code-column {
		width: 10%;
	}
	.name-column {
		width: 20%;
	}
	.formula-column {
		width: 40%;
	}
	.result-code-column {
		width: 20%;
	}
	.row-actions {
		width: 10%;
	}
}

.maintain-product-rate-product-mapping {
	.column-one {
		width: 10%;
	}
	.column-two {
		width: 40%;
	}
	.column-three {
		width: 50%;
	}
}

.model-tree-item-list {
	list-style-type: none; /* no bullets */
	padding-left: 0;       /* remove default padding */
	margin-left: 0;        /* remove default margin */
}

.model-tree-item-list ul {
	list-style-type: none; /* no bullets */
	padding-left: 1.2rem;  /* small indentation for hierarchy */
}

.model-tree-item-indented {
	padding-left: 1.8rem;
}

.toggle-btn {
	background: none;
	border: none;
	font-size: 1rem;
}

.clickable {
	color: #337ab7;
	cursor: pointer;
	text-decoration: none;
	padding-bottom: 15px;
}

.clickable-active {
	color: #337ab7;
	cursor: pointer;
	text-decoration: underline;
}

.full-screen {
	min-height: 75vh;
}

.bar {
	height: 20px;
	background-color: #337ab7;
	text-align: right;
	padding-right: 5px;
	color: white;
	border-radius: 4px;
	margin-top: 2px;
}

.bar:hover {
	color: black;                 /* black text color at hover */
	background-color: #9bc2e1;    /* lighter color at hover */
	transform: scale(1.02);       /* small increase */
	cursor: pointer;
}

.table-fixed {
	table-layout: fixed;
}

.modal-dialog[cdkdrag] {
	transition: none !important;
}

.modal-header[cdkdraghandle] {
	cursor: grab;
}

.resizable {
	resize: both;
}

.scrollable {
	overflow-y: auto;
	max-height: 70vh;
}

.formula-field {
	word-break: break-all;
}

.formula-editor-container {
	height: 200px;
	padding: 20px;
	max-width: 900px;
	margin: 0 auto;
}

.editor-container {
	width: 100%;
	height: 100%;
	border: 1px solid #ccc;
	border-radius: 4px;
}

/*.editor-container.readonly .monaco-editor,*/
/*.editor-container.readonly .monaco-editor .margin {*/
/*	background-color: #f5f5f5 !important;*/
/*}*/

.editor-container.readonly .monaco-editor .view-lines {
	cursor: default !important;
}

.editor-container.readonly .monaco-editor .monaco-editor-overlaymessage {
	display: none !important;
}

/*.editor-container.readonly .monaco-editor .current-line,*/
/*.editor-container.readonly .monaco-editor .line-numbers.active-line-number {*/
/*	background: transparent !important;*/
/*	border: none !important;*/
/*	font-weight: normal !important;*/
/*}*/

.error-panel-container {
	padding: 0 20px 20px 20px;
	max-width: 900px;
	margin: 0 auto;
}

.error-panel {
	background: #fef2f2;
	border: 1px solid #fca5a5;
	border-radius: 6px;
	padding: 12px 16px;
}

.error-panel h4 {
	margin: 0 0 8px 0;
	color: #dc2626;
	font-size: 14px;
}

.error-icon {
	margin-right: 6px;
}

.error-panel ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.error-panel li {
	padding: 6px 8px;
	margin: 4px 0;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
	display: flex;
	gap: 12px;
}

.error-panel li:hover {
	background: rgba(0, 0, 0, 0.05);
}

.error-panel li.error {
	border-left: 3px solid #dc2626;
}

.error-panel li.warning {
	border-left: 3px solid #f59e0b;
}

.error-location {
	color: #6b7280;
	font-family: monospace;
	white-space: nowrap;
}

.error-message {
	color: #374151;
}

.success-panel {
	background: #f0fdf4;
	border: 1px solid #86efac;
	border-radius: 6px;
	padding: 12px 16px;
	color: #166534;
	font-size: 14px;
}

.success-icon {
	color: #22c55e;
	margin-right: 6px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Excel-style table — apply class "table-excel" on <table>
   ═══════════════════════════════════════════════════════════════════════════ */

.table-excel {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.82em;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

/* Cell borders */
.table-excel th,
.table-excel td {
	border: 1px solid #d0d5dd;
	padding: 5px 10px;
	vertical-align: middle;
}

/* Header row */
.table-excel thead th,
.table-excel > tr:first-child > th {
	background: #f2f4f7;
	color: #344054;
	font-weight: 600;
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: nowrap;
	position: sticky;
	top: 0;
	z-index: 1;
}

/* Alternating rows */
.table-excel tbody tr:nth-child(even) {
	background: #f9fafb;
}

.table-excel tbody tr:nth-child(odd) {
	background: #ffffff;
}

/* Hover */
.table-excel tbody tr:hover {
	background: rgba(0, 0, 0, 0.04);
}

/* Numeric cells — right-align */
.table-excel td.text-end,
.table-excel th.text-end {
	text-align: right;
}

/* First column (label) slightly bolder */
.table-excel tbody td:first-child {
	font-weight: 500;
	color: #344054;
}

/* Small variant — for sidepanels and compact areas */
.table-excel.table-excel-sm {
	font-size: 0.7em;
}

.table-excel.table-excel-sm th,
.table-excel.table-excel-sm td {
	padding: 3px 6px;
}

.table-excel.table-excel-sm thead th,
.table-excel.table-excel-sm > tr:first-child > th {
	font-size: 0.85em;
}


/*═══════════════════════════════════════════════════════════════════════════ */
/* Multi select checkbox list */
/*═══════════════════════════════════════════════════════════════════════════*/

.multi-select-checkbox-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 600px;
	overflow-y: auto;
	margin: 8px 0;
}

.multi-select-checkbox-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 2px 0;
	font-size: 0.85em;
	cursor: pointer;

	input[type="checkbox"] {
		flex-shrink: 0;
	}

	span {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

.correlation-calculate {
	margin-top: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}


.badge-beta {
	background-color: #1daf0f;
	color: white !important;
	font-size: 8px;
	font-weight: bold;
	padding: 2px 6px;
	border-radius: 6px;
	margin-left: 6px;
	vertical-align: middle;
	text-transform: uppercase;
}

/* Report tabs (Summary, Deep dive, Trends, Geographical): keep the left filter
   column (Show / Scenarios / filters) wide enough that its buttons do not
   overflow into the content area when the window narrows. */
.report-filter-column {
	min-width: 250px;
}

/* The Bootstrap content column next to the filter has a fixed width (83.33%)
   and flex-shrink: 0, so it cannot give back the extra space the filter claims
   via min-width. Combined with the row's flex-wrap that pushed the total past
   100%, so the content either overflowed off the right edge (chart tabs) or
   wrapped below the filter (summary tab). Give the content column a flex-basis
   of 0 so it contributes nothing to the wrap calculation and simply grows into
   whatever room the filter leaves; min-width: 0 lets it shrink below the
   intrinsic width of wide tables/charts (which then stay within the column). */
.report-filter-column + .col-md-10 {
	flex: 1 1 0;
	min-width: 0;
}


.geo-coordinate-map {
	height: 63vh;
}

/* The smoothing parameters as a label column and a control column, so the inputs line up underneath each
   other. The element keeps .mb-field, because skin.scss hangs the .form-control styling of inputs on that
   ancestor and without it they fall back to bare browser fields. That same class sets display:flex, so
   this selector needs .mb-field in front of it to win: styles.css is linked after this file, so an equal
   specificity would lose. */
.mb-field.geo-coordinate-smoothing {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 12px;
	row-gap: 10px;
	align-items: center;
}


/* The control buttons of a coordinate map, the fullscreen and the download one. Icon and border share one
   colour, well darker than the soft grey shadow MapLibre's default control group ships. The
   .maplibregl-ctrl-group prefix is needed to win: maplibre-gl.css sets the colour on
   .maplibregl-ctrl-group a with the same specificity, and styles.css is linked after this file. */
.maplibregl-ctrl-group a.geo-map-control-button {
	color: #1f2a30;
	border: 1px solid #1f2a30;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: center;
	/* MapLibre sizes only the button elements in a control group, and these two are anchors, so they get
	   no box of their own and the white group box closes loosely around the icon. A box of their own ends
	   that, and a smaller box than MapLibre's own 29px keeps the two controls modest next to the map. */
	width: 24px;
	height: 24px;
	box-sizing: border-box;
	font-size: 12px;
	line-height: 1;
}

/* The metric legend of a coordinate map (gradient bar + low/center/high labels), a plain corner control
   rather than a MapLibre button group. */
.geo-legend {
	background: rgba(255, 255, 255, 0.85);
	padding: 6px 8px;
	border-radius: 4px;
	font: 11px sans-serif;
	line-height: 1.4;
	color: #333;
}


/* The top bar of the application: the logo block, the application name next to it and the
   icon buttons at the far right. Its height matches the $top-nav-height of the rest of the application. */
.topbar {
	display: flex;
	align-items: center;
	height: 58px;
	background: #ffffff;
	border-bottom: 1px solid #e0e0e0;
}

/* The rectangle around the logo, in the grey of the brand block of the application. align-self stretch
   runs it over the full height of the bar and the padding gives the rectangle its width. */
.topbar-logo {
	display: flex;
	align-self: stretch;
	align-items: center;
	justify-content: center;
	width: var(--topbar-logo-width);
	/* A button, so the browser shows no address when hovering; without the border and padding of one. */
	padding: 0;
	border: 0;
	background: #474747;
	/* Reaches over the bottom border of the bar, so the block runs into the sidebar without a line. */
	margin-bottom: -1px;
}

/* Without a sidebar under it the block has nothing to line up with, so it stays white like the bar. */
.topbar-logo.topbar-logo-plain {
	background: #ffffff;
	margin-bottom: 0;
}

/* The logo is wider than high, so the height sets its size and the width follows. */
.topbar-logo-img {
	height: 30px;
	width: auto;
}

/* Shared by the logo block and the sidebar under it, so the two columns always line up. */
:root {
	--topbar-logo-width: 88px;
}

/* The sidebar under the logo, in the same grey. Its layout is Bootstrap classes on the host element. */
.menu-sidebar {
	width: var(--topbar-logo-width);
	background: #474747;
}

/* The tiles scroll in here without a scrollbar, which would narrow the square tiles; the fades below show
   instead that there are more. */
.menu-sidebar-scroller {
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: none;
}

.menu-sidebar-scroller::-webkit-scrollbar {
	display: none;
}

/* The two ends of the tiles that the component watches. */
.menu-sidebar-marker {
	height: 1px;
}

/* At an end with tiles past it, the grey fades over the tiles and holds a scroll button. Only the button takes
   clicks, and visibility keeps a hidden fade from taking any. */
.menu-sidebar-fade {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	height: 56px;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 150ms ease, visibility 150ms ease;
}

.menu-sidebar-fade-top {
	top: 0;
	align-items: flex-start;
	padding-top: 4px;
	background: linear-gradient(#474747 30%, rgba(71, 71, 71, 0));
}

.menu-sidebar-fade-bottom {
	bottom: 0;
	align-items: flex-end;
	padding-bottom: 4px;
	background: linear-gradient(rgba(71, 71, 71, 0), #474747 70%);
}

.menu-sidebar.more-above .menu-sidebar-fade-top,
.menu-sidebar.more-below .menu-sidebar-fade-bottom {
	opacity: 1;
	visibility: visible;
}

.menu-sidebar-fade-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.18);
	color: #ffffff;
	pointer-events: auto;
	cursor: pointer;
}

.menu-sidebar-fade-button:hover {
	background-color: rgba(255, 255, 255, 0.3);
}

/* Two classes deep, so it beats the app-wide `.structures button i` (18px and a margin on the right). */
.menu-sidebar-fade .menu-sidebar-fade-button i {
	margin-right: 0;
	font-size: 13px;
}

/* A square tile, as high as the sidebar is wide. */
.menu-sidebar-item {
	position: relative;
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
	color: rgba(255, 255, 255, 0.7);
}

/* Every tile is a button, so the browser shows no address when hovering; it drops the button background. */
button.menu-sidebar-item {
	background-color: transparent;
}

/* A fixed square around the glyph, so icons of different widths all sit on the same spot. */
.menu-sidebar-icon {
	width: 28px;
	height: 28px;
	font-size: 24px;
	line-height: 1;
}

/* Two classes deep, so it beats the app-wide `.structures button i` (18px and a margin on the right), which
   would make the icon of a button tile smaller and push it off centre. */
.menu-sidebar-item .menu-sidebar-icon i {
	margin-right: 0;
	font-size: inherit;
}

.menu-sidebar-item:hover,
.menu-sidebar-item.active {
	color: #ffffff;
	background-color: rgba(255, 255, 255, 0.1);
}

/* The hint on a tile that opens sub items beside the sidebar instead of a page. Two classes deep for the
   same reason as the icon above. */
.menu-sidebar-item .menu-sidebar-more {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	margin-right: 0;
	font-size: 11px;
	opacity: 0.55;
	transition: transform 120ms ease, opacity 120ms ease;
}

.menu-sidebar-item.open .menu-sidebar-more {
	opacity: 1;
	transform: translateY(-50%) translateX(2px);
}

/* The sub items of a tile, in a white popover beside the sidebar. It is drawn in the CDK overlay at body level. */
.menu-sidebar-flyout {
	position: relative;
	width: 230px;
	padding: 6px;
	background: #ffffff;
	border: 1px solid #e3e3e3;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
	animation: menu-sidebar-flyout-in 120ms ease;
}

/* The arrow pointing at the middle of the tile, which is as high as the sidebar is wide. */
.menu-sidebar-flyout::before {
	content: '';
	position: absolute;
	left: -7px;
	top: calc(var(--topbar-logo-width) / 2 - 10px);
	width: 12px;
	height: 12px;
	background: #ffffff;
	border-left: 1px solid #e3e3e3;
	border-bottom: 1px solid #e3e3e3;
	transform: rotate(45deg);
}

@keyframes menu-sidebar-flyout-in {
	from {
		opacity: 0;
		transform: translateX(-6px);
	}
}

.menu-sidebar-flyout-title {
	padding: 8px 10px 6px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #9a9a9a;
}

/* A button, like the tiles, so without the border, background and centred text of a button. */
.menu-sidebar-flyout-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 9px 10px 9px 12px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #474747;
	text-align: left;
	text-decoration: none;
}

/* Two classes deep, so it beats the app-wide `.structures button i` (18px and a margin on the right). */
.menu-sidebar-flyout .menu-sidebar-flyout-item i {
	width: 16px;
	margin-right: 0;
	font-size: inherit;
	text-align: center;
	color: #8a8a8a;
}

.menu-sidebar-flyout-item:hover {
	color: #474747;
	text-decoration: none;
	background: rgba(0, 0, 0, 0.04);
}

/* The current sub item: a grey background with a short pink bar in front. */
.menu-sidebar-flyout-item.active {
	color: #212121;
	font-weight: 500;
	background: rgba(0, 0, 0, 0.07);
}

.menu-sidebar-flyout-item.active i {
	color: #474747;
}

.menu-sidebar-flyout-item.active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 2px;
	background: #e91e63;
}

/* The name of the application beside the logo on the landing page. 700 is the heaviest Roboto weight
   below black that the application loads. */
.topbar-app-title {
	padding-left: 16px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
	/* The color of a card title, so the bar and the cards below it read alike. */
	color: var(--bs-gray-700);
}

.topbar-title {
	padding-left: 20px;
	font-size: 18px;
	color: #474747;
}

/* margin-left auto takes up all the room between the title and the buttons, which pushes them right. */
.topbar-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	padding-right: 16px;
}

/* A circle around the glyph, the shape the a.mb-action-button of the application uses. appearance and
   padding are reset: the browser button box puts the glyph off centre however the flex box is centred. */
.topbar-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	-webkit-appearance: none;
	appearance: none;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #474747;
	font-size: 18px;
	line-height: 1;
	transition: background-color 120ms ease;
}

/* There is no text next to the glyph, so it should not carry the margin-right that .structures button i
   gives it. Two classes to win: styles.css is linked after this file, so an equal specificity would lose. */
.topbar-button i.fa {
	margin-right: 0;
}

/* Only the background changes, the glyph keeps its colour. Translucent black rather than a fixed grey,
   the same hover the other icon buttons of the application use. */
.topbar-button:hover {
	background-color: rgba(0, 0, 0, 0.07);
}

/* The minutes before the session times out: as big as a topbar button, but it is no button, so it has no
   hover. position relative anchors the badge. */
.topbar-timeout {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: #474747;
	font-size: 18px;
	line-height: 1;
	cursor: default;
}

/* The number on the bottom right of the clock, small and light so the clock stays the main thing. Grey, and
   red when less than 5 minutes are left. */
.topbar-timeout-minutes {
	position: absolute;
	right: -3px;
	bottom: 1px;
	min-width: 13px;
	height: 13px;
	padding: 0 3px;
	border-radius: 7px;
	background-color: var(--tile-icon-grey-bg);
	color: var(--tile-icon-grey-fg);
	font-size: 9px;
	font-weight: 600;
	line-height: 13px;
	text-align: center;
	box-shadow: 0 0 0 1.5px #ffffff;
}

.topbar-timeout-minutes.topbar-timeout-minutes-low {
	background-color: var(--tile-icon-red-bg);
	color: var(--tile-icon-red-fg);
}


/* The body of the home page. Its two rows each take half of it whatever is in them: basis 0 so a long
   list does not claim a bigger share, and min-height 0 because a flex item will not shrink below content. */
.home-body {
	min-height: 0;
}

/* nowrap is the one that matters: a wrapping flex container sizes its line to the tallest item instead of
   to its own height, so with Bootstrap's default the columns are never clamped and everything grows. */
.home-body > .row {
	flex: 1 1 0;
	min-height: 0;
	flex-wrap: nowrap;
}

/* The same floor on the other axis, so a wide table cannot push its column wider. */
.home-body > .row > .col {
	min-width: 0;
}


/* The colors of the home page cards, taken from the landing page design. The tints a user can give a tile
   icon pair a light background with a dark glyph of the same hue, kept muted so no tile shouts; the
   codes are the ones in tile-icon.ts. */
:root {
	--home-tile-text: #0F172A;
	--home-tile-subtext: #5B6678;
	--home-panel-bg: #F8FAFC;
	--home-panel-border: #EEF1F5;
	--home-logo-border: #E6EAF0;

	--tile-icon-blue-bg: #E8EFFD;
	--tile-icon-blue-fg: #1E3A8A;
	--tile-icon-teal-bg: #E6F4F1;
	--tile-icon-teal-fg: #0B5C55;
	--tile-icon-green-bg: #EAF5EE;
	--tile-icon-green-fg: #276445;
	--tile-icon-amber-bg: #FBF3E2;
	--tile-icon-amber-fg: #8A5A12;
	--tile-icon-red-bg: #FBEDED;
	--tile-icon-red-fg: #9B2C2C;
	--tile-icon-pink-bg: #FBEDF3;
	--tile-icon-pink-fg: #8E2D5B;
	--tile-icon-purple-bg: #F0EDFB;
	--tile-icon-purple-fg: #4C3A99;
	--tile-icon-grey-bg: #EEF1F5;
	--tile-icon-grey-fg: #475569;
}

.tile-icon-color-blue { background-color: var(--tile-icon-blue-bg); color: var(--tile-icon-blue-fg); }
.tile-icon-color-teal { background-color: var(--tile-icon-teal-bg); color: var(--tile-icon-teal-fg); }
.tile-icon-color-green { background-color: var(--tile-icon-green-bg); color: var(--tile-icon-green-fg); }
.tile-icon-color-amber { background-color: var(--tile-icon-amber-bg); color: var(--tile-icon-amber-fg); }
.tile-icon-color-red { background-color: var(--tile-icon-red-bg); color: var(--tile-icon-red-fg); }
.tile-icon-color-pink { background-color: var(--tile-icon-pink-bg); color: var(--tile-icon-pink-fg); }
.tile-icon-color-purple { background-color: var(--tile-icon-purple-bg); color: var(--tile-icon-purple-fg); }
.tile-icon-color-grey { background-color: var(--tile-icon-grey-bg); color: var(--tile-icon-grey-fg); }

/* The glyph centred in a rounded square. The glyphs are solid, so they sit smaller in the square than an
   outline icon would, which keeps the tile calm. */
.tile-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	font-size: 20px;
	line-height: 1;
}

/* Two classes to beat the app-wide `.structures button i`, which would otherwise reset the glyph to 18px
   and shift it off centre with a margin meant for a button that has a label beside its icon. */
.tile-icon .fa {
	margin-right: 0;
	font-size: inherit;
}

/* The larger square of a card whose body is a pair of panels. */
.tile-icon.tile-icon-large {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	font-size: 22px;
}

/* A brand logo keeps its own colors, so it sits on white with a hairline instead of a tint. */
.tile-icon.tile-icon-logo {
	box-sizing: border-box;
	background-color: #ffffff;
	border: 1px solid var(--home-logo-border);
}

.tile-icon-logo img {
	width: 32px;
	height: 32px;
}


/* The grid presentation of a home card. auto-fill rather than a fixed column count, so the tiles reflow
   as the card gets narrower instead of the card having to know how wide it is. */
.home-tile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 4px;
	align-content: start;
}

/* A button, so a tile is reachable by keyboard and reads as the action it is. appearance and padding are
   reset because the browser keeps its own button box, which fights the flex centring. */
.home-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* The name is what varies in height, so the tiles are aligned on their icon rather than centred. */
	justify-content: flex-start;
	gap: 8px;
	-webkit-appearance: none;
	appearance: none;
	padding: 12px 4px;
	border: 0;
	border-radius: 10px;
	background-color: transparent;
	cursor: pointer;
	transition: background-color 120ms ease;
}

/* Translucent black rather than a fixed grey, the same hover the icon buttons of the application use. */
.home-tile:hover {
	background-color: rgba(0, 0, 0, 0.04);
}

.home-tile:active {
	background-color: rgba(0, 0, 0, 0.08);
}

/* Two lines and then an ellipsis. line-clamp needs the box display, and overflow-wrap breaks a single
   long word that would otherwise push the tile wider than its grid column. */
.home-tile-name,
.home-tile-description {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	overflow-wrap: anywhere;
	text-align: center;
}

.home-tile-name {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--home-tile-text);
}


/* A card whose whole body is a couple of tiles shows them as panels that share the card evenly. */
.home-tile-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	height: 100%;
}

.home-tile-row .home-tile {
	gap: 10px;
	padding: 16px;
}

.home-tile-row .home-tile-name {
	font-size: 13px;
	font-weight: 700;
}

/* A grid whose tiles are panels as well. */
.home-tile-panels {
	gap: 8px;
}

/* A panel shows its edges, so its content is centred in it rather than aligned on the icon. A hover of its
   own, as the translucent one of a plain tile is lighter than the panel. */
.home-tile-row .home-tile,
.home-tile-panels .home-tile {
	justify-content: center;
	background-color: var(--home-panel-bg);
	border: 1px solid var(--home-panel-border);
}

.home-tile-row .home-tile:hover,
.home-tile-panels .home-tile:hover {
	background-color: var(--home-panel-border);
}

/* Says where a tile leads: under the section name in bold, or alone when the card names the section. */
.home-tile-description {
	font-size: 11px;
	color: var(--home-tile-subtext);
}

/* One line in a panel grid, so all panels are equally high; the title of the tile shows the whole name. */
.home-tile-panels .home-tile-name,
.home-tile-panels .home-tile-description {
	-webkit-line-clamp: 1;
	line-clamp: 1;
}


/* The monitoring card of the home page: the date of the data, three counters, the models that need
   attention and a link to the dashboard. The statuses reuse the muted tile tints. */
.home-monitoring {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
}

.home-monitoring-data-date {
	font-size: 11px;
	color: var(--home-tile-subtext);
}

.home-monitoring-counters {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
}

/* The tint class on the counter gives it its background and the color of its number and label. */
.home-monitoring-counter {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 10px;
	border-radius: 8px;
	text-decoration: none;
}

.home-monitoring-counter:hover {
	text-decoration: none;
	filter: brightness(0.97);
}

.home-monitoring-counter-value {
	font-size: 20px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.home-monitoring-counter-label {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 700;
}

.home-monitoring-dot {
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: currentColor;
}

.home-monitoring-deviation-none { background-color: var(--tile-icon-green-fg); }
.home-monitoring-deviation-warning { background-color: var(--tile-icon-amber-fg); }
.home-monitoring-deviation-severe { background-color: var(--tile-icon-red-fg); }

.home-monitoring-deviation-text-warning { color: var(--tile-icon-amber-fg); font-weight: 700; }
.home-monitoring-deviation-text-severe { color: var(--tile-icon-red-fg); font-weight: 700; }

/* One grid for the head and the rows, so the columns line up without a table element. */
.home-monitoring-row {
	display: grid;
	grid-template-columns: 1.3fr 0.8fr 1fr 0.7fr 14px;
	gap: 0 8px;
	align-items: center;
	min-height: 40px;
	padding: 4px 6px;
	border-top: 1px solid var(--home-panel-border);
	border-radius: 6px;
	font-size: 12px;
	color: var(--home-tile-text);
	text-decoration: none;
}

a.home-monitoring-row:hover {
	text-decoration: none;
	color: var(--home-tile-text);
	background-color: rgba(0, 0, 0, 0.04);
}

.home-monitoring-head {
	min-height: 22px;
	border-top: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--home-tile-subtext);
}

.home-monitoring-model {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.home-monitoring-product {
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.home-monitoring-subtitle {
	font-size: 11px;
	color: var(--home-tile-subtext);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.home-monitoring-figure {
	display: flex;
	align-items: center;
	gap: 5px;
	font-variant-numeric: tabular-nums;
}

.home-monitoring-baseline {
	color: var(--home-tile-subtext);
}

.home-monitoring-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
}

.home-monitoring-chevron {
	color: var(--bs-gray-500);
}

/* The link sits at the bottom of the card, however few rows there are above it. */
.home-monitoring-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 8px;
	border-top: 1px solid var(--home-panel-border);
	font-size: 12px;
	font-weight: 700;
	color: var(--tile-icon-blue-fg);
	text-decoration: none;
}

.home-monitoring-footer:hover {
	text-decoration: none;
}

.home-monitoring-empty {
	margin: 0;
	font-size: 12px;
	color: var(--home-tile-subtext);
}


/* The status of a workspace: a dot on the corner of its logo, a line under its name, a badge in the list,
   and in the popover its name in the colour of the dot; all in the muted tile tints. */
.tile-icon.tile-icon-logo {
	position: relative;
}

.workspace-status-dot {
	position: absolute;
	right: -3px;
	bottom: -3px;
	width: 12px;
	height: 12px;
	border: 2px solid #ffffff;
	border-radius: 50%;
}

.workspace-status-dot.workspace-status-running { background-color: var(--tile-icon-green-fg); }
.workspace-status-dot.workspace-status-starting { background-color: var(--tile-icon-amber-fg); }
.workspace-status-dot.workspace-status-error { background-color: var(--tile-icon-red-fg); }
.workspace-status-dot.workspace-status-initialized,
.workspace-status-dot.workspace-status-stopped { background-color: var(--bs-gray-500); }

.workspace-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 20px;
	padding: 0 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
}

.workspace-status-badge.workspace-status-running { background-color: var(--tile-icon-green-bg); color: var(--tile-icon-green-fg); }
.workspace-status-badge.workspace-status-starting { background-color: var(--tile-icon-amber-bg); color: var(--tile-icon-amber-fg); }
.workspace-status-badge.workspace-status-error { background-color: var(--tile-icon-red-bg); color: var(--tile-icon-red-fg); }
.workspace-status-badge.workspace-status-initialized,
.workspace-status-badge.workspace-status-stopped { background-color: var(--tile-icon-grey-bg); color: var(--tile-icon-grey-fg); }

.home-tile-status {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: -4px;
	font-size: 11px;
	color: var(--home-tile-subtext);
}

/* The tile of a workspace whose popover is open, in the hover color of a panel. */
.home-tile.open {
	background-color: var(--home-panel-border);
}

/* The popover with the actions of a workspace. Its panel comes from the filter of a list screen. */
.workspace-popover {
	width: 260px;
	padding: 12px;
}

.workspace-popover-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.tile-icon.workspace-popover-logo {
	width: 36px;
	height: 36px;
	border-radius: 9px;
}

.workspace-popover-logo img {
	width: 24px;
	height: 24px;
}

.workspace-popover-title-block {
	min-width: 0;
}

.workspace-popover-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--home-tile-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.workspace-popover-subtitle {
	font-size: 11px;
	color: var(--home-tile-subtext);
}

/* The status under the name in the popover, in the colour of its dot. */
.workspace-status-text {
	font-weight: 700;
}

.workspace-status-text.workspace-status-running { color: var(--tile-icon-green-fg); }
.workspace-status-text.workspace-status-starting { color: var(--tile-icon-amber-fg); }
.workspace-status-text.workspace-status-error { color: var(--tile-icon-red-fg); }
.workspace-status-text.workspace-status-initialized,
.workspace-status-text.workspace-status-stopped { color: var(--tile-icon-grey-fg); }

.workspace-popover-hint {
	margin: 8px 0 0;
	font-size: 11px;
	color: var(--home-tile-subtext);
}

.workspace-popover-token {
	display: flex;
	align-items: center;
	margin-top: 8px;
	padding: 4px 4px 4px 8px;
	border: 1px solid var(--home-logo-border);
	border-radius: 7px;
	font-family: monospace;
	font-size: 12px;
}

.workspace-popover-token span {
	flex-grow: 1;
	overflow-wrap: anywhere;
}

.workspace-popover-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

/* Three classes to beat the app-wide `.structures button i`, which sizes a glyph for a large button. The
   popover is rendered at body level, so the glyph also needs its own margin to the label. */
.workspace-popover .btn .fa {
	margin-right: 5px;
	font-size: 12px;
}

/* Label and value side by side, in two columns, so the details stay short. */
.workspace-popover-details-list {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 2px 12px;
	margin: 0 0 10px;
	padding: 8px 0;
	border-top: 1px solid var(--home-panel-border);
	border-bottom: 1px solid var(--home-panel-border);
	font-size: 12px;
}

.workspace-popover-details-list dt {
	font-weight: 400;
	color: var(--home-tile-subtext);
}

.workspace-popover-details-list dd {
	margin: 0;
	color: var(--home-tile-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The picker in a details form: the current icon, which opens the popover when it may be changed. */
.tile-icon-picker {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* The icon as the button: no button look of its own, a ring on hover and while open shows it can be clicked. */
.tile-icon-picker-button {
	display: inline-flex;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	cursor: pointer;
	transition: box-shadow 120ms ease;
}

.tile-icon-picker-button:hover,
.tile-icon-picker-button:focus-visible,
.tile-icon-picker-button.open {
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

/* The popover takes its panel from the filter of a list screen. A fixed column count gives it its width,
   so it stays the same whatever the page around it does. */
.tile-icon-picker-icons {
	display: grid;
	grid-template-columns: repeat(9, 34px);
	gap: 2px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--home-panel-border);
}

.tile-icon-picker-option {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 7px;
	background-color: transparent;
	color: #474747;
	font-size: 16px;
	cursor: pointer;
}

.tile-icon-picker-option .fa {
	margin-right: 0;
	font-size: inherit;
}

.tile-icon-picker-option:hover {
	background-color: rgba(0, 0, 0, 0.07);
}

.tile-icon-picker-option.selected {
	border-color: var(--tile-icon-blue-fg);
	background-color: var(--tile-icon-blue-bg);
	color: var(--tile-icon-blue-fg);
}

.tile-icon-picker-colors {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 2px;
}

/* The swatch shows the background of the pair with a ring of its glyph color, so it previews both. */
.tile-icon-picker-swatch {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 3px solid currentColor;
	border-radius: 50%;
	cursor: pointer;
}

.tile-icon-picker-swatch.selected {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* A Bootstrap row of cards whose cells have a least height, so a nearly empty card still reads as one.
   The cards fill their cell, as app-card takes the full height of its box. */
.mb-card-grid > * {
	min-height: 20rem;
}

/* A page's distance to the edges of its area, the same on all four sides. Only the page a section shows directly,
   or the area under its tabs, takes it: a page inside its tabs would get the distance twice. */
.mb-page-content {
	padding: 20px;
}

/* A page's tabs and actions as a full width white strip, 56px like a context sidebar header; min-height so tabs can
   wrap. Three classes deep, because epm.css loads before the skin and Bootstrap rules for tabs. */
.nav.nav-tabs.mb-page-header {
	min-height: 56px;
	padding: 0 20px;
	background: #ffffff;
	border-bottom: 1px solid #e3e3e3;
}

/* The link fills the strip and overlaps its line by Bootstrap's -1px margin. Roboto sits 1px high in its
   line box, so 2px at the top centres the capitals above the line. */
.nav.nav-tabs.mb-page-header > li > a {
	display: flex;
	align-items: center;
	height: 56px;
	padding: 2px 20px 0;
	font-size: 13px;
}

/* The active line on the strip's own line. */
.nav.nav-tabs.mb-page-header > li > a.active::after {
	bottom: -1px;
	height: 2px;
}

.nav.nav-tabs.mb-page-header .header-actions .mb-field {
	margin: 0;
}

/* The buttons below a form, right aligned with room between them, as .content gives them. */
.mb-page-content .bottom-actions {
	text-align: right;
}

.mb-page-content .bottom-actions .btn,
.mb-page-content .bottom-actions a {
	margin-left: 10px;
}


/*═══════════════════════════════════════════════════════════════════════════ */
/* Context sidebar page layout */
/*═══════════════════════════════════════════════════════════════════════════*/

/* Fills the section's <main>; the page scrolls in its own box, so the sidebar keeps the full height. */
.context-sidebar-layout {
	display: flex;
	height: 100%;
}

/* min-width: 0 lets the page shrink below wide tables and charts instead of pushing the sidebar away. */
.context-sidebar-layout > .context-sidebar-page {
	flex: 1;
	min-width: 0;
	overflow: auto;
}


/*═══════════════════════════════════════════════════════════════════════════ */
/* Model history panel */
/*═══════════════════════════════════════════════════════════════════════════*/

/* The section body has no padding, so bands and rows reach its edges and keep 20px at the sides themselves. */

/* A column over the section body: the options on top, the list takes the rest. */
.model-history-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* All and Current. */
.model-history-filter {
	display: flex;
	gap: 6px;
	padding: 12px 20px;
	border-bottom: 1px solid #eeeeee;
}

/* Only the list scrolls, with the scrollbar of mb-slim-scrollbar in card.scss; min-height 0 lets it shrink to scroll. */
.model-history-list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #e3e3e3 transparent;
}

.model-history-option {
	padding: 2px 14px;
	border: 1px solid #e3e3e3;
	border-radius: 14px;
	background: #ffffff;
	font-size: 12px;
	color: #474747;
	cursor: pointer;
}

.model-history-option:hover {
	background: #f5f5f5;
}

.model-history-option.selected {
	border-color: #474747;
	background: #474747;
	color: #ffffff;
}

/* A day band with the number of events. */
.model-history-day {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 20px;
	background: #f7f7f7;
	font-size: 12px;
	font-weight: 500;
	color: #474747;
}

/* Room above every day band but the first, which sits right below the options. */
.model-history-row + .model-history-day {
	margin-top: 8px;
}

.model-history-count {
	min-width: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: #e9e9e9;
	font-size: 11px;
	text-align: center;
	color: #6a6a6a;
}

.model-history-row {
	display: flex;
	gap: 12px;
	padding: 8px 20px;
}

.model-history-time {
	width: 38px;
	min-width: 38px;
	padding-top: 1px;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: #8a8a8a;
}

.model-history-main {
	flex: 1;
	min-width: 0;
}

.model-history-line {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.model-history-result {
	flex: 1;
	min-width: 0;
	color: #212121;
}

/* The version of an event; the version the page shows has the darker chip. */
.model-history-chip {
	min-width: 32px;
	padding: 0 6px;
	border-radius: 4px;
	background: #f0f0f0;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: #6a6a6a;
}

.model-history-chip.current {
	background: #e0e0e0;
	font-weight: 600;
	color: #212121;
}

.model-history-function,
.model-history-relation {
	font-size: 11px;
	color: #9a9a9a;
}

/* A user is a full e-mail address, so break an extreme one instead of scrolling sideways. */
.model-history-user {
	font-size: 12px;
	overflow-wrap: anywhere;
	color: #6a6a6a;
}

/* Current without events of its version. */
.model-history-none {
	padding: 16px 20px;
	font-size: 13px;
	color: #8a8a8a;
}

/* No events at all. */
.model-history-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 48px 20px;
	text-align: center;
	color: #8a8a8a;
}

.model-history-empty .fa {
	font-size: 28px;
	color: #bdbdbd;
}


/*═══════════════════════════════════════════════════════════════════════════ */
/* Model notes panel */
/*═══════════════════════════════════════════════════════════════════════════*/

/* The section body has no padding, so the panel keeps 20px at the sides itself. */

/* A column over the section body: filter and composer on top, the list takes the rest. */
.model-notes-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* All and Current, with the number of notes shown at the right. */
.model-notes-filter {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 20px;
	border-bottom: 1px solid #eeeeee;
}

.model-notes-option {
	padding: 2px 14px;
	border: 1px solid #e3e3e3;
	border-radius: 14px;
	background: #ffffff;
	font-size: 12px;
	color: #474747;
	cursor: pointer;
}

.model-notes-option:hover {
	background: #f5f5f5;
}

.model-notes-option.selected {
	border-color: #474747;
	background: #474747;
	color: #ffffff;
}

.model-notes-count {
	margin-left: auto;
	font-size: 12px;
	color: #8a8a8a;
}

/* The composer: one line until it has the focus, then four lines with Cancel and Add note. */
.model-notes-composer {
	padding: 12px 20px;
	border-bottom: 1px solid #eeeeee;
}

.model-notes-composer-text {
	display: block;
	width: 100%;
	height: 36px;
	padding: 7px 10px;
	border: 1px solid #e3e3e3;
	border-radius: 8px;
	background: #fafafa;
	font-size: 13px;
	line-height: 1.5;
	color: #212121;
	resize: none;
	outline: none;
	transition: height 120ms ease;
}

.model-notes-composer-text::placeholder {
	color: #9a9a9a;
}

.model-notes-composer.open .model-notes-composer-text {
	height: 104px;
	border-color: #bdbdbd;
	background: #ffffff;
	resize: vertical;
}

.model-notes-composer-actions {
	display: none;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
}

.model-notes-composer.open .model-notes-composer-actions {
	display: flex;
}

/* The version a new note goes to. */
.model-notes-hint {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	color: #8a8a8a;
}

/* The pink Add note and Save, the plain Cancel next to them, and the red Delete of the delete question. */
.model-notes-button {
	padding: 5px 14px;
	border: 0;
	border-radius: 6px;
	background: #e91e63;
	font-size: 13px;
	font-weight: 500;
	color: #ffffff;
	cursor: pointer;
}

.model-notes-button:hover {
	background: #d81b60;
}

.model-notes-button:disabled {
	background: #f3b4c9;
	cursor: default;
}

.model-notes-button-plain {
	padding: 5px 12px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	font-size: 13px;
	color: #474747;
	cursor: pointer;
}

.model-notes-button-plain:hover {
	background: #f2f2f2;
}

.model-notes-button-delete {
	padding: 4px 12px;
	border: 0;
	border-radius: 6px;
	background: #d9534f;
	font-size: 12px;
	font-weight: 500;
	color: #ffffff;
	cursor: pointer;
}

.model-notes-button-delete:hover {
	background: #c9302c;
}

/* Only the list scrolls, with the History panel's scrollbar; min-height 0 lets it shrink to scroll. */
.model-notes-list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #e3e3e3 transparent;
}

.model-notes-cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 20px 20px;
}

.model-notes-card {
	padding: 10px 10px 10px 14px;
	border: 1px solid #eeeeee;
	border-radius: 8px;
	background: #ffffff;
}

.model-notes-card:hover {
	border-color: #e0e0e0;
}

.model-notes-card.editing {
	border-color: #bdbdbd;
}

.model-notes-head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.model-notes-author {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 500;
	color: #474747;
}

/* The version of a note; the version the page shows has the darker chip. */
.model-notes-chip {
	min-width: 32px;
	padding: 0 6px;
	border-radius: 4px;
	background: #f0f0f0;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	text-align: center;
	white-space: nowrap;
	color: #6a6a6a;
}

.model-notes-chip.current {
	background: #e0e0e0;
	font-weight: 600;
	color: #212121;
}

/* The negative margins pull the dots into the card's right padding and keep the header as high as its text. */
.model-notes-menu {
	margin: -4px -7px -4px -5px;
}

.model-notes-dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #b0b0b0;
	cursor: pointer;
}

.model-notes-dots:hover,
.model-notes-dots[aria-expanded="true"] {
	background: #f2f2f2;
	color: #212121;
}

/* Two classes deep to beat .structures button i (18px with a margin); the dots have no text beside them. */
.model-notes-menu .model-notes-dots i {
	margin-right: 0;
	font-size: 14px;
}

/* Two classes deep, to win over .dropdown-item of the compiled styles, which load after this file. */
.model-notes-menu .model-notes-menu-delete,
.model-notes-menu .model-notes-menu-delete:hover {
	color: #d9534f;
}

/* pre-line keeps the line breaks of the note. */
.model-notes-text {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.5;
	white-space: pre-line;
	overflow-wrap: anywhere;
	color: #212121;
}

.model-notes-text.folded {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.model-notes-more {
	margin-top: 2px;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 12px;
	color: #e91e63;
	cursor: pointer;
}

.model-notes-more:hover {
	text-decoration: underline;
}

/* The time of the last change with 'edited' after it, or the delete question in its place. */
.model-notes-foot {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: 8px;
	padding-top: 6px;
	border-top: 1px solid #f3f3f3;
	font-size: 11px;
	color: #9a9a9a;
}

/* Its title holds who created and who last changed the note. */
.model-notes-time {
	white-space: nowrap;
	color: #8a8a8a;
}

.model-notes-edited {
	font-style: italic;
}

.model-notes-confirm {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #a94442;
}

.model-notes-confirm span {
	flex: 1;
}

/* Editing: the text becomes a textarea as high as the note, up to about twelve lines. */
.model-notes-editor {
	display: block;
	width: 100%;
	min-height: 64px;
	max-height: 320px;
	margin-top: 8px;
	padding: 6px 8px;
	border: 1px solid #e3e3e3;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.5;
	color: #212121;
	field-sizing: content;
	resize: vertical;
	outline: none;
}

.model-notes-editor:focus {
	border-color: #474747;
}

.model-notes-editor-actions {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	margin-top: 8px;
}

/* Current without notes of its version. */
.model-notes-none {
	font-size: 13px;
	color: #8a8a8a;
}

/* No notes at all. */
.model-notes-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 48px 20px;
	text-align: center;
	color: #8a8a8a;
}

.model-notes-empty .fa {
	font-size: 28px;
	color: #bdbdbd;
}


/*═══════════════════════════════════════════════════════════════════════════ */
/* Model used in panel */
/*═══════════════════════════════════════════════════════════════════════════*/

/* The section body has no padding, so bands and rows reach its edges and keep 20px at the sides themselves. */

/* A column over the section body: the version line on top, the list takes the rest. */
.model-used-in-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Which version the panel is about, with the number of places it is used. */
.model-used-in-context {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border-bottom: 1px solid #eeeeee;
	font-size: 13px;
	color: #474747;
}

.model-used-in-context-text {
	flex: 1;
	min-width: 0;
}

.model-used-in-total {
	font-size: 12px;
	white-space: nowrap;
	color: #8a8a8a;
}

/* Only the list scrolls, with the thin light scrollbar of the History panel. */
.model-used-in-list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #e3e3e3 transparent;
}

/* A band per kind, as the day bands of the History panel. */
.model-used-in-band {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 20px;
	background: #f7f7f7;
	font-size: 12px;
	font-weight: 500;
	color: #474747;
}

.model-used-in-band .fa {
	width: 14px;
	text-align: center;
	color: #8a8a8a;
}

/* Room above every band but the first. */
.model-used-in-row + .model-used-in-band {
	margin-top: 8px;
}

.model-used-in-count {
	min-width: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: #e9e9e9;
	font-size: 11px;
	text-align: center;
	color: #6a6a6a;
}

/* One line per place: the name takes the room, the rest stands at the right; the hover shows it opens. */
.model-used-in-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 20px;
	color: inherit;
	text-decoration: none;
}

.model-used-in-row:hover {
	background: #f5f5f5;
	color: inherit;
	text-decoration: none;
}

.model-used-in-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	color: #212121;
}

.model-used-in-end {
	display: flex;
	flex-shrink: 0;
	align-items: baseline;
	gap: 8px;
}

.model-used-in-end-text {
	font-size: 12px;
	white-space: nowrap;
	color: #8a8a8a;
}

/* The version of a model or enrichment; the version the panel is about has the darker chip. */
.model-used-in-chip {
	min-width: 32px;
	padding: 0 6px;
	border-radius: 4px;
	background: #f0f0f0;
	font-size: 11px;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	text-align: center;
	white-space: nowrap;
	color: #6a6a6a;
}

.model-used-in-chip.current {
	background: #e0e0e0;
	font-weight: 600;
	color: #212121;
}

/* Used nowhere. */
.model-used-in-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 48px 28px;
	text-align: center;
	color: #8a8a8a;
}

.model-used-in-empty .fa {
	font-size: 28px;
	color: #bdbdbd;
}