/*
 * We create this "synfaces" PF Theme (and hence the folder containing this css is primefaces-synfaces) 
 * and hard-code it in web.xml, so as far as PrimeFaces is concerned, it's always using "synfaces" theme.
 *
 * The "aristo" and "omega" theme folders are extracted from PF source and put in our resources folder FOR REFERENCE ONLY.
 * They should NOT be used or edited in anyway. Any JS or CSS defined in those folders are NOT used by the system at all.
 * They should be upgraded whenever we upgrade our PF version.
 *
 * We implement our own Theme "engine" by manipulating properties in SynTheme bean.
 * 
 */


:root {
  --syn-border-color: #e4e4e4;
  --syn-focus-border-color: #5092e4;
  --syn-error-border-color: #505050;
  
  --syn-panel-background-color: #FFF;
  --syn-header-background-color: #f8f8f8;
  --syn-active-background-color: #E0EDFA;
  --syn-error-background-color: #a63d14;
  --syn-hover-background-color: #E0EDFA;
  --syn-overlay-background-color: #515151;

  --syn-icon-color: #0287E6;  
  --syn-link-icon-color: #2083F0;
  --syn-trashcan-icon-color: #F77D83;
  
  --syn-negative-action-color: #F77D83;

  --syn-text-color: #333;
  
  --syn-error-text-color: white;
  
  /*FORM GRID*/
  --syn-label-color: #a2a2a2;
  --syn-form-grid-background: #f6f9fc;
  
  
  --fontawesome: "Font Awesome 6 Pro",Arial,sans-serif;
  --general-fonts: Arial,sans-serif,"Font Awesome 6 Pro";
  --mobile-fonts: "Roboto", sans-serif, "Font Awesome 6 Pro";
  
  
  /* Bluegrey Themes */
  
  --action-icon-default: #0287E6;
  --action-icon-warning: #C8C8C8;
  --action-icon-warning-hover: #E13149;
  --action-clickable-texts: #1976D2;
  --text-buttons: #0287E6;
  --main-outline-primary: #3A86FF;
  --action-icon-disable: #77B3DE;
  
  --text-field-icon: #C8C8C8;
  --text-field-icon-hover: #0287E6;
  
  --section-icon: #0287E6;
  --section-title: #FF9966;
  --drawer-background: #F0F1F5;
  --mobile-header: #3A86FF;
  --main-table-labelKey: #7087A7;
  
  --syn-dialog-header: #7F7F7F;
  --main-active-tabview: #3C8EF8;
  --syn-row-single-selected: #D6EDFF;
  --syn-approval-history-corner-marker: #FD8A09;
  --syn-import-panel-success-text: #70B603;
  --syn-abort-button: #969696;
  --syn-table-header-background-BG: #E1E6EE;
  --syn-table-header-color-BG: #23365A;
  --syn-master-left-side-text: #43546D;
  --syn-management-tabview-header-text: #555555;
  --syn-management-tabview-header-border: #E7E0EC;
  --syn-master-left-side-text: #43546D;
  --syn-summary-detail-side-panel: 225, 230, 238; /* hex color: #C0CBDC */
  --syn-summary-detail-content-panel: 240, 241, 245; /* hex color: #E1E6EE */  
  --syn-summary-title-label-status-all: #333333;
  --syn-summary-detail-content-panel-header: #8D7757;
  --syn-button-primary-diasbled: #E6E6E6;
  --syn-outgoing-bar: #FFB74D;
  --mobile-success: #70B603;
  --mobile-alert-warning: #FD8A09;
  --mobile-button-default-bg: #3A86FF;
  --mobile-button-warning: #E13149;
  --mobile-button-warning-bg: #f0f1f500;
  --mobile-input-text-read: #555555;
  
  /* HEIGHT FOR ICON */
  --entry-top-bar-icon-fontawesome-heigh: 24px; 
  --white: #FFF;
  --syn-mobile-label: #AAAAAA;
  --syn-mobile-label-drawer: #9FB0CA;
  --mobile-detail-container: #EBF5FF;
  
}



/*
 *	The term widget below refers to PrimeFaces UI component.
 *	These classes define some basic stylying for PF
 *	DO NOT ADD ANY OTHER CLASSES. All style changes should go to primefaces-custom.css
*/

.ui-widget {
	font-size: 1.0em;
}

.ui-widget .ui-widget {
	font-size: 1.0em;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-size: 1.0em;
}

.ui-widget-content {	
	border: 1px solid var(--syn-border-color);
	background: var(--syn-panel-background-color);
	color: var(--syn-text-color);
}

.e23 .ui-widget-content {
	/* This code apply for table in detail processing screen */
	border-color: transparent;
	border-bottom-color: #E1E6EE;
}

.ui-widget-content a {
	color: var(--syn-text-color);
}

.ui-widget-header {
	border: 1px solid var(--syn-border-color);
	background: var(--syn-header-background-color);
	color: var(--syn-text-color);
	font-weight: bold;	
}

.ui-widget-header a {
	color: var(--syn-text-color);
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	border: 1px solid var(--syn-border-color);
	color: var(--syn-text-color);
	font-weight: bold;
	outline: none !important;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
	color: var(--syn-text-color);
	text-decoration: none;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover {
	color: var(--syn-text-color);
	font-weight: bold;
}

.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	border: 1px solid var(--syn-focus-border-color);
	color: var(--syn-text-color);
	font-weight: bold;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	border: 1px solid var(--syn-border-color);
	background: var(--syn-active-background-color);
	color: var(--syn-text-color);
	font-weight: bold;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: var(--syn-text-color);
	text-decoration: none;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	background: var(--syn-active-background-color);
}

.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: var(--syn-text-color);
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border: 1px solid var(--syn-error-border-color);
	background: var(--syn-error-background-color);
	color: var(--syn-error-text-color);
}

.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: var(--syn-error-text-color);
}

.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: var(--syn-error-text-color);
}

.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
	font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
	opacity: .7;	
	font-weight: normal;
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: .35;	
	background-image: none;
}

input.ui-state-hover,
input.ui-state-focus {
	outline: 1px solid #3A86FF !important;
}