:root {
	--tocloco-blue: #3041b0;
	--jse-theme-color: #777777;
	--sidebar-gray: #ebebeb;
	--text: #555555;
	--dhx-color-primary: #3041b0;
	--wx-kanban-header-height: 30px !important;
	--ag-font-size: 12px !important;

	--uiGrey: #c9d3cd25;
	--uiGreyBorder: #e5ebe725;

	--uiGreen: #17c95825;
	--uiGreenBorder: #b6ecca4f;

	--uiAmber: #ffe19b7a;
	--uiAmberBorder: #ffe19b;

	--uiRed: #c9174c66;
	--uiRedBorder: #d64f7766;

	--uiCritical: rgba(127, 29, 29, 0.55);
	--uiCriticalBorder: rgba(153, 27, 27, 1);

	/*
	--panelHeader: #d2d2d2;
	--panelHeaderTexr: #333333;
	*/

	--panelHeader: #white;
	--panelHeaderTexr: #333333;

	--dhx-z-index-overlay: 25000;

	--uiPurple: rgba(139, 92, 246, 0.15);
	--uiPurpleBorder: rgba(139, 92, 246, 0.25);

	--uiBlue: rgba(0, 0, 200, 0.1);
	--uiBlueBorder: rgba(0, 0, 200, 0.15);
}
.mtpYearTotalHeader {
	background-color: var(--uiBlue) !important;
}
:root {

	--uiBlueProjectSidebar: #0000c805;
	--uiRedProjectSidebar: rgba(201, 23, 76, 0.03);
	--uiAmberProjectSidebar: rgba(255, 225, 155, 0.1);
	--uiGreenProjectSidebar: rgba(182, 236, 202, 0.15);
	--uiGreyProjectSidebar: rgba(229, 235, 231, 0.2);
}
.toolbarTitlePadding {
	padding-top: 9px;
}

.jse-menu.svelte-pf7s2l {
	background-color: var(--tocloco-blue) !important;
}

.sidebarBackgroundBlue {
	background-color: var(--uiBlueProjectSidebar);
}
.sidebarBackgroundGreen {
	background-color: var(--uiGreenProjectSidebar);
}
.sidebarBackgroundAmber {
	background-color: var(--uiAmberProjectSidebar);
}
.sidebarBackgroundRed {
	background-color: var(--uiRedProjectSidebar);
}
.sidebarBackgroundGrey {
	background-color: var(--uiGreyProjectSidebar);
}

.colorRed * {
	color: var(--uiRed);
}

.colorAmber * {
	color: var(--uiAmberBorder);
}

/* Vertical (rotated) column headers on the RACI grids.
   Retargeted from AG: Lattice puts the header text straight into .lat-header-label and
   has no inner text element, so the writing-mode goes on the label itself. */
.rotate-header .lat-header-label {
	height: 100%;
	padding: 0 !important;
	width: 55px;
	writing-mode: vertical-lr;
	line-height: 2em;
}

.toolbarChrome {
	background-color: #f0f0f0;
}

.header-leadership {
	background-color: #f2da9d;
}
.header-team {
	background-color: #a5cced;
}
.header-subteams {
	background-color: #bfee9b;
}
.header-external {
	background-color: #f2b9e8;
}

.uiGreyCell {
	background-color: var(--uiGrey);
	box-sizing: border-box;
	border-color: var(--uiGreyBorder);
	border-width: 1px;
}

.uiGreenCell {
	background-color: var(--uiGreen);
	box-sizing: border-box;
	border-color: var(--uiGreenBorder);
	border-width: 1px;
}

.uiAmberCell {
	background-color: var(--uiAmber);
	box-sizing: border-box;
	border-color: var(--uiAmberBorder);
	border-width: 1px;
}

.uiRedCell {
	background-color: var(--uiRed);
	box-sizing: border-box;
	border-color: var(--uiRedBorder);
	border-width: 1px;
	color: white;
}



/* scroll overrides for chrome/windows */
/* kanban scrolling overrides */
.wx-list-wrapper {
	overflow: auto !important;
}

.wx-list-wrapper::-webkit-scrollbar {
	width: 8px;
}

.wx-list-wrapper::-webkit-scrollbar-button {
	height: 0px;
}

.wx-list-wrapper::-webkit-scrollbar-thumb {
	background: #bbbbbb;
}

/* kanban container horizonal scrollbar */
.wx-content-wrapper::-webkit-scrollbar {
	height: 16px;
}

.wx-content-wrapper::-webkit-scrollbar-thumb {
	background: #bbbbbb;
}

.scroll-view-wrapper,
.scroll-view {
	overflow: auto !important;
}

/* ag grid scroll overrides*/


/* intended for the sidebar menu - check if affecting anything else */
.scroll-view::-webkit-scrollbar {
	display: none;
}


.wx-header.svelte-o226r {
	height: 40px !important;
	min-height: 40px !important;
}

.highlightbom .dhx_grid-cell {
	background-color: #eceef2;
}

.bom-subcomp-row {
	font-style: italic;
	background-color: #f7f8fa;
}

.highlightUpdateDF {
	background-color: #bdceef !important;
}
.transitionUpdateDF {
	transition: background-color 1000ms linear;
}


.alertbar {
	background-color: red;
	color: white;
	padding-left: 20px;
	font-weight: bold;
}

.messagebar {
	background-color: rgba(212, 212, 212);
	/*color: white;*/
	padding-left: 20px;
	/*font-weight: bold;*/
}

.messagebar .dhx_layout-cell-inner_html {
	display: flex;
	align-items: center;
}

.messagebar .dhx_layout-cell-inner_html span {
	flex-grow: 1;
}

.messagebar .dhx_layout-cell-inner_html i {
	cursor: pointer;
	margin-right: 20px;
}

body {
	position: relative;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	margin: 0;
}
#body {
	position: relative;
	height: 100%;
}

/*
#body *::-webkit-scrollbar {
	display: none;
}
*/

.appframe > .scroll-view::-webkit-scrollbar,
.bottombar *::-webkit-scrollbar,
.dashwidget *::-webkit-scrollbar,
.mainsidebar *::-webkit-scrollbar,
.toolbarTop *::-webkit-scrollbar,
.functionToolbar *::-webkit-scrollbar {
	/*display: none;*/
}

/*
#body * {
	scrollbar-width: none;
}
*/

.appframe > .scroll-view,
.appframe,
.bottombar *,
.dashwidget *,
.mainsidebar *,
.toolbarTop *,
.functionToolbar * {
	/*scrollbar-width: none;*/
}


#overlayObject {
	position: absolute;
	top: 0;
	left: 0;
	/*width: calc(100vw - 200px);*/
	bottom: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 9999;
	display: none;
}

#overlayObject .roundedTopLeft {
	border-top-left-radius: 10px;
}

#overlayObject2 {
	position: absolute;
	top: 0;
	left: 0;
	/*width: calc(100vw - 200px);*/
	bottom: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 10010;
	display: none;
}

#overlayObject2 .roundedTopLeft {
	border-top-left-radius: 10px;
}

#overlay {
	position: absolute;
	top: 0;
	left: 0;
	/* width: 100vw; */
	bottom: 0;
	right: 0;
	display: none;
	z-index: 10000;
	background-color: rgba(255, 255, 255, 0);
	backdrop-filter: blur(3px); /* Adjust the blur intensity */
	-webkit-backdrop-filter: blur(3px);
	transition:
		background-color 0.5s ease,
		backdrop-filter 0.5s ease;
}

#overlay.active {
	background-color: rgba(0, 0, 0, 0.4);
}

#overlay .dhx_widget {
	/*left: 100vw;*/
	transition: left 0.5s ease;
}
#overlayObjectSlide {
	position: absolute;
	top: 0;
	left: 120vw;
	bottom: 0;
	right: 0;
	z-index: 9999;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	transition:
		background-color 0.5s ease,
		backdrop-filter 0.5s ease;
}

#overlayObjectSlide2 {
	position: absolute;
	top: 0;
	left: 120vw;
	bottom: 0;
	right: 0;
	z-index: 10005;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	transition:
		background-color 0.5s ease,
		backdrop-filter 0.5s ease;
}

#overlayObjectSlide3 {
	position: absolute;
	top: 0;
	left: 120vw;
	bottom: 0;
	right: 0;
	z-index: 10006;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	transition:
		background-color 0.5s ease,
		backdrop-filter 0.5s ease;
}

#overlaySlide {
	position: absolute;
	top: 0;
	left: 150vw;
	bottom: 0;
	right: 0;
	z-index: 10000;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	transition:
		background-color 0.5s ease,
		backdrop-filter 0.5s ease;
}

#overlayObjectSlide3.active,
#overlayObjectSlide2.active,
#overlayObjectSlide.active,
#overlaySlide.active {
	background-color: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

#overlayObjectSlide3 .slideIn,
#overlayObjectSlide2 .slideIn,
#overlayObjectSlide .slideIn,
.slideInObject,
#overlaySlide .slideIn {
	left: 120vw;
	transition: left 0.5s ease;
}

#overlay2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 120vw;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 10001;
	display: none;
}

form {
	height: 100%;
}

.sidebarIcon span {
	display: inline-block;
	height: 100px;
	width: 100px;
	background-color: var(--tocloco-blue);
	color: white;
	font-size: 60px;
	text-align: center;
	line-height: 100px;
}

/*
.dhx_button {
	border-radius: 20px;
}

.dhx_grid-body {
}
*/

.dhx_grid-content {
	border-color: rgba(0, 0, 0, 0);
}

/*
.dhx_grid-body .dhx_header-wrapper {
	display: none;
}
*/

.dhx_grid-row {
	border-bottom-color: rgba(0, 0, 0, 0);
}

.dhx_grid-cell {
	border-left-color: rgba(0, 0, 0, 0);
	border-right-color: rgba(0, 0, 0, 0);
}

.appframe {
	background-color: #f6f4fb;
}

.backgroundTransparent,
.backgroundTransparent .dhx_layout {
	background-color: rgba(0, 0, 0, 0);
}

.copyPermissionsApplyBtn .dhx_button {
	border-radius: 6px;
	min-width: 100px;
}

.background {
	background-color: #f6f4fb;
}

.rounded {
	border-radius: 20px;
}

.borderBottom {
	border-bottom: 1px solid #f0f0f0;
}

.borderTop {
	border-top: 1px solid #f0f0f0;
}

.borderRight {
	border-right: 1px solid #f0f0f0;
}

.borderLeft,
.appBackground {
	background-image: url(assets/images/login_background.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.loginFormStyles {
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

.loginFormStyles img {
	width: 100%;
}

/* Mobile login: single full-width column, form vertically centred */
.loginFormMobile {
	display: flex;
	align-items: center;
	background: #ffffff;
}

.loginFormMobile .loginFormStyles {
	max-width: 420px;
}

.loginFormMobile .logo {
	text-align: center;
}

.loginFormMobile .logo img {
	width: auto;
	max-width: 220px;
}

.toolbarTop {
	background: var(--tocloco-blue);
	color: white;
	height: 50px !important;
}

.toolbarTop * {
	color: white;
}

.toolbarTop ul {
	padding-top: 9px !important;
	padding-bottom: 9px !important;
}
.topbar > .dhx_layout-cell {
	background: var(--tocloco-blue);
}

.bottombar,
.bottombar * {
	background-color: rgb(35, 47, 62);
	color: white;
	line-height: 24px;
	font-size: 12px;
	font-weight: 600;
	padding-right: 10px;
	text-align: right;
}

.sidebar {
	border-right: solid 1px #b0b8bb;
}

.sidebar .dhx_sidebar {
	background-color: white;
	padding: 10px 7px 10px 7px;
}

.sidebar .dhx_sidebar__item {
	margin-bottom: 0;
}

.sidebar .dhx_sidebar button {
	padding: 6px;
}

.sidebar .dhx_sidebar__item .dhx_sidebar-button__icon {
	color: rgb(36, 36, 36);
}

.sidebar .dhx_sidebar__item .dhx_sidebar-button__icon::before {
	font-size: 14px;
	display: inline-block;
	width: 20px;
}

/* Panel count badge (panelCount): nudge further right in the collapsed panel icon menu
   so it sits on the icon's right edge rather than overlapping the glyph. */
.sidebar .dhx_sidebar--minimized .dhx_sidebar-button__count {
	right: -4px;
}

.sidebar li {
	margin-bottom: 8px;
}

.sidebar2 .dhx_sidebar {
	background-color: white;
}

.sidebar2 .dhx_layout-cell-header {
	background: white;
}

.dhx_grid-cell__content img {
	height: 30px;
}

.channelItem {
	padding: 10px;
	cursor: pointer;
}

.channelItem img {
	width: 100%;
}

.channelItem .channelHeader {
	display: flex;
	flex-direction: row;
}

.channelItem .channelHeader img {
	width: 36px;
	height: 36px;
	margin-right: 20px;
}

.channelItem .channelHeader p {
	margin-top: 0;
}

.channelItem .channelHeader p span {
	font-weight: bold;
}

.mediaHolder {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.mediaHolder img {
	object-fit: cover;
	overflow-clip-margin: content-box;
}

.sidebar2 h3 {
	font-size: 26px;
	line-height: 38px;
	margin-top: 10px;
}

.dhx_window-header,
.dhx_window-header * {
	background-color: var(--tocloco-blue);
	color: white;
}

.dhx_window-header .dxi-close::before {
	color: white;
}

.dhx_window-content {
	padding: 20px;
}

.dhx_grid-header-cell,
.dhx_header-spans .dhx_grid-header-cell {
	background-color: white;
}
.dhx_grid-header-cell:hover {
	background-color: rgb(240, 240, 240);
}
/*
.dhx_grid-header-cell * {
	color: white;
}
*/

.dhx_grid-body .dhx_grid-cell {
	font-size: 14px;
}

.ajs-header {
	font-family: 'Roboto';
	color: white;
	background-color: var(--tocloco-blue) !important;
}

.ajs-content {
	font-family: 'Roboto';
}

.hoverrows .dhx_data-wrap .dhx_grid-row:hover {
	background-color: #f4f4f4;
}

.dhx_layout-cell-header {
	border-bottom: none;
}

.headerBlue .dhx_layout-cell-header {
	background-color: var(--tocloco-blue);
	padding: 5px 5px 5px 8px;
}

.dhx_layout-cell-header h3 {
	font-size: 18px;
	padding: 10px 10px 0 10px;
	margin: 0;
	line-height: 24px;
}

.ajs-message {
	font-family: 'Roboto';
	color: white;
	position: relative;
	padding-right: 32px !important;
}
/* Visual close affordance — AlertifyJS notifications are click-to-dismiss
   by default, so the ✕ is presentational; clicking anywhere on the toast
   (including the icon) dismisses it. */
.ajs-message::after {
	content: '\00d7';
	position: absolute;
	top: 6px;
	right: 10px;
	font-size: 20px;
	line-height: 1;
	opacity: 0.7;
	pointer-events: none;
}
.ajs-message:hover::after {
	opacity: 1;
}

/* Inline action buttons inside toast notifications (toastConfirm helper). */
.dfToastBody {
	margin-bottom: 8px;
}
.dfToastActions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.dfToastBtn {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 4px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
}
.dfToastBtn:hover {
	background: rgba(255, 255, 255, 0.3);
	border-color: rgba(255, 255, 255, 0.6);
}
.dfToastBtn-primary {
	background: #fff;
	color: #0f172a;
	border-color: #fff;
}
.dfToastBtn-primary:hover {
	background: #f1f5f9;
}

/* TimeSummary row type — metric cards + by-contributor strip. */
.dfTimeSummary-root {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 10px;
}
.dfTimeSummary-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.dfTimeSummary-card {
	background: #f5f4ef;
	border-radius: 10px;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.dfTimeSummary-cardValue {
	font-size: 26px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.1;
}
.dfTimeSummary-cardLabel {
	font-size: 13px;
	color: #6b7280;
}
.dfTimeSummary-billable {
	color: #3f6212;
}
.dfTimeSummary-by {
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 14px 16px;
}
.dfTimeSummary-byLabel {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: #6b7280;
	margin-bottom: 10px;
}
.dfTimeSummary-byGrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.dfTimeSummary-contributor {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.dfTimeSummary-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}
.dfTimeSummary-avatarInitials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #dbeafe;
	color: #1e3a8a;
	font-size: 12px;
	font-weight: 600;
}
.dfTimeSummary-contributorBody {
	min-width: 0;
	flex: 1;
}
.dfTimeSummary-contributorName {
	font-size: 13px;
	font-weight: 600;
	color: #111827;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dfTimeSummary-contributorMeta {
	font-size: 12px;
	color: #6b7280;
}
.dfTimeSummary-active {
	color: #15803d;
	font-weight: 600;
}
.dfTimeSummary-active::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #16a34a;
	margin-right: 4px;
	vertical-align: middle;
}
@media (max-width: 900px) {
	.dfTimeSummary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dfTimeSummary-byGrid { grid-template-columns: 1fr; }
}

/* ─────────────────────────── interactionFeed ─────────────────────────── */
.dfIFeed-root {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 10px;
}
.dfIFeed-composer {
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #ffffff;
	overflow: hidden;
}
.dfIFeed-tabs {
	display: flex;
	border-bottom: 1px solid #e5e7eb;
	background: #f9fafb;
}
.dfIFeed-tab {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	color: #4b5563;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
}
.dfIFeed-tab i { font-size: 12px; }
.dfIFeed-tab:hover { background: #f3f4f6; }
.dfIFeed-tab--active {
	color: #1f2937;
	border-bottom-color: var(--tocloco-blue, #3b82f6);
	background: #ffffff;
}
.dfIFeed-host {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.dfIFeed-host input,
.dfIFeed-host textarea,
.dfIFeed-host select {
	width: 100%;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 13px;
	font-family: inherit;
	color: #111827;
	background: #ffffff;
	outline: none;
	box-sizing: border-box;
}
.dfIFeed-host input:focus,
.dfIFeed-host textarea:focus,
.dfIFeed-host select:focus {
	border-color: var(--tocloco-blue, #3b82f6);
	box-shadow: 0 0 0 2px rgba(48, 65, 176, 0.12);
}
.dfIFeed-host textarea {
	resize: vertical;
	min-height: 80px;
}
.dfIFeed-callMeta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	align-items: stretch;
}
.dfIFeed-callMeta .dfIFeed-outcome {
	min-width: 0;
}
.dfIFeed-callMeta .dfIFeed-outcome .dhx_combobox-input-box {
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	min-height: 36px;
}
.dfIFeed-replyTools {
	display: flex;
	gap: 4px;
	margin-top: -4px;
}
.dfIFeed-toolBtn {
	background: transparent;
	border: 1px solid transparent;
	color: #6b7280;
	padding: 4px 8px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
}
.dfIFeed-toolBtn:hover { background: #f3f4f6; color: #111827; }
.dfIFeed-actions {
	display: flex;
	justify-content: flex-end;
	padding: 8px 12px 12px;
}
.dfIFeed-send {
	background: var(--tocloco-blue, #3b82f6);
	color: #ffffff;
	border: none;
	border-radius: 6px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
}
.dfIFeed-send:hover { background: #2a369e; }
.dfIFeed-send[disabled],
.dfIFeed-send--sending { opacity: 0.7; cursor: wait; }

/* Stream */
.dfIFeed-stream {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.dfIFeed-streamEmpty {
	color: #9ca3af;
	font-size: 13px;
	padding: 12px;
	text-align: center;
}
.dfIFeed-card {
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 12px 14px;
	background: #ffffff;
}
.dfIFeed-card--note  {
	background: #fffbeb;
	border-color: #fde68a;
}
.dfIFeed-card--email { border-color: #dbeafe; }
.dfIFeed-card--call  { border-color: #d1fae5; }
.dfIFeed-cardHeader {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
.dfIFeed-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}
.dfIFeed-avatar--initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #dbeafe;
	color: #1e3a8a;
	font-size: 11px;
	font-weight: 600;
}
.dfIFeed-cardWho { min-width: 0; flex: 1; }
.dfIFeed-cardName {
	font-size: 13px;
	font-weight: 600;
	color: #111827;
}
.dfIFeed-cardMeta {
	font-size: 11px;
	color: #6b7280;
	margin-top: 1px;
}
.dfIFeed-cardSubject {
	font-size: 13px;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 4px;
}
.dfIFeed-cardBody {
	font-size: 13px;
	color: #374151;
	line-height: 1.5;
	word-break: break-word;
}
.dfIFeed-cardBody--clamped {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.dfIFeed-cardBody--open {
	display: block;
}
.dfIFeed-expand {
	margin-top: 6px;
	background: transparent;
	border: none;
	color: #4b5563;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
}
.dfIFeed-expand:hover { color: #111827; }
.dfIFeed-expand i { transition: transform 150ms ease; font-size: 10px; }
.dfIFeed-card--note .dfIFeed-cardBody { color: #78350f; }
.dfIFeed-cardPills {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}
.dfIFeed-cardPills span {
	background: #f3f4f6;
	color: #374151;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
}
.dfIFeed-event {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #6b7280;
	font-size: 12px;
	padding: 4px 14px;
}
.dfIFeed-event i { color: #9ca3af; }
.dfIFeed-eventAgo { margin-left: auto; color: #9ca3af; font-size: 11px; }

/* Original message — pinned at the top, distinct from regular cards. */
.dfIFeed-original {
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 12px 14px;
	background: #f9fafb;
}
.dfIFeed-original .dfIFeed-cardHeader { margin-bottom: 8px; }

/* ── interactionFeed: activity presentation (feedMode: "activity") ── */
.dfIFeed-root--activity { gap: 14px; }
.dfIFeed-actHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.dfIFeed-actHeader .dfFormHeader { margin: 0; }
.dfIFeed-filterToggle {
	display: inline-flex;
	background: #f1f5f9;
	border-radius: 999px;
	padding: 2px;
	flex-shrink: 0;
}
.dfIFeed-filterBtn {
	border: none;
	background: transparent;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	color: #64748b;
	cursor: pointer;
	font-family: inherit;
}
.dfIFeed-filterBtn--active {
	background: #ffffff;
	color: #111827;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.dfIFeed-stream--scroll {
	max-height: 540px;
	overflow-y: auto;
	gap: 0;
}
.dfIFeed-composer--bottom { margin-top: 2px; }

/* flat activity rows */
.dfIFeed-actRow {
	display: flex;
	gap: 10px;
	padding: 12px 2px;
	border-bottom: 1px solid #f1f5f9;
}
.dfIFeed-actRow:last-child { border-bottom: none; }
.dfIFeed-actIcon {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
}
.dfIFeed-actIcon--slate  { background: #f1f5f9; color: #64748b; }
.dfIFeed-actIcon--blue   { background: #dbeafe; color: #2563eb; }
.dfIFeed-actIcon--green  { background: #dcfce7; color: #16a34a; }
.dfIFeed-actIcon--red    { background: #fee2e2; color: #dc2626; }
.dfIFeed-actIcon--amber  { background: #fef3c7; color: #d97706; }
.dfIFeed-actIcon--purple { background: #ede9fe; color: #7c3aed; }
.dfIFeed-actRow .dfIFeed-avatar { width: 26px; height: 26px; }
.dfIFeed-actMain { flex: 1; min-width: 0; }
.dfIFeed-actLine {
	font-size: 13px;
	color: #374151;
	line-height: 1.45;
}
.dfIFeed-actLine strong { font-weight: 600; color: #111827; }
.dfIFeed-actStrong { font-weight: 600; color: #111827; }
.dfIFeed-actVerb { color: #6b7280; }
.dfIFeed-actAgo { color: #9ca3af; font-size: 12px; }
.dfIFeed-actBody {
	margin-top: 3px;
	font-size: 13px;
	color: #374151;
	line-height: 1.5;
	word-break: break-word;
}
.dfIFeed-actBody:empty { display: none; }
.dfIFeed-actBody p { margin: 0; }
.dfIFeed-actSubject { font-weight: 600; color: #1f2937; }

/* composer action bar — voice / attach buttons */
.dfIFeed-iconBtn {
	background: transparent;
	border: none;
	color: #6b7280;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 15px;
	font-family: inherit;
}
.dfIFeed-iconBtn:hover { background: #f3f4f6; color: #111827; }
.dfIFeed-mic { color: #dc2626; }
.dfIFeed-mic--on {
	background: #fee2e2;
	color: #dc2626;
	animation: dfIFeedPulse 1.2s ease-in-out infinite;
}
@keyframes dfIFeedPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.dfIFeed-actionsSpacer { flex: 1; }
.dfIFeed-actions { align-items: center; gap: 4px; }
.dfIFeed-body--auto { min-height: 44px; resize: none; }

/* @mention and #reference pills */
.dfIFeed-mention {
	background: #eef2ff;
	color: #4338ca;
	border-radius: 4px;
	padding: 0 4px;
	font-weight: 500;
}
.dfIFeed-ref {
	background: #f1f5f9;
	color: #2563eb;
	border-radius: 4px;
	padding: 0 4px;
	font-weight: 500;
	cursor: pointer;
}
.dfIFeed-ref:hover { background: #e2e8f0; }

/* ── BACKLOG Overview cards ── */
.dfOvCard {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 16px;
	margin: 5px 0 16px;
}
.dfOvCard-head {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 10px;
}
.dfOvCard-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #64748b;
}
.dfOvCard-count { font-size: 12px; color: #94a3b8; }
.dfOvCard-spacer { flex: 1; }
.dfOvCard-add {
	border: none;
	background: transparent;
	color: #2563eb;
	cursor: pointer;
	font-size: 14px;
	padding: 2px 6px;
	border-radius: 6px;
}
.dfOvCard-add:hover { background: #eff6ff; }

.dfOvProgress {
	height: 6px;
	background: #f1f5f9;
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 12px;
}
.dfOvProgress-fill {
	height: 100%;
	border-radius: 999px;
	background: #94a3b8;
	transition: width 150ms ease;
}
.dfOvProgress-fill--success { background: #16a34a; }
.dfOvProgress-fill--warn { background: #f59e0b; }

.dfOvSubtask {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 2px;
	border-bottom: 1px solid #f1f5f9;
}
.dfOvSubtask:last-child { border-bottom: none; }
.dfOvSubtask-check { width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; }
.dfOvSubtask-title {
	flex: 1;
	font-size: 13px;
	color: #1f2937;
	cursor: pointer;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dfOvSubtask-title:hover { color: #2563eb; }
.dfOvSubtask-title--done { text-decoration: line-through; color: #94a3b8; }
.dfOvSubtask-pts {
	font-size: 11px;
	font-weight: 600;
	color: #475569;
	background: #f1f5f9;
	border-radius: 999px;
	padding: 1px 7px;
	flex-shrink: 0;
}
.dfOvSubtask-addrow { margin-top: 8px; }
.dfOvSubtask-addinput {
	width: 100%;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 7px 9px;
	font-size: 13px;
	font-family: inherit;
	box-sizing: border-box;
}
.dfOvEmpty {
	font-size: 13px;
	color: #94a3b8;
	font-style: italic;
	padding: 8px 2px;
}
.dfOvAvatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}
.dfOvAvatar--initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #dbeafe;
	color: #1e3a8a;
	font-size: 9px;
	font-weight: 600;
}
.dfOvAvatar--none {
	display: inline-block;
	background: #f1f5f9;
	border: 1px dashed #cbd5e1;
	box-sizing: border-box;
}
.dfOvDod-foot {
	margin-top: 10px;
	font-size: 11px;
	color: #94a3b8;
	font-style: italic;
}

/* Block popover + WSJF info */
.dfBlockPop { display: flex; flex-direction: column; gap: 10px; }
.dfBlockPop-reason {
	width: 100%;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 13px;
	font-family: inherit;
	resize: vertical;
	box-sizing: border-box;
}
.dfBlockPop-btn {
	align-self: flex-end;
	background: #f59e0b;
	color: #ffffff;
	border: none;
	border-radius: 6px;
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
}
.dfBlockPop-btn:hover { background: #d97706; }
.dfWsjfInfo p { margin: 0 0 8px; font-size: 13px; }
.dfWsjfInfo-formula {
	font-family: monospace;
	background: #f1f5f9;
	padding: 8px 10px;
	border-radius: 6px;
}

/* Activity feed sits as a card on the Overview */
.dfIFeed-root--activity {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 16px;
}

.networkchooserView .dhx_dataview-item {
	cursor: pointer;
}

.networkchooserView .dhx_dataview-item:hover {
	background-color: #f4f4f4;
}

.dhx_sidebar__item button span {
	display: inline-block;
	width: 30px;
}

.functionToolbar span {
	font-weight: 300;
}

/* Realtime "Item Updated" notice — complex editor object toolbar */
.liveUpdateNotice span {
	display: inline-block;
	color: var(--tocloco-blue, #3041b0) !important;
	background: #ffffff !important;
	border-radius: 6px;
	padding: 4px 10px;
}

.sideForm label {
	text-align: left !important;
	font-weight: 300;
}

/* Fields with a help icon render the label as a flex row, so text-align alone
   doesn't left-align them — force flex-start, and left-align every descendant
   so help and non-help labels share the same start edge. */
.sideForm label {
	justify-content: flex-start !important;
}
.sideForm label,
.sideForm label * {
	text-align: left !important;
}

.sideForm label .dhx_label {
	display: block;
}

.noHeader {
	.dhx_header-wrapper {
		display: none;
	}
}

.gridHighlight .dhx_grid-row:hover {
	background-color: #f2f2f2;
	cursor: pointer;
}

.gridHighlight .dhx_grid-cell {
	cursor: pointer;
}

.tasks_grid-template {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.tasks_grid-status {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	margin-right: 6px;
	font-size: var(--dhx-font-size-small);
}
.tasks_grid-status--normal,
.tasks_grid-status--normal:hover {
	background-color: var(--dhx-color-success);
}
.tasks_grid-status--high,
.tasks_grid-status--high:hover {
	background-color: var(--dhx-color-danger);
}
.tasks_grid-status--low,
.tasks_grid-status--low:hover {
	background-color: var(--dhx-color-primary);
}

.hideHeader .dhx_header-wrapper {
	display: none;
}

.wx-todo_popup li:first-child {
	display: none;
}

.wx-todo_button-add,
.wx-todo_popup li:nth-child(4),
.wx-todo_popup li:nth-child(5),
.wx-todo_popup li:nth-child(7),
.wx-todo_popup li:nth-child(9) {
	display: none;
}

.layoutMarginLeft {
	margin-left: 20px;
}

.layoutMarginTop {
	margin-top: 20px;
}

.layoutMarginBottom {
	margin-bottom: 20px;
}

.layoutBorder {
	border: 1px solid #dddddd;
}

.colorLinkedin,
.dhx_combobox-tag .fa-linkedin,
.dhx_combobox-options-wrapper .fa-linkedin {
	color: #0077b5;
}

/* FullCalendar overrides */
.fc {
	--fc-border-color: #e5e7eb;
	--fc-today-bg-color: rgba(99, 102, 241, 0.04);
	--fc-page-bg-color: #fff;
	--fc-neutral-bg-color: #f9fafb;
}

.fc .fc-toolbar {
	padding: 16px 8px;
}

h2.fc-toolbar-title {
	font-family: 'Roboto', 'Arial', 'Tahoma', 'Verdana', sans-serif;
	font-feature-settings: 'liga';
	font-size: 18px !important;
	font-weight: 600;
	color: #1e293b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.fc-col-header-cell-cushion {
	font-family: 'Roboto', 'Arial', 'Tahoma', 'Verdana', sans-serif;
	font-feature-settings: 'liga';
	font-size: 13px !important;
	font-weight: 600;
	color: #6366f1;
	text-transform: uppercase;
	padding: 10px 4px !important;
}

.fc .fc-button {
	background-color: #fff !important;
	border: 1px solid #d1d5db !important;
	color: #374151 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	padding: 6px 14px !important;
	border-radius: 6px !important;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
	text-transform: lowercase !important;
}

.fc .fc-button:hover {
	background-color: #f3f4f6 !important;
	border-color: #9ca3af !important;
}

.fc .fc-button-active {
	background-color: #f0f0ff !important;
	border-color: #6366f1 !important;
	color: #4338ca !important;
}

.fc .fc-button-group > .fc-button {
	border-radius: 0 !important;
}

.fc .fc-button-group > .fc-button:first-child {
	border-radius: 6px 0 0 6px !important;
}

.fc .fc-button-group > .fc-button:last-child {
	border-radius: 0 6px 6px 0 !important;
}

.fc .fc-prev-button,
.fc .fc-next-button {
	padding: 6px 10px !important;
}

.fc .fc-prev-button {
	border-radius: 6px 0 0 6px !important;
}

.fc .fc-next-button {
	border-radius: 0 6px 6px 0 !important;
	border-left: none !important;
}

.fc .fc-daygrid-day-frame {
	min-height: 120px;
}

.fc-daygrid-day-events {
	padding: 4px;
}

.fc .fc-daygrid-event {
	border: none !important;
	background: none !important;
	margin: 0 0 4px 0 !important;
}

.fc .fc-daygrid-event .fc-event-main {
	padding: 0;
}

/* Scheduled post cards */
.scheduledPost {
	width: 100%;
	padding: 10px 12px;
	font-size: 13px;
	background-color: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	transition: box-shadow 0.15s, border-color 0.15s;
	cursor: pointer;
}

.scheduledPost:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	border-color: #c7d2fe;
}

.scheduledPost > div {
	overflow: hidden;
}

.scheduledPost .channel {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	line-height: 1.4;
}

.scheduledPost .channel i {
	font-size: 14px;
}

.scheduledPost .postChannel {
	font-weight: 600;
	color: #1e293b;
	margin-bottom: 4px;
}

.scheduledPost .postContent {
	color: #475569;
	font-size: 13px;
	line-height: 1.4;
	margin: 6px 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.scheduledPost .postStatus {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 500;
	margin: 6px -12px -10px -12px;
	padding: 6px 12px;
	border-top: 1px solid #f1f5f9;
	border-radius: 0 0 8px 8px;
	overflow: visible;
}

.scheduledPost .postMedia img {
	width: 100%;
	border-radius: 6px;
	margin: 6px 0;
}

.colorPositive {
	color: #16a34a;
}

.colorNegative {
	color: #dc2626;
}

.scheduledPost .statusPosted {
	color: #16a34a;
	background: #f0fdf4;
	border-top-color: #bbf7d0;
}

.scheduledPost .statusScheduled {
	color: #2563eb;
	background: #eff6ff;
	border-top-color: #bfdbfe;
}

.scheduledPost .statusFailed {
	color: #dc2626;
	background: #fef2f2;
	border-top-color: #fecaca;
}

.scheduledPost .statusProcessing {
	color: #d97706;
	background: #fffbeb;
	border-top-color: #fde68a;
}

.scheduledPost .statusDraft {
	color: #6b7280;
	background: #f9fafb;
	border-top-color: #e5e7eb;
}

.scheduledPost .statusDefault {
	color: #6b7280;
}

.scheduledPost .postStatus .postTime {
	margin-left: auto;
}

.scheduledPost .postMetrics {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	font-weight: 500;
	padding: 5px 12px 6px 12px;
	margin: 0 -12px -10px -12px;
	border-radius: 0 0 8px 8px;
}

.scheduledPost .postMetrics.statusPosted {
	border-top: none;
	padding-top: 0;
}

.scheduledPost .postStatus.statusPosted {
	border-radius: 0;
	margin-bottom: 0;
	padding-bottom: 4px;
}

.scheduledPost .postMetric {
	display: flex;
	align-items: center;
	gap: 4px;
}

.scheduledPost .postMetric i {
	font-size: 11px;
}

/*
.wx-kanban .wx-row .wx-content {	
	flex-grow: 1;
	height: calc(100% - 70px);
	align-self: stretch;
}
.wx-content {
	height: 100% !important;
	max-content: auto;
}
.wx-content-wrapper > .wx-content,
.wx-content {
	height: 100% !important;
	
}
*/

.wx-kanban .wx-header {
	padding: 0;
}
.wx-kanban .wx-column {
	margin-left: 0 !important;
	padding: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.wx-kanban > .wx-content-wrapper > .wx-content {
	height: 100%;
}

.wx-kanban .wx-collapse-icon {
	display: none;
}

.wx-kanban .wx-header .wx-label {
	background-color: var(--tocloco-blue);
	color: white;
	margin: 0;
	padding: 0 10px 0 10px;
}

.wx-kanban .wx-header .wx-label .wx-menu {
	display: none;
}

.wx-controls-wrapper {
	display: none !important;
}

.wx-card {
	margin: 5px 0 0 0 !important;
	/*
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
	*/
	overflow: hidden;
}

.kanbanLabelContainer {
	display: flex;
	flex-direction: row;
	padding: 7px;
	padding-top: 0;
}

.kanbanLabelContainer > div {
	width: 30px;
}
.kanbanLabelContainer > p {
	margin: 0;
	font-size: 13px;
}

.kanbanProjectContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.kanbanProjectContainer div:first-child {
	flex-grow: 1;
}

.kanbanDateContainer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0 7px 7px 7px;
}

.kanbanDateContainer > div:nth-child(2) {
	font-size: 10px;
}

.kanbanSprint {
	margin-top: 5px;
	margin-bottom: 5px;
	background-color: lightgrey;
	border-radius: 3px;
	width: fit-content;
	padding: 3px 6px 3px 6px;
}

.overdueSprint {
	background-color: red;
	color: white;
}

/*
.wx-row {
	flex-grow: 1;
}

.wx-kanban .wx-column: {
	display: flex;
}

.wx-kanban .wx-list-wrapper {
	display: flex; flex-direction: column; flex-grow:1; height: 100%;	
	overflow-y: scroll;
	height: calc(100% - 100px);
}
*/

.wx-row.svelte-30nbk4 {
	height: calc(100% - 0px);
}

.wx-content.svelte-30nbk4 {
	height: calc(100% - 0px);
}

.wx-list-wrapper {
	padding-left: 2px;
	padding-right: 2px;
}

.wx-list-wrapper.svelte-1ck6han {
	height: calc(100%);
}

.wx-row.svelte-30nbk4:not(.wx-collapsed) {
	height: calc(100% - 36px);
}

.wx-selected.svelte-1t9rqgm {
	border: var(--wx-kanban-card-border);
}

.kanbanInlineMenu {
	display: inline-block;
	width: 10px;
}

.kanbanInlineMenu:hover {
	color: red;
}
.kanbanContextMenu .dhx_menu-button__icon::before,
.kanbanContextMenu .dhx_menu-button__text {
	font-size: 12px !important;
}

.userCircle {
	display: inline-block;
	background-color: var(--tocloco-blue);
	margin: 0 4px 0 0;
	border-radius: 50%;
}

.userCircleInner {
	color: white;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	text-decoration: none;
	height: 25px;
	width: 25px;
	font-size: 11px;
}

.dhx_popup,
.alertify-notifier {
	z-index: 10000000;
}

/* A maximised Lattice grid is position:fixed at z-index 2147483000 and marks the
   body with lat-maximised-host. Toasts, alertify dialogs and DHX popups opened
   while it fills the window must sit above it, or they appear behind the grid. */
.lat-maximised-host .alertify-notifier,
.lat-maximised-host .alertify,
.lat-maximised-host .dhx_popup {
	z-index: 2147483600;
}

.fdListCell {
	border-radius: 8px !important;
}

.fdList .dhx_list-item--selected {
	box-shadow: none;
	background-color: #f3f3f3;
}

/* timeline */

#lineCont {
	width: 100%;
	height: 20%;
}

#line {
	height: 6px;
	width: 70%;
	background: white;
	border-radius: 5px;
	margin: auto;
	top: 50%;
	transform: translateY(-50%);
	position: relative;
}

#span {
	display: none;
	width: 70%;
	margin: auto;
	margin-top: 25%;
	text-align: center;
	color: white;
}

.circle {
	width: 20px;
	height: 20px;
	background: #e97162;
	border-radius: 15px;
	position: absolute;
	top: -7px;
	border: 3px solid white;
	cursor: pointer;
	&:before {
		content: '';
		width: 10px;
		height: 10px;
		background: white;
		position: absolute;
		border-radius: 100%;
		top: 2px;
		left: 2px;
		display: none;
	}
	.popupSpan {
		width: auto;
		height: auto;
		padding: 10px;
		white-space: nowrap;
		display: inline-block;
		color: white;
		position: absolute;
		top: 20px;
		left: -75px;
		display: none;
		transition: all 0.1s ease-out;
	}
	/*
     &:nth-child(odd) .popupSpan {
	   top: 20px;
	}
    */
	&.hover:before,
	&.active:before {
		display: block;
	}
	&.hover .popupSpan,
	&.active .popupSpan {
		display: block;
	}
	&.active .popupSpan {
		top: -40px;
	}
}

#mainCont {
	height: 80%;
	width: 100%;
	position: relative;
	color: white;
	font-size: 62px;
	text-align: center;
	transition: all 0.2s ease-out;
	span {
		display: inline-block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 30%;
		transition: all 0.2s ease-out;
		&.right {
			left: 200%;
		}
		&.center {
			left: 0% !important;
		}
		&.left {
			left: -100%;
		}
	}
}

.dhx_tabbar-header__wrapper {
	border: none !important;
}

.healthList li {
	padding: 0 10px 0 10px;
}

.health {
	display: flex;
	flex-direction: row;
	height: 52px;
	line-height: 52px;
	align-items: center;
}

.health span:first-of-type {
	width: 33%;
	font-weight: bold;
}

.health i {
	font-size: 150%;
}

.ragRed {
	color: #ef3d4e;
	/*rgb(239, 61, 78)*/
}

.ragAmber {
	color: #ffe19b;
}

.ragGreen {
	color: #69e885;
	/*rgb(105, 232, 133)*/
}

.ragRedBackground {
	background-color: #ffb1b9;
	/*rgb(239, 61, 78)*/
}

.ragAmberBackground {
	background-color: #ffe19b;
}

.ragGreenBackground {
	background-color: #a9f9bb;
	/*rgb(105, 232, 133)*/
}

.formeo-editor {
	height: 100%;
}

li.dhx_list-item .listform .dhx_form-element {
	transform: scale(0.8);
}

li.dhx_list-item:hover .listform .dhx_form-element {
	background: #ededed;
}

.instance * {
	color: #ededed;
}

.headerhighlight,
.headerhighlight * {
	background-color: #eaeaea;
}
.condensedGrid *,
.condensedGrid .dhx_grid-cell {
	font-size: 10px;
}

.cardTags {
	background-color: blanchedalmond;
	padding: 3px 6px 3px 6px;
	border-radius: 8px;
	font-size: 80%;
	margin-right: 5px;
}

.kanbanCardProject {
	margin: 0;
}

.kanbanCardProject span {
	background-color: #ededed;
	padding: 3px 6px 3px 6px;
	border-radius: 8px;
	font-size: 80%;
	margin-right: 5px;
}

.functionToolbar--popup-menu ul.dhx_menu {
	overflow-y: scroll !important;
	max-height: 75vh;
}

.transparentTA * {
	background: none;
	box-shadow: none;
}

/* .grid-stack { background: ; } */
.grid-stack-item-content {
	background-color: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 8px;
	overflow: hidden;
}

.dashwidget {
	padding: 0px;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.dashwidgettitle {
	font-weight: bold;
	background: #d4d4d4;
	padding: 10px !important;
	border-bottom: 1px solid #e2e2e2;
}

.dashwidgetstat {
	font-size: 300%;
	text-align: center;
	align-content: space-around;
	flex-grow: 1;
	padding: 10px;
}

.dashwidgetlist {
	font-size: 300%;
	text-align: center;
	align-content: space-around;
	flex-grow: 1;
	padding: 10px;
}

.dashwidgetchart {
	text-align: center;
	align-content: space-around;
	flex-grow: 1;
	padding: 10px;
}

.dashwidgetchart i {
	font-size: 300%;
}

#pivot .item_content {
	color: black;
}

.dhx_pivot,
.dhx_pivot-grid-wrap {
	background: white;
}

.dhx_toggle--selected,
.dhx_toggle,
.dhx_toggle:hover {
	background-color: white;
	border: none;
	font-size: 150%;
}

.mainsidebar {
	padding: 0 !important;
}
.mainsidebar .dhx_sidebar-button--active {
	background-color: rgb(48, 65, 176);
	color: white;
	box-shadow: inset 2px 0 0 0 black;
}

.mainsidebar .dhx_sidebar-button--active .dhx_sidebar-button__icon {
	color: white;
}

.replyFormBg {
	background: lightgray !important;
	border-radius: 5px;
}

.ticketDate {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #0e9700;
	display: inline-block;
	margin-right: 5px;
	margin-left: 5px;
}

.ticketOverdue {
	background-color: red !important;
}

.ticket_header_cell h3,
.ticket_header_cell .dhx_layout-cell-header {
	padding: 0;
	margin-bottom: 10px;
}

.fa-arrow-turn-left,
.fa-arrow-turn-right {
	font-size: 5px;
	transform: scale(0.75);
}

.ticket_overlay_close_icon {
	margin-right: 6px;
}

.ticket_overlay_right_column {
	box-shadow: inset 10px 0 10px -8px #ebeff3;
}

.ticket_overlay_toolbar {
	box-shadow: 0px 10px 10px -8px #ebeff3;
}

.ticketTag {
	padding: 4px;
	border-radius: 6px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
	font-weight: 500;
	display: flex;
	align-items: center;
	height: 24px;
	font-size: 13px;
	padding-right: 8px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: white;
}

.Circle {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 8px;
	margin-left: 6px;
	background: none;
	background-color: none;
}

.LowCircle,
.ClosedCircle,
.dateCircle {
	background-color: #00ac46;
}

.MediumCircle {
	background-color: #fdc500;
}

.overdueDateCircle,
.HighCircle,
.OpenCircle {
	/* background-color: #fd8c00; */
	background-color: #f10f0f;
}

.CriticalCircle {
	background-color: #780000;
}

.greyGridRow {
	/*background: rgba(47, 65, 176, 0.1);*/
	background-color: #2f41b01a;
}

/** Initiatives **/

.initiative_card .dhx_dataview-item {
	cursor: pointer;
	border-radius: 25px;
	padding: 15px 20px 15px 20px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	/*max-width: 250px;*/
	min-height: 250px;
	border: none;
}

.initiative_card .dhx_dataview-item__inner-html {
	height: 100%;
}

.colorPicker .dhx_input__wrapper,
.colorPicker .dhx_input {
	width: 30px;
	cursor: pointer;
}

.ini_white {
	background-color: white;
}
.ini_black {
	background-color: black;
}
.ini_red {
	background-color: #f94144;
}
.ini_orange1 {
	background-color: #f3722c;
}
.ini_orange2 {
	background-color: #f8961e;
}
.ini_peach {
	background-color: #f9844a;
}
.ini_yellow {
	background-color: #f9c74f;
}
.ini_green {
	background-color: #90be6d;
}
.ini_turquoise {
	background-color: #43aa8b;
}
.ini_sage {
	background-color: #4d908e;
}
.ini_purple {
	background-color: #3041b0;
}
.ini_blue2 {
	background-color: #0068ff;
}

/* for tci budget tracker */


.dfHeaderAmber,
.dfHeaderAmber:hover {
	background-color: var(--uiAmber) !important;
}


.iconsWindow {
	z-index: 10000000000;
}

.iconsWindow .dhx_window-content {
	padding: 0;
}

.titleblock {
	/*background-color: #CC533D !important;*/
	background-color: var(--tocloco-blue) !important;
}

.titleblock * {
	color: white;
	font-weight: 600;
}

.ggdv .dhx_dataview-item {
	padding: 0;
	border: none;
}

.hovercontrols {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	border: 1px solid green;
}

.blocksView {
	background: none;
}

.blocksView .dhx_dataview-item {
	border: none;
	padding: 0;
}

.dhx_dataview-item--focus,
.blocksview .dhx_dataview-item--selected {
	box-shadow: none !important;
}

.dataviewPreview .dhx_dataview-item:hover .hovercontrols {
	display: block;
}

.hoverdrag {
	position: absolute;
	top: 2px;
	right: 44px;
	width: 20px;
	height: 20px;
	background-color: green;
	color: white;
	text-align: center;
	line-height: 20px;
}

.hoveredit {
	position: absolute;
	top: 2px;
	right: 22px;
	width: 20px;
	height: 20px;
	background-color: green;
	color: white;
	text-align: center;
	line-height: 20px;
	cursor: pointer;
}

.hoverdelete {
	position: absolute;
	top: 2px;
	right: 0px;
	width: 20px;
	height: 20px;
	background-color: green;
	color: white;
	text-align: center;
	line-height: 20px;
	cursor: pointer;
}

.fullwidth,
.fullwidth button {
	width: 100%;
}

.phonezone .dhx_dataview-item {
	padding: 0;
	border: none;
	margin: 0;
}

.dhx_layout-cell h2 {
	text-transform: uppercase;
	padding: 10px 20px 10px 20px;
}

.templatesView .dhx_dataview-row {
	height: 50%;
}

.templatesView .dhx_dataview-row .dhx_dataview-item__inner-html {
	height: 100%;
}

.templatesView .dhx_dataview-item {
	padding: 0px !important;
}

.templatesView .dhx_dataview-item--selected {
	box-shadow: none;
}

.templateName {
	position: absolute;
	width: 100%;
	height: 40px;
	background-color: var(--tocloco-blue);
	padding: 5px;
	bottom: 0;
	text-align: center;
	line-height: 30px;
	color: white;
	margin: 0 !important;
	text-transform: uppercase;
	font-weight: 600;
}

.dhx_dataview-item--selected .templateName {
	background-color: rgba(48, 65, 176, 0.752);
	color: white;
}

.editorCol,
.protoCol {
	background-color: #f4f6f8;
	transition: width 0.2s;
}

.previewCol {
	justify-content: center;
	display: flex;
	background-color: unset !important;
}

.previewCol .dhx_layout {
	aspect-ratio: 0.5;
	background-image: url(assets/images/phoneoutline.png);
	background-repeat: no-repeat;
	background-size: cover;

	background-color: unset !important;

	height: 100%;
	width: auto !important;
}

.previewCol .dhx_layout-cell {
	background-color: unset;
}

.phonezone {
	border-bottom-left-radius: 12% 6%;
	border-bottom-right-radius: 12% 6%;
}

.guideName {
	margin-top: 10px;
	margin-right: 20px;
}

.saveGuide button {
	margin-top: 10px;
	margin-right: 10px;
	/*border-radius: 6px !important;*/
	overflow: hidden;
	padding: 8px 20px 8px 20px;
}

.saveGuide span {
	font-size: 14px;
}

.bolder input {
	font-weight: 700;
	text-transform: uppercase;
}

.optionsblock {
	margin-bottom: 10px;
}

.protoForm,
.globalForm {
	background: none;
}
.globalForm .dhx_form-group {
	margin-bottom: 0;
}

.deleteGuide button {
	background-color: #cc533d !important;
}

.deleteGuide button:hover {
	background-color: #c68e8e !important;
}

.deleteGuide button span {
	color: white !important;
}

.guideName input {
	font-size: 14px;
	background-color: white;
	padding: 10px;
	border-radius: 6px;
	border-color: white;
	box-shadow: inset 0 0 0 1px white;
}

.guideName input:focus {
	background-color: rgb(243, 243, 243);
	box-shadow: inset 0 0 0 1px #73672f;
}

.templateBlock {
	font-size: 12px;
	padding: 0;
	display: flex;
	height: 100%;
	justify-content: center;
	flex-direction: column;
	position: relative;
	background-repeat: none;
	background-size: cover;
	border-radius: 6px;
	overflow: hidden;
}

.iconsWindow .dhx_window-content {
	padding: 0;
}

.guideBlock > *:not(:first-child) {
	margin-top: 20px !important;
}

.galleryVault .dhx_simplevault__files {
	display: none !important;
}

.pageIconSelect select {
	font-family: 'Font Awesome 6 Pro';
}

.galleryVault .dhx_simplevault__files {
	display: none !important;
}
.mappedFieldsFormContainer {
	max-height: 55%;
	overflow: scroll;
}
.mappedFieldsForm {
	flex: unset !important;
	flex-grow: unset;
	flex-shrink: unset;
	overflow: unset;
}
.mappedFieldsForm > div {
	overflow: hidden !important;
}
.alignToBottom {
	margin-top: auto;
}
.hide {
	display: none;
}

.purple button {
	background-color: #3041b0 !important;
}

.pointer .dhx_grid-cell {
	cursor: pointer;
}

.purpleTask {
	background-color: #5061d4 !important;
	border: none !important;
}

.purpleChild {
	background-color: rgb(139, 160, 255);
	border: none !important;
}

.removeZIndex {
	z-index: unset !important;
}
#dfSidebarCon {
	border-radius: 0;
	border: none;
}

.df-menu-item {
	display: flex;
	height: 36px;
	align-items: center;
	padding-left: 32px;
	cursor: pointer;
}

.df-menu-item * {
	background-color: white;
	color: black;
}

.df-menu-item:hover,
.df-menu-item:hover * {
	background-color: #eeeeee;
	color: black;
}

.e-acrdn-header-icon {
	width: 24px;
}

.e-acrdn-header-content {
	color: black !important;
	font-size: 13px !important;
}

.df-side-icon,
.e-acrdn-header-icon {
	color: black !important;
}

.e-acrdn-content {
	padding: 0 !important;
}

.df-menu-selected,
.df-menu-selected * {
	background-color: var(--tocloco-blue);
	color: white !important;
}

.workload-combo.dhx_form-combobox__wrapper {
	text-align: right;
}

.workload-combo.dhx_form-combobox__wrapper {
	text-align: right;
}

.dhx_toolbar-button-image__image {
	background-size: contain !important;
}

.userbutton button {
	background: rgba(0, 0, 0, 0);
}

.userbutton span {
	margin: 5px;
}

.userbutton .dhx_toolbar-button-image__image {
	background-size: cover !important;
}

.fixed-frontdoor-button {
	position: fixed;
	bottom: 60px;
	right: 40px;
}

.sprintTag {
	padding: 4px;
	border-radius: 6px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
	/* font-weight: 500; */
	display: flex;
	align-items: center;
	height: 24px;
	font-size: 13px;
	padding-right: 8px;
	width: fit-content;
	margin-bottom: 5px;
	margin-top: 5px;

	background-color: white;
}

.stickyButtons {
	position: sticky;
	bottom: 0;
	right: 0;
	width: 100%;
}

.adminRadios {
	overflow: hidden !important;
}

.adminRadios .dhx_widget.dhx_form {
	overflow: hidden;
}

.dhx_tabbar.backgroundTransparent > .dhx_layout-cell {
	background: rgba(0, 0, 0, 0);
}

.advancedObject .dhx_layout-cell-header__title {
	text-transform: uppercase;
	font-size: 12px;
}

.advancedObject .dhx_form-group label {
	font-size: 12px;
	margin-bottom: 0;
}

.whitetab {
	background-color: white !important;
}

.sprintView {
	overflow: scroll;
	display: block;
}


.sprintViewGridContainer .dhx_layout-cell {
	overflow: unset;
}

.sprintDateCircle {
	background-color: #31aedb;
}
.swimlane {
	height: 45% !important;
	min-width: unset !important;
}

.swimlane .wx-column.svelte-1ppa004.svelte-1ppa004:last-child {
	margin-right: 0px !important;
}

.swimlane .wx-label {
	padding-top: 20px;
	padding-bottom: 10px !important;
	padding: 10px 12px 10px 24px !important;
	font-size: 14px;
	border-bottom: 1px solid #ffffff;
	background-color: #d9d9d9;
	border-left: 1px solid white;
}

.swimlane .wx-content {
	overflow: hidden;
}

.mt5 {
	margin-top: 5px;
}


.ft-comment-tooltip {
	position: fixed;
	background: #fff;
	border: 1px solid #ddd;
	border-left: 3px solid #ffe19b;
	border-radius: 4px;
	padding: 10px 14px;
	max-width: 300px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	z-index: 2000001;
	pointer-events: none;
	font-size: 13px;
	line-height: 1.4;
	transform: translateY(-100%);
}

.userAvatar .dhx_avatar__preview {
	background-size: cover;
}

.userAvatar .dhx_avatar__image {
	object-fit: cover;
}


.greyCell {
	background-color: rgba(0, 0, 0, 0.1);
	color: rgba(0, 0, 0, 0);
}
.greyCellBoldItalic {
	background-color: rgba(0, 0, 200, 0.1);
	font-style: italic;
	font-weight: bold;
}

.italicCellDarkBold {
	background-color: rgba(0, 0, 80, 0.1);
	font-style: italic;
	font-weight: bold;
}
.italicCellDarkerBold {
	background-color: rgba(0, 0, 200, 0.1);
	font-style: italic;
	font-weight: bold;
}

.italicCellDark {
	background-color: rgba(0, 0, 80, 0.1);
	font-style: italic;
}

.italicCellDarker {
	background-color: rgba(0, 0, 200, 0.1);
	font-style: italic;
}

.bold {
	font-weight: bold;
}

.greyCellBold {
	background-color: rgba(0, 0, 0, 0.1);
	font-weight: bold;
}
.grey {
	background-color: rgba(0, 0, 0, 0.1);
}

.excelNumber {
	font-weight: inherit;
}

.rowGroupGrid {
	/* color: var(--tocloco-blue); */
	filter: saturate(30%);
	border: none !important;
	font-weight: bold;
}

.rowGroupGrid::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(90, 86, 208, 0.123);
	pointer-events: none;
	border: none !important;
}

.highlightbom {
	background-color: #f0f7ff !important;
}


.dhx_grid-content *,
.assignGrid * {
	font-size: 12px !important;
}

.dhx_combobox-options__value {
	font-size: 12px !important;
}

/* Team Task List Items */

.teamTaskList .dhx_list-item {
	padding: 10px;
}
.taskListItem {
	display: flex;
	align-items: center;
	padding-top: 5px;
	padding-bottom: 5px;
}
.taskItemName {
	width: 80px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0;
	margin-right: 15px;
}
.taskItemDate {
	margin: 0;
	margin-right: 15px;
	font-weight: bold;
}
.taskItemDateIcon {
	margin-right: 8px;
}
.taskItemLeft {
	display: flex;
	align-items: center;
}
.taskItemRight {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-left: auto;
}
.taskItemWorkload {
	margin: 0;
	margin-right: 15px;
	font-weight: bold;
}
.taskItemWorkloadIcon {
	margin-right: 5px;
}
.taskItemImg {
	height: 25px;
	width: 25px;
	border-radius: 50%;
	object-fit: cover;
	background-color: lightgray;
	margin-right: 15px;
}
.taskListForm {
	height: 25px;
	overflow: hidden !important;
	padding: 0 !important;
}
.taskItemSelectContainer {
	margin-left: auto;
}
.taskListSelect {
	height: 25px;
	font-size: 10px;
	margin-left: auto;
}
.taskListSelect select {
	font-size: 10px;
	width: 70px !important;
	padding: 0 0 0 5px;
	height: 100%;
}
.taskListSelect .dhx_form-group {
	margin: 0;
}
.taskListSelect .dhx_input__container,
.taskListSelect .dhx_form-group,
.taskListSelect .dhx_input__wrapper {
	height: 100%;
}

@media (max-width: 1500px) {
	.taskListItem {
		font-size: 11px;
	}
	.taskItemName {
		width: 60px;
		margin-right: 10px;
	}
	.taskItemDateIcon {
		margin-right: 5px;
	}
	.taskItemWorkloadIcon {
		margin-right: 3px;
	}
}

.tag {
	border-radius: 100px;
	padding-top: 2px;
	padding-left: 4px;
	padding-right: 12px;
	line-height: 2;
	font-weight: 500;
	border: 1.5px solid rgba(91, 91, 91, 0.1);
	display: flex;
	/*
    justify-content: center;
	align-items: center;
    */
	flex-direction: row;
	height: 30px;
	margin-top: 4px;
}

.greyTag {
	background-color: #c2c2c230;
	border: 1.5px solid #cecece;
}

.greenTag {
	background-color: #84ca8130;
	border: 1.5px solid rgb(70, 227, 114, 0.2);
}

.redTag {
	background-color: rgb(255, 0, 0, 0.05);
	color: rgb(234, 83, 83);
	border: 1.5px solid rgb(255, 0, 0, 0.3);
}

.amberTag {
	background-color: #fdc3584f;
}

.circle {
	width: 8px !important;
	height: 8px !important;
	border-radius: 50%;
	margin-right: 8px;
	margin-left: 6px;
	position: relative;
	margin-top: 15px;
}

.greyCircle {
	background-color: #cecece;
	border: #cecece;
}

.greenCircle {
	background-color: #6d9b7e;
	border: #6d9b7e;
}

.redCircle {
	background-color: #ea5353;
	border: #ea5353;
}

.amberCircle {
	background-color: #a06d37;
	border: #a06d37;
}

.kanbanUserFilter ul {
	height: 30px;
	overflow-x: hidden;
}

.kanbanFilterBar {
	height: 80px;
	max-height: 53px;
	width: 100%;
	position: absolute;
	z-index: -1;
}

.kanbanFilterBar--open {
	position: relative;
	z-index: unset;
}

.kanbanFilterBar .dhx_widget.dhx_form {
	overflow: hidden;
}

.kanbanFilterBar .dhx_combobox__label {
	font-weight: 300;
}

/* .kanbanFilterBar .dhx_combobox-input-box { */
/*     background: none; */
/*     box-shadow: unset; */
/* } */
/**/
/* .kanbanFilterBar .dhx_combobox-input-box:hover { */
/*     background: #f1f1f1; */
/* } */
/**/
/* .kanbanFilterBar input { */
/*     background: none; */
/* } */

.messagesNav .dhx_navbar-count {
	top: 50%;
	right: -4px;
	transform: translateY(-50%);
	background: var(--tocloco-blue);
	z-index: 5;
}

.activeInput {
	border: 1px solid var(--tocloco-blue);
}

.kanbanUserFilter ul {
	height: 30px;
	overflow-x: hidden;
}

.kanbanFilterBar {
	height: 80px;
	max-height: 53px;
	width: 100%;
	position: absolute;
	z-index: -1;
}

.kanbanFilterBar--open {
	position: relative;
	z-index: unset;
}

.kanbanFilterBar .dhx_widget.dhx_form {
	overflow: hidden;
}

.kanbanFilterBar .dhx_combobox__label {
	font-weight: 300;
}

/* .kanbanFilterBar .dhx_combobox-input-box { */
/*     background: none; */
/*     box-shadow: unset; */
/* } */
/**/
/* .kanbanFilterBar .dhx_combobox-input-box:hover { */
/*     background: #f1f1f1; */
/* } */
/**/
/* .kanbanFilterBar input { */
/*     background: none; */
/* } */

.activeInput {
	border: 1px solid var(--tocloco-blue);
}

.smaller * {
	font-size: 10px !important;
}

.subtask-grid {
	border: 1px solid #dfdfdf;
	margin-bottom: 10px;
}

.subtask-list > .dhx_list-item {
	padding: 0px !important;
}

.subtask-item {
	padding: 10px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	/* margin-bottom: 8px; */
	background: white;
}

.subtask-name {
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.subtask-description {
	font-size: 0.9em;
	color: #666;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2; /* Limit to 2 lines */
	-webkit-box-orient: vertical;
	max-width: 100%;
	padding: 5px 0px;
}

.subtask-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px; /* Adds some spacing between the elements */
}

.subtask-assignee {
	color: #666;
	font-size: 0.9em;
}

.status-select {
	padding: 4px 0px;
	border-radius: 4px;
	border: 1px solid #ddd;
}

.subtask-list .dhx_list-item:hover {
	background-color: transparent; /* Remove background color on hover */
	box-shadow: none; /* Remove any shadow effect on hover */
	cursor: pointer;
}

.subtask-dates {
	text-align: center;
	/* color: #666; */
	font-size: 0.9em;
}

.subtask-dates i {
	margin-right: 5px;
}

.subtask-list-container {
	overflow-y: auto;
	max-height: 100%;
}

.subtask-list {
	/* padding: 10px; */
	height: 100%;
}

.subtask-item {
	position: relative;
	padding: 10px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	/* margin-bottom: 8px; */
	background: white;
}

.subtask-header {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 8px;
	width: 100%;
	position: relative;
}

.delete-icon {
	position: absolute;
	top: 0px;
	right: 0px;
	display: none;
	cursor: pointer;
	color: #ff4d4d;
}

.subtask-item:hover .delete-icon {
	display: block;
}

.subtask-list .dhx_list-item {
	border-bottom: none;
}

.subtask-item:hover {
	border: 1px solid black;
}

.status-form {
	min-width: 120px;
}

.status-form .dhx_form-group {
	margin-bottom: 0;
	padding: 0;
}

.sidebar-toggle {
	position: absolute;
	right: -10px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	background: #fff;
	border: 1px solid #757575;
	border-radius: 50%;
	cursor: pointer !important;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999 !important;
	transition: transform 0.3s;
	pointer-events: all !important;
}

.sidebar-toggle i {
	cursor: pointer !important;
}

.sidebar.collapsed {
	width: 24px !important;
	padding: 0 !important;
	overflow: hidden;
}

.sidebar.collapsed .sidebar-toggle {
	right: 0px !important;
}

.sidebar.collapsed .sidebar-toggle i {
	transform: rotate(180deg);
}

.sidebar.collapsed #dfSidebarCon {
	opacity: 0;
	visibility: hidden;
}

#dfSidebar {
	position: relative;
	transition: width 0.3s;
	pointer-events: all !important;
	overflow-x: hidden;
	height: calc(100% - 60px) !important;
	border-bottom: 1px solid gray;
}

.sidebar {
	pointer-events: all !important;
	transition: width 0.3s, min-width 0.3s, max-width 0.3s;
}

#dfSidebarCollapse:hover {
	background-color: #eee;
}

#dfSidebarCollapse i {
	transition: transform 0.3s;
}

.readonly .dhx_grid-cell {
	cursor: not-allowed;
	user-select: none;
	color: var(--dhx-font-color-disabled);
}
.readonly .dhx_grid-cell__content,
.readonly .dhx_cell-editor__checkbox,
.readonly .dhx_checkbox__visual-input {
	cursor: not-allowed;
	user-select: none;
	opacity: 0.5;
}


.rowBorderBottom {
	position: relative;
	border: none;
}
.rowBorderBottom:after {
	content: '';
	position: absolute;
	z-index: 10;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: black;
}


.riskListItem {
	margin: 0;
	padding: 0;
}

.riskProjectName {
	font-size: 80%;
	font-weight: bold;
	text-transform: uppercase;
}

.riskScore {
	width: 70px;
}

.riskScore span {
	width: 90%;
	display: inline-block;
	text-align: center;
	font-size: 90%;
}

.riskScoreHigh {
	margin-top: 5px;
}
.riskScoreHigh span {
	background-color: #ef3d4e;
	padding: 5px;
	font-weight: bold;
	color: white;
	border-radius: 4px;
}

.riskScoreMedium span {
	background-color: #ffe19b;
	padding: 5px;
	font-weight: bold;
	border-radius: 4px;
}

.riskScoreLow span {
	background-color: #69e885;
	padding: 5px;
	font-weight: bold;
	border-radius: 4px;
}

.riskListItem {
	cursor: pointer;
	display: flex;
	flex-direction: row;
}

.smallerInput input {
	font-size: 80%;
}

.dataviewNoBorder * {
	border: 0 !important;
}

.notSaved * {
	text-align: center;
	background-color: red;
	color: white;
	border-radius: 3px;
	font-weight: bold;
}

.timeline-event-label {
	padding-top: 5px;
	font-size: 10px !important;
}

#overlay .dhx_layout-cell-header {
	border-bottom: 1px solid gray;
}

#overlay .dhx_layout-cell-header .dhx_layout-cell-header__title {
	padding-bottom: 10px;
	text-transform: capitalize;
}

#overlay > .dhx_layout > .dhx_layout-cell:nth-child(2) {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

#overlay .dhx_layout-cell-header__collapse-icon::before {
	content: '\e59b'; /* FontAwesome down arrow */
	font-family: 'Font Awesome 6 Pro' !important;
	font-weight: 900;
	font-size: 16px;
}

#overlay .dhx_layout-cell-expand.dxi::before {
	content: '\e59b'; /* FontAwesome up arrow */
	font-family: 'Font Awesome 6 Pro' !important;
	font-weight: 900;
	font-size: 16px;
}

#overlaySlide .dhx_layout-cell-header {
	border-bottom: 1px solid gray;
}

#overlaySlide .dhx_layout-cell-header .dhx_layout-cell-header__title {
	padding-bottom: 10px;
	text-transform: capitalize;
}

#overlaySlide > .dhx_layout > .dhx_layout-cell:nth-child(2) {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

#overlayObjectSlide > .dhx_layout > .dhx_layout-cell:nth-child(2),
#overlayObjectSlide3 > .dhx_layout > .dhx_layout-cell:nth-child(2),
#overlayObjectSlide2 > .dhx_layout > .dhx_layout-cell:nth-child(2) {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

#overlaySlide .dhx_layout-cell-header__collapse-icon::before,
#overlaySlide3 .dhx_layout-cell-header__collapse-icon::before,
#overlaySlide2 .dhx_layout-cell-header__collapse-icon::before {
	content: '\e59b'; /* FontAwesome down arrow */
	font-family: 'Font Awesome 6 Pro' !important;
	font-weight: 900;
	font-size: 16px;
}

#overlaySlide .dhx_layout-cell-expand.dxi::before,
#overlaySlide3 .dhx_layout-cell-expand.dxi::before,
#overlaySlide2 .dhx_layout-cell-expand.dxi::before {
	content: '\e59b'; /* FontAwesome up arrow */
	font-family: 'Font Awesome 6 Pro' !important;
	font-weight: 900;
	font-size: 16px;
}

#overlayObjectSlide .slideIn > .dhx_layout-cell-header,
#overlayObjectSlide2 .slideIn > .dhx_layout-cell-header,
#overlayObjectSlide2 .slideIn > .dhx_layout-cell-header {
	border-bottom: 1px solid gray;
}

.slideInObject > .dhx_layout-cell-header > .dhx_layout-cell-header__collapse-icon::before,
#overlayObjectSlide .slideInObject > .dhx_layout-cell-header > .dhx_layout-cell-header__collapse-icon::before,
#overlayObjectSlide2 .slideInObject > .dhx_layout-cell-header > .dhx_layout-cell-header__collapse-icon::before,
#overlayObjectSlide3 .slideInObject > .dhx_layout-cell-header > .dhx_layout-cell-header__collapse-icon::before,
#overlayObjectSlide .slideIn > .dhx_layout-cell-header > .dhx_layout-cell-header__collapse-icon::before,
#overlayObjectSlide3 .slideIn > .dhx_layout-cell-header > .dhx_layout-cell-header__collapse-icon::before,
#overlayObjectSlide2 .slideIn > .dhx_layout-cell-header > .dhx_layout-cell-header__collapse-icon::before {
	content: '\e59b'; /* FontAwesome down arrow */
	font-family: 'Font Awesome 6 Pro' !important;
	font-weight: 900;
	font-size: 16px;
}

.slideInObject > .dhx_layout-cell-header > .dhx_layout-cell-expand.dxi::before,
#overlayObjectSlide .slideInObject > .dhx_layout-cell-header > .dhx_layout-cell-expand.dxi::before,
#overlayObjectSlide2 .slideInObject > .dhx_layout-cell-header > .dhx_layout-cell-expand.dxi::before,
#overlayObjectSlide3 .slideInObject > .dhx_layout-cell-header > .dhx_layout-cell-expand.dxi::before,
#overlayObjectSlide3 .slideIn > .dhx_layout-cell-header > .dhx_layout-cell-expand.dxi::before,
#overlayObjectSlide .slideIn > .dhx_layout-cell-header > .dhx_layout-cell-expand.dxi::before,
#overlayObjectSlide2 .slideIn > .dhx_layout-cell-header > .dhx_layout-cell-expand.dxi::before {
	content: '\e59b'; /* FontAwesome up arrow */
	font-family: 'Font Awesome 6 Pro' !important;
	font-weight: 900;
	font-size: 16px;
}

.dhx_form-element button {
	border: 8px;
}

.slideIn .dhx_form {
	background: rgba(217, 217, 217, 0.2);
}

.slideIn .dhx_form.white {
	background: white !important;
}

.slideIn .dhx_list {
	background: rgba(217, 217, 217, 0.2);
}

.slideIn [data-cell-id='functionForm'] {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.slideIn .dhx_form .dhx_layout-cell {
	background: transparent;
}

.slideIn .dhx_form .dhx_layout-cell input {
	background: white;
}

.slideIn > .dhx_layout-columns,
.slideIn > .dhx_layout-rows {
	height: calc(100% - 61px) !important;
}

.dfButtonRounded button {
	border-radius: 8px;
}

.dfButtonSecondary button {
	background: rgba(46, 63, 167, 0.1) !important;
}

.dfButtonSecondary button span {
	color: rgba(46, 63, 167, 1);
}

.slideIn .dhx_form input {
	border-radius: 8px;
}


.slideIn .dhx_combobox-input-box {
	background-color: white;
	border-radius: 8px;
}

.slideIn textarea {
	background-color: white;
	border-radius: 8px;
}

.slideIn select {
	background-color: white;
	border-radius: 8px;
}

.slideIn .tagify {
	background-color: white;
	border-radius: 8px;
}

.roundedCell {
	border-radius: 8px;
	overflow: hidden;
}

.paddingRightCell {
	margin-right: 20px;
}

.backgroundedForm {
	background: rgba(217, 217, 217, 0.2) !important;
	border-radius: 8px;
}

.backgroundedForm .dhx_layout-cell {
	background: transparent !important;
}

.backgroundedForm [data-cell-id='functionForm'] {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.backgroundedForm input {
	background: white;
	border-radius: 8px;
}

.backgroundedForm input[readonly] {
	background: transparent;
}

.backgroundedForm select {
	background-color: white !important;
	border-radius: 8px;
}

.backgroundedForm .dhx_combobox-input-box {
	background-color: white;
	border-radius: 8px;
}

.backgroundedForm textarea {
	background-color: white;
	border-radius: 8px;
}

.roundedGrid {
	border: 1px solid rgba(217, 217, 217, 0.4);
	border-radius: 8px;
	margin-bottom: 20px;
}

.roundedGrid .dhx_grid-content {
	background-color: rgba(217, 217, 217, 0.2);
}

.roundedGrid .dhx_grid-header,
.roundedGrid .dhx_header-row .dhx_grid-header-cell {
	background-color: rgba(217, 217, 217, 0.2);
}

.roundedGrid .dhx_grid-row {
	/*margin-top: 5px;*/
	background-color: white;
	/*
	border-radius: 8px;
	border: 1px solid #00000033;
	*/
	box-sizing: border-box;
}

.roundedGrid .dhx_grid-row .dhx_grid-cell {
	border-top: none;
	/*height: 42px !important;*/
}

.toolbarMarginRight {
	margin-right: 50px !important;
}

.poAction > .dhx_widget {
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

.transparentBackground,
.transparentBackground * {
	background: transparent !important;
}

.dfToolbar {
	padding-right: 10px;
	padding-left: 10px;
}

.dfToolbar .dhx_navbar {
	padding-top: 5px;
	padding-bottom: 5px;
}

.dfToolbar li {
	border-radius: 8px;
	padding-left: 10px;
	padding-right: 10px;
	height: 80%;
	margin-bottom: 5px;
	transition: background-color 200ms linear;
	overflow: hidden;
}

.dfToolbar li.dhx_toolbar__item--separator {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.dfToolbar li button {
	margin-top: 2px;
}
li.dfToolbarButton {
	background: rgba(46, 63, 167, 0.1);
	border-radius: 8px;
	padding-left: 10px;
	padding-right: 10px;
	height: 80%;
	margin-bottom: 5px;
	transition: background-color 200ms linear;
}

li.dfToolbarButton:hover {
	background: rgba(46, 63, 167, 0.3);
}

li.dfToolbarButton span {
	color: rgba(46, 63, 167, 1);
	transition: color 200ms linear;
	/*padding-top: 2px;*/
}

li.dfToolbarButton:hover span {
	color: black;
}

.dfToolbarButton button:hover {
	background: transparent !important;
}

li.dfToolbarSelect {
	border: 1px solid rgba(46, 63, 167, 0.1);
	border-radius: 8px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 2px;
	height: 80%;
	margin-bottom: 5px;
	transition: background-color 200ms linear;
}

li.dfToolbarSelect button,
li.dfToolbarSelect button:hover {
	background: transparent;
	margin-top: 0;
}

li.dfToolbarTitle {
	height: 80%;
	margin-bottom: 5px;
	padding-right: 8px;
	padding-top: 8px;
}

li.dfToolbarTitle2 {
	height: 80%;
	margin-bottom: 5px;
	padding-right: 8px;
	padding-top: 10px;
}

li.dfToolbarTitle2 span,
li.dfToolbarTitle span {
	height: 100%;
}

.todoFrame {
	border-radius: 8px;
}

.kanbanLayout {
	border-radius: 8px;
}

li.dfToolbarButtonGrey {
	border-radius: 8px;
	padding-left: 4px;
	padding-right: 4px;
	height: 80%;
	margin-bottom: 5px;
	transition: background-color 200ms linear;
}

li.dfToolbarButtonGrey {
	border-radius: 8px;
	padding: 0;
	height: 80%;
	margin-bottom: 8px;
	transition: background-color 200ms linear;
	margin-right: 5px;
}

li.dfToolbarButtonGrey button,
li.dfToolbarButtonGrey button:hover {
	padding: 0;
	height: 100%;
	padding-left: 12px;
	padding-right: 12px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	margin-top: 0;
}

li.dfToolbarButton .dhx_toolbar-button__count {
	position: relative;
	top: 5px;
	right: -10px;
}

li.bufferLeft {
	margin-left: 10px;
}
li.bufferRight {
	margin-right: 10px;
}

.bufferLeft {
	margin-left: 10px;
}

.dfToolbar .dhx_toolbar__input {
	margin-top: 2px;
}

.chartsContainer {
	border-radius: 8px;
}

.dfToolbarButton:has(.dhx_toolbar-button--active) {
	background-color: rgba(46, 63, 167, 0.3);
}

.dfToolbarButton .dhx_toolbar-button--active {
	background: transparent !important;
}

.noBackground {
	background: transparent !important;
}

.teamCardCol2 .dhx_layout-cell-header {
	background: transparent;
}
.transparentAll * {
	background: transparent !important;
}

.noBorderList li {
	border-bottom-color: rgba(0, 0, 0, 0) !important;
}

.noBorderList li:hover {
	background: none !important;
	cursor: default !important;
}

.roundedCell {
	border-radius: 8px;
}

.roundedCell > .dhx_layout-cell {
	background: rgba(0, 0, 0, 0) !important;
}

.roundedCell .dhx_layout-cell-header {
	background: rgba(217, 217, 217, 0.2);
}

.dfFormButton button {
	background: rgba(46, 63, 167, 0.1) !important;
	border-radius: 8px;
	padding-left: 10px;
	padding-right: 10px;
	transition: background-color 200ms linear;
}

.dfFormButton span {
	color: rgba(46, 63, 167, 1);
	transition: color 200ms linear;
}

.dfFormButton button:hover {
	background: rgba(46, 63, 167, 0.3) !important;
}

.dfFormButton button:hover span {
	color: black;
}

.dfFormButtonGrey button {
	background: rgba(0, 0, 0, 0.15) !important;
	border-radius: 8px;
	padding-left: 10px;
	padding-right: 10px;
	transition: background-color 200ms linear;
}

.dfFormButtonGrey span {
	color: rgba(46, 63, 167, 1);
	transition: color 200ms linear;
}

.dfFormButtonGrey button:hover {
	background: rgba(0, 0, 0, 0.1) !important;
}

.dfFormButtonGrey button:hover span {
	color: black;
}

.dfRoundedInput input {
	border-radius: 8px;
}

.dfPasswordWrap {
	position: relative;
}

.dfPasswordWrap input {
	padding-right: 38px;
}

.dfPasswordToggle {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	cursor: pointer;
	color: #6b7280;
	font-size: 14px;
	z-index: 2;
}

.dfPasswordToggle:hover {
	color: #2e3fa7;
}

.roundGrid {
	border-radius: 8px;
	overflow: hidden;
	/* Lattice draws its own border on the grid root, and its corner radius comes from
	   this variable, which defaults to 0. Rounding the host alone left a square border
	   meeting a rounded clip, which shows as a doubled line at each corner. Handing the
	   grid the same 8px makes its own border curve with ours. Set on the host rather
	   than a descendant so it works whether Lattice adopts this element as the grid
	   root or mounts inside it: custom properties inherit either way. */
	--lattice-grid-radius: 8px;
}

.dfTabbar {
	padding-left: 2px !important;
}

.dfTabbar .dhx_tabbar-header {
	height: 40px;
	margin-bottom: 5px;
	border: 1px solid #2e3fa7;
	border-radius: 8px;
	overflow: hidden;
	background-color: white;
}

.dfTabbarHidden .dhx_tabbar-header {
	display: none;
}

.dfTabbar li {
	padding: 3px;
	box-sizing: border-box;
	height: 39px !important;
	width: auto !important;
}

.dfTabbar li button {
	box-sizing: border-box;
	border: 1px solid transparent;
	height: 100% !important;
	width: auto !important;
	border-radius: 8px;
	padding-top: 7px !important;
	font-size: 11px;
	padding-left: 10px;
	padding-right: 10px;
}

.dfTabbar .dhx_tabbar-header .dhx_tabbar-tab-button--active {
	background: #2e3fa7 !important;
	border: 1px solid #2e3fa7;
	color: white;
}

.dfTabbar div.dhx_tabbar-header-active {
	display: none !important;
}

/* Custom tabbar row type (plain HTML, no DHX Tabbar) */
.dfTabbar-header {
	list-style: none;
	display: flex;
	margin: 0 0 5px 0;
	padding: 3px;
	height: 40px;
	border: 1px solid #2e3fa7;
	border-radius: 8px;
	overflow: hidden;
	background-color: white;
	box-sizing: border-box;
}

.dfTabbar-header li {
	padding: 0 3px;
	box-sizing: border-box;
}

.dfTabbar-btn {
	box-sizing: border-box;
	border: 1px solid transparent;
	background: transparent;
	height: 100%;
	border-radius: 8px;
	padding: 0 12px;
	font-size: 14px;
	cursor: pointer;
	white-space: nowrap;
	color: inherit;
	font-family: inherit;
	display: flex;
	align-items: center;
}

.dfTabbar-btn:hover {
	background: #eef0fb;
}

.dfTabbar-btn--active {
	background: #2e3fa7 !important;
	border: 1px solid #2e3fa7;
	color: white;
}

.dfLayoutCell {
	border-radius: 8px;
}

.dfLayoutCell > div.dhx_layout-cell-header {
	border-bottom: 1px solid gray;
}

.projectOverlayLayout {
	background: rgba(217, 217, 217, 0.2) !important;
	border-radius: 8px !important;
}

.roundedLayout {
	border-radius: 8px;
	overflow: hidden;
}

.roundedLayout .dhx_layout-cell-header {
	border-bottom: 1px solid gray;
}

.roundedLayout .dhx_list-item {
	border-bottom-width: 0 !important;
}

.roundedLayout .dhx_list-item:hover {
	background: transparent !important;
}

.projectBrief {
	background: rgba(217, 217, 217, 0.2) !important;
	border-radius: 8px !important;
}

.projectBrief > div {
	background-color: transparent;
}

.projectBrief > div > div {
	box-sizing: border-box;
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 8px;
}

.projectReqs {
	box-sizing: border-box;
	border-radius: 8px !important;
	border: 1px solid #e0e0e0 !important;
}

.projectOverlayMilestones {
	box-sizing: border-box;
	border-radius: 8px !important;
	border: 1px solid #e0e0e0 !important;
}

.projectOverlayMTP {
	box-sizing: border-box;
	border-radius: 8px !important;
	border: 1px solid #e0e0e0 !important;
	padding: 20px;
}

.gantt-error {
	display: none !important;
}

.ajs-modal {
	/*z-index: 30000 !important;*/
}

.vis-timeline {
	border: none !important;
}

.roundFramed {
	background: white;
	border-radius: 8px;
}


.dhx_tooltip--animate {
	z-index: 250000 !important;
}

.backgroundWhiteCell,
.backgroundWhite.dhx_list {
	background: white !important;
}
.favorites .dhx_toolbar-button__caret {
	display: none;
}

[data-cell-id='risksStat'] .dhx_list-item {
	margin-bottom: 20px !important;
}

[data-cell-id='risksStat'] li {
	height: auto !important;
}

.grid-stack-item-content .dhx_toolbar {
	background-color: var(--tocloco-blue);
}

.grid-stack-item-content .dhx_toolbar * {
	color: white;
}


[data-cell-id='nextweek'],
[data-cell-id='thisweek'],
[data-cell-id='boardmemberships'],
[data-cell-id='teammemberships'] {
	border-radius: 8px;
	border: 1px solid #dddddd;
	margin-left: 20px;
}

[data-cell-id='nextweek'] .dhx_list,
[data-cell-id='thisweek'] .dhx_list,
[data-cell-id='boardmemberships'] .dhx_list,
[data-cell-id='teammemberships'] .dhx_list {
	border: none !important;
}

[data-cell-id='teammemberships'] .dhx_layout-cell-header {
	background: var(--uiBlue);
}

[data-cell-id='boardmemberships'] .dhx_layout-cell-header {
	background: var(--uiBlue);
}

[data-cell-id='nextweek'] .dhx_layout-cell-header {
	background: var(--uiGreenBorder);
}

[data-cell-id='thisweek'] .dhx_layout-cell-header {
	background: var(--uiAmberBorder);
}

.weekActivityList .dhx_list-item {
	padding: 0 !important;
}

.e-gantt .e-timeline-cell.e-gantt-weekend,
.e-gantt .e-content .e-gantt-weekend {
	background-color: #f2f2f2;
}
[data-cell-id='layoutScroll'] {
	overflow-y: scroll;
}

.complexObjectLayout {
	background-color: rgb(246, 244, 251) !important;
}

.complexObjectLayout .dhx_layout-columns {
	background-color: rgb(246, 244, 251) !important;
}
.complexObjectLayout .dhx_form-fieldset {
	border: 0 !important;
}

.complexObjectLayout .dhx_layout-cell {
	background-color: transparent !important;
}

.complexObjectLayout .dhx_form {
	background-color: white;
	border: 1px solid rgb(216, 211, 211);
	border-radius: 8px;
	margin-bottom: 10px;
}

.complexObjectLayout .dhx_form.cpFormNoBorder {
	border: none;
	background: transparent;
	margin-bottom: 0;
}

.complexObjectLayout .dhx_form.cpFormNoCorner {
	border-radius: 0;
}

.complexToolbar {
	background: transparent !important;
	margin-top: 5px;
}
.complexToolbar .scroll-view-wrapper {
	border: 1px solid rgb(216, 211, 211);
	border-radius: 8px;
	padding-left: 10px !important;
}

.complexToolbar .functionToolbar {
	background: transparent !important;
}

.complexToolbar .functionToolbar .scroll-view-wrapper {
	background-color: white;
}

.initial-circle {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #007bff;
	color: white;
	font-weight: bold;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: sans-serif;
}


.complexObjectRow {
	display: flex;
	flex-direction: row;
}

.wrappedForm > div > fieldset > div {
	flex-wrap: wrap !important;
	flex-direction: row !important;
}

.termeditor-container {
	overflow: hidden !important;
}

.ajs-success {
	background-color: rgb(235, 255, 239) !important;
	border: 1px solid #cdcdcd !important;
	border-left: 5px solid rgb(91, 189, 114) !important;
	color: #333333 !important;
	border-radius: 8px;
}

.ajs-error {
	background-color: rgb(255, 223, 223) !important;
	border: 1px solid #cdcdcd !important;
	border-left: 5px solid rgb(217, 92, 92) !important;
	color: #333333 !important;
	border-radius: 8px;
}

.ajs-warning {
	background-color: rgb(255, 247, 176) !important;
	border: 1px solid #cdcdcd !important;
	border-left: 5px solid rgb(252, 248, 215) !important;
	color: #333333 !important;
	border-radius: 8px;
}

.complex_url_button button {
	margin-top: 25px;
	color: black;
	background-color: white !important;
}

.complex_url_button button span::before {
	font-size: 12px !important;
}

/* Inline input handler buttons (copy / call / sms / send next to phone, email, etc.) */
.df_input_handler_button {
	margin-top: 25px;
}
/* Variant for fields with hideLabel — no label space to skip past */
.df_input_handler_button-bare {
	margin-top: 0 !important;
}
.df_input_handler_button button {
	margin-top: 0 !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: #fff !important;
	border: 1px solid #d0d5dd !important;
	color: #475467 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.df_input_handler_button button:hover {
	background: #f1f5f9 !important;
	border-color: #94a3b8 !important;
	color: #1e293b !important;
}
.df_input_handler_button button:active {
	background: #e2e8f0 !important;
}
.df_input_handler_button button span::before {
	font-size: 15px !important;
}

.combo-separator {
	border-bottom: 1px solid #ccc;
	height: 1px;
	margin: 4px 0;
	pointer-events: none;
}

.createdSlider {
	position: absolute;
	top: 0;
	left: 120vw;
	bottom: 0;
	right: 0;
	z-index: 9999;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	transition:
		background-color 0.5s ease,
		backdrop-filter 0.5s ease,
		left 0.5s ease;
	overflow: hidden; /* Prevent content from causing page scroll */
}

.createdSlider.active {
	background-color: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.createdSlider .slideIn {
	left: 120vw;
	transition: left 0.5s ease;
}

.createdSlider > .dhx_layout > .dhx_layout-cell:nth-child(2) {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

/*
.createdSlider .dhx_layout-cell-header__collapse-icon::before {
	content: '\e59b'; 
	font-family: 'Font Awesome 6 Pro' !important;
	font-weight: 900;
	font-size: 16px;
}

.createdSlider .dhx_layout-cell-expand.dxi::before {
	content: '\e59b';
	font-family: 'Font Awesome 6 Pro' !important;
	font-weight: 900;
	font-size: 16px;
}
*/

.createdSlider .slideIn > .dhx_layout-cell-header {
	border-bottom: 1px solid gray;
}

.createdSlider .slideIn > .dhx_layout-cell-header > .dhx_layout-cell-header__collapse-icon::before {
	content: '\e59b'; /* FontAwesome down arrow */
	font-family: 'Font Awesome 6 Pro' !important;
	font-weight: 900;
	font-size: 16px;
}

.createdSlider .slideIn > .dhx_layout-cell-header > .dhx_layout-cell-expand.dxi::before {
	content: '\e59b'; /* FontAwesome up arrow */
	font-family: 'Font Awesome 6 Pro' !important;
	font-weight: 900;
	font-size: 16px;
}

/*
  Workloads overlay: ensure Bryntum Gantt + ResourceUtilization
  stay within the slide-in container without extending and causing scroll.
*/
.workload-container {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

/* Bryntum components inside the workload container */
.workload-container > .b-gantt {
	flex: 2 1 0;
	min-height: 0;
	min-width: 0;
}
.workload-container > .b-splitter {
	flex: 0 0 auto;
}
.workload-container > .b-resourceutilization {
	flex: 1 1 0;
	min-height: 0;
	min-width: 0;
}


.teamSummaryHeaders {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 10px !important;
	display: flex;
	padding-top: 20px;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.no-header .lat-header {
	display: none !important;
}


.complexObjectRow .dhx_layout {
	margin-bottom: 20px;
	border-radius: 8px;
}

.stack {
	position: fixed;
	width: 46px;
	height: 100vh;
	top: 0;
	left: -50px;
	border: 1px solid #e0e0e0;
	transition: left 0.5s ease-in-out;
	z-index: 2000000;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	background-color: white;
	overflow: hidden;
}

.stack.visible {
	left: 0;
}

.defined-map .leaflet-popup-content {
	font-size: 11px;
}

.currencySymbol input {
	padding-left: 25px;
}

.currencySymbol .dhx_input__container::before {
	/*content: '$';*/
	content: '£';
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

.complexHeader .dhx_layout-cell-header--row {
	padding-top: 0;
	padding-bottom: 0;
	border-bottom: solid 1px rgb(229, 229, 229);
}

.complexHeader .dhx_layout-cell-header h3 {
	font-size: 16px;
}

.noBorder {
	border: none !important;
}

.hiddenVaultFiles .dhx_simplevault__files {
	display: none;
}

.wrappedForm .e-file-drop {
	display: none !important;
}





.dfHidden {
	display: none;
}

.dfnotes {
	margin-top: 20px;
}

.dfnotes > div {
	margin-bottom: 20px;
	border: 1px solid #d7d2d2;
	padding: 10px;
	border-radius: 8px;
}

.df-defined-editable-cell::after {
	content: '✏️';
	position: absolute;
	top: 2px;
	right: 2px;
	font-size: 10px;
	opacity: 0.6;
}

/*
@media only screen and (min-width: 100px) and (max-width: 1110px) {
	body > div {
		zoom: 0.8;
	}
}

@media only screen and (min-width: 1110px) and (max-width: 1300px) {
	body > div {
		zoom: 0.9;
	}
}

@media only screen and (min-width: 1300px) and (max-width: 1500px) {
	body > div {
		zoom: 0.95;
	}
}
*/

.builderLayout {
	background-color: white !important;
	border-radius: 8px;
	border: 1px solid rgb(216, 211, 211);
}

/* ---------------------------------------------------------------------------
   A panel column takes its height from the flex row, so a column holding more
   panels than fit was simply clipped: the content was in the DOM and reachable
   by script, but nothing drew a scrollbar. The DHX scroll-view above it measures
   once at attach time and its runner stays zero-height when panels grow after
   that, so the column scrolls itself instead.

   Only a column whose content actually overflows gains a scrollbar; the rest are
   unaffected.
   --------------------------------------------------------------------------- */
.complexColumn {
	overflow-y: auto;
}

.complexColumn > div > .dhx_widget,
.complexColumn > div > .dfRowVisibilityWrapper > .dhx_widget {
	padding: 0 !important;
}

.complexColumn > div > .dhx_widget > div > .dhx_form-fieldset,
.complexColumn > div > .dfRowVisibilityWrapper > .dhx_widget > div > .dhx_form-fieldset {
	padding: 0 !important;
}

.complexColumn > div > .dhx_widget > div > .dhx_form-fieldset > .dhx_form-fieldset-legend,
.complexColumn > div > .dfRowVisibilityWrapper > .dhx_widget > div > .dhx_form-fieldset > .dhx_form-fieldset-legend {
	/*background-color: rgba(46, 63, 167, 0.3);*/
	background-color: var(--panelHeader);
	padding: 8px 16px 8px 16px !important;
	margin-left: 0 !important;
	color: var(--panelHeaderText);
	font-weight: bold;
	border-bottom: none;
}

.complexColumn > div > .dhx_widget > div > .dhx_form-fieldset > .dhx_layout-cell-content,
.complexColumn > div > .dfRowVisibilityWrapper > .dhx_widget > div > .dhx_form-fieldset > .dhx_layout-cell-content {
	padding-left: 10px;
	padding-right: 10px;
}

.complexColumn .complexHeader.backgroundTransparent {
	border: 1px solid var(--dhx-border-color, #dfdfdf);
	border-radius: 8px;
	background-color: #fff;
	overflow: hidden;
}

.dfRowVisibilityWrapper {
	height: inherit;
}

.justHeader {
	border: none !important;
	padding: 0 !important;
}

.justHeader .dhx_form-fieldset {
	padding: 0 !important;
	margin: 0 !important;
}

.justHeader .dhx_form-fieldset-legend {
	background-color: var(--panelHeader);
	padding: 8px 16px 8px 16px !important;
	margin-left: 0 !important;
	color: var(--panelHeaderText) !important;
}

.complexToolbar .functionToolbar > .scroll-view-wrapper {
	background-color: var(--tocloco-blue);
}

.complexToolbar .functionToolbar > .scroll-view-wrapper * {
	color: white;
}

.backgroundComplex {
	background-color: rgba(217, 217, 217, 0.2);
}

/*
colors for the stack
#stackPanel {
	border-color: var(--tocloco-blue);
}
#stackPanel > .dhx_sidebar,
#stackPanel > .dhx_sidebar > .dhx_widget > .scroll-view-wrapper {
	background-color: var(--tocloco-blue) !important;
}

#stackPanel button span {
	color: white;
}
*/

/* Initiative DataView Styles */
.initiative-dataview .dhx_dataview-item {
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	overflow: hidden;
	cursor: pointer;
}

.initiative-dataview .dhx_dataview-item:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
}

.initiative-card {
	padding: 20px;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.initiative-header {
	display: flex;
	align-items: flex-start;
	margin-bottom: 15px;
	gap: 10px;
}

.initiative-status {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-top: 8px;
	flex-shrink: 0;
}

.initiative-status.status-draft {
	background-color: #6c757d;
}
.initiative-status.status-proposed {
	background-color: #17a2b8;
}
.initiative-status.status-approved {
	background-color: #28a745;
}
.initiative-status.status-in_progress {
	background-color: #ffc107;
}
.initiative-status.status-on_hold {
	background-color: #fd7e14;
}
.initiative-status.status-completed {
	background-color: #20c997;
}
.initiative-status.status-cancelled {
	background-color: #dc3545;
}

.initiative-card h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	flex: 1;
}

.initiative-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.initiative-owner {
	font-size: 13px;
	color: #6c757d;
	display: flex;
	align-items: center;
	gap: 5px;
}

.initiative-dates {
	display: flex;
	gap: 15px;
	font-size: 12px;
	color: #6c757d;
}

.initiative-dates span {
	display: flex;
	align-items: center;
	gap: 5px;
}

.initiative-description {
	font-size: 14px;
	line-height: 1.5;
	color: #495057;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.initiative-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: auto;
}

.metric {
	text-align: center;
	padding: 8px;
	background-color: #f8f9fa;
	border-radius: 4px;
}

.metric-label {
	display: block;
	font-size: 11px;
	color: #6c757d;
	margin-bottom: 2px;
}

.metric-value {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: #212529;
}

.initiative-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid #e9ecef;
}

.initiative-tags {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	flex: 1;
}

.initiative-tags .tag {
	font-size: 11px;
	padding: 2px 8px;
	background-color: #e9ecef;
	border-radius: 12px;
	color: #495057;
}

.initiative-priority {
	font-size: 12px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 4px;
	white-space: nowrap;
}

.priority-tag {
	display: inline-block;
	padding: 2px 4px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 500;
	color: white;
	width: 100%;
	text-align: center;
}

.priority-critical {
	background-color: #dc3545;
	color: white;
}

.priority-high {
	background-color: #fd7e14;
	color: white;
}

.priority-medium {
	background-color: #ffc107;
	color: #212529;
}

.priority-low {
	background-color: #6c757d;
	color: white;
}

.initiative-category {
	font-size: 12px;
	color: #6c757d;
	font-style: italic;
}



.objectFiles {
	background-color: white !important;
	border: 1px solid rgb(216, 211, 211);
}

















div .e-custom-item {
	width: 100% !important;
}



.singleRowNoMargin fieldset {
	margin-bottom: 0 !important;
}

/* Stacked panels in a multi-row column — each form should size to its
   content. The complex editor only sets an explicit height on the
   container when a column has a single row (see defined_object_complex_editor.js
   col.rows.length === 1 branch); multi-row containers carry no inline
   style, so we target those and override DHX's default
   `height:100%; flex:1 1 auto` to stop each panel from claiming the full
   column height (which caused the Customer card to scroll). Forms
   explicitly tagged `.fullHeight` (e.g. relatedlists) keep the original
   behaviour.
   The inner `.dhx_layout-cell-content` rule is needed because DHX vendor
   CSS sets `max-height:100%; overflow-y:auto` on it — without overriding
   that, the outer form sizes to content but the inner cell still scrolls. */
.singleRowNoMargin:not([style]) > .dhx_widget.dhx_form:not(.fullHeight) {
	height: auto !important;
	flex: 0 0 auto !important;
}
.singleRowNoMargin:not([style]) > .dhx_widget.dhx_form:not(.fullHeight) .dhx_layout-cell-content {
	max-height: none !important;
	overflow: visible !important;
}

.dropdown-cell {
	position: relative;
	cursor: pointer !important;
	padding-right: 20px !important; /* Make room for the icon */
}


.dropdown-cell::after {
	content: '▼';
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	color: #666;
	font-size: 10px;
	pointer-events: none;
}

.dropdown-cell:hover::after {
	color: #333;
}


.fullHeight > div,
.fullHeight .dhx_form-fieldset {
	height: 100%;
}

.nopad > fieldset,
.nopad > fieldset > legend {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}
.nopad > fieldset > div {
	padding: 0 !important;
}

.layoutSpaced {
	justify-content: space-between;
}

.statbox {
	padding: 20px;
	border-radius: 8px !important;
	height: 100%;
	border-style: solid;
	border-width: 1px;
	display: flex;
	flex-direction: column;
	/*justify-content: space-between;*/
}

.statbox span:first-child {
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 50px;
}

.statbox span:nth-child(2) {
	font-weight: bold;
	font-size: 200%;
	margin-bottom: 10px;
	text-align: center;
}

.statbox span:nth-child(3) {
	text-align: right;
}


.globalsearch input {
	border-radius: 6px;
}

.globalsearch * {
	color: #333333 !important;
}

#pill-highlight {
	transition:
		left 0.1s ease,
		width 0.1s ease;
	box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
}

.splitDiv {
	display: flex;
	flex-direction: row;
}

.circle-stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 50% !important;
	gap: 10px;
}

.circle {
	width: 50px !important;
	height: 50px !important;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.circleLabel {
	color: var(--textColor, #333);
}
.circleRow {
	display: flex;
	align-items: center;
	gap: 12px;
}


.df-sidebar {
	width: 240px;
	background-color: #111827; /* dark slate */
	color: white;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: width 0.3s ease;
}

.df-sidebar.collapsed {
	width: 64px;
}

.df-sidebar-header {
	display: flex;
	align-items: center;
	padding: 1rem;
	background-color: #1f2937;
	border-bottom: 1px solid #374151;
}

.df-sidebar-logo {
	width: 24px;
	height: 24px;
	margin-right: 8px;
}

.df-sidebar-title {
	font-weight: 600;
	font-size: 1.1rem;
	transition: opacity 0.2s ease;
}

.df-sidebar.collapsed .df-sidebar-title {
	opacity: 0;
	pointer-events: none;
}

.df-sidebar-content {
	flex: 1;
	overflow-y: auto;
}

.df-sidebar-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.df-sidebar-menu li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	cursor: pointer;
	transition: background 0.2s;
}

.df-sidebar-menu li:hover {
	background: #374151;
}

.df-sidebar-menu li.active {
	background: #2563eb;
}

.df-sidebar.collapsed li span {
	display: none;
}

.df-sidebar-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1f2937;
	padding: 0.75rem;
}

.df-sidebar-toggle {
	background: none;
	border: none;
	color: white;
	font-size: 20px;
	cursor: pointer;
}

.df-resource-detail-grid {
	height: 110px !important;
	min-height: 110px !important;
	max-height: 110px !important;
}

.fontawesome-combo .icon-option {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
}
.fontawesome-combo .icon-option i {
	font-size: 18px;
	width: 24px;
	text-align: center;
}

.dhx_toolbar__item.bufferLeft .dhx_button.bufferLeft {
	margin-left: 0 !important;
}

.frontDoorGrid {
	padding: 20px;
	display: flex;
	height: 100%;
	cursor: pointer;
}
.frontDoorGrid > div:first-child {
	width: 75%;
	flex-direction: column;
	height: 100%;
	display: flex;
	justify-content: center;
	height: 100%;
}

.frontDoorGrid > div:first-child > div {
	display: flex;
	width: 100%;
}

.frontDoorGrid > div:nth-of-type(2) {
	width: 25%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.frontDoorGrid > div:nth-of-type(2) span {
	width: 50px;
	height: 50px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.frontDoorGrid .hero {
	font-size: 130%;
	font-weight: bold;
}

.angelStats {
	padding: 20px;
	display: flex;
	height: 100%;
}
.angelStats > div:first-child {
	width: 75%;
	flex-direction: column;
	height: 100%;
	display: flex;
	justify-content: center;
	height: 100%;
}

.angelStats > div:first-child > div {
	display: flex;
	width: 100%;
}

.angelStats > div:nth-of-type(2) {
	width: 25%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.angelStats > div:nth-of-type(2) span {
	width: 50px;
	height: 50px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.angelStats .hero {
	font-size: 200%;
	font-weight: bold;
}

.angelDash3Col {
	display: flex;
	margin-top: 10px;
}

.angelDash3Col > div:first-child {
	width: 60px;
}

.angelDash3Col > div:first-child span {
	width: 50px;
	height: 50px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #009200;
	color: white;
	font-weight: bold;
}

.angelDash3Col > div:nth-of-type(2) {
	font-weight: bold;
	width: calc(100% - 160px);
}

.angelDash3Col > div:nth-of-type(2) span {
	font-weight: normal;
}

.angelDash3Col > div:nth-of-type(3) {
	font-weight: bold;
	color: #009200;
	width: 100px;
}

.dfFormHeader {
	font-size: 16px;
	display: flex;
	justify-content: space-between;
	padding-left: 5px;
	padding-right: 5px;
	font-weight: bold;
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid #e0e0e0;
}

.dfFormHeader i {
	color: var(--tocloco-blue);
	font-size: 20px !important;
}

.dfFormHeader:has(+ .dfFormSubheader) {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}

.dfFormSubheader {
	padding-left: 5px;
	font-size: 13px;
	color: #666;
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid #e0e0e0;
}

.complexColumn .dhx_form input,
.complexColumn .dhx_form textarea,
.complexColumn .dhx_form .dhx_combobox-input-box {
	border-radius: 8px;
}

.w2ui-sidebar .w2ui-sidebar-body .w2ui-selected,
.w2ui-sidebar .w2ui-sidebar-body .w2ui-selected .w2ui-node-image > span,
.w2ui-sidebar .w2ui-sidebar-body .w2ui-selected:hover {
	background-color: var(--tocloco-blue);
	color: white;
}

.highlightPanel {
	background-color: var(--tocloco-blue);
	color: white;
}

.highlightPanel * {
	background-color: var(--tocloco-blue);
	color: white;
}

.highlightPanel .dhx_layout-cell-header--row {
	border-bottom: none;
}

#chatHost .dfc-chat {
	height: 100%;
}
#chatHost .df-open-shared-wrap {
	margin-top: 4px;
}
#chatHost .is-mine .df-open-shared {
	color: #fff;
	text-decoration: underline;
}

/* shared link styling (optional) */
#chatHost .df-open-shared {
	text-decoration: none;
	font-weight: 600;
}
#chatHost .df-open-shared:hover {
	text-decoration: underline;
}

/* Deal Report */
.dealReport {
	padding: 20px;
	overflow-y: auto;
	height: calc(100vh - 180px);
}
.dealReport-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 3px solid var(--tocloco-blue);
}
.dealReport-headerLeft h1 {
	margin: 0 0 4px;
	font-size: 22px;
	font-weight: 700;
	color: #1e293b;
}
.dealReport-headerLeft p {
	margin: 0;
	font-size: 13px;
	color: #64748b;
}
.dealReport-headerRight {
	text-align: right;
	font-size: 12px;
	color: #64748b;
	line-height: 1.6;
}
.dealReport-cols {
	display: flex;
	gap: 24px;
}
.dealReport-left {
	width: 40%;
}
.dealReport-right {
	width: 60%;
}
.dealReport-sectionHeader {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	background: var(--tocloco-blue);
	padding: 8px 12px;
	border-radius: 6px 6px 0 0;
	margin-bottom: 0;
	letter-spacing: 0.5px;
}
.dealReport-sectionHeader i {
	margin-right: 8px;
}
.dealReport-section {
	margin-bottom: 16px;
}
.dealReport-sectionBody {
	background: #f8f9fa;
	border: 1px solid #e2e8f0;
	border-top: none;
	border-radius: 0 0 6px 6px;
	padding: 14px;
}
.dealReport-stage {
	background: #fff;
	border-radius: 6px;
	padding: 12px;
	margin-bottom: 10px;
	border: 1px solid #e2e8f0;
}
.dealReport-stageHeader {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}
.dealReport-stageNum {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--tocloco-blue);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
	flex-shrink: 0;
}
.dealReport-stageName {
	font-weight: 600;
	font-size: 13px;
	flex-grow: 1;
}
.dealReport-stageScore {
	font-weight: 700;
	font-size: 13px;
	color: var(--tocloco-blue);
}
.dealReport-stageFields {
	padding-left: 36px;
}
.dealReport-field {
	display: flex;
	justify-content: space-between;
	padding: 2px 0;
	font-size: 12px;
	color: #64748b;
}
.dealReport-fieldScore {
	font-weight: 600;
	color: #334155;
}
.dealReport-stageBar {
	height: 5px;
	background: #e2e8f0;
	border-radius: 3px;
	margin-top: 8px;
	overflow: hidden;
}
.dealReport-stageBarFill {
	height: 100%;
	border-radius: 3px;
	background: linear-gradient(90deg, #22c55e, #16a34a);
	transition: width 0.6s ease;
}
.dealReport-stagePercent {
	text-align: right;
	font-size: 11px;
	font-weight: 600;
	color: #16a34a;
	margin-top: 3px;
}
.dealReport-detail {
	display: flex;
	justify-content: space-between;
	padding: 5px 0;
	border-bottom: 1px solid #f1f5f9;
	font-size: 13px;
}
.dealReport-detail:last-child {
	border-bottom: none;
}
.dealReport-detailLabel {
	font-weight: 600;
	color: #334155;
}
.dealReport-detailValue {
	color: #64748b;
	text-align: right;
	max-width: 65%;
}
.dealReport-summaryGrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.dealReport-highlights h4,
.dealReport-weakpoints h4 {
	font-size: 12px;
	font-weight: 700;
	margin: 0 0 6px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.dealReport-highlights h4 {
	color: #16a34a;
}
.dealReport-weakpoints h4 {
	color: #dc2626;
}
.dealReport-highlights ul,
.dealReport-weakpoints ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.dealReport-highlights li,
.dealReport-weakpoints li {
	padding: 3px 0;
	font-size: 12px;
	color: #475569;
}
.dealReport-highlights li::before {
	content: '+ ';
	color: #16a34a;
	font-weight: 700;
}
.dealReport-weakpoints li::before {
	content: '- ';
	color: #dc2626;
	font-weight: 700;
}
.dealReport-configGrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}
.dealReport-configGrid .dealReport-detail {
	padding: 5px 8px;
}
.dealReport-readinessRow {
	display: flex;
	gap: 16px;
}
.dealReport-readinessChart {
	flex: 1;
}
.dealReport-valuator {
	flex: 1;
}
.dealReport-valuatorRow {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
}
.dealReport-valuatorLabel {
	width: 120px;
	font-size: 12px;
	font-weight: 500;
	color: #334155;
	flex-shrink: 0;
}
.dealReport-valuatorBar {
	flex-grow: 1;
	height: 8px;
	background: #e2e8f0;
	border-radius: 4px;
	overflow: hidden;
}
.dealReport-valuatorBarFill {
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(90deg, #3b82f6, #2563eb);
	transition: width 0.6s ease;
}
.dealReport-valuatorScore {
	width: 30px;
	text-align: right;
	font-size: 12px;
	font-weight: 600;
	color: #334155;
}

.backgroundWhiteCell {
	background: white !important;
}


.dfFormButton button {
	background: rgba(46, 63, 167, 0.1);
	border-radius: 8px;
	padding-left: 10px;
	padding-right: 10px;
	height: 80%;
	margin-bottom: 5px;
	transition: background-color 200ms linear;
}

.dfFormButton button:hover {
	background: rgba(46, 63, 167, 0.3);
}

/* ============ Room Map 3D Visualization ============ */

.roommap-rack-label {
	color: #333;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 10px;
	font-weight: 600;
	padding: 2px 5px;
	background: rgba(255, 255, 255, 0.88);
	border-radius: 3px;
	border: 1px solid #bbb;
	white-space: nowrap;
	pointer-events: none;
	line-height: 1.2;
}

.roommap-grid-label {
	color: #888;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 11px;
	font-weight: 500;
	pointer-events: none;
}

.roommap-selection-rect {
	position: absolute;
	border: 2px dashed var(--tocloco-blue);
	background: rgba(48, 65, 176, 0.1);
	pointer-events: none;
	z-index: 10;
}

.roommap-legend {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 6px 12px;
	font-size: 12px;
	color: #666;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.roommap-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

.roommap-legend-swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	border: 1px solid #ccc;
	flex-shrink: 0;
}

.roommap-context-menu {
	position: fixed;
	z-index: 10000001;
	min-width: 200px;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.18);
	padding: 6px 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 13px;
}

.roommap-context-header {
	padding: 8px 14px 4px;
	font-weight: 600;
	font-size: 14px;
	color: #222;
	border-bottom: 1px solid #eee;
	margin-bottom: 4px;
}

.roommap-context-info {
	padding: 2px 14px 6px;
	font-size: 11px;
	color: #888;
}

.roommap-context-item {
	padding: 7px 14px;
	cursor: pointer;
	color: #333;
	display: flex;
	align-items: center;
	gap: 8px;
}

.roommap-context-item:hover {
	background: #f0f4ff;
	color: #1565c0;
}

.roommap-context-item i {
	width: 16px;
	text-align: center;
}

.w2ui-sidebar-flat .w2ui-node-group {
	display:  none
}

.w2ui-sidebar {
	background: transparent
}

.w2ui-node-group.df-sidebar-separator {
	border-top: 1px solid #ddd;
	margin-top: 8px;
	padding-top: 8px;
}

.w2ui-sidebar .w2ui-sidebar-body .w2ui-node-group.df-sidebar-section-header {
	border-top: 1px solid #aaa;
	margin-top: 12px;
	padding: 8px 10px;
	background: #d9d9f7;
	color: #333;
	pointer-events: none;
	position: sticky;
	top: 0;
	z-index: 10;
	box-shadow: 0 -12px 0 0 #fff;
}

.w2ui-sidebar .w2ui-sidebar-body .w2ui-node-group.df-sidebar-section-header.df-sidebar-section-header--blue {
	background: #c5dbf5;
	color: #0c447c;
}

/* ── Grid Popup Timeline ────────────────────────────────────── */

.df-grid-popup {
	position: fixed;
	z-index: 10000;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
	padding: 16px 20px;
	min-width: 200px;
	max-width: 320px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease-out;
}

.df-grid-popup.visible {
	opacity: 1;
}

.df-grid-popup-header {
	font-size: 13px;
	font-weight: 600;
	color: #333;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.df-grid-popup-header i {
	color: #666;
}

.df-grid-popup-steps {
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
}

.df-grid-popup-step {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	padding: 4px 0;
}

.df-grid-popup-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid #ccc;
	background: #fff;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

/* Connecting line between dots */
.df-grid-popup-step:not(:last-child) .df-grid-popup-dot::after {
	content: '';
	position: absolute;
	top: 12px;
	left: 3px;
	width: 2px;
	height: calc(100% + 8px);
	background: #ddd;
}

.df-grid-popup-step.completed .df-grid-popup-dot::after {
	background: #22c55e;
}

.df-grid-popup-step span {
	font-size: 12px;
	color: #888;
	line-height: 1.3;
}

/* Completed steps */
.df-grid-popup-step.completed .df-grid-popup-dot {
	border-color: #22c55e;
	background: #22c55e;
}

.df-grid-popup-step.completed span {
	color: #555;
}

/* Active (current) step */
.df-grid-popup-step.active .df-grid-popup-dot {
	border-color: #22c55e;
	background: #22c55e;
	width: 14px;
	height: 14px;
	margin-left: -1px;
	margin-right: -1px;
}

.df-grid-popup-step.active span {
	color: #111;
	font-weight: 600;
}

/* Gallery view search */
.dfGallerySearch {
	display: flex;
	align-items: center;
	padding: 12px 16px 0;
	position: relative;
}

.dfGallerySearch__icon {
	position: absolute;
	left: 28px;
	color: #94a3b8;
	font-size: 14px;
	pointer-events: none;
}

.dfGallerySearch__input {
	width: 300px;
	padding: 8px 12px 8px 32px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 13px;
	outline: none;
	transition: border-color 0.15s;
}

.dfGallerySearch__input:focus {
	border-color: #6366f1;
}

/* Gallery view cards */
.dfGalleryGrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	padding: 16px;
	overflow-y: auto;
	height: calc(100% - 48px);
	align-content: start;
}

.dfGalleryCard {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	transition: box-shadow 0.15s, border-color 0.15s;
	cursor: pointer;
	overflow: hidden;
}

.dfGalleryCard:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	border-color: #c7d2fe;
}

.dfGalleryCard__image {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #f1f5f9;
	overflow: hidden;
}

.dfGalleryCard__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dfGalleryCard__tag {
	position: absolute;
	top: 8px;
	right: 8px;
	background: rgba(99, 102, 241, 0.85);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	line-height: 1.4;
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dfGalleryCard__info {
	padding: 10px 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.dfGalleryCard__name {
	font-size: 13px;
	font-weight: 500;
	color: #1e293b;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}

.dfGalleryCard__ext {
	font-size: 11px;
	font-weight: 600;
	color: #94a3b8;
	text-transform: uppercase;
	flex-shrink: 0;
}

.dfGalleryCard--selected {
	border-color: #6366f1;
	box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dfGalleryCard__text {
	font-size: 12px;
	color: #475569;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

.dfGalleryCard__tooltip {
	display: none;
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	max-width: 300px;
	padding: 8px 12px;
	background: #1e293b;
	color: #f8fafc;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	z-index: 100;
	word-break: break-word;
	pointer-events: none;
}

.dfGalleryCard:hover .dfGalleryCard__tooltip {
	display: block;
}

legend.dhx_form-fieldset-legend,
.dfFormHeader span {
	color: var(--tocloco-blue) !important;
}

/* Enhanced Files Row Type */
.enhancedfiles-upload-zone {
	border: 2px dashed #CBD5E1;
	border-radius: 12px;
	padding: 40px 20px;
	text-align: center;
	background: #F8FAFC;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}

.enhancedfiles-upload-zone:hover {
	border-color: #3B82F6;
	background: #EFF6FF;
}

.enhancedfiles-drag-over {
	border-color: #3B82F6 !important;
	background: #DBEAFE !important;
	border-style: solid !important;
}

.enhancedfiles-uploading {
	opacity: 0.6;
	pointer-events: none;
}


.enhancedfiles-download-btn:hover {
	background: #2563EB !important;
}

.enhancedfiles-delete-btn:hover {
	color: #EF4444 !important;
}

@keyframes dfSpin {
	to { transform: rotate(360deg); }
}
.df-login-spinner {
	width: 40px;
	height: 40px;
	border: 4px solid #e0e0e0;
	border-top-color: var(--tocloco-blue);
	border-radius: 50%;
	animation: dfSpin 0.8s linear infinite;
}

/* DHX Suite 9.1's `loading` button property hides the button text and swaps in
   <span class="dhx_button__loading-icon dxi dxi-loading">. This build ships no
   dxi-* glyph rules at all (the app uses FontAwesome), and `.dxi` sets
   font-size:0 — so the loading state rendered as a blank button. Draw the
   spinner with borders instead, which needs no icon font. */
.dhx_button__loading-icon.dxi {
	width: 16px;
	height: 16px;
	box-sizing: border-box;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation-duration: 0.8s;
}

/* ─────────────────────────────────────────────
   heroSummary row type
   ───────────────────────────────────────────── */

.heroSummary-card {
	padding: 22px 22px 18px;
	border-radius: 8px;
	border: 1px solid rgb(216, 211, 211);
	margin-bottom: 12px;
	position: relative;
	transition: opacity 180ms ease, transform 180ms ease;
}

/* Backgrounds */
.heroSummary-bg-white  { background: #fff; }
.heroSummary-bg-subtle { background: linear-gradient(180deg, #f8fafc 0%, #fff 60%); }
.heroSummary-bg-brand  { background: linear-gradient(180deg, rgba(48,65,176,0.04) 0%, #fff 60%); }

/* Main layout: avatar + content + actions */
.heroSummary-main {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}

/* Avatar */
.heroSummary-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
	font-weight: 600;
	letter-spacing: 0.5px;
	user-select: none;
}
.heroSummary-avatar-initials {
	font-family: inherit;
}
.heroSummary-avatar-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Content column */
.heroSummary-content {
	flex: 1;
	min-width: 0;
}

/* Title + tags row — title on top, tags always wrapped below for visual
   consistency regardless of viewport width. */
.heroSummary-titleTagRow {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 6px;
}

.heroSummary-titleRegion {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	max-width: 720px;
}

.heroSummary-titleText {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.3px;
	color: #0f172a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	max-width: 100%;
	display: inline-block;
}

.heroSummary-titleInput {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.3px;
	color: #0f172a;
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 2px 6px;
	margin: -2px -6px;
	background: transparent;
	outline: none;
	width: 100%;
	min-width: 120px;
	text-overflow: ellipsis;
	transition: border-color 150ms ease, background 150ms ease;
}
.heroSummary-titleInput:hover {
	border-color: #e2e8f0;
	background: #f8fafc;
}
.heroSummary-titleInput-focused,
.heroSummary-titleInput:focus {
	border-color: var(--tocloco-blue);
	background: #fff;
	box-shadow: 0 0 0 2px rgba(48, 65, 176, 0.12);
}

.heroSummary-titleAffix {
	font-size: 22px;
	font-weight: 400;
	color: #94a3b8;
	letter-spacing: -0.3px;
	white-space: nowrap;
}

/* Subtitle */
.heroSummary-subtitle {
	font-size: 13px;
	color: #64748b;
	line-height: 1.4;
	margin-bottom: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Tags */
.heroSummary-tags {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.heroSummary-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	line-height: 20px;
	white-space: nowrap;
	user-select: none;
}

/* Meta strip */
.heroSummary-meta {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 10px;
}
.heroSummary-metaItem {
	display: flex;
	align-items: center;
	gap: 5px;
}
.heroSummary-metaLabel {
	font-size: 11px;
	font-weight: 500;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.heroSummary-metaValue {
	font-size: 11px;
	font-weight: 600;
	color: #334155;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.heroSummary-metaCode {
	font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
	font-size: 11px;
	color: #64748b;
	background: #f1f5f9;
	padding: 1px 6px;
	border-radius: 3px;
}
.heroSummary-metaTag {
	padding: 1px 8px;
	border-radius: 10px;
	font-size: 10px;
}
.heroSummary-metaSuffix {
	color: #94a3b8;
	font-weight: 400;
	margin-left: 2px;
}
.heroSummary-metaValue--warning {
	color: rgb(165, 80, 30);
}
.heroSummary-metaValue--danger {
	color: rgb(165, 42, 42);
}
.heroSummary-metaValue--empty {
	color: #cbd5e1;
	font-weight: 400;
}
.heroSummary-metaUserAvatar {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	object-fit: cover;
	vertical-align: middle;
}

/* Actions */
.heroSummary-actions {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	flex-shrink: 0;
	margin-left: auto;
	padding-top: 2px;
}
.heroSummary-actionBtn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	background: #fff;
	color: #334155;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: background 120ms ease, border-color 120ms ease;
}
.heroSummary-actionBtn:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
}
.heroSummary-actionBtn-primary {
	background: var(--tocloco-blue);
	color: #fff;
	border-color: var(--tocloco-blue);
}
.heroSummary-actionBtn-primary:hover {
	background: #2a369e;
	border-color: #2a369e;
}
.heroSummary-actionBtn-iconOnly {
	padding: 7px 10px;
	gap: 0;
	min-width: 34px;
	justify-content: center;
}
.heroSummary-actionBtn-iconOnly i {
	margin: 0;
}
.heroSummary-actionBtn--success {
	background: rgb(34, 140, 84);
	color: #fff;
	border-color: rgb(34, 140, 84);
}
.heroSummary-actionBtn--success:hover {
	background: rgb(26, 110, 66);
	border-color: rgb(26, 110, 66);
}
.heroSummary-actionBtn--danger {
	background: rgb(180, 60, 60);
	color: #fff;
	border-color: rgb(180, 60, 60);
}
.heroSummary-actionBtn--danger:hover {
	background: rgb(150, 40, 40);
	border-color: rgb(150, 40, 40);
}

/* Action overflow dropdown */
.heroSummary-actionMoreWrapper {
	position: relative;
}
.heroSummary-actionMore {
	padding: 7px 10px;
	font-size: 16px;
	letter-spacing: 2px;
}
.heroSummary-actionDropdown {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 4px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	z-index: 100;
	min-width: 180px;
}
.heroSummary-actionDropdownItem {
	padding: 8px 14px;
	font-size: 12px;
	color: #334155;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
}
.heroSummary-actionDropdownItem:hover {
	background: #f8fafc;
}
.heroSummary-actionDropdownItem:first-child {
	border-radius: 8px 8px 0 0;
}
.heroSummary-actionDropdownItem:last-child {
	border-radius: 0 0 8px 8px;
}

/* Extension strip */
.heroSummary-extension {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 22px;
	margin: 14px -22px -18px;
	border-top: 1px solid #e2e8f0;
	border-radius: 0 0 8px 8px;
	background: #f8fafc;
}
.heroSummary-extLeft {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.heroSummary-extRight {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.heroSummary-extHeader {
	font-size: 12px;
	font-weight: 600;
	color: #334155;
}
.heroSummary-extSubheader {
	font-size: 11px;
	color: #64748b;
}
.heroSummary-extBadge {
	font-size: 11px;
	font-weight: 500;
	color: #64748b;
	background: #e2e8f0;
	padding: 2px 8px;
	border-radius: 10px;
}
.heroSummary-extAction {
	font-size: 11px;
	padding: 5px 12px;
}

/* Score strip extension */
.heroSummary-scoreStrip {
	display: flex;
	align-items: stretch;
	gap: 0;
	flex-wrap: nowrap;
}
.heroSummary-scoreTile {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px 12px;
	border-right: 1px solid #e2e8f0;
}
.heroSummary-scoreTile:last-child {
	border-right: none;
}
.heroSummary-scoreTileLabel {
	font-size: 10px;
	font-weight: 500;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin-bottom: 2px;
}
.heroSummary-scoreTileValue {
	font-size: 18px;
	font-weight: 700;
	color: #0f172a;
}

/* Pipeline strip extension — horizontal stage pills for DEAL hero */
.heroSummary-pipelineStrip {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 12px;
	flex-wrap: wrap;
}
.heroSummary-pipelinePill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	border: 1px solid transparent;
}
.heroSummary-pipelinePill--done {
	background: rgba(34, 140, 84, 0.12);
	color: rgb(26, 95, 60);
	border-color: rgba(34, 140, 84, 0.25);
}
.heroSummary-pipelinePill--current {
	background: rgb(46, 63, 167);
	color: #fff;
	border-color: rgb(46, 63, 167);
}
.heroSummary-pipelinePill--future {
	background: #f1f5f9;
	color: #94a3b8;
	border-color: #e2e8f0;
}
.heroSummary-pipelinePill--terminal {
	background: rgba(120, 120, 120, 0.12);
	color: rgb(70, 70, 70);
	border-color: rgba(120, 120, 120, 0.25);
	font-style: italic;
}
.heroSummary-pipelinePillDuration {
	font-size: 10px;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.25);
	padding: 1px 6px;
	border-radius: 8px;
}
.heroSummary-pipelineSep {
	width: 6px;
	height: 1px;
	background: #cbd5e1;
}

/* Compact sticky header */
.heroSummary-compact {
	display: none;
	align-items: center;
	gap: 12px;
	padding: 8px 22px;
	background: #fff;
	border-bottom: 1px solid #e2e8f0;
	position: sticky;
	top: 0;
	z-index: 10;
	height: 56px;
	box-sizing: border-box;
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 180ms ease, transform 180ms ease;
}
.heroSummary-compact-visible {
	opacity: 1;
	transform: translateY(0);
}
.heroSummary-compactTitle {
	font-size: 15px;
	font-weight: 600;
	color: #0f172a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.heroSummary-card-collapsed {
	opacity: 0;
	transform: translateY(-10px);
	pointer-events: none;
	max-height: 0;
	overflow: hidden;
	padding: 0 22px;
	margin: 0;
}

/* heroSummary — idStack avatar variant (ref pill + epic pill) */
.heroSummary-idStack {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 90px;
	min-width: 90px;
	flex-shrink: 0;
}
.heroSummary-idStackRef {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.3px;
	background: #f1f5f9;
	color: #475569;
	border-radius: 4px;
	padding: 3px 6px;
	text-align: center;
}
.heroSummary-idStackEpic {
	font-size: 10px;
	font-weight: 500;
	background: #ede9fe;
	color: #6d28d9;
	border-radius: 4px;
	padding: 3px 6px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.heroSummary-idStackEpic--empty {
	background: #f8fafc;
	color: #94a3b8;
	font-style: italic;
}

/* heroSummary — conditional banner (e.g. blocked notice) */
.heroSummary-bannerSlot { display: block; }
.heroSummary-banner {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 13px;
	margin-top: 10px;
}
.heroSummary-banner--warn   { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.heroSummary-banner--danger { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.heroSummary-banner--info   { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.heroSummary-bannerText { flex: 1; }
.heroSummary-bannerAction {
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	border-radius: 6px;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	flex-shrink: 0;
}
.heroSummary-bannerAction:hover { background: rgba(0, 0, 0, 0.05); }

/* heroSummary — pipelineStrip: completed check, clickable + warn states */
.heroSummary-pipelinePillCheck { margin-right: 5px; font-size: 10px; }
.heroSummary-pipelinePill--clickable { cursor: pointer; }
.heroSummary-pipelinePill--clickable:hover { filter: brightness(0.96); }
.heroSummary-pipelinePill--warn { box-shadow: inset 0 0 0 2px #fbbf24; }
.heroSummary-metaValue--empty { font-style: italic; }

/* ─────────────────────────────────────────────
   consentBanner row type
   ───────────────────────────────────────────── */

.consentBanner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 22px;
	margin-bottom: 22px;
	border-radius: 10px;
	background: #fbf3e2;
	border: 1px solid #ebd9b3;
	color: #6a4a17;
}
.consentBanner-left {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}
.consentBanner-icon {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #efc97a;
	color: #7a4f0e;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}
.consentBanner-text { min-width: 0; }
.consentBanner-header {
	font-size: 15px;
	font-weight: 600;
	color: #4a350a;
	line-height: 1.3;
}
.consentBanner-subheader {
	font-size: 13px;
	color: #8b6c2a;
	line-height: 1.4;
	margin-top: 2px;
}
.consentBanner-toggles {
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
	align-items: flex-start;
}
.consentBanner-toggle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 90px;
}
.consentBanner-toggleLabel {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.6px;
	color: #6f5a2c;
	text-align: center;
}
.consentBanner-toggleState {
	font-size: 12px;
	color: #6f5a2c;
	text-align: center;
}
.consentBanner-switch {
	width: 44px;
	height: 24px;
	border-radius: 999px;
	background: #e8d6a8;
	border: 1px solid #d8c386;
	position: relative;
	padding: 0;
	cursor: pointer;
	transition: background 160ms ease, border-color 160ms ease;
}
.consentBanner-switch:disabled { cursor: wait; opacity: 0.7; }
.consentBanner-switchThumb {
	position: absolute;
	top: 1px;
	left: 1px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.18);
	transition: transform 160ms ease;
}
.consentBanner-switch-on {
	background: #b6dfb6;
	border-color: #7fbf7f;
}
.consentBanner-switch-on .consentBanner-switchThumb {
	transform: translateX(20px);
}
.consentBanner-toggle-negative .consentBanner-switch-on {
	background: #f1b8b8;
	border-color: #d77f7f;
}

/* Unknown / not-reviewed state */
.consentBanner-switch-unknown {
	background: #ece1c5;
	border-color: #d6c69c;
	border-style: dashed;
}
.consentBanner-switch-unknown .consentBanner-switchThumb {
	transform: translateX(10px);
	background: #f0e7d0;
	box-shadow: none;
	opacity: 0.85;
}
.consentBanner-toggleState-unknown {
	font-style: italic;
	color: #a08552;
}

/* "Review needed" pill in the header */
.consentBanner-reviewPill {
	display: inline-block;
	margin-left: 10px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #d97706;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	vertical-align: middle;
}


/* Field-left icon (rendered when a form field has an `icon` property) */
.df_field_left_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	margin-top: 25px;
	color: #64748b;
	font-size: 18px;
}
.df_field_left_icon i {
	line-height: 1;
}
/* Variant for fields with hideLabel — no label space to skip past */
.df_field_left_icon-bare {
	margin-top: 0;
}

/* Activity timeline row type — chronological feed of ACTIVITY records */
.activityTimeline {
	padding: 4px 0;
}
.actTimeline-item {
	display: flex;
	gap: 12px;
	padding: 12px 14px;
	border-bottom: 1px solid #eef0f3;
	cursor: pointer;
	transition: background 100ms ease;
}
.actTimeline-item:last-child { border-bottom: none; }
.actTimeline-item:hover { background: #f8fafc; }
.actTimeline-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}
.actTimeline-body { flex: 1; min-width: 0; }
.actTimeline-header {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.actTimeline-type {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #64748b;
}
.actTimeline-name {
	font-size: 14px;
	font-weight: 500;
	color: #0f172a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}
.actTimeline-status {
	font-size: 10px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	background: #f1f5f9;
	color: #475569;
}
.actTimeline-status-completed { background: #dcfce7; color: #15803d; }
.actTimeline-status-cancelled { background: #fee2e2; color: #b91c1c; }
.actTimeline-status-planned   { background: #dbeafe; color: #1d4ed8; }
.actTimeline-meta {
	font-size: 12px;
	color: #94a3b8;
	margin-top: 2px;
}
.actTimeline-notes {
	font-size: 13px;
	color: #475569;
	margin-top: 6px;
	line-height: 1.4;
	white-space: pre-wrap;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Group preference pills (e.g. Primary on work vs personal phone) */
.df_group_pill {
	margin-top: 25px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.4px;
	cursor: pointer;
	border: 1px solid transparent;
	height: 36px;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.df_group_pill-primary {
	background: #3041b0;
	color: #fff;
	border-color: #3041b0;
}
.df_group_pill-primary:hover {
	background: #283a99;
}
.df_group_pill-secondary {
	background: #fff;
	color: #64748b;
	border-color: #d0d5dd;
}
.df_group_pill-secondary:hover {
	background: #f1f5f9;
	color: #1e293b;
	border-color: #94a3b8;
}

/* Tighten vertical gap between rows that contain hideLabel fields. The row
   containers each carry a fixed gap, so we pull the *next* row up via its
   margin-top rather than shrinking the row itself with a negative
   margin-bottom — the latter undercounts the parent's content height by
   16px per row and causes clipping when the panel is auto-sized to
   content (e.g. stacked panels in a multi-row column). */
.dhx_layout-cell.dhx_layout-columns:has(.df_field_left_icon-bare) + .dhx_layout-cell.dhx_layout-columns:has(.df_field_left_icon-bare),
.dhx_layout-cell.dhx_layout-columns:has(.df_input_handler_button-bare) + .dhx_layout-cell.dhx_layout-columns:has(.df_input_handler_button-bare),
.dhx_layout-cell.dhx_layout-columns:has(.df_field_left_icon-bare) + .dhx_layout-cell.dhx_layout-columns:has(.df_input_handler_button-bare),
.dhx_layout-cell.dhx_layout-columns:has(.df_input_handler_button-bare) + .dhx_layout-cell.dhx_layout-columns:has(.df_field_left_icon-bare) {
	margin-top: -16px;
}

.complexColumn .dhx_form-fieldset .dhx_layout-rows,
.complexColumn .dhx_form-fieldset .dhx_form-group--container {
	padding-bottom: 0 ;
	margin-bottom: 0 ;
}

/* Chips field — pill-button picker for indexedSelect-style options. */
.dfChipsField .dfChipsContainer {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-height: 32px;
	margin-bottom: 12px;
}
.dfChipsField .dfChip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	background: #ffffff;
	color: #374151;
	font-size: 13px;
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.dfChipsField .dfChip:hover {
	background: #f3f4f6;
	border-color: #9ca3af;
}
.dfChipsField .dfChip i {
	font-size: 12px;
	width: 14px;
	text-align: center;
}
.dfChipsField .dfChip--selected {
	background: #e0e7ff;
	border-color: #6366f1;
	color: #3730a3;
}
.dfChipsField .dfChip--selected:hover {
	background: #c7d2fe;
	border-color: #4f46e5;
}
.dfChipsField .dfChip--disabled {
	cursor: not-allowed;
	opacity: 0.6;
}
.dfChipsField .dfChip--disabled:hover {
	background: #ffffff;
	border-color: #d1d5db;
}

/* Topbar Stop-timer button — visible only while a timer is running so the
   user always has a one-click exit from anywhere in the app. */
.dhx_toolbar-item.topbarTimerStop .dhx_button {
	color: #ffffff !important;
	background: #ef4444 !important;
}
.dhx_toolbar-item.topbarTimerStop .dhx_button:hover {
	background: #dc2626 !important;
}

/* Compact deal health panel — replaces the legacy radial gauge with a score
   + 4-factor breakdown. Aggregate score on the left, factor list on the right. */
.dealHealthCompact {
	display: flex;
	height: 100%;
	gap: 16px;
	padding: 12px;
	box-sizing: border-box;
	align-items: stretch;
}
.dealHealthCompact-aggregate {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border-radius: 10px;
	min-width: 90px;
}
.dealHealthCompact-aggregate--success { background: rgba(34, 140, 84, 0.12); color: rgb(26, 95, 60); }
.dealHealthCompact-aggregate--warning { background: rgba(165, 80, 30, 0.12); color: rgb(140, 65, 20); }
.dealHealthCompact-aggregate--danger { background: rgba(165, 42, 42, 0.12); color: rgb(140, 30, 30); }
.dealHealthCompact-score { font-size: 32px; font-weight: 700; line-height: 1; }
.dealHealthCompact-aggLabel { font-size: 11px; font-weight: 500; margin-top: 4px; text-align: center; }
.dealHealthCompact-factors { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.dealHealthCompact-factor {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
}
.dealHealthCompact-factorLabel { color: #64748b; }
.dealHealthCompact-factorValue { font-weight: 600; }
.dealHealthCompact-factorValue--success { color: rgb(26, 95, 60); }
.dealHealthCompact-factorValue--warning { color: rgb(140, 65, 20); }
.dealHealthCompact-factorValue--danger { color: rgb(140, 30, 30); }
.dealHealthCompact-factorValue--neutral { color: #94a3b8; }

/* Next best action panel — headline + suggestion + action buttons. */
.dealNextAction {
	display: flex;
	flex-direction: column;
	padding: 12px;
	box-sizing: border-box;
	gap: 8px;
}
.dealNextAction-headline {
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
	line-height: 1.3;
}
.dealNextAction-suggestion {
	font-size: 12px;
	color: #475569;
	line-height: 1.4;
}
.dealNextAction-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.dealNextAction-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid #e2e8f0;
	background: #fff;
	color: #334155;
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 12px;
	cursor: pointer;
	transition: background 150ms, border-color 150ms;
}
.dealNextAction-btn:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
}
.dealNextAction-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: 8px;
	color: #94a3b8;
	font-size: 13px;
}
.dealNextAction-empty i {
	font-size: 24px;
	color: rgb(34, 140, 84);
}
/* Flash highlight applied to a form-group when openContactPicker fires.
   Two-second pulse around the field so the user can find what to fill in. */
.dealNextAction-highlight {
	animation: dealNextActionHighlight 2s ease-out;
	border-radius: 6px;
}
@keyframes dealNextActionHighlight {
	0%   { box-shadow: 0 0 0 3px rgba(46, 63, 167, 0.55); background: rgba(46, 63, 167, 0.08); }
	60%  { box-shadow: 0 0 0 3px rgba(46, 63, 167, 0.25); background: rgba(46, 63, 167, 0.04); }
	100% { box-shadow: 0 0 0 0 rgba(46, 63, 167, 0);    background: transparent; }
}

/* highlightIfEmpty form field — applied when a field has highlightIfEmpty:true
   in the entity definition AND the value is null/empty. Tones the label and
   input border in warning amber to flag a missing-but-expected value. */
.df-form-empty-warning .dhx_form-group label,
.df-form-empty-warning label {
	color: rgb(165, 80, 30) !important;
	font-weight: 600;
}
.df-form-empty-warning .dhx_input,
.df-form-empty-warning .dhx_input__wrapper {
	border-color: rgb(217, 175, 130) !important;
	background-color: rgba(255, 244, 230, 0.4);
}

/* ── Approvals view ─────────────────────────────────────────────── */
#approvalControls {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 40px;
	padding: 0 4px 6px 4px;
}
.approvalTabs {
	display: flex;
	gap: 6px;
}
.approvalTab {
	border: none;
	background: transparent;
	padding: 6px 12px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	color: #475569;
	display: flex;
	align-items: center;
	gap: 6px;
}
.approvalTab:hover {
	background: #f1f5f9;
}
.approvalTabActive {
	background: #e0e7ff;
	color: #3730a3;
	font-weight: 600;
}
.approvalTabCount {
	background: rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	padding: 0 7px;
	font-size: 11px;
	line-height: 18px;
	min-width: 18px;
	text-align: center;
}
.approvalTabActive .approvalTabCount {
	background: #c7d2fe;
}
.approvalBulk {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}
.approvalBulkLabel {
	font-size: 13px;
	color: #334155;
}
.approvalBulkBtn,
.approvalActionBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border: 1px solid #d6dde6;
	background: #fff;
	border-radius: 7px;
	padding: 6px 12px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: #475569;
	transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.approvalBulkBtn:hover,
.approvalActionBtn:hover {
	background: #f1f5f9;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.approvalActions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	height: 100%;
}
.approvalApprove {
	border-color: #bbf7d0;
	background: #f0fdf4;
	color: #15803d;
}
.approvalApprove:hover {
	background: #16a34a;
	border-color: #16a34a;
	color: #fff;
}
.approvalReject {
	border-color: #fecaca;
	background: #fef2f2;
	color: #b91c1c;
}
.approvalReject:hover {
	background: #dc2626;
	border-color: #dc2626;
	color: #fff;
}
.approvalStatusApproved {
	color: #16a34a;
	font-weight: 600;
}
.approvalStatusRejected {
	color: #dc2626;
	font-weight: 600;
}
.approvalStatusPending {
	color: #d97706;
	font-weight: 600;
}
.approvalDetail {
	padding: 16px 20px;
	background: #f8fafc;
	font-size: 13px;
	color: #334155;
}
.approvalDetailGrid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px 24px;
	margin-bottom: 14px;
}
.approvalDetailLabel {
	color: #64748b;
	display: inline-block;
	min-width: 80px;
}
.approvalDetailCols {
	display: flex;
	gap: 40px;
	margin-bottom: 14px;
}
.approvalDetailCol {
	flex: 1;
}
.approvalDetailHead {
	font-weight: 600;
	color: #0f172a;
	margin-bottom: 6px;
}
.approvalMuted {
	color: #94a3b8;
	font-style: italic;
}
.approvalChainRow {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 2px 0;
}
.approvalChip {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}
.approvalChipApproved {
	background: #16a34a;
}
.approvalChipRejected {
	background: #dc2626;
}
.approvalChipPending {
	background: #cbd5e1;
}
.approvalChainName {
	min-width: 140px;
}
.approvalChainState {
	color: #64748b;
	text-transform: capitalize;
}
.approvalDetailActions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 14px;
}
.approvalDetailOpen {
	color: #4f46e5;
	text-decoration: none;
}
.approvalNotes {
	max-width: 640px;
}
.approvalNoteRow {
	padding: 3px 0;
	border-bottom: 1px solid #eef2f7;
}

.messagesNav .dhx_navbar-count  {
 border: 1px solid white !important;
 background-color: #ff0000;
 top: 8px;
}
/* ================= Photo evidence gallery (photos row type) ================= */
.dfPhotoGallery { padding: 12px 8px; height: 100%; overflow-y: auto; box-sizing: border-box; }
.dfPhotoGallery__loading { padding: 24px; color: #6b7280; }
.dfPhotoGallery__empty { padding: 48px 24px; text-align: center; color: #9098aa; }
.dfPhotoGallery__empty i { font-size: 32px; display: block; margin-bottom: 10px; }
.dfPhotoGallery__empty p { margin: 0; }

.dfPhotoGroup { margin-bottom: 22px; }
.dfPhotoGroup__head {
	font-size: 14px; font-weight: 600; color: #3041b0;
	padding: 0 0 8px; margin-bottom: 10px; border-bottom: 1px solid #e5e7eb;
	display: flex; align-items: center; gap: 8px;
}
.dfPhotoGroup__count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
	background: #eef0fb; color: #3041b0; font-size: 12px; font-weight: 600;
}
.dfPhotoGroup__grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
}
.dfPhotoTile {
	border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #fff; cursor: pointer;
	transition: box-shadow 0.15s, transform 0.05s;
}
.dfPhotoTile:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
.dfPhotoTile:active { transform: scale(0.99); }
.dfPhotoTile__img { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #f3f4f6; }
.dfPhotoTile__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dfPhotoTile__type {
	position: absolute; top: 8px; left: 8px; background: rgba(17,24,39,0.72); color: #fff;
	font-size: 11px; padding: 2px 8px; border-radius: 10px;
}
.dfPhotoTile__meta { padding: 8px 10px; }
.dfPhotoTile__caption { font-size: 13px; color: #1a1a2e; line-height: 1.35; margin-bottom: 4px; }
.dfPhotoTile__sub { font-size: 11px; color: #8a90a2; }

.dfPhotoLightbox {
	position: fixed; inset: 0; z-index: 30000; background: rgba(0,0,0,0.9);
	display: flex; flex-direction: column;
}
.dfPhotoLightbox__bar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 18px; color: #fff; font-size: 14px;
}
.dfPhotoLightbox__close { background: transparent; border: none; color: #fff; font-size: 22px; cursor: pointer; }
.dfPhotoLightbox__img { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 0 20px 24px; overflow: auto; }
.dfPhotoLightbox__img img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }

/* ---------------------------------------------------------------------------
   Lattice Grid type scale

   Lattice derives font size from `density`, on a different curve to the row
   height: the row is 28px * scale, but the font is 13px + (scale - 1) * 2px.
   So `comfortable` gives 42px rows with 14px text, and `spacious` gives 15px.

   We want the density presets to control spacing only and the type to stay put
   at 13px, which is what the grids used before the migration.

   The doubled class is deliberate. style.css is loaded BEFORE
   lattice-grid.min.css in index.php, and Lattice sets these on `.lattice`
   (specificity 0,1,0) — an equal-specificity rule here would lose the cascade
   on source order. `.lattice.lattice` is 0,2,0, so it wins without touching
   the vendor stylesheet or reordering the page.
   --------------------------------------------------------------------------- */
.lattice.lattice {
	--lattice-font-size: 13px;
	--lattice-font-size-sm: 11px;
	--lattice-header-font-size: 13px;
}

/* ---------------------------------------------------------------------------
   Zebra striping (stripedRows, set as a house default by
   df_lattice_create_grid). Lattice paints the stripe with
   --lattice-surface-alt, which at #fbfcfc is too faint to read across a wide
   grid. That token is NOT overridden here: it is also the background for group
   header rows, the toolbar, tool-panel chips and master-detail panels, so
   darkening it would darken all of that chrome too. Instead the two stripe
   rules are restated against a stripe-only token.

   Lattice's own selectors are 0,6,0 (row + cell) and 0,5,0 (row), and style.css
   loads first, so the class is tripled to clear them on specificity rather than
   source order. Same reasoning as the block above.
   --------------------------------------------------------------------------- */
.lattice.lattice.lattice {
	--df-lattice-stripe: #eef1f4;
}

.lattice.lattice.lattice[data-striped-rows] .lat-row--alternate:not(.lat-row--selected):not(.lat-row--hovered) {
	background: var(--df-lattice-stripe);
}

.lattice.lattice.lattice[data-striped-rows] .lat-row--alternate:not(.lat-row--selected):not(.lat-row--hovered) .lat-cell {
	background: var(--df-lattice-stripe);
}

/* The stripe above out-ranks Lattice's diff marks, so on every other row a changed
   cell or an added line lost its fill. Restated here at a specificity that wins. */
.lattice.lattice.lattice[data-striped-rows] .lat-row.lat-row--added,
.lattice.lattice.lattice[data-striped-rows] .lat-row.lat-row--added .lat-cell {
	background: var(--lattice-variant-success-fill);
}

.lattice.lattice.lattice[data-striped-rows] .lat-row .lat-cell.lat-cell--changed {
	background: var(--lattice-variant-info-fill);
}

/* ---------------------------------------------------------------------------
   Small in-grid action button (the "+" that adds a resource to a plan, and any
   other single-icon row action). A class rather than inline styles so it can
   carry hover and focus states, which an inline style cannot express.
   --------------------------------------------------------------------------- */
.dfGridAddBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin: auto;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: #3041b0;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.12s ease-in-out;
}

.dfGridAddBtn:hover {
	background: #263490;
}

.dfGridAddBtn:focus-visible {
	outline: 2px solid #3041b0;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Trace row type (defined_object_complex_editor_row_type_trace.js).

   A vertical chain of connected records, one row per layer. The three columns
   are fixed so every record name shares a left edge and every value a right
   edge: the chain is meant to be read down, not across.

   The hue ramps across the three bands rather than colouring by entity, so a
   trace of any length shows where it crosses from the logical layers into the
   physical ones without the reader parsing the labels.
   --------------------------------------------------------------------------- */

.dfTrace {
	padding: 18px 20px 20px;
}

.dfTraceNote {
	font-size: 12px;
	color: var(--uiTextMuted, #6b7688);
	text-align: right;
	margin-bottom: 12px;
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

.dfTraceEmpty {
	font-size: 13px;
	color: var(--uiTextMuted, #6b7688);
	margin: 0;
	padding: 6px 2px;
}

.dfTraceChain {
	display: flex;
	flex-direction: column;
}

.dfTraceLink {
	text-align: center;
	font-size: 11px;
	line-height: 1;
	padding: 5px 0;
	color: #b6bdc9;
}

.dfTraceRow {
	display: grid;
	grid-template-columns: 104px 1fr auto;
	align-items: center;
	gap: 14px;
	width: 100%;
	text-align: left;
	padding: 13px 18px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: none;
	font: inherit;
	cursor: pointer;
	transition: box-shadow 0.12s ease-in-out, transform 0.12s ease-in-out;
}

.dfTraceRow:hover {
	box-shadow: 0 1px 4px rgba(26, 34, 51, 0.13);
}

.dfTraceRow:focus-visible {
	outline: 2px solid var(--tocloco-blue, #3a489e);
	outline-offset: 2px;
}

.dfTraceLabel {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.dfTraceName {
	font-size: 15px;
	font-weight: 600;
	color: #1d2533;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dfTraceValue {
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 12px;
	color: #6b7688;
	white-space: nowrap;
	text-align: right;
}

.dfTraceMore {
	font-style: normal;
	margin-left: 8px;
	padding: 1px 6px;
	border-radius: 8px;
	background: #eceef1;
	color: #56617a;
	font-size: 11px;
}

/* The record currently open gets a ring, so the reader can see where they are
   standing in the chain. Drawn as an inset shadow rather than a thicker border:
   a border change shifts that row's content by half a pixel and breaks the
   shared left edge the three columns exist to create. */
.dfTraceSelf {
	box-shadow: inset 0 0 0 1px currentColor;
}

.dfTraceBand-a { background: #eefaf3; border-color: #bfe6d2; }
.dfTraceBand-a .dfTraceLabel { color: #1e7a52; }

.dfTraceBand-b { background: #eef3fd; border-color: #c6d6f3; }
.dfTraceBand-b .dfTraceLabel { color: #2f52b0; }

.dfTraceBand-c { background: #f2eefc; border-color: #d5c9f0; }
.dfTraceBand-c .dfTraceLabel { color: #5b3fb0; }

@media (max-width: 640px) {
	.dfTraceRow { grid-template-columns: 1fr; gap: 4px; padding: 11px 14px; }
	.dfTraceValue { text-align: left; }
	.dfTraceName { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
	.dfTraceRow { transition: none; }
}

/* ---------------------------------------------------------------------------
   Lattice multi-line headers

   AG's MultilineHeader component rendered a \n in headerName as a <br> and drew
   its own sort icon. Lattice sorts from the header natively, so the only thing
   still wanted is the line break, and Lattice's own header renderer already
   lays the label out as a flex column -- it just sets white-space:nowrap with
   an ellipsis, which collapses the newline.

   df_lattice_columns_from_ag maps headerComponent, wrapHeaderText and
   autoHeaderHeight onto this class, so the finance month headers ("2026 Jan"
   over "Forecast") keep their two lines without a custom renderer.

   Tripled class for the same cascade reason as the blocks above: style.css
   loads before lattice-grid.min.css, so an equal-specificity rule would lose
   on source order.
   --------------------------------------------------------------------------- */
.lattice.lattice.lattice .dfHeaderMultiline .lat-header-label,
.lattice.lattice.lattice .lat-header-label.dfHeaderMultiline {
	white-space: pre-line;
	overflow: visible;
	text-overflow: clip;
	line-height: 1.3;
}


/* ---------------------------------------------------------------------------
   "This row has comments" marker (finance trackers).

   Set as rowClass: 'has-comments' by entity_pft_ftcombo and
   entity_pft_remaining_report, and read back by their hover tooltip. The AG version
   of this rule hung off .ag-grid-pinned-left-cells, so it stopped painting the moment
   those grids became Lattice; this puts it on the row's first cell instead.
   --------------------------------------------------------------------------- */
.lattice .lat-row.has-comments .lat-cell:first-child {
	position: relative;
}

.lattice .lat-row.has-comments .lat-cell:first-child::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 13px;
	height: 13px;
	background: #f59e0b;
	clip-path: polygon(0 100%, 0 0, 100% 100%);
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Lattice selection checkbox size

   Lattice sizes the checkbox from the density scale:
       .lat-checkbox-input { width: calc(var(--lattice-space) * 3.5) }
   and --lattice-space is 4px * scale, so the box is 14px * scale. The density
   presets scale 0.85 / 1 / 1.5 / 2, which puts a `spacious` grid at a 28px
   checkbox -- twice a normal one, and the reason the finance tracker's looked
   massive.

   Row height should follow density; the control inside it should not. This pins
   the box near the platform default and lets the row keep its spacing, which is
   the same split as the type-scale block above.

   Doubled class for the cascade: style.css loads before lattice-grid.min.css,
   so an equal-specificity rule would lose on source order.
   --------------------------------------------------------------------------- */
.lattice.lattice .lat-checkbox-input {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

/* dfComponents field types inside the record editor (rendered by the form row type) */
.dfcFieldLabel { font-size: 12px; color: #6b7280; margin: 0 0 4px; line-height: 1.2; }
.dfcFieldHost { display: flex; align-items: center; min-height: 28px; }
.dfRichHost > .dfc-richtext { height: 100%; }
.dfRichHost .dfc-richtext-editor { min-height: 0; }
.dfDocHost > .dfc-document { height: 100%; }
.dfDocHost .dfc-document-canvas { min-height: 0; }
.progGanttZoom.is-active { background: var(--uiBlue, #2f3ab2); color: #fff; border-color: transparent; }
/* Programme gantt is a viewer of stored dates: every link is 'critical' to the engine, so draw arrows neutrally. */
[id^=progganttChart] .lat-gantt-split__link, [id^=progganttChart] .lat-gantt-split__link--critical { stroke: #8a94a0; }
[id^=progganttChart] .lat-gantt-split__arrowhead, [id^=progganttChart] .lat-gantt-split__arrowhead--critical { fill: #8a94a0; }
[id^=progganttChart] .lat-gantt-split__row, [id^=progganttChart] .lat-gantt-split__barrow { cursor: pointer; }
/* Lattice draws its own card shell (8px 10px padding) around whatever a cardRenderer returns; every DemandFlow
   card template pads itself, so custom-rendered cards drop the shell padding on every board, not only the agile one. */
.lat-kanban__card[data-custom="true"] { padding: 0; }
/* Workloads: the resource band must not squeeze the plan out; cap it and let it scroll. */
[id^=workload] .lat-gantt-split__wl { flex: 0 0 240px; max-height: 240px; overflow-y: auto; }
[id^=workload] .lat-gantt-split__body { flex: 1 1 auto; min-height: 160px; }