/*
 * Description: Personal Tax Calculator Responsive Web Design (RWD) Styles
 * Version: 1.0.1
 *
 * Some of the CSS below is from the "tablesaw.stackonly.css" file that is being overridden to make the RWD table work properly.
 * The media query widths were adjusted directly in the "tablesaw.stackonly.css" file ("max-width: 78.125em" and "min-width: 78.125em"), but all other overrides are below.
 *
 * Additional CSS being used:
 *
 * - tablesaw.stackonly.css
 *
 */

/* Changes to default table settings to work within the RWD theme for the Personal Tax Calculators. */
/* .personalTaxCalculator,
.rrspSavingsCalculator {
	position: relative;
} */

.personalTaxCalculator table,
.personalTaxCalculator th,
.personalTaxCalculator td,
.personalTaxCalculator tr,
.personalTaxCalculator input,
.personalTaxCalculator button,
.rrspSavingsCalculator table,
.rrspSavingsCalculator th,
.rrspSavingsCalculator td,
.rrspSavingsCalculator tr,
.rrspSavingsCalculator input,
.rrspSavingsCalculator button {
	box-sizing: border-box;
}

.personalTaxCalculator table,
.rrspSavingsCalculator table {
	margin: 2em 0;
	border: 1px solid #eee;
	width: 100%;
	border-collapse: collapse;
}

.personalTaxCalculator table td,
.personalTaxCalculator table th,
.rrspSavingsCalculator table td,
.rrspSavingsCalculator table th {
	/* padding: 6px 6px; */
	padding: 2rem 2rem;
	/* vertical-align: middle; */
	border: 1px solid #eee;
}

.personalTaxCalculator table th,
.rrspSavingsCalculator table th {
	/* background: #fde412; */
	background: #2e2e38;
	border: 1px solid #555;
	color: #f6f6fa;
}

.rrspSavingsCalculator tr th:nth-child(1),
.rrspSavingsCalculator tr td:nth-child(1) {
	width: 10%;
}

.rrspSavingsCalculator tr th:nth-child(2),
.rrspSavingsCalculator tr td:nth-child(2) {
	width: 50%;
}

.rrspSavingsCalculator tr th:nth-child(3),
.rrspSavingsCalculator tr td:nth-child(3) {
	width: 40%;
}


.personalTaxCalculator table .provinceName {
	/* background: #fde412; */
	font-weight: bold;
	text-align: left;
}

.personalTaxCalculator table td input,
.rrspSavingsCalculator table td input {
	background: transparent;
	border: 0;
	text-align: right;
	/* padding-right: 5px; */
	width: 100%;
}

.personalTaxCalculator table tr:nth-child(odd),
.rrspSavingsCalculator table tr:nth-child(odd) {
	/* background: #F3F3F3; */
	background: #FFF;
}

/* .personalTaxCalculator table tr:nth-child(even),
.rrspSavingsCalculator table.rrsp-second-table tr:nth-child(even) {
	background: #FFF;
} */

.personalTaxCalculator table tr,
.rrspSavingsCalculator table tr {
	transition: background 0.25s;
}

.personalTaxCalculator table tr:hover,
.personalTaxCalculator table tr:focus,
.rrspSavingsCalculator table tr:hover,
.rrspSavingsCalculator table tr:focus,
.rrspSavingsCalculator table.rrsp-second-table tr:hover,
.rrspSavingsCalculator table.rrsp-second-table tr:focus {
	background: #fde412;
}

.provinceName sup {
	color: #00bfff;
	font-weight: bold;
}

/* Media query styles for when showing the standard table at 1250px = (78.125em x 16px) or wider. */
@media only screen and (min-width: 769px) {
	.personalTaxCalculator table td,
	.personalTaxCalculator table th {
		/* padding: 4px 0; */
		vertical-align: bottom;
		text-align: right;
		/* border: 1px solid #CCC; */
		/* min-height: 40px; */
		/* width: 12.5%; */
	}

	.personalTaxCalculator table th {
		/* padding: 0 5px;
		font-size: 0.85em; */
	}

	.col-province,
	.col-percentage {
		width: 10%;
	}

	.col-amount {
		width: 20%;
		min-width: 125px;
	}

	.personalTaxCalculator table .provinceName {
		/* padding: 0 0 0 6px; */
	}

	.personalTaxCalculator table td {
		text-align: right;
	}

	/* Show abbreviation and hide full province name. */
	.personalTaxCalculator table .provinceName .tablesaw-cell-content abbr {
		cursor: help;
	}

	.personalTaxCalculator table .provinceName .tablesaw-cell-content span {
		display: none;
	}

	/* Used to test screensize for jQuery "slideToggle()" function in widescreen tax calculator layout. */
	body:after {
				content: 'widescreen';
				display: none;
	}

	/* RRSP Savings */
	/* .personalTaxCalculator table.rrspTable td,
	.personalTaxCalculator table.rrspTable  th {
		padding: 6px 6px;
		vertical-align: middle;
		border: 1px solid #CCC;
		font-size: 1em;
	}
	.rrspTable tr td:nth-child(1) {
		text-align: center;
	}
	.rrspTable tr td:nth-child(2) {
		text-align: left;
	} */

}

/* Personal Tax Calculator wrapper and default styles */
.personalTaxCalculator,
.rrspSavingsCalculator {
	/* font-size: 12px; */
	/* background: #EEE; */
	/* border: 1px solid #CCC; */
	/* padding: 1em; */
	margin: 2em 0;
	position: relative;
}
.personalTaxCalculator h3 {
	/* font-size: 20px; */
}
.personalTaxCalculator p {
	/* font-size: 1em; */
}
.personalTaxCalculator table,
.rrspSavingsCalculator table {
	/* font-size: 12px; */
	background: #f6f6fa;
}
.personalTaxCalculator input {
	/* height: 30px; */
	/* vertical-align: baseline; */
}

/* Introductory paragraph, amount entry field, and "Calculate" button. */
/* .taxableIncome {
	font-weight: bold;
	color: #333;
	font-size: 12px;
	margin-top: 2em;
	position: relative;
	}
.taxableIncome input {
	padding: 3px 2px 2px 2px;
	font-size: 1.0em;
	width: 100%;
} */

.targetAmount {
	width: 100%;
	font-size: 2.1rem;
	padding: 1.5rem;
	border: 1px solid #c4c4cd;
	margin-bottom: 1.4rem;
}

.calculate-button button {
	cursor: pointer;
}

input.calculateButton {
	border-style: solid;
	border-width: 0;
	cursor: pointer;
	font-weight: normal;
	line-height: normal;
	margin: 0 2px;
	position: relative;
	text-decoration: none;
	text-align: center;
	vertical-align: top;
	-webkit-appearance: none;
	border-radius: 0;
	display: inline-block;
	padding: 0px 7px 0px;
	font-size: 1em;
	font-weight: bold;
	background-color: #fde412;
	border-color: #fde412;
	box-shadow: 0 1px 1px #999;
	height: 29px;
	width: auto;
}

/* RRSP Savings */

/* .rrspSavingsCalculator {
	box-sizing: border-box;
} */

.rrspSavingsCalculator img {
	min-width: 25px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*
.rrspContribution {
	margin-top: 1em;
}
.rrspLabel {
	width: 44%;
	float: left;
	padding: 8px 1% 0 0;
	height: 22px;
	text-align: right;
	font-size: 0.95em;
}
.rrspInput {
	width: 55%;
	float: right;
}
.rrspTable {
	width: 49%;
	float: left;
}
.rrspTableSecond {
	float: right;
}
.rrspTaxSavings {
	white-space: nowrap;
}

*/

.personalTaxCalculator table.rrspTable {
	margin-bottom: 1em;
}

@media only screen and (min-width: 769px) and (max-width: 1023px) {
	.personalTaxCalculator table td,
	.personalTaxCalculator table th {
		font-size: 0.75em;
		padding: 1rem 0.5rem;
	}
}

@media only screen and (min-width: 1024px) and (max-width: 1199px) {
	.personalTaxCalculator table td,
	.personalTaxCalculator table th {
		font-size: 0.9em;
		padding: 1rem 1rem;
	}
}

@media only screen and (max-width: 899px) {
	.rrspSavingsCalculator .calculate-button button {
		width: 100%;
	}

	.rrspSavingsCalculator .rrsp-second-table tr:nth-child(even) {
		background: #FFF;;
	}

	.rrspSavingsCalculator .rrsp-second-table tr:nth-child(odd) {
		background: transparent;
	}

	table.rrsp-first-table{
		margin-bottom: 0;
	}


	table.rrsp-second-table {
		margin-top: 0;
		border-top: 0;
	}

	.rrspTableNoHeader {
		display: none;
	}

	.rrspSavingsCalculator table th,
	.rrspSavingsCalculator table td {
		/* font-size: 2rem; */
		padding-right: 1rem;
		padding-left: 1rem;
	}

}

/* Media query styles for when on mobile devices and when desktop web browser is less than 1250px = (78.125em x 16px) wide. */
@media only screen and (max-width: 768px) {

	.targetAmount {
		margin-bottom: 2rem;
	}

	.calculate-button button {
		width: 100%;
	}

	/* RWD related changes to EY.com default table in CSS file. */
	.personalTaxCalculator table {
		margin: 2em 0 0.8em;
		border: 1px solid #EEE;
	}
	.personalTaxCalculator table td  {
		min-height: 30px;
		border-top: 0;
	}
	.personalTaxCalculator table .provinceName {
		border: 1px solid #CCC;
		cursor: pointer;
		background: #666 url(../img/tax-calculator-plus.png) no-repeat;
		background-size: 69px 69px;
		padding-left: 80px;
		color: #FFF;
	}
	.personalTaxCalculator table .provinceNameOpen {
		background: #fde412 url(../img/tax-calculator-minus.png) no-repeat;
		background-size: 69px 69px;
		color: #333;
	}

	/* Tablesaw Overrides */
 	.tablesaw-stack th,
 	.tablesaw-stack td {
		padding-left: 0;
	}
	.tablesaw-stack th .tablesaw-cell-label,
	.tablesaw-stack td .tablesaw-cell-label {
		/* padding: 0 0.6em 0 0.5em; */
		padding: 0 0.6em 0 0;
		width: 50%;
		/* margin-top: 6px;
		margin-bottom: 5px; */
		display: inline-block;
	}
	.tablesaw-cell-content {
		max-width: 50%;
		float: right;
		vertical-align: middle !important;
		/* margin-top: 6px;
		margin-bottom: 5px; */
		/* padding: 0 0.5em 0 0; */
	}
	.tablesaw-cell-content input {
		/* height: 1.6em; */
		margin-right: -5px;
	}
	.tablesaw-stack tbody tr {
		border-bottom: 1.2em solid #EEE;
	}

	table td.provinceData {
		padding: 2rem 1rem;
	}

	/* Hide "Province" abbreviation and show only full province name in mobile view. */
	.personalTaxCalculator table .provinceName .tablesaw-cell-label {
		display: none;
	}
	.personalTaxCalculator table .provinceName .tablesaw-cell-content {
		max-width: 100%;
		padding: 0 0.6em 0 0.5em;
		float: none;
	}
	.personalTaxCalculator table .provinceName .tablesaw-cell-content abbr {
		display: none;
	}

	/* Used to test screensize for jQuery "slideToggle()" function in mobile tax calculator layout. */
	body:after {
				content: 'mobile';
				display: none;
	}

	/* RRSP Savings */
	.provinceTablesWrapper {
		margin-top: 2em;
	}

	.personalTaxCalculator table.rrspTable {
		width: 100%;
		float: left;
		margin-bottom: 0;
		margin-top: 0;
	}
	.personalTaxCalculator table.rrspTableSecond {
		border-top: 0;
		margin-bottom: 1em;
	}


}

/* Media query to fix problems on web browser sizes of 768px or above after EY Global implemented Tablesaw RWD tables. */
/* @media (min-width: 768px) { */

  /* Hide the labels in each cell */
  /* .tablesaw-stack td .tablesaw-cell-label {
    display: inline-block !important;
  } */
	/* Hide "Province" abbreviation and show only full province name in mobile view. */
	/* .personalTaxCalculator table .provinceName .tablesaw-cell-label {
		display: none !important;
	}
} */

/* Media query to fix problems on web browser sizes of 1250px or above after EY Global implemented Tablesaw RWD tables. */
/* @media (min-width: 1250px) {
	.tablesaw-stack td .tablesaw-cell-label {
		display: none !important;
	}
} */