/**********************************************/
/* 	Author:			UI Standards Committee	  */
/* 	Date Created:	11/25/2010				  */
/*  Modified:		09/08/2015				  */
/*  APPLICATIONS SHOULD NOT MODIFY!!!		  */
/**********************************************/

/**********************************************/
/*					GLOBAL					  */
/**********************************************/

*, form, body, html
{
	margin:0;
	padding:0;
}

html, body
{
/* 	overflow-x: hidden; */
	height: 100%; 
}

body 
{
	font-size: 14px;
	font-family: "lato", arial, sans-serif;	
	color: #333333;
	background-color: #f3f4f4;
}

.clear
{
	clear: both;
}

/* unvisited link */
a:link {
    color: #2f6BBd;
    text-decoration: none;
}

/* visited link */
a:visited {
    color: #2f6BBd;
    text-decoration: none;
}

/* mouse over link */
a:hover {
    color: #0D477D;
    text-decoration: underline;
}

/* selected link */
a:active {
    color: #0D477D;
    text-decoration: underline;
}

h1, h2, h3 
{
	margin-top: 0;
	color: #464646;
}

h1 
{
	font-size: 17px;
	font-weight: normal;
}

h2 
{
	font-size: 16px;
}

h3 
{
	font-size: 15px;
/* 	margin-top: 2em; */
}

/**********************************************/
/*					HEADER					  */
/**********************************************/
#header
{
	width: 100%;
	background-color: #00467F;
}

#appNameContainer
{
	height: 58px;
	background-color: #00467F;
	border-collapse: collapse;
}

#appNameContainer td
{
	border: none;
	height: 100%;
}

#csxLogotd
{
	width: 105px;
}

#csxLogoimg
{
	margin: 7px 10px 0 10px;
}

#appAbbreviation
{
	font-family: "lato", arial;
	color:#FAE35C;
	font-size: 19px;
	font-weight: normal;
	white-space: nowrap;
}

#appHyphen 
{
	color: #fff;
	font-size: 19px;
	white-space: nowrap;
	padding: 0 3px;
}


#appFullName
{
	font-family: "lato", arial;
	color: #fff; 
	font-size: 19px; 
	font-weight: normal; 
	white-space: nowrap;
}


#userInfotd
{
	width: 100%;
}

#userInfo
{
	font-family: "lato", arial;
	font-size: 16px;
	color: #ffffff;
	font-weight: normal;
	clear: both;
	float: right;
	margin-right: 15px;
}

#headerBottom
{
	border-top: 1px solid #d19405;
	width: 100%;
}

/*RESPONSIVE MENU */
#mobileMenuPanel .ui-panelmenu-header.ui-state-active {
	z-index: 1000;
	-webkit-box-shadow:0 2px 4px -1px #000;
	-moz-box-shadow:0 2px 4px -1px #000;
	box-shadow:0 2px 4px -1px #000;
}

#rwdMainMenu > .ui-panelmenu-panel > .ui-panelmenu-content > .ui-menu-list li {
	border-bottom: 1px solid #1c56a4;
}

.respMenuOpen {
	background-color: #2f6bbd !important;
}

.respMenuOpen .ui-icon {
	-webkit-animation: rotateC 0.2s linear forwards;
    -moz-animation: rotateC 0.2s linear forwards;
    animation: rotateC 0.2s linear forwards;
    margin-left: auto;
    margin-right: auto;
}

.respMenuClosed {
	background-color: transparent !important;
}

.respMenuClosed .ui-icon {
	-webkit-animation: rotateCC 0.2s linear backwards;
    -moz-animation: rotateCC 0.2s linear backwards;
    animation: rotateCC 0.2s linear backwards;
}

#mobileMenuButton {
	color: #fff;
	background: transparent;
	font-size: 30px;
	height: 100%;
	margin-right: 0;
}

#mobileMenuButton.ui-state-focus,
#mobileMenuButton.respMenuOpen
{
	background-color:#2f6bbd;
}

#mobileMenuButton.respMenuClosed + .mobileMenuPanel {
	display: none;
}

#mobileMenuButton .ui-icon {
	margin-top: -16px;
	width: auto;
	height: auto;
}

#mobileMenuButton:hover .ui-icon {
	background-image: none;
}

#mobileMenuButton .ui-button-text {
	display: none;
}

#mobileMenuButton:focus {
	outline: 0;
	background-color: #2f6bbd;
}

/* RWD MENU PANEL*/

#mobileMenuPanel {
	display: inline-block;
	box-shadow:0 4px 4px rgba(0,0,0,0.5);
	-webkit-box-shadow:0 4px 4px rgba(0,0,0,0.5);
	-moz-box-shadow:0 4px 4px rgba(0,0,0,0.5);
	margin: 0;
	padding: 0;
	left: 0 !important;
	width: 100%;
	visibility: hidden;
	position: absolute;
	overflow: visible;
}

#mobileMenuPanel, #mobileMenuPanel .ui-menu {
	background-color: #2f6bbd;
}

#mobileMenuPanel .ui-panelmenu-header {
	clear: both;
	width: 100%;
	border-bottom: 1px solid #1c56a4;
	font-size: 25px;
}

#mobileMenuButton .ui-icon.fa {
	text-indent:0px;
	background-image:none;
}

#mobileMenuPanel .ui-panelmenu-header .ui-icon,
#mobileMenuPanel .ui-panelmenu-icon {
	background-image: url(../skin/images/UI_icons_0000_white.png);
	left: auto;
	right: 6%;
}

#mobileMenuPanel .ui-panelmenu-header .ui-icon.ui-icon-triangle-1-e,
#mobileMenuPanel .ui-panelmenu-icon.ui-icon-triangle-1-e {
	background-position: -32px 0;
}

#mobileMenuPanel .ui-panelmenu-header .ui-icon.ui-icon-triangle-1-s,
#mobileMenuPanel .ui-panelmenu-icon.ui-icon-triangle-1-s {
	background-position: -64px 0;
}

#mobileMenuPanel .ui-panelmenu-header a {
	color: #fff;
	outline: 0;
	padding: .5em .5em .5em 1.4em;
}

#mobileMenuPanel .ui-panelmenu-header .ui-state-active,
#mobileMenuPanel .ui-panelmenu-header .ui-state-default {
	outline: none;
}

#mobileMenuPanel .ui-panelmenu-content {
	background-color: #00467f;
	padding: 0;
}

#mobileMenuPanel .ui-panelmenu-content .ui-menuitem-link {
	margin: 10px 0;
	border-bottom: 1px solid #28599a;
}

#mobileMenuPanel .ui-panelmenu-content .ui-menuitem-text {
	font-size: 20px;
}

#mobileMenuPanel .ui-panelmenu-header .ui-state-hover,
#mobileMenuPanel .ui-panelmenu .ui-submenu-link .ui-state-hover,
#mobileMenuPanel .ui-panelmenu .ui-menu-list .ui-state-hover {
	background: transparent;
}

/**********************************************/
/*					CONTENT					  */
/**********************************************/
#menuForm {
	background-color: #ffffff;
	border-bottom: 1px solid #e8e8e8;
	color: #222222;
	box-shadow:0 1px 4px rgba(0,0,0,0.3);
	-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.3);
	-moz-box-shadow:0 1px 4px rgba(0,0,0,0.3);
}

#menuBottom
{
	height: 1px;
}

#pageName
{
	font-weight: bold;
	margin: -16px 8px;
	padding:0 14px 20px;	
	font-size: 18px;	
}

#content
{
	padding:0 20px 10px 20px;	
	padding-bottom: 24px;  /* must be same height as the footer */	
}

/* RESPONSIVE TABS */
.ui-responsive-tabs {
	display: none;
	height: 44px;
}

#tabViewRespLabel {
/* 	position: absolute; */
	height: auto;
	font-size: 16px;
	margin-left: 11px;
}

.ui-responsive-tabs .ui-selectonemenu-trigger {
	position: absolute;
	top: 19%;
	height: auto;
	margin-right: 11px;
}

.ui-responsive-tabs .ui-selectonemenu-trigger .ui-icon.ui-icon-triangle-1-e {
	background-position: -32px 0;
}

.ui-responsive-tabs .ui-selectonemenu-trigger .ui-icon.ui-icon-triangle-1-s {
	background-position: -64px 0;
}

#accordionView .ui-accordion-header {
	border: 1px solid #C0C2C7;
	padding: 5px 0 5px 22px;
	margin-top: -1px;
	margin-bottom: -1px;
	color: #333333;
	background-color: #f3f4f4;
	font-weight: normal;
}

#accordionView .ui-accordion-content {
	border-left: 1px solid #C0C2C7;
	border-right: 1px solid #C0C2C7;
	border-bottom: 1px solid #C0C2C7;
	margin: 0;
	font-size: 14px;
}

#accordionView .ui-state-default.ui-accordion-header {
   color: #333;
}

#accordionView .ui-state-active.ui-accordion-header {
   color: #fff;
   font-weight: bold;
   background-color: #2f6bbd;
}

#accordionView .ui-accordion-header:hover {
   color: #fff;
   background-color: #2f6bbd;
}

#accordionView .ui-state-active.ui-accordion-header .ui-icon {
   background-position: -64px 0;
}

#accordionView .ui-state-focus.ui-accordion-header .ui-icon {
   background-position: -64px 0;
   background-image: url(../skin/images/UI_icons_0000_white.png);
}

.tableContainer.ui-panel .ui-panel-content .tableActions
{
	background: #eef0f2; 
	padding-top:0; 
	padding-bottom:0;
	margin-bottom: 3px;
}

#tabView, #tabForm {
	background-color: #f3f4f4;
}

#tabView .ui-tabs-panel {
	background-color: #ffffff;
	overflow: visible;
}

@media print {
	div.tableExporter {display:none;}
}

.imageLink {
	cursor: pointer;
}

form .required, form .errorMessage
{
	color:red;
	font-weight: bold;	
}

form .confirmMessage
{	
	font-size: 13px;
	color:green;
	background-color:yellow;
	font-weight: bold;	
}

/*CSX Custom Loading Dialog*/
.statusDlg.ui-dialog .ui-dialog-titlebar
{
	display: none;
}

.statusDlg.ui-dialog
{
	background-color: transparent;
}

.statusDlg.ui-dialog.ui-shadow
{
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.statusDlg-loading
{
	position: absolute;
	margin: 63px 0 0 36px;
	font-size: 24px;
	color: #e8e8e8;
}

/* Custom Autocomplete Dropdown */
.ui-autodropdown .ui-inputfield,
.ui-autodropdown .ui-inputfield.ui-state-focus {
	border-right: none !important;
}

.ui-autocomplete .ui-state-hover + .ui-autocomplete-dropdown,
.ui-autocomplete .ui-state-focus + .ui-autocomplete-dropdown {
	border: 1px solid #73B8EE;
	border-left: none;
}

/* Custom Calendar */
.ui-csxcalendar .ui-inputfield,
.ui-csxcalendar .ui-inputfield.ui-state-focus {
	margin: 0;
	border-right: none !important;
}

.ui-csxcalendar .ui-datepicker-trigger {
	border-left: none;
}

.ui-csxcalendar .ui-state-hover + .ui-datepicker-trigger {
	border: 1px solid #73B8EE;
	border-left: none;
}

/**********************************************/
/*					FOOTER					  */
/**********************************************/

/* Used for bottom placement of footer. */
#wrapper
{
	min-height: 100%;
}

#footer
{
	width: 100%;
	bottom: 0;
	margin-top: -19px; /* negative value of footer height */
	clear:both;
	height: 15px;
	padding: 2px 0;
	text-align: center;
	font-size: 11px;
}

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}


/**********************************************/
/*				MEDIA QUERIES				  */
/**********************************************/


/* @media screen and (min-width : 769px){ */
@media screen and (min-width : 641px){
    #mobileMenuButton, #mobileMenuPanel, #rwdMainMenu {
        display: none !important;
    }
}

@media screen and (max-width : 960px){
	.ui-dialog{
		width: 100% !important;
	}
}

@media screen and (max-width : 640px){
	
	.ui-tabs {
		background: none;
	}
	
    #menuForm, #pageName, #appFullName, #appHyphen, #mainMenu, .ui-tabs-nav, .ui-responsive-tabs-hide {
        display: none;
    }
    
    .ui-menubar {
    	padding: 0;
    	margin: 0;
    }

	.ui-menubar > .ui-menu-list > .ui-menuitem {
		clear: both;
		border-bottom: 1px solid #1c56a4;
		width: 100%;
		padding: 20px 0;
	}
	
	.ui-menubar > .ui-menu-list > .ui-menuitem > .ui-menuitem-link {
		width: 100%;
	}
	
	.ui-menubar > .ui-menu-list > .ui-menuitem > .ui-menuitem-link.ui-state-hover {
		background-color: #2f6bbd;
	}
	
	.ui-menubar .ui-menu-child  .ui-menuitem-link.ui-state-hover {
		background-color: #1c56a4;
	}
	
	.ui-menubar .ui-menu-child .ui-menuitem-link {
		margin: 18px 10px;
	}
	
	.ui-menubar > .ui-menu-list > .ui-menuitem > .ui-menuitem-link .ui-icon,
	.ui-menu .ui-menu-parent .ui-menu-child .ui-icon {
		background-image: url('../skin/images/UI_icons_0000_white.png') !important;
	}
	
	.ui-menubar > .ui-menu-list > .ui-menuitem > .ui-submenu-link {
		float: none;
	}
	
	.ui-menu-list .ui-menuitem {
		margin-right:0 !important;
	}
	
	.ui-menu .ui-menu-parent .ui-icon {
		margin-right: 24px;
	}
	
	.ui-menu .ui-menu-parent .ui-menuitemlink .ui-submenu-link .ui-state-hover > ul {
		display: none;
	}
	
	.ui-menu .ui-menu-parent .ui-menu-child,
	.ui-menubar .ui-menu-child .ui-menuitem,
	.ui-menubar .ui-menuitem-link {
		margin: 0;
		padding: 0;
	}
	
	.ui-menu .ui-menu-parent .ui-menu-child {
		background-color: #2f6bbd;
  		width: 100%;
  		border: none;
  		position: relative;
  		top: 21px !important;
  		left: -2px !important;
  		box-shadow: none;
  		-webkit-box-shadow: none;
  		-ms-box-shadow: none;
  		border-top: 1px solid #1c56a4;
  		background-color: #1c56a4;
	}
	
	.ui-menu .ui-menu-parent .ui-menuitem-active .ui-menu-child {
		display: inline;
	}
	
	.ui-menu .ui-menu-parent .ui-menuitem-active .ui-menu-child .ui-menuitem {
		border-top: 1px solid #2f6bbd;
	}
	
	.ui-menu .ui-menu-parent .ui-menuitem-active .ui-menu-child .ui-menuitem .ui-menuitem-text {
		margin-left: 10px;
	}
	
	.ui-menubar .ui-shadow {
		padding:0 !important;
	}
	
	.ui-menuitem .ui-menu-child .ui-menuitem-text,
	.ui-menu .ui-menuitem-text {
		font-size: 18px;
		float: none;
	}
	
	.ui-menubar .ui-menu-child .ui-menuitem {
		border-bottom: 1px solid #2f6bbd;
	}
	
	.ui-overlaypanel .ui-menuitem-text {
		font-size: 25px;
	}
    
    .ui-overlaypanel-content {
    	padding: 0;
    }
    
    .ui-tabs-left .ui-tabs-nav {
    	max-width: 99%;
    	width: 99%;
    }
    
    .ui-tabs.ui-tabs-left > .ui-tabs-nav li {
    	margin: 0;
    	width: 100%;
    	border-top: 1px solid #c0c2c7;
    }
    
    .ui-tabs-nav, .ui-tabs-left .ui-tabs-nav {
    	border: 1px solid #c0c2c7;
    }
    
    .ui-tabs .ui-tabs-nav li,
    .ui-tabs-left .ui-tabs-nav li {
		height: 44px;
    }
    
    .ui-tabs .ui-tabs-nav li a,
    .ui-tabs-left .ui-tabs-nav li a {
		padding: .8em 1em;
    }
    
    .ui-tabs-nav > li, 
    .ui-tabs-left .ui-tabs-nav > li, .ui-tabs-left > .ui-tabs-panels {
    	width: 100%;
    }
    
    .ui-tabs.ui-tabs-top > .ui-tabs-nav li {
		border-bottom: 1px solid #c0c2c7 !important;
    }
    
    .ui-tabs-nav > li:hover > a {
    	color: #fff;
    }
    
    .ui-tabs-nav .ui-tabs-selected > a,
    .ui-tabs-nav .ui-tabs-selected:hover > a {
    	color: #333;
    	font-weight: normal;
    }
    
    .ui-tabs-nav .ui-tabs-selected,
    .ui-tabs-nav .ui-tabs-selected .ui-state-hover {
    	background: #CAEBFB;
    }
    
    .ui-responsive-tabs {
    	display: block;
    }
    
    .ui-tabs-panel {
    	margin-top: 14px;
    }
    
    #appAbbreviationValue
    {
    	margin-left: 8px;
    }
}

@media ( max-width: 320px ) {	
	#csxLogotd{
		display: none;
	}
	
	.ui-overlaypanel .ui-menuitem-text {
		font-size: 20px;
	}
}

/* Media query to remove user info on small screens to save real estate */
@media ( max-width: 960px ) {
	#userInfo {
		/* display: none; */
	}
}

/**********************************************/
/*				ANIMATION					  */
/**********************************************/

@-moz-keyframes rotateC { 100% { -moz-transform: rotate(90deg); -moz-transform-origin: 30% 30%; } }
@-webkit-keyframes rotateC { 100% { -webkit-transform: rotate(90deg); -webkit-transform-origin: 30% 30%; } }
@keyframes rotateC { 100% { transform:rotate(90deg); transform-origin: 30% 30%; } }

@-moz-keyframes rotateCC { 100% { -moz-transform: rotate(0deg); -moz-transform-origin: 30% 30%; } }
@-webkit-keyframes rotateCC { 100% { -webkit-transform: rotate(0deg); -webkit-transform-origin: 30% 30%; } }
@keyframes rotateCC { 100% { transform:rotate(0deg); transform-origin: 30% 30%; } }