/*
 * synfaces.css
 */
:root {
	--e23-header-title-width: 500px;
	--e23-header-title-middle: 900px;
}
.mandatory::after {
	 content: " *";
	 color: #F86568;
}

.ui-datatable tbody tr td.mandatory::after {
	content:none;
}

.attention {
	color: #F86568 !important;
}


.append-alert-icon:after {
    content: "\00a0\f12a";
    color: #F86568 !important;
    font-size: 14px;
}


.heavy, .bold{
	font-weight:bold !important;
}

.italics {
	font-style:italic;
}

.italic{
	font-style: italic;
}

.form-container{
	box-sizing:border-box;
}

.dp-block {
	display: block;
}

.break-word {
	word-wrap: break-word;
}
.column-white-space-normal .ui-column-title{
	white-space: normal;
}
.border-collapse{
	border-collapse: collapse !important;
}
/*used for 1 line label-input??*/
.synfaces-label-with-padding {
	display: inline-block;
	padding-left: 5px;
	padding-right: 5px;
}

.truncate-two-lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
  overflow: hidden; 
  text-overflow: ellipsis;
}
 

/* syn:accordionWithNavigator */

.synfaces-accordion-navigator {
	display: inline-block;
	padding: 9px 0px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	z-index:10;
	background-color: #f8f8f8;
	border-top:1px solid #e4e4e4;
}

.synfaces-accordion-navigator > button:last-child {
	border-right: none;
}

.synfaces-accordion-navigator > button {
	cursor: pointer;
	background: none;
	border: none;
	border-right: 1px solid #e4e4e4;
	padding-left: 15px;
	padding-right: 15px;
	color:#333;
	font-weight:bold;
}

div.synfaces-accordion-with-navigator.ui-accordion {
	overflow: auto;
}

div.synfaces-accordion-with-navigator.ui-accordion > div.ui-accordion-content {
	border: none;
	margin-bottom: 15px;
	margin-top:-1px;
	background-color:#FFFFFF;
}

div.synfaces-accordion-with-navigator.ui-accordion > div.ui-accordion-content:last-of-type {
	min-height: calc(100% - 45px);
}

div.synfaces-accordion-with-navigator.ui-accordion > .ui-accordion-header {
	padding: 0.8em 0.5em 0.8em 2.1em;
	border:0px;
	font-size:1.1em;
	border-radius:0px;
	margin-top:-1px;
	background-color:#FFFFFF;
	color:#607DB8;
	border-top: 1px solid #e4e4e4;
	border-bottom:1px solid #e4e4e4
}

div.synfaces-accordion-with-navigator >.ui-accordion-header:first-child {
	border-top:none;
}

div.synfaces-accordion-with-navigator.ui-accordion > .ui-accordion-header:hover {
	background-color: #FFFFFF;
}

div.synfaces-accordion-with-navigator.ui-accordion >.ui-accordion-header.ui-state-active {
	background-color:#FFFFFF;
	border-bottom:none;
}

div.synfaces-accordion-with-navigator.ui-accordion >.ui-accordion-header.ui-state-active:hover{
	background-color:#FFFFFF;
}

div.synfaces-accordion-with-navigator.ui-accordion > .ui-accordion-header span::before {
	font-size:20px;
	color:#607DB8;
}

div.synfaces-accordion-with-navigator.ui-accordion > .ui-accordion-header .ui-icon{
	text-align:center;
	line-height:16px;

}
/*------------------------------------------------------  
ACCORDION FILTER PANEL
-------------------------------------------------------*/

.synfaces-accordion-filter-panel {
	margin-bottom:10px;
}

.synfaces-accordion-filter-panel.ui-accordion .ui-accordion-content table.synfaces-form-grid-table {
	table-layout: initial;
}

.synfaces-accordion-filter-panel.ui-accordion .ui-accordion-content table.synfaces-form-grid-table tbody tr td.synfaces-grid-label {
	font-weight:bold;
}


/****************** End of syn:accordionWithNavigator ******************/
.ui-button {
	border-radius:2px;
}

.e23 button.ui-button-text-only.ui-state-default {
	background-color: var(--action-icon-default);
	color: #FFF;
	border-radius: 5px;
	font-weight: normal;
}

.e23 button.ui-button-text-only:hover {
	background-color: var(--action-icon-default);
}

.ui-button-icon-only .ui-button-text,
.ui-button-text-only .ui-button-text {
	padding:0.5em 1em;
	line-height:13px;
}

.ui-button.ui-state-default.ui-button-text-only {
	background-color: var(--action-icon-default);
	border: none;
	color: #FFF;
	border-radius: 5px;
	font-weight: normal;
}

.ui-button-text-icon-left .ui-button-text {
	padding:0.5em 1em .5em 2.1em;
	line-height: 13px;
}

.ui-button-text-icon-right .ui-button-text {
	padding:0.5em 2.1em .5em 1em;
	line-height: 13px;
}

.ui-button-text-icon-right .ui-icon {
	text-indent: -5px !important;
}

.synfaces-button-bar {
	text-align: center;
	overflow: hidden;
}

.synfaces-button-bar button {
	vertical-align:top;
}

.synfaces-button-bar .e22-upload-button {
	vertical-align:top;
}

.synfaces-button-bar > .synfaces-float-right > * {
	margin-left:10px;
}

.synfaces-button-bar > .synfaces-float-left > *{
	margin-right: 10px;
}

.synfaces-float-right > button,
span.synfaces-float-right > button {
	margin-right:10px;
}
	
span.synfaces-float-right > button:last-child {
	margin:0px;
}

.synfaces-button-bar.synfaces-top-buttons button.e1-new-with-dns-button,
.synfaces-button-bar.synfaces-top-buttons button.primary-icon-button,
.synfaces-button-bar.synfaces-top-buttons button.danger-icon-button,
.primary-icon-button,
.danger-icon-button,
.primary-icon-button:hover,
.danger-icon-button:hover,
.row-action-primary,
.row-action-encourage,
.row-action-danger,
.row-action-primary:hover,
.row-action-encourage:hover,
.row-action-danger:hover {
	text-align:center;
	background-color:transparent !important;
	border:none !important;
}
.primary-icon-button,
.primary-icon-button .ui-icon:before,
.row-action-primary .ui-icon:before{
	color:#6086d5;
}

.row-action-encourage .ui-icon:before {
	color:#6086d5;
	color: var(--syn-icon-color); /* override - apply color for new E2a UI */
}


.danger-icon-button .ui-icon:before,
.row-action-danger .ui-icon:before {
	color:#F86568;
}

button.success-button,
.ui-dialog .ui-confirmdialog-yes,
button.green-button,
.synfaces-button-bar span button.ui-button.green-button {
	background-color: #72C5BC !important;
	color:#ffffff !important;
    /*border: 1px solid #26A69A !important;*/
    border:none !important;
}

button.success-button:hover,
.ui-dialog .ui-confirmdialog-yes:hover,
button.green-button:hover,
.synfaces-button-bar span button.ui-button.green-button.ui-state-hover {
	background-color: #4DB6AC !important;
	color:#ffffff !important;
   /* border: 1px solid #26A69A !important;*/
    border:none !important;
}

button.success-button:active,
.ui-dialog .ui-confirmdialog-yes:active,
button.green-button:active,
.synfaces-button-bar span button.ui-button.green-button.ui-state-focus {
	background-color: #26A69A !important;
	color:#ffffff !important;
	 border:none !important;
    /*border: 1px solid #219286 !important;*/
}

button.danger-button,
.synfaces-button-bar.synfaces-top-buttons button.e1-new-with-dns-button.danger-button,
.ui-dialog .ui-confirmdialog-no,
button.ui-button.red-button,
.synfaces-button-bar span button.ui-button.red-button {
	background-color: #E17B7E !important;
	color:#ffffff !important;
	 border:none !important;
    /*border: 1px solid #C25154 !important;*/
}

button.danger-button:hover,
.synfaces-button-bar.synfaces-top-buttons button.e1-new-with-dns-button.danger-button:hover,
.ui-dialog .ui-confirmdialog-no:hover,
button.ui-button.red-button:hover,
.synfaces-button-bar span button.ui-button.red-button:hover {
	background-color: #C25154 !important;
	color:#ffffff !important;
	 border:none !important;
    /*border: 1px solid #A33336 !important;*/
}

button.danger-button:active,
.synfaces-button-bar.synfaces-top-buttons button.e1-new-with-dns-button.danger-button:active,
.ui-dialog .ui-confirmdialog-no:active,
button.ui-button.red-button:active,
.synfaces-button-bar span button.ui-button.red-button:active {
	background-color: #A33336 !important;
	color:#ffffff !important;
	 border:none !important;
    /*border: 1px solid #85191C !important;*/
}

button.success-button:before,
button.success-button .ui-icon:before,
button.green-button:before,
button.green-button .ui-icon:before,
button.danger-button:before,
button.danger-button .ui-icon:before,
.ui-confirmdialog-no .ui-icon:before,
.ui-confirmdialog-yes .ui-icon:before,
button.ui-button.red-button:before,
button.ui-button.red-button .ui-icon:before {
	color:#ffffff !important;
}

.syn-upload-file-button.blue-button > div,
.synfaces-button-bar.synfaces-top-buttons button.e1-new-with-dns-button.primary-button,
button.ui-button.primary-button,
button.ui-button.blue-button,
.synfaces-button-bar span button.ui-button.blue-button {
	background-color: var(--action-icon-default) !important;
	color:#ffffff!important;
	 border:none !important;
    /*border: 1px solid #5872a3 !important;*/
}

.syn-upload-file-button.blue-button span{
	color: #ffffff !important;
}
.syn-upload-file-button.blue-button > div:hover,
.synfaces-button-bar.synfaces-top-buttons button.e1-new-with-dns-button.primary-button:hover,
button.ui-button.primary-button:hover,
button.ui-button.blue-button:hover,
.synfaces-button-bar span button.ui-button.blue-button:hover {
	background-color: #6685C7 !important;
	color:#ffffff!important;
	 border:none !important;
    /*border: 1px solid #5872a3 !important;*/
}

button.ui-button.ui-button-text-only.primary-button:hover,
button.ui-button.ui-button-text-only.blue-button:hover {
	background-color: var(--action-icon-default) !important;
}

.e23 button.ui-button.primary-button:hover,
.e23 button.ui-button.blue-button:hover {
	background-color: var(--action-icon-default) !important;
}

.synfaces-button-bar.synfaces-top-buttons button.e1-new-with-dns-button.primary-button:active,
button.ui-button.primary-button:active,
button.ui-button.blue-button:active,
.synfaces-button-bar span button.ui-button.blue-button:active {
	background-color: #5373B6 !important;
	color:#ffffff!important;
	 border:none !important;
   /* border: 1px solid #5872a3 !important;*/
}

button.ui-button.primary-button:before,
button.ui-button.primary-button:before,
button.ui-button.blue-button:before,
button.ui-button.blue-button .ui-icon:before{
	color:#ffffff !important;
}

.synfaces-button-bar.synfaces-top-buttons button,
.synfaces-button-bar.synfaces-top-buttons .syn-upload-file-button
 {
	vertical-align:top;
	padding: 1px;
    color: #FFFFFF;
    background: #6086d5;
    /*border: 1px solid #6086d5;*/
    border:none;
    height:30px;
    border-radius:2px;
    
}

.e23 .synfaces-button-bar.synfaces-top-buttons button:not(.ui-button-text-only) {
	color: var(--action-icon-default);
}

.synfaces-button-bar .syn-upload-file-button,
.synfaces-button-bar .syn-upload-file-button > div{
	vertical-align:top;
	padding: 1px;
    height:27px;
    border-radius:2px;

}
.synfaces-button-bar .dnsSelectPanel .ui-selectonemenu{
	 height:27px !important;
}
.synfaces-button-bar.synfaces-top-buttons button:hover,
.synfaces-button-bar.synfaces-top-buttons .syn-upload-file-button:hover {
	background:#6685C7
}

.synfaces-button-bar.synfaces-top-buttons button:active,
.synfaces-button-bar.synfaces-top-buttons .syn-upload-file-button:active {
	background:#5373B6
}

.synfaces-button-bar.synfaces-top-buttons button .ui-icon:before {
	color: #fff;
}
/* .synfaces-button-bar.synfaces-top-buttons button.ui-button-text-only{
	background: #1E9D26;
} */
.synfaces-button-bar.synfaces-top-buttons button.ui-button-text-only:hover{
	background-color: var(--action-icon-default);
}
/* .synfaces-button-bar.synfaces-top-buttons button.ui-button-text-only:active{
	background: #187d1e;
} */

.synfaces-button-bar.synfaces-top-buttons {
	padding: 5px;
/* 	box-shadow: 0px 2px 4px rgba(0,0,0,0.3); */
	z-index: 10;
	background-color:#fff;
	position:relative;
	height: 40px;
	box-sizing: border-box;
/* 	z-index: 1; */
	z-index: auto; /* make global tooltip overlay */
}

.synfaces-button-bar.synfaces-top-buttons:empty {
	display:none;
}

.synfaces-button-bar.synfaces-top-buttons button.primary-icon-button,
.synfaces-button-bar.synfaces-top-buttons button.danger-icon-button {
	top:0px; 
	line-height:42px;
	padding:10px;
}

.synfaces-button-bar.synfaces-top-buttons button.primary-icon-button .ui-icon:before {
	font-size:17px;
	color:  #3C8EF8;
}

.synfaces-button-bar.synfaces-top-buttons button.primary-icon-button .ui-icon,
.synfaces-button-bar.synfaces-top-buttons button.danger-icon-button .ui-icon {
	top:0px;
}

.synfaces-button-bar.synfaces-top-buttons button.danger-icon-button .ui-icon:before {
	font-size:17px;
	color: #E17B7E;
}

/* file upload button in button top button*/
.synfaces-button-bar .syn-upload-file-button{
	display:inline-block;
	padding: 0px !important;
}

.synfaces-top-buttons .syn-upload-file-button .ui-corner-top{
	background: transparent !important;
	border: none !important;
}
.synfaces-top-buttons .syn-upload-file-button .ui-corner-top .ui-button{
	padding-top: 0.6em;
}
.synfaces-top-buttons .syn-upload-file-button .ui-corner-top .ui-button span,
.synfaces-top-buttons .syn-upload-file-button .ui-corner-top .ui-button span:before{
	color: #FFFFFF !important;
}

/*  success-transparent-button */
.success-trp-btn:hover {
	background-color: rgba(96, 125, 184, .1);
}
.success-trp-btn {
	border: 1px solid rgba(0, 153, 0, 1) !important;
	cursor: pointer;
	color: #009900 !important;
	border-radius: 3px;
}
.danger-trp-btn:hover {
	background-color: rgba(245, 45, 99, .1);
}

.danger-trp-btn {
	border: 1px solid rgba(245, 95, 99, 1) !important;
	cursor: pointer;
	color: #F55F63 !important;
	border-radius: 3px;
}
.add-circle-btn {
	background-color: #6666CC !important;
	border: 1px solid transparent !important;
	border-radius: 50%;
	width:40px;
	height:40px;
}

 .add-circle-btn .ui-icon::before,.add-circle-btn .fa::before {
	font-size: 15px;
	color: white;
} 
/*new DNS button icon*/

.synfaces-button-bar.synfaces-top-buttons button.e1-new-with-dns-button .ui-button-text:before {
	content:"\f067";
	font-family: var(--fontawesome);
	font-weight: 900;
	font-size:17px;
	color: var(--action-icon-default);
}
.e23 .synfaces-button-bar.synfaces-top-buttons button.e1-new-with-dns-button .ui-button-text:before {
	font-size: var(--entry-top-bar-icon-fontawesome-heigh);
}

.synfaces-button-bar.synfaces-top-buttons button.e1-new-with-dns-button.newWithDnsButton-transform-exportButton{
	background-color: #6086d5 !important;
}
.synfaces-button-bar.synfaces-top-buttons button.newWithDnsButton-transform-exportButton.e1-new-with-dns-button .ui-button-text::before{
	content: "";
}
.synfaces-button-bar .dnsSelectPanel table td{
	padding: 0px !important;
	border: none !important;
}
.e22 .synfaces-button-bar.synfaces-top-buttons button.e1-new-with-dns-button .ui-button-text {
	line-height: normal;
	padding-top: 0px;
	padding-bottom: 0px;
}
/*this is for when new with dns button is used elsewhere*/
button.e1-new-with-dns-button .ui-button-text:before {
	content:"\f067";
	font-family: var(--fontawesome);
	font-weight: 900;
}

button.e1-new-with-dns-button.primary-button .ui-button-text:before {
	content:"" !important;
}
button.e1-new-with-dns-button.danger-button .ui-button-text:before {
	content:"" !important;
}

.summary-table button.e1-new-with-dns-button .fa-file:before{
	content: "\f067";
}

/*this is for dns button when used with a dateinput*/

.dns-date-input input {
	height: 30px;
	position: relative;
}

/*this is for dns buttons that only wants to show text*/
button.e1-new-with-dns-button.dns-text-only .ui-button-text:before {
	content:"" !important;
}
/*this is for dns buttons that only wants to show text*/
button.e1-new-with-dns-button.dns-text-only-vyy .ui-button-text:before {
	content:"Copy to New" !important;
	background-color: #607DB8;
	height: 30px !important;
	padding:5px;
	color:#ffffff !important;
	font-size: 1.0em !important;
	font-weight: bold !important;
/* 	text-color: #ffffff; */
}

/*this is for dns buttons show in summary screen*/
button.e1-new-with-dns-button.summary-sticky-button {
	width: 50px;
	height: 50px;
	position: absolute;
	bottom: 50px;
	right: 20px;
	background-color: var(--syn-icon-color);
	border-radius: 50%;
}

button.e1-new-with-dns-button.summary-sticky-button .ui-icon {
	width: auto;
	margin: 0;
	transform: translate(-50%, -50%);
}

button.e1-new-with-dns-button.summary-sticky-button .ui-icon::before {
	color: #FFF;
	font-size: 40px
}

/*fix for the dns selections in buttonbars*/
.synfaces-button-bar .dnsSelectPanel {
	display:inline-block;
	margin-right:0px;
}

.synfaces-button-bar .dnsSelectPanel .ui-selectonemenu {
	border-radius:0px;
	height:30px;
	margin-right:-1px;
}

.synfaces-button-bar .dnsSelectPanel:first-of-type .ui-selectonemenu {
	border-top-left-radius:3px;
	border-bottom-left-radius:3px;
	
}

.synfaces-button-bar .dnsSelectPanel .ui-selectonemenu label,
.synfaces-button-bar .dnsSelectPanel .ui-selectonemenu-trigger span {
	position: relative;
}

.synfaces-button-bar .dnsSelectPanel .ui-selectonemenu-trigger span{
	top:4px;
}

.synfaces-top-buttons button.dns-action {
	border-top-left-radius:0px;
	border-bottom-left-radius:0px;
}

.synfaces-top-buttons table,
.synfaces-button-bar .dnsSelectPanel table{
	padding:0px;
	border-spacing:0px;
}

.synfaces-button-bar button.e1-new-with-dns-button.ui-state-active {
	background-color: #ffffff;
	color: var(--action-icon-default);
	border: none;
}

/* export button show icon only on header */
.synfaces-button-bar button.e23-header-export-button {
	width: 48px;
    height: 48px;
}

.synfaces-button-bar button.e23-header-export-button .ui-button-text {
	display: none;
}
.synfaces-button-bar button.e23-header-export-button .ui-button-icon-left {
	left: 50%;
	text-indent: 0px !important;
}

.synfaces-button-bar button.e23-header-export-button .ui-button-icon-left::before {
	font-size: 24px;
	color: var(--action-icon-default);
}

/* Menu */

div.menu-container {
	display: flex;
}

div.menu-column {
}

div.menu-level2-column {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: auto;
	width: 350px;
	border-right: 1px solid #e4e4e4;
	box-shadow:1px 0px 2px rgba(0,0,0,0.3);
}

div.menu-level3, div.menu-level5 {
	margin-bottom:3px;
}

div.menu-column.menu-level4-detail {
    display: flex;
    width: 100%;
    padding:20px;
    box-sizing:border-box;
    background-color:#fbfbfb
}
/*for the headings*/
div.menu-level2, div.menu-level4 {
	padding-bottom: 5px;
	font-size:1.1em;
	font-weight: bold;
}

div.menu-level4-column {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: auto;
	width: 500px;
}

div.menu-level4-column-wide {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
}

.menu-selected-sub-menu {
	font-weight: bold;
	font-size: 16px;
}

table.synfaces-menu-grid > tbody > tr > td {
	padding:10px;
	display:table-cell;
}

table.synfaces-form-grid-table > tbody > tr > td.synfaces-grid-value.employee-employment-status-legend > table > tbody > tr > td {
	padding: 0 120px 0 0;
}

div.synfaces-accordion-with-navigator > div.ui-accordion-content div.ui-datatable.ui-widget {
	margin-top: 5px;
}

div.synfaces-module-menu {
	padding:10px;
	border-radius: 0px;
	width: 100%;
	box-sizing: border-box;
}

div.synfaces-module-menu img {
	border-radius:10px;
}

div.synfaces-module-menu > table > tbody > tr > td {
	padding-right: 15px;
}

div.synfaces-module-selected {
	background-color: #E0EDFA;
}

/****************** End of Menu ******************/


/* syn:inputEntity and syn:inputRemark*/
.synfaces-input-entity,
.synfaces-input-remark,
.synfaces-input-entity .ui-autocomplete,
.synfaces-input-entity .ui-autocomplete .ui-autocomplete-input,
.synfaces-input-remark .ui-inputtextarea {
	width: 100%;
	/*overflow-y: hidden !important;*/
}

.synfaces-input-entity .ui-autocomplete .ui-autocomplete-input,
.synfaces-input-remark .ui-inputtextarea {
	padding-right: 20px; /* to accommodate the lookup icon */
}

.synfaces-input-entity button.ui-state-default,
.synfaces-input-remark button.ui-state-default {
    float: right;
    margin-top: -25px;;
    right: -3px;
    height: 25px !important;
}

.synfaces-input-entity button.ui-state-default,
.synfaces-input-entity button.ui-state-hover,
.synfaces-input-remark button.ui-state-default,
.synfaces-input-remark button.ui-state-hover {
	border: none;
	background: transparent;
}

.e23 .synfaces-input-entity button.ui-state-default .ui-icon:before,
.e23 .synfaces-input-remark button.ui-state-default .ui-icon:before{
	color: var(--text-field-icon);
}

.e23 .synfaces-input-entity button.ui-state-hover .ui-icon:before,
.e23 .synfaces-input-remark button.ui-state-hover .ui-icon:before{
	color: var(--text-field-icon-hover);
}

/****************** End of syn:inputEntity and syn:inputRemark ******************/

/* Session Face Messages side panel */
.synfaces-session-faces-messages {
	border: 1px solid #e4e4e4;
	background-color:#fff;
	border-radius: 5px;
	padding: 10px;
	margin-bottom: 10px;
}

.synfaces-session-faces-message-timestamp {
	font-family: monospace;
	font-size: 0.9em;
	margin-bottom: 5px;
}


.synfaces-session-faces-message-summary {
	font-weight: bold;
	margin-bottom: 5px;
}

.synfaces-session-faces-message-detail {

}

/****************** End of Session Face Messages side panel ******************/


/****************** End of Dashboard ******************/

/* File upload */

.ui-fileupload-content {
	display:none;
}

.ui-fileupload-buttonbar {
	border-radius:3px;
	padding:0px;
}

.ui-fileupload-buttonbar .ui-button {
	border: none; /*Vincent:need this here to remove double borders*/
	background-color: transparent; /*need this to remove background*/
}

.syn-upload-file-button .ui-corner-top {
	border:none;
	padding: 0em 0.3em 0.1em 0.3em;
	box-sizing:border-box;
	color:#333;
	color:#333;
}

.syn-upload-file-button .ui-corner-top:hover {
	background-color:#f8f8f8;
	cursor: pointer;
}

.syn-upload-file-button.syn-attachment.ui-fileupload > div.ui-fileupload-buttonbar > span.ui-fileupload-choose {
	border: none;
    width: 20px;
    height: 20px;
	border-radius:5px;
	background-color:transparent;
}

.ui-fileupload-buttonbar .ui-fileupload-choose input {
	height:20px;
	width:20px;
	font-size: 20px !important;
}

/****************** End of File upload ******************/

/********* Month - Year Selection *********/
.month-year-selection-pnl td{
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.ui-datatable .month-year-selection-pnl > tbody > tr >  td .ui-selectonemenu{
	min-width: 70px !important;
	margin-top: 1px;
}
/**-------------------END ---------------**/

/* Tree table */
table.synfaces-tree-table {
	border-collapse: collapse;
}

span.synfaces-tree-node-toggler {
	width: 10px;
}

tr[is-leaf=false][node-expanded=false] > td > span.synfaces-tree-node-toggler:before {
	content: "\f0da"; /* fa-caret-right */
}

tr[is-leaf=false][node-expanded=true] > td > span.synfaces-tree-node-toggler:before {
	content: "\f0d7"; /* fa-caret-down */
}

/****************** End of Tree table ******************/





/******************* TO BE REVIEWED *****************/

.no-borders-grid {
	border-collapse: unset !important;
}

.no-borders-grid tr, .no-borders-grid td {
	background: none !important;
	border: none !important;
	padding: 4px 2px;
}

.no-borders-with-bg-grid tr, .no-borders-with-bg-grid td {
	border: none !important;
}

.borders-grid td, .borders-grid td {
	border: 1px solid #5486a8 !important;
}

.dim-visibility{
	opacity: 0.15;
}

.ui-datatable .ui-inputfield.ui-inputtext.ui-widget.ui-state-default.input-dim-visibility{
	color: rgba(96, 0, 0, 0.3) !important;
}


ul.syn-legend-single-line{
	padding: 10px;
}
ul.syn-legend-single-line li:first-child{
	padding: 5px;
	color:#505050;
	display: inline-block;
	font-weight:bold;
}
ul.syn-legend-single-line li:not(:first-child){
	display: inline-block; 
	width: auto;
	padding: 0px 20px;
	margin-left:10px; 
	white-space: nowrap;
}


ul.syn-legend-single-line-block{
	white-space: nowrap;
}

ul.syn-legend-single-line-block li:nth-child(odd){
	padding: 5px;
	background-color: #e8f1f7;
	color:#205375;
	display: inline-block;
}

ul.syn-legend-single-line-block li:nth-child(even){
	padding: 5px;
	color:#205375;
	display: inline-block;
}


.synfaces-textbox.standard-width {
	width: 85px;
}

.synfaces-textbox.full-width {
	width: 100%;
}

.synfaces-datatable-full-width.ui-datatable > .ui-datatable-tablewrapper > table[role="grid"] {
	table-layout: fixed;
}

button.ui-button.ui-button-icon-only.synfaces-filled-remarks {
	border-color: blue;
}

button.ui-button.ui-button-icon-only.synfaces-blank-remarks {
	border-color: white;
}

button.synfaces-remarks-button.ui-button-icon-only .ui-button-text {
    padding: 0;
}


.word-wrap > span{
    white-space: normal;
}

.synfaces-legend-value{
	width:25px;
	height:25px;
	border-radius:50%;
	float:left;
	line-height:25px;
	background-color:#89bdff;
	color:#fff;
	font-weight:bold;
	text-align:center;
	margin-right:10px;
	margin-bottom: 10px;
}

.synfaces-legend-label{
	position: relative;
	display: block;
	padding: .4em .4em .4em 2em;
	margin: .5em 0;
	color: #505050;
	line-height: 15px;
	text-align: justify;
}
.synfaces-legend-div > div > .ui-widget-content{
	border: none !important;
}
.synfaces-legend-div > div > .ui-widget-content > table{
	padding: 10px 25px !important;
}
.synfaces-legend-div > span{
	padding: 15px !important;
}
.synfaces-legend-div > div > div > table.ui-datagrid-data{
	width: 100% !important;
}
.synfaces-input-code {
	min-width: 150px
}

th > .ui-column-title > hr {
	border-bottom: none;
	border-top: 1px solid #e4e4e4;
	margin-left: -10px;
	margin-right: -10px;
}

table.align-top > tbody > tr > td,
table.ui-vertical-align-top> tbody > tr > td {
	vertical-align: top;
}

/****************** End of syn:accordionWithNavigator ******************/

/*************Master-Details CSS ***************/

/*Generic color codes*/

.green-cell {
	background-color: #ECFFEF !important;
}

.orange-cell {
	background-color: #FFE8B0 !important;
}

.yellow-cell {
	background-color: #FFFFC6 !important;
}

/* when hovering over colored cell, clear the color */
tr.ui-state-hover>td.status-cell {
	background-color: transparent;
}

/* custom column filter using calendar picker */
div.ui-column-customfilter input.hasDatepicker {
	width: 100%;
}

span.subheader {
	overflow: hidden;
	display: block;
	padding:10px 0px;
	font-size:12px;
	font-weight:700;
	border-top:1px solid #e4e4e4;
	width: 100%;
	margin-top:10px;
}

span.superheader {
	overflow: hidden;
	display: block;
	padding:10px 0px;
	font-size:12px;
	font-weight:700;
	border-bottom:1px solid #e4e4e4;
	width: 100%;
	margin-bottom:10px;
}
/* can get this style through header panel, need to remove */
/* span.subheader-border-bottom {
	overflow: hidden;
	display: block;
	font-size:12px;
	font-weight:700;
	color: #FF9966;
	border-bottom:1px solid #e4e4e4;
	width: 100%;
	margin-top:10px;
} */

.subtitle,
.grey-word{
	color: #868686
}

.synfaces-width-half {
	width: 50% !important;
}

.filter-panel tr td {
	white-space:nowrap;
}

.ui-tabs.no-padding .ui-tabs-panels .ui-tabs-panel {
	padding:0px;
}

/*
.ui-button-text-icon-right {
	font-size: 1em !important;
	text-shadow: none !important;
}
*/

/*
.side-panel div.ui-panel-titlebar,
.side-panel div.ui-layout-unit-header {
	background: #6086d5;
	border: none;
	border-radius: 0px;
	height: 20px;
	padding:3px 5px;
	color:#ffffff;
}

.detail-master-summary-panel {
	border: 1px solid #C9C9C9;
	background-color: white;
	border-radius: 0px;
	margin-top: 0px !important;
	padding: 6px;
	overflow: auto;
	box-sizing: border-box;
	width: 100%;
	height:100%;
}

.detail-master-summary-panel div.ui-datatable-header {
	height: auto;
}

.side-panel .ui-panel > .ui-panel-content.ui-widget-content, .side-panel .ui-tabs > .ui-tabs-panels {
 background-color: transparent;
}


.full-width-panel {
	width: 100% !important;
	display:flex;
}

.full-width-panel .summary-line-item-panel {
	width:70%;
	flex-grow:7;
	display:flex;
	flex-direction:column;
}

.full-width-panel .summary-line-item-panel > form {
	display:flex;
	height:100%;
	flex-direction:column;
}



.summary-layout {
	width: 100%;
	height: 100%
}


.summary-main-data-table {
	white-space: nowrap;
	width: 100%
}

*/

.syn-radio-button {
	border: none !important;
}

.syn-radio-button td{
	border: none !important;
}

td.ellipsis {
	text-overflow: ellipsis;
	max-width: 250px;
}

td.wrap {
	white-space: normal
}

/*
button.icon-button.row-action-danger,
button.icon-button.row-action-danger:active,
button.icon-button.row-action-primary,
button.icon-button.row-action-primary:active {
	border: none !important;
	background-color: initial !important;
	line-height:1em;
}

button.icon-button.row-action-primary:hover,
button.icon-button.row-action-danger:hover {
	top:-2px;
	border: none !important;
	background-color: initial !important;
}

button.icon-button.row-action-primary > span::before {
	color: #607db8 !important;
	font-size:16px;
}

button.icon-button.row-action-danger > span::before {
	color: #F86568 !important;
	font-size:16px;
}
*/


.ui-datatable-data > tr:hover {
	background-color:;
	background-color:#E0EDFA;
}

.ui-expanded-row-content > td {
	padding:15px !important;
	background-color:#F6F6F6;
}

tr.ui-expanded-row-content:hover {
	background-color:#F6F6F6;
}


.synfaces-grid-value > .ui-selectonemenu {
	min-width:0px !important;
	width:100%;
	box-sizing:border-box;
	border:1px solid #bcbcbc;
	padding-right: 33px;
}

.synfaces-grid-value > .ui-selectonemenu > .ui-selectonemenu-label {
	width:100%;
	overflow:hidden;
}


.ui-selectonemenu-panel .ui-widget-content .ui-state-highlight,
.ui-selectonemenu-panel .ui-widget-content .ui-state-highlight:hover {
	box-shadow:none !important;
	background-color:#6086d5;
	color:#ffffff;
	border-radius:0px;
}

.ui-selectonemenu-panel .ui-selectonemenu-list {
	background-color:#ffffff;
}

.ui-selectonemenu-list-item:hover {
	background-color:#E0EDFA;
}


.ui-accordion.price-summary {
	margin-top:7px;
}

.ui-accordion.price-summary .ui-accordion-header{
	border: 1px solid #abcfff;
	text-align: right;
    border-radius: 0px;
	border-top: 3px solid #3c8ef8;
	color: #3c8ef8;
}

.ui-accordion.price-summary .ui-accordion-header .ui-icon::before {
	color: #3c8ef8;
}

.ui-accordion.price-summary .ui-accordion-content {
	border: 1px solid #abcfff;
	border-top:none;
}

.ui-accordion.price-summary .ui-accordion-header.ui-state-active {
	border-bottom:0px;
}

/* Cannot remove */
.price-summary .ui-accordion-content table.synfaces-form-grid-table {
	table-layout:auto;
}

table.syn-tbl-summary,
table.price-summary,
.side-panel-content table.price-summary.synfaces-form-grid-table {
	margin-top:10px;
	width:100%;
	padding:10px;
	background-color:#fff;
	border: 1px solid #abcfff;
	border-top: 3px solid #3c8ef8;
}
table.syn-tbl-summarynew,
table.price-summary,
.side-panel-content table.price-summary.synfaces-form-grid-table {
	margin-top:10px;
	padding:10px;
}


table.syn-tbl-summary tr td,
table.syn-tbl-summary tr th,
table.price-summary tr td,
table.price-summary tr th,
.ui-accordion.price-summary tr th,
.ui-accordion.price-summary tr td {
	border:0px;
	padding: 3px;
}
.price-summary tr {
	border: none;
}


table.price-summary tr td.label,
table.syn-tbl-summary tbody tr td.synfaces-grid-label,
table.syn-tbl-summary tbody tr td.syn-col-label,
.ui-accordion.price-summary tr td.label,
.ui-accordion.price-summary tr td.synfaces-grid-label{
	font-weight:bold;
}
table.price-summary tr th.value,
table.price-summary tr td.value,
table.price-summary tr th.amount,
table.price-summary tr td.amount,
table.syn-tbl-summary tbody tr td.synfaces-grid-value,
table.syn-tbl-summary tbody tr td.syn-col-amt,
.ui-accordion.price-summary tr td.amount,
.ui-accordion.price-summary tr td.value,
.ui-accordion.price-summary tr th.value,
.ui-accordion.price-summary tr td.synfaces-grid-value{
	text-align:right;
	min-width:75px;
}


/*
table.syn-tbl-summary{
	float: right;
	border: 1px solid #e4e4e4;
	width:auto;
	border-collapse:collapse;
}

table.syn-tbl-summary tbody tr {
	border:none;
}

table.syn-tbl-summary tbody tr td.synfaces-grid-label,
table.syn-tbl-summary tbody tr td.syn-col-label{
	width: auto;
	min-width:100px;
	padding: 4px;
	background-color: #ffffff;
	text-align: left;
	vertical-align: middle;
	border:none;
}
table.syn-tbl-summary tbody tr td.synfaces-grid-value,
table.syn-tbl-summary tbody tr td.syn-col-amt{
	width: auto;
	min-width:  100px;
	background-color: #ffffff;
	padding: 4px;
	text-align: right;
	vertical-align: middle;
	border:none;
}
table.syn-tbl-summary tbody tr:first-child td,
table.syn-tbl-summary tbody tr:first-child th{
	border-top:1px solid #e4e4e4;
	border-bottom:1px solid #e4e4e4;
	background-color: #f2f2f2;
}

table.syn-tbl-summary tbody tr:last-child td {
	border-bottom:1px solid #e4e4e4;
	border-top:1px solid #e4e4e4;
	font-weight:600;
	background-color: #f2f2f2;
}
*/

/* Header Toolbar */

.synfaces-header-toolbar {
	overflow: hidden;
    text-align: center;
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
    min-width:0px !important;
}


.synfaces-header-toolbar,
.synfaces-header-toolbar * {
	background-color: #636363 !important;
	color: #FFFFFF !important;
	font-weight: bold !important;
	/*height:100%;*/
}
div.synfaces-header-toolbar-element-container.search-form{
	padding: 7px 10px;
}

div.synfaces-header-toolbar-element-container {
	display: inline-block;
	box-sizing: border-box;
	height: 46px;
	/* height: 100%; */
	max-height: 46px;
	padding: 6px 10px;
	vertical-align: top;
	border-radius:0px;
	border-right: 1px solid #575757;
	border-left: 1px solid #575757;
}

div.synfaces-header-toolbar-element-container .synfaces-employee-avatar .img-avatar {   
    width: 30px;
    height: 30px;
}

div.vertical-center{
	display: flex; 
	align-items: center;
}

div.userInfo{
	padding-top: 3px;
	padding-bottom: 3px;
	position: relative;
}
div img.employee-profile-pic{
	width: 30px;
	height: 30px;
}

.userInfo .ui-button-text-icon-left .ui-button-text{
	padding: 0px;
	/* padding-bottom: 3px; */
	text-transform: capitalize;
}
.employee-profile-pic-container{
	display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}
.userInfo-container{
	display: flex; 
	flex-direction: column;
	text-align: left;
}
.employee-designation{
	font-weight: 500 !important;
	font-size: 0.9em;
}
.synfaces-header-toolbar span.ui-menubutton,
.synfaces-header-toolbar span.ui-menubutton .ui-button-text-icon-left{
	background-color: transparent !important;
}

.synfaces-header-toolbar span.ui-menubutton .ui-button-text-icon-left{
	padding: 5px 10px 5px 40px;
}

.synfaces-header-toolbar .ui-icon {
	width: initial; /* override width: 16px; in theme.css because we want bigger icons here */
	top:35%; /* due to mis-alignment */
}

.synfaces-header-toolbar .ui-icon:before {
	font-size:17px;
	color:#fff;
}

div.synfaces-header-toolbar-element-container .ui-state-default{
	border:none; /*clear green border */
}

span.synfaces-super-quick-link-element > button.ui-button {
	max-width: 150px;
	overflow: hidden;
	text-decoration: underline !important;
}

/*----------------------------------------------
Attachments
------------------------------------------------*/

div.syn-newattachment-folder-header {
	text-align: left;
}

div.syn-newattachment-file-header {
	white-space: nowrap;
	overflow: hidden;
	text-align: left;
}

img.newattachment-file-icon {
	height: 50px;
	width: 50px;
}

.syn-upload-file-button.syn-newattachment.ui-fileupload {
	display: inline-block;
}

.syn-upload-file-button.syn-newattachment.ui-fileupload > div.ui-fileupload-buttonbar.ui-corner-top {
	padding-top: 0.2em;
}

.syn-upload-file-button.syn-newattachment.ui-fileupload > div.ui-fileupload-buttonbar > span.ui-fileupload-choose {
	border: none;
    width: 18px;
    height: 20px;
	border-radius:5px;
	background-color:transparent;
}

.syn-upload-file-button.drag-drop-upload > .ui-fileupload-buttonbar{
	height: 180px;
	display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #C0CBDC;
	border-radius: 10px;
}

.syn-upload-file-button.drag-drop-upload > .ui-fileupload-buttonbar > span.ui-fileupload-choose{
	font-weight: lighter;
	color: var(--syn-text-color);
}
.syn-upload-file-button.drag-drop-upload > .ui-fileupload-buttonbar > span.ui-fileupload-choose::after{
	padding-left:80px;
	content: 'Drag and drop your file anywhere here';
	color: #555555;
}

.syn-upload-file-button.drag-drop-upload > .ui-fileupload-buttonbar > span.ui-fileupload-choose > span.ui-button-text{
	width:fit-content;
	margin-left:80px;
	margin-bottom: 1em;
	padding:0.5em 1em;
	border-radius:5px;
	background: #C0CBDC;
	width: 106px;
    height: 18px;
    line-height: 18px;
	color: #555555;
}

.syn-upload-file-button.drag-drop-upload > .ui-fileupload-buttonbar > span.ui-fileupload-choose > span.ui-button-text::after{
	content: 'or';
	position: absolute;
	margin-left:40px;
	color: #555555;
}

.syn-upload-file-button.drag-drop-upload > .ui-fileupload-buttonbar > span.ui-fileupload-choose > span.ui-icon{
	margin-top: -4px;
	top: 0px;
}
.syn-upload-file-button.drag-drop-upload > .ui-fileupload-buttonbar > span.ui-fileupload-choose > span.ui-icon::before{
	font-size:58px;
	color: #C0CBDC;
}
.syn-upload-file-button.drag-drop-upload > .ui-fileupload-buttonbar.ui-corner-top{
	border-style: dashed;
	border-radius: 10px;
}

table.ui-panelgrid.syn-newattachment-panelgrid > tbody {
	vertical-align: top;
}

td.ui-panelgrid-cell.syn-newattachment-folder-panel {
	width: 25%;
}

td.ui-panelgrid-cell.syn-newattachment-file-panel {
	width: 75%;
}

/* Justin fixed */


.fixed-attachment-panel .syn-newattachment-folder-panel .fixed-fordel-panel {
	min-width: 100px;
}

.fixed-attachment-panel .syn-newattachment-folder-panel .ui-panel .ui-panel-content{
	padding: 0px;
	display: flex;
	justify-content: space-around;
	align-content: center;
}

.fixed-attachment-panel .syn-newattachment-folder-panel .fixed-fordel-panel .ui-chkbox {
	align-self: center;
}

.fixed-attachment-panel .syn-newattachment-folder-panel .fixed-fordel-panel .ui-widget-content a {
	align-self: self-end;
}

.fixed-attachment-panel .syn-newattachment-folder-panel .fixed-fordel-panel .ui-widget-content img {
	width: 38px;
}

.fixed-attachment-panel .syn-newattachment-folder-panel .fixed-fordel-panel textarea.ui-inputtextarea.ui-inputtextarea-resizable:not(:focus) {
	max-height: 32px !important;
	min-height: 32px !important;
	height: 32px !important;
	width: 200px;
	overflow-y: hidden !important; 
}

.fixed-attachment-panel .syn-newattachment-folder-panel .fixed-fordel-panel textarea.ui-inputtextarea.ui-inputtextarea-resizable:focus {
	width: 220px;
}

.fixed-attachment-panel .syn-newattachment-file-panel .ui-panel .ui-panel-content{
	padding: 0px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-content: center;
	overflow-x: hidden;
}

.fixed-attachment-panel .syn-newattachment-file-panel .fixed-file-panel .ui-chkbox {
	align-self: center;
	margin-right: 8px;
}

.fixed-attachment-panel .syn-newattachment-file-panel .fixed-file-panel img.newattachment-file-icon {
	height: 50px;
	width: 50px;
}

.fixed-attachment-panel .syn-newattachment-file-panel .fixed-file-panel .up-container {
	display: flex; 
	justify-content: space-between;
}

.fixed-attachment-panel .syn-newattachment-file-panel .fixed-file-panel .down-container {
	display: flex; 
	justify-content: space-between; 
	margin: 10px 0;
}

.fixed-attachment-panel .syn-newattachment-file-panel .fixed-file-panel .down-container .fixed-wrap-text {
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fixed-attachment-panel .syn-newattachment-file-panel .fixed-file-panel textarea.ui-inputtextarea.ui-inputtextarea-resizable:not(:focus) {
	height: 44px !important;
	max-height: 44px !important;
	min-width: 100px;
	max-width: 150px;
	overflow-y: hidden !important; 
}

.fixed-attachment-panel .syn-newattachment-file-panel .fixed-file-panel textarea.ui-inputtextarea.ui-inputtextarea-resizable:focus {
	min-width: 100px;
	max-width: 160px;
	height: 54px !important;
}
.fixed-attachment-panel .search-feild .ui-button.ui-state-default {
	border: 1px solid #c9c9c9;
	width: auto;
}
.e2-side-panel-attachments-tab .syn-newattachment-panelgrid .ui-fileupload-choose .ui-icon-plusthick {
	left: 6px !important;
}

.synfaces-import-processing {
	background: green !important;
}

.synfaces-import-completed {

}

/* .synfaces-import-failed {
	background: red !important;
} */

.synfaces-import-failed .ui-icon::after {
    content: "\00a0\f12a";
    color: #F86568 !important;
    font-size: 14px;
}

.synfaces-import-normal {

}

.synfaces-import-processing .ui-icon:before, .synfaces-import-failed .ui-icon:before{
	color: white;
}

.pfs-import-file-panel .bold-text {
	font-weight: bold;
}

.pfs-import-file-panel .italic-text {
	font-style: italic;
}

.no-header-table table > thead{
	display: none;
}

.pfs-import-file-panel .ui-fileupload .ui-fileupload-buttonbar {
	padding:0px;
}

.pfs-import-file-panel{
	min-width:1000px
}

.pfs-import-file-panel .ui-dialog-content {
	padding: 0px;
}

.pfs-import-file-panel .light-md .details {
	flex: 3;
	padding: 0px;
}


.pfs-import-file-panel .synfaces-button-bar {
	padding:10px;
}

.pfs-import-file-panel .details span.synfaces-float-left {
	line-height:24px;
}

.pfs-import-file-panel .master td span { 
	line-height:24px;
}

.e23-import-dialog {
	overflow: hidden;
	border-radius: 10px;
}


/*--------------------------------------------
TABLE FILTER PANEL
----------------------------------------------*/
.show-filter {
	margin-top:2px;
	border:none;
	padding:0px;
}

.show-filter > div.ui-panel-content {
	border:1px solid #e4e4e4;
	border-radius:0px;
	/*background-color:#eff5fc!important;*/ 
	padding:7px !important;
}

.show-filter div.ui-panel-content div {
	text-align:left;
}

.show-filter div.ui-panel-content div p.filter-title {
	display:inline-block!important;
	float:left;
	line-height:2.2;
	width:150px;
	white-space:normal; 
	word-wrap: break-word;
	margin:0px;
	padding:0px;
}

.show-filter div.ui-panel-content div div.filter-checkboxes {
	display:inline-block;
	width:calc(100% - 150px)
}

.show-filter .ui-selectmanycheckbox label {
	display:inline;
	width:85%;
	text-overflow:ellipsis;
	overflow:hidden;
	font-weight:normal;
	display:initial;
}

.synfaces-th5-menu-item.ui-commandlink {
	color: #6086d5;
}

span.synfaces-th5-search-form-item {
	color: #6086d5;
}

span.synfaces-e1-search-form-item {
	color: #6086d5;
}

span.ui-autocomplete.synface-search-form-input-text > input {
	font-weight: 900;
	background-color:#fff !important;
	/*
	background-color: #565656 !important;
	color: #efefef !important;
	padding: 0px 10px;*/
	color:#333 !important;
}

.fa-red::before {
    color: #F86568;
}

.fa-green::before {
    color: #33BD97;
}

.fa-blue::before {
    color: #607db8; 
}

.fa-grey::before {
    color: ;
}

.imageContainer {
	display: inline-block;
}

.avatar-xs {
	width: 24px;
	height: 24px;
}

.avatar-small {
	width: 30px;
	height: 30px;
}

.avatar-sm {
    width: 40px;
    height: 40px;
}

.avatar-normal {
	width: 50px;
	height: 50px;
}

.avatar-large {
	width: 60px;
	height: 60px;
}

.avatar-master {
	margin: 15px auto;
	width: 150px;
	height: 150px;
}

.avatar-container {
	border-radius: 50%;
	overflow: hidden;
	margin: auto;
	background: white;
}


.avatar-filled .avatar-portrait {
	height: auto !important;
    width: 100%;
    transform: translate(0%, -50%);
    top: 50%;
    position: relative;
}

.avatar-border {
	border: 1px solid #e6e6e6;
}

.avatar-landscape {
	height: 100%;
	margin: auto;
	position: relative;
}

.avatar-portrait {
	height: 100%;
	margin: auto;
	display: block;
}

.img-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display:inline-block;
}

.infoContainer {
	display: inline-block;
	width:calc(100% - 70px); 
	margin-left:10px; 
	vertical-align: top;
}

.cardTitleContainer {
	width:100%; 
	display:inline-block;
}

.cardTitle {
	margin-bottom:7px; 
	display:inline-block;
	font-size:14px;
	font-weight:600;
}
	
.cardContentContainer {
	width:100%; 
	display:block;
}

.cardContent {
	font-size:12px; 
	color:#a1a1a1;
}

.detail-contact i:before,
.cardContent i:before {
	color:#a1a1a1;
}
/*end of card*/


/* Custom Icons */
.synfaces-drag-icon:before {
	content:"\f142\202f\f142"; 
	font-size:15px; 
	color:#FFFFFF
}


/*.ui-selectcheckboxmenu-token {
	padding:5px;
}
.ui-selectcheckboxmenu-token-icon{
	all:unset;
	margin-right:5px;
}*/


span.ui-fileupload-choose > span.ui-icon:not([class*="icomoon"]):before {
	content: "\f093" !important;
}

div.e22-file-import-button > div > span.ui-fileupload-choose > span.ui-icon:before {
	content: "\f56f" !important;
}


/*project codes*/

.gallery {
	position: relative;
	width: 100%;
	height: 100%;
	box-sizing:border-box;
	padding:10px;
}

.gallery > .galleryPanels > .ui-panel-titlebar {
	border-bottom-left: 0px;
	border-bottom-right: 0px;
}

.gallery > .galleryPanels > .ui-panel-content {
	padding:0px;
}

.gallery>.galleryPanels {
	width: 100%;
	display: inline-block;
	vertical-align: top;
	height: auto;
	padding: 0px;
	overflow: auto;
	margin-bottom: 10px !important;
	border:1px solid #e4e4e4 !important;
}

.side-panel-content img {
	width:100px;
	height:auto;
}

@media screen and (min-width: 90.063em) {
	 .gallery > .galleryPanels {
		width:24.5%; 
		display:inline-block; 
		vertical-align:top; 
		height:40%; 
		padding:0px; 
		overflow:auto; 
		border-radius:5px; 
		margin-right:0.5%; 
		margin-bottom:10px;
	}
	
	.side-panel-content img {
		width:200px;
		height:auto;
	}
	
	.cardContent {
		display:flex;
		word-break:break-all;
	}
	
	.cardContent > i {
		margin-right:10px;
	}
	
}

.schedule_container {
	border: 1px solid #e4e4e4;
	border-spacing:0px;
	margin-top:-1px;
	overflow:auto;
	display:block;
	max-height:700px;
}
 .schedule_container td {
     border: 1px solid #e4e4e4;
     padding: 4px;
     overflow: hidden;
}

.schedule_header {
    background: #f8f8f8;
}


.calendar-header > button, input{
	display: inline-block;
}

.calendar-footer > button, input{
	display: inline-block;
}

.calendar-header {
	display: block;
	background-color: #f8f8f8;
	border:1px solid #e4e4e4;
	text-align:center;
	padding:4px;
}
.calendar-footer {
	background-color: #f8f8f8;	
	border:1px solid#e4e4e4;
	text-align: center;
	padding:4px;
}
.header-hide>thead {
	display: none;
}

.flex-container{
	border:1px solid #e4e4e4;
	height: 100%;
	overflow:auto;
}

.flex-container > div.ui-datatable > .ui-datatable-header {
	height: 18px;
}

.flex-container > div.ui-datatable {
	border-collapse:collapse;
}

.flex-container > div.ui-datatable > div.ui-datatable-tablewrapper >table > tbody > tr >td {
	padding:10px;
}

.flex-container > div.ui-datatable > div.ui-datatable-tablewrapper >table > thead ,
.flex-container > div.ui-datatable > div.ui-datatable-tablewrapper >table > thead > tr,
.flex-container > div.ui-datatable > div.ui-datatable-tablewrapper >table > thead > tr > th,
.flex-container > div.ui-datatable > div.ui-datatable-tablewrapper >table > tbody ,
.flex-container > div.ui-datatable > div.ui-datatable-tablewrapper >table > tbody > tr,
.flex-container > div.ui-datatable > div.ui-datatable-tablewrapper >table > tbody > tr >td,
.flex-container > div.ui-datatable > div.ui-datatable-header,
.gallery > .galleryPanels > .ui-panel-titlebar,
.gallery > .galleryPanels > .ui-panel-content > table > tbody > tr,
.gallery > .galleryPanels > .ui-panel-content > table > tbody > tr > td  {
	border: none;
	border-bottom:1px solid #e4e4e4;
	border-top:1px solid #e4e4e4;
	margin-top:-1px;
	padding:10px;
}

.flex-container > div.ui-datatable > div.ui-datatable-tablewrapper >table > tbody > tr >td > button:hover {
	background-color: transparent !important;
}


.flex-container > div.ui-datatable > div.ui-datatable-tablewrapper >table > tbody > tr >td > button > span::before {
	font-size:20px;
}
/*end of project codes*/


/*=====================================================
MASTER SIDEBAR
======================================================*/

.master-toolbar {
	padding: 8px 5px;
	display: flex;
	border-bottom: 1px solid #c9c9c9;
	margin-bottom: 0px;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3)
}

.master-toolbar-addBtn {
	margin-right: 5px;
}

.master-toolbar-search>input {	
	font-weight: 900;
	color: #666 !important;
	padding: 5px;
	width: 100%;
}

.rows_container {
	display: flex;
	flex-direction: row;
	flex: 1;
	align-items: center;
	justify-content: space-around;
}

rows_container>* {
	flex-shrink: 0;
}

.rows_name {
	flex: 1;
}

.rows_status {
	margin-left: 2%;
	flex-basis: 20%;
	min-width: 86px;
}

.rows_delete {
	flex-basis: 5%;
    margin-left: 3%;
    background: #E17B7E;
    border-radius: 2px;
    max-width: 30px;
}
.rows_delete .row-action-danger .ui-icon::before{
	color: #ffff;
}

.output-status {
	padding: 4px 10px;
	border-radius: 1px;
	text-transform: capitalize;
	font-size: 10px;
	color: #fff;
	text-align: center;
}

.style-active {
	background: #669999;
}

.style-suspend, .style-suspended {
	background: #414141;
}


/*customized code for phase projects table*/
.project-treetable tr td {
	padding:4px;
	background-color:#f8f8f8;
}
.project-treetable tr.ui-state-highlight td{
	background-color: transparent;
}

.project-treetable tr td .ui-treetable-empty-message {
	padding:10px
}


.project-treetable .ui-treetable-scrollable-body .ui-treetable-data> tr > td > input,
.project-treetable .ui-treetable-scrollable-body .ui-treetable-data> tr > td > span.ui-calendar >  input.hasDatepicker,
.project-treetable .ui-treetable-scrollable-body .ui-treetable-data> tr > td > textarea {
	max-height:none !important;
	min-height:none !important;
	border:none;
	box-sizing: border-box;
	width: 100%;
	border-radius:0px;
}

.project-treetable .ui-treetable-data> tr > td > .synfaces-input-entity > .ui-autocomplete > input {
	margin-top: 3px;
	border:0px;
	border-radius:0px;
}
.project-treetable .ui-treetable-scrollable-body .ui-treetable-data> tr > td > span.ui-calendar >  input.hasDatepicker.ui-state-focus,
.project-treetable .ui-treetable-scrollable-body .ui-treetable-data> tr > td > .synfaces-input-entity > .ui-autocomplete > input.ui-state-focus,
.project-treetable .ui-treetable-scrollable-body .ui-treetable-data> tr > td > input.ui-state-focus,
.project-treetable .ui-treetable-scrollable-body .ui-treetable-data> tr > td > textarea.ui-state-focus{
	border:1px solid #5092e4

}
.project-treetable .ui-treetable-scrollable-body input.ui-state-focus{ 
	box-shadow:none;
	border:none;
}

.project-treetable .ui-treetable-scrollable-body > table,
.project-treetable .ui-treetable-scrollable-header-box > table {
	width:100%;
}

.project-treetable .ui-treetable-indent {
	width:10px;
}

.project-treetable .ui-column-title {
	white-space: initial;
}

.project-treetable.ui-treetable-scrollable .ui-treetable-scrollable-header {
    box-shadow: 1px 2px 4px rgba(0,0,0,0.3);
    z-index:10
 }
 
 .project-treetable .ui-treetable-toggler {
 	padding: 5px;
	margin-left: -10px;
	text-align:center;
 }
 
 .project-treetable .ui-treetable-scrollable-body .ui-treetable-data> tr > td {
 	font-size:0.9em;
 	padding:2px;
 }

 .project-treetable .synfaces-input-entity button.ui-state-default { 
	margin-top:-23px
}
 
.project-treetable .ui-treetable-scrollable-body .ui-treetable-data > tr.ui-treetable-empty-message > td {
	padding:10px;
	
}

 .stickyHeader{
 	position: fixed !important;
	top: 86px;
	z-index: 1 !important;
	width: 64.5% !important;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.3) !important;
 }
 .e2-main-panel-details-table.box-shadow{
 	box-shadow: 3px 3px 8px rgba(0,0,0,0.3);
 }
.synfaces-card-container .ui-panel.no-shadow.ui-widget {
	box-shadow:none;
	border-bottom:1px solid #e4e4e4
}

/* - ---------- Custom code for Project Cover Photo ------------*/
	.project-cover-photo {
 		position:relative;
 	}
 	
 	.project-cover-photo .image-thumbnail img,
 	.project-cover-photo .photo-container {
 		height:200px;
 		width:100%;
 	}
 	
 	.project-cover-photo .photo-container .ui-fileupload,
 	.project-cover-photo .photo-container .ui-fileupload-buttonbar,
 	.project-cover-photo .photo-container .ui-fileupload-buttonbar .ui-button {
 		display:flex;
 		flex:1;
 		height:100%;
 	}
 	.project-cover-photo .photo-container .ui-fileupload-buttonbar .ui-button:before{
 		content:"\f03e";
 		font-family: var(--fontawesome);
		font-weight: 900;
 		text-align:center;
 		font-size:100px;
 		position:absolute;
 		top:20%;
 		color:#D1E5FF;
 		width:100%;
 	}
 	.project-cover-photo .photo-container .ui-fileupload-buttonbar .ui-button span.ui-icon {
 		top: 50%;
		left: 50%;
		transform: translate(-50%, -33%);
		width:50px;
 	}
 	
 	.project-cover-photo .photo-container .ui-fileupload-buttonbar .ui-button span.ui-icon:before {
 		content:"\f067" !important;
 		font-size:50px;
		color:#3C8EF8
 	}
 	
 	.project-cover-photo .photo-container .ui-fileupload-buttonbar .ui-button .ui-button-text {
 		display:none;
 	}
 	
 	.project-cover-photo .abort-btn {
 		position:absolute;
 		right:0px;
 		top:0px;
 		border-radius:0px;
 		box-shadow:0px 0px 4px rgba(0,0,0,0.3)
 	}
 	
 	.e23 .project-cover-photo .abort-btn {
 		box-shadow: none;
    	background-color: transparent !important;
 	}
 	
 	.e23 .project-cover-photo .abort-btn .ui-icon::before {
 		color: var(--action-icon-warning) !important;
 	}
 	
 	.e23 .project-cover-photo .abort-btn.ui-state-hover .ui-icon::before {
 		color: var(--action-icon-warning-hover) !important;
 	}


/* -----------------------syn:datePicker styling---------------- */
.synfaces-datepicker{
	width: 250px;
	border: 1px solid #e4e4e4;
} 
.synfaces-datepicker .ui-datagrid-data td{
	padding: 0px !important;
	width:  auto;
	height:  auto;
	text-align: center;
}

.synfaces-datepicker .ui-datagrid-data td div,
.synfaces-datepicker .ui-datagrid-data td a{
	width:  100%;
	display: block;
	overflow: hidden;
	border-spacing: 0px;
	
}

.synfaces-datepicker .ui-datagrid-data td a:hover{
	background: #caeef3 !important;
	text-decoration: none;
	color: #6086d5;
}

.synfaces-datepicker .ui-datepicker-header,
.synfaces-datepicker .ui-datagrid-data{
	width:  100%;
	height : 100%;
	border-spacing: 0px;
    border-collapse: separate;
}

.synfaces-datepicker .ui-datepicker-header{
	padding: 0.5em 3.2em !important;
}
.synfaces-datepicker .ui-datagrid-content{
	border: none !important;
}

.synfaces-datepicker .ui-datagrid-header{
	padding: 0 !important;
	border: none;
}
.synfaces-datepicker-extratext{
	padding-top: 0px !important;
	margin-top: -3px !important;
	margin-bottom: 5px;
	font-size: 0.8em !important;
	text-align: right;
}
.synfaces-datepicker-day{
	padding-bottom: 0px !important;
	margin-top: 5px;
}

.synfaces-datepicker-header,.synfaces-datepicker-day{
	font-weight: bold;
}
.synfaces-datepicker-current-date,.synfaces-datepicker-header{
	background: #6086d5;
	color: white !important;
}
.synfaces-datepicker-header{
	min-height: 18px;
}

/* -----------------------End syn:datePicker styling---------------- */



.approved-status {
	color:#50A7A7;
	font-weight:bold;
}

.rejected-status {
	color:#F86568;
	font-weight:bold;
}

.pending-status {
	color:#6086d5;
	font-weight:bold;
}
.approval-infor-header {
	overflow: hidden;
	display: block;
	padding:10px 0px;
	font-size:12px;
	font-weight:700;
	border-top:1px solid #e4e4e4;
	width: 100%;
	margin-top:10px;
}

/*===================================== 
		NO BORDER RIGHT/LEFT TABLE
=======================================*/

.syndatatable-no-column-border .ui-datatable-tablewrapper th,
.syndatatable-no-column-border .ui-datatable-tablewrapper td,
.syndatatable-no-column-border .ui-datatable-tablewrapper .ui-widget-content{
	border-left: none !important;
	border-right: none !important;
}

/* Sticky Header Syndatatable */
.syndatatable-sticky-header > div.ui-datatable-tablewrapper {
	margin-top: -1px;
}
.syndatatable-sticky-header > div.ui-datatable-tablewrapper > table > thead > tr{
	position: sticky;
	top: 0px;
	z-index: 8;
}

.syndatatable-sticky-header .ui-datatable-header.ui-widget-header{
	border-bottom: 1px solid #e4e4e4;
	flex-shrink: 0;
}

.employee-master.contract-type-panel > tbody > tr > td {
	width: 100% !important;
}

.pending-status {
	color: #0000FF;
}

.reject-status {
	color: #FF0000;
}

.approve-status {
	color: #008000;
}

.checked-context-sensitive-help {
	width: -moz-fit-content !important;
	width: -webkit-fit-content; 
}

#searchPanelMobile > div.ui-dialog {
	width: 100% !important;
	height: 100% !important;
	visibility: visible;
	top:0;
	left: 0;
	z-index: 1005;
	display: block;
	overflow: auto;
}

#searchPanelMobile > div.ui-dialog > div.ui-dialog-content {
	max-width: 95vw !important;
	margin-bottom: 10px;
}

#searchInventoryPanelMobile > div.ui-dialog {
	width: 100% !important;
	height: 100% !important;
	visibility: visible;
	top:0;
	left: 0;
	z-index: 1005;
	display: block;
	overflow: auto;
}

#searchInventoryPanelMobile > div.ui-dialog > div.ui-dialog-content {
	max-width: 95vw !important;
	margin-bottom: 10px;
}

/* Calendar with Number */

.number-calendar.fa{
 	position: relative;
 }
 .number-calendar.fa:before{
 	font-size: 32px;
 	color: #6086d5;
 }
 .number-calendar.fa span{
  	margin: auto;
 	position: absolute;
	top: 60%;
    transform: translateY(-50%);
	font-size: 11px;
	font-weight: bold;
	left: 0;  right: 0;
	
}

.synfaces-segment-table-panel{
	border: none;
}
.synfaces-segment-table-panel .ui-panel-titlebar{
	background-color:  #f8f8f8;
	border: 1px solid #e4e4e4;
	border-bottom: none;
}

.synfaces-segment-table-panel > div.ui-panel-content{
	padding: 0 !important;
	border: none;
}
.synfaces-segment-table-panel > div.ui-panel-content >table tr,
.synfaces-segment-table-panel > div.ui-panel-content >table th{
	border: 1px solid #e4e4e4;
}

.synfaces-segment-table-panel > div.ui-panel-content >table > thead > tr{
	background-color:  #f8f8f8;
}

.synfaces-segment-table-panel > div.ui-panel-content >table{
	border-collapse: collapse; 
	border: none;
}
	
.ui-calendar.e2-input-date > button{
	border:none;
	margin-left: -25px;
	width: 2em !important;
}
.ui-calendar.e2-input-date > button > span:before{
	color: #4690fd;
}

.synfaces-confirmation-msg:before{
	font-family: var(--fontawesome);
	font-weight: 900;
	content: "\f071";
	color: #ff9966;
	padding-right: 10px;
	font-size: 24px;
}

.e1-master-search > input {
	font-weight: 900;
	color: #666 !important;
	min-height: 26px;
	width: 100%;
	margin-left: 5px;
}

.synfaces-button-bar.synfaces-top-buttons button.ui-button-icon-only {
    background-color: transparent;
    line-height: unset;
}

.synfaces-button-bar.synfaces-top-buttons button.ui-button-icon-only .ui-icon {
	top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
}

.synfaces-button-bar.synfaces-top-buttons button.ui-button-icon-only .ui-icon:before {
    color: var(--syn-icon-color);
    font-size: 17px;
}

.e23 .synfaces-button-bar.synfaces-top-buttons button.ui-button-icon-only .ui-icon {
	top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.e23 .synfaces-button-bar.synfaces-top-buttons button.ui-button-icon-only .ui-icon:before {
    color: var(--action-icon-default);
}

.e23 .synfaces-button-bar.synfaces-top-buttons button.ui-button.ui-state-disabled .ui-icon:before {
    color: var(--action-icon-disable);
}

.synfaces-button-bar.synfaces-top-buttons button.ui-button-icon-only.e22-negative-action-button .ui-icon:before {
    color: var(--syn-negative-action-color);
}

.synfaces-button-bar.synfaces-top-buttons .ui-selectonemenu {
	margin-top: 4px;
    margin-bottom: 3px
}

div.multiple-line-item-adding-form {
	display: inline-block
}

div.multiple-line-item-adding-form > input {
	margin: 0px 5px 0px 5px; 
	width: 40px
}

.synfaces-image-item-button .fa-search-plus {
    font-size: 1.3em !important;
    font-weight: 300 !important;
    color: white;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    position: absolute;
    text-align: center;
}

.synfaces-image-item-button {
    position: relative;
}

.synfaces-image-item-button:hover img {
    filter: brightness(60%);
}

.synfaces-image-item-button:hover .fa-search-plus {
    opacity: 1;
}

.synfaces-image-item-dialog {
    width: 720px !important;
    border-radius: 10px!important;
}

.synfaces-image-item-dialog .ui-dialog-content {
    padding: 0;
}

.synfaces-image-item-dialog .header {
    padding: 20px;
}

.synfaces-image-item-dialog .body {
    text-align: center;
    padding: 0 20px 20px 20px;
}

.synfaces-image-item-dialog .bottom {
	border-top: 1px solid #e4e4e4;
	height: 40px;
	padding-top: 10px;
	text-align: center;
}

/* Display database Name */
@media only screen and (max-width: 600px) {
	#contentPane .synfaces-header-toolbar {
		display: grid;
  		grid-template-columns: 1fr 50px;
	}
	
	#contentPane .synfaces-header-toolbar form:first-child {
		max-width: calc(100vw - 50px);
	}
	
	#contentPane .synfaces-header-toolbar form:first-child .ui-selectonemenu {
		max-width: calc(100vw - 130px);
		min-width: unset !important;
	}
	
	#contentPane .synfaces-header-toolbar form:first-child .ui-selectonemenu label.ui-selectonemenu-label.ui-inputfield {
		text-overflow: ellipsis;
	}
}

/* Button */

button.add-row-button.ui-button.ui-widget.ui-state-default .ui-icon,
button.delete-all-button.ui-button.ui-widget.ui-state-default .ui-icon,
button.delete-batch-button.ui-button.ui-widget.ui-state-default .ui-icon {
	margin: 0;
	transform: translate(-50% , -50%);
	width: auto;
}

button.add-row-button.ui-button.ui-widget.ui-state-default,
button.add-row-button.ui-button.ui-widget.ui-state-hover:hover {
	background-color: transparent !important;
	border: none !important;
}

button.add-row-button.ui-button.ui-widget.ui-state-default .ui-icon::before {
	color: var(--action-icon-default) !important;
/* 	font-size: 24px; */
}

button.abort-button.ui-button.ui-widget.ui-state-default {
	background-color: transparent !important;
}

button.abort-button.ui-button.ui-widget.ui-state-default .ui-icon::before {
	color: var(--syn-abort-button)!important;
}

button.delete-all-button.ui-button.ui-widget.ui-state-default {
	background-color: transparent !important;
}

button.delete-all-button.ui-button.ui-widget.ui-state-default .ui-icon::before {
	color: var(--action-icon-warning-hover) !important;
	font-size: 24px;
}

button.delete-all-button.ui-button.ui-widget.ui-state-hover .ui-icon::before {
	color: var(--action-icon-warning-hover) !important;
}

button.delete-batch-button.ui-button.ui-widget.ui-state-default,
button.delete-batch-button.ui-button.ui-widget.ui-state-hover:hover {
	background-color: transparent !important;
	border: none !important;
}

button.delete-batch-button.ui-button.ui-widget.ui-state-default .ui-icon::before {
	color: var(--syn-abort-button) !important;
	font-size: 24px;
}

button.delete-batch-button.ui-button.ui-widget.ui-state-hover .ui-icon::before {
	color: var(--action-icon-warning-hover) !important;
}

/* Button syn:commandButton */

button:has(span.icomoon-Copy-From) {
	background-color: transparent !important;
    border: none !important;
}

button > span.icomoon-Copy-From {
	margin: 0 !important;
    transform: translate(-50%, -50%);
}

button > span.icomoon-Copy-From::before {
    color: var(--action-icon-default) !important;
    font-size: 20px !important;
}

/* Input entity:hover */
.synfaces-input-entity:hover input:not([readonly]),
.e23 .synfaces-input-remark:hover textarea:not([readonly]) {
/* 	border:none; */
/* 	outline: 1px solid #3A86FF !important; */
	border-color: #3A86FF !important;
}

.e23 .synfaces-input-entity:has(input.ui-state-hover) button .ui-icon::before,
.e23 .synfaces-input-remark:has(textarea:hover) button .ui-icon::before {
	color: #1986FF;
}

.synfaces-input-entity:has(input[type="text"][readonly]) button .ui-icon::before {
	color: transparent !important;
}

/* Syn:Input and syn:inputTextarea state hover */
.e23 input.ui-inputtext.ui-state-hover:not(.ui-column-filter),
.e23 textarea.ui-inputtextarea.ui-state-hover {
	border: 1px solid var(--main-outline-primary) !important;
}
.e23 input[readonly].ui-inputtext.ui-state-hover:not(.ui-column-filter) {
	border: none !important;
}
/* End Syn:Input and syn:inputTextarea state hover */

/* Style button */

button[class*="e23-"] span.ui-icon {
	margin: 0;
	transform: translate(-50%, -50%);
}

button.e23-primary-button .ui-icon::before,
button.e23-primary-button.ui-state-hover .ui-icon::before  {
	color: var(--action-icon-default);
}

.e23 button.e23-danger-button .ui-icon::before,
.e23 button.e23-danger-button.ui-state-hover .ui-icon::before  {
	color: var(--action-icon-warning-hover);
}

.e23 button.e23-warning-button .ui-icon::before {
	color: var(--action-icon-warning);
}

.e23 button.e23-warning-button.ui-state-hover .ui-icon::before  {
	color: var(--action-icon-warning-hover);
}

/* E2A (e23) p:dialog  */

.e23-ui-dialog {
	background-color: #F0F1F5;
    border-radius: 5px;
}

.e23-ui-dialog .ui-dialog-titlebar {
    background-color: #F0F1F5;
    height: 27px;
}

.e23-ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-icon {
	text-decoration: none;
}

.e23-ui-dialog .ui-dialog-content input.ui-state-default {
	border: none;
}

.e23-ui-dialog .synfaces-button-bar {
	padding-top: 20px;
}

.e23-ui-dialog button.btn-light {
    border: none;
    background-color: transparent;
    color: #0287E6;
    margin-right: 15px;
}

.e23-ui-dialog button.btn-primary {
    border: 1px solid #0287E6;
    background-color: #0287E6;
    border-radius: 5px;
    color: #FFF;
}

/* SYN-BOTTOM-SIDEBAR */
.syn-bottom-sidebar {
    height: auto;
    max-height: calc(100dvh - 64px);
    padding: 15px 15px 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
   /*  border: 1px solid #D9DADB; */
    width: 100vw;
    border: none;
}

.syn-bottom-sidebar > .ui-sidebar-close {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	border-top: 4px solid #D7D7D7;
	width: 45px;
	top: 15px;
}

.syn-bottom-sidebar > .ui-sidebar-close.ui-state-focus {
	border-color: transparent;
	border-top-color: #D7D7D7;
}

.syn-bottom-sidebar > .ui-sidebar-close > .ui-icon:before {
	content:""
}

.syn-bottom-sidebar .ui-panel {
	border: none;
	padding-top: 25px;
}

.syn-bottom-sidebar > .ui-panel.synfaces-date-picker-mobile-popup {
	padding-top: 15px;
}

.syn-bottom-sidebar > .ui-panel.synfaces-date-picker-mobile-popup .ui-panel-content {
	min-height: 390px;
}

.syn-bottom-sidebar > .ui-panel > .ui-panel-titlebar {
    font-family: 'Roboto Bold', 'Roboto', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 20px !important;
    color: #555555;
    border: none;
}

.syn-bottom-sidebar > .ui-panel > .ui-panel-content {
	padding: 5px 10px;
	/* padding: 0px; */
}

.syn-bottom-sidebar > .ui-panel > .ui-panel-content table {
	padding-top: 11px;
	padding-bottom: 0px;
	border-spacing: 0px;
}

.syn-bottom-sidebar > .ui-panel > .ui-panel-content .ui-inputfield::placeholder {
	font-size: 17px;
	color: #D7D7D7;
}

.syn-bottom-sidebar .ui-panel > .ui-panel-content .ui-inputfield.ui-corner-all:not(.ui-selectonemenu-label):not(.kbw-signature) {
	border-radius: 10px !important;
	border-color: #E1E1E1;
	padding: 9px 12px;
}	

.syn-bottom-sidebar > .ui-panel > .ui-panel-content table .synfaces-grid-label {
	width: 160px;
	margin-bottom: 0px;
	padding-left: 0px !important;
	font-weight: normal;
	font-size: 13px;
	color: #AAA;
}

.syn-bottom-sidebar > .ui-panel > .ui-panel-content table .synfaces-grid-value {
	flex: 1;
	font-size: 16px;
	color: #333333;
	text-align: right;	
}

.syn-bottom-sidebar > .ui-panel > .ui-panel-content table .synfaces-grid-value input {
	height: 38px;
	width: 160px;
}

.syn-bottom-sidebar > .ui-panel > .ui-panel-content table .synfaces-grid-value .ui-input-icon-left {
	position: relative;
	display: inline-block;
	width: 160px;
}

.syn-bottom-sidebar > .ui-panel > .ui-panel-content table .synfaces-grid-value .ui-input-icon-left .input-icon {
	position: absolute;
	line-height: 38px;
	height: 38px;
	left: 10px;
}

.syn-bottom-sidebar > .ui-panel > .ui-panel-content table .synfaces-grid-value .ui-input-icon-left input {
	padding-left: 25px;
}

.syn-bottom-sidebar > .ui-panel > .ui-panel-content .form-grid-type1 tr {
	display: flex;
	padding-top: 7px;
	padding-bottom: 7px;
	margin-bottom: 0px;
	min-height: 38px;
	align-items: center;
}

.syn-bottom-sidebar .synfaces-input-remark-mobile-popup {
	border: none;
}

.syn-bottom-sidebar .synfaces-input-remark-mobile-popup > .ui-panel-content {
	padding: 0px;
	margin-bottom: 20px;
}

.syn-bottom-sidebar .synfaces-input-remark-mobile-popup > .ui-panel-content:has(.syn-bottom-sidebar-input-counter){
	position: relative;
}

.syn-bottom-sidebar .synfaces-input-remark-mobile-popup .ui-panel-titlebar{
	margin: -35px -8px 0 -8px;
	padding: 0;
}

.syn-bottom-sidebar .synfaces-input-remark-mobile-popup .ui-panel-titlebar .ui-panel-title .ui-icon{
	top: 30%;
}

.syn-bottom-sidebar .synfaces-input-remark-mobile-popup .ui-panel-titlebar .ui-panel-title .ui-icon::before{
	font-size: 18px;
}

.syn-bottom-sidebar .synfaces-input-remark-mobile-popup .remark-pojos-table table thead{
	display: none;
}

.syn-bottom-sidebar .synfaces-input-remark-mobile-popup .remark-pojos-table .ui-datatable-header{
	display: flex;
	flex-direction: column;
	background-color: transparent;
	border: none;
	text-align: left;
}

.syn-bottom-sidebar .synfaces-input-remark-mobile-popup .remark-pojos-table .ui-datatable-header .ui-inputfield.ui-inputtext{
	height: 35px !important;
}

.syn-bottom-sidebar .synfaces-input-remark-mobile-popup .remark-pojos-table .ui-datatable-tablewrapper{
	max-height: 750px;
}

.syn-bottom-sidebar .synfaces-input-remark-mobile-popup .remark-pojos-table .ui-datatable-tablewrapper :is(
  		table,
	table thead,
	table tbody,
	table tr,
	table td
) {
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
}

.syn-bottom-sidebar .synfaces-input-remark-mobile-popup .remark-pojos-table div.row-data{
	padding: 10px 0; 
	border-bottom: 1px dotted !important;
}

.syn-bottom-sidebar .synfaces-input-remark-mobile-popup .remark-pojos-table div.row-data .content{
	max-height: 92px;
	display: -webkit-box; 
	-webkit-box-orient: vertical; 
	-webkit-line-clamp: 3;
	word-break: break-word;
	overflow: hidden; 
	text-overflow: ellipsis;
}

.syn-bottom-sidebar .synfaces-input-remark-mobile-popup .remark-pojos-table a.pfs-row-link{
	color: unset;
}

.syn-bottom-sidebar .synfaces-input-remark-mobile-popup .remark-pojos-table a.pfs-row-link:hover{
	text-decoration: none;
}

.syn-bottom-sidebar .ui-panel > .ui-panel-content .syn-bottom-sidebar-input-counter {
	position: absolute;
	right: 10px;
	bottom: 10px;
	color: #AAAAAA;
	font-size: 12px;
}

.syn-bottom-sidebar .ui-panel > .ui-panel-footer {
	border: none;
	padding: 0px;
	margin: 0;
}

.syn-bottom-sidebar .ui-panel > .ui-panel-footer .button-outline-danger {
	background: transparent;
	border: 1px solid #E13149;
	color: #E13149;
	border-radius: 15px;
	height: 40px;
	width: 100px;
	font-size: 15px;
}

.syn-bottom-sidebar .ui-panel > .ui-panel-footer .button-outline-danger .ui-icon {
	left: 14px;
	width: 14px;
	text-indent: 0px !important;
	margin-top: 0px;
	transform: translateY(-50%);
}

.syn-bottom-sidebar .ui-panel > .ui-panel-footer .button-outline-danger .ui-icon:before {
	font-size: 14px;
	color: #E13149;
}

.syn-bottom-sidebar .ui-panel > .ui-panel-footer .button-primary {
	background-color: #3A86FF;
	height: 40px;
	width: 120px;
	border-radius: 15px;
	font-size: 15px;
	color: #FFFFFF;
	font-weight: bold;
}

.syn-bottom-sidebar .ui-panel > .ui-panel-footer .button-primary .ui-icon {
	left: 14px;
	width: 14px;
	text-indent: 0px !important;
	margin-top: 0px;
	transform: translateY(-50%);
}

.syn-bottom-sidebar .ui-panel > .ui-panel-footer .button-primary .ui-icon:before {
	font-size: 14px;
	color: #FFFFFF;
}

.syn-bottom-sidebar-desc {
	font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #AAAAAA;
    line-height: 20px;
}

.e23-mobile .syn-input-show-sidebar {
	display: block;
	width: auto;
	height: auto; 
	min-height: 26px;
	padding-left: 15px;
	font-size: 16px;
	color: #333333;
	border-bottom: 1px solid #E7E0EC; 
	padding-top: 36px;
	margin-top: -36px;
	box-sizing: border-box;
	line-height: 22px;
	padding-bottom: 5px;
}

.e23-mobile .syn-input-show-sidebar.ui-state-disabled {
	border-bottom-color: transparent;
}

.e23-mobile .syn-input-show-sidebar.remark-mobile {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 64px;
}

.e23-mobile .syn-input-show-sidebar.remark-mobile.readonly-true {
	border-bottom-color: transparent;
}

.e23-mobile .syn-input-show-sidebar.date-value {
	line-height: 26px;
}

.e23-mobile .syn-input-show-sidebar:hover {
	text-decoration: none;
	color: #333333;
}

.e23-mobile .syn-input-show-sidebar textarea {
	overflow: hidden;
	resize: none;
	user-select: none;
	padding:0px;
	border: none;
}

.e23-mobile .syn-input-show-sidebar textarea:not([readonly]):not([disabled]):not(:focus),
.e23-mobile .syn-input-show-sidebar textarea:focus,
.e23-mobile .syn-input-show-sidebar textarea:focus-visible {
	border-color: transparent;
	outline: none;
}

.e23-mobile .syn-signature-show-sidebar {
	width: auto; 
	height: auto; 
	display: block; 
	padding-left: 15px;
	font-size: 16px;
	color: #333333;
	border-bottom: 1px solid #E7E0EC; 
	padding-top: 36px;
	margin-top: -36px;
}

.e23-mobile .syn-signature-show-sidebar.emptySignature {
	height: 122px;
}

.e23-mobile .syn-signature-show-sidebar.emptySignature::before {
	content: "Sign here";
	display: block;
	background: #F2F2F2;
	width: calc(100% - 15px);
	height: 100%;
	line-height: 122px;
	color: #AAA;
	font-style: italic;
	font-size: 13px;
}

.e23-mobile .syn-signature-image {
	width: 100%;
	height: 122px;
}

.syn-bottom-sidebar > .ui-panel > .ui-panel-content:has(.syn-bottom-signature-draft) {
	border: 1px solid #C8C8C8;
	border-radius: 10px;
	margin-bottom: 18px;
}

.syn-bottom-signature-draft {
	width: calc(100vw - 34px);
	height: 280px;
	padding: 0px;
}

.syn-bottom-signature-draft.ui-inputfield.ui-state-default {
	border: none;
}

.syn-bottom-sidebar.summary-sidebar > .ui-panel {
	padding-top: 15px;
}

.syn-bottom-sidebar.summary-sidebar > .ui-panel .ui-panel-titlebar {
	background-color: #EBF5FF;
	margin: -30px -15px 0px;
	padding-top: 30px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}

.syn-bottom-sidebar.summary-sidebar > .ui-panel .ui-panel-title > div {
	display: flex;
	align-items: center;
}

.syn-bottom-sidebar.summary-sidebar > .ui-panel .ui-panel-title .header-icon > span::before {
	font-size: 55px;
}

.syn-bottom-sidebar.summary-sidebar > .ui-panel .ui-panel-title .header-content {
	flex: 1;
	padding-left: 15px;
	line-height: normal;
}

.syn-bottom-sidebar.summary-sidebar > .ui-panel .ui-panel-title .header-title {
	line-height: 20px;
	font-size: 17px;
	font-weight: bold;
	color: #333;
	display: block;
}

.syn-bottom-sidebar.summary-sidebar > .ui-panel .ui-panel-title .header-desc {
	line-height: 20px;
	font-size: 12px;
	color: #333;
	font-weight: normal;
}

.syn-bottom-sidebar.summary-sidebar > .ui-panel .ui-panel-title .header-desc-bold {
	line-height: 20px;
	font-size: 17px;
	color: #3A86FF;
	font-weight: bold;
}

.syn-bottom-sidebar.summary-sidebar > .ui-panel .ui-panel-content {
	max-height: calc(100dvh - 200px);
}

.syn-bottom-sidebar.summary-sidebar .summary-sidebar-datatable {
	width: 100%;
}

.syn-bottom-sidebar.summary-sidebar .summary-sidebar-datatable thead {
	display: none;
}

.syn-bottom-sidebar.summary-sidebar .summary-sidebar-datatable tbody td {
	border-color: transparent;
}

.syn-bottom-sidebar.summary-sidebar .summary-sidebar-datatable tbody tr:not(:last-child) td {
	border-bottom-color: #E7E0EC;	
}

.syn-bottom-sidebar.summary-sidebar .summary-sidebar-datatable .row-item {
	display: flex;
	padding: 5px 0px;
}

.syn-bottom-sidebar.summary-sidebar .summary-sidebar-datatable .row-item-icon {
	padding-right: 10px
}

.syn-bottom-sidebar.summary-sidebar .summary-sidebar-datatable .row-item-icon:before {
	font-size: 20px;
	color: var(--syn-mobile-label-drawer);
	font-weight: normal;
}

.syn-bottom-sidebar.summary-sidebar .summary-sidebar-datatable .row-item-value {
	flex: 1;
	color: #555555;
	font-size: 15px;
}

.syn-bottom-sidebar.summary-sidebar .summary-sidebar-datatable td:has(.watermark) {
	position: relative;
} 

.syn-bottom-sidebar.summary-sidebar .summary-sidebar-datatable .watermark {
	position: absolute;
	bottom: 10px;
	right: 10px;
	transform: rotate(-30deg);
	opacity: 0.2;
}

.syn-bottom-sidebar.summary-sidebar .summary-sidebar-datatable .watermark-icon > span {
	font-size: 55px;
} 

.update-btn-alert-message{
	display: none;
}

#searchBottomPanelMobile .ui-sidebar {
	padding-top: 40px;
}

#searchBottomPanelMobile .search-item-results-wrapper .ui-datascroller-content {
	border-color: transparent;
}

#searchBottomPanelMobile .search-item-results-wrapper .ui-datascroller-content .ui-datascroller-item {
	border-bottom: 1px dashed #E7E0EC;
	padding: 5px 0px;
}

#searchBottomPanelMobile .search-item-results-wrapper .ui-datascroller-content .search-result-icon:before {
	font-size: 22px;
	width: 27px;
	color: #9FB0CA;
}

#searchBottomPanelMobile .search-item-results-wrapper .ui-datascroller-content .search-result-row .search-result-icon textarea {
	line-height: 22px;
	height: 22px;
	padding-left: 8px;
	color: #AAA;
	height: 22px !important;
	line-height: 22px;
	max-height: 22px !important;
	min-height: 22px !important;
}

#searchBottomPanelMobile .search-item-results-wrapper .ui-datascroller-content .search-result-row {
	display: inline-block;
	width: 100%;
}

#searchBottomPanelMobile .search-item-results-wrapper .ui-datascroller-content .search-result-row span {
	display: inline-flex;
	width: 100%;
	padding: 5px 0px;
}

#searchBottomPanelMobile .search-item-results-wrapper .ui-datascroller-content .search-result-row textarea {
	background-color: transparent;
	border: none;
	resize: none;
	outline: none;
	padding: 0;
	margin: 0;
	line-height: 20px;
	max-height: none !important;
	color:var(--syn-mobile-label);
	font-size: 15px;
}

#searchBottomPanelMobile .search-item-results-wrapper .ui-datascroller-content .search-result-row .search-result-header textarea{
	width: 100%;
	max-height: 20px !important;
	min-height: 20px !important;
	height: 20px !important;
	display: inline-flex;
	font-weight: bold;
	align-items: center;
	font-size: 15px;
	line-height: 20px;
	color: #555555;
	text-transform: capitalize;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

#searchBottomPanelMobile .search-clear-btn{
	position : absolute;
	right: 0px;
	top: 5px;
}
#searchBottomPanelMobile .search-clear-btn .ui-icon:before{
	font-size: 13px;
}
#searchBottomPanelMobile .search-clear-btn .ui-button-text{
	font-weight: normal;
}
.e23-mobile button.synfaces-mobile-search-button {
	width: 100%;
	text-align: left;
	color: #333;
	font-weight: normal;
	font-size: 14px;
	border-bottom: 1px solid #E7E0EC;
	border-radius: 0px;	
}

.e23-mobile button.synfaces-mobile-search-button.ui-button-text-only {
	background-color: transparent;
    color: #333;
}

.e23-mobile button.synfaces-mobile-search-button .ui-icon.fa-ellipsis-h:before {
	content: "";
}

.e23-mobile button.synfaces-mobile-search-button .ui-icon:before {
	color: #AAA;
}

.e23-mobile button.synfaces-mobile-search-button .ui-button-text {
	padding-left: 0px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal;
	line-height: 18px;
}

.synm-select1menu-panel.ui-selectonemenu-panel,
.synm-select1menu-halfpanel.ui-selectonemenu-panel {
	width: calc(100dvw - 30px) !important;
	position: fixed;
	top: unset !important;
	bottom: 0px;
	left: 0px !important;
	right: 0px;
	margin: 0px;
	border: none;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;	
	padding: 15px;
	min-height: 390px;
}

.synm-select1menu-halfpanel.ui-selectonemenu-panel {
	max-height: 90dvh;
}

.synm-select1menu-panel.ui-selectonemenu-panel::before,
.synm-select1menu-halfpanel.ui-selectonemenu-panel::before {
	content: "";
	display: inline-block;
	height: 21px;
	width: 45px;
	margin: auto;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	border-top: 4px solid #D7D7D7;
}

.synm-select1menu-panel.ui-selectonemenu-panel .ui-selectonemenu-filter-container {
	padding: 0px;
	margin-bottom: 10px;
}

.synm-select1menu-panel.ui-selectonemenu-panel .ui-selectonemenu-filter-container input {
	height: 40px;
	width: 100%;
	border-color: #E1E1E1;
	border-radius: 10px;
	padding: 2px 40px;
	font-size: 16px;
	font-family: "Roboto", sans-serif, "Font Awesome 6 Pro";
}

.synm-select1menu-panel.ui-selectonemenu-panel .ui-selectonemenu-filter-container .ui-icon-search {
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.synm-select1menu-panel.ui-selectonemenu-panel .ui-selectonemenu-filter-container .ui-icon-search::before {
	font-size: 20px;
	color: #E1E1E1;
}

.synm-select1menu-panel.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper {
	max-height: calc(100dvh - 160px) !important;
}

.synm-select1menu-halfpanel.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper {
	max-height: unset !important;
}

.synm-select1menu-panel.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper li,
.synm-select1menu-halfpanel.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper li {
	font-size: 16px;
	font-weight:700;
	color: #555;
	line-height: 20px;
	padding: 10px;
}

.synm-select1menu-panel.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper li {
	text-align: left;
}

.synm-select1menu-halfpanel.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper li {
	text-align: center;
}

.synm-select1menu-panel.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper li.ui-state-highlight,
.synm-select1menu-halfpanel.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper li.ui-state-highlight {
	background-color: transparent;
}

.synm-select1menu-panel.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper li.ui-state-highlight:hover,
.synm-select1menu-halfpanel.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper li.ui-state-highlight:hover {
	color: #555;
}

.syn-selectcheckboxmenu-panel {
	padding: 10px 0px;
	border-radius: 10px;
	background-color: #D3DAE4;
}

.syn-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header {
	height: 38px;
	background: transparent;
	border-color: transparent;
	padding: 0px;
	margin-bottom: 0px;
}

.syn-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header:has(.ui-selectcheckboxmenu-filter-container) {
	height: 80px;
}

.syn-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header .ui-chkbox {
	top: 20px; 
	position: absolute;
	left: 10px;
}

.syn-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header:has(.ui-selectcheckboxmenu-filter-container) .ui-chkbox {
	top: 62px;
}

.syn-selectcheckboxmenu-panel:not(.with-label) .ui-selectcheckboxmenu-header .ui-chkbox::after {
	content:"Select All";
	position: relative;
	top: -5px;
	left: 10px;
	font-weight: normal;
}

.syn-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header .ui-selectcheckboxmenu-close,
.syn-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header .ui-selectcheckboxmenu-filter-container .ui-icon-search {
	display: none;
}

.syn-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header .ui-selectcheckboxmenu-filter-container {
	margin: 8px 18px;
	width: calc(100% - 36px)
}

.syn-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header .ui-selectcheckboxmenu-filter-container input {
	height: 24px;
	width: 100%;
	font-size: 12px;
	color: #333;
	border-radius: 5px;
	padding: 2px 5px;
}

.syn-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header .ui-selectcheckboxmenu-filter-container input.ui-state-default.ui-corner-all {
	border-color: transparent;
}

.syn-selectcheckboxmenu-panel.ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-items-wrapper {
	position: unset;
}

.syn-selectcheckboxmenu-panel .ui-selectcheckboxmenu-items-wrapper ul {
	background-color: transparent;
}

.syn-selectcheckboxmenu-panel.with-label .ui-selectcheckboxmenu-items-wrapper ul .ui-selectcheckboxmenu-group-list-item {
	display: block !important;
	margin-left: 37px;
	position: absolute;
	top: 44px;
	height: 40px;
	line-height: 40px;
	margin-top: 8px;
	font-weight: normal;
}

.syn-selectcheckboxmenu-panel .ui-selectcheckboxmenu-items-wrapper ul li:not(.ui-selectcheckboxmenu-group-list-item) {
	padding: 12px 10px;
}

.syn-selectcheckboxmenu-panel .ui-selectcheckboxmenu-items-wrapper .ui-selectcheckboxmenu-list-item label {
	padding-left: 28px;
}

.syn-selectcheckboxmenu-panel div.ui-chkbox > div.ui-chkbox-box {
	border-radius: 4px;
	border-color: transparent;
}

.syn-selectcheckboxmenu-panel div.ui-chkbox > div.ui-chkbox-box.ui-state-active {
	background-color: var(--syn-icon-color);
}

.syn-selectcheckboxmenu {
	background-color: #FFF;
}

.syn-selectcheckboxmenu.layout-horizontal .ui-selectcheckboxmenu-multiple-container.ui-inputfield {
	padding: 10px 32px 10px 5px;
}


.syn-selectcheckboxmenu .ui-selectcheckboxmenu-token {
	float: none;
	border-radius: 10px;
	background-color: var(--drawer-background);
}

.syn-selectcheckboxmenu.layout-vertical .ui-selectcheckboxmenu-token + .ui-selectcheckboxmenu-token {
	margin-top: 5px;
}

.syn-selectcheckboxmenu.layout-vertical .ui-selectcheckboxmenu-trigger .ui-icon {
	top: 50%; 
	transform: translateY(-50%);
	margin-top: 0px;
}

.syn-selectcheckboxmenu.layout-vertical .ui-selectcheckboxmenu-token-label {
	font-weight: normal;
	padding: 0px 28px 0px 8px;
	line-height: 16px;
}

.syn-selectcheckboxmenu .ui-selectcheckboxmenu-token-icon {
	margin:0px;
	transform: translateY(-50%);
}

.syn-selectcheckboxmenu .ui-selectcheckboxmenu-token-icon::before,
.syn-selectcheckboxmenu .ui-selectcheckboxmenu-trigger .ui-icon::before {
	color: var(--action-icon-warning);
}

.syn-selectcheckboxmenu .ui-selectcheckboxmenu-trigger .ui-icon::before {
	content: "\f078";
}

.syn-selectcheckboxmenu .ui-selectcheckboxmenu-token-icon:hover::before {
	color: var(--action-icon-warning-hover);
}

.syn-selectcheckboxmenu.layout-horizontal {
	width: 100%;
} 
.syn-selectcheckboxmenu.layout-horizontal .ui-selectcheckboxmenu-label-container {
	font-weight: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.syn-selectcheckboxmenu.layout-horizontal .ui-selectcheckboxmenu-label {
	min-height: 18px;
}

.syn-selectcheckboxmenu.layout-horizontal .ui-selectcheckboxmenu-label.ui-state-hover {
	font-weight: normal;
}

.synm-selectonemenu.ui-selectonemenu.ui-state-default {
	border-color: transparent;
	border-bottom: 1px solid var(--syn-management-tabview-header-border);
	border-radius: 0px;
	border-width: 0 0 1px 0;
}

.synm-selectonemenu.ui-selectonemenu.ui-state-default.type-2 {
	border-bottom-color: transparent;
}

/* .synm-selectonemenu.ui-selectonemenu.ui-state-default.no-trigger .ui-icon::before {
	content: "";
} */

.synm-selectonemenu.ui-selectonemenu .ui-inputfield {
	padding-bottom: 4px;
	padding-top: 0px;
}

.synm-selectonemenu.ui-selectonemenu .ui-selectonemenu-trigger .ui-icon::before {
	content: "";
}

/* Hidden scrollbar in table */
.no-scrollbar.ui-datatable .ui-datatable-tablewrapper {
	overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
}

.no-scrollbar.ui-datatable .ui-datatable-tablewrapper::-webkit-scrollbar { 
  width: 0 !important;
  display: none; 
}
.empty-message-wrapper {
	display: flex;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	background-color: #f0f1f5;
	font-size: 1em;
	color: #555555;
	text-align: center;
}

.empty-message-wrapper .text-description + .text-description {
	padding-top: 20px
}

.empty-message-wrapper button {
	width: auto;
}

.empty-message-wrapper button > .ui-icon.fa {
	margin: 0px;
}


/* SEARCH LINE ITEM */
.search-line-item-wrapper {
    display: inline-flex
}

.search-line-item-expanse {
	position: relative;
	line-height: normal;
    min-width: 270px;
}

.search-line-item-expanse .input-icon {
	margin-top: auto;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--action-icon-warning);
}

.search-line-item-expanse .input-icon::before {
	font-size: 12px;
}

.search-line-item-expanse input {
	height: 24px; 
	width: 100%; 
	padding-left: 32px !important; 
	border: 1px solid var(--syn-focus-border-color) !important; 
	outline: none; 
	border-radius: 5px;
}

.search-line-item-expanse input.ui-inputfield {
	font-size: 12px;
}

.search-line-item-expanse .button-collapse {
	position: absolute;
    right: 3px;
    height: 100%;
    line-height: normal;
    width: auto;
}

.search-line-item-expanse .button-collapse .ui-icon::before {
    color: var(--action-icon-warning);
    font-weight: 500;
}

.search-line-item-expanse .button-collapse.ui-state-active {
	background-color: transparent;
}

.search-line-item-expanse .button-collapse .ui-button-text {
	padding: .3em 10px;
}
/* --END-- SEARCH LINE ITEM */

/* DROP LIST OVERLAY PANEL  */
.menu-droplist {
	background-color: #D3DAE4;
	border-radius: 10px;
	padding: 10px; 
	transform: translateX(-50px);
}

.menu-droplist::before {
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 10px solid #D3DAE4;
	top: -10px;
	left: 50px;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.menu-droplist .ui-menuitem-link {
	font-weight: normal;
  	color: #23365A;
  	font-size: 1.083em;
  	line-height: 1.4em;
  	padding: 10px 0px;
}

/*	--END-- DROP LIST OVERLAY PANEL  */

#centerPane.ui-layout-unit > .ui-layout-unit-content {
	overflow: hidden;
}

.e23-mobile button.ui-button.synfaces-mobile-input-button.ui-button-text-only {
	background: transparent;
	color: #333;
	text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
}

.synfaces-mobile-input-button .ui-button-text {
	padding: 0px;
	min-height: 18px;
	line-height: 18px;
}

.synfaces-mobile-input-button .ui-icon.fa-ellipsis-h:before {
	content: "";
}

.syn-bottom-sidebar .synfaces-input-remark-mobile-popup textarea {
	font-size: 15px;
}

.synfaces-input-remark-mobile-popup .synface-input-remark-label {
	font-size: 12px;
	color: var(--syn-mobile-label-drawer);
	padding-left: 15px;
	padding-bottom: 5px;
	display: inline-block;
}

.syn-datepicker-panel {
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
    border-radius: 15px;
    padding: 10px !important;
    width: 22em;
}

.syn-datepicker-panel .ui-datepicker-header {
	margin: 0;
    line-height: normal;
    background: #fff;
    border-width: 0px;
    border-radius: inherit;
    font-size: 14px;
}

.syn-datepicker-panel .ui-datepicker-header .ui-icon:before {
    color: #AAAAAA;
	font-family: var(--fontawesome);
}

.syn-datepicker-panel .ui-icon-circle-triangle-w:before {
	content: "\f104";
}

.syn-datepicker-panel .ui-icon-circle-triangle-e:before {
	content: "\f105";
}

.syn-datepicker-panel .ui-datepicker-year {
	border: none;
    width: auto;
    padding-right: 5px;
}

.syn-datepicker-panel .ui-monthpicker .ui-monthpicker-month {
	box-sizing: border-box;
   	padding: 15px;
	border: 1px solid transparent;
}

/* Mobile (/* On screens that are 768px or less */
@media screen and (max-width: 767px) {
  /* CSS cho mobile */
}

/* Tablet (On screens that are 1024px or less) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* CSS cho tablet */
}

/* Desktop */
@media screen and (min-width: 1025px) {
	.syn-bottom-sidebar:has(.synfaces-date-picker-mobile-popup) {
		width: auto;
		left: unset;
	}
	
	.e23-mobile .e23-table-date-picker-header .ui-selectonemenu {
		margin-left: 10px !important;
  		margin-right: 10px !important;
	}
  
  .e23-mobile .e23-table-date-picker .ui-datagrid-column {
	  	width: 50px !important;
	  	height: 50px !important;
  }
  
  .e23-mobile .syn-datepicker-panel {
  		min-width: auto;
  }
}

/* scanner code mobile */
.synm-scanCode {
   	top: unset !important;
    left: 0px !important;
    bottom: 0px;
    width: 100dvw !important;
    height: 100dvh !important;
}

.synm-scanCode .ui-dialog-content {
	padding: 0px;
	max-width: 100% !important;
   	height: 100% !important;
   	max-height: 100% !important;
   	position: relative;
    background: black;
}

.synm-scanCode .scan-camera video {
	width: 100%
}

.synm-scanCode .ui-dialog-content .pfs-input-info {
	position: relative;
}

.synm-scanCode .ui-dialog-content .pfs-input-info [id$="input"] {
	position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    color: red;
    text-align: center;
    background: transparent;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 2px;
    pointer-events: none;
}

.synm-scanCode .ui-dialog-content .pfs-input-info [id$="info"] {
    color: white;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    font-size: 16px;
    margin-top: 10px;
}

.synm-scanCode .ui-dialog-content .fas.fa-circle {
   	bottom: 20px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.synm-scanCode .ui-dialog-content .fas.fa-circle:hover {
	text-decoration: none;
}

.synm-scanCode .ui-dialog-content .fas.fa-circle:before {
	font-size: 60px; 
	color: white;
}

.synm-scanCode .ui-dialog-content .far.fa-xmark-large {
	bottom: 35px;
    position: absolute;
    left: 20px;
}

.synm-scanCode .ui-dialog-content .far.fa-xmark-large::before {
    font-size: 30px;
    color: white;
}

.syn-schedule .ui-panelgrid,
.syn-schedule .ui-panelgrid > tbody {
	width: 100%;
	height: calc(100% - 1px);
	display: inline-block;
}

.syn-schedule .ui-panelgrid > tbody > tr {
	display: flex;
	height: 100%;
}

.syn-schedule .ui-panelgrid-cell.left-colm {
	width: 390px;
}

.syn-schedule .ui-panelgrid-cell.right-colm {
	width: calc(100% - 400px);
	overflow-x: auto;
	overflow-y: hidden;
	overflow: auto;
	flex: 1;
}


.syn-schedule .schedule-table{
	border-collapse: collapse;
}
.syn-schedule .schedule-table td,th{
	border: 1px solid #E1E6EE;
}

.syn-schedule .schedule-table td:first-of-type {
	text-align: center;
	position: sticky;
	left: 0;
	z-index: 1;
	background: #FFF;
    outline: 1px solid #E1E6EE;
}

.syn-schedule .schedule-table td.event-cell button, 
.syn-schedule .schedule-table td.event-cell a {
	padding: 10px;
	box-sizing: border-box;
    display: block;
}

.syn-schedule .schedule-table td.event-cell button{
	width: 100%;
	height: 100%;
	cursor: pointer;
	border-radius: 0px;
}

.syn-schedule .schedule-table td.event-cell button .ui-icon{
	display: none;
}

.syn-schedule .schedule-table tr:first-of-type {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #FFF;
    outline: 1px solid #E1E6EE;
}

.syn-schedule .today-header {
	position: relative;
}

.syn-schedule .today-header > .ui-button {
	position: absolute;
	bottom: -3px;
	right: -6px;
}

.overlay-panel {
	background-color: rgb(211, 218, 228);
    border-radius: 10px;
}

.overlay-panel .ui-overlaypanel-content {
    padding: 11px 10px 11px 15px;
    color: #23365A;
}

.overlay-panel .ui-overlaypanel-content a {
	color: inherit;
}

.overlay-panel .ui-overlaypanel-content .overlay-content-item {
	height: 40px;
	display: flex;
	align-items: center;
}

.wheel-container {
	width: 80px;
	height: 300px;
	margin: auto;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
	border: none;
	position: relative;
	scrollbar-width: none;
	cursor: grab;
	user-select: none;
	overflow-x: hidden;
	touch-action: pan-y; 
	-ms-touch-action: pan-y;
}

.wheel-item {
   	height: 60px;
	line-height: 60px;
	scroll-snap-align: center;
	font-size: 50px;
	text-align: center;
}
 
.ampm {
 	color: black !important;
    width: 52px;
    height: 30px;
    text-align: center;
    border-radius: 5px;
}
 
.ampm.ampm-selected {
 	color: white !important;
 	background-color: var(--action-icon-default) !important;
}

.syn-schedule .ui-panelgrid tbody { 
	vertical-align: top;
}

.e23-table-date-picker {
	background: #FFF;
	padding: 0px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.e23-table-date-picker tbody td {
	border-color: transparent;
}

.e23-table-date-picker .ui-datagrid-header {
	border: none;
	background-color: transparent;
	padding: 0px;
}

.e23-table-date-picker .ui-datagrid-content {
	border: none;
}

.e23-table-date-picker .ui-datagrid-content > table {
	margin: auto;
	border-spacing: 10px 2px;
}

.e23-table-date-picker .ui-datagrid-content > table > tbody {
	vertical-align: middle;
}

.e23-table-date-picker .ui-datagrid-column {
	font-size: 16px;
	width: 45px;
	height: 45px;
	color: #C8C8C8;
	text-align: center;
	box-sizing: border-box;
}

.e23-table-date-picker .ui-datagrid-column .ui-commandlink .synfaces-div {
	color: #333333;
}

.e23-table-date-picker .ui-datagrid-column:has(.ui-commandlink.selected-date) {
	color: #FFF;
	background-color: var(--main-outline-primary) !important;
	border-radius: 50%;
}

.e23-table-date-picker .ui-datagrid-column:has(.ui-commandlink.current-date) {
	color: #FFF;
	border: 1px solid #3A86FF;
	border-radius: 50%;
}

.e23-table-date-picker .ui-datagrid-column > .ui-commandlink.ui-state-disabled {
	opacity: 1;
}

.e23-table-date-picker .ui-datagrid-column .ui-commandlink.selected-date .synfaces-div {
	color: #FFF;
}

.e23-table-date-picker .ui-datagrid-column:has(.event-date) {
	position: relative;
}

.e23-table-date-picker .event-date::before {
  content: "";
  background: #77c300;
  position: absolute;
  width: 7px;
  height: 7px;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}

.e23-table-date-picker .past-date.event-date::before {
	background-color: #C8C8C8;
}

.e23-table-date-picker-header {
	display: flex;
	flex-direction: row;
}

.e23-table-date-picker-header > span {
	flex: 1;
}

.e23-table-date-picker-header .ui-icon {
	line-height: 30px;
	top: 0px !important;
}

.e23-table-date-picker-header .ui-icon:before {
	font-size: 16px;
	color: #AAAAAA;
}

.e23-table-date-picker-header .ui-selectonemenu {
	margin-left: 35px;
	margin-right: 35px;
	border-color: transparent;
	font-size: 14px;
	width: auto;
}

.e23-table-date-picker-header .ui-selectonemenu label {
	font-size: 16px;
}

.syn-schedule .ui-panelgrid .ui-panelgrid-cell {
	padding: 0px;
}

.schedule-summary .ui-tabs.ui-tabs-top > .ui-tabs-nav {
	border-top: 1px solid #E1E6EE;
	background: transparent;
	display: flex;
}

.schedule-summary .ui-tabs .ui-tabs-nav li {
	flex: 1;
	margin: 0;
	text-align: center;
	display: flex;
}

.schedule-summary .ui-tabs .ui-tabs-nav li a {
	padding: 1em;
	width: 100%;
}

.schedule-summary .ui-tabs .ui-tabs-panel {
	padding: 0px;
}

.schedule-summary .ui-tabs .ui-tabs-panel .ui-datatable-tablewrapper {
	overflow: auto;
}

.schedule-summary .ui-datatable .ui-datatable-header {
	background-color: #FFF;
	border-color: transparent;
}

.e23 .schedule-summary input[type="text"]:not([readonly]):not([disabled]):not(:focus):not(.ui-state-error) {
	border-color: #ccc;
}

.schedule-summary  .status-info {
	display: inline-block;
	text-align: center;
	color: #FFF;
	width: 75px;
	line-height: 18px;
	font-size: 12px;
	clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
	font-weight: normal;
	text-transform: capitalize;
	background-color: rgb(255, 179, 58);
}

.synfaces-dashpane-panel .widget-tabview .customized_table.ui-datatable > .ui-datatable-tablewrapper > table > tbody > tr > td {
	padding: 8px 0px;
}

.list-item {
	color: #555555;
	font-size: 12px;
	line-height: 1.3em;
}

.syn-schedule .schedule-table > tbody{
	vertical-align: middle;
}

.syn-schedule .schedule-table .today-header {
	text-align: center;
	width: 60px;
	min-width: 60px;
	max-width: 60px;
}

.syn-schedule .schedule-table .item-header {
	text-align: center;
	width: 150px;
	min-width: 150px;
	max-width: 150px;
}

.syn-schedule .schedule-table .item-header > div {
	display: flex; 
	align-items: center; 
	gap: 10px; 
	padding: 10px;
}

.syn-schedule .schedule-table .item-header > div > span {
	flex: 1; 
	text-align: left; 
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	text-overflow: ellipsis;
}

.schedule-detail-dialog {
	border-radius: 10px;
}

.schedule-detail-dialog .ui-dialog-titlebar,
.schedule-detail-dialog .ui-dialog-content {
	background-color: #F0F1F5;
}

.schedule-detail-dialog .ui-dialog-title {
	color: #7F7F7F;
	padding-left: 0px;
	font-weight: bold;
}

.schedule-detail-dialog .ui-dialog-content table tbody {
	vertical-align: top;
}

.schedule-detail-dialog .ui-dialog-content table tr {
	background: transparent;
	border-color: transparent;
}

.schedule-detail-dialog .ui-dialog-content .schedule-details-icon > span {
	display: inline-block;
}

.schedule-detail-dialog .ui-dialog-content .schedule-details-icon > span::before {
	font-size: 24px;
	color: #7E95B8;
}

.schedule-detail-dialog [id$=":scheduleTiming"] > div {
	display: flex;
	gap: 10px;
	align-items: center;
}

.schedule-detail-dialog [id$=":scheduleTiming"] > div:first-of-type {
	padding-bottom: 10px;
}

.schedule-details-icon {
	text-align: center;
}

.schedule-detail-buttons .ui-primary-button .ui-icon:before {
	color: #FFF;
	font-size: 16px;
}

.ui-panelgrid .ui-panelgrid-cell.schedule-details-icon,
.ui-panelgrid .ui-panelgrid-cell.schedule-details-value {
	padding: 10px;
}

.order-card {
	display: grid;
	grid-template-columns: 1fr 100px;
	padding: 10px;
}

.list-item {
	color: #555; 
}

.order-card .list-item {
	display: inline-block; 
	padding-bottom: 10px;
	line-height: 16px; 
	height: 16px;
}

.multi-personnels {
	display: flex; 
	align-items: center;
}

.multi-personnels > .avatar-container:first-of-type {
	display: inline-block; 
	left: 15px;
  	position: relative;
}

.multi-personnels.only-one > .avatar-container:first-of-type {
	left: 0px;
}

.multi-personnels .personnel-name {
	flex: 1;
}

.multi-personnels.only-one .personnel-name {
	padding-left: 10px;
}

.multi-personnels > .avatar-container:nth-of-type(2) {
	display: inline-block; 
	position: relative; 
	left: -30px;
}

.more-personnels {
	left: -15px;
	position: relative; 
	top: 6px;
}

.order-meta {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
    align-items: end;
}

.order-marker {
	position: relative;
	width: 30px;
	height: 30px;
}

.order-marker > .ui-icon:before {
	color: #EE6666;
	font-size: 30px;
}

.order-marker-number {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	color: white;
	top: 2px
}

.order-time {
	height: 30px; 
	line-height: 30px;
}

.schedule-details-value .ui-datagrid-content {
	background-color: transparent;
	border-color: transparent;
}

.schedule-detail-dialog div.ui-chkbox > div.ui-chkbox-box.ui-state-active {
	background-color: var(--syn-icon-color);
	border-color: transparent;
}

.schedule-detail-dialog div.ui-chkbox > div.ui-chkbox-box.ui-state-default {
	border-radius: 5px;
	border-color: transparent;
}

.schedule-detail-dialog div.ui-chkbox > div.ui-chkbox-box.ui-state-default.ui-state-disabled {
	border-color: #C8C8C8;
}

.schedule-detail-dialog .ui-selectcheckboxmenu.ui-state-default, 
.schedule-detail-dialog .ui-selectonemenu.ui-state-default,
.schedule-detail-dialog textarea:not([readonly]):not([disabled]):not(:focus),
.schedule-detail-dialog input[type="text"]:not([readonly]):not([disabled]):not(:focus):not(.ui-state-error) {
	border-color: transparent;
	background-color: #FFF;
}

.service-details .form-grid-type1 {
	width: 100%;
}

.service-details .form-grid-type1 td {
	padding: 5px 10px;
}

.service-details .synfaces-grid-label {
	color: #576D8D;
	height: 25px;
}

.service-details .synfaces-grid-value .ui-selectcheckboxmenu {
	height: 20px;
	width: 100%;
}

.service-details .synfaces-grid-value .ui-selectcheckboxmenu-label {
	font-weight: normal;
}

.service-details button.e1-new-with-dns-button .ui-button-text::before {
	content: "";
}

.btn-link.ui-button.ui-state-default.ui-button-text-only {
	color: var(--main-outline-primary);
	background: transparent;
}

.day-view-table td:has(.schedule-event) {
	background-color: #2196F3;
	vertical-align: top;
} 

.day-view-table td .schedule-event {
	color: #FFF;
}

.day-view-table td[rowspan]:not([rowspan="1"]) .schedule-event {
	/* position: absolute; */
	inset: 0;
}

.day-view-table td .schedule-event:hover {
	text-decoration: none;
}

.day-view-table .event-cell {
	position: relative;
}

.day-view-table .event-cell .available-cell {
	position: absolute;
	inset: 0;
}

.button-secondary-warning.ui-button {
	background-color: var(--mobile-button-warning-bg);
	color: var(--mobile-button-warning);
	border-radius: 10px;
	border: 1px solid var(--mobile-button-warning);
}

.button-secondary-warning.ui-button .ui-icon:before {
	color: inherit;
}

.syn-select-overlay {
	
}

.syn-select-overlay .ui-selectonemenu-list {
	background-color: #D3DAE4;
	box-sizing: border-box;
	padding: 5px 0px;
}

.syn-select-overlay .ui-selectonemenu-item-group {
	color: #616161;
	font-size: 16px;
	padding: 10px 20px;
}

.syn-select-overlay .ui-selectonemenu-list-item {
	padding: 12px 20px;
	border-radius: 0px;
}

.syn-select-overlay .ui-selectonemenu-list-item.ui-state-hover {
	background-color: #9FB0CA;
	color: #FFF;
}

.syn-select-overlay.ui-selectonemenu-panel .ui-selectonemenu-list-item.ui-state-highlight,
.syn-select-overlay.ui-selectonemenu-panel .ui-selectonemenu-list-item.ui-state-highlight:hover {
	background-color: #9FB0CA;
	color: #FFF;
}

.schedule-detail-dialog .service-details .service-item {
	width: 100%;
}

.schedule-detail-dialog .service-details .service-item thead {
	display: none;
}

.schedule-detail-dialog .service-details .service-item tbody {
	background-color: transparent;
}

.schedule-detail-dialog .service-details .service-item td {
	border-bottom: 1px solid #ccc;
}

.schedule-detail-dialog .service-details .service-item .item-image {
    width: 45px;
    min-width: 45px;
    max-width: 45px;
}

.schedule-detail-dialog .service-details .service-item .item-checkbox {
    width: 18px;
    min-width: 18px;
    max-width: 18px;
}

.schedule-detail-dialog .service-details .service-item .item-desc {
    font-weight: bold;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2em;
    font-size: 16px; 
    color: #555;
}

.schedule-detail-dialog .service-details .service-item .item-date {
	font-size: 15px; 
	color: #555;
}

.schedule-summary .widget-tabview .ui-datatable {
    display: grid;
    grid-template-rows: 45px 1fr 30px;
}