/*===========================================
				COMMON SET UP  
============================================*/

.section-container {
	padding-left: 18px;
	padding-right: 18px;
}

.blue-word{
	color: #6086d5;
}
.bg-bittersweet{
	background-color:#FF6666;
}
.bg-silverChalice{
	background-color:#AEAAAA!important;
}
.bg-turquoise{
	background-color:#31C9C6;
}

.border-top {
	border: none;
	border-top: 1px solid #e4e4e4 !important;
}

.border-bottom {
	border: none;
	border-bottom: 1px solid #e4e4e4 !important;
}
.border-right{
	border: none;
	border-right: 1px solid #e4e4e4 !important;
}

.ellipsis {
	white-space: nowrap;
	max-width: 20ch;
}

.ellipsis2, .ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

.ellipsis2 {
	overflow: hidden;
	position: relative;
	line-height: 1.2em;
	max-width: 75ch;
	max-height: 2.4em;
	text-align: justify;
	margin-right: -1em;
	padding-right: 1em;
}

.ellipsis2:before {
	content: '...';
	position: absolute;
	right: 0;
	bottom: 0;
}

.ellipsis2:after {
	content: '';
	position: absolute;
	right: 0;
	width: 1em;
	height: 1em;
	margin-top: 0.4em;
	background: white;
}
.white-sp-no-wrap{
	white-space: nowrap;
}

.ui-datatable-data>tr:hover .ellipsis2:after {
	background: #f2f8ff;
}
.pj_img {
	width: 70px;
	height: 50px;
}
img.big-img-avatar {
	height: 100px;
	width: 100px;
}
.transparent{
	background-color: transparent !important;
}

.dashboard-list a.selected{
	box-shadow: 0px 2px 0px 0px #5092e4 inset, 0px -2px 0px 0px #5092e4 inset;
	background-color: #f2f8ff;
}
.legend-square:before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 8px;
}

.header-table-no-scroll div.ui-datatable-tablewrapper table thead tr {
	position: sticky;
	top: 0;
	z-index: 8;
}
.synfaces-dashpane-panel .word-wrap .ui-column-title{
	display: inline-block;
	word-wrap: normal;
}
/*=============================================
 					DASHPANE 
===============================================*/


div.synfaces-dashpane-container {
	box-sizing: border-box;
	border-radius: 0px;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
	border: none;	
	border-top:2px solid var(--syn-border-color);
}
.synfaces-card-container .ui-panel.ui-widget.synfaces-dashpane-panel{
	box-shadow: none;
}
 
div.synfaces-dashpane-panel.ui-panel .ui-panel-content {
	padding: 0;
	height: 100%;
	background-color: #fff;
}

div.synfaces-dashpane-panel>.ui-panel-titlebar {
	/* background-color: transparent !important; */
	border: none;
	color: #333;
	padding: 10px 10px 0px 10px;
}

.dashboard-list a {
	padding: 10px;
	display: block;
	color: #333;
	font-weight: bold;
	border-bottom: 1px solid var(--syn-border-color);
	outline:none;
} 
.dashboard-list a:hover {
	text-decoration: none;
}

.my-dashboard-layout {
	height: 100%;
	box-sizing: border-box;
	display: grid;
	grid-auto-rows: 453px;
	grid-gap: 10px;
	padding: 10px 10px 10px 0px;
}

.e23 .my-dashboard-layout {
	grid-auto-rows: 33%;
}

.dashboard-settings .my-dashboard-layout {
	width: 100%;
}

@media only screen and (min-width: 1025px) {
	.my-dashboard-layout {
		grid-template-columns: 25% 25% 25% 25%;
		width: calc(100% - 30px) !important;
	}

	.dashboard-settings .my-dashboard-layout {

		grid-template-columns: 1fr 1fr 1fr 1fr;

	}
}

div.my-dashboard-widget {
	background: #fff;
	height: 100%;
	box-sizing: border-box;
	box-shadow: unset;
  	border-radius: 10px;
}

@media only screen and (max-width:1024px) {
	.my-dashboard-widget {		
        grid-row-start: auto !important;
        grid-column-start: 1 !important;        
        grid-column-end: span 1 !important;
	}
}

div.drop-cell {
	background: #eff9ff;
	border: 1px dashed #ccc;
}
button.ui-button.ui-state-default.my-dashboard-btn{
	font-size: 1.3em;
	border: none;
	background: transparent;
	color: #515151;
	font-weight: bold;
}
.dashboard-layout-sort-header-container .my-dashboard-btn.ui-button-text-icon-left .ui-button-text{
	padding-left: 1.5em;
}
.my-dashboard-btn .fa-gear::before{
	color: #515151;
}

/*================================= 
			SETTING CSS 
================================= */

div.dashboard-settings {
	background-color: #f2f2f2;
}

div.dashboard-settings div.my-dashboard-layout {
	grid-auto-rows: 45%;
}

.e23 div.dashboard-settings div.my-dashboard-layout {
	grid-auto-rows: 33%;
}

div.synfaces-card-container div.synfaces-dashpane-panel.no-border-bottom-title > div.ui-widget-header{
	border-bottom: none;
}

.my-dashboard-title {
	margin: 0px;
	font-size: 1.2em;
	font-weight: bold;
	padding: 5px 15px 10px 15px;
	line-height: 30px;
	background-color: #fff;
	/* border-bottom: 1px solidvar(--syn-border-color) */

}
div.drag-handle {
	width: 0px;
	height: 0px;
	border-right: 50px solid #96bffc;
	border-bottom: 50px solid #96bffc;
	border-radius: 20%;
	cursor: grab;
	cursor: -webkit-grab;
}

div.drag-handle::before {	
	content: "\f047";
	color: #fff;
	font-size: 20px;
	top: 12px;
	left: 14px;
	position: absolute;
}

div.displayed-widget {
	background: #fff;
	z-index: 1;
	box-sizing: border-box;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.displayed-widget.ui-draggable-dragging {
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}

div.displayed-widget.ui-draggable-dragging .drag-handle {
	cursor: grabbing;
	cursor: -webkit-grabbing;
}
.dashboard-settings .displayed-widget .widget-setting-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.dashboard-settings .displayed-widget .widget-controller{
	width: 100%;
	height: 100%;
}
.dashboard-settings .displayed-widget .widget-controller .drag-handle,
.dashboard-settings .displayed-widget .widget-controller button{
	visibility: hidden;
}

.dashboard-settings .displayed-widget .widget-controller:hover .drag-handle,
.dashboard-settings .displayed-widget .widget-controller:hover button{
	visibility: visible;
}

.widget-row, .widget-column {
	position: absolute;
}

.widget-row {
	bottom: 10px;
	width: 100%;
	text-align: center;
}

.widget-column {
	right: 5px;
	transform: translate(0%, -50%);
	top: 50%;
}

.add-row {
	margin-right: 20px
}

.remove-row {
	
}

.add-column {
	display: block;
	margin-bottom: 20px
}

.remove-column {
	
}

.add-row .ui-icon:before, .remove-row .ui-icon:before, 
.add-column .ui-icon:before,.remove-column .ui-icon:before {
	font-size: 20px;
	color: #b3b3b3 !important;
}

.remove-widget {
	position: absolute;
	right: 0px;
	top: 0px;
	margin-right: 5px;
	margin-top: 5px;
}

.remove-widget .ui-icon:before {
	font-size: 20px;
	color: #FF3907;
}

.dashboard-selection {
	padding: 10px;
}

.dashboard-selection div.hidden-widget {
	background: #fff;
	margin-bottom: 10px;
	padding: 10px;
	border-radius: 3px;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
}

.dashboard-selection div.hidden-widget h6 {
	font-weight: bold;
	margin: 0px;
	font-size: 1em;
	word-break: break-all
}

.dashboard-selection div.hidden-widget p {
	font-size: 0.9em;
	margin: 5px;
	word-break: break-word;
	color: #8a8a8a;
}

.selection-container {
	width: 300px;
	background-color: #8c8c8c;
	box-shadow: -2px 0px 4px rgba(0, 0, 0, 0.3);
	position: relative;
}

.selection-container>div {
	border: none;
}

.preset-dashboard {
	background-color: transparent;
	border-top: 2px solid #333;
}

.preset-dashboard .dark-table th, .preset-dashboard .dark-table td {
	border: none;
	background-color: #6b6b6b !important;
	color: white !important;
}

.preset-dashboard .dark-table tr {
	border: 1px solid #4a4a4a;
}

.selection-container .my-dashboard-title, .preset-dashboard .my-dashboard-title
	{
	background-color: #6b6b6b;
	color: white;
}

/* ==============================================
					CSS WIDGETS 
================================================= */

/* CUSTOMIZED ICON */

.unapproved-status, .ui-abort {
	background-color: rgba(51, 153, 255, 1);
	color: white;
	font-size: 11px;
	padding: 6px;
	font-weight: bold;
}

.ui-abort {
	background-color: #F55F63;
}

span.green-icon i.fa::before {
	color: #00ACC1;
}

span.red-icon i.fa::before {
	color: #f35458;
}

.danger-icon .fa::before,
.red-color {
	color: #F55F63;
}

.danger-icon .fa::before,
.red-color {
	color: #F55F63;
}

.warning-icon .fa::before,
.yellow-color {
	color: #FFCC33;
}



.big-size *,
.big-size .fa::before{
	font-size: 1.1em;
}
.big-blue-icon.fa::before {
	font-size: 16px;
	color: #6086d5;
}
.light-blue-icon.fa::before {
	color: #6086d5
}

.synfaces-card-container .synfaces-dashpane-panel.ui-panel.ui-widget{
	padding-bottom: 0;
}

.super-big-size .fa::before{
	font-size: 24px;
}

/*======================================= 
			DASHPANE LAYOUT 
=========================================*/
.synfaces-card-container .synfaces-dashpane-panel .ui-panel.ui-widget{
	padding-bottom: 0;
}

div.synfaces-card-container div.synfaces-dashpane-panel>div.ui-widget-header {
	display: flex;
	font-weight: 700;
	padding: 10px 18px !important;
	align-items: center;
	height: 35px;
	box-sizing: border-box;
	flex-shrink: 0;
	font-size: 1.2em;
	background-color: #3d6dcc !important;
	color: #ffff !important;
	/* border-bottom:1px solid var(--syn-border-color) !important; */
	border: none;
	border-radius: 0;
	border-bottom: 1px solid #3d6dcc;
}
div.synfaces-card-container div.synfaces-dashpane-panel>div.ui-widget-header.ui-paginator-bottom{
	background-color: #ffff !important;
	border-bottom: none;
}
div.synfaces-card-container .synfaces-label-with-padding{
	color: #ffff;
}

div.synfaces-dashpane-panel .ui-paginator-bottom {
	justify-content: center;
}

td.hide-first-td-table {
	display: none;
}

div.header-link button.header-pure-icon {
	background: transparent;
	border: none;
}

div.header-link a {
	font-size:0.9em;
	vertical-align:text-top;
	display:initial;
}


/* CUSTOMIZED TABLE */


.synfaces-dashpane-panel .customized_table.ui-datatable>.ui-datatable-tablewrapper>table>thead>tr>th,
.synfaces-dashpane-panel .customized_table.ui-datatable>.ui-datatable-tablewrapper>table>tbody>tr>td {
	padding: 10px 15px;
}


.synfaces-dashpane-panel .customized_table div.ui-datatable-tablewrapper table thead tr th.ui-state-default,
.synfaces-dashpane-panel .customized_table div.ui-datatable-tablewrapper table tbody tr.ui-widget-content td,
.synfaces-dashpane-panel .no-border-table div.ui-datatable-tablewrapper table tbody tr.ui-widget-content td{
	border-right: none;
	border-left: none;
}

.synfaces-dashpane-panel span.ui-column-title {
	font-size: 1.1em;
	color: #576D8D;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 12px);
}

.table-config {
	width: 100% !important;
}

.ui-datatable.table-config div.ui-datatable-tablewrapper table tbody td
	{
	border: unset !important;
	overflow: unset !important;
	padding: 10px 8px;
}

.table-config .ui-datatable-header {
	background-color: white;
}

.table-config .name_emp {
	font-size: 14px;
	display: block;
	margin-bottom: 5px;
}

.normal-size {
	font-size: 1em;
}

.remove-thead thead {
	display: none !important;
}

.table-config tr:nth-child(even), 
.table-config tr:nth-child(odd) {
	background: #fff
}

.item-container {
	width: 20%;
}
td.item-container:nth-child(3){
	width: 22%;
}
td.item-container:last-child{
	padding-left: 0; 
}

.customized_table.datatable-no-header thead{
	display: none;
}

/* CUSTOMIZE FOR TOP 10 SALES AND SUPPLIER PURCHASES  WIDGETS*/

div.customized_table.ui-datatable.top_ten_table > .ui-datatable-tablewrapper > table > tbody > tr > td:nth-child(1) {
	padding-right: 5px;
}
div.customized_table.ui-datatable.top_ten_table > .ui-datatable-tablewrapper > table > tbody > tr > td{
	padding: 8px 20px;
	vertical-align: center;
}
div.customized_table.ui-datatable.top_ten_table > .ui-datatable-tablewrapper > table > tbody > tr > td:nth-child(2) {
	padding-left: 10px;
}

.top_ten_table table tr:nth-child(1) td.index::before,
.top_ten_table table tr:nth-child(2) td.index::before,
.top_ten_table table tr:nth-child(3) td.index::before{
	content: "\f091";
	font-family:var(--fontawesome);
	margin-right: 7px;
	font-size: 1.5em;
	margin-left: -20px;
}
.top_ten_table table tr:nth-child(1) td.index::before{
	color: #ffcc33;
}
.top_ten_table table tr:nth-child(2) td.index::before{
	color: #c9c9c9;
}
.top_ten_table table tr:nth-child(3) td.index::before{
	color: #cc9933;
}

div.customized_table.ui-datatable.top_n_table > .ui-datatable-tablewrapper > table > tbody > tr > td:nth-child(1) {
	padding-right: 5px;
}
div.customized_table.ui-datatable.top_n_table > .ui-datatable-tablewrapper > table > tbody > tr > td{
	padding: 15px 20px;
	vertical-align: center;
}
div.customized_table.ui-datatable.top_n_table > .ui-datatable-tablewrapper > table > tbody > tr > td:nth-child(2) {
	padding-left: 10px;
}

.top_n_table table tr:nth-child(1) td.index::before,
.top_n_table table tr:nth-child(2) td.index::before,
.top_n_table table tr:nth-child(3) td.index::before{
	content: "\f119";
	font-family:var(--fontawesome);
	margin-right: 7px;
	font-size: 1.5em;
	margin-left: -15px;
}
.top_n_table table tr:nth-child(1) td.index::before{
	color: #FF0000;
}
.top_n_table table tr:nth-child(2) td.index::before{
	color: #ff7e00;
}
.top_n_table table tr:nth-child(3) td.index::before{
	color: #ffd966;
}


/*================================ 
CUSTOMIZED CHART 
================================ */

/* CUSTOMIZED PIE CHART */
.pie-chart .jqplot-series-canvas,
.pie-chart .jqplot-series-canvas,
.pie-chart .jqplot-grid-canvas{
	border: 1px solid transparent;
}

.pie-chart .jqplot-base-canvas,
.pie-chart .jqplot-grid-canvas {
	box-shadow: .1px .1px #fff;
}

.pie-chart .jqplot-series-canvas {
	background: white;
	box-shadow: 5px 10px #fff;
}

.pie-chart .jqplot-grid-canvas {
	width: 0px !important;
}

div.jqplot-title {
	text-align: left !important;
	font-size: 1rem;
	font-weight: bold;
	left: 20px !important;
	top: 15px !important;
	z-index: 9;
	max-width: 300px !important;
}

.pie-chart table.jqplot-table-legend, .pie-chart table.jqplot-cursor-legend {
	background-color: #fff;
	border: none;
	position: absolute;
	font-size: 13px;
	font-weight: bold;
}

.pie-chart > div {
	box-sizing:border-box;
}

/* CUSTOMIZED PROGRESS BAR */

.cpu-bar-style .ui-progressbar-value {
	background: #4CC5F2;
	max-width: 100%;
}

.cpu-bar-style {
	background-color: #F2F2F2;
}

.ui-progressbar {
	height: 30px;
	vertical-align: middle;
	line-height: 30px;
}

.dashboard-layout-sort-header-condition{
	margin-left: 30px;
}

.dashboard-layout-sort-header-condition #j_idt2657\:financeYear {
	min-width: 80px !important;
}

/*===========================================================================
			SUPPLIER DELIVERY PERFORMANCE
============================================================================= */
.supplier-deliver-performance-container .customized_table .ui-datatable > .ui-datatable-tablewrapper > table[role="grid"]{
	table-layout: fixed;
}
	
.supplier-performance-table .white-percent{
	color: white;
} 
 
.supplier-performance-table .ui-column-title{
	display: flex;
}
.status-title.flex-row{
	justify-content: space-between;
	width: 100%;
}

.supplier-deliver-performance-container .ui-paginator {
	top: 0;
	right: 0;
	position: absolute;
	background: transparent;
	border: none;
}

.supplier-performance-table .syn-table-column-name:last-child {
	position: relative;
}

tbody.ui-datatable-data > tr:visited{
	background-color: red !important;
}

/*===========================================================================
					APPROVAL SUMMARY 
============================================================================= */
.approval-summary-dashboard.company-panel{
	padding: 15px;
	border-radius: 3px;
	box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
	margin: 1em 1em 0 1em;
	background: #ffff;
	position: relative;
}
.approval-summary-dashboard.company-panel .ui-widget-content{
	border: none;
}
.approval-summary-dashboard.actived-panel div.ui-g-10{
	color: #6086d5;
	
}
.approval-summary-dashboard a.number-link{
	border-right: 1px solid #e4e4e4;
	text-align: right;
}
.approval-summary-dashboard.company-panel .company-panel-title{
	font-weight: bold;
}
.approval-summary-dashboard.company-panel.actived-panel .company-panel-title{
	color: #FF9966;
	
}
.approval-summary-dashboard table.ui-datagrid-data:not([role="grid"]){
	width: 100%;
}
.approval-summary-dashboard .ui-datagrid-row{
	/* display: flex;
    flex-flow: row wrap;
    justify-content: flex-start; */
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(23em, 1fr));
	grid-gap: 1vw;
}
.approval-summary-dashboard .company-panel-body .fa{
	width: 30px;
	text-align: center;
}
.approval-summary-dashboard.company-panel td.ui-datagrid-column{
	padding: 0;
	display: flex;
	margin-top: 7px;
	margin-bottom: 7px;
	align-items: center;
	justify-content: space-between;
}
 
.approval-summary-dashboard.actived-panel .triangle-topleft { 
	border-top: 26px solid #FF9966; 
	border-right: 26px solid transparent; 
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	left: 0;
}
.CLA{
	background: #00CCCC;
	padding: 0.2em;
	color: #fff;
	height: 2em;
	vertical-align: middle;
	line-height: 2em;
	text-align: center;
	width: 30px;
}

.approval-summary-dashboard td.ui-datagrid-column:empty{
	display: none;
}

/*===========================================================================
					CERTIFICATION EXPIERY
============================================================================= */
.cetificate-expiry-widget, .work-pass-expiry-widget{
	position: relative;
}
.work-pass-expiry-widget-subtitle{
	position: absolute;
	right: 10px;
	top: 5px;
}
.work-identification-subtitle:empty{
	display: none;
}
.cetificate-expiry-widget-subtitle {
	position: absolute;
	right: 10px;
	top: 10px;
}

/*===========================================================================
					NEWLY AWARDED CONTRACT
============================================================================= */
.space-between-header .ui-datatable-header{
	justify-content: space-between;
}

.mb-5{
	margin-bottom: 5px;
}

/*===========================================================================
			Top X Selling Inventory
============================================================================= */
	.top-selling-inventory .field-inventory {
		margin: 10px 10px 5px 15px;
		border-radius: 5px;
		box-shadow: 0px 1px 5px #D9D9D9;
	}
	
	.top-selling-inventory .grid-noborder.ui-panelgrid>*>tr, .grid-noborder.ui-panelgrid .ui-panelgrid-cell{
		border: none;
	}
	
	.top-selling-inventory .img-inventory {
		height: 60px;
		width: 60px;
	}
	
	.top-selling-inventory .status-title.flex-row {
		justify-content: space-between;
	}
	.top-selling-inventory .fa:before {
		color: #e4e4e4
	}
	
	.top-selling-inventory .fa-trophy:before {
		font-size: 3em;
	}
	
	.top-selling-inventory .image-cup-0.fa-trophy:before {
		color: #f4e5ae;
	}
	
	.top-selling-inventory .image-cup-1.fa-trophy:before {
		color: #d7d7d7;
	}
	
	.top-selling-inventory .image-cup-2.fa-trophy:before {
		color: #f3eacb;
	}
	
	.top-selling-inventory .trapezoid {
		border: 20px solid transparent;
		border-top: 0;
		height: 0;
		width: 19px;
		position: absolute;
		top: 4px;
		right: -15px;
		transform: rotate(45deg);
		box-shadow: 4px 1px 1px #D9D9D9;
	}
	
	.top-selling-inventory .index{
		color: #ffff;
	}
	.top-selling-inventory span.ui-panel-title{
		width: 100%;
	}
	.top-selling-inventory .right-card{
		position: absolute;
		right: 0;
		top: 0;
	}
	.top-selling-inventory .fa.fa-trophy{
		position: absolute;
		top: 25px;
		right: 10px;
	}
	.top-selling-inventory .syn-table-column-short-name{
		width: calc(60% - 70px);
		max-width: 400px;
	}
	.top-selling-inventory .syn-table-column-amt{
		width: calc(40% - 25px);
		max-width: 300px;
	}
	.top-selling-inventory .top-products-image{
		min-width: 70px;
	}

/*===========================================================================
			Sales Hit rate ratio
============================================================================= */
.powderblue{
	background-color:#49d3d6!important;
}


/*===========================================================================
			Sales Leader Board
============================================================================= */
.sales-leader-board-form {
	position: relative;
}

.top-sales-leader-container {
	padding: 20px 30px;
	position: absolute;
	display: flex;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	justify-content: center;
	height: 180px;
}

.top-sales-leader-container * {
	color: #ffff;
}

.top-sales-leader {
	margin: 0 20px;
	text-align: center;
	width: 100px;
}

.background-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

div.top-sales-leader:nth-child(1) img {
	border: 3px solid #fc3;
}

div.top-sales-leader:nth-child(2) img {
	border: 3px solid #e4e4e4;
}

div.top-sales-leader:nth-child(3) img{
	border: 3px solid #c93;
}

.sales-leader-board-form  img {
	width: 60px;
	height: 60px;
}

div.top-sales-leader:nth-child(1) img{
	width: 75px;
	height: 75px;
}

.sales-leader-board-top .fa-trophy::before {
	position: absolute;
	left: 35px;
	top: 40px;
	font-size: 30px;
	padding: 8px 10px;
	border-radius: 50%;
	background-color: #3b3b3b;
}
div.top-sales-leader:nth-child(1){
	order: 3;
}
div.top-sales-leader:nth-child(2){
	order: 2;
}
div.top-sales-leader:nth-child(3){
	order: 3;
}

div.top-sales-leader:nth-child(1)  .fa-trophy::before {
	color: #fc3;
	left: 45px;
}

div.top-sales-leader:nth-child(2) .fa-trophy::before {
	color: #e4e4e4;
}

div.top-sales-leader:nth-child(3) .fa-trophy::before {
	left: 40px;
	top: 43px;
	color: #c93;
}

.top-sales-leader-image {
	position: relative;
	height: 100px;
}

.top-sales-leader-image .fa-trophy::before {
	position: absolute;
	left: 35px;
	top: 40px;
	font-size: 30px;
	color: #fff;
	padding: 8px 10px;
	border-radius: 50%;
	background-color: #3b3b3b;
}

.sales-leader-board-name{
	margin-left : 15%;
}
.sales-leader-remain-table{
	margin-top: 180px;
}
.sales-leader-board-amt{
	margin-right : 10%;
}

.sales-leader-board .customized_table.ui-datatable > .ui-datatable-tablewrapper > table > tbody > tr > td:first-child{
	padding-left: 23%;
}

.sales-leader-board .sales-leader-board-form .top-sales-leader-container .sales-name-and-amt .ellipsis
	{
	max-width: 12ch;
}

.sales-leader-board .sales-leader-board-form .top-sales-leader-container .sales-name-and-amt:hover span
	{
	white-space: normal;
	max-height: 45px;
}

.top-selling-inventory .ui-selectonemenu.ui-state-default .ui-inputfield{
	padding: 2px;
}
.synfaces-dashpane-panel .ui-datatable-header.ui-widget-header .ui-icon::before{
		color: #ffff !important;
}

.synfaces-dashpane-panel  .primary-icon-button .ui-icon::before {
	color: var(--action-icon-default);
}

/* */

.chart-label{
	font-size: 1.1em;
}
.chart-detail{
	font-size: 1.6em;
}

.profitability-ratio-table tbody tr:nth-child(2),
.liquidity-radio-table tbody tr:nth-child(2){
			border-bottom: 1px solid #e4e4e4;
}
.profitability-ratio-container .ui-panelgrid .ui-panelgrid-cell,
.profitability-ratio-container .ui-widget-content,
.liquidity-ratio-container .ui-panelgrid .ui-panelgrid-cell,
.liquidity-ratio-container .ui-widget-content{
	border: none;
	background: transparent;	
}

.profitability-ratio-container .ui-panelgrid tr td.ui-panelgrid-cell:nth-child(2),
.liquidity-ratio-container .ui-panelgrid tr td.ui-panelgrid-cell:nth-child(2){
	text-align:right;
}

.widget-form-table div.ui-datatable > div.ui-datatable-header {
	display: flex;
	font-weight: 700;
	padding: 10px 10px !important;
	align-items: center;
	height: 35px;
	box-sizing: border-box;
	flex-shrink: 0;
	display: inline-block;
	font-size: 1.2em;
	background-color: #3d6dcc !important;
	color: #ffff !important;
	border: none;
	border-radius: 0;
	border-bottom: 1px solid #3d6dcc;
	overflow: hidden;
}

.widget-form-table span.synfaces-float-right {
	height: 23px !important;
	width: 150px;
	position: relative;
	top: -5px;
}

@media only screen and (max-width: 768px) {
	div.dashboard-settings div.my-dashboard-layout {
		grid-template-columns: 1fr;

	}
}

.plain-date-label > div.ui-selectonemenu {
	border: none !important;
	background: none;
	cursor: pointer;
}
.plain-date-label > div.ui-selectonemenu label.ui-selectonemenu-label{
	font-weight: bold;
	text-align: right;
}
.data-grid-table .ui-g-4,
.data-grid-table .ui-md-6{
	padding: 0.14em 0.5em;
}
.employee-absent .p-datepicker.ui-calendar,
.employee-absent .p-datepicker.ui-calendar input{
	width: 80px;
	text-align: center;
	font-weight: bold;
	border: none;
    background: transparent;
}
.employee-absent .p-datepicker.ui-calendar input.ui-state-hover {
	outline: none !important;
}
.employee-absent .previous-date-btn,
.employee-absent .next-date-btn{
	background: transparent;
	border: none;
}

.employee-absent .previous-date-btn.ui-state-hover .ui-icon::before,
.employee-absent .next-date-btn.ui-state-hover .ui-icon::before{
	color: var(--text-field-icon-hover);
}
.employee-absent .previous-date-btn .ui-icon::before,
.employee-absent .next-date-btn .ui-icon::before{
	font-size: 12px;
	color: #CFD8DC;
}

.OtMonitorPanel button::before {
	color: #CFD8DC;
}

/*===========================================================================
						GRN SUMMARY
============================================================================= */
.grn-summary-tabs-container{
	background-color: #f8f8f8;
	padding-right: 3px;
}
.grn-summary-tab.flex-row{
	justify-content: space-between;
	padding-left: 1.5em;
	padding-right: 1.5em;
	background-color: #ffff;
}
.grn-summary-tabs-container .grn-summary-tab.flex-row {
	padding-left: 5px;
}
.grn-summary-tab .flex-row{
	flex: 1;
	cursor: pointer;
}
.grn-summary-tab.flex-row:hover{
	background-color: #f2f8ff;
}
button.grn-summary-tab-btn:hover,
button.grn-summary-tab-btn.ui-button.ui-state-default{
	background-color: transparent;
	flex: 1;
	text-align: left;
	padding-top: 2em;
	padding-bottom: 2em;
	color: var(--action-icon-default);
	font-weight: bold;
}
.grn-summary-tab.flex-row.activeTab{
	border-left: 5px solid #1075E4;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
    background-color: #f2f8ff;
	
}
.icon-image{
	width: 30px;
	height: 30px;
}

.box-shadow{
	box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
}

button.no-border-btn.ui-button.ui-state-default{
	border: none;
}

button.no-border-btn.ui-button.ui-state-default .ui-button-text {
	padding: 0.5em 5px;
}
.grn-summary-container .ui-content-wrapper {
	display: grid;
    grid-template-columns: 5fr 7fr;
    width: 100%;
}
.grn-summary-container .ui-content-wrapper .grn-summary-tab {
	display: grid;
    grid-template-columns: 30px 100px 40px;
    min-width: max-content;
    padding-right: 5px;
}
.grn-summary-container .ui-content-wrapper .grn-summary-tab.activeTab {
	padding-right: 0px;
}
/*===========================================================================
						Outstanding Purchase Order
============================================================================= */
.outstanding-purchase-order-raised-date {
	color: red;
}

.outstanding-purchase-order-raised-date::before {
	color: red !important;
}

/*===========================================================================
						Outstanding AP Invoice
============================================================================= */
.outstanding-ap-invoice-due-date {
	color: red;
}

.outstanding-ap-invoice-due-date::before {
	color: red !important;
}

/*===========================================================================
						Expired
============================================================================= */
.expired {
	color: red;
}

.expired::before {
	color: red !important;
}
.not-expired {
	color: green;
}
.not-expired::before {
	color: green !important;
}


/*===========================================================================
							 NEW DASHBOARD
============================================================================= */

.text-center {
	text-align: center !important;
}

.text-left {
	text-align: left !important;
}

div.my-dashboard-widget > form {
	height: 100%;
}

.synfaces-card-container .synfaces-dashpane-panel.ui-widget{
	border-radius: 10px;
	position: relative;
	overflow-y: auto;
	overflow-x: hidden;
}

div.synfaces-card-container div.synfaces-dashpane-panel.ui-widget > .ui-widget-header {
	background-color: #FFFFFF !important;
	color: #333333 !important;
	padding: 13px 15px 33px 15px !important;
	display: inline-block;
	line-height: 1.2em;
	width: 100%;
}

div.synfaces-card-container div.synfaces-dashpane-panel.ui-widget > .ui-widget-header .ui-panel-title {
	font-size: 14px;
	font-weight: 700;
}

div.synfaces-card-container div.synfaces-dashpane-panel.ui-widget > .ui-widget-content {
	
}

div.synfaces-card-container div.synfaces-dashpane-panel.ui-widget > .ui-widget-content > form.widget-filter-form  {
	position: absolute;
    top: 11px;
    right: 0px;
    z-index: 100;
}

div.synfaces-card-container div.synfaces-dashpane-panel.ui-widget > .ui-widget-content > form.widget-filter-form .material-symbols-outlined {
	color: #3a86ff;
  	padding-right: 10px;
} 

div.synfaces-card-container div.synfaces-dashpane-panel.ui-widget > .ui-widget-content > form.widget-filter-form .material-symbols-outlined.no-filter {
	color: #CBCBCB;
}

div.synfaces-card-container div.synfaces-dashpane-panel.ui-widget > .ui-widget-content > form.widget-filter-form .widget-filter-count {
	position: absolute;
    right: 8px;
    top: -2px;
    background-color: #3a86ff;
    line-height: 12px;
    z-index: 100;
    width: 12px;
    border-radius: 50%;
    color: #fff;
    font-size: 9px;
    text-align: center;
}

div.synfaces-card-container div.synfaces-dashpane-panel.ui-widget > .ui-widget-content > form.widget-filter-form .ui-overlaypanel {
	width: 320px;
	background-color: #F0F1F5;
	border-radius: 10px;
    /* right: 0px; */
}

.synfaces-dashpane-panel .ui-overlaypanel .ui-overlaypanel-content {
	padding: 5px;
	background-color: #F0F1F5;
}

.synfaces-dashpane-panel .ui-overlaypanel .ui-overlaypanel-content .ui-datascroller-content {
	background-color: #F0F1F5;
	border-bottom-color: transparent;
}

.synfaces-dashpane-panel .ui-overlaypanel .ui-overlaypanel-content tbody input:hover,
.synfaces-dashpane-panel .ui-overlaypanel .ui-overlaypanel-content tbody .synfaces-grid-value > .ui-selectonemenu:hover {
	border-color: #3A86FF !important;
}

.synfaces-dashpane-panel .ui-overlaypanel .ui-overlaypanel-content tbody input[type="text"]:not([readonly]):not([disabled]):not(:focus):not(.ui-state-error),
.synfaces-dashpane-panel .ui-overlaypanel .ui-overlaypanel-content tbody .synfaces-grid-value > .ui-selectonemenu {
	border-color: transparent;
}

.synfaces-dashpane-panel .ui-overlaypanel .ui-overlaypanel-content table td.date-from-to .synfaces-grid-value input,
.synfaces-dashpane-panel .ui-overlaypanel .ui-overlaypanel-content table td.date-from-to .synfaces-grid-value span.ui-calendar {
	width: 140px !important;
}

.synfaces-dashpane-panel .ui-overlaypanel .ui-overlaypanel-content table td.date-from-to .synfaces-grid-value span {
	width: 20px; 
	display: inline-block; 
	text-align: center;
}

.synfaces-dashpane-panel .ui-overlaypanel .ui-overlaypanel-content table td.date-from-to .synfaces-grid-value div:has(span.fa-icon) {
	width: 20px; 
	display: inline-block; 
	text-align: center;
}

.synfaces-dashpane-panel .ui-overlaypanel .ui-overlaypanel-content table .synfaces-grid-item.full-field .synfaces-grid-value input {
	width: 100%;
}

.synfaces-dashpane-panel .ui-overlaypanel .ui-overlaypanel-content table.synfaces-form-grid-table tbody > tr > td.synfaces-grid-item {
	padding: 5px 0;
}

.synfaces-dashpane-panel .ui-overlaypanel .ui-overlaypanel-content .synfaces-grid-label {
	color: #8d8d8d;
	margin-bottom: 5px;
}

.synfaces-dashpane-panel .ui-overlaypanel .ui-corner-all {
	border-radius: 5px;
}

.synfaces-dashpane-panel .ui-overlaypanel .ui-state-focus {
	border: 1px solid #3A86FF;
}

.synfaces-dashpane-panel .ui-overlaypanel .ui-selectonemenu-trigger {
	border: 1px solid transparent;
}

.synfaces-dashpane-panel .e22-summary-datatable table thead tr th,
.synfaces-dashpane-panel .e22-summary-datatable table tbody tr td {
	border: none;
}

.synfaces-dashpane-panel .e22-summary-datatable table thead tr th {
	background-color: #E1E6EE;
}

.synfaces-dashpane-panel .e22-summary-datatable table thead tr th.align-right {
	text-align: right !important;
}

.synfaces-dashpane-panel .e22-summary-datatable table thead tr th.text-left {
	text-align: left !important;
}

.v .e22-summary-datatable table thead tr span.ui-column-title {
	font-size: 1em;
}

.synfaces-dashpane-panel .e22-summary-datatable table tbody,
.synfaces-dashpane-panel .e22-summary-datatable table tbody tr {
	border: none;
	border-bottom: 1px solid var(--syn-border-color);
}

.synfaces-dashpane-panel .e22-summary-datatable td:has(.col-image-with-desc) {
	padding-top: 5px;
	padding-bottom: 5px;
	border: none !important;
} 

.synfaces-dashpane-panel .e22-summary-datatable .col-image-with-desc {
	display: grid;
    grid-template-columns: 46px 1fr;
    grid-column-gap: 10px;
}

.synfaces-dashpane-panel .e22-summary-datatable .col-image-with-desc .synfaces-image-item-button {
	height: 46px;
}

.synfaces-dashpane-panel .e22-summary-datatable .col-image-with-desc img {
	width: 46px; 
	height: 46px; 
	border-radius: 10px;
}

.synfaces-dashpane-panel .e22-summary-datatable .col-image-with-desc .text-code {
	height: 14px;
	font-weight: bold;
	white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
/*     width: calc(100% - 70px); */
}

.clearfix {
	overflow: auto;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.synfaces-dashpane-panel .e22-summary-datatable .col-image-with-desc .text-desc {
	height: 28px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.synfaces-dashpane-panel .e22-summary-datatable .col-image-with-desc .desc-show-two-line {
/* 	display: table-cell;  */
/* 	vertical-align: middle; */
}

.synfaces-dashpane-panel .e22-summary-datatable .e22-column-quantity {
	text-align: right !important; 
	padding-right: 10px;
}

div.synfaces-dashpane-panel .ui-paginator.ui-paginator-bottom {
	background-color: #fff;
    border: none;
    padding: 5px;
}

div.synfaces-dashpane-panel .ui-paginator.ui-paginator-bottom a.ui-paginator-page {
	border-radius: 5px;
	border: unset;
	padding: 3px 7px;
	font-weight: 500;
}

div.synfaces-dashpane-panel .ui-paginator.ui-paginator-bottom .ui-paginator-current {
	font-weight: 500;
}

div.synfaces-dashpane-panel .ui-paginator.ui-paginator-bottom a.ui-paginator-prev,
div.synfaces-dashpane-panel .ui-paginator.ui-paginator-bottom a.ui-paginator-next,
div.synfaces-dashpane-panel .ui-paginator.ui-paginator-bottom a.ui-paginator-first,
div.synfaces-dashpane-panel .ui-paginator.ui-paginator-bottom a.ui-paginator-last {
	border: none;
	border-radius: 5px;
}

div.synfaces-dashpane-panel .ui-paginator.ui-paginator-bottom a.ui-paginator-prev > span.ui-icon,
div.synfaces-dashpane-panel .ui-paginator.ui-paginator-bottom a.ui-paginator-next > span.ui-icon,
div.synfaces-dashpane-panel .ui-paginator.ui-paginator-bottom a.ui-paginator-first > span.ui-icon,
div.synfaces-dashpane-panel .ui-paginator.ui-paginator-bottom a.ui-paginator-last > span.ui-icon {
	width: 7px;
}

div.synfaces-dashpane-panel .ui-paginator.ui-paginator-bottom a.ui-paginator-prev:hover,
div.synfaces-dashpane-panel .ui-paginator.ui-paginator-bottom a.ui-paginator-next:hover,
div.synfaces-dashpane-panel .ui-paginator.ui-paginator-bottom a.ui-paginator-first:hover,
div.synfaces-dashpane-panel .ui-paginator.ui-paginator-bottom a.ui-paginator-last:hover {
	background-color: #C8C8C8;
}

div.synfaces-dashpane-panel .ui-paginator.ui-paginator-bottom a.ui-paginator-page.ui-state-active {
	background-color: rgb(200, 200, 200);
	color: var(--syn-text-color);
}
div.synfaces-dashpane-panel .ui-paginator.ui-paginator-bottom a.ui-paginator-page.ui-state-hover,
div.synfaces-dashpane-panel .ui-paginator.ui-paginator-bottom a.ui-paginator-page.ui-state-focus {
	background-color: rgb(200, 200, 200);
}

.my-dashboard-widget > div >  .ui-widget-content table thead {
	position: relative;
}

.my-dashboard-widget > div >  .ui-widget-content table th .ui-icon-carat-2-n-s {
	width: auto;
	position: absolute;
    top: 12px;
    padding-left: 2px;
}

.my-dashboard-widget > div >  .ui-widget-content table th .ui-icon-carat-2-n-s:before {
	font-size: 9px;
	color: #C8C8C8;
}

/* style sheet for icomoon.io */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

.icon-Filter-O {
	font-size: 18px;
    color: red;
}

.dashboard-layout-sort-header-container {
	margin: auto;
    padding: 11.5px 15px 11.5px 0;
}

.dashboard-layout-sort-header-condition label {
	font-size: 14px;
	color: #333;
}

.dashboard-layout-sort-header-condition .ui-selectonemenu.ui-state-default {
	border: none;
    border-radius: 5px;
}

.dashboard-layout-sort-header-condition .ui-selectonemenu .ui-selectonemenu-trigger span.ui-icon-triangle-1-s {
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.dashboard-layout-sort-header-condition .ui-selectonemenu .ui-selectonemenu-trigger span.ui-icon-triangle-1-s::before {
	content: "\f107"
}

.e23 .dashboard-initial-wrapper {
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
	width: 100%;
    background-color: #f0f1f5;
}

.e23 .dashboard-initial-wrapper .text-description {
	font-size: 15px;
    color: #555555;
    text-align: center;
    line-height: 16px;
}

.e23 .dashboard-initial-wrapper .text-description + .text-description {
	padding-top: 20px;
}

.e23 .dashboard-initial-wrapper .text-description-highlight {
	font-weight: 700;
    color: #1976D2;
}

.e23 .dashboard-initial-wrapper .text-description-highlight:hover {
	text-decoration: none;
}

/* WIDGET IN MANAGEMENT SCREEN */

.e23 .management-form .my-dashboard-layout {
	height: auto;
	overflow: hidden;
	grid-auto-rows: 290px;
}
.e23 .management-form .my-dashboard-layout.grid-3-column {
	grid-template-columns: 33% 33% 33%;
}

/* FILTER INSET */
.synfaces-dashpane-panel .ui-overlaypanel-content .synfaces-grid-value:has(.e22-report-filter-value) {
	display: flex;
}

.synfaces-dashpane-panel .ui-overlaypanel-content .e22-report-filter-value.selected-value-wrapper {
	width: 100%;
}

.synfaces-dashpane-panel .ui-overlaypanel-content .e22-report-filter-value.selected-value-wrapper.has-value {
	background: #FFF;
	border-radius: 5px;
	padding: 10px 5px;
	display: grid;
	grid-gap: 6px;
	position: relative;
}

.synfaces-dashpane-panel .ui-overlaypanel-content .e22-report-filter-value.selected-value-wrapper.has-value .selected-value-item {
	background-color: #EEE;
	border-radius: 10px;
	padding-left: 8px;
	margin-right: 20px;
}

.synfaces-dashpane-panel .ui-overlaypanel-content .e22-report-filter-value.selected-value-wrapper.has-value .selected-value-item > input {
	display: inline-block;
	width: calc(100% - 30px) !important;
	white-space: nowrap;
	overflow: hidden !important;
	text-overflow: ellipsis;
	border: none;
	user-select: none;
	line-height: 20px;
}

.synfaces-dashpane-panel .ui-overlaypanel-content .e22-report-filter-value.selected-value-wrapper.has-value .selected-value-item > button {
	border: none;
}

.synfaces-dashpane-panel .ui-overlaypanel-content .e22-report-filter-value.selected-value-wrapper.has-value .selected-value-item > button .ui-icon:before {
	color: var(--text-field-icon);
}

.synfaces-dashpane-panel .ui-overlaypanel-content .e22-report-filter-value.selected-value-wrapper.has-value .selected-value-item > button.ui-state-hover .ui-icon:before {
	color: var(--action-icon-warning-hover);
}

.synfaces-dashpane-panel .ui-overlaypanel-content .e22-report-filter-value .btn-multiple-search {
	width: 100%;
	background: #FFF;
	height: 22px;
	border: none;
}

.synfaces-dashpane-panel .ui-overlaypanel-content .e22-report-filter-value .btn-multiple-search .ui-icon {
	right: 4px;
	left: unset;
}

.synfaces-dashpane-panel .ui-overlaypanel-content .e22-report-filter-value .btn-multiple-search .ui-icon:before {
	color: var(--text-field-icon);	
}

.synfaces-dashpane-panel .ui-overlaypanel-content .e22-report-filter-value .btn-multiple-search.ui-state-hover .ui-icon:before {
	color: var(--text-field-icon-hover);	
}

.synfaces-dashpane-panel .ui-overlaypanel-content .e22-report-filter-value.selected-value-wrapper.has-value .btn-multiple-search {
	width: auto;
	background: transparent;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	right: -14px;
}

.e23 #dashboardList {
	position: absolute;
	bottom: 0px;
  	box-shadow: none;
}

.e23 #dashboardSelectionForm {
	display: flex;
}

.e23 #dashboardList a {
	background-color: transparent;
    color: #576D8D;
    box-shadow: none;
    padding: 8px 10px;
    border: none;
    margin-top: 7px; /* to make show in */
}

.e23 #dashboardList a.selected {
	background-color: #C0CBDC;
	position: relative;
}

.e23 #dashboardList a.selected:before {
	content: "";
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 7px solid #C0CBDC;
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
}

.synfaces-dashpane-panel .ui-overlaypanel div.ui-chkbox > div.ui-chkbox-box.ui-state-active {
	background-color: #3A86FF;
	border: none;
}

.synfaces-dashpane-panel .ui-overlaypanel div.ui-chkbox > div.ui-chkbox-box.ui-state-active .ui-chkbox-icon::before {
	color: white;
}

.employee-list .ui-datascroller-item > div {
	display: flex; 
	gap: 10px; 
	align-items: center; 
	padding: 10px 0px;
}
.ui-overlaypanel :has(>.ui-overlaypanel-content > .employee-list),
.ui-overlaypanel-content:has(> .employee-list),
.employee-list,
.employee-list .ui-datascroller-content,
.employee-list .ui-datascroller-list {
	background-color: rgb(211, 218, 228) !important;
}

.ui-v2 div.drag-handle {
	border-right-color: transparent;
	border-bottom-color: transparent;
}

.ui-v2 div.drag-handle::before,
.ui-v2 .widget-setting-btn .ui-icon:before {
	font-size: 24px;
	color: var(--action-icon-default);
	opacity: 1;
}

.ui-v2 .add-row .ui-icon:before,
.ui-v2 .remove-row .ui-icon:before, 
.ui-v2 .add-column .ui-icon:before,
.ui-v2 .remove-column .ui-icon:before {
	font-size: 20px;
	color: var(--action-icon-default) !important;
	opacity: 1;
}

.ui-v2 .remove-widget .ui-icon:before {
	color: var(--action-icon-warning);
	opacity: 1;
}

.ui-v2 div.displayed-widget {
	--bg-overlay: linear-gradient(rgba(240,241,245,0), rgba(240,241,245,0));
    --bg-url: none;
	border-radius: 15px;
}

.ui-v2 div.displayed-widget:hover {
	--bg-overlay: linear-gradient(rgba(240,241,245,0.9), rgba(240,241,245,0.9));
}

.ui-v2 div.displayed-widget .widget-controller {
	border-radius: 15px;
}

.ui-v2 div.displayed-widget:hover .widget-controller {
	border: 1px dashed #D3DAE4;
}

.ui-v2 div.drop-cell {
	border-color: transparent;
	border-radius: 15px;
}

.ui-v2 .widget-setting-panel {
    background-color: var(--drawer-background);
    border-radius: 15px;
    height: 100%;
}

.ui-v2 .widget-setting-panel .ui-widget-header {
	background-color: var(--drawer-background);
	position: relative;
}

.ui-v2 .widget-setting-panel .icomoon-Settings {
    font-size: 20px;
    color: #555;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    width: 20px;
}

.ui-v2 .widget-setting-panel .icomoon-Back::before {
	font-size: 20px;
    color: var(--action-icon-default);
}

.ui-v2 .widget-setting-panel .widget-setting-header {
	font-size: 15px;
    font-weight: bold;
    color: #555;
    margin-left: 30px;
}

.ui-v2 .widget-setting-panel > .ui-widget-content {
	background-color: var(--drawer-background);
    padding: 0px;
    height: 100%;
}

/* .ui-v2 .widget-setting-panel .ui-widget-content * {
	background-color: var(--drawer-background);
} */

.overlay-trigger {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.synfaces-grid-value:has( > .overlay-trigger)  {
    position: relative;
}

.widget-setting-panel table.synfaces-form-grid-table > tbody > tr > td.synfaces-grid-item {
	background-color: var(--drawer-background);
}