body {
	
	font-family: Verdana, Arial, sans-serif, Helvetica, tahoma ;
	/* font-size: 80% ; */
	height: 100%; margin: 0; padding: 0;
	background: #F4F4F4;
}


html {

	 font-size: 80%;  /*override bootsfaces css */
}

.ui-widget {font-size: 1.1em;} /*override bootsfaces css */

.label {font-size: 100%;} /*override bootsfaces css */

input, select, textarea {
	font-family: Verdana, Arial, sans-serif, Helvetica, tahoma;
	/*font-size: 12px; */
}

.error {
	color: red!important;
	display: block;
}

.invalidData {
	background-color: #F2DEDE!important;
 	border: 1px solid #CD0A0A!important;
	color: #CD0A0A!important;
}

.red-icon {
	background-image: url(../images/ui-icons_B94A48_256x240.png) !important;
	
	//can use format below with h:outputStylesheet
	//background-image:url("#{resource['primefaces-xxx:images/ui-icons_ff0000_256x240.png']}")!important;
	//This below format also work with h:outputStylesheet
	//background-image: url('/JsfWithWebFlow/javax.faces.resource/images/ui-icons_222222_256x240.png.jsf?ln=primefaces-glass-x') !important;
}	

.lightBlue-icon {
	background-image:url(../images/ui-icons_6495ED_256x240.png)!important;
}

 .bold {
 	font-weight: bold;
 }
 
.panelGroup {
	display:block; 
	text-align:left;
	background-color: #ffffff;
}

.panelGrid {
	border: 1px solid #ccc;
	/*
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-top-color: red;
	*/
}

#wrapper { 
	margin-right: auto;
	margin-left: auto;
	width: 1024px; 
	background-color: #fff;
	border-right-width: thin;
	border-left-width: thin;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #999;
	border-left-color: #999;
}

#header {
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 5px;
	height: 55px; /*45px;*/
	background-repeat: repeat-x;
	width: 100%;  
	border-bottom-width: medium;
	border-bottom-style: inset;
	border-bottom-color: rgb(245, 255, 250); /*mintcream*/
	background-color: rgb(224, 226, 228);
}

#hfsHeader {
	float: left;
}

#appHeader {
	float: right;
	height: 100%;
	font-size: 150%;
	font-style: oblique;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	margin-right:10px;
}

#header-content {
}

#menu {
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	margin-top:1px;
	margin-bottom:1px;
	width:100%;
}

.titleBoxShadow{
	position: relative;
    box-shadow: 1px 2px 4px #666;
}
    
.title {
	background-color: silver;
	/* color: #333; */
	/* background-color: #84908A; */
	/* color: white; */
	/* border-top:1px solid #57626a; */
	/* border-bottom:1px solid #57626a; */
	margin-bottom:1px;
	padding-top:0px;
	padding-left:4pt;
	padding-right:4pt;
	padding-bottom:4px;
	font-size: 20px;
	display:block;
	border-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

#mainContent{
	background-color: #DDD; 
	width: auto;
	height: auto;
	text-align: left;
	vertical-align: top;
	padding: 0em 0em;
	min-height: 550px;
}

.columnClassLabel{
	border-style:none !important;
	/*border-bottom-color: #DDD !important ;*/ 
	border-bottom-color: rgba(204, 204, 204, 1) !important ; 
	border-bottom-style: solid !important;
	border-bottom-width: 1px !important; 
 	border-bottom-left-radius:9px ;
}

.verticalAlignTop{
	vertical-align:top;
}

.columnClassInput{
	border-style:none !important;
	padding: 2px 2px !important; 
}

.columnClassDisplay {
	border-style:none;
}

.column80Pc{
	width:80%;
}

.column75Pc{
	width:75%;
}

.column70Pc{
	width:70%;
}

.column60Pc{
	width:60%;
}


.width30Pc{
	width: 30%;
}

.width35Pc{
	width: 35%;
}

.width40Pc{
	width: 40%;
}

.width60Pc{
	width: 60%;
}

.column55Pc{
	width:55%;
}

.column40Pc{
	width:40%;
}


.column35Pc{
	width:35%;
}

.column30Pc{
	width:30%;
}

.column25Pc{
	width:25%;
}

.column20Pc{
	width:20% ;
}

.column15Pc{
	width:15%;
}
.column10Pc{
	width:10%;
}
.column5Pc{
	width:5%;
}

.alignTop {
	vertical-align:top;
}

.noBorder{
	border-style: none !important;
}

.innerPanelGrid {
	border-style: none;
}

.outerPanelGrid {
	/*border: 1px solid #ccc; */
}

.noBorderPanel {
	border-style: none !important;
}

.borderPanel {
	border: 1px solid #ccc;
}

/*For PrimeFaces Skin --  PrimeFaces' panelGrid dores not support rowClasses*/
.noBorderPanel tr{
	 /*border-style: none !important; */ 
}

.ui-datatable-data td .ui-widget-content {
	border-style: none ;  
	/*To remove Table/Grid's border if it's defined in a cell (td) */
}

.noBorderPanel tr td{
	padding:1px !important;
}

.footerClass {
	width: 1024px;
	height: 20px;
	/*background: red ;*/ /*#f4f4f4;*/
	border-top: 3px solid #57626a;
	margin-top: 5px;
	text-align: center;
	color: #333;
	font-size: 11px;
	padding: 0px;
}

#footer {
	clear: both;
	background-color: #CCC;
	height: 20px;
	text-align: center;
	padding-top: 0px;
	padding-left: 1px;
	padding-right: 1px;
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #666;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #999;
	font-size: 11px;
} 

#ver {
	float: right;
}

#log {
	float: left;
}

.footerCol {
 	border-right-width: thin;
	border-right-style: solid;
	border-right-color: #ACBECE;
	padding-left:5px;
	padding-right:5px;
}

.input-disabled {
	background-color:#ccc!important;
	opacity:1 ;
	
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important; // ie8 first!
	filter: alpha(opacity=100) !important;	//ie7
}


/* !!! This section overwrire supplied Theme !!! */

.ui-selectonemenu.ui-state-disabled {
     opacity: .55!important;
} 


/*
.ui-inputfield.ui-state-disabled {
   	box-shadow:none!important;
  	color: #555!important; 
  	background: none repeat scroll 0% 0% transparent;
    opacity: 1!important;
	border-width:0!important;
	
	// ie8 and lower not support 'opacity' 
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important; // ie8 first!
	filter: alpha(opacity=100) !important;	//ie7
}
*/
	      		
.ui-state-focus{
	border:2px solid #74b2e2!important;
}

.ui-widget-header {
    border: 1px solid #ACBECE;
   /* background: #ACBECE;*/
   background: #C2C9CB;
    color: #000;
    font-weight: bold;
}


.ui-widget-content{
	background:#f2f5f7;
}

.ui-button{
	font-weight: bold !important;
}

.ui-panelgrid {
	/*for Primefacfes fixing  border-bottom-left-radius not rounded 
	  if using p:panelGrid  */
	/*border-collapse: separate !impotant;*/  
}

.ui-panel-content {
	/*padding:10px !important;*/
}

a:visited {
	/* do not delete this - w/o it not working propery why?? */
}

a {
	color: #363571;
}

a:visited {
	color: #713535;
}

a:hover {
	color: #055CA7;
}

.ui-growl {
   position: absolute;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%);
}

.ui-datalist-data{
	margin-top:0px;
	margin-bottom:0px;
}

.ui-panel .ui-panel-content {
    border: 0px none;
    background: none repeat scroll 0% 0% transparent;
    padding: 0.1em .2em ;
    /* padding: 0.5em 1em ; */
}

.ui-datatable-footer{
	/* todo ? */
}

.ui-menubar{
    background-color: #ccc;
}

/* End overwrite supplied Theme*/

@media ( max-width : 920px) {
	.hfs-logo {
		display: none;
	}
}

select:disabled {
    opacity: .50 !important;
}