/*
	Document   : pageSpecifics
	Created on : Feb 12, 2013, 2:10:04 PM
	Author	   : longl488
	Description:
		Override page specific css for harmony.
*/

/** This CSS is used to only override the common existing styles from css/pageSpecifics.css ..
    If a style is common between products, it should not be here. The common style should go to css/pagespecific.css
/*********** Reporting ***********/
/*** Page Type = Page With Stage ********************/
.stageR .pageTitle {
	background-color: #F3F5F8;
	border-bottom: 1px solid #E6E8EA;
	height: 66px;
	position: fixed;
	width: 100%;
	z-index: 100;
}

.stageR .pageTitle > div {
	display: inline;
	line-height: 66px;
	margin-left: 15px;
	font-weight: bold;
	font-size: 22px;
	color: #3F3F3F;
}

.stageR .content {
	margin: 0 30px 0 30px;
	position: relative;
	top: 67px;
}

/***** Override existing classes ****************/
.reportFilter {
	background-color: #fff;
	border-width: 0;
	height:auto;
	padding: 0;
}

.shared {
	position: absolute;
	right: 30px;
	top: 20px;
}

body.harmony .reportFilter .iceOutLbl,
.reportFilter .fieldLabel {
	margin: 4px 0;
	display: block;
}

body.harmony .reportFilter .fieldValue {
	margin-left: 8px;
	padding-left: 0px;
}

body.harmony .reportTitle {
	display: none;
}

body.harmony .viewTable .listTable {
	padding-left: 0;
}

/*----------------------------------------------------------------------------
 *  Reports - Retirement Plans Report
 *----------------------------------------------------------------------------*/
.totalCostReport .stdReportSubtotal:first-of-type {
	padding: 0px 10px;
}

.totalCostReport .stdReportTotal:first-of-type {
	padding: 0px 10px;
}


/*----------------------------------------------------------------------------
 *  Reports - Retirement Plans Report
 *----------------------------------------------------------------------------*/
/* title row */
body.harmony div.viewTable.retirementPlansReport td.stdReportTitle:first-child {
	-webkit-border-radius: 2px 0 0 0;
	-moz-border-radius: 2px 0 0 0;
	-ms-border-radius: 2px 0 0 0;
	-o-border-radius: 2px 0 0 0;
	border-radius: 2px 0 0 0;
	border-left: none;
}

body.harmony div.viewTable.retirementPlansReport td.stdReportTitle:last-child {
	-webkit-border-radius: 0 2px 0 0;
	-moz-border-radius: 0 2px 0 0;
	-ms-border-radius: 0 2px 0 0;
	-o-border-radius: 0 2px 0 0;
	border-radius: 0 2px 0 0;
}

body.harmony div.viewTable.retirementPlansReport td.stdReportTitle {
	height: 32px;
	padding: 0 10px;
	border-left: none;
	border-bottom: none;

	-webkit-box-shadow: 0 2px 0 #cedbea;
	-moz-box-shadow: 0 2px 0 #cedbea;
	box-shadow: 0 2px 0 #cedbea;

	-webkit-background-clip: padding;
	-moz-background-clip: padding;
	background-clip: padding-box;

	text-transform: uppercase;
	font-family: Arial;
	font-weight: bold;
	color: #6d8ba7;
	background-color: #e3e9f3;
}

/* header */
body.harmony div.viewTable.retirementPlansReport td.stdReportHdr {
	height: 32px;
	padding: 0 10px;
	border-left: 1px solid #c0d0e4;
	border-top: 1px solid #c0d0e4;

	-webkit-box-shadow: 0 2px 0 #cedbea;
	-moz-box-shadow: 0 2px 0 #cedbea;
	box-shadow: 0 2px 0 #cedbea;

	-webkit-background-clip: padding;
	-moz-background-clip: padding;
	background-clip: padding-box;

	text-transform: uppercase;
	font-family: Arial;
	font-weight: bold;
	color: #6d8ba7;
	background-color: #e3e9f3;

}

body.harmony div.viewTable.retirementPlansReport td.stdReportHdr:first-child {
	border-left: none;
}

/* no data row */
body.harmony div.viewTable.retirementPlansReport td.stdReportNoData {
	border-top: none;
	border-left: none;
}

/* spacer */
body.harmony div.viewTable.retirementPlansReport td.stdReportSpacer {
	border: none;
	padding-top: 40px;
}

/* name column */
body.harmony div.viewTable.retirementPlansReport td.desc {
	border-left: none;
}

/* total column */
body.harmony div.viewTable.retirementPlansReport td.total {
	text-align: right;
}

body.harmony div.viewTable.retirementPlansReport td.stdReportCol.total,
body.harmony div.viewTable.retirementPlansReport td.stdReportFtr.total {
	font-size: 13px;
	font-weight: bold;
}

/** Payroll Cost Donut Chart **/
body.harmony .payrollCost {
	margin-left: 35px;
}

body.harmony .payrollCost.preview {
    margin-top: 5px;
}

body.harmony .stage #payDates {
    display: inline-block;
    margin-top: 10px;
}

body.harmony .payrollCost .ytdContainer {
	margin-top:35px;
	margin-left: 0px;
	text-align: right;
}

body.harmony .payrollCost.preview .ytdContainer {
	margin-top:0;
}

body.harmony .stageHeader .headerTitle, body.harmony .stageHeaderSummary .headerTitle .payrollCostHeaderTitle {
	font-weight: bold;
	font-size: 22px;
	color: #404040;
}


body.harmony .payrollCost .primaryInfo {
	font-family: "DINNextLTPro-Regular", "Arial", sans-serif;
	font-size: 34px;
	/*margin-top: 30px;*/
	margin-bottom: 10px;
	padding-right: 5px;
	color: #404040;
	text-align: left;
}

body.harmony .payrollCost .secondaryInfo {
	font-size: 2.0rem;
	margin-top: 15px;
}

body.harmony .payrollCost .ytdTotalLabel {
	color: #6d8ba7;
	font-size: 14px;
	padding: 1% 5px 1% 0;
}

body.harmony .payrollCost .ytdTotalLabelNoData {
	font-size: 1em;
	color: gray;
}

body.harmony #confirmationDiv .subscript,
body.harmony #confirmationDiv .subscript,
body.harmony .payrollCost .subscript {
	font-size: 1.2rem;
}

body.harmony .payrollCost .primaryText {
	margin-top: 5px;
	font-size: 1.5rem;
}

body.harmony .payrollCost .netPayInfo {
	display: table-cell;
	vertical-align: middle;
	padding-bottom: 25px;
}

body.harmony .payrollCost .netPayInfo .primaryInfo {
	margin: 0;
	margin-bottom: 4px;
}

body.harmony .payrollCost .canvas {
	width: 500px;
	margin-left: 75px;
    margin-top: -20px;
}

/***** payday ****/
body.harmony #paydayHeaderTitle {
	padding: 1% 0;
	font-size: 22px;
	font-weight: bold;
}

/***** payday ****/
body.harmony #emailPrefTitle {
	padding: 1% 0;
	font-size: 22px;
	font-weight: bold;
}

body.harmony #payDates span {
	font-weight: bold;
	padding-left: 30px;
}

body.harmony #currQtrPayrollsEmployeeListContent .listTable {
    table-layout: auto;
}

body.harmony #enterCompDiv .displayColsPanelGearRow {
	text-align:right;
	padding-right: 20px;
/*	margin-top: 10px;*/
}

body.harmony #enterCompDiv .displayColsPanelGearIcon {
	background-position: 0px -1368px;
	background-size: 72px;
	display: inline-block;
	width: 18px;
	height: 18px;
	position: relative;
	left: 15px;
	bottom: 5px;
}

body.harmony #enterCompDiv .displayColsPanelPopover:before {
	display: none;
}

body.harmony #enterCompDiv .listTable .eeIsPaidColHdr,
body.harmony #enterCompDiv .listTable td.eeIsPaidCol {
	text-align: center
}

/* footer row */
body.harmony #enterCompDiv .listTable td.listTableHdr,
body.harmony #enterCompDiv .listTable .listTableFtr {
	text-align: right;
	padding-right: 10px;
}

body.harmony #enterCompDiv .listTable td.listTableHdr,
body.harmony #enterCompDiv .listTable .listTableFtr,
body.harmony #previewCompDiv .listTable .listTableFtr {
	border-bottom: 1px solid #cccccc;
}

body.harmony #enterCompDiv .listTable td,
body.harmony #previewCompDiv .listTable td,
body.harmony #eeDataTableDiv .listTable td,
body.harmony #ddDataTableDiv .listTable td {
	font-size: 14px;
}

/* cut off header text which is too long for the column width */
/* @HarmonyReview - this should probably be defined in commonComponents or productWide
   as the default style for all harmony datatables. */
body.harmony #enterCompDiv .listTable .listTableCol,
body.harmony #enterCompDiv .listTable th.eeTotalPayColHdr,
body.harmony #enterCompDiv .listTable th div.eeTotalPayColHdr,
body.harmony #enterCompDiv .listTable td div.eeTotalPayColHdr,
body.harmony #enterCompDiv .listTable .listTableHdr,
body.harmony #previewCompDiv .listTable .listTableCol,
body.harmony #previewCompDiv .listTable .listTableHdr,
body.harmony #confirmationDiv .listTable .listTableCol {
	overflow: hidden;
	-o-text-overflow: ellipsis; /* Opera */
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*	This selector is bad because it is not specific enough and
	causes any UI using div tags in the payday table to be totally
	messed up, requiring counter selectors to correct the div style. */
body.harmony #enterCompDiv .listTable .listTableCol div {
	overflow: hidden;
	-o-text-overflow: ellipsis; /* Opera */
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.harmony #enterCompDiv .listTable .memoColumn {
	padding-left: 15px;
	padding-right: 15px;
}

body.harmony #enterCompDiv .listTable .memoHeader {
	text-align: left !important;
	display: block;
}

body.harmony #enterCompDiv .listTable .listTableCol input[type=text] {
	width: 100%;
	max-width: 70px;
	box-sizing: border-box;
	height: 30px;
	margin-right: 10px;
}

body.harmony #enterCompDiv .listTable input.memo[type=text] {
	max-width: none;
	width: 100% !important;
	box-sizing: border-box;
	height: 30px;
	text-align: left;
}

body.harmony #enterCompDiv .listTable th.eeCoWageItemColHdr {
	text-align: right;
    vertical-align: middle;
}

body.harmony #enterCompDiv .listTable th.eeTotalPayColHdr,
body.harmony #enterCompDiv .listTable th div.eeTotalPayColHdr {
	text-align: right;
}

/* remove the border between the checkbox and employee name columns to make it look like a single column */
body.harmony #enterCompDiv .listTable tfoot tr td:first-child {
	border-right: 1px solid transparent;
}
body.harmony #enterCompDiv .listTable tr td.eeDisplayNameCol,
body.harmony #enterCompDiv .listTable tr th.eeDisplayNameColHdr {
	border-left-style: none;
}

body.harmony #enterCompDiv .listTable td.eeDisplayNameColNotEnabled {
	color: gray;
}

/* Specifies "checked" table row but no hours nor dollar amounts entered in row edit controls */
body.harmony #enterCompDiv .listTable .eeDataTableSelectedRowEmptyData {
	background-color: transparent;
	border-color: transparent;
}

/* bold the total pay column cells and the footer row */
/* @HarmonyReview - should this be a common style for Harmony or is it payday specific? */
body.harmony #enterCompDiv .viewTable .eeTotalPayCol,
body.harmony #previewCompDiv .viewTable .eeTotalPayCol,
body.harmony #enterCompDiv .listTable td div.eeTotalPayColHdr,
body.harmony #enterCompDiv .viewTable table tr td.listTableHdr:last-child,
body.harmony #previewCompDiv .viewTable table tr td.listTableFtr {
	font-weight: bold;
}

body.harmony #enterCompDiv .listTable [id$=singleSelectCheckBoxspan],
body.harmony #enterCompDiv .listTable [id$=selectAllCheckBoxspan] {
	display: inline-block;
}

body.harmony #enterCompDiv .listTable .fixSingleSelectCheckBoxOutline,
body.harmony #enterCompDiv .listTable .fixSingleSelectCheckBoxOutline-dis,
body.harmony #enterCompDiv .listTable .fixSelectAllCheckBoxOutline,
body.harmony #enterCompDiv .listTable .fixSelectAllCheckBoxOutline-dis {
	margin: 0px;
}

body.harmony #enterCompDiv .listTable .fixSingleSelectCheckBoxOutline + .singleSubmitDiv,
body.harmony #enterCompDiv .listTable .fixSingleSelectCheckBoxOutline-dis + .singleSubmitDiv,
body.harmony #enterCompDiv .listTable .fixSelectAllCheckBoxOutline + .singleSubmitDiv,
body.harmony #enterCompDiv .listTable .fixSelectAllCheckBoxOutline-dis + .singleSubmitDiv {
	height: 0px;
}

body.harmony #enterCompDiv .listTable .eePayMethodLink {
	display: inline-block;
	padding: 2px;
	margin-left: 3px;
}

body.harmony #enterCompDiv .listTable .eeInactivePayMethodIcon {
	margin-right: 1px;
}

body.harmony #employeeListContent .listTable .payMethodIcon {
	float:right;
	margin-top:6px;
}

body.harmony .inactivePayMethodIcon {
	opacity:0.3;
}

body.harmony .tableRowIcons {
	vertical-align: middle;
	padding: 0;
	padding-right: 5px;
	height: auto;
	width: auto;
}

body.harmony #paydayBankAccountAssist .assistant-small {
	margin-top: -45px;
}
/***** Paypay Preview ****/
body.harmony #previewCompDiv .viewTable .listTable th.listTableHdr.eeDisplayNameColHdr,
body.harmony #previewCompDiv .viewTable .listTable td.eeDisplayNameCol {
	text-align: left;
	white-space: normal;
}

body.harmony #previewCompDiv .viewTable .listTable td,
body.harmony #previewCompDiv .viewTable .listTable th.listTableHdr,
body.harmony #previewCompDiv .viewTable .listTable td.listTableHdr,
body.harmony #previewCompDiv .viewTable .listTable .listTableFtr {
	text-align: right;
	padding-right: 15px;
}

/***** payday confirmation ****/
body.harmony #confirmationDiv #ddChecks1.ddChecksColRow1 #ddCheckCount1,
body.harmony #confirmationDiv #printedChecks1.printedChecksColRow1 #printedCheckCount1,
body.harmony #confirmationDiv #ddChecks1.ddChecksColRow1 #ddCheckCount2,
body.harmony #confirmationDiv #printedChecks1.printedChecksColRow1 #printedCheckCount2 {
	font-size: 18px;
}

body.harmony #confirmationDiv #ddChecks1.ddChecksColRow1,
body.harmony #confirmationDiv #printedChecks1.printedChecksColRow1 {
	padding-bottom: 3px;
}

body.harmony #confirmationDiv #ddChecks2.ddChecksColRow2 #ddDetails,
body.harmony #confirmationDiv #printedChecks2.printedChecksColRow2 #printedChecksNote {
	color: #6d8ba7;
}

body.harmony #confirmationDiv #printedChecks2.printedChecksColRow2 {
	width: auto;
	max-width: none;
}

body.harmony #confirmationDiv .ddDetailsMarginL {
	margin-left: 650px;
}

body.harmony #confirmationDiv .ddDetailsMarginT {
	margin-top: -38px;
}

body.harmony #confirmationDiv .ddDetailsPaddingT {
	padding-top: 20px;
}

body.harmony #confirmationDiv .ddTableMarginL {
	margin-left:48px;
	float:left;
}

body.harmony #confirmationDiv .paycheckMarginPos {
	margin-top: 38px;
}

body.harmony #confirmationDiv .paycheckMarginNeg {
	margin-top: -38px;
}

body.harmony #confirmationDiv .paycheckTableMarginL {
	float: left;
}

body.harmony #confirmationDiv .autofillButton {
	margin-left: 8px;
}

/***** EE Profile *****/
body.harmony .eeProfile {
	width: 40px;
	height: 40px;
	border: 2px solid #e3eaf3;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin-right: 4px;
}

/***** Employee One-Pager - Sample Paycheck *****/
body.harmony .sampleCheck #noTabsYesInputControl {
	padding-top: 64px;														/* Results in the same horizontal alignment between "First name", "Last name" text labels and "Sample check..." text */
}

body.harmony .sampleCheck #noTabsNoInputControl {
	padding-top: 69px;														/* Results in the same horizontal alignment between "First name", "Last name" text labels and "Sample check..." text */
}

body.harmony .sampleCheck #yesTabsYesInputControl {
	padding-top: 70px;														/* Results in the same horizontal alignment between "First name", "Last name" text labels and "Sample check..." text */
}

body.harmony .sampleCheck #yesTabsNoInputControl {
	padding-top: 75px;														/* Results in the same horizontal alignment between "First name", "Last name" text labels and "Sample check..." text */
}

body.harmony .sampleCheck .yesInputControlTopMargin {
	margin-top: 38px;														/* Results in xD-spec 48px padding between "Sample check..." text and start of check stub */
}

body.harmony .sampleCheck .noInputControlTopMargin {
	margin-top: 44px;														/* Results in xD-spec 48px padding between "Sample check..." text and start of check stub */
}

body.harmony .sampleCheck #checkAndStubBorder {
	border: 1px solid #e3e3e3;												/* xD-spec */
	border-bottom: 4px solid #e3e3e3;										/* xD-spec */
	width: 507px;															/* Required to achieve 1px rule around entire Sample Paycheck area */
	position: relative;
}

body.harmony .sampleCheck #checkAndStub {
	background-color: #f2f6fb;												/* xD-spec */
	border: 6px solid #ffffff;												/* xD-spec */
	width: 495px;															/* Same as width defined in body.harmony .sampleCheck .stub */
}

body.harmony .sampleCheck .checkCorner {
	background-image: url('../../resources/images/sampleCheckCorner.png');
	background-repeat: no-repeat;
	background-position: bottom right;
	background-color: #f7f7f7;
	position: absolute;
	bottom: -4px;
	left: 449px;
	width: 59px;
	height: 54px;
}

body.harmony .sampleCheck .check {
	height: 206px;
	width: 483px;
	display: block;
	margin: 6px;															/* xD-spec */
	margin-bottom: 0px;														/* xD-spec */
}

body.harmony .sampleCheck .check .table-cell {
	vertical-align: baseline;
}

body.harmony .sampleCheck .check .companyNameAndAddr {
	font-size: 11px;														/* xD-spec */
	line-height: normal;
	padding-top: 24px;														/* Results in xD-spec 22px top padding */
	padding-left: 30px;														/* Results in xD-spec 25px left padding */
}

body.harmony .sampleCheck .check .companyName {
	font-weight: bold;														/* xD-spec */
}

body.harmony .sampleCheck .check .payeeNetLine {
	width: 448px;
	margin-top: 38px;														/* Results in xD-spec 50px top padding */
	margin-left: 30px;														/* Results in xD-spec 25px left padding */
}

body.harmony .sampleCheck .check .payeeNetLine .payee {
	float: left;
	font-size: 22px;														/* xD-spec */
	width: 315px;															/* Required in case payee name is too long to fit */
	overflow: hidden;														/* Required in case payee name is too long to fit */
}

body.harmony .sampleCheck .check .payeeNetLine .payTo {
	font-size: 11px;														/* xD-spec */
	font-weight: bold;														/* xD-spec */
	color: #175B8C;															/* xD-spec */
	padding-right: 14px;													/* Results in xD-spec 15px right padding */
}

body.harmony .sampleCheck .check .payeeNetLine .netPay {
	float: right;
	font-family: Garamond;													/* xD-spec */
	font-size: 30px;														/* xD-spec */
	padding-right: 34px;													/* Results in xD-spec 35px right padding */
}

body.harmony .sampleCheck .stub {
	background-color: #f2f6fb;												/* xD-spec */
	font-size: 12px;														/* xD-spec */
	width: 495px;															/* Same as width defined in body.harmony .sampleCheck .checkAndStub */
	padding-right: 125px;													/* xD-spec */
	padding-bottom: 56px;													/* Results in xD-spec 65px bottom padding */
	padding-left: 38px;														/* xD-spec */
}

body.harmony .sampleCheck .stub .sectionHeading {
	font-size: 12px;														/* xD-spec */
	color: #175B8C;															/* xD-spec */
	padding-top: 21px;														/* Results in xD-spec 35px top padding */
	padding-bottom: 7px;													/* Results in xD-spec 16px bottom padding */
}

body.harmony .sampleCheck .stub .grossPayTopPadding {
	padding-top: 17px;														/* Results in xD-spec 22px top padding */
}

body.harmony .sampleCheck .stub .stubRow {
	height: 23px;
}

body.harmony .sampleCheck .stub .stubColAmount {
	text-align: right;
}

body.harmony #netPayTable {
	font-weight: bold;
	font-size: 14px;
	margin-top: 23px;														/* Results in xD-spec 35px top padding */
}

/***** Pay schedule **********/
body.harmony .foldedCorner {
	background-image: url('../../resources/images/sampleCheckCorner.png');
	background-position: right bottom;
	background-repeat: no-repeat;
	bottom: -1px;
	height: 54px;
	position: absolute;
	right: -2px;
	width: 59px;
	background-color: #f7f7f7;
}

.psTableHarmony th {
	border-bottom: 2px transparent;
	text-align: left;
	font-size: 12px;
	color: #135a8e;
	padding-bottom: 7px;
}

.psTableHarmony td {
	border-bottom: 1px solid #cccccc;
	padding: 5px 0 5px 0;
	text-align: left;
	font-size: 12px;
	color: #505050;
}

body.harmony .psLabelSpacer {
	padding-top:13px;
}

/*
 * Payroll Corrections
 * * * * * * * * * * */
body.harmony .eeCorrectionsInfoBox.displayBlock .informationalMessageBlock {
	background-position: 15px 50%;
}
	
body.harmony .eeCorrectionsInfoBox.displayBlock .informationalMessageBlock .displayBlock.message {
	font-family: "HelveticaNeue-Bold", "HelveticaNeueBold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-size: 1.4rem;
	display: inline-block;
	padding-left: 2px;
	padding-top: 5px;
	padding-bottom: 5px;
}

body.harmony #eeCorrections .decoratedCurrenyInput {
	padding-left: .4rem;
	padding-right: .5rem;
}

body.harmony #eeCorrections .alignToRadioLabel {
	padding-bottom: 12px;
}

body.harmony #eeCorrections .smallPaymentsSection {
	padding-top: 3px;
}

body.harmony #eeCorrections .paycheckAmountBox {
	width: 50px;
	text-align: right;
}

/*
 * Pay Method
 * * * * * * */
body.harmony #payMethod .routingInput {
	width: 160px;
	margin-left: 8px;
	margin-right: 3px;
}

body.harmony #payMethod .accountInput {
	width: 177px;
	margin-right: 3px;
}

body.harmony #payMethod .splitAmountCurrencySymbolPrefix {
	vertical-align: middle;
	margin: 0 2px 5px 0px;
}

body.harmony #payMethod .splitAmountInput {
	width: 160px;
	margin-left: 0px;
}

body.harmony #payMethod .routingHint {
	display: inline-block;
	width: 0px;
	vertical-align: top;
}

body.harmony #payMethod .routingSuccess {
	display: inline-block;
}

body.harmony #payMethod .routingSuccess.hide {
	visibility: hidden;
}

body.harmony #payMethod .routingSuccess .icons {
	margin-left: 15px;
	display: inline-block;
	vertical-align: middle;
}

body.harmony #payMethod .routingSuccess .bankName {
	vertical-align: middle;
	padding-left: 8px;
}

body.harmony #payMethod .page-subTitle.subTitleFix {
	margin-top: 0px;
	margin-bottom: 15px;
}

body.harmony #payMethod .page-subTitle.bankInfoFix {
	margin-top: 30px;
	margin-bottom: 15px;
}

/*
 * Company Bank Account
 * * * * * * * * * * * */
body.harmony #companyBankAccount .routingInput {
	width: 160px;
	margin-left: 8px;
	margin-right: 3px;
}

body.harmony #companyBankAccount .input {
	width: 177px;
	margin-right: 3px;
}

body.harmony #companyBankAccount .dobInput {
	width: 80px;
}

body.harmony #companyBankAccount .routingHint {
	display: inline-block;
	width: 0px;
	vertical-align: top;
}

body.harmony #companyBankAccount .routingSuccess {
	display: inline-block;
}

body.harmony #companyBankAccount .routingSuccess.hide {
	visibility: hidden;
}

body.harmony #companyBankAccount .routingSuccess .icons {
	margin-left: 15px;
	display: inline-block;
	vertical-align: middle;
}

body.harmony #companyBankAccount .routingSuccess .bankName {
	vertical-align: middle;
	padding-left: 8px;
}

body.harmony #companyBankAccount .page-subTitle.subTitleFix {
	margin-top: 0px;
	margin-bottom: 10px;
}

body.harmony #companyBankAccount .readOnlyMessage {
	display:inline-block;
	width:473px;
	padding-left:6px;
	padding-top: 0px;
	color:#DC3C1E;
	font-weight:bold;
	vertical-align: top;
}

/*** Setup Taxes and Forms ********************/
body.harmony #setupTaxes {
    width: 875px;
	min-width: 875px /* Needed for trowser else width is less than set width */;
}
body.harmony #setupTaxes.maxWidth {
    width: auto;
	max-width: 100%;
}

body.harmony #setupTaxes .setupTaxesContent {
	margin-top: 2.5rem;
}

body.harmony #setupTaxes h1.header {
	color: #6F6F6F;
	margin-bottom: 2.5rem;
}

body.harmony #setupTaxes .contentHeader {
	display: block;
}

body.harmony #setupTaxes .contentMessage {
	display: block;
	font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	line-height: 1.5em;
	margin-bottom: 1rem;
}

body.harmony #setupTaxes .label {
	vertical-align: baseline;
	margin: 0px 0px 1.5rem 0px;
}

body.harmony #setupTaxes .subLabel {
	/* Smaller margins than label. */
	color: #505050;
	font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 25px;
	margin: 12px 4px 0 0;
	vertical-align: baseline;
}

body.harmony #setupTaxes .label.subtext {
	margin-top: .5rem;
}

body.harmony #setupTaxes .answer {
	margin-bottom: 4rem;
}

body.harmony #setupTaxes .answer.radioGroup {
	margin-bottom: 1.5rem;
}

body.harmony #setupTaxes input[type="text"] {
	font-size: 1.2rem;
	width: 438px;
}
body.harmony #setupTaxes div.ui-datatable > table tr > th.ui-widget-header.dateCol {
    width: 9rem;
}
body.harmony #setupTaxes div.ui-datatable > table tr > th.ui-widget-header.genderCol {
    width: 17.5rem;
}
body.harmony #setupTaxes table img.error-icon-spacing {
    vertical-align: text-bottom;
}

body.harmony #setupTaxes .calendar input[type="text"] {
	font-size: 100%;
	width: 7.5rem;
}

body.harmony #setupTaxes .fieldContainer {
	width: 451px;
}

body.harmony #setupTaxes input[type="text"].zipCodeInput {
	width: 190px
}

body.harmony #setupTaxes ul.bullet li {
	margin-top: 1.5rem;
}
body.harmony #setupTaxes ul.bullet.tipsBeforeStarting {
    width: 525px;
}

body.harmony .spacer150 {
	padding-bottom: 150px;
}

body.harmony #setupTaxes .filingAddressAnswer {
	margin-bottom: 1.5rem;
}

body.harmony #setupTaxes .radioYesLabel {
	width: 80px;
	white-space: nowrap;
}

/*** New employer tax prep popup. ***/
body.harmony #setupTaxes #newEmployerPopup .newEmployerMsg {
	padding-bottom: 2rem;
}

body.harmony #setupTaxes #newEmployerPopup .popupHeader {
	font-weight: bold;
	font-size: 18px;
	float: left;
	padding-top: 10px;
	padding-bottom: 3rem;
}

body.harmony #setupTaxes #newEmployerPopup {
	padding: 2rem;
}

body.harmony #setupTaxes #newEmployerPopup #newEmployerRateList {
	padding-bottom: 4rem;
}

body.harmony #setupTaxes .stateTaxRateExceptionList {
	display: block;
}

body.harmony #setupTaxes .helpText {
	padding-left: 1rem;
}

/*** sui rate warning popup. ***/
body.harmony #setupTaxesPopup {
	padding: 1em 1em 1em 1em;
}

body.harmony #setupTaxesPopup .taxesModalHeader {
    display: block;
	font-weight: bold;
	font-size: 2.4rem;
    line-height: 1.5em;
    padding-bottom: 1rem;
}

body.harmony #setupTaxesPopup > #textContent {
    display: inline-block;
    width: 43rem;
}

body.harmony #setupTaxesPopup .dividerLine {
	border-top: 1px solid #cccccc;
	margin-top: 10px;
	margin-bottom: 20px;
}

body.harmony #setupTaxesPopup .icon {
    background-size: 84px;
    float: left;
    height: 84px;
    width: 84px;
	margin-right: 15px;
}

body.harmony #setupTaxesPopup .textMessage {
    display: block;
	padding-bottom: 1em;
}

body.harmony #setupTaxesPopup .singleButton {
    margin: auto;
}

body.harmony #taxPaymentDues .nsfTaxPaymentDue {
	position: relative;
	top: 2px;
}

/*** Tax Records ***/

body.harmony .taxRecordDiv .listTable .listTableHdr {
    padding-top: 0px;
    padding-bottom: 0px;
}
body.harmony .taxRecordDiv .taxRecordNameCol {
    padding-left: 10px;
}
body.harmony .taxRecordDiv .stdReportHdr .taxRecordNameCol {
    padding-left: 0px;
}
body.harmony .taxRecordListContentDiv .listTable .trDataTableUnselectedRow {
    margin-top: 30px;
}

body.harmony .taxRecordListTitleDiv.listTableTitle {
    border-bottom: none;
}

/**** Ongoing Add/Edit Employee - Employee Details, Pay, Profile, Employment  ***/

body.harmony #empDetails .dataColumn {
	width: 460px;										/* Width for each of the three columns */
}

body.harmony #empDetails .fieldDivider {
	border-bottom: 1px solid #cccccc;
}

body.harmony #empDetails .fieldPadding {
	padding: 5px 0;
    height: 24px;
}
body.harmony #empDetails .fieldLabel {
	margin-top: 5px;
}
body.harmony #empDetails .eeLabel {								/* payInfo and deductionInfo sections output this CSS selector, so leverage this to better style these sections */
	border-top: 1px solid #cccccc;
}

body.harmony #empDetails .eeLabel .fieldPadding {				/* payInfo and deductionInfo sections output this CSS selector, so leverage this to better style these sections */
	padding: 5px 0 5px 0;
}

body.harmony #empDetails .eeLabelGroupTop .fieldPadding {		/* payInfo and deductionInfo sections output this CSS selector, so leverage this to better style these sections */
	padding-bottom: 0;
}

body.harmony #empDetails .eeLabelGroupBottom .fieldPadding {	/* payInfo and deductionInfo sections output this CSS selector, so leverage this to better style these sections */
	padding-top: 0;
	padding-bottom: 10px;
}

body.harmony #empProfileInfo #stateSelector-combobox,
body.harmony #empEmploymentInfo #stateSelector-combobox {
	width: 20px;
}

body.harmony #empOPSetup #showDeleteEmpWarningDialogForm .dialogBodyText,
body.harmony #empOPSetup #showDeleteDeductionWarningDialogForm .dialogBodyText,
body.harmony #empOPSetup #showGarnishmentWarningDialogForm .dialogBodyText,
body.harmony #empOPSetup #showNoDeductionsWhenGrossupRequiredWarningDialogForm .dialogBodyText,
body.harmony #empProfileInfo #showDeleteEmpWarningDialogForm .dialogBodyText,
body.harmony #empEmploymentInfo #showDeleteEmpWarningDialogForm .dialogBodyText {
	font-size: 16px;
	font-weight: bold;
}

body.harmony #empDetails .sectionDividerLine,
body.harmony #empProfileInfo .sectionDividerLine,
body.harmony #empEmploymentInfo .sectionDividerLine {
	width: 1140px;												/* xD-spec */
}

body.harmony #empOPSetupForm .sectionDividerLine {
	width: 600px;												/* xD-spec */
	margin-bottom: 19px;										/* Results in 35px padding between line below navigation tabs to top of first control label */
	margin-right: 30px;											/* xD-spec */
}



body.harmony #empProfileInfo .sectionDividerLine,
body.harmony #empEmploymentInfo .sectionDividerLine {
	margin-bottom: 19px;										/* Results in 35px padding between line below navigation tabs to top of first control label */
}

/***** company tax setup flow *****/
body.harmony .confirmationDialogLabel {
	font-weight: bold;
	font-size: 18px;
	padding-top: 10px;
	padding-bottom: 3rem;
}

body.harmony #setupTaxes .notes {
	font-size: 12px;
	color: #C0C0C0;
}

/** Prior payroll initial questions. */
body.harmony #priorPayrolls .radioGroupLabel {
	margin-top: 25px;
}
body.harmony #noGrossupCallUs {
    text-align: center;
}

/*** Prior payroll intro ********************/
body.harmony #priorPayrollIntro {
    width: 875px;
	min-width: 875px /* Needed for trowser else width is less than set width */;
}

/** Run payroll button on employees page. */
body.harmony .stageHeader .runPayrollButton {
	width: auto;
	min-width: 89px;
	text-align: center;
	margin-top: 25px;
	margin-right: 25px;
}

/** Run payroll button on employees page. */
body.harmony .stageHeader #runPayrollGroup {
	top:0px;
	right:0px;
	position:absolute;
}

/** Run payroll button text (the text below the button) on employees page. */
body.harmony #stageForm #runPayrollButtonText {
	position:absolute;
	right:0;
	margin-top: 15px;
	padding-right: 30px;
	float:right;
	font-size:14px
}

body.harmony #stageForm .warnSetupTaxes {
    display: block;
	clear: both;
    vertical-align: text-bottom;
}

body.harmony .employerAssitant .title {
	display: inline-block;
	width: 220px;
}

/** Finish payroll modal. */
body.harmony #finishPayrollSetupTaxesPopup {
    padding: 1em 1em 0 1em;
}
body.harmony #finishPayrollSetupTaxesPopup > #textContent {
    display: inline-block;
    padding: 0 0 2em 1em;
    width: 43rem;
}
body.harmony #finishPayrollSetupTaxesPopup .subText {
    display: block;
    padding-top: 1em;
}
body.harmony #finishPayrollSetupTaxesPopup .finishPayrollModalHeader {
    display: block;
	font-weight: bold;
	font-size: 2.4rem;
    line-height: 1.5em;
    padding-bottom: 1rem;
}
body.harmony #finishPayrollSetupTaxesPopup .icon {
    background-size: 84px;
    float: left;
    height: 84px;
    width: 84px;
}

body.harmony #employeeListContent .eeYtdNetPayColHdr {
	text-align: right;
	min-width: 100px;
    padding: 0 5px 0px 30px;
    margin-right: 8px;
}
body.harmony #editPaymentDataTbl th.tiAmountCol,
body.harmony #editPaymentDataTbl td.tiAmountCol,
body.harmony #editPaymentDataTbl .ui-footer-column,
body.harmony #editPaymentDataTbl input
{
	text-align: right;
}

body.harmony #editPaymentDataTbl .ui-datatable .ui-header-column,
body.harmony #editPaymentDataTbl .ui-datatable .ui-footer-column {
	padding-right:3px
}
body.harmony #editPaymentDataTbl .ui-datatable .ui-footer-column {
	font-weight: bold;
}

body.harmony div.historicalTimeWorkConfirm table:first-child {
	table-layout: auto !important;
}

/*----------------------------------------------------------------------------
 *  Paycheck Details
 *----------------------------------------------------------------------------*/

body.harmony .paycheckDetailsHeader {
    margin-top: 15px;
    margin-left: 17px;
}

body.harmony .paycheckDetailsHeader .primaryInfo {
    font-family: "DINNextLTPro-Regular", "Arial", sans-serif;
    font-size: 34px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-right: 5px;
    color: #404040;
    text-align: left;
}

body.harmony .paycheckDetailsHeader .secondaryInfo {
	font-family: "Helvetica", "Arial", sans-serif;
    font-size: 22px;
	font-weight: bold;
	color: #404040;
    margin-top: 5px;
}

.paycheckTable .c1 {
    width: 250px;
}

.paycheckTable .c2 {
    border-left: solid 1px #cccccc;
    padding-left: 30px;
	width: 249px;
}

.paycheckTable .c4 {
	vertical-align: top;
}

.paycheckTable tr:last-of-type td {
    padding-bottom: 10px;
}

.vacationAndSickTable {
	display: inline-block;
	margin-top: 20px;
}

.vacationAndSickColumn {
	width: 125px;
}

body.harmony .paycheckDetailsHeader .payToLabel {
    color: #6d8ba7;
    font-size: 14px;
    padding: 1% 5px 1% 0;
}


.reportContainer .viewTable .tableHeader {
	font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    margin-left: 5px;
    font-size: 20px;
	color: #404040;
 }

.paycheckDetailsTable {
    margin-top:30px;
}

.reportContainer .stdReport .stdReportFtr {
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    border-top-width: 1px;
    border-bottom-width: 2px;
    padding-top: 0px;
    padding-bottom: 0px;
    height: 50px;
}

.reportContainer .stdReport .stdReportFtr .descriptionFooter {
    text-align: left;
}

#paycheckDetailsForm .stickyFooter .darkCenterLink a {
    padding: 0 30px;
    height: 24px;
    border-left: solid 1px #6d8ba7;
    color: #cbcbcb;
    vertical-align:50%
}

#paycheckDetailsForm .stickyFooter .darkCenterLink a:last-child {
    border-right: solid 1px #6d8ba7;
     color: #cbcbcb;
}


/*----------------------------------------------------------------------------
 *  Vacation policy
 *----------------------------------------------------------------------------*/

#vacationPolicy #accrueRadioButton,
#vacationPolicy #payoutRadioButton {
	clear: both;
	padding-top: 5px;
	padding-left: 0px;
}

#vacationPolicy .radioSpacerTD1 {
	padding-bottom:20px;
}

#vacationPolicy #accrualRateDiv {
	display: inline-block;
	margin-left: 20px;
}

#vacationPolicy #accrualPeriodDiv {
	display: inline-block;
}

#vacationPolicy p.helpLinkText,
#vacationPolicy p.minimumRateText {
	margin-bottom: 5px;
}

#vacationPolicy p.minimumRateText {
	margin-top:3px;
}

#vacationPolicy .enterVacationPolicyBox {
	background-color: #F3F5F7;
	border: 1px solid #DDDDDD;
	padding:10px 10px 10px 20px;
}

#vacationPolicy .defaultPolicyCheckbox {
	margin-top:20px;
}

#vacationPolicy .defaultPolicyCheckbox input[type='checkbox'] {
	vertical-align: middle;
	top: 0px;
	margin-right: 8px;
}

#vacationPolicy #accrueAssistantDiv {
	position: absolute;
	left: 330px;
}

#vacationPolicy #accrueAssistantDiv.fr {
	position: absolute;
	left: 450px;
}

#vacationPolicy #payoutAssistantDiv {
	position: absolute;
	left: 150px;
}

#vacationPolicy .iceSelOneRb {
	font-weight: bold;
}

#vacationPolicy #accruePolicyLabel,
#vacationPolicy #payoutPolicyLabel {
	text-transform: uppercase;
}

#vacationPolicy input[type='text'] {
	width: 40px;
}

/* this is assumed to be the label for the text input */
#vacationPolicy input[type='text'] + .rateLabel {
	margin-left: 8px;
}

/*----------------------------------------------------------------------------
 *  TD1
 *----------------------------------------------------------------------------*/

body.harmony .eeEditLabel.subLabel {
	font-size: 12px;
}

#eeAddTD1 .pageTitleSection {
	padding-bottom: 10px;
}

#eeAddTD1 .pageTitle {
	display:block;
	font-size: 22px;
	color: gray;
	padding-bottom: 20px;
}

#eeAddTD1 .subLabel label {
	font-weight: normal;
}

#eeAddTD1  .hidden {
	visibility: hidden;
}

#eeAddTD1 .radioSpacerTD1 {
	padding-bottom: 20px;
}

#eeAddTD1 .td1Form {
	border: solid 1px rgb(212, 212, 212);
	box-shadow: 0px 8px 0px rgb(227,227,227);
	padding: 15px 25px;
	width: 1010px;
}

#eeAddTD1 .td1Form.fr {
	width: 1160px;
}

#eeAddTD1 .td1Form .federalAmtTable {
	width: 1010px;
}

#eeAddTD1 .td1Form .federalAmtTable .td1CellAlignment {
	padding-top: 40px;
	padding-bottom: 0px;
	padding-right: 0px;
}

#eeAddTD1 .td1Form .federalAmtTable tbody tr td.icePnlGrdCol1
{
	padding-top: 10px;
	width: 760px;
}

#eeAddTD1 .td1Form .federalAmtTable tbody tr td.icePnlGrdCol2
{
	vertical-align: top;
	padding-left: 20px;
}

#eeAddTD1 .td1Form .td1FormGridWrapper {
	width: 1010px;
}
#eeAddTD1 .td1Form .td1FormGridWrapper .td1FormGrid td {
	vertical-align: top;
}

#eeAddTD1 .td1Form .td1FormGridWrapper .td1FormGrid td.icePnlGrdCol2
{
	border-right: solid 1px rgb(212, 212, 212);
	border-left: solid 1px rgb(212, 212, 212);
}

#eeAddTD1 .td1Form .td1FormGridWrapper .td1FormGrid td.icePnlGrdCol1,
#eeAddTD1 .td1Form .td1FormGridWrapper .td1FormGrid td.icePnlGrdCol2 {
	border-top: solid 1px rgb(212, 212, 212);
	border-bottom: solid 1px rgb(212, 212, 212);
}

#eeAddTD1 .td1Form .td1FormGrid tr:nth-last-child(1) td,
#eeAddTD1 .td1Form .td1FormGrid tr:nth-last-child(2) td {
	border-style: none;
}

#eeAddTD1 .td1Form .td1FormGrid tr td:not(:first-child) {
	padding-left: 20px;
}
#eeAddTD1 .td1Form .td1FormGrid tr td:not(:last-child) {
	padding-right: 0px;
}

#eeAddTD1 .td1Form .td1CellAlignment {
	padding: 18px 20px 20px 0px;
}

#eeAddTD1 .td1Form .td1CanadaFlag
{
	background: url('../../resources/images/td1_canada_flag.png') no-repeat 100%;
}

#eeAddTD1 .td1Form .td1HeaderLarge {
	font-size: 28px;
	font-weight: bold;
	color: darkgray;
}

#eeAddTD1 .td1Form .td1HeaderSmall {
	font-size: 12px;
	color: darkgray;
}

#eeAddTD1 .td1Form #eeAddTD1\:firstname {
	border-radius: 0px;
	border-left: none;
	border-right: none;
}

#eeAddTD1 .td1Form #eeAddTD1\:middleinit {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

#eeAddTD1 .td1Form #eeAddTD1\:lastname {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

#eeAddTD1 .td1Form .td1HeaderLargeAlignment {
	vertical-align: middle;
	padding-left: 20px;
	padding-right: 20px;
	border-left: none;
	border-right: none;
}

#eeAddTD1 .td1Form .td1HeaderSmallAlignment {
	height:      58px; /* These two must be equal. */
	line-height: 58px; /* Sets the height of the top section of the TD1 form. */
	min-width: 50px;

	display:inline-block;
	padding-left: 5px;
	padding-right: 5px;
	border-left: solid 1px rgb(212, 212, 212);
	border-left: none;
	border-right: none;
	vertical-align: middle;
	text-align: center;
}
#eeAddTD1 .td1Form .canadaRevenue {
	height: 0px;
	vertical-align: top;
	padding-left: 20px;
	padding-top: 10px;
	font-size: 12px;
	color: darkgray;
	display: inline-block;
	width: 0px;
}
#eeAddTD1 .td1Form .canadaRevenue.en {
	width: 95px;
}

#eeAddTD1 .td1Form .canadaRevenue.fr {
	width: 112px;
	/*padding-right: 95px;*/
}
#eeAddTD1 .td1Form .yearText {
	margin-top: 20px;
}

#eeAddTD1 .td1Form #eeAddTD1\:firstname {
	display: block;
	width: 216px;
}

#eeAddTD1 .td1Form #eeAddTD1\:middleinit {
	display: block;
	width: 40px;
}

#eeAddTD1 .td1Form #eeAddTD1\:lastname {
	display: block;
	width: 217px;
}

#eeAddTD1 .td1Form #eeAddTD1\:eeNumber {
	display: block;
}

#eeAddTD1 .td1Form #eeAddTD1\:countryOfResidence {
	display: block;
}

#eeAddTD1 .td1Form #eeAddTD1\:countryOfResidenceLabel2 {
	font-size: 12px;
	color: darkgray
}

#eeAddTD1 .td1Form #eeAddTD1\:addressLine_1 {
	display: block;
	width: 499px;
	margin-bottom: 30px;
}

#eeAddTD1 .td1Form #eeAddTD1\:city {
	display: block;
	width: 280px;
	margin-bottom: 30px;
}

#eeAddTD1 .td1Form #eeAddTD1\:zipCode {
	display: block;
	width: 120px;
}

#eeAddTD1 .td1Form #eeAddTD1\:provinceLabel {
	display: block;
}

#eeAddTD1 .td1Form .provinceSection {
	padding-left: 3px;
	padding-right: 5px
}

#eeAddTD1 .td1Form #eeAddTD1\:provinceSelector\:combobox-input, #eeAddTD1\:additionalProvinceSelector\:combobox-input {
	width: 20px;
}

#eeAddTD1 .panel {
	float: left;
	width: 860px;
}

#eeAddTD1 .panelToggle {
	display: block;
	float: left;
	padding-top: 4px;
	padding-right: 6px;
}

#eeAddTD1 .panelHeader {
	padding-bottom: 20px;
}

#eeAddTD1 .panelContent {
	margin-left: 30px;
}

#eeAddTD1 .panelPadding {
	border-top: solid 1px lightgray;
	padding: 30px 0px;
	min-width: 900px;
}

#eeAddTD1 .stateWithholdingCell {
	padding-right: 28px;
}

#eeAddTD1 .commuterOptOutPadding {
	padding-top: 20px;
}

#eeAddTD1 .inlineEdit {
	border: solid 1px lightgray;
	background-color: #ebebeb;
	padding: 10px;
	border-radius: 2px;
}

#eeAddTD1 .inlineEdit .title {
	padding-bottom: 10px;
}

#eeAddTD1 .inlineEdit .content {
	padding-bottom: 10px;
}

#eeAddTD1 .hButtonGroup .button {
	display: inline-block;
	margin-right: 10px;
}

#eeAddTD1 .hButtonGroup .button:last-child {
	margin-right: 0px;
}

#eeAddTD1\:exemptions_tax td {
	height: 36px;
}

#eeAddTD1 .multiFieldWarningText {
	padding-left:6px;
	padding-top: 0px;
	color:#DC3C1E;
	font-weight:bold;
	vertical-align: top;
}

#eeAddTD1 .clearTop {
	margin-top: 0px;
}

#eeAddTD1 .td1Form .federalAmount {
	padding-top: 40px;
	padding-bottom: 0px;
	padding-right: 0px;
}

#eeAddTD1 .td1Form .federalWidth {
	width: 175px;
}

#eeAddTD1 .td1Form input.inputFieldWidth150 {
	width: 150px;
}

#eeAddTD1 .td1Form input.inputFieldWidth140 {
	width: 140px;
}

/*----------------------------------------------------------------------------
 *  W4
 *----------------------------------------------------------------------------*/

#eeAddW4 .pageTitleSection {
	padding-bottom: 10px;
}

#eeAddW4 .pageTitle {
	display:block;
	font-size: 22px;
	color: gray;
	padding-bottom: 20px;
}

#eeAddW4 .subLabel label {
	font-weight: normal;
}

#eeAddW4  .hidden {
	visibility: hidden;
}

#eeAddW4 .radioSpacerW4 {
	padding-bottom: 17px;
}

#eeAddW4 .w4Form {
	border: solid 1px rgb(212, 212, 212);
	box-shadow: 0px 8px 0px rgb(227,227,227);
	padding: 25px;
	width: 835px;
}

#eeAddW4 .w4Form .w4FormGrid td {
	vertical-align: top;
}

#eeAddW4 .w4Form .w4FormGrid td.icePnlGrdCol1 {
	border-right: solid 1px #CCCCCC;
}

#eeAddW4 .w4Form .w4FormGrid td.icePnlGrdCol1,
#eeAddW4 .w4Form .w4FormGrid td.icePnlGrdCol2 {
	border-top: solid 1px #CCCCCC;
}

#eeAddW4 .w4Form .w4FormGrid tr:first-child td.icePnlGrdCol1,
#eeAddW4 .w4Form .w4FormGrid tr:first-child td.icePnlGrdCol2 {
	border-top: none;
}

#eeAddW4 .w4Form .w4FormGrid tr:nth-last-child(1) td,
#eeAddW4 .w4Form .w4FormGrid tr:nth-last-child(2) td {
	border-top: none;
	border-right: none;
}

#eeAddW4 .w4Form .w4CellAlignment {
	padding-top: 20px;
	padding-bottom: 20px;
}

#eeAddW4 .w4Form .sectionNumber {
	float: left;
	padding-left: 10px;
	width: 22px;
}

#eeAddW4 .w4Form .W4HeaderLarge {
	font-size: 40px;
	font-weight: bold;
	color: darkgray;
}

#eeAddW4 .w4Form .W4HeaderSmall {
	font-size: 20px;
	font-weight: bold;
	color: darkgray;
}

#eeAddW4 .w4Form #eeAddW4\:firstname {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

#eeAddW4 .w4Form #eeAddW4\:middleinit {
	border-radius: 0px;
	border-left: none;
	border-right: none;
}

#eeAddW4 .w4Form #eeAddW4\:lastname {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}


#eeAddW4 .w4Form .w4HeaderLargeAlignment {
	vertical-align: middle;
	padding-left: 20px;
	padding-right: 20px;
}

#eeAddW4 .w4Form .w4HeaderSmallAlignment {
	height:      58px; /* These two must be equal. */
	line-height: 58px; /* Sets the height of the top section of the W-4 form. */

	display:inline-block;
	padding-left: 20px;
	padding-right: 20px;
	border-left: solid 1px #CCCCCC;
}

#eeAddW4 .w4Form .yearAlignment {
	height:      58px; /* These two must be equal to values above. */
	line-height: 58px; /* Sets the height of the top section of the W-4 form. */

	display: inline-block;
	width: 200px;
}

#eeAddW4 .w4Form #eeAddW4\:firstname {
	display: block;
	width: 150px;
}

#eeAddW4 .w4Form #eeAddW4\:middleinit {
	display: block;
	width: 30px;
}

#eeAddW4 .w4Form #eeAddW4\:lastname {
	display: block;
	width: 283px;
}

#eeAddW4 .w4Form #eeAddW4\:ssn {
	width: 180px;
}

#eeAddW4 .w4Form #eeAddW4\:addressLine_1 {
	display: block;
	width: 489px;
	margin-bottom: 30px;
}

#eeAddW4 .w4Form #eeAddW4\:city {
	display: block;
	width: 268px;
	margin-bottom: 30px;
}

#eeAddW4 .w4Form #eeAddW4\:stateLabel {
	display: block;
}

#eeAddW4 .w4Form .stateSection {
	padding-left: 3px;
	padding-right: 5px
}

#eeAddW4 .w4Form .allowancesSectionWithCountyHidden {
	padding-top: 73px;
}

#eeAddW4 .w4Form .allowancesSectionWithCountyVisible {
	padding-top: 20px;
}

#eeAddW4 .w4Form .additionalAmountSection {
	padding-top: 10px;
}

#eeAddW4 .panel {
	float: left;
	width: 860px;
}

#eeAddW4 .panelToggle {
	display: block;
	float: left;
	padding-top: 4px;
	padding-right: 6px;
}

#eeAddW4 .panelHeader {
	padding-bottom: 20px;
}

#eeAddW4 .panelContent {

}

#eeAddW4 .panelPadding {
	border-top: solid 1px lightgray;
	padding: 30px 0px;
	min-width: 900px;
}

#eeAddW4 .stateWithholdingCell {
	padding-right: 28px;
}

#eeAddW4 .commuterOptOutPadding {
	padding-top: 20px;
}

#eeAddW4 .inlineEdit {
	border: solid 1px lightgray;
	background-color: #ebebeb;
	padding: 10px;
	border-radius: 2px;
}

#eeAddW4 .inlineEdit .title {
	padding-bottom: 10px;
}

#eeAddW4 .inlineEdit .content {
	padding-bottom: 10px;
}

#eeAddW4 .hButtonGroup .button {
	display: inline-block;
	margin-right: 10px;
}

#eeAddW4 .hButtonGroup .button:last-child {
	margin-right: 0px;
}

#eeAddW4\:exemptions_tax td {
	height: 36px;
}

#eeAddW4 .multiFieldWarningText {
	padding-left:6px;
	padding-top: 0px;
	color:#DC3C1E;
	font-weight:bold;
	vertical-align: top;
}

body.harmony #eeAddW4 .clearTop {
	margin-top: 0px;
}

body.harmony #eeAddW4 .ssnHint {
	display:inline-block;
}
body.harmony .noTopBorder {
	border-top: none;
}
body.harmony .noBottomBorder {
	border-bottom: none;
}
body.harmony #emailPref .fieldDivider {
	border-bottom: 1px solid #cccccc;
}
body.harmony .viewTable #bottomBorderRow {
	border-bottom: 2px solid #6d8ba7;
}
body.harmony .hideForHarmony {
	display: none;
}
body.harmony .showForHarmony {
	display: inline-block;
}
body.harmony .viewTable table.width50Percent {
	width:50%
}
body.harmony .viewTable table.width50Percent tr td {
	border-left: none;
}
body.harmony .viewTable table.width50Percent tr td:first-child {
	width:50%;
}


body.harmony #exportWizardContent .accountSelect .input {
    width:400px;
}

body.harmony #exportWizardContent td.accountCol .accountSelect .combobox-input {
	width: 400px;
    height: 30px;
	text-overflow: ellipsis;
}
#exportPreferencesForm {
    min-height: 400px;
}

body.harmony #exportPreferencesForm .combobox a.combobox-toggle {
    z-index : 0;
}

#paystubPopup #titleTable #empNameColHdr #empName,
#paystubPopup #titleTable #lastPayDayColHdr,
#paystubPopup #titleTable #curPayDayColHdr {
	font-weight: bold;
    vertical-align: middle;
}

#comparePaycheckPopup #titleTable  tr {
	background-color: #E2EEFF;
}

#comparePaycheckPopup #titleTable #empNameColHdr {
	font-size: 14px;
	width: 292px;
    display: inline-block;
}

#comparePaycheckPopup #lineBeforeCompareWagesTable {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    border-bottom: 0px;
    height: 0px;
}

#comparePaycheckPopup #lineBeforeTotalsTable {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    border-bottom: 2px solid #CCCCCC;
    height: 0px;
}

#comparePaycheckPopup #totalsTable .descriptionCol {
	width       : 300px;
	text-align  : left;
	padding-left: 115px;
}


#comparePaycheckPopup #totalsTable tr:hover {
	background-color: #FFFFFF;
}

#comparePaycheckPopup .verticalscroller table tr:hover {
    background-color: #f3f8fe;

}

#comparePaycheckPopup .verticalscroller table tr td {
    padding: 0 10px;
    border-bottom: 1px solid #cccccc;
    border-left: 1px dotted #cccccc;
    vertical-align: middle;
}

#comparePaycheckPopup .verticalscroller table tr td:first-child {
    border-left: none;
}

#comparePaycheckPopup #totalsTable td {
    border-bottom: 0px;
    border-left: 0px;
}

#comparePaycheckPopup #lineBeforeCompareWagesTable {
    margin-bottom: 0px;
    height: 0px;
}

#comparePaycheckPopup #emptydiv {
    height: 0px;
}


#comparePaycheckPopup .compareLineItemTable .compareLineItemTableHdr {
    background-color: #F0F0F5;
	font-weight: bold
}
body.harmony .viewTable table tr.section-data td {
	text-indent: 20px;
}

#comparePaycheckPopup  .verticalscroller {
    height   : 510px;
    overflow : auto;
}


.checkPrintingSpacer {
	padding-top: 10px;
}

#checkPrintingReport .listTable {
	min-width: 850px;
	padding-left: 0px;
}

#checkPrintingReport .listTable th {
	border-bottom: none;
	white-space: nowrap;
}

#checkPrintingReport .listTable th.eeSelectedToPrintCol {
	width: 40px;
}

#checkPrintingReport .listTable td.eeSelectedToPrintCol {
	padding-left: 10px;
}

#checkPrintingReport .listTable th.eePayDateCol, 
#checkPrintingReport .listTable th.eeGrossPayCol {
	width: 90px;
}
#checkPrintingReport .listTable th.eeDisplayNameCol {
	width: 220px;
}

#checkPrintingReport .listTable th.eeNetPayCol {
	width: 80px;
}

#checkPrintingReport .listTable th.eeVoucherNumberCol {
	width: 120px;
}

#checkPrintingReport .assistantIconList {
	text-align:right;
	padding-right: 20px;
	margin-top: 10px;
}

#checkPrintingReport .assistantIcons .paycheckListGearIcon {
	background-position: 0px -1368px;
	background-size: 72px;
	display: inline-block;
	width: 18px;
	height: 18px;
}

#checkPrintingReport .batchActionButton {
	padding-bottom: 5px
}

#checkPrintingReport .leftDownArrow {
	vertical-align: bottom;
	margin-left: 15px;
	background-size: 72px;
	display: inline-block;
	width: 18px;
	height: 18px;
}

#checkPrintingReport .payMethodIcon {
	float:right;
	opacity: .3;
	filter:Alpha(Opacity=30); /* Harmony shoudln't support < IE 10 anyway... */
}

#checkPrintingReport .paycheckListGearPopover:before {
	display: none;
}

#checkPrintingReport [disabled=disabled] {
	color:graytext;
}

.setupPortalContent,
.eSignContent,
.eSignSigningContent {
    border: none;
    box-shadow: none;
    /* Add some border so that in IE there is something */
}

.eSignIntro .title {
	font-family: Arial;
	font-size: 24px;
	padding-top: 24px;
}

.esignLinks {
    font-size: 25px;
    padding-left: 10px;
    padding-right: 10px;
}

#enterCompDiv .listTable td:first-child,#enterCompDiv .listTable th:first-child {
	border-right:none;
}

#enterCompDiv .listTable .eeIsPaidColHdr span {
    float: none;
}

#empOPSetup #empOPSetupForm #step6-1Section .genderClass label {
	width:80px;
}
body div.blocker-dialog-title {
    border-bottom: 0;
    padding-bottom: 0;
}

body.harmony div.editCheckTable table tr:last-child {
	font-weight: bold;
}

body.harmony div.editCheckTable table tr:last-child td:first-child{
	text-align: right;
}

body.harmony div.editCheckTable table tr th:last-child{
	width: 100px;
}
body.harmony div.editCheckTable table tr th:nth-last-child(2){
	width: 200px;
}

/*----------------------------------------------------------------------------
 *  Customer Segementer
 *----------------------------------------------------------------------------*/
body.harmony #segmentForm {
    margin-top: 1em;
}
body.harmony .segmentContainer {
    cursor: pointer;
    display: inline-block;
    height: 420px;
    margin: -30px 80px 0 -30px;
    width: 230px;
    padding: 30px;
    vertical-align: top;
    transition: background-color .15s ease-in;
}
body.harmony .segmentContainer.last {
    margin-right: 0;
}
body.harmony .segmentContainer:hover {
    background-color: #f9fafc;
    transition: background-color .2s;
}
body.harmony .segmentContainer .segment-image {
    border-bottom: 10px solid transparent;
    display: block;
    height: 200px;
    width: 200px;
    opacity: .3;
    padding: 0 0 20px 0;
    -webkit-backface-visibility: hidden;
    transition: border-color .2s ease-out, opacity .3s ease-out;
}
body.harmony .segmentContainer:hover .segment-image {
    border-color: #91afe3;
    opacity: 1;
    transition: border-color .2s, opacity .2s;
}
body.harmony .segmentContainer .segment-image.selected {
    border-color: #365ebf;
    opacity: 1;
}
body.harmony .segmentContainer h2 {
    display: block;
    line-height: 1.5em;
    margin: 2rem 0;
}
body.harmony .segmentContainer .description {
    display: block;
    margin: 2rem 0;
}

body.harmony #segmentContactUs {
    margin-top: 1em;
}
body.harmony #segmentContactUs h2.content {
    display: inline;
    font-weight: normal;
    margin-top: 1em;
}

#paycheckCountdown {
	text-align: center;
	position: absolute;
	margin-top: -40px;
	z-index: 100;

	animation-duration: 0.8s;
	-webkit-animation-duration: 0.8s;
	animation-name: slide-down;
	-webkit-animation-name: slide-down;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	animation-delay: 0;
	-webkit-animation-delay: 0;
}

/**************** Countdown - This could be moved to component.css *********************/

.countdownWrapper {
	width: 448px;
	height: 55px;
	border: 1px solid #e3eaf3;
	line-height: 55px;
	font-size: 1.4rem;
	font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	color: #404040;
	z-index: 200;
	background-color: #ffffff;
	margin: 0 auto;
	left: 0;
	right: 0;
	font-weight: normal;
}

.countdownWrapper .icon, .countdownWrapper .msg, .countdownWrapper .countdown {
	float: left;
	margin-left: 15px;
}

.countdownWrapper .icon {
	margin-top: 16px;
}

.countdownWrapper.warn .icon, .countdownWrapper.timeOver .icon {
	width: 24px;
	height: 24px;
}

.countdownWrapper.init .icon {
	width: 22px;
	height: 22px;
	background-image: url('../../resources/images/countdown-init.png');
}

.countdownWrapper.warn .icon {
	background-image: url('../../resources/images/countdown-warn.png');
}

.countdownWrapper.timeOver .icon {
	background-image: url('../../resources/images/countdown-over.png');
}

.countdownWrapper .countdown {
	font-size: 3.0rem;
}

.countdownWrapper .msg {
	margin-top: 5px;
	margin-left: 10px;
}

.countdownWrapper.warn {
	border: 1px solid #e33d43;
}

.countdownWrapper.timeOver {
	border-width: 0;
	color: #ffffff;
	background-color: #e33d43;
}