/*!********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/css/grid.css ***!
  \********************************************************************/
:root {	
	--fontRoboto: 'Roboto';
	--ZG-Cellpadding: 0.3125rem; /**5px**/
	--ZG-CellBorderColor: #ccc;
	--ZG-CellSelectionBorderColor: #4daa38;
	--ZG-CellTextColor: #222;
	--ZG-CellHoverColor: rgba(33, 150, 243, 0.1);
	--ZG-CellSelectedColor: RGB(223, 242, 225);
	--ZG-CellHoverSelectedColor: rgba(33, 150, 243, 0.3);
	--ZG-rowBgColor: #fff;
	--ZG-CellSelectedBGColor: #fff;
	--ZG-cellBgColor: #fff;
	--ZG-checkboxIndeterminateColor: #9c9c9c;
	--ZG-scrollBGColor: #f3f3f3;
	--ZG-headerCellTextColor: #000;
	--ZG-gridHeaderBGColor: #f6f6f6;
	--ZG-fieldDragDropCellBgcolor: #fff;
	--ZG-firstLevelGroupingHeaderBGColor: #ede9fa;
	--ZG-secondLevelGroupingHeaderBGColor: #fafafa;
	--ZG-groupingCategoryName: #535353;
	--ZG-groupingCategoryValue: #101010;
	--ZG-groupingCategoryMoreIcon: #a9a9a9;
	--ZG-firstLevelGroupSidebarColor: #7a62c4;
	--ZG-secondLevelGroupSidebarColor: #d1c9f2;
	--ZG-addRecordCellBGColor: #fafafa;
	--ZG-addRecordTextColor: #a9a9a9;
	--ZG-groupingRecordCountBorderColor: #7a62c4;
	--ZG-groupingRecordCountBGColor: #fff;

	--ZG-addFieldBtnBorderColor: #80BC67;
	--ZG-addFieldBtnBGColor: #EAF9E7;
	--ZG-addFieldBtnColor: #747a82;
	--ZG-addFieldBtnIconColor: #6DBE5B;
	--ZG-summaryCellTextColor: #777;
	--ZG-summaryCellDropdownBGColor: #f1f1f1;
	--ZG-recordPanelDragDropColor:#888;
	--ZG-recordPanelContextMenuColor: #333;
	--ZG-expandRowIconColor:#2d7ff9;
	--ZG-expandRowIconBGColor:#d9e8fc;
	--ZG-userPresenceProfileBorderColor: #fff;
	--ZG-userPresenceCountColor: #fff;
	--ZG-userPresenceCountBGColor: #239320;
	--ZG-floatingGridBGColor: #fff;
	--ZG-rowPopoverBorderColor: rgba(1, 110, 194, 1);
	--ZG-rowPopoverMsgBGColor: #016EC2;
	--ZG-rowPopoverMsgColor: #fff;
	--ZG-loaderBGColor: #f8f8fc;
	--ZG-CircleLoaderBGColor: #fff;
	--ZG-cellEditorContainerBGColor: #fff;
	--ZG-cellEditorBorderColor: #4daa38;
	--ZG-resizeCueBGColor: #6DBE5B;
	--ZG-dragDropRecordBorderColor: #6DBE5B;
	--ZG-dragDropRecordCountBGColor: #E46864;
	--ZG-dragDropRecordCountColor: #fff;
	--ZG-CellDisabledColor: #F4F5F6;
	--ZG-noRecordBackgroundColor : #fff;

}

/*** reset style start ***/
.ZG-rootWrapper {
	box-sizing: border-box;
	font-size: 13px;
}
.ZG-rootWrapper * {
	user-select: none;
}

.ZG-rootWrapper *,
.ZG-rootWrapper *:before,
.ZG-rootWrapper *:after {
	box-sizing: inherit;
}


.ZG-rootWrapper p,
.ZG-rootWrapper ol,
.ZG-rootWrapper ul {
	margin: 0;
	padding: 0;
	font-weight: normal;
}

.ZG-rootWrapper ol,
.ZG-rootWrapper ul {
	list-style: none;
}

.ZG-rootWrapper img {
	max-width: 100%;
	height: auto;
}

/*** reset style end ***/

.ZG-rootWrapper  {
	font-size: 14px;
	overflow: hidden;
	font-family: inherit;
}

.ZG-rootWrapperBody {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ZG-rootWrapper {
	/* margin: 20px; */
	/* margin-top: 20px; */
}

.ZG-rootWrapper:after {
	position: absolute;
	content: '';
	width: 600px;
	height: calc(100% + 300px);
	top: 0;
	right: -600px;
	z-index: -1;
	display: none;
}

.ZG-title {
	text-align: center;
	margin-bottom: 20px;
}
.ZG-gridBody {	
	display: flex;
	border: 0;
	border-inline-start: 1px solid var(--ZG-CellBorderColor); 	
	overflow-y: auto;
	overflow-x: hidden;
	height: 100%;
	flex: 1 1 auto;
	position: relative;
}

/* .ZG-gridHeader ~ .ZG-gridBodyWrapper .ZG-gridBody {
	border-top: 0;
} */

.ZG-pinnedLeftCol {
	position: relative;
	width: 200px;
	height: 100%;
}

.ZG-centerCol {
	position: relative;
	/* min-height: 100%;
	height: 100%; */
	height: max-content;
	width: 100%;
	min-width: 0;
}

.ZG-centerColViewport {
	overflow-x: auto;
	width: 100%;
}

.ZG-pinnedRightCol {
	position: relative;
	width: 200px;
	height: 100%;
}

.ZG-fullWidthCol {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;	
	pointer-events: none;
}

.ZG-floatingTopContainer .ZG-row .ZG-cell:last-child {
	border-inline-end: 0;
}

.ZG-gridHeader .ZG-pinnedLeftHeader .ZG-headerRow .ZG-headerCell:last-child {
	border-inline-end: 1px solid var(--ZG-CellBorderColor);
}

.ZG-centerColContainer {
	border-bottom: 0;
	position: relative;
	width: 1800px;
	overflow: hidden;
}
/** row style start **/
.ZG-row {
	border-bottom: 1px solid var(--ZG-CellBorderColor);
	color: var(--ZG-CellTextColor);
	display: flex;
	height: 44px;
	width: 100%;
	position: absolute;
}
.ZG-rootWrapper .ZG-row{
	border-bottom: 0;
}
/*** full width row style start ***/
.ZG-addRecordRow.ZG-addRecordRowPinned{
	display: flex;
    align-items: center;
    font-size: 13px;
    border-inline-end: 1px solid var(--ZG-CellBorderColor);
    width: 100%;
	background-color: var(--ZG-addRecordCellBGColor);
    padding: 10px;
}

.ZG-addRecordRow.ZG-insertRowIcon{
	justify-content: center;
	font-size: 18px;
}
/*** full width row style end ***/
/** row style end **/

/** cell style start **/
.ZG-row .ZG-cell{
	min-height: 0;
	user-select: none;
	border-bottom: 1px solid var(--ZG-CellBorderColor);
}
.ZG-cell {
	display: inline-flex;
	align-items: center;
	height: 100%;
	white-space: nowrap;
	/* line-height: 42px; */
	/* min-height: 44px; */
	border: 0;
	border-inline-end: 1px solid var(--ZG-CellBorderColor);
	position: absolute;
	width: 200px;
	padding: 0;	
	background-color: var(--ZG-cellBgColor);
	z-index: 1;  /*event for cell not triggering */
}

.ZG-column--pinned-right-first {
	border-inline-start: 1px solid var(--ZG-CellBorderColor);
}

.ZG-cellValue {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	outline: none;	
	z-index: 1;
	width: inherit;
    height: inherit;
}

.ZG-cell.ZG-cellSelection:before,
.ZG-cell.ZG-fillseries:after,
.ZG-cell.ZG-cellRangeSelected:before {
	position: absolute;
	content: '';
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: 100%;
	border: 2px solid var(--ZG-CellSelectionBorderColor);
	z-index: 1;
	height: calc(100% + 2px);
	border-radius: 2px;
}

.ZG-pinnedRightCol .ZG-cell.ZG-cellSelection:last-child:before {
	width: calc(100% + 1px);
}

.ZG-cell.ZG-cellSelection{
    z-index: 2;
}

.ZG-cellEditing {
	width: 200px;
	border-width: 1px;
	/* min-height: 44px; */
	display: flex;
	align-items: center;
}

.ZG-cell.ZG-cellSelection.ZG-cellEditing {
	height: fit-content;
	background-color: var(--ZG-CellEditBGColor);
	z-index: 3;
	cursor: text;
	line-height: 22px;
}

.ZG-cell.ZG-cellSelection.ZG-cellEditing:before {
	box-shadow: 0 0 0 1px var(--ZG-CellSelectionBorderColor),
		0 0 30px 0 var(--ZG-CellEditingBoxShadowColor);
}

.ZG-cell.ZG-cellSelection.ZG-cellEditing .ZG-cellValue,
.ZG-cell.ZG-cellAutoFit .ZG-cellValue {
	overflow: auto;
	white-space: initial;
	text-overflow: unset;
}

.ZG-cell.ZG-cellSelection.ZG-cellEditing .ZG-cellValue {
	max-height: 100px;
}

.ZG-cell.ZG-cellReadOnly {
	pointer-events: none;
}
/** cell style end **/

/*** find panel (VS Code-like) ***/
.dg-grid-find-panel {
	position: absolute;
	top: 6px;
	right: 8px;
	z-index: 1000;

	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	padding: 4px 6px;

	background-color: #252526;
	border: 1px solid #454545;
	border-radius: 3px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);

	font-size: 12px;
	color: #f3f3f3;
}

.dg-grid-find-panel.dg-find-collapsed {
	padding-bottom: 4px;
}

.dg-find-row {
	display: flex;
	align-items: center;
	gap: 4px;
}

.dg-find-row-main {
	white-space: nowrap;
}

.dg-find-row-replace {
	margin-inline-start: 20px; /* align with input edge */
}

.dg-grid-find-panel .dg-find-input {
	flex: 1 1 auto;
	min-width: 180px;
	padding: 2px 6px;
	border-radius: 2px;
	border: 1px solid #555;
	background-color: #3c3c3c;
	color: #f3f3f3;
	outline: none;
}

.dg-grid-find-panel .dg-find-input::placeholder {
	color: #858585;
}

.dg-grid-find-panel .dg-find-input:focus {
	border-color: #0e639c;
	box-shadow: 0 0 0 1px #0e639c;
}

.dg-grid-find-panel .dg-find-button {
	padding: 2px 8px;
	border-radius: 2px;
	border: 1px solid transparent;
	background-color: #3a3d41;
	color: #f3f3f3;
	cursor: pointer;
	font-size: 11px;
}

.dg-grid-find-panel .dg-find-button:hover {
	background-color: #4e5052;
}

.dg-grid-find-panel .dg-find-button:active {
	background-color: #2d2f31;
}

/* Disabled state for find controls */
.dg-grid-find-panel .dg-find-button:disabled {
	opacity: 0.4;
	cursor: default;
	background-color: #2b2b2b;
	color: #8c8c8c;
	border-color: transparent;
}

/* Primary action (first button – Find) */
.dg-grid-find-panel .dg-find-arrow.dg-find-next {
	background-color: #0e639c;
	border-color: #0e639c;
}

.dg-grid-find-panel .dg-find-arrow.dg-find-next:hover {
	background-color: #1177bb;
}

/* Close button (last button – ✕) */
.dg-grid-find-panel .dg-find-close {
	padding: 0 6px;
	background: transparent;
	border: none;
	color: #c5c5c5;
}

.dg-grid-find-panel .dg-find-close:hover {
	background-color: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

.dg-find-chevron {
	padding: 0 4px;
	background: transparent;
	border: none;
	color: #c5c5c5;
	font-size: 13px;
	transform: rotate(0deg);
	transition: transform 0.1s ease-out;
}

.dg-grid-find-panel:not(.dg-find-collapsed) .dg-find-chevron {
	transform: rotate(90deg);
}

.dg-find-input-wrapper {
	display: flex;
	align-items: center;
}

.dg-find-toggles {
	position: static;
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 6px;
}

.dg-find-toggle {
	background: transparent;
	border: none;
	color: #c5c5c5;
	font-size: 10px;
	padding: 0 2px;
}

.dg-grid-find-panel .dg-find-button.dg-find-toggle-active,
.dg-grid-find-panel .dg-find-button.dg-find-toggle-active:hover,
.dg-grid-find-panel .dg-find-button.dg-find-toggle-active:active {
	background-color: #0e639c;
	color: #ffffff;
	border-radius: 2px;
	border-color: #0e639c;
}

.dg-find-status {
	min-width: 70px;
	text-align: right;
	font-size: 11px;
	color: #f48771; /* VS Code 'no results' color */
}

.dg-find-arrow {
	width: 20px;
	text-align: center;
}

.dg-find-options {
	background: transparent;
	border: none;
	color: #c5c5c5;
	padding: 0 4px;
}

.dg-find-action {
	font-size: 11px;
}

/*** find / search highlight ***/
.ZG-row .ZG-cell.dg-cell-find-match {
	background-color: rgba(255, 235, 59, 0.3); /* soft yellow */
}

.ZG-row .ZG-cell.dg-cell-find-active {
	background-color: rgba(255, 193, 7, 0.5);  /* stronger amber for active */
	box-shadow: inset 0 0 0 1px #ff9800;
}

.ZG-row.dg-row-find-active .ZG-cell {
	outline: 1px solid rgba(255, 152, 0, 0.6);
	outline-offset: -1px;
}


/*** header style start **/

.ZG-gridHeader {
	border: 1px solid var(--ZG-CellBorderColor);
	border-inline-end: 0;
	background-color: var(--ZG-gridHeaderBGColor);
	display: flex;
	user-select: none;
}

.ZG-headerRow {
	/* border: 1px solid var(--ZG-CellBorderColor); */
	border-bottom: 0;
	height: 42px;
	display: flex;
	border-inline-start: 0;
	border-inline-end: 0;
	position: relative;
}

.ZG-headerCell {
	display: inline-flex;
	align-items: center;
	height: 100%;
	width: 200px;
	/* overflow: hidden; */
	padding-inline-start: 10px;
	padding-inline-end: 18px;
	color: var(--ZG-headerCellTextColor);
	background: var(--ZG-gridHeaderBGColor);    
	border-inline-end: 1px solid var(--ZG-CellBorderColor);
	/* border-top: 1px solid var(--ZG-CellBorderColor); */
	position: absolute;	
}

.ZG-headerCell .ZG-cellLabelContainer {
	display: flex;
	align-items: center;
	flex: 1;
    width: 100%;
}

.ZG-headerCellLabel{
    width: 100%;
}

.ZG-headerCellText{
    width: 100%;
    display: block;
}

.Zg-headerMoreIcon {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	fill: #bbb;
	cursor: pointer;
}

.Zg-headerMoreIcon:hover {
	fill: #333;
}

.ZG-FieldIcon {
	width: 13px;
	height: 13px;
	margin-inline-end: 8px;
	fill: #7c7c7c;
}

.ZG-headerViewport {
	overflow-x: hidden;
	position: relative;
}

.ZG-headerCellText {
	font-family: inherit;
	font-size: 13px;
}
/*** header style end **/

/*** status bar style start ***/
.ZG-statusBar {
	border: 1px solid var(--ZG-CellBorderColor);
	color: var(--ZG-CellTextColor);
	line-height: 1.5;
	padding-inline-start: 24px;
	padding-inline-end: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	width: 100%;
	bottom: 45px;
}

.ZG-statusNameValue {
	margin-inline-start: 6px;
	margin-inline-end: 6px;
	padding-bottom: 12px;
	padding-top: 12px;
}

.ZT-statusValue {
	font-family: inherit;
}

.ZG-statusBarRight {
	display: inline-flex;
	align-items: center;
}

/*** status bar style end ***/

/*** row selection style start ***/
.ZG-pinnedRowSelectionCol {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.ZG-pinnedRowSelectionCol .ZG-cell {
	width: 100px;	
	display: flex;
	align-items: center;
	justify-content: center;
}

.ZG-rowHeader-checkbox {
    padding: 5px 0;
}

/*** record panel style start ***/
.ZG-recordPanel {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	flex: 1;
	height: 20px;	
	z-index: 2;
}

.ZG-recordPanelList {
	cursor: pointer;
}

.ZG-recordPanelList .ZG-dragDropIcon {
	padding: 0 3px;
	cursor: grab;
	fill: var(--ZG-recordPanelDragDropColor);
}

.ZG-recordPanelList .ZG-rowContextMenuDropDown {
	margin-inline-end: 8px;
	fill: var(--ZG-recordPanelContextMenuColor);
}

.ZG-recordPanelList .ZG-expandrowIcon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 10px;
	fill: var(--ZG-expandRowIconColor);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
}

.ZG-recordPanelList .ZG-expandrowIcon:not(.ZG-recordMsgIcon):hover {
	background-color: var(--ZG-expandRowIconBGColor);
}
.ZG-recordPanelList:not(.ZG-recordPanelCheckboxList) {
	display: none;
}

.ZG-rowHover .ZG-recordPanelList {
	display: block;
}

.ZG-recordPanelList.ZG-recordMsgIconList {
	display: none;
}

.ZG-rowHover .ZG-recordPanelList .ZG-rowCheckboxPanel {
	margin-inline-end: 34px;
}

/*** unread state record comment style start ***/
.ZG-recordUnread .ZG-recordPanelList.ZG-recordMsgIconList {
	display: block;
}

.ZG-recordUnread .ZG-expandrowIcon.ZG-recordMsgIcon.ZG-recordMsgIconHover {
	display: none;
}

.ZG-rowHover .ZG-recordUnread .ZG-expandrowIcon:not(.ZG-recordMsgIcon) {
	display: none;
}

.ZG-rowHover
	.ZG-recordUnread
	.ZG-expandrowIcon.ZG-recordMsgIcon.ZG-recordMsgIconHover {
	display: block;
}
/*** unread state record comment style end ***/
/*** read state record comment style start ***/
.ZG-recordRead .ZG-recordPanelList.ZG-recordMsgIconList,
.ZG-rowHover .ZG-recordRead .ZG-expandrowIcon:not(.ZG-recordMsgIcon) {
	display: block;
}

.ZG-recordRead .ZG-expandrowIcon.ZG-recordMsgIcon.ZG-recordMsgIconHover,
.ZG-rowHover .ZG-recordRead .ZG-expandrowIcon.ZG-recordMsgIcon {
	display: none;
}

.ZG-recordRead .ZG-recordMsgIcon {
	fill: #bbb;
}

/*** read state record comment style end ***/

/*** record panel style end ***/

.ZG-rowSelectionHeader .ZG-headerCell {
	width: 100px;
}

.ZG-gridHeader .ZG-rowSelectionHeader .ZG-headerRow .ZG-headerCell {
	padding-inline-start: 18px;
	border-inline-end: 1px solid var(--ZG-CellBorderColor);
	justify-content: center;
}

.ZG-rowHover .ZG-cell:before,.ZG-columnHover:before{
	position: absolute;
	content: '';
	top: -1px;
	left: -1px;
	bottom: 0;
	right: 0;
	background-color: var(--ZG-CellHoverColor);
	z-index: 1;
}

.ZG-cellSelectionHighlighter .ZG-rowHover .ZG-cell.ZG-cellRangeSelected:before, .ZG-cellSelectionHighlighter  .ZG-cellRangeSelected.ZG-columnHover:before{
	background-color: transparent;
}
.ZG-rowSelected .ZG-cell,
.ZG-column-selected.ZG-cell{
	background-color: var(--ZG-CellSelectedColor);
}

.ZG-rowHover .ZG-cellSelection.ZG-cell:before,
.ZG-columnHover.ZG-cellSelection.ZG-cell:before{
	background-color: var(--ZG-cellBgColor);
}

.ZG-rowHover.ZG-rowSelected .ZG-cell{
	/* background-color: var(--ZG-CellHoverColor);
	background-image: linear-gradient(
		var(--ZG-CellSelectedColor),
		var(--ZG-CellSelectedColor)
	); */
}

.ZG-floatingTop,
.ZG-floatingBottom {
	border: 1px solid var(--ZG-CellBorderColor);
	position: relative;
	/* border-bottom: 0; */
	display: none;
}

.ZG-floatingTop{
	border-top: 0;
}

.ZG-floatingTopViewport,
.ZG-floatingBottomViewport {
	display: flex;
	height: inherit;
	width: 100%;
}

.ZG-floatingTopContainer,
.ZG-floatingBottomContainer {
	overflow-x: auto;
	overflow-y: hidden;
}

.ZG-floatingBottom {
	/* position: fixed; */
	width: 100%;
}

.ZG-floatingTop .ZG-row:last-child,.ZG-floatingBottom .ZG-row:last-child{
	border-bottom: 0;
}
/*** row selection style end ***/

/*** scrollbar style start ***/
.ZG-horizontalScroll,
.ZG-verticalScroll {
	background-color: var(--ZG-scrollBGColor);
}

.ZG_pane {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
}

.ZG-horizontalScroll {
	position: absolute;
	display: flex;
	align-items: center;
	height: 16px;
	width: 100%;
	overflow-x: auto;
	background: transparent;
	bottom: 0;
	z-index: 1;
}

.ZG-verticalScroll {
	overflow-y: scroll;
}

.ZG-scroller {
	position: absolute;
	height: 100%;
}

/* .ZG-horizontalScroll {
    height: 10px;
    width: 100%;
    overflow-x: auto;
    background: transparent;
    bottom: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 16px;
    max-height: 16px;
    min-height: 16px;
    min-width: 0;
    width: 100%;
    display: flex;
}

.ZG-horizontalScrollLeft, .ZG-horizontalScrollRight {
    height: 100%;
    min-width: 0;
	overflow: hidden;
    overflow-x: scroll;
    width: 300px;
    max-width: 300px;
    min-width: 300px;
}

.ZG-horizontalScrollViewport {
    height: 16px;
    max-height: 16px;
    min-height: 16px;
    overflow-x: scroll;
    flex: 1 1 auto;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    position: relative;
    overflow-x: scroll;
    height: 16px;
}

.ZG-horizondalScroller {
    position: absolute;
    height: 100%;
    width: 2750px;
    height: 16px;
    max-height: 16px;
    min-height: 16px;
} */

.ZG-centerColViewport,
.ZG-pinndedCenterColViewport,
.ZG-gridBody {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.ZG-centerColViewport::-webkit-scrollbar,
.ZG-pinndedCenterColViewport::-webkit-scrollbar,
.ZG-gridBody::-webkit-scrollbar {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.ZG-centerColViewport::-webkit-scrollbar:vertical,
.ZG-pinndedCenterColViewport::-webkit-scrollbar:vertical,
.ZG-gridBody::-webkit-scrollbar:vertical {
	width: 0;
}

.ZG-centerColViewport::-webkit-scrollbar:horizontal,
.ZG-pinndedCenterColViewport::-webkit-scrollbar:horizontal,
.ZG-gridBody::-webkit-scrollbar:horizontal {
	height: 0;
}

/** vertical scrollbar style start ***/
.ZG-gridBodyWrapper {
	position: relative;
	display: flex;
	flex: 1 1 auto;
    flex-direction: row ;
    min-height: 0;	
}

.ZG-verticalScroll {
	overflow-y: auto;
	background: transparent;
	position: absolute;
	bottom: 0;
	top: 0;
	right: 0;
	width: 16px;
	max-width: 16px;
	min-width: 16px;
	min-height: 0;
	height: 100%;
	display: flex;
	z-index: 1;
}

.ZG-verticalScrollViewport {
	width: 16px;
	max-width: 16px;
	min-width: 16px;
	flex: 1 1 auto;
	height: 100%;
	overflow: hidden;
	position: relative;
	overflow-y: scroll;
}

.ZG-verticalScroller {
	position: absolute;
	height: 1000px;
	width: 16px;
	max-width: 16px;
	min-width: 16px;
}
/** vertical scrollbar style end ***/


/* new scroll implementation - start */
.ZG-centerColViewport,.ZG-gridBody,.ZG-centerCol,.ZG-pinndedCenterColViewport {
	overflow: hidden;
}

.ZG-gridScrollHolder {
	height: 100%;
	overflow: auto;
	position: relative;
}
.ZG-rootWrapper{
	position: sticky;
	top: 0;
	left: 0;
}




.ZG-gridScrollHolder {
	overflow: auto;  /* or scroll */
}

.ZG-hideScrollbar {
	scrollbar-width: none;
}
.ZG-hideScrollbar::-webkit-scrollbar {
	display: none;
}




/*** scrollbar style end ***/

/*** checkbox style start ***/
.ZG-rowCheckboxPanel input[type='checkbox'] {
	z-index: -1;
	position: absolute;
	opacity: 0;
}

.ZG-rowCheckboxPanel {
	display: flex;
}

.ZG-rowCheckboxPanel .ZG-rowcheckedIcon {
	display: none;
}

.ZG-rowselect {
	width: 13px;
	height: 13px;
	border-radius: 3px;
	border: 1px solid var(--ZG-CellBorderColor);
	display: inline-block;
	position: relative;
	background-color: var(--ZG-rowBgColor);
	cursor: pointer;
}

.ZG-rowCheckboxPanel input[type='checkbox'].ZG-checkboxChecked + .ZG-rowselect {
	border-color: transparent;
}
.ZG-rowCheckboxPanel
	input[type='checkbox'].ZG-checkboxChecked
	+ .ZG-rowselect
	.ZG-rowcheckedIcon {
	display: block;
	margin: -1px 0 0 -1px;
}

.ZG-rowCheckboxPanel
	.ZG-selectAllCheckbox.ZG-selectAllindeterminate
	+ .ZG-rowselect:after {
	content: '';
	position: absolute;
	width: 6px;
	height: 2px;
	background: var(--ZG-checkboxIndeterminateColor);
	margin: auto;
	right: 0;
	left: 0;
	top: 5px;
	border-radius: 3px;
}
/*** checkbox style end ***/

/*** range selection style start ***/
.ZG-cellRangeSelected{
	background-color: var(--ZG-CellSelectedColor);	
}

.ZG-cell.ZG-cellSelection.ZG-cellRangeSelected{
	background: var(--ZG-CellSelectedBGColor);
}

.ZG-cell.ZG-cellRangeSelected:before {
	border: 2px solid transparent;
}

.ZG-cell.ZG-cellSelection.ZG-cellRangeSelected:before{
	border: 2px solid var(--ZG-CellSelectionBorderColor);	
	border-radius: 4px;
}

.ZG-cellRangeSelected.ZG-cellRangeLeft:before {
	border-left-color: var(--ZG-CellSelectionBorderColor);
	border-bottom-width: 0;
	border-top-width: 0;
}

.ZG-cellRangeSelected.ZG-cellRangeTop:before {
	border-top-color: var(--ZG-CellSelectionBorderColor);
	border-right-width: 0;
	border-left-width: 0;
}

.ZG-cellRangeSelected.ZG-cellRangeRight:before {
	border-right-color: var(--ZG-CellSelectionBorderColor);
	border-bottom-width: 0;
	border-top-width: 0;
}

.ZG-cellRangeSelected.ZG-cellRangeBottom:before {
	border-bottom-color: var(--ZG-CellSelectionBorderColor);
	border-right-width: 0;
	border-left-width: 0;
}

.ZG-cellRangeSelected.ZG-cellRangeLeft:before,
.ZG-cellRangeSelected.ZG-cellRangeTop:before,
.ZG-cellRangeSelected.ZG-cellRangeRight:before,
.ZG-cellRangeSelected.ZG-cellRangeBottom:before {
	border-radius: 0;
}
.ZG-cellRangeSelected.ZG-cellRangeLeft.ZG-cellRangeTop:before {
	border-top-left-radius: 4px;
	border-left-width: 2px;
	border-top-width: 2px;

}
.ZG-cellRangeSelected.ZG-cellRangeRight.ZG-cellRangeTop:before {
	border-top-right-radius: 4px;
	border-right-width: 2px;
	border-top-width: 2px;
}

.ZG-cellRangeSelected.ZG-cellRangeRight.ZG-cellRangeBottom:before {
	border-bottom-right-radius: 4px;
	border-bottom-width: 2px;
	border-right-width: 2px;
}
.ZG-cellRangeSelected.ZG-cellRangeLeft.ZG-cellRangeBottom:before {
	border-bottom-left-radius: 4px;
	border-bottom-width: 2px;
	border-left-width: 2px;
}

.ZG-cellRangeSingleCell {
	background-color: var(--ZG-CellSelectedColor);
}

.ZG-fillseries__handle {
	background-color: var(--ZG-CellSelectionBorderColor);
	bottom: -1px;
	height: 6px;
	position: absolute;
	width: 6px;
	cursor: cell;
	right: -1px;
	z-index: 2;
}
/*** range selection style end ***/
/*** disable style start ***/
.ZG-cell.ZG-cell--disabled{
	background-color: var(--ZG-CellDisabledColor);
}
.ZG-cell.ZG-cell--disabled.ZG-cellRangeSelected{
	background-color: #dfece7;
}
/*** disable style end ***/
/*** selection fill style start ***/
.ZG-cell.ZG-fillseries:before {
	border: 2px dashed transparent;
	position: absolute;
    content: '';
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
	height: calc(100% + 2px);
    border-radius: 2px;
	z-index: 2;
}
.ZG-fillseries.ZG-fillseries__selection--left:before {
	border-left-color: var(--ZG-CellSelectionBorderColor);
}

.ZG-fillseries.ZG-fillseries__selection--top:before {
	border-top-color: var(--ZG-CellSelectionBorderColor);
}

.ZG-fillseries.ZG-fillseries__selection--right:before {
	border-right-color: var(--ZG-CellSelectionBorderColor);
}

.ZG-fillseries.ZG-fillseries__selection--bottom:before {
	border-bottom-color: var(--ZG-CellSelectionBorderColor);
}

.ZG-cell.ZG-fillseries:after {
	border: 2px solid transparent;
	z-index: 1;
}
.ZG-fillseries.ZG-fillseries__selection--left:after {
	border-left-color: #fff;
}

.ZG-fillseries.ZG-fillseries__selection--top:after {
	border-top-color: #fff;
}

.ZG-fillseries.ZG-fillseries__selection--right:after {
	border-right-color: #fff;
}

.ZG-fillseries.ZG-fillseries__selection--bottom:after {
	border-bottom-color: #fff;
}

/*** selection fill style end ***/

/*** user presense style start ***/
.ZG-userPresenceLayer {
	position: absolute;
	width: calc(100% + 1px);
	height: calc(100% + 1px);
	left: 0px;
    border: 1.5px solid var(--user-presence-selection-pseudo-borderColor);
    border-radius: 2px;
    top: -1px;
}

.ZG-userPresenceLayerInner {
	display: flex;
	align-items: center;
	position: absolute;
	height: 18px;
	right: -1px;
	top: -1px;
	background-color: var(--user-presence-selection-pseudo-bgcolor);
	border-radius: 0 2px 0 4px;
}

.ZG-userPresenceNameProfileSec {
	display: flex;
	align-items: center;
	position: relative;
	right: -5px;
}

.ZG-userPresenceName {
	content: var(--user-presence-selection-pseudo-userName);
	right: 0;
	/* background: var(--ZG-userPresenceCountBGColor); */
    display: block;
	text-overflow: ellipsis;   
	overflow: hidden;
	white-space: nowrap;
    font-size: 9px;
    color: var(--ZG-userPresenceCountColor);
    /* border: 1px solid var(--ZG-userPresenceProfileBorderColor); */
    width: fit-content;
	max-width: 100px;
    height: 14px;
    padding: 2px;
    /* border-radius: 12px; */
}

.ZG-userPresenceProfile,
.ZG-userPresenceCount {
	content: '';
	height: 14px;
	width: 20px;
	background-repeat: no-repeat;
	background-size: cover;
	right: 0;
	border-radius: 50%;
	/* opacity: 0; */
	/* background-image: var(--user-presence-selection-pseudo-user-image-url); */
	z-index: 2;
}

.ZG-userPresenceProfile {
	position: absolute;
	right: 0;
}

.ZG-userPresenceProfile img {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid var(--ZG-userPresenceProfileBorderColor);
}

.ZG-userPresenceCount {
	position: relative;
	right: 3px;
	background: var(--ZG-userPresenceCountBGColor);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 8px;
	color: var(--ZG-userPresenceCountColor);
	border: 1px solid var(--ZG-userPresenceProfileBorderColor);	
	width: auto;
    height: auto;
    padding: 2px;
    border-radius: 12px;
}

.ZG-userPersonList {
	display: flex;
	align-items: center;
	font-size: 13px;
}

.ZG-userPersonListName {
	max-width: 150px;	
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.ZG-userPersonList .ZG-userPresenceProfile,
.ZG-userPersonList .ZG-userPresenceProfile img {
	position: relative;
	width: 18px;
	height: 18px;
	border: 0;
	margin-inline-end: 8px;
}

/*** user presense style end ***/
/*** floating grid style start ***/
.ZG-floatingGridSec {
	display: flex;
	background-color: var(--ZG-floatingGridBGColor);
	position: absolute;
	top: 0;
	left: 1px;
	z-index: 1;
}

.ZG-rowPopover{
	background-color: var(--ZG-floatingGridBGColor);
	z-index: 2;
}

.ZG-pinnedRowSelectionCol .ZG-rowPopover {
    z-index: 1;
}

.ZG-pinnedLeftCol,.ZG-pinnedRightCol{
	overflow: hidden;
}

.ZG-rowPopover:before {
	position: absolute;
    content: '';
    width: calc(100% + 1px);
    top: -1px;
    height: calc(100% + 2px);
    /* box-shadow: 0 0 0 2px var(--ZG-rowPopoverBorderColor), 0 0 30px 0 rgba(0, 0, 0, 0.24); */
	border: 2px solid var(--ZG-rowPopoverBorderColor);
    z-index: 3;	
    /* opacity: 0; */
    /* right: 0; */
    /* border-radius: 2px; */
}

.ZG-floatingGridSec .ZG-rowPopover:before{
	top: 0;
	height: calc(100% + 1px);
}

.ZG-floatingGridSec .ZG-centerColViewport{
	height: 100%;
}

.ZG-pinnedRowSelectionCol .ZG-rowPopover:before, .ZG-pinnedLeftCol .ZG-rowPopover:before{
	border-inline-end: 0;
}

.ZG-pinnedLeftCol .ZG-rowPopover:before, .ZG-centerCol .ZG-rowPopover:before{
	border-inline-start: 0;	
}
.ZG-poppedRowMessageSec {
	position: absolute;
	display: flex;
	align-items: center;
	background: var(--ZG-rowPopoverMsgBGColor);
	color: var(--ZG-rowPopoverMsgColor);
	fill: var(--ZG-rowPopoverMsgColor);
	font-size: 10px;
	padding: 2px 10px;
	border-radius: 0 0 4px 4px;
	left: 0px;
	top: 100%;
	min-width: 120px;
	z-index: 3;			
}

.ZG-floatingGridSec .ZG-poppedRowMessageSec{
	top: 102%;
	left: -1px;
	min-width: fit-content;
	white-space: nowrap;
}

.ZG-poppedRowMessageHelpIcon {   
    margin-inline-start: 2px;
}

.ZG-floatingGridSec.ZG-rowPopover .ZG-centerColViewport, .ZG-floatingGridSec.ZG-rowPopover .ZG-centerColViewport .ZG-centerColContainer{
	height: 100%;
}
.ZG-floatingGridSec.ZG-rowPopover > div {
    z-index: 4;
}
.ZG-floatingGridSec.ZG-rowPopover:before {
    left: 0;
    right: 0;
	top: 0;
    width: 100%;
	height: 100%;
	border: 0;
	outline: 2px solid var(--ZG-rowPopoverBorderColor);
}

.ZG-floatingGridSec .ZG-row.ZG-rowPopover:before{
	box-shadow: none;
}

.ZG-row.ZG-FloatingRecordPresentAbove {
    border-top: 1px solid var(--ZG-CellBorderColor);
}
.ZG-floatingGridSec .ZG-centerCol{
	height: 100%;
}
/*** floating grid style end ***/

/*** add field button style start ***/

.ZG-columnBuffer{
	position: absolute;
	height: 100%;
}

.ZG-rowPlus {
	position: absolute;
	width: 100%;
	height: 30px;
	display: flex;
    justify-content: center;
	z-index: 2;
}

.ZG-coladdFieldBtn,
.ZG-addRowBtn {
	position: absolute;
	top: 10px;	
	cursor: pointer;
	font-size: 18px;
	width: 20px;
	height: 20px;
	border-radius: 5px;
	border: solid 1px var(--ZG-addFieldBtnBorderColor);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ZG-addFieldBtnColor);
	margin: 1px 5px 0;
	background: var(--ZG-addFieldBtnBGColor);
	fill: var(--ZG-addFieldBtnIconColor);
}

.ZG-addRowBtn {
	position: relative;
	left: 0;	
}
/*** add field button style end ***/

/*** Summary Bar style start ***/
.ZG-summaryBar {
	z-index: 3;
	border-top-width: 1px;
	/* position: relative; */
	/* position: fixed; */
	bottom: 0;
	width: 100%;
}

.ZG-summaryBar .ZG-pinnedRowSelectionCol .ZG-cellValue {
	padding: 0;
}

.ZG-summaryCell {
	display: flex;
	align-items: center;
	padding: 5px 0;
}

.ZG-summaryCellText {
	color: var(--ZG-summaryCellTextColor);
	font-size: 12px;
	margin-inline-end: 5px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	width: calc(100% - 30%);
}

.ZG-summaryCellValue {
	font-size: 13px;
}
.ZG-summaryCellDropdown {
	width: 20px;
	height: 20px;
	background-color: var(--ZG-summaryCellDropdownBGColor);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	position: absolute;
	right: 10px;
	cursor: pointer;
	opacity: 0;
}
.ZG-cell:hover .ZG-summaryCellDropdown {
	opacity: 1;
}
/*** Summary Bar style end ***/

/*** row hover style start ***/
/* .dg-row-hover .ZG-cell {
    background-color: var(--ZG-CellHoverColor);
} */
/*** row hover style end ***/
/* .dg-column-hover {
    background-color: var(--ZG-CellHoverColor);
} */

.ZG-pinndedCenterColViewport {
	width: 100%;
	/* overflow-x: auto; */ /* for new scroll implementation */		
	min-height: 100%;
	height: 100%;
}

.ZG-pinnedCenterColContainer {
	position: relative;
	height: 100%;
}

/*** loader style start ***/
.ZG-loader {
	width: 100%;
	height: 100%;
	background: var(--ZG-loaderBGColor);
	z-index: 3;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ZG-circleLoaderBox {
	width: 52px;
	height: 52px;	
	border-radius: 12px;
	background: var(--ZG-CircleLoaderBGColor);
	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ZG-circleLoader {
	position: relative;
	width: 40px;
	height: 40px;
}

.ZG-circleLoader:before,
.ZG-circleLoader:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	border: 4px solid transparent;
	border-top-color: #239320;
}
.ZG-circleLoader:before {
	z-index: 4;
	animation: gridLoaderspin 1s infinite;
}

.ZG-circleLoader:after {
	border: 4px solid #239320;
	opacity: 0.4;
}
@keyframes gridLoaderspin {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
/*** loader style end ***/
/*** skeleton loader style start ***/
.ZG-skeletonLoader {
	height: 100%;
	width: 100%;
	border-radius: 5px;
	animation: 1.5s gridSkeletonLoader forwards infinite linear;
	background: #f6f7f8;
	background-image: -webkit-linear-gradient(
		left,
		#f6f7f8 0,
		#edeef1 20%,
		#f6f7f8 40%,
		#f6f7f8 100%
	);
	background-repeat: no-repeat;
}

@keyframes gridSkeletonLoader {
	0% {
		background-position: -468px 0;
	}
	100% {
		background-position: 468px 0;
	}
}

/*** skeleton loader style end ***/

/*** table edit state style start ***/
.ZG-cellEditorContainer {
    position: absolute;    
    background: var(--ZG-cellEditorContainerBGColor);
    z-index: 3;
    box-shadow: 0 0 0 2px var(--ZG-cellEditorBorderColor), 0 0 30px 0 rgba(35,38,41,.07);
    border-radius: 2px;
	padding: 0 var(--ZG-Cellpadding);	
}

.ZG-cellEditorContainer .ZG-cell{
	border-color: transparent;
	height: inherit;
    min-width: 0;
    width: inherit;
}
/*** table edit state style end ***/

/*** cell edit state for temporary style start***/
/* .ZF-optionText {
    position: relative;
    font-size: 13px;
    display: inline-flex;
    line-height: 14px;
    max-width: fit-content;
}

.ZF-textField {
    min-height: 30px;
    width: 200px;
    padding: 5px;
    cursor: text;
}

.ZF-fieldEditState {
    height: fit-content;
    background-color: #fff;
    z-index: 3;
    cursor: text;
    line-height: 18px;
}

.ZF-optionText.ZF-textField {
    line-height: 18px;
}

.ZF-fieldBorder {
    border: 1px solid #ccc;
    width: 200px;
}

.ZF-fieldBorder.ZF-fieldEditState {
    border-color: #4daa38;
}

.ZF-fieldEditState.ZF-optionText{
	overflow: auto;
    white-space: pre-wrap;
    text-overflow: unset;
    display: initial;
}
.ZG-cellEditorContainer .ZF-textField{
	padding: 0;
} */
/*** cell edit state   for temporary style end***/

/*** Resize Cue style start ***/
.ZG-resizeCueSec,.ZG-dragDropFieldPlacedPos.ZG-headerCell:before {
    position: absolute;
	content: '';
    top: 2px;
    right: -3px;
    width: 5px;
    height: calc(100% - 4px);
    cursor: col-resize;
    background: var(--ZG-resizeCueBGColor);
    z-index: 2;
    border-radius: 3px;
	opacity: 0;
}

.ZG-resizing {
	opacity: 1;
}

.ZG-resizeCueSec:hover{
	opacity: 1;
}
/*** Resize Cue style end ***/

/***record Drag and drop dom start***/

.ZG-recordPanelList .ZG-dragDropIcon{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 3px;
    padding: 0;
}

.ZG-recordDragDropSec{
	position: absolute;    
    z-index: 1;
    top: 145px;   
	width: 60%;
    left: 50px; 	
}

.ZG-recordDragDropSec .ZG-row,.ZG-recordDragDropSec .ZG-cell{
	position: relative;
	box-sizing: border-box;
}

.ZG-recordDragDropSec .ZG-row {
    border: 1px solid var(--ZG-dragDropRecordBorderColor);        
    background: #fff;
    border-radius: 5px;    
    height: 42px;
	display: -webkit-inline-box;
    white-space: nowrap;
	left: 15px;
}

.ZG-recordDragDropSec .ZG-row:nth-child(2){
	top: -28px;
    left: 30px;
    z-index: -1;
}

.ZG-recordDragDropSec .ZG-row:nth-child(3){
	top: -30px;
    z-index: 2;
}
.ZG-recordDragDropSec .ZG-row div.ZG-cell:last-child{
	border-inline-end: 0;
}

.ZG-dragDropRecordCount{
	border: 1px solid var(--ZG-dragDropRecordBorderColor);
}

.ZG-dragDropRecordCount{
    position: absolute;
	box-sizing: border-box;
	display: flex;
    align-items: center;
    justify-content: center;
    bottom: 20px;
    left: 15px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--ZG-dragDropRecordCountBGColor);
	color: var(--ZG-dragDropRecordCountColor);
    font-size: 12px;
	height: 20px;	        
    line-height: 8px;
	min-width: 20px;    
    width: fit-content;    
	z-index: 6;    
}

.ZG-recordDragDropSec .ZG-dragDropRecordCount{
    top: -10px;
    left: 30px;
}

 .ZG-dragDropRecordCount {
	top: -10px;
    right: -10px;
	left: unset;    
}


.ZG-row.ZG-dragDropRecordPlacedPos{
	border-color: var(--ZG-dragDropRecordBorderColor);
}

.ZG-pinnedRowSelectionCol .ZG-row.ZG-dragDropRecordPlacedPos .ZG-cell:first-child:before{
	position: absolute;
	content: '';
	width: 30px;
	height: 5px;
	bottom: -3px;
	top: unset;
	left: 50%;
	transform: translateX(-50%);
	background: var(--ZG-dragDropRecordBorderColor);
	border-radius: 3px;
}
/***record Drag and drop dom end***/

/*** Field drag and drop dom start ***/
.ZG-fieldDragDropSec {
	position: absolute;         
    left: 50%;
    top: 52px;	
    box-sizing: inherit;
	width: 100px;
}

.ZG-fieldDragDropSecList {
    width: 100px;	
	overflow: hidden;
	border-radius: 4px;
    border: 1px solid var(--ZG-dragDropRecordBorderColor);	
	position: absolute;
	box-shadow: -2px 2px 8px 0px #0000002E;
}

.ZG-fieldDragDropSec .ZG-headerCell{
	position: relative;
	width: 100px;	   
    box-sizing: border-box;
    z-index: 4;
    height: 42px;
	border-inline-end: 0;
    border-radius: 4px 4px 0 0;
    background: var(--ZG-fieldDragDropCellBgcolor);
}

.ZG-headerCell.ZG-dragDropFieldPlacedPos:after,.ZG-cell.ZG-dragDropFieldPlacedPos:after{
	position: absolute;
	content: '';
	top: 0;
	right: -1px;
	width: 1px;
	height: calc(100% + 1px);
	background: var(--ZG-dragDropRecordBorderColor);

}
.ZG-fieldDragDropSec .ZG-fieldDragDropSecList:nth-child(1){
	top: 0;
	right: 0;
	z-index: 5;
}
.ZG-fieldDragDropSec .ZG-fieldDragDropSecList:nth-child(2){
	top: 10px;
	right: -10px;
    z-index: 4;
}

.ZG-fieldDragDropSec .ZG-fieldDragDropSecList:nth-child(3){
	top: 20px;
	right: -20px;
    z-index: 3;
}
.ZG-recordDragDropSec .ZG-row div.ZG-cell:last-child{
	border-inline-end: 0;
}

.ZG-fieldDragDropSec .ZG-dragDropRecordCount {
	top: -10px;
    right: -10px;
	left: unset;    
}

.ZG-fieldDragDropSec .ZG-row{
	position: relative;
}

/*** Field drag and drop dom end ***/

.ZG-popup-child {
	position        : absolute;
	z-index: 2;
}

.ZG-hidden {
	display: none !important;
}

.ZG-animateRow{
	transition: transform .4s,top .4s;
}

/* Chandru style added */

.ZG-cellEditorContainer.ZG-popup-editor{
	max-width: 100%;
}

.ZG-cellEditorContainer.ZG-cellInlineEditing {
	position: relative;
	width: 100%;
	/* width: inherit;
    height: inherit; */
}

.ZG-reorder-cue {
	background-color: black;
	width: 100%;
	height: 1px;
}

.comp-hidden {
	display: none;
}

.dg-cell-wrapper {
	display: flex;
	align-items: center;
	padding: 5px;
	border-bottom: 1px solid #e0e0e0;
	background-color: #f9f9f9;
	font-size: 14px;
}

.dg-group-expanded,
.dg-group-contracted {
	display: flex;
	align-items: center;
	cursor: pointer;
	margin-inline-end: 5px;
}

.dg-icon {
	width: 16px;
	height: 16px;
	display: inline-block;
	position: relative;
}

.dg-icon-tree-open::before {
	content: '▼';
	/* Downward arrow to represent expanded state */
	display: inline-block;
	font-size: 12px;
	line-height: 16px;
	text-align: center;
}

.dg-icon-tree-closed::before {
	content: '►';
	/* Rightward arrow to represent collapsed state */
	display: inline-block;
	font-size: 12px;
	line-height: 16px;
	text-align: center;
}

.dg-group-checkbox {
	margin-inline-end: 5px;
}

.dg-group-value {
	flex-grow: 1;
}

.dg-group-child-count {
	margin-inline-start: 10px;
	color: #888;
}

.dg-invisible {
	display: none;
}

 .ZG-fullWidthCol .ZG-row {
 	pointer-events: auto;
 }

.dg-group {
	width: 100%;
}

.dg-cell-wrapper {
    display: flex;
    align-items: center;
    padding-inline-start: calc(var(--dg-indentation-level, 0) * 20px); /* Base indentation of 20px per level */
}

.dg-group-expanded,
.dg-group-contracted {
    cursor: pointer;
    margin-inline-end: 8px;
}

.dg-group-checkbox {
    margin-inline-end: 8px;
}


.dg-group-child-count {
    margin-inline-start: 8px;
    color: #666; /* Grey color for child count */
}
/* ended */



.ZG-stickyTop {
	position: absolute;
	width: calc(100% - 0px);
	overflow: hidden;
}
.ZG-gridHeader {
	z-index: 1;
}


/*** Theme customization style start ***/
.dg__theme--dark{
	--ZG-headerCellTextColor: #fff;
	--ZG-gridHeaderBGColor: #2d2d2d;
	--ZG-CellBorderColor: #777;
	--ZG-CellSelectedColor: rgb(59,63,60);
	--ZG-cellBgColor: #2d2d2d;
	--ZG-CellSelectionBorderColor: #fff;
	--ZG-Cellpadding: 10px;
	--ZG-CellSelectedBGColor: #2d2d2d;
	--ZG-rowBgColor: #2d2d2d;
	--ZG-addRecordCellBGColor: #2d2d2d;
	--ZG-addRecordTextColor: #2d2d2d;
	--ZG-groupingCategoryName: #2d2d2d;
	--ZG-groupingCategoryValue: #2d2d2d;
	--ZG-groupingCategoryMoreIcon: #2d2d2d;
	--ZG-firstLevelGroupingHeaderBGColor: #2d2d2d;
	--ZG-secondLevelGroupingHeaderBGColor: #2d2d2d;
	--ZG-firstLevelGroupSidebarColor: #2d2d2d;
	--ZG-secondLevelGroupSidebarColor: #2d2d2d;
	--ZG-CellHoverColor: rgba(33, 150, 243, 0.1);	
	--field-input-text-color: #fff;
	--ZG-cellEditorBorderColor: #fff;
	--ZG-cellEditorContainerBGColor: #2d2d2d;
	--dropdown-container-bg-color: #333642;
	--dropdown-options-listbox-bg-color: #333642;
	--dropdown-option-hover-bg-color: #414450;
	--dropdown-search-bg-color: #333642;
	--selectbox-dropdown-icon-color: #fff;
}
/*** Theme customization style end ***/

.ZG-grid-popup {
    position: unset !important;
}

/*** rtl style start ***/
[dir="rtl"] .ZG-column--pinned-right-first{    
    border-inline-start: 0;
}
[dir="rtl"] .ZG-rootWrapper{
	right: 0;
}
[dir="rtl"] .ZG-verticalScroll{
	right: unset;
	left: 0;
}
/*** rtl style end ***/


/* suppressKeyDown Styles */

.ZG-focus-trap {
	width: 0px;
	height: 0px;
	overflow: hidden;
	position: absolute;
}

.record-fadeIn {
    animation: record-fadeIn var(--record-animate-duration) linear;
} 

/*  row highlight */
.ZG-row.ZG-rowHighlight-above:before{
    position: absolute;
    content:'';
    top: -1px;
    width: 100%;
	border-top: 1px solid var(--ZG-dragDropRecordBorderColor);    
}

.ZG-row.ZG-rowHighlight-below:before{
    position: absolute;
    content:'';
    bottom: -1px;
    width: 100%;
	border-bottom: 1px solid var(--ZG-dragDropRecordBorderColor);    
}

.ZG-pinnedRowSelectionCol .ZG-row.ZG-rowHighlight-below,
.ZG-pinnedRowSelectionCol .ZG-row.ZG-rowHighlight-above{
    z-index: 1;
}
.ZG-pinnedRowSelectionCol .ZG-row.ZG-rowHighlight-above:after,
.ZG-pinnedRowSelectionCol .ZG-row.ZG-rowHighlight-below:after{
	position: absolute;
	content: '';
	width: 30px;
	height: 5px;
	top: -3px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--ZG-dragDropRecordBorderColor);
	border-radius: 3px;
    z-index: 3;
}
.ZG-pinnedRowSelectionCol .ZG-row.ZG-rowHighlight-below:after{   
	top: unset;
    bottom: -3px;	
}	

/* column highlight */

.ZG-cell.ZG-colHighlight-left, .ZG-cell.ZG-colHighlight-right{
    z-index: 2;
}

.ZG-cell.ZG-colHighlight-left:before,
.ZG-headerCell.ZG-colHighlight-left:before{
    position: absolute;
    content:'';
    left: -1px;
    top: 0;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
	border-left: 1px solid var(--ZG-dragDropRecordBorderColor);
    z-index: 1;
}

.ZG-cell.ZG-column--pinned-center-first.ZG-colHighlight-left:before,
.ZG-headerCell.ZG-column--pinned-center-first.ZG-colHighlight-left:before{
    border-left-width: 2px;
}

.ZG-cell.ZG-colHighlight-right:before,
.ZG-headerCell.ZG-colHighlight-right:before{
    position: absolute;
    content:'';
    right: -1px;
    top: 0;
    height: calc(100% + 2px);
    width: calc(100% + 2px);
	border-right: 1px solid var(--ZG-dragDropRecordBorderColor);
    z-index: 1;
}

.ZG-headerCell.ZG-colHighlight-left:after,
.ZG-headerCell.ZG-colHighlight-right:after{
	position: absolute;
    content: '';
    top: 2px;
    left: -3px;
    width: 5px;
    height: calc(100% - 4px);
    cursor: col-resize;
    background: var(--ZG-resizeCueBGColor);
    z-index: 2;
    border-radius: 3px;
}
.ZG-headerCell.ZG-colHighlight-right:after{  
    left: unset; 
	right: -3px;
}


/* Reorder : Ghost row and column css start */
.ZG-row-ghost-element, .ZG-column-ghost-element {
	border          : 1px solid #ccc;
	border-radius   : 5px;
	background-color: #fff;
}
/* Reorder : Ghost row and column css end */


/*** No Result Panel Style Start ***/
.ZG-no-record-container {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background-color: var(--ZG-noRecordBackgroundColor);
}

.ZG-noResultEmptyPanel{
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center;
  padding: 10px;
  height: 100%;
}

.ZG-noResultcard{
  width: 110px;
    height: 31px;
    border-radius: 5px;
    border: solid 1px rgba(0,0,0,.2);
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 15px;
    margin-left: -50px;
}

.ZG-noResultEmptyPanel .ZG-noResultcard:nth-child(2) {
  position: relative;
  top: -4px;
  left: 42px;
}

.ZG-noResultEmptyPanel .ZG-noResultcard:nth-child(2) .ZT-noResultElement {
  background: #f4e7b2;
}

 .ZG-noResultElement{
  position: relative;
  width: 15px;
  height: 15px;
  background-color: #c1daf3;
  border-radius: 50%;
  display: flex;
 }

 .ZG-noResultElement::before {
  position: absolute;
  content: "";
  width: 65px;
  height: 4px;
  border-radius: 4px;
  background: #f4f4f4;
  left: 20px;
  top: 11px;
}

.ZG-noResultElement::after {
  position: absolute;
  content: "";
  width: 42px;
  height: 4px;
  border-radius: 4px;
  background: #e9e9e9;
  left: 20px;
  top: 1px;
}

.ZG-emptyStateText{
  font-weight: 500;
  font-size: 16px;
  color: #282828;
  margin-top: 22px;
  display: block;
}

.ZG-hide {
  display: none;
}
/*** No Result Panel Style end ***/
/*!*******************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/css/fieldcomponentCustomization.css ***!
  \*******************************************************************************************/
:root{
    --field-input-bg-color: transparent;  
    --text-field-max-height: 200px;  
    --dropdown-search-bg-color: #fff;
    --selectbox-dropdown-icon-color: #000;
    --field-root-padding: 0.3125rem 0;
    --chip-element-height: 1.25rem; /*20px*/
    --anchor-text-color: #006ec2;
}

.dg-field__root{
    padding: var(--field-root-padding);
}

.ZG-grid-view-root .dg-field__input-wrapper{    
    border: 0;    
    min-height: auto;
    background-color: var(--field-input-bg-color);
}

.ZG-grid-view-root .dg-field__input{
    padding: 0;
    background-color: var(--field-input-bg-color);
    height: 100%;    
    font-family: var(--field-component-font);
    border-radius: 0;
}

.ZG-grid-view-root .dg-text__input{
    line-height: 1.4;
}
.ZG-cellEditorContainer .dg-input__status--focus .dg-field__input-wrapper,
.ZG-cellEditorContainer .dg-input__status--error .dg-field__input-wrapper,
.ZG-grid-view-root .dg-field__input-wrapper:focus-visible{
    box-shadow: none;
}

.ZG-cellEditorContainer .dg-field__input{
    color: var(--field-input-text-color);
}
.dg-dropdown__search{
    background-color: var(--dropdown-search-bg-color);
}
/*** textarea field customization style start ***/
.dg-textarea__root {
    white-space: normal;
}

.dg-textarea__root .dg-text__input-wrapper {
    white-space: pre-wrap;
    word-break: break-word;
}
.ZG-cellEditorContainer .dg-textarea__root .dg-text__input-wrapper{
    -webkit-user-select: none;
    user-select: none;
}

.ZG-cellEditorContainer .dg-textarea__root .dg-text__input{    
    max-height: var(--text-field-max-height);
    overflow: auto;    
    -webkit-user-select: none;
    user-select: none;
}
/*** textarea field customization style end ***/

/** currency field customization style start **/
.dg-number__input-wrapper,.dg-number__input{        
    text-align: right;
}  
.ZG-cell .dg-number__input-wrapper,.ZG-cell .dg-number__input,
.ZG-cellEditorContainer .dg-number__input-wrapper,.ZG-cellEditorContainer .dg-number__input{
    justify-content: flex-end;
} 
.ZG-cellEditorContainer .dg-currency__root .dg-number__input{
    width: 100%;
}

.ZG-cell .dg-number__input-prefix,
.ZG-cell .dg-number__input-suffix{
    padding: 0;
    line-height: unset;
    margin: 0;
}
/** currency field customization style end **/
/** singleselect field style start ***/
.dg-singleselect__root .dg-chip__root{
    top: 0;
    margin: 0;
}

.dg-selectbox-dropdown__icon svg{
    fill: var(--selectbox-dropdown-icon-color);
}
/** singleselect field style end ***/
/** mulitselection field style start ***/

.dg-selectbox__root .dg-chip__ellipse-icon{
    top: 1px;
}

.ZG-grid-view-root .dg-chip__root:not(.dg-chip__ellipse-icon){
    margin-inline-end: 3px;    
    max-width: calc(100% - 10px);
    height: var(--chip-element-height);
}

.dg-multiselect__root.dg-field__root .dg-chip__root:not(.dg-chip__ellipse-icon){
    top: -4px;    
    vertical-align: middle;
}

.ZG-grid-view-root .dg-selectbox__input-wrapper{
    padding: 0;
    align-items: flex-start;
}

.ZG-cellEditorContainer .dg-selectbox__inner{
    display: flex;
    flex-wrap: wrap;        
}

.ZG-cellEditorContainer .dg-selectbox__icon-container{
    /* display: none; */
}

.ZG-cellEditorContainer .dg-multiselect__root .dg-selectbox__inner {
    max-height: 113px;
    overflow: auto;
}

/** mulitselection field style end ***/

/***link field customization style start ***/
.ZG-grid-view-root .dg-link__root .dg-field__input-wrapper .dg-field__input{
    color: var(--anchor-text-color);
    text-decoration: underline;
    height: fit-content;
    display: block;
    width: fit-content;
}

.ZG-cellEditorContainer .dg-link__root .dg-field__input{
    color: var(--field-input-text-color);
}
/***link field customization style end ***/
/*** checkbox field customization style start ***/
.dg-checkbox__root .dg-checkbox__input--custom{
    background-color: transparent;
    border: 0;
}
.dg-checkbox__root .dg-checkbox__input:checked+.dg-checkbox__input--custom svg{
    fill: #fff;
}
.dg-checkbox__root .FieldCheckboxTickRemove {
    display: none;
}
.dg-checkbox__root .dg-checkbox__input:checked+.dg-checkbox__input--custom .FieldCheckboxTickRemove{
    display: block;
}
/*** checkbox field customization style end ***/




/*** Grid render state optimisation style start ***/
.ZG-gridBody .dg-field--render-state{
    --field-root-padding: 0.3125rem;
    padding: var(--field-root-padding);    
}
.ZG-gridBody .dg-field--render-state:not(.ZG-cellSelection){
    overflow: hidden;
}
.ZG-gridBody .dg-field--render-state .dg-text__root{
    display: flex;    
    height: fit-content;
}
.ZG-gridBody .dg-text__prefix-elem{
    margin-inline-end: 6px;
}
.ZG-gridBody .dg-text__suffix-elem{
    margin-inline-start: 6px;
}
.ZG-gridBody .dg-text__root .dg-text__input{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    max-width: fit-content;
}
.ZG-gridBody .dg-field--render-state .dg-date-time__root .dg-field__input{
    height: auto;
    display: block;
}
.ZG-gridBody .dg-field--render-state .dg-text__root.dg-date-time__root{
    white-space: nowrap;
}
.ZG-gridBody .dg-field--render-state .zt-sentiment__root,
.ZG-gridBody .dg-field--render-state .dg-number__root {
    display: flex;
    align-items: center;
    height: fit-content;
}
.dg-field--render-state .zt-sentiment__root .dg-text__input{
    min-width: 0;
    flex: 1;
}

.ZG-gridBody .dg-field--render-state .dg-number__root .dg-text__input{
    width: auto;
}
.ZG-gridBody .dg-field--render-state .dg-number__root .dg-text__prefix-elem{
    margin-inline-end: 3px;
}
.ZG-gridBody .dg-field--render-state .dg-number__root .dg-text__suffix-elem{
    margin-inline-start: 3px;
    font-size: 12px;
}
.ZG-gridBody .dg-field--render-state .dg-number__root.dg-currency__accounting{
    justify-content: space-between;
}
.ZG-gridBody .dg-field--render-state .dg-number__root{
    justify-content: flex-end;
}
.ZG-cellSelection .dg-field--render-state .dg-number__input-wrapper{
    align-items: center;
}
.ZG-row .ZG-cell.dg-field--render-state .dg-chip__label{
    line-height: 14px;
}
.ZG-row .ZG-cell.dg-field--render-state:has(.dg-chip__root){
    --field-root-padding: 0.125rem 0.3125rem;
    padding: var(--field-root-padding);
}
.ZG-gridBody .ZG-cellValue:has(.dg-chip__root){
    display: flex;
}
/* .ZG-gridBody .dg-field--render-state .dg-singleselect__root{
    overflow: visible;
}
.ZG-gridBody .dg-field--render-state .dg-singleselect__root .dg-chip__label{    
    left: -3px;
    position: relative;
}
.ZG-gridBody .dg-field--render-state:has(.dg-singleselect__root){
    top: 0;
    margin: 0;
}
.ZG-gridBody .dg-field--render-state .dg-singleselect__root.zt-collaborator__root .dg-chip__label{
    left: unset;
}
.ZG-gridBody .dg-field--render-state:has(.dg-multiselect__root){
    --field-root-padding: 0.125rem 0.3125rem;
    padding: var(--field-root-padding);
} */
.ZG-gridBody .dg-field--render-state .dg-multiselect__root{
    align-items: flex-start;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;
    height: auto;
    top: 1px;
    position: relative;
} 

.ZT-recordHeightSM .ZG-gridBody .dg-field--render-state .dg-multiselect__root,
.ZG-row .dg-field--render-state .dg-multiselect__root.zt-attachment__root{
    flex-wrap: nowrap;
}
.ZG-row .dg-field--render-state .dg-multiselect__root.zt-attachment__root{
    width: fit-content;
    min-height: -webkit-fill-available;
    height: 0;    
    top: 0;        
}
.ZG-row .dg-field--render-state .dg-multiselect__root .dg-chip__root{
    margin: 2px 3px 2px 0;    
}
.ZG-row .dg-field--render-state .dg-checkbox__root,.ZG-row .dg-field--render-state .dg-checkbox__input-wrapper{
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.ZG-row .dg-field--render-state .dg-rating__root{
    display: flex;
    align-items: flex-start;    
}
/*** Grid render state optimisation style end ***/
/*!**********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/css/common.css ***!
  \**********************************************************************/
/*** variable ***/


/*** reset css ****/

.ZG-rootWrapper :focus{
  outline: 0;
}

.ZG-rootWrapper button{
  background-color: transparent;
  border: 0;  
}

/* .ZG-rootWrapper input[type=text]:focus {    
  border-bottom: 1px solid #4daa38;
  transition: all .5s;
} */
/*$Id$*/

.ZCC-dflex {
  display: flex
  }
  
  .ZCC-alignCenter{
      align-items: center;
  }
  
  .ZCC-dflexCenterCenter{
  display: flex;
  align-items: center;
  justify-content: center;
  }
  
  .ZCC-dflexCenterSpacebetween {
  display: flex;
  align-items: center;
  justify-content: space-between;
  }
  
  .ZCC-contentFlexend{
      justify-content: flex-end;
  }
  
  .ZCC-alignFlexend{
      align-items: flex-end;
  }
  .ZCC-textCenter {
  text-align: center;
  }
  
  .ZCC-textLeft {
  text-align: left;
  }
  
  .ZCC-textRight {
  text-align: right;
  }
  
  .ZCC-fullWidth {
  width: 100%;
  }
  
  .ZCC-fullHeight {
  height: 100%;
  }
  
  /** font  ***/
  
  .ZCC-fontNormal{
      font-weight: normal;
  }
  .ZCC-fontSemibold{
      font-weight: 500;
  }  
  .ZCC-fontBold{
      font-weight: 600;
  }
  
  .ZCC-font12{
    font-size: 12px;
  }
  
  .ZCC-font14{
    font-size: 14px;
  }
  
  .ZCC-whiteColor{
      color: #fff
  }
  
  .ZCC-textBlack{
      color: #282828;
  }
  
  .ZCC-bgWhite{
      background-color: #fff;
  }
  
  .ZCC-bgGrey{
      background-color: #858585;
  }
  
  .ZCC-bgTransparent{
      background: transparent;
  }
  
  /*** layout style start ***/
  .ZCC-heightInherit {
      height: inherit;
    }
    
  .ZCC-dTable {
  display: table;
  }

  .ZCC-dBlock {
    display: block;
    }

    
  .ZCC-dInlineFlex {
  display: inline-flex;
  }
  
  .ZCC-dInline {
  display: inline;
  }
  
  .ZCC-inlineBlock{
  display: inline-block
  }
  
  
      
  /* flexbox */
  
  .ZCC-flex1 {
    flex: 1;
  }
  
  
  .ZCC-justifyContentStart {
  justify-content: flex-start;
  }
  
  .ZCC-justifyContentEnd {
  justify-content: flex-end;
  }
  
  .ZCC-justifyContentCenter {
  justify-content: center;
  }
  
  .ZCC-justifyContentBetween {
  justify-content: space-between;
  }
  
  .ZCC-justifyContentAround {
  justify-content: space-around;
  }
  
  .ZCC-elementCenter{
  top:50%;
  left: 50%;    
  transform: translate(-50%,-50%);
  }
  
  /*** overflow ***/
  .ZCC-overflowAuto {
    overflow: auto;
  }
  
  .ZCC-overflowHidden {
    overflow: hidden;
  }
  
  .ZCC-overflowVisible {
    overflow: visible;
  }
  
  .ZCC-overflowScroll {
    overflow: scroll;
  }
  
  .ZCC-overflowXAuto {
    overflow-x: auto;
  }
  
  .ZCC-overflowYAuto {
    overflow-y: auto;
  }
  
  .ZCC-overflowXHidden {
    overflow-x: hidden;
  }
  
  .ZCC-overflowYHidden {
    overflow-y: hidden;
  }
  
  .ZCC-overflowXVisible {
    overflow-x: visible;
  }
  
  .ZCC-overflowYVisible {
    overflow-y: visible;
  }
  
  .ZCC-overflowXScroll {
    overflow-x: scroll;
  }
  
  .ZCC-overflowYScroll {
    overflow-y: scroll;
  }
  
  .ZCC-boxSizeBorderBox{
      box-sizing: border-box;
  }
  
  /*** layout style end ***/
  
  
  /**** gutter style start ***/
  
  .ZCC-m0{
  margin: 0;
  }
  
  .ZCC-mb16{
      margin-bottom: 16px;
  }
  
  .ZCC-mb32{
      margin-bottom: 32px;
  }
  
  .ZCC-mt0,
  .ZCC-my0 {
  margin-top: 0;
  }
  
  .ZCC-mr0,
  .ZCC-mx0 {
  margin-right: 0;
  }
  
  .ZCC-mb0,
  .ZCC-my0 {
  margin-bottom: 0;
  }
  
  .ZCC-ml0,
  .ZCC-mx0 {
  margin-left: 0;
  }
  
  .ZCC-m5 {
  margin: 5px;
  }
  
  .ZCC-mt5,
  .ZCC-my5 {
  margin-top: 5px;
  }
  
  .ZCC-mr5,
  .ZCC-mx5 {
  margin-right: 5px;
  }
  
  .ZCC-mb5,
  .ZCC-my5 {
  margin-bottom:5px;
  }
  
  .ZCC-ml5,
  .ZCC-mx5 {
  margin-left: 5px;
  }
  
  .ZCC-m10 {
  margin: 10px;
  }
  
  .ZCC-mt10,
  .ZCC-my10 {
  margin-top: 10px ;
  }
  
  .ZCC-mr10,
  .ZCC-mx10 {
  margin-right: 10px ;
  }
  
  .ZCC-mb10,
  .ZCC-my10 {
  margin-bottom: 10px ;
  }
  
  .ZCC-ml10,
  .ZCC-mx10 {
  margin-left: 10px ;
  }
  
  .ZCC-m15 {
  margin: 15px ;
  }
  
  .ZCC-mt15,
  .ZCC-my15 {
  margin-top: 15px ;
  }
  
  .ZCC-mr15,
  .ZCC-mx15 {
  margin-right: 15px ;
  }
  
  .ZCC-mb15,
  .ZCC-my15 {
  margin-bottom: 15px ;
  }
  
  .ZCC-ml15,
  .ZCC-mx15 {
  margin-left: 15px ;
  }
  
  .ZCC-m20 {
  margin: 20px;
  }
  
  .ZCC-mt20,
  .ZCC-my20 {
  margin-top: 20px;
  }
  
  .ZCC-mr20,
  .ZCC-mx20 {
  margin-right: 20px;
  }
  
  .ZCC-mb20,
  .ZCC-my20 {
  margin-bottom: 20px;
  }
  
  .ZCC-ml20,
  .ZCC-mx20 {
  margin-left: 20px;
  }
  
  .ZCC-m25 {
  margin: 25px ;
  }
  
  .ZCC-mt25,
  .ZCC-my25 {
  margin-top: 25px ;
  }
  
  .ZCC-mr25,
  .ZCC-mx25 {
  margin-right: 25px ;
  }
  
  .ZCC-mb25,
  .ZCC-my25 {
  margin-bottom: 25px ;
  }
  
  .ZCC-ml25,
  .ZCC-mx25 {
  margin-left: 25px ;
  }
  
  .ZCC-mt30,
  .ZCC-my30 {
  margin-top: 30px ;
  }
  
  .ZCC-mr30,
  .ZCC-mx30 {
  margin-right: 30px ;
  }
  
  .ZCC-mb30,
  .ZCC-my30 {
  margin-bottom: 30px ;
  }
  
  .ZCC-ml30,
  .ZCC-mx30 {
  margin-left: 30px ;
  }
  
  .ZCC-m40 {
  margin: 40px ;
  }
  
  .ZCC-mt40,
  .ZCC-my40 {
  margin-top: 40px ;
  }
  
  .ZCC-mr40,
  .ZCC-mx40 {
  margin-right: 25px ;
  }
  
  .ZCC-mb40,
  .ZCC-my40 {
  margin-bottom:40px ;
  }
  
  .ZCC-ml40,
  .ZCC-mx40 {
  margin-left: 40px ;
  }
  
  .ZCC-m8 {
    margin: 8px;
    }
    
    .ZCC-mt8,
    .ZCC-my8 {
    margin-top: 8px;
    }
    
    .ZCC-mr8,
    .ZCC-mx8 {
    margin-right: 8px;
    }
    
    .ZCC-mb8,
    .ZCC-my8 {
    margin-bottom:8px;
    }
    
    .ZCC-ml8,
    .ZCC-mx8 {
    margin-left: 8px;
    }
    
    .ZCC-m16 {
    margin: 16px;
    }
    
    .ZCC-mt16,
    .ZCC-my16 {
    margin-top: 16px ;
    }
    
    .ZCC-mr16,
    .ZCC-mx16 {
    margin-right: 16px ;
    }
    
    .ZCC-mb16,
    .ZCC-my16 {
    margin-bottom: 16px ;
    }
    
    .ZCC-ml16,
    .ZCC-mx16 {
    margin-left: 16px ;
    }
    
    .ZCC-m24 {
    margin: 24px ;
    }
    
    .ZCC-mt24,
    .ZCC-my24 {
    margin-top: 24px ;
    }
    
    .ZCC-mr24,
    .ZCC-mx24 {
    margin-right: 24px ;
    }
    
    .ZCC-mb24,
    .ZCC-my24 {
    margin-bottom: 24px ;
    }
    
    .ZCC-ml24,
    .ZCC-mx24 {
    margin-left: 24px ;
    }
    
    .ZCC-m32 {
    margin: 32px;
    }
    
    .ZCC-mt32,
    .ZCC-my32 {
    margin-top: 32px;
    }
    
    .ZCC-mr32,
    .ZCC-mx32 {
    margin-right: 32px;
    }
    
    .ZCC-mb32,
    .ZCC-my32 {
    margin-bottom: 32px;
    }
    
    .ZCC-ml32,
    .ZCC-mx32 {
    margin-left: 32px;
    }
    
  .ZCC-p0 {
  padding: 0 ;
  }
  
  .ZCC-pt0,
  .ZCC-py0 {
  padding-top: 0 ;
  }
  
  .ZCC-pr0,
  .ZCC-px0 {
  padding-right: 0 ;
  }
  
  .ZCC-pb0,
  .ZCC-py0 {
  padding-bottom: 0 ;
  }
  
  .ZCC-pl0,
  .ZCC-px0 {
  padding-left: 0 ;
  }
  
  .ZCC-p5 {
  padding: 5px ;
  }
  
  .ZCC-pt5,
  .ZCC-py5 {
  padding-top: 5px ;
  }
  
  .ZCC-pr5,
  .ZCC-px5 {
  padding-right: 5px ;
  }
  
  .ZCC-pb5,
  .ZCC-py5 {
  padding-bottom: 5px ;
  }
  
  .ZCC-pl5,
  .ZCC-px5 {
  padding-left: 5px ;
  }
  
  .ZCC-p10 {
  padding: 10px ;
  }
  
  .ZCC-pt10,
  .ZCC-py10 {
  padding-top: 10px ;
  }
  
  .ZCC-pr10,
  .ZCC-px10 {
  padding-right: 10px ;
  }
  
  .ZCC-pb10,
  .ZCC-py10 {
  padding-bottom: 10px ;
  }
  
  .ZCC-pl10,
  .ZCC-px10 {
  padding-left: 10px ;
  }
  
  .ZCC-p15 {
  padding: 15px ;
  }
  
  .ZCC-pt15,
  .ZCC-py15 {
  padding-top: 15px ;
  }
  
  .ZCC-pr15,
  .ZCC-px15 {
  padding-right: 15px ;
  }
  
  .ZCC-pb15,
  .ZCC-py15 {
  padding-bottom: 15px ;
  }
  
  .ZCC-pl15,
  .ZCC-px15 {
  padding-left: 15px ;
  }
  
  .ZCC-p20 {
  padding: 20px;
  }
  
  .ZCC-pt20,
  .ZCC-py20 {
  padding-top: 20px;
  }
  
  .ZCC-pr20,
  .ZCC-px20 {
  padding-right: 20px;
  }
  
  .ZCC-pb20,
  .ZCC-py20 {
  padding-bottom: 20px;
  }
  
  .ZCC-pl20,
  .ZCC-px20 {
  padding-left: 20px;
  }
  
  .ZCC-p25 {
  padding: 25px ;
  }
  
  .ZCC-pt25,
  .ZCC-py25 {
  padding-top: 25px ;
  }
  
  .ZCC-pr25,
  .ZCC-px25 {
  padding-right: 25px ;
  }
  
  .ZCC-pb25,
  .ZCC-py25 {
  padding-bottom: 25px ;
  }
  
  .ZCC-pl25,
  .ZCC-px25 {
  padding-left: 25px ;
  }
  
  .ZCC-ms5{
    margin-inline-start: 5px;
  }
  .ZCC-ms10{
    margin-inline-start: 10px;
  }
  .ZCC-ms15{
    margin-inline-start: 15px;
  }
  .ZCC-ms20{
    margin-inline-start: 20px;
  }
  .ZCC-ms25{
    margin-inline-start: 25px;
  }
  .ZCC-me5{
    margin-inline-end: 5px;
  }
  .ZCC-me10{
    margin-inline-end: 10px;
  }
  .ZCC-me15{
    margin-inline-end: 15px;
  }
  .ZCC-me20{
    margin-inline-end: 20px;
  }
  .ZCC-me25{
    margin-inline-end: 25px;
  }
  .ZCC-ps5{
    padding-inline-start: 5px;
  }
  .ZCC-ps10{
    padding-inline-start: 10px;
  }
  .ZCC-ps15{
    padding-inline-start: 15px;
  }
  .ZCC-ps20{
    padding-inline-start: 20px;
  }
  .ZCC-ps25{
    padding-inline-start: 25px;
  }
  .ZCC-pe5{
    padding-inline-end: 5px;
  }
  .ZCC-pe10{
    padding-inline-end: 10px;
  }
  .ZCC-pe15{
    padding-inline-end: 15px;
  }
  .ZCC-pe20{
    padding-inline-end: 20px;
  }
  .ZCC-pe25{
    padding-inline-end: 25px;
  }

  /**** gutter style end ***/
  
  .ZCC-imgResponsive {
      max-width: 100%;
  }
  
  
  /*** cursor ***/
  .ZCC-cursorAuto {
    cursor: auto;
  }
  
  .ZCC-cursorDefault {
    cursor: default;
  }
  
  .ZCC-cp{
      cursor: pointer;
  }
  
  .DG-cursorText{
      cursor: text;
  }
  
  .ZCC-cursorWait {
    cursor: wait;
  }
  
  .ZCC-cursorMove {
    cursor: move;
  }
  
  .ZCC-cursorNotAllowed {
    cursor: not-allowed;
  }
  
  .ZCC-pointerEventsNone {
    pointer-events: none;
  }
  
  .ZCC-pointerEventsAuto {
    pointer-events: auto;
  }
  
  /*** user select ***/
  .ZCC-selectNone {
    user-select: none;
  }
  
  .ZCC-selectText {
    user-select: text;
  }
  
  /*** opacity ****/
  .ZCC-opacity0 {
    opacity: 0;
  }
  
  .ZCC-opacity25 {
    opacity: 0.25;
  }
  
  .ZCC-opacity50 {
    opacity: 0.50;
  }
  
  .ZCC-opacity75 {
    opacity: 0.75;
  }
  
  .ZCC-opacity100 {
    opacity: 1;
  }
  
  /*** position ***/
  .ZCC-posRel{
      position: relative;
  }

  .ZCC-posAbs{
      position: absolute;
  }

  .ZCC-posSticky {
      position: sticky;
    }
    
    .ZCC-posT {
      top: 0;
    }
    
    .ZCC-posR {
      right: 0;
    }
    
    .ZCC-posB {
      bottom: 0;
    }
    
    .ZCC-posL {
      left: 0;
    }
    
    .ZCC-posY {
      top: 0;
      bottom: 0;
    }
    
    .ZCC-posX {
      right: 0;
      left: 0;
    }
    
    .ZCC-pos {
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
    }
    
    .ZCC-posNone {
      top: auto;
      right: auto;
      bottom: auto;
      left: auto;
    }
  
    /*** border ***/
  .ZCC-border0 {
  border: 0 ;
  }
  
  .ZCC-borderTop0 {
  border-top: 0 ;
  }
  
  .ZCC-borderRight0 {
  border-right: 0 ;
  }
  
  .ZCC-borderBottom0 {
  border-bottom: 0 ;
  }
  
  .ZCC-borderLeft0 {
  border-left: 0 ;
  }
  
  .ZCC-roundedCircle {
  border-radius: 50%;
  }
  
  .ZCC-rounded0 {
  border-radius: 0;
  }
  
  .ZCC-textLowercase {
  text-transform: lowercase ;
  }
  
  .ZCC-textUppercase {
  text-transform: uppercase ;
  }
  
  .ZCC-textCapitalize {
  text-transform: capitalize ;
  }
  
  
  .ZCC-textUnderline {
    text-decoration: underline;
  }
  
  .ZCC-textLineThrough {
    text-decoration: line-through;
  }
  
  .ZCC-textNoUnderline {
    text-decoration: none;
  }
  
  .ZCC-zIndexNeg1{
      z-index: -1;
  }
  
  .ZCC-zIndex0{
      z-index: 0;
  }
  
  .ZCC-zIndex1{
      z-index: 1;
  }
  
  .ZCC-zIndex2{
      z-index: 2;
  }
  
  .ZCC-zIndex3{
      z-index: 3;
  }
  
  .ZCC-zIndex4{
      z-index: 4;
  }
  
  .ZCC-zIndex5{
      z-index: 5;
  }
  
  .ZCC-zIndex9{
      z-index: 9;
  }
  
  .ZCC-zIndex99{
      z-index: 99;
  }
  
  .ZCC-zIndex999{
      z-index: 999;
  }
  
  
  /*** transform rotate ***/
  
  .ZCC-rotate0 {
    transform: rotate(0deg);
  }
  
  .ZCC-rotate45 {
    transform: rotate(45deg);
  }
  
  .ZCC-rotateNeg45 {
    transform: rotate(-45deg);
  }
  
  .ZCC-rotate90 {
    transform: rotate(90deg);
  }
  
  .ZCC-rotateNeg90 {
    transform: rotate(-90deg);
  }
  
  .ZCC-rotate180 {
    transform: rotate(180deg);
    transition: transform .3s;
  }
  
  .ZCC-rotateNeg180 {
    transform: rotate(-180deg);
  }
  
  .ZCC-verticalFlip {
    transform: rotateX(180deg);
  }
  

  .ZCC-textTruncate {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    
.ZCC-checkbox{
width: 14px;
height: 14px;
border: 1px solid #d9d9d9;
background-color: #fff;
border-radius: 3px;
margin-inline-end: 8px;
display: block;
position: relative;
}

.ZCC-checkbox.checked {
background: #6dbe5b;
border: 1px solid #6dbe5b;
}

.ZCC-checkbox.checked:after {
width: 3px;
height: 6px;
content: "";
position: absolute;
transform: rotate(45deg);
top: 2px;
left: 4px;
border-color: #fff;
border-style: solid;
border-width: 0 1.3px 1.3px 0;
}


  /* .ZG-rootWrapper input[type=text]:focus, select:focus {
      border: 1px solid #4daa38;
      transition: all .5s;
    } */

.ZCC-tooltip {
  position: absolute;
  padding: 6px 10px 6px 10px;
  border-radius: 3px;
  cursor: initial;
  background: #3f3f3f;
  font-size: 11px;
  color: #fff;  
  display: inline-block;
  opacity: 1;
  /* visibility: hidden; */
  /* transition: all .3s ease; */
}

.ZCC-tooltip .ZG-tooltipHiding {
  opacity: 0;
}

.ZCC-hide{
  display: none !important;
}

/*** dropdown menu style start ***/
ul.ZCC-contextMenu{
  background: #fff;
  border: 1px solid #d7d7d7;
  border-radius: 5px;
  box-shadow: 0 0 30px 0 rgba(55,59,63,.12);
  list-style: none;
  margin: 0;
  outline: 0;
  padding: 8px 0;
  position: fixed;
  min-width: 180px;
  width: fit-content;
  z-index: 3;
}

.ZCC-contextMenu.ZCC-contextMenuTopRightArrow:after{
    height: 9px;
    width: 9px;
    position: absolute;
    content: '';
    background: #fff;
    border: 1px solid #d7d7d7;
    border-top-width: 0;
    border-left-width: 0;
    transform: rotate(225deg);
    top: -5px;
    right: 26px;
}

.ZCC-contextMenuList{
  cursor: pointer;
  color: #101010;
  font-size: 13px;
  margin: 0 5px;
  min-height: 28px;
  min-width: 50px;
  padding: 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ZCC-contextMenuList:hover {
  background: #f9f9f9;
}

.ZCC-listOption{
width: 100%;

}

/*** dropdown menu style end ***/
/*!*****************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./Demo/Gantt/gannt-view.css ***!
  \*****************************************************************************/
:root {
    --dg-gantt-task-bar-background: #ECC4D7;
    --dg-gantt-task-bar-width: 300px;
    --dg-gantt-task-bar-height: 32px;    
    --dg-gantt-task-bar-border-radius: 6px;
    --dg-gantt-task-bar-padding: 5px;
    --dg-gantt-column-line-weekend-background: #f7f7f7;
    --dg-gantt-dependency-mark-stroke: #000;
    --dg-gantt-dependency-mark-fill: #000;
    --dg-gantt-milestone-border-color: #B05807;
    --dg-gantt-milestone-bg-color: #FFE8AB;
    --dg-gantt-milestone-width: 32px;
    --dg-gantt-milestone-height: 32px;
    --dg-gantt-column-line-today-color: #24A10A;
    --dg-gantt-column-line-today-position: 45%;
    --zt-gantt-task-bar-pointer-resize-color: #3D8AFF;
    --dg-gantt-false-line-color: #3D8AFF;

}

.dummy{
    width: 5px;
    height: 10px;
    background-color: #3D8AFF;
}
.dg-gantt-view-root{
    display: flex;
    height: 100%;
}
.dg-gantt-view-root .ZG-gridHeader{
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
    border-left: 0;
}
.dg-gantt-view-root .dg-gantt-view-right  .ZG-gridBody{
	border-left: 0;
}
.dg-gantt-view-root{
    --ZG-CellBorderColor: #e8e8e8;	
    position: relative;
}
.dg-gantt-view-root .dg-gantt-view-left .ZG-headerCell {
    border-inline-end: 0;
}
.dg-gantt-view-root .dg-gantt-view-left{
    border-inline-end: 1px solid var(--ZG-CellBorderColor);
}
.dg-gantt-view-root .ZG-row.dg-hide-row-border{
    --ZG-CellBorderColor: transparent;
}
.dg-gantt-view-root .ZG-row.ZG-rowHover{
    background-color: rgba(126, 140, 162, 0.1);
}
.dg-gantt-view-root .dg-datepicker__icon,
.zt-gantt-recordview-dialog .dg-datepicker__icon{
    display: block;
    padding-right: var(--date-picker-icon-padding);
    padding-top: var(--date-picker-icon-padding);
    padding-bottom: var(--date-picker-icon-padding);
}

.dg-gantt__column-header-label-container {
    flex: 1;
    text-align: center;
}

.dg-gantt-scroll{
    display : flex;
    width   : 100%;
}
.dg-gantt-view-left{
    width: 360px;
}
.dg-gantt-view-right{
    width: calc(100% - 360px);
}
.dg-gantt-view-left .ZG-verticalScroll {
    display: none;
}
.ZG-row.dg-hide-row-border{
    --ZG-CellBorderColor: transparent;
}
.dg-gantt-view-root .ZG-headerCell{
    padding: 0px;
}
.dg-gantt__column-header-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.dg-gantt-view-root .ZG-headerViewport{
    overflow: visible;    
}

.dg-gantt__column-header-top-text{
    position: sticky;
    left: 0;    
    z-index: 100;
    width: fit-content;   
}
.dg-gantt__column-header-bottom-panel .dg-gantt__column-header-top-text{
    text-align: center;
}
.dg-gantt__column-header-top-panel{
    display: block;
    flex: auto;    
}

.dg-gantt__column-header-top-panel,
.dg-gantt__column-header-bottom-panel{
    display: flex;
    align-items: center;
    flex: 1;
}
.dg-gantt__column-header-label-container{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dg-gantt__column-header-top-panel {
    border-bottom: 1px solid var(--ZG-CellBorderColor);
    padding: 0 10px;
}
.dg-gantt__column-header-top-text,
.dg-gantt__column-header-bottom-text{
    flex: 1;
}
.dg-gantt__column-header-bottom-text { 
    height: 100%;
    line-height: 20px;
    text-align: center;
}
.dg-gantt__column-header-bottom-text:not(:last-child) {
    border-right: 1px solid var(--ZG-CellBorderColor);
}
.dg-gantt__task-bar {
    background: var(--dg-gantt-task-bar-background);
    width:100%; 
    height: inherit;
    border-radius: var(--dg-gantt-task-bar-border-radius);
    padding: 6px 0;
    position: absolute;    
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    border: 1px solid #ccc;
    box-sizing: border-box;
    cursor: grab;
}
.dg-gantt__task-bar:before, .dg-gantt__task-bar:after {
    content: "";
    flex-shrink: 0;
    width: 12px;
}
.dg-gantt__task-bar-grab--active .dg-gantt__task-bar:hover, .dg-gantt__task-bar-grab--active .dg-gantt__milestone{
    cursor: grabbing;
}
.dg-gantt__task-bar-resize--active .dg-gantt__task-bar:hover, .dg-gantt__task-bar-resize--active .dg-gantt__milestone{
    cursor: col-resize;
}
.dg-gantt__task-bar-grab--active .dg-gantt__task-bar:hover .dg-gantt__bar-pt-rs-holder,
.dg-gantt__task-bar-grab--active .dg-gantt__shedule-task-bar-holder,
.dg-gantt__task-bar-resize--active .dg-gantt__task-bar:hover .dg-gantt__bar-pt-rs-holder{
    opacity: 0;
    visibility: hidden;
}
.dg-gantt__task-title{
    line-height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.dg-gantt-column-line-wrapper {
    position: absolute;
    height: inherit;
    top: 0px;
    display: flex;
    justify-content: space-evenly;
}

.dg-gantt-column-line {
    border-right: 1px solid var(--ZG-CellBorderColor);
    height: inherit;
    width:  100%;
    position: relative;
}
.dg-gantt-column-line--weekend {
    background-color: var(--dg-gantt-column-line-weekend-background);
}
.dg-gantt-column-line--marker:before{
    position: absolute;
    content: '';
    left: var(--dg-gantt-column-line-today-position);
    height: 100%;
    width: 2px;
    background: var(--dg-gantt-column-line-today-color);
    transform: translateX(-50%);
}
.dg-gantt-column-line--marker:after{
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    top: -2px;
    right: -8.5px;
    background: var(--dg-gantt-column-line-today-color);
    transform: rotate(45deg) translateX(-50%);
    
}
.dg-gantt__column-header-label-container--active .dg-gantt__column-header-label{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--dg-gantt-column-line-today-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dg-gantt-column-line--marker-holder{
    position: absolute;
    height: 100%;
    z-index: 1;
    display: none
}
.dg-gantt-timeline-scroll-holder {
    width    : 100%;
    height   : 100%;
    position : absolute;
    overflow : hidden;
}

.dg-gantt-timeline-wrapper{
    height: 100%;
}

.dg-gantt-dependancy-wrapper{
    position: absolute;
    width: inherit;
    height: inherit;
}
.dg-gantt-dependancy-wrapper .dg-gantt-dependency-mark-container{
    position: absolute;
    width: inherit;
    height: inherit;
    z-index: 1;
    pointer-events: none;
}

.dg-gantt-dependency-mark-container svg{
    position: absolute;
    display: inline-block;
    width: inherit;
    height: inherit;    
    stroke: var(--dg-gantt-dependency-mark-stroke);
    fill: var(--dg-gantt-dependency-mark-fill);
}

.dg-gantt-dependency-mark-container svg {
    --dg-gantt-dependency-mark-stroke: #6EB1E4;
    --dg-gantt-dependency-mark-fill: #6EB1E4;
    stroke-width: 1.5px;
}
.dg-gantt-dependency-mark-container svg g{
    position: absolute;;
    z-index: 5;
    pointer-events: stroke;
}
.dg-gantt-dependency-mark-container g.dg-gantt-dependency-mark-invalid{
    --dg-gantt-dependency-mark-stroke: #DC043B;
    --dg-gantt-dependency-mark-fill: #DC043B;
    stroke: var(--dg-gantt-dependency-mark-stroke);
    fill: var(--dg-gantt-dependency-mark-fill);   
}
.dg-gantt-dependency-mark-container g.dg-gantt-dependency-mark-critical{
    --dg-gantt-dependency-mark-stroke: #E67C09;
    --dg-gantt-dependency-mark-fill: #E67C09;
    stroke: var(--dg-gantt-dependency-mark-stroke);
    fill: var(--dg-gantt-dependency-mark-fill);
}

.dg-gantt-view-root .dg-gantt-view-right .ZG-centerColContainer .dg-gantt__task-bar{
    z-index: 3;    
}

.dg-gantt__record-title{
    font-size: 14px;
}
.dg-gantt__record-count{
    font-size: 14px;
    margin-inline-start:6px;
    color: #757575;
}
.dg-gantt-record-list__holder {
    margin: 10px;
    border: 1px solid #ddd;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 16px;
    width: 100%;
    display: flex;
    border-radius: 8px;
    justify-content: space-between;
  }
.dg-gantt-record-list__title,
.dg-gantt-record-list__date{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;          
}
.dg-gantt-record-list__date {
    color: #858585;
    margin-inline-start: 6px;
}
/* resizer */
.dg-gantt__bar-pt-rs-holder{
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;
    top: 0;
    display: none;
}
.dg-gantt__task-bar:hover .dg-gantt__bar-pt-rs-holder,
.dg-gantt-milestone-holder:hover .dg-gantt__bar-pt-rs-holder {
    display: flex;
}
.dg-gantt__bar-pt-rs-holder-first{
    left: -30px;
}
.dg-gantt__bar-pt-rs-holder-last{
    right: -30px;
}

.dg-gantt__bar-pt {
    width: 10px;
    height: 10px;
    border: 2px solid var(--zt-gantt-task-bar-pointer-resize-color);
    background-color: #fff;
    border-radius: 50%;
    margin-inline: 8px;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.dg-gantt__bar-pt-plus {
    opacity: 0;
    display: flex;
    align-items: center;
    position: absolute;
    top: 44%;
    font-size: 7px;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--zt-gantt-task-bar-pointer-resize-color);
}
.dg-gantt__bar-pt:hover {
    transform: scale(2);
    border: 1.5px solid var(--zt-gantt-task-bar-pointer-resize-color);
    z-index: 10;
}
.dg-gantt__bar-pt:hover .dg-gantt__bar-pt-plus {
    opacity: 1;   
}

.dg-gantt__bar-rs {
    width: 8px;
    height: calc(100% - 12px);    
    cursor: col-resize;
    border: 2px solid var(--zt-gantt-task-bar-pointer-resize-color);
    background-color: #fff;
    border-radius: 6px;
    transition: transform 0.2s ease;
}
.dg-gantt__bar-rs:hover {
    transform: scale(1.2);
}
.dg-gantt-view-left  .dg-gantt__column-header-bottom-panel{
    padding: 10px;
}

.dg-gantt__task-bar-holder {    
    position: absolute;    
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    height: var(--dg-gantt-task-bar-height);
    display: flex;
    align-items: center;
    pointer-events: stroke;
    min-width: 0;
    z-index: 3;

}
.dg-dnd-ghost .dg-gantt__task-bar-holder{
    opacity: 0.7;
}
.dg-dnd-ghost .dg-gantt__task-bar:hover .dg-gantt__bar-pt-rs-holder{
    display: none;
}
.dg-gantt__bar-rs-ghost {
    z-index: 3;
}
.dg-gantt__bar-rs-ghost .dg-gantt__bar-pt-rs-holder{
    display: flex;
}
.dg-gantt__bar-rs-ghost .dg-gantt__task-bar,.dg-gantt__shedule-task-bar {
    --dg-gantt-task-bar-background: rgba(61, 138, 255, 0.1);
    border: 0;
    outline: 1px dashed #3D8AFF;
    outline-offset: 1px;
}
.dg-gantt__bar-rs-ghost .dg-gantt__bar-pt,.dg-gantt__bar-rs-ghost .dg-gantt__task-title {
    opacity: 0;
}
/** milestone style start ***/
.dg-gantt-milestone-holder{
    position: absolute;    
    pointer-events: stroke;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}
.dg-gantt-milestone {
    --dg-gantt-task-bar-border-radius: 4px;
    width: var(--dg-gantt-milestone-width);
    height: var(--dg-gantt-milestone-height);
    border: 1.5px solid var(--dg-gantt-milestone-border-color);
    background-color: var(--dg-gantt-milestone-bg-color);
    transform: rotate(45deg);
    border-radius: var(--dg-gantt-task-bar-border-radius);
    margin: 4px;
    cursor: grab;
    box-shadow: 0px 4px 8px 0px #00000030;
}
.dg-gantt__false-line{
    border: 1px dashed var(--dg-gantt-false-line-color);
    pointer-events: none;    
    position: absolute;
    z-index: 5;    
    transform-origin: 0% 100%;
    top: 50%;
}
.dg-gantt-milestone-holder .dg-gantt__bar-pt-rs-holder-first{
    left: -20px;
}
.dg-gantt-milestone-holder .dg-gantt__bar-pt-rs-holder-last{
    right: -20px;
}
/*** schedule task bar style start ***/
/*** dependancy point dragging style start ***/
.dg-gantt__bar-pt--dragging-right .dg-gantt__bar-pt-rs-holder-last,
.dg-gantt__bar-pt--dragging-left .dg-gantt__bar-pt-rs-holder-first{
    display: flex;
}
.dg-gantt__bar-pt--dragging-right .dg-gantt__bar-pt-rs-holder-last .dg-gantt__bar-rs,
.dg-gantt__bar-pt--dragging-left .dg-gantt__bar-pt-rs-holder-first .dg-gantt__bar-rs{
    opacity: 0;
}
.dg-gantt__bar-pt--dragging-active .dg-gantt__task-bar:hover .dg-gantt__bar-pt-rs-holder .dg-gantt__bar-rs {
    opacity: 0;
    visibility: hidden;
}
.dg-gantt__bar-pt--dragging-active .dg-gantt__task-bar:hover{
    outline: 1.5px solid #3D8AFF;
    outline-offset: 1px;
}
/*** dependancy point dragging style end ***/
.dg-gantt__shedule-task-bar-holder{
    width: 100%;
    height: 100%;   
    cursor:crosshair;
}
.dg-gantt__shedule-task-bar-holder.dg-gantt__shedule-task-bar-holder-readonly{
    cursor: default;
}
.dg-gantt__shedule-task-bar{
    border-radius: var(--dg-gantt-task-bar-border-radius);
    height: var(--dg-gantt-task-bar-height);
    background-color: var(--dg-gantt-task-bar-background);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    cursor: grab;
    pointer-events: none;
}
.dg-gantt__task-bar-schedule--active .dg-gantt__task-bar:hover .dg-gantt__bar-pt-rs-holder{
    opacity: 0;
    visibility: hidden;
}
/*** schedule task bar style end ***/

.dg-gantt-view-right .ZG-no-record-container{
    pointer-events: none;
    --ZG-noRecordBackgroundColor: #ffffff00;
}
.dg-gantt-view-root .dg-gantt-view-right .ZG-gridBodyWrapper .ZG-centerCol {
    min-height: 100%;
}

.dg-gantt-view-root .dg-gantt-view-righ .ZG-no-record .ZG-gridBodyWrapper .ZG-centerCol{
    height: 100%;
}
.dg-gantt-view-root .dg-gantt-view-right .ZG-no-record  .ZG-gridBodyWrapper .ZG-centerColViewport , .dg-gantt-view-root .dg-gantt-view-right .ZG-no-record  .ZG-gridBodyWrapper .ZG-centerColContainer {
    min-height: 100%;
}

.dg-gantt__task-drag-and-drop-tooltip.ZCC-tooltip:after{
    top: -5px;
    left: 50%;
}

.ZCC-tooltip{
    word-break: keep-all !important;
    width: max-content !important;
}

/* temp*/

.dg-gantt__shedule-task-bar-resizer {
    position: absolute;
    background: transparent;
    width: 1px;
    /* display: none; */
    height: 100%;
    right: 0px;
}

.dg-gantt__bar-pt--dragging-active .ZCC-tooltip, .dg-gantt__task-bar-resize--active .dg-gantt__tooltip-drag-to-schedule, .dg-gantt__task-bar-schedule--active .dg-gantt__tooltip-drag-to-schedule{
    display: none;
}

.dg-gantt__task-bar-grab--active .dg-gantt__task-bar-ghost,
.dg-gantt__task-bar-grab--active .ZG-row, .dg-gantt__task-bar-grab--active .ZG-rowHover,
.dg-gantt__task-bar-grab--active .dg-selectbox__input-wrapper,
.dg-gantt__task-bar-grab--active .dg-gantt__shedule-task-bar-holder,
.dg-gantt__task-bar-grab--active .dg-gantt-view-right{
    cursor: grabbing;
}
.dg-gantt__task-bar-resize--active .dg-gantt__task-bar-ghost,
.dg-gantt__task-bar-resize--active .ZG-row, .dg-gantt__task-bar-resize--active .ZG-rowHover,
.dg-gantt__task-bar-resize--active .dg-selectbox__input-wrapper,
.dg-gantt__task-bar-resize--active .dg-gantt__shedule-task-bar-holder,
.dg-gantt__task-bar-resize--active .dg-gantt-view-right{
    cursor: col-resize;
}
.dg-gantt__task-bar-schedule--active .dg-gantt__task-bar-ghost,
.dg-gantt__task-bar-schedule--active .dg-gantt__shedule-task-bar-holder,
.dg-gantt__task-bar-schedule--active .ZG-row, .dg-gantt__task-bar-schedule--active .ZG-rowHover,
.dg-gantt__task-bar-schedule--active .dg-selectbox__input-wrapper,
.dg-gantt__task-bar-schedule--active .dg-gantt-view-right,
.dg-gantt__task-bar-schedule--active .dg-gantt__task-bar{
    cursor: crosshair;
}

.dg-gantt__tooltip-drag-to-schedule.ZG-popup {
    position: absolute;
}
/*!****************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/css/groupingGrid.css ***!
  \****************************************************************************/

:root {
	
	--ZG-firstLevelGroupingHeaderBGColor: #ede9fa;
	--ZG-secondLevelGroupingHeaderBGColor: #fafafa;
	--ZG-groupingCategoryName: #535353;
	--ZG-groupingCategoryValue: #101010;
	--ZG-groupingCategoryMoreIcon: #a9a9a9;
	--ZG-firstLevelGroupSidebarColor: #7a62c4;
	--ZG-secondLevelGroupSidebarColor: #d1c9f2;	
	--ZG-thirdLevelGroupSidebarColor: #ebe7f8;	
	--ZG-depthGroupingSidebarColor: #7a62c4;
	--ZG-firstLevelGroupHeaderCellBGColor: #F6F6F6;
	--ZG-secondLevelGroupHeaderCellBGColor: #F6F6F6;
	--ZG-thirdLevelGroupHeaderCellBGColor: #EBE7F8;
	--ZG-depthGroupingHeaderCellBGColor: #EBE7F8;
	--ZG-depthgroupingHeaderCellBorderColor: #d1c7ef;
	--ZG-groupingRecordCountBorderColor: #7a62c4;
	--ZG-groupingRecordCountBGColor: #fff;
}
/*** Grouping style start ***/

.ZG-groupingHeader .ZG-headerCellLabel {
	width: auto;
	display: flex;
	align-items: center;
}

.ZG-groupingHeader .ZG-cellLabelContainer {
	justify-content: flex-end;
}

.ZG-groupingGrid>.ZG-gridHeader {
	border-bottom: 1px solid var(--ZG-CellBorderColor);
	border-radius: 10px;
}

.ZG-groupingGrid>.ZG-gridHeader .ZG-centerColViewport .ZG-headerCell:last-child {
	border-right: 0;
}

.ZG-groupingHeader {
	/* border-radius: 10px 10px 0 0; */
	position: absolute;
	border: 1px solid var(--ZG-CellBorderColor);	
    overflow: hidden;	
	/* border-width: 1px 0 1px 0; */	
	/* background-color: var(--ZG-gridHeaderBGColor); */	
}

.ZG-pinnedLeftCol .ZG-groupingHeader{
	border-left: 0;
	border-right: 0;
}

.ZG-centerCol .ZG-groupingHeader{
	border-left: 0;
	border-radius: 0 10px 10px 0; 
	
}

.ZG-gridHeader.ZG-groupingHeader .ZG-rowSelectionHeader .ZG-headerRow .ZG-headerCell {
	border-right: 0;
	width: 30px;
	padding: 0;
}

.ZG-groupingHeaderAccordian {
	width: 31px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ZG-groupingHeaderAccordian svg {
	cursor: pointer;
}

.ZG-groupingHeader .ZG-rowCheckboxPanel {
	display: flex;
}

.ZG-groupingHeader .ZG-headerCell {
	padding-inline-start: 0;
}

.ZG-groupingCategoryName {
	font-size: 12px;
	color: var(--ZG-groupingCategoryName);
}

.ZG-groupingCategoryValue {
	font-weight: 500;
	color: var(--ZG-groupingCategoryValue);
	max-width: 100px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.ZG-groupingCategoryMoreIcon {
	fill: var(--ZG-groupingCategoryMoreIcon);
	margin-left: 8px;
	cursor: pointer;
}

.ZG-pinnedLeftCol .ZG-groupingHeader .ZG-headerCell {
	/* border-left: 1px solid var(--ZG-CellBorderColor); */
	border-radius: 10px 0 0;
}

.ZG-centerColViewport .ZG-groupingHeader .ZG-headerCell {
	justify-content: flex-end;
	padding-inline-end: 8px;
}

.ZG-centerColViewport .ZG-groupingHeader .ZG-headerCell:last-child {
	border-radius: 0 10px 0 0;
	border-right: 0;
}

.ZG-groupingGrid .ZG-pinnedRowSelectionCol .ZG-cell {
	width: 90px;
}

.ZG-groupingHeader .ZG-pinnedLeftCol {
	position: relative;
}

.ZG-groupingHeader .ZG-headerCell {
	width: 226px;
	padding-inline-end: 5px;
	border-bottom: 1px solid var(--ZG-CellBorderColor);
	/* border-top: 1px solid var(--ZG-CellBorderColor); */
	background-color: var(--ZG-gridHeaderBGColor);
}

.ZG-groupingHeader .ZG-headerCell,
.ZG-headerCellLeft {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ZG-groupingHeader .ZG-rowselect {
	margin-inline-end: 8px;
}

/* .ZG-groupingGrid .ZG-gridBody .ZG-pinnedLeftCol, .ZG-groupingGrid .ZG-gridBody .ZG-pinnedLeftCol .ZG-cell{
    width: 276px;
} */

.ZG-firstLevelGrouping,
.ZG-secondLevelGrouping {
	border: 1px solid var(--ZG-CellBorderColor);
	margin: 30px 0 30px 0;
	position: relative;
	border-radius: 10px;
	border-top: 0;
}

.ZG-firstLevelGrouping .ZG-row:last-child {
	border-bottom: 0;
}

.ZG-firstLevelGrouping .ZG-centerColViewport .ZG-row .ZG-cell:last-child {
	border-right: 0;
}

.ZG-firstLevelGrouping .ZG-gridBody {
	border-radius: 0 0 10px 10px;
	border-width: 1px 0 0 0px;
}



.ZG-secondLevelGrouping>.ZG-groupingHeader {
	background-color: var(--ZG-secondLevelGroupingHeaderBGColor);
	border-bottom: 1px solid var(--ZG-CellBorderColor);
}

.ZG-GroupCollapse>.ZG-gridBodyWrapper .ZG-gridBody {
	height: 0;
	border: 0;
	transition: all 0.5s ease;
}

.ZG-GroupCollapse .ZG-groupingHeaderAccordian svg {
	transform: rotate(-90deg);
}

.ZG-secondLevelGrouping .ZG-firstLevelGrouping {
	margin: 16px 10px;
}

/**** Table grid style start ***/
.ZG-pinnedRowSelectionCol .ZG-groupingHeader{
    border-radius: 2px 0 0 2px;
    border-right: 0;
	overflow: visible;
}
.ZG-pinnedRowSelectionCol .ZG-groupingHeaderCell{
    border-inline-end: 1px solid var(--ZG-CellBorderColor);    
}
.ZG-groupingHeaderCell {
    height: calc(var(--ZG-groupingheader-cell-height) - 1px);
}
.ZG-pinnedRowSelectionCol .ZG-groupLevel-1:before,
.ZG-pinnedRowSelectionCol .ZG-groupLevel-2:before,
.ZG-pinnedRowSelectionCol .ZG-groupLevel-3:before,
.ZG-groupLevel-3:before {
	position: absolute;
	content: '';
	width: 6px;
	height: 100%;
	background: var(--ZG-firstLevelGroupSidebarColor);
	left: -6px;
	border-radius: 30px 0 0 30px;
	/* display: none; */
}
.ZG-groupDepth-1 .ZG-pinnedRowSelectionCol .ZG-groupLevel-1:before,
.ZG-groupDepth-2 .ZG-pinnedRowSelectionCol .ZG-groupLevel-2:before,
.ZG-groupDepth-3 .ZG-pinnedRowSelectionCol .ZG-groupLevel-3:before{	
	background: var(--ZG-depthGroupingSidebarColor);
}
.ZG-groupDepth-2 .ZG-pinnedRowSelectionCol .ZG-groupLevel-1:before{
	--ZG-firstLevelGroupSidebarColor: #d1c9f2;
	background: var(--ZG-firstLevelGroupSidebarColor);
}

.ZG-groupDepth-3 .ZG-pinnedRowSelectionCol .ZG-groupLevel-1:before{
	--ZG-firstLevelGroupSidebarColor: #ebe7f8;
	background: var(--ZG-firstLevelGroupSidebarColor);
}
.ZG-groupDepth-3 .ZG-pinnedRowSelectionCol .ZG-groupLevel-2:before{
	--ZG-secondLevelGroupSidebarColor: #d1c9f2;
	background: var(--ZG-secondLevelGroupSidebarColor);
}

.ZG-groupDepth-1 .ZG-row.ZG-groupLevel-1 .ZG-cell,
.ZG-groupDepth-2 .ZG-row.ZG-groupLevel-2 .ZG-cell,
.ZG-groupDepth-3 .ZG-row.ZG-groupLevel-3 .ZG-cell {
    background-color: var(--ZG-depthGroupingHeaderCellBGColor);
	border-inline-end: 1px solid var(--ZG-depthgroupingHeaderCellBorderColor);
}
.ZG-groupDepth-2 .ZG-row.ZG-groupLevel-1 .ZG-cell {
	--ZG-firstLevelGroupHeaderCellBGColor: #f6f6f6;
    background-color: var(--ZG-firstLevelGroupHeaderCellBGColor);
}
.ZG-groupDepth-3 .ZG-row.ZG-groupLevel-1 .ZG-cell {
	--ZG-firstLevelGroupHeaderCellBGColor: #F6F6F6;
    background-color: var(--ZG-firstLevelGroupHeaderCellBGColor);
}
.ZG-groupDepth-3 .ZG-row.ZG-groupLevel-2 .ZG-cell {
	--ZG-secondLevelGroupHeaderCellBGColor: #F6F6F6;
    background-color: var(--ZG-secondLevelGroupHeaderCellBGColor);
}
.ZG-groupDepth-1 .ZG-row.ZG-groupLevel-1.ZG-group-empty .ZG-cell,
.ZG-groupDepth-2 .ZG-row.ZG-groupLevel-2.ZG-group-empty .ZG-cell,
.ZG-groupDepth-3 .ZG-row.ZG-groupLevel-3.ZG-group-empty .ZG-cell{
	--ZG-depthGroupingHeaderCellBGColor: #f6f6f6;
	--ZG-depthgroupingHeaderCellBorderColor: #e8e8e8;	
}
.ZG-groupingHeaderCell .ZG-cellValue {
	display: flex;
	align-items: center;	
}
.ZG-groupingHeaderCell .zt-grouping__header-cell{
	width: 100%;
	height: 100%;
}
.ZG-groupingRecordCount {
	border: 1px solid var(--ZG-groupingRecordCountBorderColor);
	margin: 0 8px;
	display: block;	
	padding: 3px 5px;
	background: var(--ZG-groupingRecordCountBGColor);	
	border-radius: 3px;
	font-size: 11px;
	height: 20px;
}
.ZG-groupingExpandCollapseMoreIcon {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	cursor: pointer;
}
.ZG-groupingNameEditSecInput {
	font-size: 13px;
	color: #000;
	height: 28px;
	border-radius: 5px;
	border: solid 1px var(--ZG-CellBorderColor);
	padding-inline-start: 10px;
	width: 100%;
	z-index: 2;
	position: absolute;
	left: -30px;
	top: 7px;
	display: none;
}
.ZG-groupingHeader~.zg-row-leaf-end .ZG-column--pinned-center-last.ZG-cell{
	border-radius: 0 0 10px 0;
}
.ZG-groupingHeader~.zg-row-leaf-end .ZG-column--pinned-center-last.ZG-cell.ZG-cellSelection{
	border-radius: 0 0 2px 0;
}
.ZG-pinnedRowSelectionCol .ZG-groupingHeader-collapsed .ZG-groupingHeaderCell, .ZG-pinnedRowSelectionCol .zg-row-leaf-end .ZG-cell{
	border-radius: 0 0 0 2px;
}
/**** Table grid style end ***/

/** Group level 1 style start ***/
.ZG-rootWrapper .ZG-groupingHeader.ZG-row{
	border-bottom: 1px solid var(--ZG-CellBorderColor);
	border-left: 0;
}
/** Group level 1 style end ***/

/** Group level 2 style start ***/
.ZG-groupLevel_2{
	display: flex;	
	border-top: 0;
	border-radius: 10px;
}
.ZG-pinnedLeftCol .ZG-groupingHeader~.ZG-row .ZG-cell:first-child{
	border-left: 0;
}
.ZG-groupingHeader~.ZG-addRecordRow{
	border-bottom: 1px solid transparent;
}

.ZG-pinnedLeftCol .ZG-groupingHeader~.ZG-row.ZG-addRecordRow  .ZG-cell:first-child{
	border-radius: 0 0 0 10px;
}

.ZG-centerCol .ZG-groupingHeader~.ZG-row.ZG-addRecordRow  .ZG-cell:last-child{
	border-radius: 0 0 10px 0;
}
.ZG-pinnedLeftCol .ZG-groupingHeader.ZG-groupLevel2{
	border-radius: 10px 0 0 15px;
}
.ZG-centerCol .ZG-groupingHeader.ZG-groupLevel2{
	border-radius: 0 10px 15px 0;
}
/** Group level 2 style end ***/

.ZG-pinnedLeftCol.ZG-pinnedLeftStickyTop .ZG-groupingHeader.ZG-groupLevel2, .ZG-pinnedLeftCol.ZG-pinnedLeftStickyTop .ZG-groupingHeader.ZG-groupLevel1 {
    border-radius: 10px 0 0 0;
    border-bottom: 0;
	overflow: visible;
}

.ZG-centerCol.ZG-stickyTopViewport .ZG-groupingHeader.ZG-groupLevel2, .ZG-centerCol.ZG-stickyTopViewport .ZG-groupingHeader.ZG-groupLevel1 {
    border-radius: 0 10px 0 0;
    border-bottom: 0;
	overflow: visible;
}

.ZG-centerCol.ZG-stickyTopViewport .ZG-groupingHeader.ZG-groupLevel1 .ZG-headerCell:last-child{
	border-right: 1px solid var(--ZG-CellBorderColor);
}

/*!**********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./Sub_Components/src/fieldcomponents/dg-base/demo/styles/tooltip.css ***!
  \**********************************************************************************************************************/

:root{
    --popover-pointer-border-color: #1a1a1a;
    --popover-pointer-bg-color: #1a1a1a;
}

.ZCC-tooltip {
    min-width: 0;
    width: auto;
    max-width: 300px;
    min-height: 0;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 6px 10px 6px 10px;
    border: 0;
    border-radius: 3px 3px 3px 3px;
    background: #1a1a1a;
    font-size: 13px;
    color: #fff;
    position: absolute;
    box-sizing: border-box;
    z-index: 999;
    font-weight: normal;
    box-shadow: 0 0 0 0 transparent;
    word-break: break-word;
    pointer-events: none;
    outline: 0;
}

.ZG-tooltipHiding {
    opacity: 0;
}
.dg-tooltip-text{
    display: grid;
    grid-template-columns: 70px 10px 1fr;
    align-items: center;
    white-space: nowrap;
}
/**popover pointer style start ***/

.dg-popover__pointer:after {
    height: 10px;
    width: 10px;
    position: absolute;
    content: '';
    background: var(--popover-pointer-bg-color);
    border: 1px solid var(--popover-pointer-border-color);   
    transform: rotate(315deg);
    border-radius: 0 0 2px 0;
    z-index: -1;
}
.dg-popover__pointer--right-top:after {

    border-top-width: 0;
    border-left-width: 0;
    top: var(--popover-pointer-top);
    right: var(--popover-pointer-right);
}

.dg-popover__pointer--right-middle:after {
    border-top-width: 0;
    border-left-width: 0;
    top: var(--popover-pointer-top);
    right: var(--popover-pointer-right);
}

.dg-popover__pointer--right-bottom:after {
    border-top-width: 0;
    border-left-width: 0;
    top: var(--popover-pointer-top);
    right: var(--popover-pointer-right);
}

.dg-popover__pointer--left-top:after {
    border-bottom-width: 0;
    border-right-width: 0;
    left: var(--popover-pointer-left);
    top: var(--popover-pointer-top);
}

.dg-popover__pointer--left-middle:after {
    border-bottom-width: 0;
    border-right-width: 0;
    left: var(--popover-pointer-left);
    top: var(--popover-pointer-top);
}

.dg-popover__pointer--left-bottom:after {
    border-bottom-width: 0;
    border-right-width: 0;
    left: var(--popover-pointer-left);
    top: var(--popover-pointer-top);
}

.dg-popover__pointer--top-left:after {
    border-left-width: 0;
    border-bottom-width: 0;
    left: var(--popover-pointer-left);
    top: var(--popover-pointer-top);
}

.dg-popover__pointer--top-center:after {
    border-left-width: 0;
    border-bottom-width: 0;
    left: var(--popover-pointer-left);
    top: var(--popover-pointer-top);
}

.dg-popover__pointer--top-right:after {
    border-right-width: 0;
    border-top-width: 0;
    left: var(--popover-pointer-left);
    top: var(--popover-pointer-top);
}

.dg-popover__pointer--bottom-left:after {
    border-right-width: 0;
    border-top-width: 0;
    left: var(--popover-pointer-left);
    bottom: var(--popover-pointer-bottom);
}

.dg-popover__pointer--bottom-center:after {
    border-right-width: 0;
    border-top-width: 0;
    left: var(--popover-pointer-left);
    bottom: var(--popover-pointer-bottom);
}

.dg-popover__pointer--bottom-right:after {
    border-left-width: 0;
    border-bottom-width: 0;
    left: var(--popover-pointer-left);
    bottom: var(--popover-pointer-bottom);
}


/**popover pointer style end ***/
/*!**********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./userpresence/core/src/css/userpresence.css ***!
  \**********************************************************************************************/
:root {
    --ZCC-userPresenceProfileBorderColor: #fff;
	--ZCC-userPresenceCountColor: #fff;
	--ZCC-userPresenceCountBGColor: #239320;
}

.ZG-userpresence-popup{
	z-index: 5;
}
.ZCC-userpresence:before {
    position: absolute;
    content: '';
    border: 1px solid var(--user-presence-selection-pseudo-borderColor);
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    left: -1px;
    top: -1px;
    border-radius: 2px;
}

.ZCC-userPresenceLayerInner {
	display: flex;
	align-items: center;	
}

.ZCC-userPresenceNameProfileSec {
	display: flex;
	align-items: center;
	position: relative;
	right: -4px;
}

.ZCC-userPresenceName {
	right: 0;
	background-color: var(--user-presence-selection-pseudo-bgcolor);
    color: #fff;
	font-size: 11px;
	padding: 1px 22px 1px 6px;
	/* opacity: 0; */
	border-radius: 0 0 3px 3px;
	z-index: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* max-width: calc(100% - 28px); */
	width: 66px;
	transition: all 0.1s ease;
	height: 16px;
	/* display: block; */
	line-height: 14px;
	border-radius: 20px;
	/* border: 1px solid #fff; */
}
.ZCC-userPresenceProfile,
.ZCC-userPresenceCount {
	content: '';	
	background-repeat: no-repeat;
	background-size: cover;
	right: 0;
	border-radius: 50%;
	/* opacity: 0; */
	/* background-image: var(--user-presence-selection-pseudo-user-image-url); */
	z-index: 2;
}

.ZCC-userPresenceProfile {
	position: absolute;
	right: 0;
	top: 0;
}

.ZCC-userPresenceProfile img {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid var(--ZCC-userPresenceProfileBorderColor);
}

.ZCC-userPresenceCount {
	position: relative;
	right: 3px;
	background: var(--ZCC-userPresenceCountBGColor);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	color: var(--ZCC-userPresenceCountColor);
	border: 1.5px solid var(--ZCC-userPresenceProfileBorderColor);
	min-width: 18px;
    height: 18px;
    width: auto;
    top: 0.5px;
}

.ZCC-userPersonList {
	display: flex;
	align-items: center;
	font-size: 13px;	
}

.ZCC-userPersonListName {
	max-width: 150px;
	line-height: 18px;
	width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.ZCC-userPersonList .ZCC-userPresenceProfile,
.ZCC-userPersonList .ZCC-userPresenceProfile img {
	position: relative;
	width: 18px;
	height: 18px;
	border: 0;
	margin-inline-end: 8px;
}

/*** cell userpresence layer custom style start ***/
.ZG-cell.ZCC-userpresence {
    flex-wrap: wrap;
}

.ZG-cell .ZCC-userPresenceLayer {
    position: absolute;
    top: -2px;
    right: -6px;
	display: none;
}

.ZG-cell.ZG-cellSelection .ZCC-userPresenceLayer{
	display: none;
}
.ZCC-userpresence:hover .ZCC-userPresenceLayer{
	display: block;
}
.ZG-context-menu-popup {
	position: absolute;
	min-width: 180px;
}
/*** cell userpresence layer custom style end ***/
/*!*****************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/@dg/contextmenu/dist/contextMenu.css ***!
  \*****************************************************************************************************/
:root{--ZG_contextMenu_BG_color:#fff;--ZG_contextMenu_border_color:#d7d7d7;--ZG_contextMenu_option_name_color:#101010;--ZG_contextMenu_option_hover_color:#f4f5f6}.ZG-contextMenu{display:block;width:100%}#parentDiv{border:none;height:100%;margin:0;outline:none;padding:0;position:relative;z-index:3}.ZG-popup,.ZG-popup-child{position:absolute}.ZG-popup{min-width:180px}.MenuItem{align-items:center;color:#000;cursor:pointer;display:flex;font-size:13px;justify-content:space-between;margin:0 5px;min-height:20px;min-width:50px;outline:none;padding:8px;position:relative}.ZG-subMenuArrow{color:#a2a8d3}.ZG-contextMenu{background:var(--ZG_contextMenu_BG_color);border:1px solid var(--ZG_contextMenu_border_color);border-radius:5px;box-shadow:0 0 30px 0 rgba(55,59,63,.12);list-style:none;margin:0;min-width:180px;outline:0;padding:8px 0;position:fixed;width:fit-content;z-index:3}li.ZG-contextMenuList.ZC-Group-Title{font-size:15px;font-weight:600;padding-bottom:0}.ZG-contextMenuList:not(.ZG-contextMenuListCustomElement){align-items:center;border-radius:3px;color:var(--ZG_contextMenu_option_name_color);cursor:pointer;display:flex;font-size:13px;justify-content:space-between;margin:0 5px;min-height:28px;min-width:50px;outline:none;padding:8px;position:relative;z-index:2}.ZG-contextMenuList.ZG-contextMenuListCustomElement{margin:0 5px}.ZG-contextMenuList.ZG-contextMenuListCustomElement.ZCC-focus{background:none}.ZG-contextMenuList.ZG-contextMenuListCustomElement .CG_dropFilter{margin:0}.ZG-listOption{width:100%}.ZG-listOptionPad{padding-inline-end:30px}.ZG-subMenuArrow{align-items:center;display:flex;height:20px;justify-content:center;position:absolute;right:8px;top:51%;transform:translateY(-50%);width:20px}.ZG-subMenuArrow:before{border:1.5px solid #858585;border-width:1.5px 1.5px 0 0;content:"";height:6px;position:absolute;transform:rotate(45deg);width:6px}.ZCC-rtl .ZG-subMenuArrow{left:0}.ZCC-hide{display:none!important}.ZCC-divider{border-bottom:1px solid #0000002e;min-height:2px!important;padding:0!important}.ZCC-disableState{color:rgba(89,88,88,.504)!important}.ZCC-rtl{direction:rtl}.ZCC-focus{background-color:var(--ZG_contextMenu_option_hover_color)}
/*!*****************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./Sub_Components/src/fieldcomponents/dg-base/demo/Checkbox_new/checkbox.css ***!
  \*****************************************************************************************************************************/

/**** Anandhan checkbox style start ****/


:root{

  --checkbox-width: 0.875rem; /* 14px*/
  --checkbox-height: 0.875rem; /* 14px*/ 
  --checkbox-margin: 0.5rem;
  --checkbox-label-font-size: 0.875rem;

  --focused-border-color: #007BFF;
  --checked-border-color: #007BFF;
  --checked-fill-color: #007BFF;
  --unchecked-border-color: #ccc;
  --checkbox-indeterminate-color: #ccc;
  --unchecked-fill-color: #fff;
  --checkbox-tick-color: #fff;
}

.dg-checkbox__label {  
  user-select: none;
}

.dg-checkbox__input{  
  position: absolute;
  opacity: 0;
  z-index: -1; 
  width: 0;
  height: 0;
  margin: 0;  
}

.dg-checkbox__input:focus-visible + .dg-checkbox__input--custom,.dg-checkbox__input:focus + .dg-checkbox__input--custom{
  border: 1px solid var(--focused-border-color);
}
.dg-checkbox__input--custom {  
  width: var(--checkbox-width);
  height: var(--checkbox-height);
  border-radius: 4px;
  position: relative;
  margin-inline-end: var(--checkbox-margin);
  cursor: pointer;
  border: 1px solid var(--unchecked-border-color);
  background-color: var(--unchecked-fill-color);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.dg-checkbox__input:checked + .dg-checkbox__input--custom {
  border-color: var(--checked-border-color);
  background-color: var(--checked-fill-color);

}

.dg-checkbox__input--custom svg{
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: inherit;
}

.dg-checkbox-default-style .dg-checkbox__input--custom svg{
  display: none;
  fill: var(--checkbox-tick-color);
}


.dg-checkbox-default-style .dg-checkbox__input:checked + .dg-checkbox__input--custom svg {
  display: block;
}



.dg-checkbox__input-wrapper{
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-inline-end: 16px;
  font-size: var(--checkbox-label-font-size);
  border: 0;
}

.dg-checkbox__input-label{
  user-select: none;
  word-break: break-word;
}

.dg-input__status--error .dg-checkbox__input-wrapper.dg-field__input-wrapper,.dg-input__status--focus .dg-checkbox__input-wrapper.dg-field__input-wrapper{
  box-shadow: none;
}
/*** checkbox indeterminate state style start ***/
.dg-checkbox--indeterminate .dg-checkbox__input--custom{
  background-color: transparent;
  border: 1px solid var(--unchecked-border-color);
}

.dg-checkbox--indeterminate .dg-checkbox__input--custom:before {  
    position: absolute;
    content: "";
    width: 6px;
    height: 2px;
    background: var(--checkbox-indeterminate-color);
    margin: auto;
    right: 0;
    left: 0;
    top: 50%;
    border-radius: 3px;
    transform: translateY(-50%);
}
/*** checkbox indeterminate state style end ***/
/*** vertical checkbox list group style start ***/
.dg-checkbox__list-vertical .dg-checkbox__container{
  display: inline-flex;
  flex-direction: column;
}

.dg-checkbox__list-vertical .dg-checkbox__input-wrapper{
  margin-bottom: 1rem;
}
/*** vertical checkbox list group style end ***/
/**** Anandhan checkbox style end ****/


/* .dg-checkbox__container--disabled{
    color             : var(--disabled-text-color);
    user-select         : none;
    cursor              : no-drop;
    pointer-events      : none;
    background-color:  #f0f0f0;
}
.dg-checkbox__input-wrapper--disabled{
    color             : var(--disabled-text-color);
    user-select         : none;
    cursor              : no-drop;
    pointer-events      : none;
    background-color:  #f0f0f0;
} */

/*!*********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./Sub_Components/src/fieldcomponents/dg-base/demo/number/number.css ***!
  \*********************************************************************************************************************/
:root {  
  --number-input-border-color: #ced4da;
  --number-input-spin-btn-bg: #f8f9fa;
  --number-input-spin-btn-icon-color: #495057;
  --number-input-bg-color: #ffffff;
  --number-input-disabled-bg-color: #efefef4d;
  --number-input-text-color: #495057;
  --number-input-disabled-text-color:#d9d9d9;  
  --number-input-text-size: 0.813rem;
  --number-input-padding: 0.5rem;
  --number-input-margin: 0;
  --number-input-height: 2.5rem;
  --number-input-border-radius: 4px;
  --number-input-button-size: 2.5rem;
  --number-input-button-hover-bg: #e9ecef;
  --number-input-button-active-bg: #dee2e6;
  --number-input-helper-text-color: #6c757d;
  --number-input-spin-btn-border: 1px solid var(--number-input-border-color);
  --number-input-spin-btn-width: 2rem;
  --number-input-spin-btn-height: 100%;
  --btn-icon-size: 1rem;
  --number-input-placeholder-color: #999;
  --number-input-presuffix-border-color: #ccc;
  --number-input-presuffix-padding: 0 0.625rem; /*10/16*/
  --number-input-presuffix-bg-color: rgba(0, 0, 0, .02);  

  
  --number-input-error-border-color: #dc3545;
  --number-input-error-text-color: #dc3545;
  --number-input-error-bg-color: #f8d7da;
  --field-description-error-color: #dc3545;
  --number-input-error-boxshadow-color: 0 0 3px rgba(218, 107, 110, 0.5);
  --number-input-focus-boxshadow-color: 0 0 3px rgba(43, 138, 238, 0.5);
  --number-input-focus-border-color: #2b8aee;
  
  --field-label-color: #495057;
  --field-label-required-state-color: #dc3545;
  --field-label-text-size: 0.875rem;
  --field-label-margin: 0.5rem 0;
  --field-label-padding: 0;
  --field-description-color: #495057;
  --field-description-font-size: 0.813rem;
  --field-description-margin: 0.25rem 0; /*4/16*/
  --field-description-padding: 0;  
}

.dg-number__input {
  flex: 1;     
}
  
.dg-number__input-wrapper>.dg-number__spinbutton:first-child{
    border-left-width: 0;
    border-right-width: 1px;
}

.dg-number__spinbutton .dg-number__spinbutton-svg {
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  fill: currentColor;
}

.dg-number__spinbutton:hover {
  background-color: var(--number-input-button-hover-bg);  
}

/*** spin button style start ***/
input[type=number].dg-number__input::-webkit-inner-spin-button, 
input[type=number].dg-number__input::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
.dg-number__spinbutton {
  background-color: var(--number-input-spin-btn-bg);
  border: var(--number-input-spin-btn-border);
  border-top-width: 0;
  border-bottom-width: 0;
  border-right-width: 0;
  border-inline-end-width: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: var(--number-input-spin-btn-width);
  height: var(--number-input-spin-btn-height);
  transition: background-color 0.3s ease, border-color 0.3s ease;
  color: var(--number-input-spin-btn-icon-color);  
}
.dg-number__spin-downbtn{
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.dg-number__spin-upbtn{
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.dg-number__spin-upbtn:has(+ .dg-number__spin-downbtn){
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.dg-number__spinbutton-panel {
  display: flex;
  flex-flow: column;
  height: 100%;
}

/*** spin button style end ***/

/*** number input prefix suffix style start **/
.dg-number__input-prefix,.dg-number__input-suffix{
  display: flex;
  align-items: center;
  padding: var(--field-input-padding);
  padding-inline-end: 0;
  margin-right: -7px;
  line-height: 1.4rem;
}

.dg-number__input-suffix{
  margin-right: 0;
  padding-inline-end: var(--field-input-padding);
  padding-inline-start: 0;
  margin-left: -7px;  
}
/*** number input prefix suffix style end **/

/*** field prefix and suffix style start ***/
.dg-number__prefix-elem,.dg-number__suffix-elem{
    padding: var(--number-input-presuffix-padding);
    height: auto;
    display: flex;
    align-items: center;
    border: 1px solid var(--number-input-presuffix-border-color);
    border-inline-end-width: 0;
    background-color: var(--number-input-presuffix-bg-color);
    /* added temp */
    max-width: 30%;
    overflow: hidden;
}

.dg-number__suffix-elem{
  border-inline-end-width: 1px;
  border-inline-start-width: 0px;
}
/*** field prefix and suffix style end ***/

/** currency field customization style start **/

 .dg-currency__root .dg-number__input-wrapper{
  justify-content: space-between;
  width: 100%;
}

/** currency field customization style end **/

/*** common input style start ***/
.dg-number__label {
    display: block;
    font-size: var(--field-label-text-size);
    font-weight: 400;
    color: var(--field-label-color);
    margin: var(--field-label-margin);
    padding: var(--field-label-padding);
  }
  
  .dg-number__label--required{
    color: var(--field-label-required-state-color);
  }

  .dg-number__description {
    color: var(--field-description-color);
    font-size: var(--field-description-font-size);
    margin: var(--field-description-margin);
    padding: var(--field-description-padding);
  }
  
  .dg-input__status--error .dg-field__validation-message{
    color: var(--field-description-error-color);
  }
  .dg-field__validation-message {
    font-size: 13px;
}
  
/*** common input style end ***/
/*!*************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./Sub_Components/src/fieldcomponents/dg-base/demo/styles/base-style.css ***!
  \*************************************************************************************************************************/
:root{
  --field-component-font: 'Roboto', sans-serif;

  --disabled-text-color: #d9d9d9;
  --disabled-bg-color: #efefef4d;

  --field-presuffix-border-color: #ccc;
  --field-presuffix-padding: 0 0.625rem; /*10/16*/
  --field-presuffix-bg-color: rgba(0, 0, 0, .02);  
  --field-input-border-color: #ced4da;
  --field-input-spin-btn-bg: #f8f9fa;
  --field-input-spin-btn-icon-color: #495057;
  --field-input-bg-color: #ffffff;
  --field-input-disabled-bg-color: #efefef4d;
  --field-input-text-color: #495057;
  --field-input-disabled-text-color:#777;  
  --field-input-height-size: 2.5rem;/* 40/16*/
  --field-input-text-size: 0.813rem; /*13/16*/
  --field-input-padding: 0.5rem; /* 8/16*/
  --field-input-margin: 0;
  --field-input-border-radius: 4px;    
  --field-input-helper-text-color: #6c757d;
  --field-input-placeholder-color: #999;
  --field-input-presuffix-border-color: #ccc;
  --field-input-presuffix-bg-color: rgba(0, 0, 0, .02); 

  --field-input-error-border-color: #dc3545;
  --field-input-error-text-color: #dc3545;
  --field-input-error-bg-color: #f8d7da;
  --field-description-error-color: #dc3545;
  --field-input-error-boxshadow-color: 0 0 3px rgba(218, 107, 110, 0.5);
  --field-input-focus-boxshadow-color: 0 0 3px rgba(43, 138, 238, 0.5);
  --field-input-focus-border-color: #2b8aee;

  --field-label-color: #495057;
  --field-label-required-state-color: #dc3545;
  --field-label-text-size: 0.875rem;
  --field-label-margin: 0.5rem 0;
  --field-label-padding: 0;
  --field-description-color: #495057;
  --field-description-font-size: 0.813rem;
  --field-description-margin: 0.25rem 0; /*4/16*/
  --field-description-padding: 0;  

  --plus-icon-bg-color: #e6f7e5;
  --plus-icon-color: #2d5e26;
  --plus-icon-height: 1.25rem; /*20px*/
  --plus-icon-width: 1.25rem; /*20px*/
  --plus-icon-padding: 0.25rem; /*4px*/

  --close-icon-bg-color: #ccc;  
  --close-icon-height: 1rem; /*20px*/
  --close-icon-width: 1rem; /*20px*/
}

/*** reset style start ***/
 .dg-fieldcomponents__body ul{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
  }

/*** reset style end ***/

.dg--disabled-state{
  color: var(--disabled-text-color);
  background-color: var(--disabled-bg-color);
  user-select: none;
  cursor: no-drop;
}

.dg-field__validation-message{
  font-size: 13px;
  margin: var(--field-description-margin);
}

.dg-hide{
  display: none !important;
}

/*** button icons style start ***/
.dg-button__icon{
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  fill: currentColor;
}

.dg-button__svg {
  width: 100%;
  height: 100%;
}
/*** button icons style end ***/

/*** field label and description style start ***/
.dg-field__label {
  display: block;
  font-size: var(--field-label-text-size);
  font-weight: 400;
  color: var(--field-label-color);
  margin: var(--field-label-margin);
  padding: var(--field-label-padding);
}

.dg-field__label--required{
  color: var(--field-label-required-state-color);
}

.dg-field__description {
  color: var(--field-description-color);
  font-size: var(--field-description-font-size);
  margin: var(--field-description-margin);
  padding: var(--field-description-padding);
  white-space: pre-wrap;
}

.dg-field__validation-message {
  font-size: 13px;
  word-wrap: break-word;
  color: var(--field-description-error-color);
}

/*** field label and description style end ***/
.dg-field__root{
  font-family: var(--field-component-font);
  display: flex;
  flex-direction: column;
  width: 100%;  
}
.dg-field__container{
  display: flex;
  width: 100%;
  position: relative;
}

.dg-field__prefix-element, .dg-field__suffix-element {
  padding: var(--field-presuffix-padding);
  height: auto;
  display: flex;
  align-items: center;
  border: 1px solid var(--field-presuffix-border-color);
  border-inline-end-width: 0;
  background-color: var(--field-presuffix-bg-color);
  border-radius: var(--field-input-border-radius);
  max-width: 30%;
  overflow: hidden;
}
.dg-field__suffix-element {
  border-inline-end-width: 1px;
  border-inline-start-width: 0px;
}
.dg-field__prefix-element{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.dg-field__suffix-element {
  border-radius: 0 var(--field-input-border-radius) var(--field-input-border-radius) 0;
}
.dg-field__prefix--active  .dg-field__input-wrapper{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.dg-field__input-wrapper{
  border-radius: var(--field-input-border-radius);
}
.dg-field__suffix--active .dg-field__input-wrapper {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.dg-field__prefix--hidden .dg-field__input-wrapper{
  border-top-left-radius: var(--field-input-border-radius);
  border-bottom-left-radius: var(--field-input-border-radius);
}
.dg-field__suffix--hidden .dg-field__input-wrapper{
  border-top-right-radius: var(--field-input-border-radius);
  border-bottom-right-radius: var(--field-input-border-radius);
}
.dg-field__input-wrapper{
  display: flex;
  flex: 1;
  border: 1px solid var(--field-input-border-color);
  background-color: var(--field-input-bg-color);
  color: var(--field-input-text-color);
  font-size: var(--field-input-text-size);
  max-width: 100%;
}

.dg-field__input{
  width: 100%;
  padding: var(--field-input-padding);
  font-size: var(--field-input-text-size);
  font-family: var(--field-component-font);
  border: none;
  border-radius: var(--field-input-border-radius);
  box-sizing: border-box;
  height: var(--field-input-height-size);     
  word-wrap: break-word;   
}

/* .dg-field__input-prefix,.dg-field__input-suffix{
  display: flex;
  align-items: center;
  padding: 0 var(--field-input-padding);  
  line-height: 1.4rem;
  height: 100%;
} */

.dg-field__input:focus-visible{
  outline: 0;
}

.dg-field__input-wrapper:focus-visible{
outline: 0;
border: 1px solid var(--field-input-focus-border-color);
box-shadow: var(--field-input-focus-boxshadow-color);
}

.dg-input__status--disabled .dg-field__input-wrapper{    
  --field-input-text-color: var(--field-input-disabled-text-color);
  --field-input-bg-color: var(--field-input-disabled-bg-color);   
  -webkit-text-fill-color: var(--field-input-disabled-text-color);   
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
}
.dg-input__status--focus .dg-field__input-wrapper{    
  --field-input-border-color:var(--field-input-focus-border-color) !important;     
  box-shadow: var(--field-input-focus-boxshadow-color);
}

.dg-input__status--error .dg-field__input-wrapper{
--field-input-border-color: var(--field-input-error-border-color) !important;
--selectbox-input-border-color: var(--field-input-error-border-color);
/* --field-input-text-color: var(--field-input-error-text-color); */
/* color: var(--field-input-error-text-color); */
box-shadow: var(--field-input-error-boxshadow-color);
}
.dg-input__status--error .dg-field__validation-message {    
  color: var(--field-input-error-text-color);
}
.dg-field__multi-input-category.dg-input__status--error .dg-field__input-wrapper{
  --field-input-border-color: #ced4da;
  border-color: var(--field-input-border-color);  
  box-shadow: none;
}
.dg-field__multi-input-category.dg-input__status--error .dg-field__root.dg-input__status--error .dg-field__input-wrapper {
  --field-input-border-color: var(--field-input-error-border-color);
    --selectbox-input-border-color: var(--field-input-error-border-color);
    box-shadow: var(--field-input-error-boxshadow-color);
}

.dg-input__status--error .dg-field__input-wrapper:focus-visible{
box-shadow: var(--field-input-focus-boxshadow-color);
}

.dg-field__input::placeholder {
  color: var(--field-input-placeholder-color);
  opacity: 0.8;
}


/*** field render state style start ***/
.dg-field--render-state.dg-number__root .dg-field__input{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.dg-field--render-state.dg-number__root.dg-currency__root .dg-field__input{
  width: 100%;
}

.dg-field--render-state .dg-field__input.dg-number__input{
  width: auto;
  flex: unset;
}
/*** field render state style end ***/

/***Popup style start***/
.ZG-popup-child {
  position  : absolute;
  z-index: 3;
}
/***Popup style end***/

/** Add option style start **/
.dg-plus-icon{
  background-color: var(--plus-icon-bg-color);
  fill: var(--plus-icon-color);    
  height: var(--plus-icon-height);
  width: var(--plus-icon-width);
  padding: var(--plus-icon-padding);
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
/** Add option style end **/

/** Close icon style start **/
.dg-close-icon{
  background: var(--close-icon-bg-color);
  width: var(--close-icon-width);
  height: var(--close-icon-height);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
}
/** Close icon style end **/


/*!************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./Sub_Components/src/fieldcomponents/dg-base/demo/styles/rtl-style.css ***!
  \************************************************************************************************************************/
[dir="rtl"]{
    direction: rtl;
}

[dir="rtl"] .dg-chip__prefix-elem{
    right: unset;
    left: -7px;
}

[dir="rtl"] .dg-chip__suffix-elem{
    right: unset;
    left: -8px;
}

[dir="rtl"] .dg-number__spinbutton{
    border-left-width: 0;
    border-right-width: 1px;
}

[dir="rtl"] .dg-dropdown__container .dg-dropdown__search{
    --dropdown-search-padding: 0.5rem 2rem 0.5rem 0.75rem;   
}
[dir="rtl"] .dg-dropdown__search-icon {
    left: unset;
    right: 9px;
}
[dir="rtl"] .dg-number__input-wrapper>.dg-number__spinbutton:first-child{
    border-left-width: 1px;
    border-right-width: 0;
}

/*!*********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./Sub_Components/src/fieldcomponents/dg-base/demo/select/select.css ***!
  \*********************************************************************************************************************/
:root{   
  --selectbox-input-error-text-color: #dc3545;
  --selectbox-input-font-size: 0.8125rem; /*13px*/
  --selectbox-input-padding: 0.25rem 0.5rem; /*4px 8px*/;  
  --selectbox-input-height: auto;
  --selectbox-input-border-radius: 4px;        
  --selectbox-input-placeholder-color: var(--field-input-placeholder-color);
  --selectbox-list-item-margin: 3px 3px 3px 0;
  --selectbox-dropdown-icon-width: 1.25rem;
  --selectbox-dropdown-icon-height: 1.25rem;
  --dropdown-container-width: 250px;
  --dropdown-container-bg-color: #fff;
  --dropdown-container-border-color: #ccc;
  --dropdown-container-border-radius: 4px;
  --dropdown-container-boxshadow-color: 0 4px 8px rgba(0, 0, 0, 0.1);
  --dropdown-search-icon-color: #b5b5b5;
  --dropdown-search-padding: 0.5rem 0.75rem 0.5rem 2rem; /* 8px 12px*/
  --dropdown-search-border-color: #ccc;
  --dropdown-search-font-size : 0.75rem; /*12px*/
  --dropdown-search-border-radius: 4px 4px 0 0;
  --dropdown-search-height: 2.5rem; /* 40px*/
  --dropdown-search-placeholder-text-color: #999;
  --dropdown-option-bg-color: #fff;
  --dropdown-options-listbox-bg-color: #fff;
  --dropdown-options-listbox-maxheight: 15.625rem; /* 250px */
  --dropdown-options-listbox-margin: 0.5rem 0;
  --dropdown-options-listbox-border-radius: 0 0 4px 4px;
  --dropdown-options-label-padding: 0.625rem; /*10px*/  
  --dropdown-options-label-font-size: 0.8125rem; /* 13px*/
  --dropdown-options-checkbox-width: 0.875rem; /* 14px*/
  --dropdown-options-checkbox-height: 0.875rem; /* 14px*/
  --dropdown-options-checkbox-border-color: #d9d9d9;
  --dropdown-options-checkbox-bg-color: #fff;
  --dropdown-options-checkbox-border-radius: 0.1875rem; /*3px*/
  --dropdown-options-checkbox-margin: 0.5rem;
  --dropdown-options-checkbox-checked-bg-color: #6dbe5b;
  --dropdown-options-checkbox-tick-color: #fff;
  --dropdown-options-checkbox-checked-border-color: #6dbe5b;
  --dropdown-option-hover-bg-color: #f7f7f7;
  --dropdown-option-selected-bg-color: #b8d5f9;
  --dropdown-option-disabled-bg-color: #f5f5f5;
  --dropdown-option-select-all-height: 2.188rem;
  --dropdown-option-select-all-bg-color: #f2f5f8;
  --dropdown-option-select-all-font-size: 1rem;
  --dropdown-option-select-all-border-color: #ccc;
  --dropdown-option-select-all-text-color: #222;
  --dropdown-option-disabled-color: #a0a0a0;
  --dg-dropdown-option-create-text-width: 80px;
  --dg-dropdown-option-create-text-padding: 0 0.5rem;
  --dg-dropdown-option-create-text-margin: 0 0.5rem;
  --dg-dropdown-option-none-color: #a9a9a9;
  --addcollaborator-text-color: #3e862e;
  --dg-tab-header-border-color: #ccc;
  --dg-tab-list-active-text-color: #6dbe5b;
  --dg-tab-list-active-border-color: #66c377;
  --dg-tab-nav-arrow-color: #666;
  --dropdown-options-img-width: 20px;
  --dropdown-options-img-height: 20px;

}

.dg-selection__body{
    width: 100%;
    height: 100vh;
    margin-left: 100px;
    margin-top: 40px;
    background : rgb(255, 255, 255)
  } 


/* Dropdown Container */

.dg-dropdown__container {
  position: relative;
  width: var(--dropdown-container-width);  
  font-family: var(--field-component-font);
  background-color: var(--dropdown-container-bg-color);
  border: 1px solid var(--dropdown-container-border-color);
  border-radius: var(--dropdown-container-border-radius);
  box-shadow: var(--dropdown-container-boxshadow-color);
  box-sizing: border-box;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;  
  z-index: 1;
  
}

/* Search Input */

.dg-dropdown__search-block,.dg-dropdown__search-wrapper{
  position: relative;
  display: block;
}

.dg-dropdown__search {
  width: 100%;
  padding: var(--dropdown-search-padding);
  border: none;
  border-bottom: 1px solid var(--dropdown-search-border-color);
  font-size: var(--dropdown-search-font-size);
  outline: none;
  border-radius: var(--dropdown-search-border-radius);
  transition: border-color 0.2s;
  display: flex;
  height: var(--dropdown-search-height);
  box-sizing: border-box;
}

.dg-dropdown__search-icon{
  position: absolute;
    left: 9px;
    top: 50%;
    fill: var(--dropdown-search-icon-color);
    transform: translateY(-50%);
}

.dg-dropdown__search::placeholder {
  color: var(--dropdown-search-placeholder-text-color);
}


/* Dropdown Menu */
.dg-dropdown__options-listbox {  
  background-color: var(--dropdown-options-listbox-bg-color);    
  max-height: var(--dropdown-options-listbox-maxheight);
  /* margin: var(--dropdown-options-listbox-margin); */
  padding: 0;
  overflow-y: auto;  
  border-radius: var(--dropdown-options-listbox-border-radius);
  width: 100%;
  position: relative;
  
}

/* .dg-dropdown__options-listbox{
  position: absolute;
  background-color: #fff;
  width: 100%;
  z-index: 1;
  overflow-y: auto;
  height: 30vh;
} */

/* Dropdown Option */
.dg-dropdown__option {  
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  list-style-type: none;
  width: 100%;
  background-color: var(--dropdown-option-bg-color);          
}

.dg-dropdown__option-none{
  color: var(--dg-dropdown-option-none-color);
}

.dg-dropdown__option-label{
  padding: var(--dropdown-options-label-padding);
  font-size: var(--dropdown-options-label-font-size);  
  display: flex;      
  align-items: center;  
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}

.dg-dropdown__option-image{
  width: var(--dropdown-options-img-width);
  height: var(--dropdown-options-img-height);
  border-radius: 50%;
  margin-inline-end: 8px;
}
.dg-dropdown__option-checkbox-input{  
  position: absolute;
  opacity: 0;
  z-index: -1; 
  width: 0;
  height: 0;
  margin: 0;  
   
}
.dg-dropdown__option-checkbox-input--custom {
  width: var(--dropdown-options-checkbox-width);
  min-width: var(--dropdown-options-checkbox-width);
  height: var(--dropdown-options-checkbox-height);
  border: 1px solid var(--dropdown-options-checkbox-border-color);
  background-color: var(--dropdown-options-checkbox-bg-color);
  border-radius: var(--dropdown-options-checkbox-border-radius);
  margin-inline-end: var(--dropdown-options-checkbox-margin);
  position: relative;
}

.dg-dropdown__option-label .dg-chip__root {
  min-width: 0;
}

.dg-dropdown__option[aria-selected="true"] .dg-dropdown__option-checkbox-input--custom,
.dg-dropdown__option--selected .dg-dropdown__option-checkbox-input--custom {
  background: var(--dropdown-options-checkbox-checked-bg-color);
  border: 1px solid var(--dropdown-options-checkbox-checked-border-color);
}
.dg-dropdown__option[aria-selected="true"] .dg-dropdown__option-checkbox-input--custom:after,
.dg-dropdown__option--selected .dg-dropdown__option-checkbox-input--custom:after{
  width: 3px;
  height: 6px;
  content: "";
  position: absolute;
  transform: rotate(45deg);
  top: 3px;
  left: 5px;
  border-color: var(--dropdown-options-checkbox-tick-color);
  border-style: solid;
  border-width: 0 1.3px 1.3px 0;
}
.dg-dropdown__option-label-text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block;
  flex: 1;
}

.dg-dropdown__option--selected{
  background-color: var(--dropdown-option-selected-bg-color);          
}
.dg-dropdown__option--disabled {
  cursor: not-allowed;
  user-select: none;  
  color: var(--dropdown-option-disabled-color); /* Grey text color */
  opacity: 0.6;
  pointer-events: none; /* Disable interaction */
}


.dg-input__status--error .dg-field__validation-message {    
  color: var(--selectbox-input-error-text-color);
}

.dg-dropdown__option--disabled:hover {
  background-color: var(--dropdown-option-disabled-bg-color); /* Ensure background doesn't change on hover */
}


.dg-dropdown__option:focus-visible,
.dg-dropdown__option[aria-selected="true"] {
  /* background-color: var(--dropdown-option-hover-bg-color);           */
  outline: none;

}

.dg-dropdown__option-focused{
  background-color: var(--dropdown-option-hover-bg-color);          
  outline: none;
}

/* select-all */
.dg-dropdown__option-select-all {
  height: var(--dropdown-option-select-all-height);
  width: 100%;
  border: none;
  background: var(--dropdown-option-select-all-bg-color);
  font-size: var(--dropdown-option-select-all-font-size);
  border-bottom: 1px solid var(--dropdown-option-select-all-border-color);
  color: var(--dropdown-option-select-all-text-color);
}

.dg-dropdown__option-select-all:hover{
  background-color: var(--dropdown-option-select-all-bg-color);      
}


.dg-selectbox__input-placeholder  {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: var(--selectbox-input-placeholder-color); /* Placeholder text color */
  opacity: 0.8;
  cursor: pointer;
  user-select: none; /* Disable text selection */
}

.dg-dropdown__no-option-label {
    margin: 10px;
}
  
/*** Anandhan selection state style start ***/
.dg-selectbox__root{
  font-family: var(--field-component-font);
  height: 100%;
}

.dg-singleselect__root .dg-selectbox__input-wrapper{
  cursor: pointer;
}
.dg-selectbox__input-wrapper{  
  border-radius: var(--selectbox-input-border-radius);  
  font-size: var(--selectbox-input-font-size);
  width: 100%;
  min-height: 40px;
  height: var(--selectbox-input-height);
  padding: var(--selectbox-input-padding);
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: flex-start;
}

.dg-selectbox__inner{
  width: 100%;
  min-width: 0;  
  display: flex;  
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;  
}
.dg-selectbox__nowrap{
  flex-wrap: nowrap;
}
.dg-selectbox__input-suffix{
  height: 100%;
}

.dg-selectbox__inner:has(.dg-selectbox__input-placeholder),.dg-selectbox__input-wrapper:has(.dg-selectbox__text) {
  height: 100%;
  align-items: center;
}

.dg-selectbox__text{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
}

.dg-selectbox__inner.dg-selectbox__text{
  flex-wrap: nowrap;
}

.dg-selectbox__inner a{
  color: inherit;
}

.dg-selectbox__icon-container{
  display: flex;
  align-items: center;
  justify-content: center;  
  height: 100%;
}

.dg-selectbox__dropdown-icon{
  display: flex;
  align-items: center;
  justify-content: center;  
  height: var(--selectbox-dropdown-icon-width);
  width: var(--selectbox-dropdown-icon-height);
}

.dg-selectbox__list{
  display: flex;
  flex-wrap: wrap;
}

.dg-selectbox__item{
  margin: var(--selectbox-list-item-margin);
  width: 100%;
  max-width: fit-content;
}
/*** Anandhan selection state style end ***/

.dg-selectbox__clear-all-icon {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dg-selectbox__container:hover .dg-selectbox__clear-all-icon {
  opacity: 1;
}
  
.dg-selectbox__container{
  width: 100%;
  height : 100%;
}

.dg-dropdown__virtual-scroll{
  height : 30vh;
}

/*** Create option style start ***/
.dg-dropdown__option-create .dg-dropdown__option-label{
  background: transparent;
  border: 0;
  white-space: nowrap;  
}

.dg-dropdown__option-create-icon{
  margin-inline-end: 8px;
}

.dg-dropdown__option-create-text {
  max-width: var(--dg-dropdown-option-create-text-width);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: var(--dg-dropdown-option-create-text-padding);
  position: relative;
  margin: var(--dg-dropdown-option-create-text-margin);
}

.dg-dropdown__option-create-text:after, .dg-dropdown__option-create-text:before {
  position: absolute;
  top: 0;
  left: 1px;
  content: ' " ';
}
.dg-dropdown__option-create-text:after {
  left: unset;
  right: 2px;
}
/*** Create option style end ***/


.dg-dropdown__option-create--collaborator{
  background: 0 0;
  -webkit-text-fill-color: var(--addcollaborator-text-color);
  -webkit-text-stroke-color: var(--addcollaborator-text-color);
  color: var(--addcollaborator-text-color);
}

.dg-dropdown__option-create--collaborator .dg-dropdown__option-label-text{
  text-align: left;
}

/** tab option in dropdown style start **/
.dg-tab__list {
  display: inline-block;
  cursor: pointer;
  padding: 10px 15px;  
  position: relative;
}
.dg-tab__header {
  border-bottom: 1px solid var(--dg-tab-header-border-color);
  display: flex;
  position: relative;
}
.dg-tab__list.dg-tab__list--active{
  outline: 0;  
  color: var(--dg-tab-list-active-text-color);
}
.dg-tab__list:before{
  position: absolute;
  content: '';
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 0;
  background-color: var(--dg-tab-list-active-border-color);
  opacity: 0;
  transition: width 0.5s ease;

}
.dg-tab__list.dg-tab__list--active:before{
  opacity: 1;
  width: 100%;
}
.dg-tab__nav {
  position: absolute;
    width: 50px;
    height: 24px;
    background: linear-gradient(to left, rgba(198, 136, 136, 0) 0, #fff 50%, #fff 100%);
    fill:  var(--dg-tab-nav-arrow-color);
    display: flex;
    align-items: center;    
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer;
    padding: 0 10px;
    box-sizing: border-box;
    display: none;
}
.dg-tab__nav.dg-tab__nav-left-arrow {
  left: 0;
  margin-left: -5px;  
}
.dg-tab__nav.dg-tab__nav-right-arrow {
  right: 0;  
  justify-content: flex-end;
  padding: 0;    
  background: linear-gradient(to right, rgba(198, 136, 136, 0) 0, #fff 60%, #fff 100%);
}
.dg-tab__nav.dg-tab__nav-left-arrow svg {
  transform: rotate(180deg);
}
.dg-tab__nav.dg-tab__nav-arrow--active{
  display: flex;
}

.dg-tab__list-parent {
  display: flex;
  overflow: hidden;
}
/** tab option in dropdown style end **/

/*** skeleton loader style start ***/
.ZG-skeletonLoader {
	height: 100%;
	width: 100%;
	border-radius: 5px;
	animation: 1.5s gridSkeletonLoader forwards infinite linear;
	background: #f6f7f8;
	background-image: -webkit-linear-gradient(
		left,
		#f6f7f8 0,
		#edeef1 20%,
		#f6f7f8 40%,
		#f6f7f8 100%
	);
	background-repeat: no-repeat;
}

@keyframes gridSkeletonLoader {
	0% {
		background-position: -468px 0;
	}
	100% {
		background-position: 468px 0;
	}
}



.dg-drop-option-loader-panel .dg-drop-option-loader {
  display: none;
}
.dg-delay-loader-dropdown.dg-drop-option-loader-panel .dg-drop-option-loader{
display: flex;  
}

.dg-delay-loader-dropdown-list{
  padding: 0;
}
.dg-drop-option-loader-circle {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: block; 
}
.dg-drop-option-loader{
padding: 10px;
display: flex;
margin: 0 6px;
}
.dg-skeleton-loader {
  animation: 1.5s skeletonLoader forwards infinite linear;
  background: #f6f7f8;
  background-image: -webkit-linear-gradient(left, #f6f7f8 0, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-repeat: no-repeat;
}

.dg-drop-option-loader-rec {
  width: 166px;
  height: 22px;
  border-radius: 4px;
  margin: 0 8px 0;
  display: block;
}

@keyframes skeletonLoader{
0% {
  background-position: -468px 0;
}
100% {
  background-position: 468px 0;
} 
}
/*** skeleton loader style end ***/

/*** No result found style start ***/
.dg-dropdown__select-all--no-options {
  display: none;
}
.dg-no-result-empty-panel{
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center;
  padding: 10px;
  height: 100%;
}

.dg-no-result__card{
  width: 110px;
    height: 31px;
    border-radius: 5px;
    border: solid 1px rgba(0,0,0,.2);
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 15px;
    margin-left: -50px;
}

.dg-no-result-empty-panel .dg-no-result__card:nth-child(2) {
  position: relative;
  top: -4px;
  left: 42px;
}

.dg-no-result-empty-panel .dg-no-result__card:nth-child(2) .dg-no-result__element {
  background: #f4e7b2;
}

 .dg-no-result__element{
  position: relative;
  width: 15px;
  height: 15px;
  background-color: #c1daf3;
  border-radius: 50%;
  display: flex;
 }

 .dg-no-result__element::before {
  position: absolute;
  content: "";
  width: 65px;
  height: 4px;
  border-radius: 4px;
  background: #f4f4f4;
  left: 20px;
  top: 11px;
}

.dg-no-result__element::after {
  position: absolute;
  content: "";
  width: 42px;
  height: 4px;
  border-radius: 4px;
  background: #e9e9e9;
  left: 20px;
  top: 1px;
}

.dg-no-result__empty-state-text{
  font-weight: 500;
  font-size: 16px;
  color: #282828;
  margin-top: 22px;
  display: block;
}

.ZT-noSearchLI{
  user-select: none;
  cursor: auto;
}
/*** No result found style end ***/


/*!*****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./Sub_Components/src/fieldcomponents/dg-base/demo/chip/chip.css ***!
  \*****************************************************************************************************************/


/*** Anandhan chip components styles start ***/
:root{
    --chip-bg-color: rgb(0,0,0,0.08);
    --label-dot-color: RGB(155,155,155);
    --chip-outline-border-color: #1976d2;
    --chip-outline-text-color: #1976d2;
    --chip-focus-color: #0056b3;
    --chip-font-size: 0.8125rem; /*13px*/
    --chip-padding: 0.125rem 0.625rem; /*2px 10px;*/
    --chip-margin: 0.1875rem 0.1875rem 0.1875rem 0; /*3px*/
    --chip-thumbnail-img-width: 1.125rem; /*18px;*/
    --chip-thumbnail-img-height: 1.125rem; /*18px;*/
    --chip-remove-svg-width: 0.625rem; /*10px;*/
    --chip-remove-svg-height: 0.625rem; /*10px;*/
    --chip-remove-svg-color: #666;
    --chip-ellipse-padding: 0 0.3125rem; /*5px;*/
    --chip-ellipse-bg-color: #ccc;
    --chip-ellipse-height: 0.75rem; /*12px;*/
    --chip-plus-icon-bg-color: #e6f7e5;
    --chip-plus-icon-color: #2d5e26;
    --chip-plus-icon-padding: 0.25rem; /*4px*/
    --chip-plus-icon-height: 1.25rem; /*20px*/
    --selectbox-input-border-color: #ccc;    
    --selectbox-input-bg-color: #fff;
    --selectbox-input-text-color: #222;
}

.dg-chip__root{
    position: relative;
    font-size: var(--chip-font-size);
    display: inline-flex;
    line-height: 18px;
    box-sizing: border-box;
    max-width: 100%;
    background-color: var(--chip-bg-color);
    padding: var(--chip-padding);
    border-radius: 20px;
    height: auto;
    margin: var(--chip-margin);
    border: 1px solid transparent;
}

.dg-chip__root:focus-visible {
    outline: 2px solid var(--chip-focus-color);
    outline-offset: 2px;
}

.dg-chip__label-wrapper{
    display: flex;
    align-items: center;
    overflow: hidden;
}

.dg-chip__label {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-family: var(--field-component-font);
    width: inherit;
    display: block;
}

.dg-chip__thumbnail{
    display: flex;
}

.dg-chip__root .dg-chip__thumbnail-img{
    width: var(--chip-thumbnail-img-width);
    height: var(--chip-thumbnail-img-height);
    border-radius: 50%;
    object-fit: cover;    
}

.dg-chip__remove-icon{
    display: flex;
    align-items: center;    
    position: relative;   
    width: 16px;
    height: 100%;
    box-sizing: border-box;
    margin-top: 1px; 
}

.dg-chip__remove-svg {
    width: var(--chip-remove-svg-width);
    height: var(--chip-remove-svg-height);
    fill: var(--chip-remove-svg-color);
    cursor: pointer;
    transition: fill 0.2s;
}

.dg-chip__prefix-elem{
    position: relative;  
    left: -7px;
}

.dg-chip__suffix-elem{
    position: relative;  
    right: -8px;
}

/*** chip ellipse icon style start ***/
.dg-chip__ellipse-icon {
    padding: var(--chip-ellipse-padding);
    top: 4px;
    background-color: var(--chip-ellipse-bg-color);
    border-radius: 2px;
    max-width: 22px;
    width: 100%;
    height: var(--chip-ellipse-height);
    line-height: unset;
    text-align: center;
  }
  
  .dg-chip__ellipse-icon .dg-chip__label{
    display: block;
  }
  
  .dg-chip__ellipse-svg{
    transform: rotate(90deg);
  }
  /*** chip ellipse icon style end ***/

  /*** chip add option plus icon style start ***/
  .dg-chip__add-option-icon{
    background-color: var(--chip-plus-icon-bg-color);
    fill: var(--chip-plus-icon-color);    
    height: var(--chip-plus-icon-height);
    padding: var(--chip-plus-icon-padding);
    border-radius: 3px;
    cursor: pointer;
  }

  /*** chip add option plus icon style end ***/
/*** URL components style start ***/
.dg--url .dg-chip__root{
    border-radius: 5px;
}
/*** URL components style end***/
/*** singleselect style start ****/

.dg-singleselect{
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

  
.dg-chip__label--dot:before {
    content: '';
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .4);
    position: relative;
    top: 0;
    left: 4px;
    bottom: 0;
    margin: auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--label-dot-color);
    display: block;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 5px;
}

.dg-chip__root.dg-chip--outlined{
    border: 1px solid var(--chip-outline-border-color);
    color: var(--chip-outline-text-color);
    background-color: transparent;
}

/*** singleselect style end ****/

/*** multiselect style start ***/
 .dg-selectbox__list{
    display: flex;
    flex-wrap: wrap;
}

.dg-selectbox__list{
    margin: 3px 3px 3px 0;
    width: 100%;
    max-width: fit-content;
}
/*** multiselect style end ***/
/*** Anandhan chip components styles end ***/
/*!***********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./Sub_Components/src/fieldcomponents/dg-base/demo/radio/css/radio.css ***!
  \***********************************************************************************************************************/
:root{
  --dg-radio-toggle-container-height: 30px; 
  --dg-radio-toggle-container-bg-color: #e7e9ea;
  --dg-radio-toggle-container-padding: 3px; 
  --dg-radio-toggle-container-margin: 10px;

  --dg-radio-toggle-input-padding: 6px 12px;
  --dg-radio-toggle-input-font-size: 13px;
  --dg-radio-toggle-input-text-color: rgba(79, 83, 88, 1);
  --dg-radio-toggle-input-label-bg-color: #fff;
  --dg-radio-toggle-input-label-text-color: #222;

  --radio-width: 0.875rem; /* 14px*/
  --radio-height: 0.875rem; /* 14px*/ 
  --radio-margin: 0.5rem;
  --radio-label-font-size: 0.875rem;

  --checked-radio-width: 0.5rem; 
  --checked-radio-height: 0.5rem;
  --focused-border-color: #007BFF;
  --checked-border-color: #007BFF;
  --checked-fill-color: #007BFF;
  --unchecked-border-color: #ccc;
  --unchecked-fill-color: #fff;

  --field-label-color: #495057;
  --field-label-required-state-color: #dc3545;
  --field-label-text-size: 0.875rem;
  --field-label-margin: 0.5rem 0;
  --field-label-padding: 0;
  --field-description-color: #495057;
  --field-description-font-size: 0.813rem;
  --field-description-margin: 0.25rem 0; /*4/16*/
  --field-description-padding: 0; 
}

.dg-radio__input{
  position: absolute;
  opacity: 0;
  z-index: -1; 
  width: 0;
  height: 0;
  margin: 0;
  /* padding: 5px; */
}

.dg-radio__input--custom {
  display: inline-block;
  width: var(--radio-width);
  min-width: var(--radio-width);
  height: var(--radio-height);
  border-radius: 50%;
  position: relative;
  margin-inline-end: var(--radio-margin);
  cursor: pointer;    
  border: 1px solid var(--unchecked-border-color);
  background-color: var(--unchecked-fill-color);
}

.dg-radio__input--custom::after {
  content: '';
  position: absolute;
  display: none;
  left: 50%;
  top: 50%;
  width: var(--checked-radio-width);
  height: var(--checked-radio-height);   
  transform: translate(-50%, -50%);
  background-color: var(--checked-fill-color);
  border-radius: 50%;
}

.dg-radio__input:checked + .dg-radio__input--custom {
  border-color: var(--checked-border-color);    
}

.dg-radio__input:checked + .dg-radio__input--custom::after {
  display: block;
}

.dg-radio__input-wrapper{
  display: inline-flex;
  align-items: center;
  margin-inline-end: 16px;
  cursor: pointer;
  font-size: var(--radio-label-font-size);
}

.dg-input__status--disabled .dg-radio__input-wrapper,.dg-input__status--disabled .dg-radio__input--custom{
  cursor: not-allowed;
  user-select: none;
  opacity: 0.5;
}
.dg-radio__input-label{
  word-break: break-word;
}

/*** Toggle type radio style start ***/
.dg-radio__toggle-type .dg-radio__container{
  display: flex;
  align-items: center;
  height: var(--dg-radio-toggle-container-height);
  width: fit-content;    
  background-color: var(--dg-radio-toggle-container-bg-color);
  padding: var(--dg-radio-toggle-container-padding);
  border-radius: 8px;
  box-sizing: border-box;   
}

.dg-radio__toggle-type .dg-radio__input-wrapper{
  display: flex;
  height: 100%;
  margin-inline-end: 0;
}


.dg-radio__toggle-type .dg-radio__label{
  color: var(--field-label-color);
  display: block;
  font-size: var(--field-label-text-size);
  font-weight: 400;
  margin: var(--field-label-margin);
  padding: var(--field-label-padding);
}

.dg-radio__toggle-type .dg-radio__input-label {
  padding: var(--dg-radio-toggle-input-padding);
  border-radius: 6px;
  font-size: var(--dg-radio-toggle-input-font-size);
  height: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  color: var(--dg-radio-toggle-input-text-color);
}

.dg-radio__toggle-type .dg-radio__input:checked + .dg-radio__input-label {
  background: var(--dg-radio-toggle-input-label-bg-color) ;    
  color: var(--dg-radio-toggle-input-label-text-color);
  font-weight: 500;
}

/*** Toggle type radio style end ***/

/*** vertical checkbox list group style start ***/
.dg-radio__list-vertical .dg-radio__container{
  display: inline-flex;
  flex-direction: column; 
}

.dg-radio__list-vertical .dg-radio__input-wrapper{
  margin-bottom: 16px;
}
/*** vertical checkbox list group style end ***/
/*!*********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./Sub_Components/src/fieldcomponents/dg-base/demo/rating/rating.css ***!
  \*********************************************************************************************************************/
  
  .dg-rating__input {
    display: flex;
    justify-content: center;
    align-items: center;        
    cursor: pointer;
  }

  .dg-rating__radio-input {
    position: absolute;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
    width: 20px;
    height: 20px;
  }
  
  .dg-rating__custom-input-icon{
    display: flex;
  }

  .dg-rating__custom-input-svg{
    fill: #E3E3E3;
    width: 30px;
    height: 30px

  }
  
  .dg-rating__input-hover .dg-rating__custom-input-svg{
    fill:#fcb71571;
  }

  .dg-rating__input-checked .dg-rating__custom-input-svg,
  .dg-rating__input-checked.dg-rating__input-hover .dg-rating__custom-input-svg{
    fill:#fcb515;
  }
  

/** Using radio field rating field customized style start ***/

:root{
  --rating-icon-color: #e3e3e3;
  --rating-icon-hover-color: #fcb71571;
  --rating-icon-checked-color: #fcb515;
}
.dg-rating__root .dg-radio__input--custom{
  border: 0;
  margin: 0;
  background-color: transparent;
}

.dg-rating__root .dg-radio__input-wrapper{
  margin-inline-end: 4px;
}
.dg-rating__root .dg-radio__input:checked + .dg-radio__input--custom::after{
  display: none;
}

.dg-rating__root  .dg-radio__container{
  display: flex;
}

.dg-rating__root .dg-radio__input--custom svg{
  fill: var(--rating-icon-color);
}

.dg-rating__input-hover .dg-radio__input--custom svg{
  fill:var(--rating-icon-hover-color);
  opacity: 0.4;
}

.dg-rating__input-checked .dg-radio__input--custom svg,
.dg-rating__input-checked.dg-rating__input-hover .dg-radio__input--custom svg{
  fill:var(--rating-icon-checked-color);
  opacity: 1;
}
/** Using radio field rating field customized style end ***/
/*!*****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./Sub_Components/src/fieldcomponents/dg-base/demo/text/text.css ***!
  \*****************************************************************************************************************/

/*** prefix and suffix style start ***/
.dg-text__prefix-elem,.dg-text__suffix-elem{
  padding: var(--text-input-presuffix-padding);
  height: auto;
  display: flex;
  align-items: center;
  border: 1px solid var(--text-input-presuffix-border-color);
  border-inline-end-width: 0;
  background-color: var(--text-input-presuffix-bg-color);
}

.dg-text__suffix-elem{
border-inline-end-width: 1px;
border-inline-start-width: 0px;
}
/*** prefix and suffix style end ***/

/*!*******************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./Sub_Components/src/fieldcomponents/dg-base/demo/Multiline_new/multiline.css ***!
  \*******************************************************************************************************************************/
.multiline_user_one {
    width: 200px;
    height: 150px;
}

.multiline_user_two {
    width: 200px;
    height: 150px;
}

.dg-textarea__root,.dg-textarea__root .dg-text__container{   
    height: 100%;
}

.dg-textarea__root  .dg-text__input{    
    resize: none;     
}


/*# sourceMappingURL=all.full.min_unc.css.map*/