/*$Id$*/


#grid {
    font-family: icons;
}

#gridContainer {
    position: absolute;
    /*border: 1px solid #ddd;*/
    box-sizing: border-box;
    background: #f7f8f9;
    left: 0;
    top: 0;
    overflow: hidden;
}

.grid-Container>canvas {
    position: absolute;
}

.pane {
    position: absolute;
    overflow: hidden;
    /*border: 1px solid black;*/
    /*overflow: scroll;
	overflow: hidden;*/
    /*box-shadow: inset 0 0 40px 0px #444;*/
}

.pane.dummy {
    background: #f6f6f6;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
}

.pane.fieldPane:hover {
    overflow: initial;
}

/* .pane.rowPane css is used to show create multiple records */

.rowPane {
    /* overflow: visible; */
    width: 265px !important;
}

.scroller {
    position: absolute;
}

.selection_div {
    position: absolute;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.05);
}

.vScroll {
    background-color: #F3F3F3;
    overflow-y: scroll;
}

.vScroll::-webkit-scrollbar {
    width: inherit;
}

.hScroll::-webkit-scrollbar {
    height: inherit;
}

.vScroll::-webkit-scrollbar-track, .hScroll::-webkit-scrollbar-track {
    background: #F3F3F3;
}

.vScroll::-webkit-scrollbar-thumb:vertical, .hScroll::-webkit-scrollbar-thumb:horizontal {
    background: #dadce0;
}

.hScroll {
    background-color: #F3F3F3;
    overflow-x: scroll;
}

.columnPane {
    position: absolute;
}

.cBC span:after {
    content: '\e95c';
    width: 6px;
    height: 3px;
    position: absolute;
    opacity: 0;
    font-family: icons;
    font-size: 10px;
    top: 2px;
    left: 1px;
    text-shadow: 0px -0.5px #000;
}

.cBC {
    cursor: pointer;
    position: absolute;
    left: 593px;
    top: 426px;
    width: 8px;
    height: 8px;
}

.cBC:hover {
    opacity: .5;
}

.cBC input[type="checkbox"] {
    display: none;
}

.cBC span {
    width: 12px;
    height: 12px;
    border: 1px solid #ccc;
    background-color: #f4f4f4;
    display: inline-block;
    position: relative;
    margin-top: 2px;
    border-radius: 0px;
    box-shadow: 0px 0px 0px 1px #fff inset;
}

.cBC span:hover:after {
    opacity: 0.2;
}

.cBC input[type="checkbox"]:checked+span:after {
    opacity: 1;
}

.cBC span:hover, .cBC input[type="checkbox"]:checked+span {
    border-color: #888;
}

.contextMenuDropDown-summaryBar {
    position: absolute;    
    display: flex;
    align-items: center;
    justify-content: center;
    top: 9px;    
    right: 9px;
    height: 14px;
    width: 14px;
    background: #a9a9a9;
    fill: #fff;
    cursor: pointer;
    /* border-top-color: #bbb; */    
    transform: rotate(180deg);
    border-radius: 3px;
}

.contextMenuDropDown-summaryBar svg {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: -1px;
    left: -1px;
}

.contextMenuDropDown-summaryBar:hover svg {
    fill: #282828;
}

.contextMenuDropDown {
    position: absolute;
    top: 7px;
    /*top: 7px;*/
    right: 8px;
    /* display: block; 
	 height: 13px;
	width: 14px; */
    cursor: pointer;
    /* border-top-color: #bbb; */
    fill: #bbb;
    padding: 0 2px;
}

.contextMenuDropDown:hover svg {
    fill: #333
}

.rowContextMenuDropDown {
    /* right: 0px; */
    /*left: 5px;*/
    display: block;
    height: 13px;
    margin-top: 3px;
    width: 14px;
    cursor: pointer;
    /* transform: translateX(16px); */
    /* transform: translateX(-15px); */
    fill: #bbb;
    order: 2;
    z-index: 1;
    /*temp fix for grid left pane*/
}

.rowContextMenuDropDown:hover svg {
    fill: #333
}



.headerContainer {
    position: absolute;
    /*display: none;*/
}

.record_panel {
    display: flex;
    align-items: start;
    height: calc(100% - 2px);
    width: 72px;
    justify-content: space-between;
    padding-top: 5px;
    margin-top: 1px;
    background: #f4f5f6;
}

.row_pane_hover {
    position: absolute;
    top: 0px;
    width: inherit;
}

.colCueHolder {
    position: absolute;
    top: 0;
    height: 100%;
}

.colHideCue {
    position: absolute;
    height: 100%;
    width: 1px;
    background: red;
}

.hiddenRightCue:after {
    content: '';
    position: absolute;
    left: 5px;
    border: 4px solid transparent;
    border-left-color: #666;
    top: 50%;
    transform: translateY(-50%);
}

.hiddenLeftCue:before {
    content: '';
    position: absolute;
    right: 5px;
    border: 4px solid transparent;
    border-right-color: #666;
    top: 50%;
    transform: translateY(-50%);
}

.rowCueHolder {
    position: absolute;
    width: 100%;
    top: 0;
}

.rowHideCue {
    position: absolute;
    width: 100%;
    height: 1px;
    background: red;
}

.hiddenTopCue:after {
    content: '';
    position: absolute;
    left: 2px;
    border: 4px solid transparent;
    border-bottom-color: #666;
    bottom: 5px;
}

.hiddenBottomCue:before {
    content: '';
    position: absolute;
    left: 2px;
    border: 4px solid transparent;
    border-top-color: #666;
    top: 4px;
}

.cellEditor {
    width: 100%;
    background: #fff;
    position: absolute;
    min-height: inherit;
}

.cellEditor input[type="text"]:focus {
    border: none
}

.cellEditor .singleLineText .value {
    padding: 3px 5px 6px;
}

.cellEditor .singleLineText input:only-child {
    width: 100%;
}

.cellEditor .singleLineText input:first-child {
    width: 50%;
}

.cellEditor .singleLineText input:last-child {
    width: 50%;
}

.fieldEditor {
    /*padding: 7px;*/
    background: #fff;
}

.fieldEditor>.cellEditor {
    padding: 7px 0px 6px 0px;
    white-space: nowrap;
    overflow: hidden;
    /* text-overflow: ellipsis; */
    position: initial;
    margin: 0px 6px 0px 6px;
}

.parentDialogContainer {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.columnAddButton {
    position: absolute;
    top: 0;
    left: calc(100% + 1px);
    cursor: pointer;
    /* font-size: 19px;
	width: 50px;
	font-weight: bold;
	background: #f6f6f6;
	user-select: none;
	display: flex;
	justify-content: center;
	align-items: center;
	height: inherit; */
    /*text-align  : center;*/
    /*display     : grid;*/
    /*padding     : 10px;*/
    font-size: 18px;
    width: 30px;
    height: 29px;
    border-radius: 5px;
    border: solid 1px #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #747a82;
    margin: 1px 5px 0;
    background: #f5f5f5;
}

.columnAddButton:hover {
    border-color: #cccc;
    background: #f2f2f2;
}



.rowAddContainer {
    position: absolute;
    left: 0;
    top: calc(100% + 1px);
    height: 42px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    /* width: 250px; */
    z-index: 1;
}

.rowAddButton {
    font-size: 18px;
    width: 30px;
    height: 29px;
    border-radius: 5px 0 0px 5px;
    border: solid 1px #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #747a82;
    margin: 0 0px 0 5px;
    background: #f5f5f5;
}

.rowAddButton:hover {
    border-color: #cccc;
    background: #f2f2f2;
}

.rowAddInput {
    width: 50px;
    background: #f5f5f5;
    border: solid 1px #e8e8e8;
    border-left-color: rgb(232, 232, 232);
    border-left-style: solid;
    border-left-width: 1px;
    padding: 5px;
    border-radius: 0 5px 5px 0;
    height: 29px;
    border-left: none;
}

.checkBox {
    position: absolute;
    top: 15px;
    left: 20px;
}

.fieldWidthResizer {
    background: #2196F3;
    width: 3px;
    height: 40px;
    z-index: 12;
    position: absolute;
    top: 0px;
    cursor: col-resize;
    display: block;
}

.leftResizeCue {
    left: -5px;
}

.rightResizeCue {
    right: -2px;
}

.colResizeCue {
    width: 4px;
    cursor: col-resize;
    background: #58bf6b;
    z-index: 1;
    opacity: 0;
    border-radius: 3px;
}

.colResizeCue:hover {
    opacity: 1;
}

.topResizeCue {
    top: -3px;
}

.bottomResizeCue {
    bottom: -3px;
}

.rowResizeCue {
    height: 7px;
    cursor: row-resize;
}

/* SummaryBar Dialog css*/

.footer-drop-sub {
    position: relative
}



/* Grid Default Css starts */

.selection {
    position: absolute;
    pointer-events: none;
}

.filler {
    color: inherit;
    position: absolute;
    background: currentColor;
    pointer-events: none;
    opacity: 0.05;
    height: 100%;
    width: 100%;
}

.edges {
    pointer-events: none;
}

.edges, .corners, .edges>div, .corners>div {
    color: inherit;
}

.corners>.tl, .corners>.bl, .corners>.tr, .corners>.br {
    border: solid;
    margin: -3px;
    position: absolute;
    pointer-events: all;
    border-width: 4px;
    transition: margin .2s;
    border-radius: 50%;
    box-shadow: 0 0 0 1px white;
}

.corners>.tl, .corners>.br {
    cursor: nwse-resize;
}

.corners>.tr, .corners>.bl {
    cursor: nesw-resize;
}

.corners>.tr, .corners>.tl {
    top: 0;
}

.corners>.br, .corners>.bl {
    bottom: 0;
}

.corners>.tr, .corners>.br {
    right: 0;
}

.corners>.tl, .corners>.bl {
    left: 0;
}

.rangeSelection>.corners>.br {
    cursor: crosshair;
}

.rangeSelection .top {
    border-top-width: 1px;
}

.rangeSelection .bottom {
    border-bottom-width: 1px;
}

.rangeSelection .left {
    border-left-width: 1px;
}

.rangeSelection .right {
    border-right-width: 1px;
}

.fillSeriesSelection>.edges>.bottom {
    border-bottom: 1px dashed;
}

.fillSeriesSelection>.edges>.top {
    border-top: 1px dashed;
}

.fillSeriesSelection>.edges>.left {
    border-left: 1px dashed;
}

.fillSeriesSelection>.edges>.right {
    border-right: 1px dashed;
}

/* Grid Default Css ends */

.freeze {
    position: absolute;
    width: 8px;
    border-left: 1px solid;
    border-left-color: #acacac;
    /* cursor            : grab; */
    /* top                  : 30px; */
}

.anchorTagCraftGrid {
    pointer-events: all;
    opacity: 0;
    position: absolute;
    z-index: 2;
}

.mouseFollower {
    background: transparent;
    position: absolute;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
}

.snap {
    box-shadow: 0 0 30px 0 rgba(55, 59, 63, 0.2);
    width: "auto";
    transform: "scale(0.5)";
    transform-origin: "left top";
    cursor: grabbing;
    pointer-events: all;
}

/*Cell selection colour start*/

.freeze_slider {
    border-radius: 4px;
    position: absolute;
    background: #66c377;
    width: 6px;
    height: 25px;
    left: -4px;
    opacity: 0;
}

.cellEditorContainer {
    position: absolute;
    border: 1px solid #66c377;
    z-index: 3;
}

/**** Field Editor style and icon position in Field editor style start ****/

.cellEditorContainer.fieldEditor {
    padding: 0 15px 0 4.5px;
    /* box-shadow: 0 0 0 1px #66c377; */
    display: flex;
    align-items: center;
    background: #66c377;
    border: 1px solid transparent;
    box-shadow: unset;

}

.cellEditorContainer.fieldEditor:before {
    position: absolute;
    content: '';
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    background: #fff;
    border-radius: 3px;
    left: 1px;
    z-index: -1;
}

.cellEditorContainer.fieldEditor .cellEditor {
    background: none;
    border: none;
}

.gridFieldIconContainer .icon {
    fill: #555;
    opacity: 0.25;
    position: relative;
    top: 2px;
}

.gridFieldIconContainer .icon svg {
    width: 14px;
    height: 14px;
}

.gridFieldIconContainer+.cellEditor {
    margin-left: 3px;
}

.gridFieldIconContainer .createdByIcon {
    top: 2.5px;
    left: 0.5px;
}

.gridFieldIconContainer .createdByIcon svg {
    transform: scale(0.9);
}

.gridFieldIconContainer .createdTimeIcon, .gridFieldIconContainer .ratingIcon, .gridFieldIconContainer .autoNumberIcon {
    top: 1.5px;
}

.gridFieldIconContainer .autoNumberIcon svg {
    transform: scale(1.2);
}

.gridFieldIconContainer .currencyIcon {
    top: 1.9px;
    left: -1px;
}

.gridFieldIconContainer .currencyIcon svg, .gridFieldIconContainer .ratingIcon svg {
    transform: scale(1.1);
}

.gridFieldIconContainer .emailIcon {
    left: -0.5px;
}

.gridFieldIconContainer .numberIcon {
    top: 1.5px;
    left: 0px;
}

.gridFieldIconContainer .phoneNumberIcon {
    top: 1.5px;
    left: -0.5px;
}

.gridFieldIconContainer .URLIcon {
    top: 2.5px;
}

.gridFieldIconContainer .URLIcon svg {
    transform: scale(1.05);
}

/**** Field Editor style and icon position in Field editor style end ****/

.cellSelection, .rangeSelection {
    /*border:1px;*/
    /*color: #13AD6B;*/
    color: #66c377;
    border-radius: 5px;
}

/*Cell selection colour end*/

/*Field edit start*/

/*Date padding*/

.cellEditor .dateAndTimePanel .datePickerBtn.cm-editBox:last-child {
    padding: 5px 25px 4px 6.7px;
}

/*Number percent phone number*/

.cellEditor .GridNumber .cm-editBox {
    white-space: nowrap;
    overflow: hidden;
    /* max-height: 30px; */
    height: 100%;
}

.cellEditor .GridNumber {
    display: block;
    height: 31px;
}

/*Autonumber*/

.cellEditor .dateAndTimePanel .cm-editBox.autoNumber {
    text-align: right !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
    padding: 8px 7px 4px;
}

/*Rating  checkbox padding*/

.cellEditor .checkboxContainer {
    padding: 7px 0 0
}

.cellEditor .FR-panel {
    padding: 7px 7px 0;
    align-items: flex-start;
    flex-wrap: wrap;
}

.cellEditor .checkboxContainer .checkbox:checked~svg .FieldCheckboxTickRemove {
    display: block;
    fill: var(--ratingChecked);
}

.checkboxContainer .checkbox:not(:checked)~svg .FieldCheckboxTickRemove {
    display: none
}

/*Text  padding*/

.cellEditor .singleLineText .cm-editBox {
    resize: none;
    padding: 6.8px 6px 4px;
    flex: auto;
    width: 100%;
    line-height: 1.2;
}

.cellEditor .GridText.singleLineText {
    /* background: #fff;
	box-shadow: 0 0 0 2px #66c377,0 0 30px 0 rgba(35, 38, 41, 0.12); 
	border-radius: 4px;
	 margin-left: -1px;
	margin-top: -1px;
	margin-right: -1px; */
    display: flex;
    align-items: baseline;
}

.cellEditor .GridText .MSCE-selectionCellexpandIcon {
    display: none;
}

.tablesSelection.cellEditor .MSCE-selectionCellexpandIcon {
    display: none;
}
.tablesSelection.cellEditor:hover .MSCE-selectionCellexpandIcon {
    display: flex;
}
.cellEditor .GridText.singleLineText .cm-editBox {
    min-height: inherit;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    line-height: 1.2;
}

/* .level1 .cellEditor:not(.tablesSelection) .GridText.singleLineText div.cm-editBox {
    line-height: 1.35;
} */

.cellEditor .singleLineText.Text .cm-editBox {
    padding: 6px 6px 4px;
}

.cellEditor .singleLineText.Text textarea.cm-editBox{
    padding: 6.8px 6px 4px;
}
/*Sentimental*/
.tablesSelection.cellEditor .GridText.singleLineText.ZT-sentimental {
    display: flex;
    align-items: flex-start;
}
.ZT-sentimentEmojiImg{
	width: 15px;
	margin: 0 4px;
}
.cellEditor .ZT-sentimentValue {
    margin-inline-end: 1px;
}
.cellEditor .ZT-sentimentEmojiImg {
    margin: -1px 0 0;
    height: 15px;
    vertical-align: middle;
}
.cellEditor .ZT-sentimentValue:empty {
    margin: 0;
}
.cellEditor .ZT-sentimentalEdit {
    display: flex;
    justify-content: flex-start;
    padding: 7px 6px 6px 6px;
    font-size: 13px;
    align-items: flex-start;
}
.cellEditor  .ZTG-sentimentOption{
    display: block;
    flex:1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    /* margin-top: -3px; */
}
.cellEditor .singleLineText.ZT-sentimental{
    box-shadow: 0 0 0 2px #66c377, 0 0 30px 0 rgba(35,38,41,.07);
    align-items: unset;
}
.cellEditor .ZT-sentimentValue::selection{
    background: transparent;
}
.cellEditor .ZT-sentimental .FSS-DropDown{
    padding: 6px 13px 5px 2px;
}
.ZTC-cmSentimentValue{
    margin-inline-end:  1px;
}
.GV-floatingGrid .cellEditor .ZT-sentimentalEdit {
    padding: 0;
}

/* .cellEditor .GridText .cm-editBox{height: inherit;} */

/*Date time  padding,auto number*/

.cellEditor .dateAndTimePanel .cm-editBox {
    flex: initial;
    text-align: left !important;
    padding: 7.5px 7px 4px;
    height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: auto;
}

.cellEditor .dateAndTimePanel .cm-editBox:last-child {
    padding-left: 2.5px;
}

.cellEditor .nonEditField.value {
    position: absolute;
    bottom: -32px;
    background: #3f3f3f;
    padding: 7px 5px;
    box-shadow: 0 0 0 2px #3f3f3f;
    color: #f9f9f9;
    border-radius: 2px 2px 2px 2px;
    max-width: 210px;
    margin: -8px 0;
    right: 2px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: fit-content;
    white-space: nowrap;
}

.cellEditor .nonEditField.value::after {
    content: "";
    border: 6px solid transparent;
    border-left-color: #3f3f3f;
    position: absolute;
    top: -13px;
    transform: rotate(270deg);
    right: 2px;
}

.cellEditor .dateAndTimePanel .singleLineText {
    text-align: right;
    flex: auto;
    justify-content: flex-end;
}

.cellEditor .dateAndTimePanel.createdTime .cm-editBox,
.cellEditor .dateAndTimePanel.date .cm-editBox,
.cellEditor .dateAndTimePanel.modifiedTime .cm-editBox {
    white-space: pre;
    padding: 7.8px 7px 4px;
}

/*single multi padding*/

.cellEditor .FMS-container {
    padding: 1.5px 5px 0px 5px
}

.cellEditor .FSS-Container .option .name {
    padding: 2px 4.5px 0 19.5px;
    max-width: initial;
    white-space: nowrap;
}

.cellEditor .FSS-Container {
    padding: 2px;
}

.cellEditor .singleLineText.MultiSelect {
    min-height: inherit;
    /* min-height: 32px; */
    display: flex;
    align-items: baseline;
}

.cellEditor .singleLineText.MultiSelect:not(.LinkFieldMultiSelect) :not(.LUP-multiSelectOption) .option{
    margin: 3px 1px 2px;
    padding: 2.3px 5.3px;
}

.cellEditor .FMS-container .option {
    display: flex;
    margin: 3px 1px 1px;
    height: 20px;
    align-items: inherit;
    padding: 2px 5px;
    font-size: 13px;
    max-width: fit-content;
    width: calc(100% - 4px);
}

.cellEditor .GVC-multiEmail .option{
    padding: 1.5px 4.2px;
    margin-bottom: 2px;
}

.cellEditor .FMS-container.GVC-multiEmail .option .name{
    line-height: 1.2;    
}

.cellEditor .GVC-multiEmail .cb_MailPhoneAnchor{
    padding: 0 5px;
}

.cellEditor .FMS-container .option .name {
    padding-right: 5px;
    max-width: initial;
}

/*Edit all fields*/

.cellEditor .singleLineText {
    box-shadow: 0 0 0 3px #66c377, 0 0 30px 0 rgba(35, 38, 41, 0.07);
    margin-left: -2px;
    margin-top: -2px;
    margin-right: -2px;
    min-height: inherit;
    border-radius: 2px;
    background: #fff;
    margin-bottom: -2px;
    font-family: 'roboto';    
}

/*** cell validation wrong animation style start ***/
.cellEditor .singleLineText.GV-cellMove{
    position: relative;
    animation: slideLeftRight 0.75s;
}

@keyframes slideLeftRight {
    0%{
        left: -5px;
        right: 0;
    }
    15%{
        left: 0;
        right: -5px;
    }
    30%{
        left: -5px;
        right: 0;
    }
    45%{
        left: 0;
        right: -5px;
    }
    60%{
        left: -5px;
        right: 0;
    }
    75%{
        left: 0;
        right: -5px;

    }
    90%{
        left: -5px;
        right: 0;
    }    
    100%{
        right: 0;
        left: 0;
    }
}

/*** cell validation wrong animation style end ***/

/**** cell search style start ***/

.tablesSelection.cellEditor .singleLineText.GV-searchHighlightAll{
    background: #fff3d4;
}

.tablesSelection.cellEditor .singleLineText.GV-searchHighlightActive{
    background: #ffd66e;
}

.tablesSelection.cellEditor .singleLineText.GV-searchCellAll .input{
    background: transparent;
}
/**** cell search style end ***/


.tablesSelection.cellEditor .singleLineText {
    margin-left: -1px;
    margin-top: -1px;
    margin-right: -1px;
    box-shadow: 0 0 0 2px #66c377, 0 0 30px 0 rgba(35, 38, 41, 0.07);
}

.cellEditor .singleLineText.SingleSelect, .cellEditor .singleLineText.checkboxContainer,
.cellEditor .singleLineText.dateAndTimePanel .singleLineText, .cellEditor .singleLineText.MultiSelect,
.cellEditor .singleLineText.FR-panel, .cellEditor .singleLineText.AFD_attachmentUL, .cellEditor .singleLineText .singleLineText {
    box-shadow: 0 0 0 2px #66c377, 0 0 30px 0 rgba(35, 38, 41, 0.07);
}

.cellEditor .singleLineText.MultiSelect {
    min-height: inherit;
    /* min-height: 32px; */
    display: flex;
    align-items: baseline;
}

/* .cellEditor .singleLineText.MultiSelect .FMS-container, .cellEditor .singleLineText.MultiValue .FMS-container {
    padding-right: 24px;
} */

.cellEditor .singleLineText>ul {
    max-height: 300px;
    overflow-y: auto;
}

/*Field edit end*/

.floatCanvas {
    position: absolute;
    top: 0;
    left: 0;
    /*box-shadow: 5px 3px 16px 10px grey;*/
    box-shadow: 0 0 5px 1px var(--baseDarkColor);
    display: none;
    /* background-color: red; */
}

/* cellEdit datePicker */

.cellEditorContainer .zdatetimepicker {
    top: 109%;
}

.CG_pane {
    position: absolute;
    overflow: hidden;
}

.CG_vScroll {
    background-color: #fafafa;
    overflow-y: scroll;
}

.CG_hScroll {
    background-color: #F3F3F3;
    overflow-x: auto;
}

.CG_pane .CG_selectAll {
    border-width: 0px 1px 1px 0px;
    border-color: #e3e4e3;
    border-style: solid;
    background-position: 20px 4px;
    cursor: se-resize;
    transition: .3s ease;
    opacity: 0.8;
}

.CG_pane .CG_selectAll:hover {
    opacity: 1;
}

.CG_pane .CG_selectAll:before {
    width: 20px;
    height: 20px;
    display: inline-block;
    float: right;
    cursor: inherit;
    position: relative;
    background-position: -146px -48px;
    content: '';
}

.CG_pane.CG_dummy {
    background: #f3f4f3;
}

.CG_scroller {
    position: absolute;
}

.CG_selection_div {
    position: absolute;
}

.CG_floatCanvas {
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 5px 3px 16px 10px grey;
    display: none;
    background-color: red;
}

.CG_resiezeField {
    cursor: col-resize;
}

.CG_resiezeRecord {
    cursor: row-resize;
}

.CG_FCB-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.CG_FCB-label input {
    z-index: -1;
    width: 0;
    height: 0;
    margin: 0;
}

.CG_FCB-label input[type="checkbox"]+svg .CG_FCB-checked {
    display: none;
}

.CG_FCB-label input[type="checkbox"]:checked+svg .CG_FCB-checked {
    display: block;
}

.CG_checkboxContainer {
    justify-content: center;
    background: #fff;
    cursor: pointer;
    align-items: center;
}

.CG_FFO-panel .CG_FSS-find-option {
    background-color: var(--ssoval);
    position: relative;
    padding: 3px 7px 0;
}

.CG_FR-panel {
    align-items: center;
}

.CG_FR-label {
    cursor: pointer;
    line-height: 0;
}

.CG_FR-label input {
    display: none;
}

.CG_FR-label input[type="checkbox"]:checked+svg {
    fill: var(--main-color);
}

.CG_FR-label input[type="checkbox"]+svg {
    fill: #ccc
}

.CG_flex-col {
    flex-direction: column;
}

.CG_short {
    min-height: 30px;
}

.CG_medium {
    min-height: 54px;
}

.CG_tall {
    min-height: 86px;
}

.CG_singleLineText {
    flex: 1;
    min-width: 0;
    height: inherit;
    display: flex;
}

.CG_singleLineText .CG_value {
    font-size: 13px;
    flex: 1;
    margin-top: 1px;
    color: #000;
    background: #fff;
}

.CG_singleLineText .CG_input {
    outline: none;
    border: none;
    margin-top: 0px;
    color: #333;
}

.CG_singleLineText .CG_input:first-child, .CG_singleLineText .CG_input:last-child {
    width: 50%;
}

.CG_singleLineText .CG_input:only-child {
    width: 100%;
}

.CG_expandIcon {
    padding: 6px;
    margin-top: -1px;
    align-self: center;
}

.CG_longTextValue {
    flex: 1;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: auto;
    padding: 6px;
    padding-right: 8px;
    font-size: 13px;
    border: none;
    resize: none;
    outline: none;
}

.CG_url {
    color: #2d7ff9;
    opacity: 1;
}

.CG_includeIcon {
    align-self: flex-end;
    padding: 5px;
}

.CG_longTextContainer {
    background: #fff;
    min-height: 200px;
    width: inherit;
    display: flex;
    flex-direction: column;
}

.CG_FMS-container {
    flex: 1;
    flex-wrap: wrap;
    padding: 0px 3px;
    background: #fff;
    display: flex;
    margin: 0;
    overflow: hidden;
}

.CG_FMS-container .CG_option {
    padding: 0px 5px;
    margin: 6px 2px;
    border-radius: 10px;
    align-items: center;
    height: 19px;
    display: flex;
    list-style: none;
}

.CG_FMS-container .CG_option .CG_name {
    padding: 0px 5px;
}

.CG_FMS-container .CG_option .CG_closeButton {
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.CG_FMS-container .CG_option .image {
    padding: 0px 5px;
}

.CG_FMS-plusButton {
    padding: 0px 5px;
    margin: 4px;
    align-self: flex-start;
    cursor: pointer;
    list-style: none;
    position: relative;
    top: 4px;
}

.CG_FFO-panel {
    position: absolute;
    top: 102%;
    width: 300px;
    box-shadow: 0 2px 20px 7px rgba(29, 23, 37, 0.09);
    background: #fff;
}

.CG_FFO-panel .CG_input {
    width: 100%;
    border: none;
    font-size: 15px;
    padding: 10px 8px;
    border-bottom: 1px solid #f4f0fd;
    box-sizing: border-box;
    outline: none;
}

.CG_FFO-panel .CG_container {
    min-height: 30px;
    max-height: 200px;
    overflow-y: auto;
    padding: 0px;
    list-style: none;
    margin: 0;
}

.CG_FFO-panel .CG_container:empty::before {
    content: 'No Option';
    display: flex;
    justify-content: center;
    color: #929292;
    font: 500 14px system-ui;
}

.CG_FFO-panel .CG_option {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
}

.CG_FFO-panel .CG_container .CG_optionContainer {
    padding: 10px;
    cursor: pointer;
    display: flex;
}

.CG_FFO-panel .CG_container .CG_optionContainer:hover {
    background: #f8f6fb;
}

.CG_FSS-Container {
    flex: 1;
}

.CG_FSS-Container .CG_option {
    padding: 1px 5px;
    margin: 6px;
    border-radius: 7px;
    align-items: center;
    display: inline-block;
}

.CG_FSS-Container .CG_option .CG_name {
    padding: 0px 5px;
}

.CG_FSS-DropDown {
    align-self: center;
    padding: 0px 8px;
}

.CG_blankDom {
    min-width: 70px;
    padding: 18px 15px;
    margin: 0px;
}

.CG_blankDom:hover {
    background: #f8f6fb;
}

/*.findAnOption .CG_blankDom:hover {	background: #eee;}*/

.CG_selected {
    box-shadow: 0 0 0 2px #2d7ff9;
    border-radius: 3px;
}

.CG_grey {
    color: #7b7171 !important;
}



.CG_emailCheckbox {
    z-index: -1;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
}

.CG_emailAnchor {
    color: #2d7ff9;
    margin: 0px 14px;
}

.CG_emailInput {
    width: 0;
    padding: 0;
    border: none;
    flex: 0;
}

.CG_emailInput:focus {
    padding: 13px;
    flex: 1;
}

.CG_emailInput:focus~.CG_emailAnchor {
    display: none;
}

.CG_emailInput:focus~.CG_emailCheckbox {
    display: none;
}

.CG_emailCheckbox:focus~.CG_emailAnchor {
    display: none;
}

.CG_emailContainer {
    display: flex;
    flex: 1;
    align-items: center;
}

.CG_dialog {
    position: absolute;
    z-index: 2;
}

.CG_hide {
    display: none;
}

.CG_dualTypeComponentContainer {
    display: flex;
    flex: 1;
}

.CG_findAnItemCheckboxOption {
    list-style: none;
    width: 100%;
}

.CG_findAnItemCheckboxOption .CG_labelWrapper {
    display: inline-flex;
}

.CG_active {
    background-color: gray;
}

.CG_Layer {
    position: absolute;
}

.CG_mouseFollower {
    pointer-events: all;
    height: 30px !important;
    z-index: 3;
}

.CG_fltIcn {
    position: absolute;
    width: 12px;
    height: 12px;
    top: 50%;
    transform: translateY(-50%);
    right: 3px;
    margin-top: -1px;
    background: white;
    cursor: pointer;
}

.CG_selection {
    position: absolute;
    pointer-events: none;
}

.CG_top, .CG_bottom, .CG_left, .CG_right {
    position: absolute;
    border-style: solid;
    border-width: 0px;
}

.CG_top, .CG_bottom {
    width: 100%;
}

.CG_left, .CG_right {
    height: 100%;
}

.CG_bottom {
    border-bottom-width: 1px;
    bottom: 0;
}

.CG_top {
    border-top-width: 1px;
    top: 0;
}

.CG_left {
    border-left-width: 1px;
    left: 0;
}

.CG_right {
    border-right-width: 1px;
    right: 0;
}

.CG_filler {
    color: inherit;
    position: absolute;
    background: currentColor;
    pointer-events: none;
    opacity: 0.10;
    height: 100%;
    width: 100%;
}

.CG_edges {
    pointer-events: none;
}

.CG_edges, .CG_corners, .CG_edges>div, .CG_corners>div {
    color: inherit;
}

.CG_corners>.tl, .CG_corners>.bl, .CG_corners>.tr, .CG_corners>.br {
    border: solid;
    margin: -3px;
    position: absolute;
    pointer-events: all;
    border-width: 4px;
    transition: margin .2s;
    border-radius: 50%;
    box-shadow: 0 0 0 1px white;
}

.CG_corners>.tl, .CG_corners>.br {
    cursor: nwse-resize;
}

.CG_corners>.tr, .CG_corners>.bl {
    cursor: nesw-resize;
}

.CG_corners>.tr, .CG_corners>.tl {
    top: 0;
}

.CG_corners>.br, .CG_corners>.bl {
    bottom: 0;
}

.CG_corners>.tr, .CG_corners>.br {
    right: 0;
}

.CG_corners>.tl, .CG_corners>.bl {
    left: 0;
}

.CG_cellSelection, .CG_rangeSelection {
    color: #13AD6B;
}

.CG_rangeSelection>.CG_corners>.br {
    cursor: crosshair;
}

.CG_rangeSelection .CG_top {
    border-top-width: 1px;
}

.CG_rangeSelection .CG_bottom {
    border-bottom-width: 1px;
}

.CG_rangeSelection .CG_left {
    border-left-width: 1px;
}

.CG_rangeSelection .CG_right {
    border-right-width: 1px;
}

/* temporary fix for rangeselection edges */

.CG_Layer.CG_rangeSelection .CG_edges {
    display: none;
}

.CG_CM-ul {
    list-style: none;
    padding: 6px 0px;
    border: 1px solid gray;
    margin: 0px;
    background-color: #616161eb;
    border-radius: 5px;
    z-index: 1;
    position: fixed;
    outline: 0px;
}

.CG_CM-li {
    font-family: sans-serif;
    color: white;
    min-width: 50px;
    font-size: 15px;
    padding: 5px 10px;
    margin: 0px;
    cursor: pointer;
}

.CG_active {
    background-color: gray;
}

html {
    --main-color: #9c27b0;
    --main-color3: RGB(235, 211, 239);
    --main-color2: RGB(240, 222, 243);
    --main-color80: RGB(175, 82, 191);
}

#CG_menu {
    background-color: var(--main-color);
}

.CG_selectAll {
    background-color: var(--main-color3);
}

.CG_color-picker {
    width: 18px;
    height: 18px;
    border: 1px solid var(--main-color80) !important;
}

/*Record drag and drop*/

.GV-recordDrag img {
    /* border: 1px solid #c9c9c9;
    border-radius: 3px; */
    width: auto;
}

.GV-recordDrag {
    z-index: 3;
    width: 100%;
    position: relative;
}

.GV-recordDrag:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 30px;
    top: 0;
    left: -60px;
    pointer-events: all;
    cursor: grabbing;
}

.GV-recordDrag:nth-child(2) {
    top: -11px;
    z-index: 2;
    left: 5px;
    position: absolute;
}

.GV-recordDrag:nth-child(3) .GV-recordDragImgPanel {
    box-shadow: 0 0 30px 0 rgb(0 0 0 / 20%);
}

.GV-recordDrag:nth-child(3) {
    z-index: 1;
    top: -22px;
    left: 10px;
    position: absolute;
}

.GV-recordDragImgPanel {
    background: #fff;
    cursor: grabbing;
    border-radius: 3px;
    border: solid 1px #c9c9c9;
    overflow: hidden;
    /* max-width: 700px; */
    height: 30px;
    z-index: 1;
    position: relative;
}

.GV-outerRecordDrag {
    width: 100%;
    animation: scaleIn .3s;
    z-index: 1;
}

.GV-DragAndDropLine {
    border-top: 1px solid var(--baseDarkColor);
    position: absolute;
    top: 14px;
    width: 100%;
    /* box-shadow: 0px 0 0px 2px #e2d8fd; */
    cursor: grabbing;
}

.GV-DragAndDropLine:after {
    content: "";
    width: 24px;
    height: 5px;
    background: var(--baseDarkColor);
    position: absolute;
    top: -3px;
    border-radius: 3px;
    left: 28px;
}

.GV-recordDragCountDom {
    width: 700px;
    position: absolute;
    /* bottom: 3px; */
    z-index: 4;
    /* left: -3px; */
}

span.GV-recordDragCountspan {
    position: absolute;
    /* left: 25px; */
    width: 20px;
    height: 20px;
    background: #d76062;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    /* bottom: -14px; */
}

.GV-dragDropIconContainer {
    /*width  : 10px;
    height : 19px;*/
    padding: 0 5px;
    padding-right: 3px;
    z-index: 1;
    /*temp fix for grid left pane*/
}

.GV-dragDropIcon {
    fill: #888;
    cursor: grab;
    /*margin: 0 5px;
    margin-right: 3px;*/
    order: 1;
}

/*Field drag and drop*/
.GV-fieldDragContainer {
    position: absolute;
    cursor: grabbing;
    pointer-events: all;
    /* width: 160px;
    overflow: hidden; */
    box-shadow: 0 0 20px 0 rgba(51, 51, 51, 0.1);
}

.GV-fieldDragContainer {
    border-radius: 8px;
    position: relative;
    z-index: 1;
    box-shadow: 0px 0 0px 2px #d5d4d9, 0px 0px 20px 0px rgba(36, 39, 46, 0.18);
    border: 2px solid rgb(165, 165, 165);
    ;
    border-radius: 8px;
    animation: scaleIn .3s;
    z-index: 2;
}

.GV-fieldDragContainer canvas {
    border-radius: 8px;
}

@keyframes scaleIn {
    from {
        transform: scale(1.3);

    }

    to {
        transform: scale(1);
    }
}

.GV-fieldDragAndDropLine {
    border-left: 1px solid var(--baseDarkColor);
    position: absolute;
    height: 100%;
    left: -16px;
}

.GV-fieldDragAndDropLine:after {
    content: "";
    width: 5px;
    height: 24px;
    background: var(--baseDarkColor);
    position: absolute;
    top: 3px;
    border-radius: 3px;
    left: -3px;
}

/*Record Checkbox*/

.GV-rowCheckboxPanel {
    order: 3;
    display: flex;
    align-items: center;
    margin-right: 5px;
    margin-left: 2px;
    margin-top: 3px;
    z-index: 1;
    /*temp fix for grid left pane*/
}

.GV-rowCheckboxPanel input[type="checkbox"] {
    z-index: -1;
    position: absolute;
    opacity: 0;
}

.GV-rowselect {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    border: 1px solid #ccc;
    display: inline-block;
    position: relative;
    background-color: white;
}

.GV-rowselect:hover {
    border-color: #aaa;
    cursor: pointer;
}

.GV-rowCheckboxPanel input[type="checkbox"]:checked+.GV-rowselect {
    border-color: transparent;
}

.GV-selectAllPanel {
    margin: auto;
    align-items: center;
    justify-content: center;
}

.GV-selectAllPanel .GV-selectAllCheckbox {
    z-index: -1;
    position: absolute;
    opacity: 0;
}

.GV-selectAllPanel .GV-rowcheckedIcon {
    display: none;
}

.GV-selectAllPanel .GV-selectAllCheckbox:checked+.GV-rowselect {
    border: transparent;
}

.GV-selectAllPanel .GV-selectAllCheckbox:checked+.GV-rowselect .GV-rowcheckedIcon {
    display: block;
}

.GV-selectAllPanel .GV-selectAllCheckbox:indeterminate+.GV-rowselect:after {
    content: "";
    position: absolute;
    width: 6px;
    height: 2px;
    background: #9c9c9c;
    margin: auto;
    right: 0;
    left: 0;
    top: 5px;
    border-radius: 3px;
}

.GV-selectAllPanel .GV-rowselect {
    width: 14px;
    height: 14px;
}


.GV-rowCheckboxPanel .GV-rowcheckedIcon {
    display: none
}

.GV-rowCheckboxPanel input[type="checkbox"]:checked+.GV-rowselect .GV-rowcheckedIcon {
    display: block;
    margin: -1px 0 0 -1px;
}

/*Edit row selection*/

.GV-rowEditSelection {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #61be6a;
    box-shadow: 0 0 30px 0 rgba(35, 38, 41, 0.12);
    display: none;
}

/*Collabortor start*/

.cellEditor .FSS-Container.FCollaborator, .cellEditor .FSS-Container, .cellEditor .FMS-container {
    display: flex;
    flex-wrap: wrap;
    height: fit-content;
    width: calc(100% - 25px);
}

.cellEditor .FSS-Container.FCollaborator {
    padding: 2px 5px 0px 4px;
}

.cellEditor .FSS-Container.FCollaborator .option .closeButton {
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    /* transform: rotate(135deg); */
    fill: #585858;
    background: inherit;
    border: none;
}

/*Collabortor end*/

/* floatgrid   start*/

.GV-floatingGrid {
    position: relative;
    box-sizing: border-box;
    left: 0px;
    top: 0px;
    display: block;
    z-index: 1;
    /* box-shadow: 0 0 0 1px #4c93fe, 0 0 13px -6px #5a5a5a; */
}
.GV-floatingGrid .CG_pane:nth-child(2) .CG_scroller,.GV-floatingGrid .CG_scroller .CG_selection_div{
    border:1.5px solid #4c93fe;
    box-shadow: 0 0 13px -6px #5a5a5a;
}
.GV-floatingGrid .CG_scroller .CG_selection_div{
    border-left: none;
}
.GV-floatingGrid .CG_pane:nth-child(2) .CG_scroller,.GV-floatingGrid .CG_pane:nth-child(3) .CG_scroller .CG_selection_div{
    border-right: none
}
.GV-floatingGrid .floatSelectionDiv {
    position: absolute;
    height: inherit;
    width: inherit;
    top: 0px;
    z-index: 2;
}

/*Float title*/

.GV-floatTitlePanel {
    background: #4c93fe;
    position: absolute;
    bottom: -30px;
    border-radius: 0px 0px 4px 4px;
    padding: 5px;
    display: flex;
    align-items: center;
    z-index: 1;
}

.GVF-titleIcon {
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    fill: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.GVF-reorderTitle, .GVF-filterTitle {
    margin: 0 5px;
    color: #fff;
    /* display: none; */
}

/* .GVF-reordered .GVF-reorderTitle {
    display: block
}

.GVF-filtered .GVF-filterTitle {
    display: block;
}

.GVF-reorderIcon, .GVF-filterIcon {
    display: none;
}

.GVF-filtered .GVF-filterIcon {
    display: block
}

.GVF-reordered .GVF-reorderIcon {
    display: block;
}

.GVF-filtered .GVF-filterTitle-info {
    display: block
}

.GVF-reordered .GVF-reorderTitle-info {
    display: block;
} */

.GVF-reorderTitle-info, .GVF-filterTitle-info {
    fill: #fff;
    cursor: pointer;
    width: 14px;
    height: 19px;
    display: none;
}
/*Float delete*/
.GVFG-deletePanel.GV-floatingGrid .CG_pane:nth-child(2) .CG_scroller,.GVFG-deletePanel.GV-floatingGrid .CG_scroller .CG_selection_div{
    border-color: #d76062
}
.GV-floatTitlePanel.GVF-deleted{
    background: #d76062
}
/* floatgrid   end*/

.CG_cellSelection, .CG_rangeSelection {
    /*border:1px;*/
    color: #13AD6B;
    /* z-index:2; */
}

/* User presence start */



.GV-userPresence:before {
    content: attr(data-before);
    right: 0px;
    position: absolute;
    background-color: var(--user-presence-selection-pseudo-bgcolor);
    color: var(--user-presence-selection-pseudo-textcolor);
    font-size: 11px;
    padding: 1px 22px 1px 6px;
    opacity: 0;
    border-radius: 0 0 3px 3px;
    /* transform: translateY(-50%); */
    z-index: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    top: 0;
    max-width: calc(100% - 28px);
    width: 50px;
    transition: all 0.1s ease;
    height: 13px;
}

.GV-userPresence:after {
    content: '';
    height: 15px;
    width: 15px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    right: 0px;
    border-radius: 0 0px 3px 0px;
    opacity: 0;
    background-image: var(--user-presence-selection-pseudo-user-image-url);
    /* transform: translate(11px, -50%); */
    z-index: 2;
    border-left: 2px solid #fff;
    top: 0;
    background-size: cover;
    background-position: center;
    /* box-shadow:2px 4px 0 -2px #fff */
}

.GV-userPresence:hover:after {
    opacity: 1;
}

.GV-userPresence:hover:before {
    opacity: 1;
}

.GV-userPresence {
    box-shadow: inset 0 0 0 1.6px var(--user-presence-selection-pseudo-bgcolor);
    border-radius: 2px;
}

.SPUP-color {
    background: #e7565d;
    width: 15px;
    height: 55px;
    position: absolute;
    border-radius: 5px 0 0 5px;
}

.SPUP-img img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
    position: relative;
    margin: 4px 10px 0px;
    border: 1px solid #fff;
}

.SPUP-panel {
    background: #fff;
    border-radius: 5px;
    margin: 0 15px;
    display: flex;
    height: 55px;
    align-items: center;
}

.SPUP-name {
    font-weight: 500;
    margin-bottom: 5px;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.SPUP-options {
    color: #858585;
    font-size: 12px;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.SPUP-img img:after {
    content: "";
    width: 7px;
    height: 7px;
    background: #30c25f;
    position: absolute;
    right: 10px;
    bottom: 3px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
}

.SPUP-img:after {
    position: absolute;
    border: 1px dashed red;
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    top: 3px;
    left: 9px;
    bottom: 3px;
    right: 9px;
}

.SPUP-img {
    position: relative;
}

/* User presence end */

.CG_freezePane .CG_selection_div {
    border-right: 1px solid #a2888840;
}

/* field warning css starts */
.contextMenuDropDown.fieldWarningSign {
    right: 24.6px;
    top: 9.5px;
    cursor: pointer;
    opacity: 0;
}

.fieldWarningSignComponent {
    /*	position            : absolute;
	bottom              : -32px;*/
    background: #3f3f3f;
    padding: 7px 5px;
    box-shadow: 0 0 0 2px #3f3f3f;
    color: #f9f9f9;
    border-radius: 2px 2px 2px 2px;
    /*max-width           : 111px;*/
    /*margin              : -8px 0;*/
    /*right               : 2px;*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 13px;
    flex: 1;
}

/* field warning css ends */
.CG_mouseFollowerHover {
    opacity: 0.1;
    pointer-events: all;
    background-color: #9298A0;
}

.rowPane .CG_mouseFollowerHover {
    width: 100% !important;
}

/*Summarybar start*/
.SB-dropPanel {
    width: 195px;
    margin-top: -4px;
}

.SB-dropPanel .option {
    position: relative;
}

.SB-dropPanel .option:after {
    width: 3px;
    height: 6px;
    content: "";
    position: absolute;
    transform: rotate(45deg);
    top: 14px;
    right: 15px;
    border-color: #fff;
    border-style: solid;
    border-width: 0 1px 1px 0;
    visibility: hidden;

}

.SB-dropPanel .option:before {
    background: #6dbe5b;
    width: 14px;
    height: 14px;
    position: absolute;
    display: flex;
    border-radius: 50%;
    right: 10px;
    content: "";
    visibility: hidden;
}

.SB-dropPanel .option.active:after, .SB-dropPanel .option.active:before {
    visibility: visible
}

.SB-dropPanel .option:first-child:after, .SB-dropPanel .option:first-child:before {
    visibility: hidden
}

/*Summarybar end*/

/* Record Count */
.GV-footerPane {
    /* max-width: 100px; */
    /* width: auto !important; */
    overflow: unset;
    transition: width .0.5s;
    position: relative;
    z-index: 1;
}

.GV-footerPane:hover {
    width: fit-content !important;
    /* width: auto !important; */
    transition: width .0.5s;
}

.GV-rowCountMainCtr {
    width: inherit;
    height: calc(100% - 2px);
    display: flex;
    align-items: center;
    background: #f6f6f6;
    position: relative;
    top: 1px;
    border-right: 1px solid transparent;
}

.GV-recordsLabel {
    /* background-color: #f6f6f6; */
    padding: 0 5px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.GV-rowCountVal {
    /* width: 78px; */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 6px;
}

.GV-rowCountMainCtr:hover .GV-rowCountVal {
    width: 100%;
    transition: all 0.2s;
    max-width: 260px;
}

.GV-rowCountMainCtr:hover {
    border-color: #e2e2e2;
    box-shadow: 8px 0 10px -6px #cccc;
    /* clip-path: inset(0px -15px 0px 0px); */
    transition: all 0.6s;
}

/* Record Count Ends */

/**** mouseover grid style start *****/

.CG_pane .mouseFollower_editor {
    position: absolute;
    overflow: hidden;
}

.CG_pane .mouseFollower_editor .cellEditor {
    height: 100%;
}

.CG_pane .mouseFollower_editor .cellEditor .FR-panel {
    /*display : block;*/
}

.CG_pane .mouseFollower_editor .FR-label.ratingLightColor svg {
    fill: var(--ratingChecked);
    opacity: 0.4;
}

.CG_pane .mouseFollower_editor .FR-label.ratingLightColor input[type="checkbox"]:checked+svg {
    fill: var(--ratingChecked);
    opacity: 1;
}

.tablesSelection {
    width: 100%;
    background: #fff;
    position: absolute;
    min-height: inherit;
    z-index: 1;
}


.mouseFollower_editor .cellEditor {
    background: transparent;
}

.mouseFollower_editor .cellEditor .checkboxContainer {
    padding: 8px 0 0;
}

.mouseFollower_editor .checkboxContainer .FR-label input[type="checkbox"]~svg {
    background-color: #fff;
}

.mouseFollower_editor .cellEditor .singleLineText.checkboxContainer, .mouseFollower_editor .cellEditor .singleLineText.FR-panel {
    box-shadow: none;
    background: transparent;
}

.mouseFollower_editor .cellEditor .FR-panel {
    padding: 6px 6px 0;
    margin: 0;
    overflow: hidden;
    flex-wrap: nowrap;
}

/***** Multiselection hover and select style start *****/


.MSCE-selectionCellexpandIcon {
    position: absolute;
    top: 5px;
    right: 2px;
    bottom: 0;
    background: #6dbf5c;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    fill: #fff;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    box-shadow: 0 1px 2px 0px rgba(0,0,0,0.1);
    border:1px solid #fff;
}

.MSCE-selectionCellexpandIcon .icon {
    display: flex;
    align-items: center;
}

.tablesSelection .MSCE-selectionCellexpandIcon {
    top: 4px;
    right: 4px;
}

.cellEditor .singleLineText.MultiSelect.expanded .MSCE-selectionCellexpandIcon, .cellEditor .singleLineText.SingleSelect.expanded .MSCE-selectionCellexpandIcon, .cellEditor .singleLineText.GridText.expanded .MSCE-selectionCellexpandIcon {
    display: none;
}

.cellEditor .singleLineText.MultiValue .option.moreOption, .cellEditor .singleLineText.MultiSelect .option.moreOption, .cellEditor .singleLineText.SingleSelect .option.moreOption {
    cursor: pointer;
    background: none;
    display: flex;
    align-items: flex-end;
    height: auto;
    padding-left: 0;
    padding-right: 0;
    margin: 3px 2px 2px 3px;
    overflow: initial;
}

.cellEditor .MultiSelect.Lookup .option.moreOption {
    margin-bottom: 0;
    padding-bottom: 1px;
    padding-right: 2px;
    height: 21px;
}

.cellEditor .LF-multiSelect {
    padding-left: 6px;
}


.cellEditor .LF-multiSelect .option {
    padding-left: 0;
    padding-right: 0;
    padding-top: 2.5px;
    margin-right: 5px;
}

.tablesSelection.cellEditor :not(.Lookup) .LF-multiSelect .option{
    cursor: pointer;    
}

.cellEditor .singleLineText.LinkFieldMultiSelect .option.moreOption {
    margin-left: -1px;
}

.cellEditor .singleLineText.MultiValue .MS-ellipseIcon, .cellEditor .singleLineText.MultiSelect .MS-ellipseIcon, .cellEditor .singleLineText.SingleSelect .MS-ellipseIcon {
    padding: 0 5px;
    top: 1px;
    align-items: end;
    display: flex;
    background-color: #efefef;
    border-radius: 2px;
    max-width: 22px;
    width: 100%;
}

.cellEditor .AFD_attachment .AFD_attachmentUL .option.moreOption {
    cursor: pointer;
    background: none;
    display: flex;
    align-items: flex-end;
    height: auto;
    padding-right: 2px;
}

.cellEditor .AFD_attachment .AFD_attachmentUL .MS-ellipseIcon {
    padding: 0 5px;
    top: 0;
    align-items: end;
    display: flex;
}

.MS-ellipseIcon {
    display: flex;
    align-items: flex-end;
}

.MS-ellipseIcon svg {
    transform: rotate(90deg);
}

.tablesSelection.cellEditor .singleLineText.dateAndTimePanel {
    box-shadow: none;
}

.tablesSelection.cellEditor .GridText.singleLineText .cm-editBox {
    /* height : 30px; */
    padding: 6.5px 6px 6px 6px;
}

.tablesSelection .Text .value {
    text-overflow: ellipsis;
    overflow: hidden;

}

.tablesSelection .Text {
    margin: 0;
}

/***** Multiselection hover and select style end *****/
/**** mouseover grid style end *****/

/***** Table selection style start ****/
.tablesSelection.cellEditor .FSS-DropDown {
    padding: 6.5px 8px;
}
.tablesSelection.cellEditor .ZT-sentimental .FSS-DropDown {
    padding: 0px 8px;
}
.tablesSelection.cellEditor .FR-panel {
    padding: 7px 7px 0;
    flex-wrap: nowrap;
    overflow: hidden;
}

.tablesSelection.cellEditor .GridText.singleLineText {
    padding: 8px 6px 6px 7px;
    display: block;
}

.tablesSelection.cellEditor .singleLineText.dateAndTimePanel {
    margin-left: -1.8px;
    margin-right: -1.8px;
    margin-top: -1.8px;
}



.cellEditor .date .singleLineText {
    justify-content: flex-start;
}

.tablesSelection.cellEditor .CalenderFieldIcon {
    right: 5px;
    top: 5px;
}

.cellEditor .CalenderFieldIcon {
    position: absolute;
    right: 4px;
    top: 4px;
    cursor: pointer;
    fill: #888;
}

.CalenderFieldIcon:hover {
    fill: #000;
}

.tablesSelection.cellEditor .GridText.singleLineText .cm-editBox {
    padding: 0;
    min-height: 0;
    height: auto;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.2;
}
.tablesSelection.cellEditor .GridText.Email.singleLineText .cm-editBox,.tablesSelection.cellEditor .GridText.URL.singleLineText .cm-editBox{
    -webkit-line-clamp: inherit;   
    white-space: inherit;
}
/* .tablesSelection.cellEditor .Text.singleLineText .cm-editBox{
    padding-right: 24px;
} */

.tablesSelection.cellEditor .GridText.singleLineText.URL .cm-editBox, .tablesSelection.cellEditor .GridText.singleLineText.Email .cm-editBox {
    word-break: break-all;
}

.tablesSelection.cellEditor .GridText.singleLineText .cm-editBox.truncate-1-line {
    -webkit-line-clamp: 1;
}

.tablesSelection.cellEditor .GridText.singleLineText .cm-editBox.truncate-3-line {
    -webkit-line-clamp: 3;
}

.tablesSelection.cellEditor .GridText.singleLineText .cm-editBox.truncate-5-line {
    -webkit-line-clamp: 5;
}

.tablesSelection.cellEditor .GridText.singleLineText .cm-editBox.truncate-7-line {
    -webkit-line-clamp: 7;
}

.tablesSelection.cellEditor .GridNumber .cm-editBox {
    text-overflow: ellipsis;
    padding-top: 6.8px;
}

.tablesSelection.cellEditor .PhoneNumber a.cm-editBox {
    padding: 0;
    display: inline;
}

.tablesSelection.cellEditor .PhoneNumber .cm-editBox {
    text-align: right;
}

.tablesSelection.cellEditor .GridText.singleLineText.URL a.cm-editBox, .tablesSelection.cellEditor .GridText.singleLineText.Email a.cm-editBox {
    width: fit-content
}

.tablesSelection.cellEditor .singleLineText.formula .cm-editBox {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.tablesSelection.cellEditor .GridText.singleLineText.Email,.tablesSelection.cellEditor .GridText.singleLineText.URL{
    padding-right: 25px;
}

.tablesSelection.cellEditor .LF-multiSelect:empty:after{
    display: none;
}

.tablesSelection.cellEditor .Currency.accounting, .cellEditor .Currency.accounting{
    display: flex;
    justify-content: space-between;
    padding: 8px 7px 5px 10px;
}

.tablesSelection.cellEditor .Currency.accounting .input, .cellEditor .Currency.accounting .input{
    width: auto;
    padding: 0;
    min-width: 8px;
}

.tablesSelectionEdit .cellEditorContainer {
    width: 100%;
    position: unset;
}

/***** Table selection style end ****/

/*View switch and table loader start*/
.ZT-primeView{
    animation: fadeIn 1s;
}

@keyframes fadeIn {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.ZT-primeView .ZT-loader,.VC-overlay .ZT-loader,.ZT-mainView .ZT-loader {
    position: relative;            
    background: #f7f7f7;
}
.VC-overlay .ZT-loader {
    position: absolute;
}
/* .SidePanelOpen .ZT-primeView .ZT-loader {
    width: calc(100% - 340px);
} */

/*View switch and table loader end*/

/*Field section bg color*/
.GVH-selectionBG {
    background: #e3e3e3;
}

/**** date picker style start ****/
.cellEditor .date .zinputfield, .cellEditor .date .zinputfield__spinbutton, 
.date .zinputfield, .date .zinputfield.has-focus, .date .zinputfield__spinbutton{
    border: 0;
}

.cellEditor .date .zinputfield__icon.zbutton__icon, .cellEditor .date .zinputfield__clearbutton, .cellEditor .date .zinputfield__spinbuttonpane,
.RV-fieldPanel .date .zinputfield__icon.zbutton__icon, .date .zinputfield__clearbutton, .date .zinputfield__spinbuttonpane {
    display: none;
}

.cellEditor .date .zinputfield__textbox,
.RV-fieldPanel .date .zinputfield__textbox {
    text-align: var(--dateTextAlign);
    padding-right: 25px;
    padding-top: 6.5px;
    padding-left: 6px;
}

.date .zinputfield__textbox{
    width: 100%;
}

.FD-dropInput .dualTypeComponentContainer .date:last-child{
    margin-left: -1px;
}

/**** date picker style end ****/

/*** view only style start ***/
/* body.level1 .TB-logBtn:after{
    display: none;
} */
/*** view only style end ***/
/*Grid selection state text selection bg hide*/
.tablesSelection span::selection,.tablesSelection a::selection,.tablesSelection textarea::selection,.tablesSelection img::selection,.tablesSelection div::selection{
    background: none;
}

/*Loader*/
.cellEditor .singleLineText .ZT-circleLoader{
    margin-top: 5px;
    margin-right: 5px;   
}
.cellEditor .singleLineText .FMS-plusButton .ZT-circleLoader{
    margin-top: 1px;
    margin-right: 0px;
}
.ZT-fieldLoader .ZTCL-active{
    top:7px;
}
/*Error*/
.ZT-errorShadow{
    box-shadow:0 0 0 3px #E46864, 0 0 30px 0 rgb(35 38 41 / 7%);
}

/*** copy cut paste link tag style start ***/
.ZT-copyClipboard a{
    color: unset;
}
.ZT-cutClipboard a{
    color: unset;
}
/*** copy paste link tag style end ***/

/*** Common layout styles ***/
.ZDC-left {
  float: left;
}
.ZDC-right {
  float: right;
}
.ZDC-top-margin {
  margin-top: var(--spacing-normal);
}
.ZDC-top-margin-small {
  margin-top: var(--spacing-base);
}
.ZDC-top-margin-large {
  margin-top: var(--spacing-large);
}
.ZDC-bottom-margin {
  margin-bottom: var(--spacing-normal);
}
.ZDC-bottom-margin-small {
  margin-bottom: var(--spacing-base);
}
.ZDC-bottom-margin-large {
  margin-bottom: var(--spacing-large);
}
.ZDC-left-margin {
  margin-left: var(--spacing-normal);
}
.ZDC-left-margin-small {
  margin-left: var(--spacing-base);
}
.ZDC-left-margin-large {
  margin-left: var(--spacing-large);
}
.ZDC-right-margin {
  margin-right: var(--spacing-normal);
}
.ZDC-right-margin-small {
  margin-right: var(--spacing-base);
}
.ZDC-right-margin-large {
  margin-right: var(--spacing-large);
}
.ZDC-no-margin {
  margin: 0;
}
.ZDC-margin-small {
  margin: var(--spacing-base);
}
.ZDC-margin-normal {
  margin: var(--spacing-normal);
}
.ZDC-margin-medium {
  margin: var(--spacing-medium);
}
.ZDC-margin-large {
  margin: var(--spacing-large);
}
.ZDC-padding-small {
  padding: var(--spacing-base);
}
.ZDC-padding-normal {
  padding: var(--spacing-normal);
}
.ZDC-padding-medium {
  padding: var(--spacing-medium);
}
.ZDC-padding-large {
  padding: var(--spacing-large);
}
/*** Used to clearfix the floats ***/
.ZDC-overflow:after {
  content: "";
  display: table;
  clear: both;
}
/***  Flex Classes ***/
.ZDC-flex {
  display: flex;
}
.ZDC-vl-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ZDC-flex-lt {
  justify-content: left;
}
.ZDC-flex-rt {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.ZDC-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ZDC-flex-wrap {
  flex-wrap: wrap;
}
.ZDC-valign-middle {
  display: flex;
  align-items: center;
}
/*** Grid Classes ***/
.ZDC-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
.ZDC-grid-3cl {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}
/*** Icon styles ***/
.svg-icon-holder {
  position: absolute;
  left: -1000em;
  top: -1000em;
}
.ZDCLB-icon-holder {
  border: 1px solid var(--primary-color);
  border-radius: 6px;
}
.ZDCLB-svg-icon,
.ZDC-svg-icon {
  width: 18px;
  height: 18px;
  fill: #222;
  vertical-align: middle;
}
.ZDCLB-svg-icon-40 {
  width: 40px;
  height: 40px;
}
/*** Truncation CSS ***/
.ZDC-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*** Disable styles ***/
.ZDC-disabled {
  opacity: 0.4 !important;
  cursor: default !important;
  pointer-events: none;
}
.ZDC-disabled[data-title]:after,
.ZDC-disabled[data-title]:before {
  display: none;
}
.rb-state-hidden {
  display: none;
}
/*** Custom Form Element styles ***/
/*** Checkbox Styles ***/
.ZDC-checkbox {
  display: flex;
  cursor: pointer;
  align-items: center;
  user-select: none;
}
.ZDC-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.ZDC-checkbox input + span {
  display: inline-block;
  height: 10px;
  min-width: 10px;
  border: 1px solid var(--primary-color);
  border-radius: 3px;
  position: relative;
  margin-right: 5px;
}
.ZDC-checkbox input:checked + span {
  background-color: var(--primary-color);
}
.ZDC-checkbox input:checked + span:after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0px;
  width: 3px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
}
.ZDC-radio {
  display: flex;
  cursor: pointer;
  align-items: center;
  user-select: none;
}
.ZDC-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.ZDC-radio input + span {
  display: inline-block;
  height: 10px;
  min-width: 10px;
  border: 1px solid var(--primary-color);
  border-radius: 3px;
  position: relative;
  margin-right: 5px;
}
.ZDC-radio input:checked + span {
  background-color: var(--primary-color);
}
.ZDC-radio input:checked + span:after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0px;
  width: 3px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
}
.ZDC-radio input + span {
  height: 12px;
  min-width: 12px;
  border-radius: 50%;
}
.ZDC-radio input:checked + span {
  background-color: #fff;
  box-shadow: 0 0 0 2px var(--primary-color) inset;
}
.ZDC-radio input:checked + span:after {
  display: none;
}
.ZDC-switch-block {
  display: flex;
  align-items: center;
  transition: opacity 0.3s;
}
.ZDC-switch-block .ZDC-switch-btn {
  margin: 0 10px 0 0;
}
.ZDC-switch-btn {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 14px;
}
.ZDC-switch-btn input {
  opacity: 0;
  width: 0;
  height: 0;
}
.ZDC-switch-btn input:checked + span {
  background-color: #6DBF5C;
}
.ZDC-switch-btn input:checked + span::before {
  transform: translateX(10px);
}
.ZDC-switch-btn input:focus + span {
  box-shadow: 0 0 1px #6DBF5C;
}
.ZDC-switch-btn input + span {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 34px;
}
.ZDC-switch-btn input + span::before {
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  left: 3px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}
/*** Section styles ***/
.ZDC-section {
  background: var(--section-bg);
  border-radius: 4px;
  box-shadow: 0px 2px 10px rgba(5, 0, 56, 0.08);
  padding: 2px;
}
.ZDCI-main-container {
  font-family: Inter, Sans-serif;
}
.ZDCLB-holder {
  width: 100vw;
  height: 100vh;
  font-family: var(--base-font-family);
  background: var(--layout-bg);
  box-sizing: border-box;
}
.ZDCLB-holder h3 {
  color: var(--text-color-dark);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
}
.ZDCI-newinterface {
  height: calc(100vh - 100px);
  width: 100vw;
  position: relative;
}
.ZT-topBarPanel ~ .ZT-ContainerInner .ZDCI-newinterface {
  height: calc(100vh - 100px - 32px);
}
.ZS-newsnap .BB-panel {
  height: 50px;
  padding: 8px 0 8px 16px;
  background: var(--baseColor);
  position: relative;
  z-index: 2;
}
.ZS-newsnap .ZT-container {
  background: #EBEDF5;
}
.ZS-newsnap .ZT-sidePanel {
  margin-top: 0;
}
.ZS-newsnap .ZT-topBarPanel {
  z-index: 2;
}
.ZDCI-createblock {
  width: 450px;
  text-align: center;
  font-size: 13px;
}
.ZDCI-createblock h2 {
  font-weight: 500;
  margin: 40px 0 14px 0;
  font-size: 24px;
}
.ZDCI-createblock p {
  font-size: 13px;
  color: #535353;
  margin: 0 0 32px 0;
  line-height: 1.7;
}
.ZDCI-createblock .cm-btn {
  padding: 0 16px 0 10px;
  height: 36px;
}
.ZDCI-createblock .ZDC-btn {
  text-transform: uppercase;
}
.ZDCI-createblock .ZDC-btn .ZDC-svg-icon {
  fill: var(--text-color-light);
}
.ZDCI-createblock a {
  color: #535353;
  margin-top: 20px;
  text-decoration: underline;
}
.ZDCI-createblock a:hover {
  color: var(--link-color-hover);
}
.ZDCI-createblock img {
  width: 264px;
}
.ZDCLB-wrapper {
  width: inherit;
  height: inherit;
  font-family: var(--base-font-family);
  font-size: 13px;
}
.ZDCLB-layout {
  width: 100%;
  height: auto;
  margin: 0 14px;
  position: relative;
  padding-top: 16px;
  border-radius: 20px;
}
.ZDCLB-layout.ZDCLB-withProperties {
  width: calc(100vw - 96px - 340px - 30px);
}
.ZDCLB-layoutbuilder {
  position: relative;
  width: calc(100%);
  height: calc(100%);
  background: #fff;
  padding: 0 16px 16px 16px;
  border-radius: 20px;
  overflow-x: hidden;
}
@supports selector(::-webkit-scrollbar) {
  .ZDCLB-layoutbuilder {
    padding: 0 0 16px 16px;
  }
}
.ZDCLB-boardholder {
  position: absolute;
  width: 100%;
  height: 100%;
}
.ZDCLB-board {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.ZDCLB-board h4 {
  font-weight: normal;
  color: #757575;
  line-height: 1.5;
  margin: 0;
  font-size: 13px;
  max-width: 350px;
  text-align: center;
}
.ZDCLB-board p {
  font-size: 11px;
  color: var(--text-color-gray);
}
.ZDCLB-board.ZDC-highlight {
  border-color: var(--holder-highlight-color);
}
.ZDCLB-board.ZDC-selected {
  border-color: var(--holder-highlight-color);
}
.ZDCLB-board.ZDCLB-initial .ZDCLB-cardholder:first-child {
  border-left: 0px;
}
.ZDCLB-board.ZDCLB-modified .ZDCLB-cardholder:last-child {
  border-left: 0px;
}
.ZDCLB-board-border {
  border-radius: 14px;
  background-color: #f1f1f6;
  background-image: url("data:image/svg+xml,%3csvg width=%27100%25%27 height=%27100%25%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3crect width=%27100%25%27 height=%27100%25%27 fill=%27none%27 rx=%2714%27 ry=%2714%27 stroke=%27%23BCC9E5FF%27 stroke-width=%272%27 stroke-dasharray=%275%2c 10%27 stroke-dashoffset=%27100%27 stroke-linecap=%27square%27/%3e%3c/svg%3e");
}
.ZDCLB-innerBoardHolder {
  height: inherit;
}
.ZDCLB-innerBoardHolder > div {
  position: relative;
  z-index: 2;
}
.ZDCLB-innerBoardHolder > div:first-child {
  z-index: 0;
}
.ZDCLB-placeHolderGrid {
  border: 0px;
  background: url(../Compression/images/796dff56611f56eacf1c.81b80492a839929e2872270d7226281d.svg) no-repeat 0 -1px;
  background-size: cover;
  margin: -1px 0 0 -1px;
}
.ZDCLB-cardholder {
  width: 570px;
  height: 200px;
  position: absolute;
  box-sizing: border-box;
}
.ZDCLB-card {
  border-radius: 8px;
  height: 100%;
  background: none;
  border: 1px solid #e5e5e5;
  color: var(--text-color-gray);
  padding: 10px;
}
.ZDCLB-card.ZDC-highlight {
  border-color: var(--holder-highlight-color);
}
.ZDCLB-card.ZDC-selected {
  border-color: var(--holder-highlight-color);
  background: rgba(61, 138, 255, 0.08);
}
.ZDCLB-card h3 {
  font-family: var(--base-font-family);
  font-size: 15px;
  font-weight: 500;
  color: var(--field-heading);
  margin: 0 0 10px;
}
.ZDCLB-card.ZDCI-emptycard {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F6F6F6;
  border: 1px solid transparent;
  padding: 0px;
}
.ZDCLB-dragImage {
  position: absolute;
  z-index: 3;
}
.ZDCLB-dragImage .ZDCLB-field-holder {
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  border: 1px solid #3B86F7;
  background: #FFF;
  box-shadow: 0px 75px 21px 0px rgba(2, 76, 187, 0), 0px 48px 19px 0px rgba(2, 76, 187, 0.01), 0px 27px 16px 0px rgba(2, 76, 187, 0.02), 0px 12px 12px 0px rgba(2, 76, 187, 0.04), 0px 3px 7px 0px rgba(2, 76, 187, 0.05), 0px 0px 0px 0px rgba(2, 76, 187, 0.05);
}
.ZDCLB-placeHolder {
  position: absolute;
  border: none;
}
.ZDCLB-placeHolder .ZDCI-emptycard {
  background: rgba(61, 138, 255, 0.08);
  border: 1px solid #3D8AFF;
}
/*** Interface related styles ***/
.ZDCI-container {
  width: 100%;
  height: 100%;
}
.ZDCI-board-new {
  color: #535353;
  font-size: 13px;
  position: absolute;
  z-index: 0;
  top: 0;
}
.ZDCI-board-new .ZDCI-board-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: max-content;
  height: max-content;
}
.ZS-emptystate-icon {
  margin-bottom: 25px;
}
.ZS-emptystate-icon .ZDC-svg-icon {
  width: 192px;
  height: 129px;
}
.ZDCI-toppanel {
  flex-direction: column;
}
.ZDCI-toppanel .ZDCLB-sidepanel {
  width: 100%;
  min-width: 100%;
  height: auto;
}
.ZDCI-rightpanel .ZDCLB-sidepanel {
  order: 2;
}
.ZDCI-bottompanel {
  flex-direction: column;
}
.ZDCI-bottompanel .ZDCLB-sidepanel {
  width: 100%;
  min-width: 100%;
  height: auto;
  order: 2;
}
.ZDCI-textbox {
  width: 100%;
  height: 100%;
}
.ZDCI-textbox textarea {
  border-radius: 6px;
  resize: none;
  width: 100%;
  border: 1px solid #ddd;
  height: 75%;
  padding: 10px;
  box-sizing: border-box;
}
.ZDCLB-field-holder {
  font-size: 10px;
  border-radius: 6px;
  height: 78px;
  cursor: grab;
  box-sizing: border-box;
  margin: 7px 0 0 0;
}
.ZDCLB-field-holder span {
  margin-top: 5px;
}
.ZDC-fullFill {
  width: 100%;
  height: calc(100vh - 70px);
  background: #E6E8F0;
}
.ZDC-snap {
  height: calc(100vh - 70px);
}
.ZDC-snap.ZDC-snap-viewonly .ZDCLB-field-list {
  cursor: url(../Compression/images/4728e26bfa436acb570c.1d8143e60f6ef913c01d9469ce111887.svg) 20 20, not-allowed;
}
.ZDC-snap.ZDC-snap-viewonly .ZDCLB-field-list li > div {
  cursor: url(../Compression/images/4728e26bfa436acb570c.1d8143e60f6ef913c01d9469ce111887.svg) 20 20, not-allowed;
  pointer-events: none;
}
.ZT-topBarPanel ~ .ZT-ContainerInner .ZDC-snap {
  height: calc(100vh - 102px);
}
.ZDCLB-layoutScroller {
  max-height: 100vh;
  overflow: scroll;
}
.ZDC-Loader {
  background-color: #A9A9A9;
}
.ZS-snap-loader {
  width: inherit;
  height: 100%;
  position: absolute;
  padding: 20px;
  box-sizing: content-box;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2;
  left: -20px;
  top: -20px;
  border-radius: 20px;
}
.ZS-snap-loader .ZT-loader {
  background: #fff;
  border-radius: 8px;
  width: 72px;
  height: 72px;
  position: static;
  padding: 20px 15px 20px 25px;
}
.ZDCI-kpi {
  border-radius: 8px;
  border: 2px solid transparent;
  background: #FFF;
  padding: 12px 16px;
  box-sizing: border-box;
  width: inherit;
  height: inherit;
  position: relative;
  overflow: hidden;
}
.ZDCI-kpi .ZDCI-kpi-heading {
  min-height: 40px;
}
.ZDCI-kpi h4 {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: normal;
  color: #7c7c7c;
  position: absolute;
  top: 12apx;
  left: 16px;
  white-space: nowrap;
}
.ZDCI-kpi h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: inherit;
  margin: 0;
  color: #535353;
  font-size: 14px;
  transition: all 0.3s;
}
.ZDCI-kpi h3.ZDCI-kpi-placeholder {
  color: #858585;
}
.ZDCI-kpi:has(h4) h3 {
  margin: 18px 0 0 0;
}
.ZDCI-kpi h2 {
  margin: 13px 0 13px 0;
  color: #333;
  font-weight: 600;
  font-size: 32px;
  white-space: nowrap;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
.ZDCI-kpi .ZDCI-comp-per {
  border-radius: 15px;
  background: #fff;
  color: #C50F1F;
  font-size: 14px;
  padding: 4px 5px;
  margin: 0 7px;
}
.ZDCI-kpi .ZDCI-comp-per.ZDCI-comp-positive {
  color: #3E862E;
}
.ZDCI-kpi .ZDCI-comp-per span {
  margin: 0 1px;
}
.ZDCI-kpi .ZDCI-kpi-title {
  height: calc(100% - 40px);
  transition: all 0.3s;
}
.ZDCI-kpi .ZDCI-kpi-title span:empty {
  border: 3px solid #fff;
  min-width: 30px;
  border-radius: 10px;
  display: block;
}
.ZDCI-kpi:has(.ZDCI-kpi-desc) .ZDCI-kpi-title {
  height: calc(100% - 50px);
}
.ZDCI-kpi .ZDCI-kpi-desc {
  white-space: nowrap;
  position: absolute;
  left: 16px;
  color: #7c7c7c;
  margin: 0;
  bottom: 10px;
}
.ZDCI-kpi .ZDCI-kpi-desc strong {
  font-weight: 500;
  font-size: 15px;
  color: #282828;
}
.ZDCI-kpi .ZDCI-kpi-desc strong,
.ZDCI-kpi .ZDCI-kpi-desc span {
  vertical-align: middle;
}
.ZDCI-kpi.ZDCI-kpi-center {
  text-align: center;
}
.ZDCI-kpi.ZDCI-kpi-center .ZDC-valign-middle {
  justify-content: center;
}
.ZDCI-kpi.ZDCI-kpi-center h4,
.ZDCI-kpi.ZDCI-kpi-center .ZDCI-kpi-desc {
  left: 50%;
  transform: translate(-50%, 0);
}
.ZDCI-kpi.ZDCI-kpi-right {
  text-align: right;
}
.ZDCI-kpi.ZDCI-kpi-right .ZDCI-kpi-title {
  flex-direction: row-reverse;
}
.ZDCI-kpi.ZDCI-kpi-right h4,
.ZDCI-kpi.ZDCI-kpi-right .ZDCI-kpi-desc {
  left: calc(100% - 16px);
  transform: translate(-95%, 0);
}
.ZDCI-kpi.ZDCI-kpi-emptystate {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
.ZDCI-kpi.ZDCI-kpi-emptystate h3 {
  color: #858585;
}
.ZDCI-kpi.ZDCI-kpi-emptystate h2 span {
  border: 3px solid #fff;
  min-width: 30px;
  border-radius: 10px;
  display: block;
}
.ZDCI-kpi.ZDCI-kpi-emptybg .ZDCI-comp-per {
  background: #FDF3F4;
}
.ZDCI-kpi.ZDCI-kpi-emptybg .ZDCI-comp-per.ZDCI-comp-positive {
  background: #F1FAF1;
}
.ZDCI-kpi.ZDCI-kpi-emptybg .ZDCI-kpi-placeholder {
  color: #A9A9A9;
}
.ZDCI-kpi.ZDCI-kpi-emptybg .ZDCI-kpi-title span:empty {
  border: 3px solid #ddd;
}
.ZDCI-kpi.ZDCI-select-state {
  border: 2px solid #3D8AFF;
}
.ZDC-emptyview-noedit {
  display: none;
}
.ZS-collab-editing .ZDC-emptyview-noedit {
  display: block;
}
.ZS-collab-editing .ZDC-emptyview-nocomp,
.ZS-collab-editing .ZDC-emptyview-title {
  display: none;
}
.ZS-view-mode .ZDCLB-board-border {
  background: none;
}
.ZS-view-mode .ZDC-card:hover {
  border-color: transparent;
  cursor: default;
}
.ZS-view-mode .ZDC-card:hover .ZDCI-resize-block > div {
  display: none;
}
.ZS-view-mode .ZDC-card:hover .ZDCI-options-block > div {
  display: none;
}
.ZS-view-mode .ZDC-card:hover .ZDCI-options-block.ZDC-flex {
  display: none;
}
.ZS-view-mode .ZDC-card.ZDC-card-selected:hover {
  border-color: #3D8AFF;
}
.ZS-view-mode .ZS-text-editor .ui-rte-editor {
  cursor: default;
}
.ZS-view-mode .colResizeCue {
  pointer-events: none;
}
.ZS-view-mode .ZS-grid-area {
  pointer-events: all;
}
.ZS-view-mode .ZG-resizeCueSec {
  pointer-events: none;
}
.ZS-view-mode .ZG-resizeCueSec:hover {
  opacity: 0;
}
.ZDC-snap:not(.ZS-edit-mode) .ZDC-chart,
.ZDC-snap:not(.ZS-edit-mode) .ZDCI-kpi-emptybg,
.ZDC-snap:not(.ZS-edit-mode) .ZS-grid,
.ZDC-snap:not(.ZS-edit-mode) .ZS-text-editor {
  border: 1px solid #ddd;
  border-radius: 8px !important;
}
.ZDC-snap:not(.ZS-edit-mode) .ZDC-chart .ZS-default-state,
.ZDC-snap:not(.ZS-edit-mode) .ZDCI-kpi-emptybg .ZS-default-state,
.ZDC-snap:not(.ZS-edit-mode) .ZS-grid .ZS-default-state,
.ZDC-snap:not(.ZS-edit-mode) .ZS-text-editor .ZS-default-state {
  border: 1px solid transparent;
}
.ZS-edit-mode .ZDCLB-board-border {
  background-color: #f1f1f6;
  background-image: url("data:image/svg+xml,%3csvg width=%27100%25%27 height=%27100%25%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3crect width=%27100%25%27 height=%27100%25%27 fill=%27none%27 rx=%2714%27 ry=%2714%27 stroke=%27%23BCC9E5FF%27 stroke-width=%272%27 stroke-dasharray=%275%2c 10%27 stroke-dashoffset=%27100%27 stroke-linecap=%27square%27/%3e%3c/svg%3e");
}
.ZDC-emptyview-nocomp {
  display: none;
}
.ZS-nocomponent .ZDC-emptyview-nocomp {
  display: block;
}
.ZS-nocomponent .ZDC-emptyview-noedit,
.ZS-nocomponent .ZDC-emptyview-title {
  display: none;
}
.ZDCI-resize-block > div {
  position: absolute;
  display: none;
  z-index: 1;
}
.ZDCI-resize-block .ZDCI-hor-resize {
  width: 24px;
  width: 9px;
  height: 29px;
  right: -5px;
  top: 50%;
  transform: translate(0, -50%);
  cursor: col-resize;
  box-sizing: border-box;
}
.ZDCI-resize-block .ZDCI-ver-resize {
  height: 9px;
  width: 30px;
  bottom: -1px;
  left: 50%;
  transform: translate(-50%, 0);
  cursor: row-resize;
}
.ZDCI-resize-block .ZDCI-right-resize {
  cursor: col-resize;
  right: -5px;
  left: unset;
  bottom: -8px;
}
.ZDCI-options-block {
  position: absolute;
  background: #3D8AFF;
  right: -1px;
  top: 0;
  padding: 0 2px 2px;
  border-radius: 0 7px 0 12px;
}
.ZDCI-options-block > div {
  cursor: pointer;
  padding: 5px;
  opacity: 0.8;
  transition: all 0.3s;
  display: none;
}
.ZDCI-options-block > div .ZDC-svg-icon {
  width: 14px;
  height: 14px;
  fill: #fff;
}
.ZDCI-options-block > div:hover {
  opacity: 1;
}
.ZDCI-options-block .ZDCI-grab {
  cursor: move;
}
.ZDCI-options-block .ZDC-more-details .ZDC-svg-icon {
  fill: #fff;
  width: 4px;
  height: 16px;
}
.ZDCI-options-block .ZDC-more-details:hover .ZDC-svg-icon {
  fill: #282828;
}
.ZDCI-element-loader {
  border: 1px solid #DEE4F1;
  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;
}
.ZDCI-element-loader:hover {
  border: 1px solid #DEE4F1;
}
.ZDCI-element-loader .ZDCI-options-block {
  display: none;
}
.ZDCI-element-loader .ZDCI-resize-block {
  display: none;
}
@keyframes skeletonLoader {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
span.ZDCI-kpi-emptystate {
  border: 3px solid #ddd;
  min-width: 30px;
  border-radius: 10px;
  display: block;
}
h3.ZDCI-kpi-emptystate {
  color: #A9A9A9;
}
.ZDCI-options-block.ZDC-flex {
  display: none;
}
.ZDC-card {
  border-radius: 8px;
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  cursor: move;
}
.ZDC-card:hover {
  border: 2px solid #3D8AFF;
}
.ZDC-card:hover .ZDCI-resize-block > div {
  display: block;
}
.ZDC-card:hover .ZDCI-options-block > div {
  display: flex;
}
.ZDC-card:hover .ZDCI-options-block.ZDC-flex {
  display: flex;
  z-index: 1;
}
.ZDC-card.ZDC-card-selected {
  border: 2px solid #3D8AFF;
}
.ZDC-card.ZDC-card-selected .ZS-grid-area {
  pointer-events: all;
}
.ZDC-card.ZDC-card-selected .ZS-grid-defaultstate .ZS-grid-area {
  cursor: move;
}
.ZDC-card .CG_gridContainer {
  cursor: default;
}
.ZDC-card.ZDCI-loader:hover {
  border: 2px solid transparent;
}
.ZDC-card.ZDCI-loader:hover .ZDCI-resize-block > div {
  display: none;
}
.ZDC-card.ZDCI-loader:hover .ZDCI-options-block > div {
  display: none;
}
.ZDC-card.ZDCI-loader:hover .ZDCI-options-block.ZDC-flex {
  display: none;
}
.ZDC-card-dragging:hover {
  border: 2px solid #3D8AFF;
}
.ZDC-card-dragging:hover .ZDCI-options-block > div {
  display: none;
}
.ZDC-card-dragging:hover .ZDCI-options-block.ZDC-flex {
  display: none;
}
.ZDC-card-dragging:hover .ZDCI-resize-block > div {
  display: block;
}
.ZDC-chart {
  border-radius: 5px;
}
.ZDC-chart .highcharts-container {
  border-radius: 8px;
}
.ZDC-chart .highcharts-legend-item {
  min-width: 12px;
  min-height: 12px;
  vertical-align: middle;
}
.ZDC-chart .highcharts-series-group .highcharts-series {
  cursor: default;
}
.ZDC-chart div[id^="additionalStylesDOM"] {
  border: 0px !important;
  border-radius: 8px !important;
}
.ZDC-full {
  height: 100%;
  width: 100%;
}
.ZDCLB-gridUI {
  overflow: scroll;
  background-color: #f6f6f6;
}
/*** Grid styles ***/
.ZS-grid {
  border-radius: 8px;
  border: 2px solid transparent;
  background: #FFF;
  padding: 10px;
  box-sizing: border-box;
  width: inherit;
  height: inherit;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}
.ZS-grid h3 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ZS-title-placeholder .highcharts-title {
  font-size: 14px !important;
  color: #a9a9a9 !important;
  font-weight: normal !important;
}
.ZS-title-placeholder .ZDC-title {
  font-size: 14px;
  color: #a9a9a9;
  font-weight: normal;
}
.ZS-grid-area {
  border-radius: 12px;
  border: 1px solid #ddd;
  background: #fafafa;
  position: relative;
  width: 100%;
  height: calc(100% - 25px);
  overflow: hidden;
  cursor: default;
  pointer-events: none;
}
.ZS-grid-area textarea,
.ZS-grid-area .checkboxContainer {
  cursor: default;
  pointer-events: none;
  /* Firefox has text cursor */
}
.ZS-grid-area .contextMenuDropDown.fieldWarningSign {
  cursor: default;
  pointer-events: none;
}
.ZS-grid-area .ZG-rowHover .ZG-recordPanel .ZG-recordPanelList.ZGT-recordNumber {
  display: block;
  cursor: default;
}
/*** Text editor styles ***/
.ZS-text-editor {
  height: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
}
.ZS-text-editor:empty::before {
  content: 'Your text will be displayed here';
  font-size: 13px;
  font-weight: 400;
  color: #A9A9A9;
}
.ZS-text-editor .ui-rte-editor {
  height: 100%;
  padding: 0;
}
.ui-rte-editor-div ul,
.ui-rte-editor-div ol,
.ui-rte-editor-div li {
  list-style: inherit;
}
.ui-rte-editor-div ul,
.ui-rte-editor-div ol {
  margin-left: 16px;
}
/*** Writer variables overwrite ***/
:root {
  --rte-toolbar-btn-size: 28px;
  --rte-toolbar-btn-border-color: #E5E5E5;
  --rte-toolbar-btn-bg-color: #fff;
  --rte-toolbar-btn-radius: 4px;
  --rte-toolbar-btn-right-margin: 6px;
  --rte-toolbar-bg-selected-color: #6DBF5C;
  --rte-toolbar-border-selected-color: #6DBF5C;
  --rte-btn-primary-bg-color: #6DBF5C;
  --rte-zdropdown-border-color: #d7d7d7;
  --rte-zdropdown-bg-selected-color: #f6f6f6;
}
.ZS-rightpanel-editor {
  height: 100%;
}
.ZS-rightpanel-editor .rte-toolbar {
  background: none;
  height: 68px;
  padding: 0;
}
.ZS-rightpanel-editor .rte-toolbar-btn.is-selected {
  background: #6DBF5C;
  border-color: #6DBF5C;
}
.ZS-rightpanel-editor .rte-toolbar-btn.is-selected .ui-rte-icon {
  fill: #fff;
  --rte-icon-fill-color: #fff;
}
.ZS-rightpanel-editor .rte-toolbar-group:not(:last-child):after {
  margin: 2px 9px 2px 4px;
}
.ZS-rightpanel-editor .ui-rte-editor {
  border: 1px solid #ddd;
  background: #fafafa;
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 6px;
  height: calc(100% - 85px);
}
.ZS-rightpanel-editor .ui-rte-editor:focus {
  border-color: #4daa38;
}
.ZS-rightpanel-editor .rte-toolbar-blocks {
  flex-wrap: wrap;
}
.ZS-rightpanel-editor .rte-toolbar-blocks .rte-toolbar-group:first-child {
  flex: 1;
  align-items: flex-start;
}
.ZS-rightpanel-editor .rte-toolbar-blocks .rte-toolbar-group:first-child::after {
  display: none;
}
.ZS-rightpanel-editor .rte-toolbar-blocks .zcombobox {
  padding: 5px 10px 5px 10px;
  margin: 0 8px 12px;
}
.ZS-rightpanel-editor .rte-btn-primary {
  background: #6DBF5C;
  border-radius: 50px;
  border-color: #6DBF5C;
  padding: 7px 14px;
  margin-right: 0;
}
.ZS-rightpanel-editor .rte-btn-secondary {
  border-color: #6DBF5C;
  border-radius: 50px;
  display: none;
}
.ZS-rightpanel-editor .ui-block-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.ZS-rightpanel-editor #container-for-font-family .zbutton {
  width: 180px !important;
}
.ZS-rightpanel-editor #rte-comp-mount-div .zmenu {
  border-radius: 6px;
  font-family: var(--base-font-family);
}
.ZS-rightpanel-editor .rte-split-dropdown[id$="-align-group"] {
  left: 120px !important;
}
.ZS-rightpanel-editor #rte-comp-mount-div .zmenu__item {
  margin: 0 6px;
  border-radius: 5px;
  padding: 10px;
}
.ZS-rightpanel-editor #rte-comp-mount-div .zmenu__item:hover {
  background-color: #f6f6f6 !important;
}
.ZS-rightpanel-editor .zdropdownlist__item {
  margin: 0 4px 2px;
  border-radius: 3px;
  padding: 5px;
}
.ZS-rightpanel-editor #rte-comp-mount-div .zdropdownlist__item.is-selected,
.ZS-rightpanel-editor #rte-comp-mount-div .zdropdownlist__item.on-hover {
  background-color: #f6f6f6 !important;
}
.ZS-rightpanel-editor .rte-link-popover {
  margin-left: 0;
  border-color: #E5E5E5 !important;
  border-radius: 4px;
  left: 7px !important;
}
.ZS-rightpanel-editor .rte-link-popover .zpopover__content {
  padding: 12px;
}
.ZS-rightpanel-editor .rte-link-popover .zpopover__pointer {
  display: none;
}
.ZS-rightpanel-editor .rte-link-popover .zdialog-title {
  display: none;
}
.ZS-rightpanel-editor .rte-link-popover .rte-link-label {
  font-size: 13px !important;
  color: #535353;
  min-width: 40px;
  margin-right: 10px !important;
}
.ZS-rightpanel-editor .rte-link-popover .rte-inputbox {
  border-color: #ddd;
  background: #F4F5F6;
  border-radius: 4px;
  height: 30px !important;
}
.ZS-rightpanel-editor .rte-link-popover .rte-inputbox:focus {
  border-color: #4daa38;
}
.ZS-rightpanel-editor .zcolorpicker {
  border-radius: 6px;
  border-color: #d7d7d7;
  left: 30px !important;
  top: 84px !important;
}
.ZS-rightpanel-editor .zcolorpicker .zbutton {
  border: 0px;
}
.ZS-rightpanel-editor .zcolorpicker .zbutton:hover {
  border: 0px;
}
.ZS-rightpanel-editor .zcolorpicker .zcolorpicker__showhidecontainer {
  border-radius: 6px;
}
.ZS-rightpanel-editor .zbutton--primary {
  background: #6dbe5b;
}
.ZS-rightpanel-editor .zbutton--primary:hover,
.ZS-rightpanel-editor .zbutton--primary:active,
.ZS-rightpanel-editor .zbutton--primary:active.has-focus {
  background: #6dbe5b !important;
}
.ui-rte-placeholder[style="text-align:center;"]::before {
  transform: translate(-50%, 0);
}
.ui-rte-placeholder[style="text-align:right;"]:before {
  transform: translate(-100%, 0);
  white-space: nowrap;
}
/*** Default states ***/
.ZS-default-state .ZS-default-icon {
  margin: 10px 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ZS-grid-defaultstate {
  /*.ZS-default-icon {
        background: url('../../../../images/grid-empty-bg.svg') repeat left top;
        background-size: contain;
        width: calc(100% - 30px);
        height: calc(100% - 20px);
        border: 1px solid #eee;
        border-radius: 15px;
        position: relative;
        overflow: hidden;
        &::after {
            content: '';
            position: absolute;
            height: 10%;
            width: 100%;
            background: #f6f6f6;
            max-height: 40px;
            left: 0;
            top: 0;
        }
    }*/
}
.ZS-grid-defaultstate .ZS-grid-area {
  border: 0px;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ZS-chart-defaultstate .ZS-default-icon {
  margin: 50px 15px 10px 15px;
  height: calc(100% - 70px);
  width: calc(100% - 30px);
}
.ZS-options-hide-mode.ZDC-card:hover .ZDCI-options-block {
  display: none;
}
.ZS-options-hide-mode.ZDC-card:hover .ZDCI-resize-block {
  display: none;
}
.ZS-sync-mode .ZDCLB-sidepanel {
  cursor: url(../Compression/images/4728e26bfa436acb570c.1d8143e60f6ef913c01d9469ce111887.svg) 20 20, not-allowed;
}
.ZS-sync-mode .ZDCLB-sidepanel .ZDCLB-field-list li {
  opacity: 0.5;
  pointer-events: none;
}
.ZS-sync-mode .ZDCI-properties-panel {
  cursor: url(../Compression/images/4728e26bfa436acb570c.1d8143e60f6ef913c01d9469ce111887.svg) 20 20, not-allowed;
  opacity: 0.5;
}
.ZS-sync-mode .ZDCI-properties-panel .ZDCI-prop-block,
.ZS-sync-mode .ZDCI-properties-panel .ZDCI-prop-header {
  pointer-events: none;
}
.ZS-sync-mode .ZF-dropDownPanel {
  display: none;
}
:root {
  --fontInter: "Inter";
}
@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: normal;
  src: url("//static.zohocdn.com/webfonts/interregular/font_latin.woff2") format("woff2");
  unicode-range: U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2000-2027, U+202F-205F, U+2074, U+20AC, U+2212;
}
@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: normal;
  src: url("//static.zohocdn.com/webfonts/interregular/font_others.woff2") format("woff2");
  unicode-range: U+250-2C5, U+2C7-2D9, U+2DB, U+2DD-36F, U+146B, U+1D43, U+1D47-1D49, U+1D4D, U+1D4F-1D50, U+1D52, U+1D56-1D58, U+1D5B, U+1D62-1D65, U+1D9C, U+1DA0, U+1DBB, U+1DBF-1DF5, U+1DFC-1DFF, U+2070-2071, U+2075-208E, U+2090-209C, U+20B9, U+20DB-20DC, U+20E3, U+20E8, U+20F0, U+2100-2101, U+2103, U+2105-2106, U+2109, U+2113, U+2117, U+211E-2123, U+2125-2126, U+212A-212B, U+212E, U+2132, U+213B, U+214D, U+214F, U+2153, U+215A-2188, U+2190-2199, U+2202, U+2205-2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+2318, U+2423, U+25B2, U+25BA, U+25BC, U+25C0, U+25C6-25C7, U+25CA-25CB, U+25CF, U+25E6, U+2600, U+263C, U+2661, U+2665, U+2713, U+2717, U+2756, U+2764, U+27EF, U+27F5-27F7, U+2B4E-2B4F, U+2B5A-2B5F, U+2E18, U+A92E, U+E000-E001, U+F6C3, U+FE20-FE2D, U+FEFF, U+1F16A-1F16B;
}
@font-face {
  font-family: "Inter";
  font-weight: 500;
  font-style: normal;
  src: url("//static.zohocdn.com/webfonts/intermedium/font_latin.woff2") format("woff2");
  unicode-range: U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2000-2027, U+202F-205F, U+2074, U+20AC, U+2212;
}
@font-face {
  font-family: "Inter";
  font-weight: 500;
  font-style: normal;
  src: url("//static.zohocdn.com/webfonts/intermedium/font_others.woff2") format("woff2");
  unicode-range: U+250-2C5, U+2C7-2D9, U+2DB, U+2DD-36F, U+146B, U+1D43, U+1D47-1D49, U+1D4D, U+1D4F-1D50, U+1D52, U+1D56-1D58, U+1D5B, U+1D62-1D65, U+1D9C, U+1DA0, U+1DBB, U+1DBF-1DF5, U+1DFC-1DFF, U+2070-2071, U+2075-208E, U+2090-209C, U+20B9, U+20DB-20DC, U+20E3, U+20E8, U+20F0, U+2100-2101, U+2103, U+2105-2106, U+2109, U+2113, U+2117, U+211E-2123, U+2125-2126, U+212A-212B, U+212E, U+2132, U+213B, U+214D, U+214F, U+2153, U+215A-2188, U+2190-2199, U+2202, U+2205-2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+2318, U+2423, U+25B2, U+25BA, U+25BC, U+25C0, U+25C6-25C7, U+25CA-25CB, U+25CF, U+25E6, U+2600, U+263C, U+2661, U+2665, U+2713, U+2717, U+2756, U+2764, U+27EF, U+27F5-27F7, U+2B4E-2B4F, U+2B5A-2B5F, U+2E18, U+A92E, U+E000-E001, U+F6C3, U+FE20-FE2D, U+FEFF, U+1F16A-1F16B;
}
@font-face {
  font-family: "Roboto";
  font-weight: 400;
  font-style: normal;
  src: url("//static.zohocdn.com/webfonts/robotoregular/font_latin.woff2") format("woff2");
  unicode-range: U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2000-200B, U+2010-2011, U+2013-2015, U+2017-201E, U+2020-2022, U+2025-2027, U+2030, U+2032-2033, U+2039-203A, U+203C, U+2044, U+2074, U+20AC, U+2212, U+25CC;
}
@font-face {
  font-family: "Roboto";
  font-weight: 400;
  font-style: normal;
  src: url("//static.zohocdn.com/webfonts/robotoregular/font_latin_ext.woff2") format("woff2");
  unicode-range: U+100-130, U+132-151, U+154-17F, U+18F, U+192, U+1A0-1A1, U+1AF-1B0, U+1F0, U+1FA-1FF, U+218-21B, U+237, U+1E00-1E01, U+1E3E-1E3F, U+1E80-1E85, U+1EA0-1EF9, U+20A3-20A4, U+20A6-20AB, U+20B1, U+20BA, U+20BC-20BD, U+25CC;
}
@font-face {
  font-family: "Roboto";
  font-weight: 400;
  font-style: normal;
  src: url("//static.zohocdn.com/webfonts/robotoregular/font_others.woff2") format("woff2");
  unicode-range: U+259, U+2BC, U+2C7, U+2C9, U+2D8-2D9, U+2DB, U+2DD, U+2F3, U+300-301, U+303, U+309, U+30F, U+323, U+1F4D, U+207F, U+20B9, U+2105, U+2113, U+2122, U+2126, U+212E, U+215B-215E, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+25CC, U+EE01-EE02, U+F6C3, U+FB01-FB04, U+FEFF, U+FFFC-FFFD;
}
@font-face {
  font-family: "Roboto";
  font-weight: 500;
  font-style: normal;
  src: url("//static.zohocdn.com/webfonts/robotomedium/font_latin.woff2") format("woff2");
  unicode-range: U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2000-200B, U+2010-2011, U+2013-2015, U+2017-201E, U+2020-2022, U+2025-2027, U+2030, U+2032-2033, U+2039-203A, U+203C, U+2044, U+2074, U+20AC, U+2212, U+25CC;
}
@font-face {
  font-family: "Roboto";
  font-weight: 500;
  font-style: normal;
  src: url("//static.zohocdn.com/webfonts/robotomedium/font_latin_ext.woff2") format("woff2");
  unicode-range: U+100-130, U+132-151, U+154-17F, U+18F, U+192, U+1A0-1A1, U+1AF-1B0, U+1F0, U+1FA-1FF, U+218-21B, U+237, U+1E00-1E01, U+1E3E-1E3F, U+1E80-1E85, U+1EA0-1EF9, U+20A3-20A4, U+20A6-20AB, U+20B1, U+20BA, U+20BC-20BD, U+25CC;
}
@font-face {
  font-family: "Roboto";
  font-weight: 500;
  font-style: normal;
  src: url("//static.zohocdn.com/webfonts/robotomedium/font_others.woff2") format("woff2");
  unicode-range: U+259, U+2BC, U+2C7, U+2C9, U+2D8-2D9, U+2DB, U+2DD, U+2F3, U+300-301, U+303, U+309, U+30F, U+323, U+1F4D, U+207F, U+20B9, U+2105, U+2113, U+2122, U+2126, U+212E, U+215B-215E, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+25CC, U+EE01-EE02, U+F6C3, U+FB01-FB04, U+FEFF, U+FFFC-FFFD;
}
.ZS-snap-publish {
  height: 100%;
  width: 100%;
}
.ZS-publish-header {
  background: var(--baseColor);
  padding: 10px 16px;
}
.ZS-publish-header svg {
  fill: var(--baseTextColor);
}
.ZS-publish-preview {
  height: calc(100vh - 83px);
  margin: 24px;
  background: #fff;
  border-radius: 16px;
  padding-top: 8px;
}
.ZS-publish-preview .ZDC-card {
  cursor: default;
}
.ZS-publish-inner {
  height: 100%;
}
.ZS-publish-middle {
  margin: 0 auto;
}
.ZS-snap-name {
  color: var(--baseTextColor);
  font-weight: normal;
  font-size: 15px;
}
.ZS-snap-name .ZDC-left-margin-small {
  margin-left: 7px;
}
.ZT-lightTheme .ZS-logo-block .ZT-logoBg1 {
  fill: #089949;
}
.ZT-lightTheme .ZS-logo-block .ZT-logoBg2 {
  fill: #226db4;
}
.ZS-publish-btn {
  display: flex;
  align-items: center;
  background: var(--text-light-10);
  border: 1px solid var(--text-light-15);
  color: var(--baseTextColor);
  fill: var(--baseTextColor);
  border-radius: 20px;
  padding: 5px 15px 4px 15px;
  cursor: pointer;
}
.ZDCLB-board-border {
  background: none;
  border: 0px;
}
.ZDC-chart,
.ZDCI-kpi-emptybg,
.ZS-grid,
.ZS-text-editor {
  border: 1px solid #ddd;
  border-radius: 8px !important;
}
.ZDC-chart .ZS-default-state,
.ZDCI-kpi-emptybg .ZS-default-state,
.ZS-grid .ZS-default-state,
.ZS-text-editor .ZS-default-state {
  border: 1px solid transparent;
}
.ZDCLB-layoutbuilder {
  padding: 0 0 8px 8px;
}
.ZS-emptystate-title {
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  color: #282828;
  margin: 0 0 14px 0;
}
.ZS-emptystate-title + p {
  max-width: 565px;
  text-align: center;
  font-size: 13px;
  color: #535353;
  list-style: 1.7;
}
.ZS-title-placeholder .ZDC-title,
.ZS-title-placeholder .highcharts-title {
  display: none;
}
.ZS-grid.ZS-title-placeholder h3 + .ZS-grid-area {
  height: calc(100%);
}
.ZS-grid-area {
  pointer-events: all;
}


/*# sourceMappingURL=snapPublishPageCompression.css.map*/