: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;

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

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

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

	--uiBlue: rgba(0, 0, 200, 0.1);
	--uiBlueBorder: rgba(0, 0, 200, 0.15);

	--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);
}

.rotate-header .ag-header-cell-label {
	/*Necessary to allow for text to grow vertically*/
	height: 100%;
	padding: 0 !important;
}

.rotate-header .ag-header-cell-label .ag-header-cell-text {
	/*Force the width corresponding to how much width
    we need once the text is laid out vertically*/
	width: 55px;
	writing-mode: vertical-lr;
	-ms-writing-mode: tb-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;
}

div.fttimeline ol li {
	cursor: pointer !important;
}

.fttimeline li:hover .e-dot {
	background-color: #aee0c0;
}

/* 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*/
.ag-body-horizontal-scroll {
	height: 5px !important;
	min-height: unset !important;
	position: absolute;
	bottom: 0;
}

.ag-body-horizontal-scroll-viewport {
	height: 5px !important;
	min-height: unset !important ;
}

.ag-body-horizontal-scroll-viewport::-webkit-scrollbar {
	height: 10px;
}

.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb {
	background: #919191;
}

.ag-body-vertical-scroll {
	width: 10px !important;
	min-width: unset !important;
	position: absolute;
	right: 0;
}

.ag-body-vertical-scroll-viewport {
	width: 10px !important;
	min-width: unset !important ;
}

.ag-body-vertical-scroll-viewport::-webkit-scrollbar {
	width: 10px;
}

.ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb {
	background: #919191;
}

.ag-sticky-bottom {
	bottom: 0px !important;
	width: 100% !important;
}

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

.ag-theme-quartz {
	--ag-font-size: 12px !important;
}

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

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

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

/*
.ag-details-row {
  padding: 5px !important;
}

.ag-details-grid {
  margin: 5px !important;
}
*/

.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;*/
}

/*
div.ag-theme-quartz {
	scrollbar-width: auto !important ;
}
*/

#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);
}

.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%;
}

.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;
}

.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;
}

.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;
}

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

.sideForm label .dhx_label {
	display: block;
	text-align: left !important;
}

.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;
}

.fc-col-header-cell-cushion,
h2.fc-toolbar-title {
	font-family: 'Roboto', 'Arial', 'Tahoma', 'Verdana', sans-serif;
	font-feature-settings: 'liga';
	font-size: 14px !important;
	font-weight: 500;
}

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

.scheduledPost {
	border: 1px solid #e0e0e0;
	width: 100%;
	padding: 5px;
	font-size: 13px;
	background-color: #f5f5f5;
}

.scheduledPost > div {
	overflow: hidden;
}

.scheduledPost .channel i {
	margin-right: 5px;
}

.colorPositive {
	color: #0e9700;
}

.colorNegative {
	color: #fe0006;
}

/*
.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;
}

.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;
}

.vm-summary .ag-cell-focus {
	border: none; /* Remove the focus outline on the selected cell */
}

.ag-root-wrapper {
	border-radius: 0;
}

.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 */

.ag-header-cell-navy,
.ag-header-cell-navy:hover {
	background-color: #1e497d !important;
	color: white;
}

.ag-header-cell-green,
.ag-header-cell-green:hover {
	background-color: #009250 !important;
	color: white;
}
.ag-header-cell-greenlighter,
.ag-header-cell-greenlighter:hover {
	background-color: #22a76b !important;
	color: white;
}

.ag-header-cell-olive,
.ag-header-cell-olive:hover {
	background-color: #c3d79b !important;
	color: white;
}

.ag-header-cell-blue,
.ag-header-cell-blue:hover {
	background-color: #016fc0 !important;
	color: white;
}
.ag-header-cell-bluelighter,
.ag-header-cell-bluelighter:hover {
	background-color: #0f7ece !important;
	color: white;
}

.ag-grey-cell {
	background-color: #22329c0d;
}

.ag-header-cell-light-grey,
.ag-header-cell-light-grey:hover {
	background-color: #f0f0f0 !important;
}

.ag-header-cell-amber,
.ag-header-cell-amber:hover {
	background-color: var(--uiAmber) !important;
}

.ag-header-center * {
	text-align: center;
}

.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;
}

.ag-theme-alpine {
	font-size: 11px; /* Adjust the size to your preference */
}

.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 .ag-root-wrapper {
	overflow: unset;
}

.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;
}

.has-comments::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 13px 0 0 13px;
	border-color: transparent transparent transparent #ffe19b;
}

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

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

.ag-theme-quartz * {
	font-size: 12px !important;
}

.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;
}

.ag-checked::before,
.ag-checked::after,
.ag-checkbox-input-wrapper {
	font-size: 16px !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; */
/* } */

.dhx_toolbar-button .dhx_navbar-count {
	top: 50%;
	right: -27px;
	transform: translateY(-50%);
	background: var(--tocloco-blue);
}

.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; */
/* } */

.dhx_toolbar-button .dhx_navbar-count {
	top: 50%;
	right: -27px;
	transform: translateY(-50%);
	background: var(--tocloco-blue);
}

.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;
}

.ag-row-group-expanded * {
	font-weight: bold;
}

.ag-row-group-contracted * {
	font-weight: bold;
}

.ag-row-footer {
	background-color: #3041b0;
	font-weight: bold;
	color: white;
}

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

.forecastBudget .ag-floating-top {
	border: none;
}

.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;
}

.appframe .ag-root-wrapper {
	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;
}

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

.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;
}

.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;
}

.ag-body-horizontal-scroll,
.ag-body-horizontal-scroll * {
	min-height: 15px !important;
	max-height: 15px !important;
	height: 15px !important;
}

.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;
}

.grid-stack-item-content .ag-theme-quartz .ag-root-wrapper {
	border: 0px !important;
	border-radius: 0px !important;
}

.user-workload .ag-cell {
	display: flex !important;
	align-items: center !important;
}

[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;
}

.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;
}

.no_ag_hover .ag-row:hover,
.no_ag_hover .ag-row-hover {
	background-color: transparent !important;
}

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

.wrappedForm > div > fieldset > div {
	flex-wrap: wrap !important;
	flex-direction: row !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;
}

.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;
}

.ag-grid-no-gridlines {
	border-bottom: none !important;
}

.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 .ag-header {
	display: none !important;
}

.norowlines .ag-row {
	border-bottom: 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;
}

.wrappedForm .e-upload {
	border: none !important;
}

.wrappedForm .e-file-select-wrap {
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.wrappedForm .e-file-select-wrap .e-btn {
	box-shadow: none;
	border: 1px solid #f7f7f7 !important;
	text-transform: none;
}

.e-upload-files {
	display: none;
}

.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);
}

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

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

.complexColumn > div > .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 {
	padding-left: 10px;
	padding-right: 10px;
}

.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;
}

.e-speech-to-text.e-btn {
	-ms-flex-align: center;
	align-items: center;
	border-radius: 9999px;
	display: -ms-inline-flexbox;
	display: inline-flex;
	font-size: 14px;
	min-width: 36px;
	min-height: 36px;
	padding: 0 14px;
}

.e-speech-to-text.e-btn.e-round {
	width: 36px;
	height: 36px;
	padding: 0;
}

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

.kanbanBreadcrumbSeparator {
	width: 5px;
	background-color: #fff;
}

div.e-custom-breadcrumb ol {
	width: calc(100% - 20px);
	display: flex;
}
.e-custom-breadcrumb li + li {
	padding-left: 0;
}

.e-custom-breadcrumb .e-custom-item {
	width: auto;
	height: 40px;
	position: relative;
	/*background: #938bf6;*/
	background: #444444;
	padding: 10px 12px 10px 30px;
	color: white;
	cursor: pointer;
}

.e-custom-breadcrumb .e-breadcrumb-item:last-child .e-custom-item {
	cursor: default;
}

.e-custom-breadcrumb .e-custom-item:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-left: 20px solid white;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
}

.e-custom-breadcrumb .e-custom-item:before {
	content: '';
	position: absolute;
	right: -20px;
	bottom: 0;
	width: 0;
	height: 0;
	border-left: 20px solid #444444;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	z-index: 1;
}

.e-custom-breadcrumb li:first-child .e-custom-item:after {
	border-left: 0;
}

.e-custom-breadcrumb li:first-child .e-custom-item {
	border-top-left-radius: 25px;
	border-bottom-left-radius: 25px;
	padding: 10px 12px;
}

.e-custom-breadcrumb .e-custom-item:hover,
.e-custom-breadcrumb .e-custom-item:active {
	background-color: #7b74ce;
}

.e-custom-breadcrumb .e-custom-item:hover::before,
.e-custom-breadcrumb .e-custom-item:active::before {
	border-left: 20px solid #7b74ce;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
}

.e-custom-breadcrumb .e-custom-icon .e-frame {
	border-radius: 100%;
	background-color: #7dd284;
	border-color: #7dd284;
	width: 18px;
	height: 18px;
	display: inline-block;
}

.e-custom-breadcrumb .e-custom-item .e-label {
	vertical-align: top;
	padding-left: 10px;
	line-height: 1.5;
}

.e-custom-breadcrumb .e-custom-icon .e-frame::before {
	content: '\e707';
	font-size: 10px;
	vertical-align: text-bottom;
	margin-left: 4px;
}

.e-custom-breadcrumb li:last-child .e-custom-icon .e-frame {
	background-color: #c9c5fb;
	border-color: #c9c5fb;
	color: #938bf6;
}

.e-custom-breadcrumb .e-breadcrumb-item,
.e-custom-breadcrumb .e-breadcrumb-separator {
	padding-right: 0px !important;
	padding-left: 0px !important;
}

.e-custom-breadcrumb .e-custom-icon {
	display: flex;
	align-items: center;
}

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

.e-breadcrumb .e-breadcrumb-item.e-disabled {
	flex-grow: 1 !important;
}

.e-breadcrumb .e-breadcrumb-item .e-breadcrumb-separator {
	flex-grow: 0 !important;
}

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

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

.ag-cell-inline-editing.dropdown-cell {
	padding-right: 0px !important;
}

.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;
}

.ag-cell-inline-editing.dropdown-cell::after {
	content: '';
}

.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;
}

.ag-theme-alpine .ag-header-cell.multiline-header .ag-header-cell-text {
	white-space: pre-line;
}

.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;
}

.small-header .ag-header-cell-text {
	font-size: 80% !important;
}

.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;
}

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

.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 .e-message-group {
	width: 70%;
}

#chatHost .e-chat-content {
	padding: 8px 6px;
}

/* constrain bubble width */
#chatHost .e-chat-message {
	max-width: 70%;
}

/* bubble containers we render */
#chatHost .df-bubble {
	padding: 10px 12px;
	border-radius: 12px;
	/*
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
	line-height: 18px;
	*/
	border: 1px solid var(--uiGreenBorder);
	margin-bottom: 5px;
	background-color: var(--uiGreen);
}

/* incoming bubble */
#chatHost .e-chat-message:not(.e-right) .df-bubble {
	background: #f5f7fa;
	border-radius: 12px 12px 12px 4px;
}

/* outgoing bubble */
#chatHost .e-chat-message.e-right .df-bubble {
	background: #e8f0ff;
	border-radius: 12px 12px 4px 12px;
}

/* timestamp */
#chatHost .df-chat-time {
	margin-top: 0px;
	font-size: 10px;
	color: #6b7280;
	opacity: 0.9;
	text-align: right;
}

/* make time align with side */
#chatHost .e-chat-message.e-right .df-chat-time {
	text-align: right;
}
#chatHost .e-chat-message:not(.e-right) .df-chat-time {
	text-align: left;
}

/* 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;
}

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

.w2ui-sidebar {
	background: transparent
}

/* ── 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;
}