/* General */
/* new tooltip css styles */

a.tooltip-forms {outline:none; } 
a.tooltip-forms strong {line-height:30px;} 
a.tooltip-forms:hover {text-decoration:none;} 
a.tooltip-forms span { z-index:10;display:none; padding:14px 20px; margin-top:-220px; margin-left:-360px; width:300px; line-height:16px; position:absolute; z-index: 99; } 
a.tooltip-forms:hover span{ display:inline; position:absolute; border:2px solid #FFF; color:#000; background:#fff; } 
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;} /*CSS3 extras*/ 
a.tooltip-forms span { border-radius:2px; box-shadow: 0px 0px 4px 4px #bbb; /*opacity: 0.8;*/ }
a.tooltip-forms span table tr td { border: 1px solid #000 !important; }

a.tooltip-forms-two {outline:none; } 
a.tooltip-forms-two strong {line-height:30px;} 
a.tooltip-forms-two:hover {text-decoration:none;} 
a.tooltip-forms-two span { z-index:10;display:none; padding:14px 20px; margin-top:-120px; margin-left:-165px; width:300px; line-height:16px; position:absolute; z-index: 99; } 
a.tooltip-forms-two:hover span{ display:inline; position:absolute; border:2px solid #FFF; color:#000; background:#fff; } 
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;} /*CSS3 extras*/ 
a.tooltip-forms-two span { border-radius:2px; box-shadow: 0px 0px 4px 4px #bbb; /*opacity: 0.8;*/ }
a.tooltip-forms-two span table tr td { border: 1px solid #000 !important; }


#calculator-form > div > h2 {
	color: #fff;
}

#calculator-form > div > p {
	margin-bottom: 10px;
}

#contributionPopup {
	display: none;
	position: absolute;
	padding: 10px;
	background-color: #333;
	color: #fff;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	z-index: 1000;
	max-width: 300px;
	min-width: 250px;
}

#contributionPopup:before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 20px;
	border-width: 10px;
	border-style: solid;
	border-color: transparent transparent #333 transparent;
}
		
		
#contributionPopupLink {
	cursor: pointer;
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
}

/* end new tooltip styles */

#retirement-planner{
	padding-right: 40px;
}
	#retirement-planner .illustrative-terms{
		font-style: italic;
		margin-bottom: 45px;
		font-size: 12px;
		line-height: initial;
	}
	#retirement-planner > p{
		margin-top: 10px;
	}
	/* Tooltips fix */
	#retirement-planner a.tooltip-forms span{
		margin-top: 0;
	}
		#retirement-planner a.tooltip-forms.right span{
			margin-left: 25px;
		}

#retirement-planner .user-pdf {
	display: flex;
	justify-content: space-between;
	/* margin-top: 45px; */
}
	#retirement-planner .error-pdf,
	#retirement-planner .success-pdf{
		color: red !important;
		padding: 7px 0;
		margin: 0;
		display: none;
	}
	#retirement-planner .success-pdf{
		color: #186829 !important;
		margin-bottom: 40px;
		text-align: center;
		background-color: #D2F7A7;
		padding-top: 20px;
		padding-bottom: 20px;
		font-size: 18px;
	}
	#retirement-planner .user-pdf input[type=text] {
		width: 25%;
		outline-style: none;
		font-size: 13px;
		font-family: arial, sans-serif;
		padding: 7px 10px;
		letter-spacing: normal;
		border: none;
		border-radius: 4px;
		background-color: transparent;
		height: 44px;
		padding: 0 20px;
		font-size: 16px;
		color: #303C42;
		border: 1px solid #B4AFAE;
	}
	#retirement-planner .user-pdf input[type=text]:last-child {
		width: 46%;
	}

/* The FAQs Accordion */
.faqsAccordion h6{
	display: block;
	background-repeat: no-repeat;
	background-position: left 6px;
	margin-top: 15px;
	cursor: pointer;
}
	.faqsAccordion h6:before{
		width: 0;
		height: 0;
		border-bottom: 7px solid transparent;
		border-top: 7px solid transparent;
		border-left: 11px solid #435060;
		font-size: 0;
		line-height: 0;
		content: '\25BC';
		margin-right: 10px;
		top: -6px;
		position: relative;
	}
	.faqsAccordion h6.active:before{
		border-top: 12px solid #435060;
		border-right: 7px solid transparent;
		border-left: 7px solid transparent;
		top: 1px;
		margin-right: 7px;
	}
.faqsAccordion .faqsAccordionContent{
	margin-top:5px;
  	margin-left:20px;
  	padding-right: 20px;
  	display: none;
}


/* Retirement planner form */
#retirement-planner-form {
	margin-top: 20px;
	padding: 20px 0;
	background:#fff;
	overflow: hidden;
}
	#retirement-planner-form > p{
		margin-bottom: 10px;
		color: #b5adab;
		font-style: italic;
	}
	#retirement-planner-form .half-col{
		display: inline-block;
		width: 46%;
		vertical-align: top;
		padding-right: 3%;
	    padding-left: 0;
	    float: left;
	    border-right: 1px solid #b5adab;
	}
	#retirement-planner-form .half-col.right{
		padding-right: 0;
	    padding-left: 3%;
	    border-right: 0;
	}

	#retirement-planner-form h2{
		color: #7d7573;
		font-weight: normal;
	}
	#retirement-planner-form input[type=text],
	#retirement-planner-form input[type=number]{
		width: 100%;
		margin: 0;
		outline-style: none;
	  	font-size: 13px;
	  	font-family: arial, sans-serif;
	  	padding: 7px 10px;
	  	letter-spacing: normal;
	  	/* border-width: 1px;
  		border-style: solid;
		border-color: #7C7C7C #C3C3C3 #DDD; */
		border:none;
  		border-radius: 4px;
	  	background-color: #EEF1EA;
	  	height: 44px;
	}
	#retirement-planner-form .select{
		background: url(../img-dropdown.html) no-repeat right #EEF1EA;
	  	font-size: 13px;
	  	font-family: arial, sans-serif;
	  	letter-spacing: normal;
	  	/* border-width: 1px;
	  	border-style: solid;
	  	border-color: #7C7C7C #C3C3C3 #DDD; */
	  	border-radius: 4px;
	  	overflow: hidden;
	}
		#retirement-planner-form .select select{
			padding: 10px 20px 8px 5%;
			width: 122%;
			background: none;
			border: none;
			height: 44px;
		}
	#retirement-planner-form label{
		margin: 10px 0 4px 0;
		display: inline-block;
		line-height: 1.2em;
		clear: both;
		color: #7d7573;
		height: 36px;
	}
	#retirement-planner-form .field{
		padding: 5px 0 5px 0;
		display: block;
	}
		#retirement-planner-form .field.no-padding{
			padding: 0;
		}
		#retirement-planner-form .field.float-left{
			float: left;
		}
		#retirement-planner-form .field.hideme{
			display: none;
		}
		#retirement-planner-form .field.half-field {
			width: 48%;
			float: left;
			padding-bottom: 10px;
		}
		#retirement-planner-form .field.half-field:last-child {
			float: right;
		}
		#retirement-planner-form .field label{
			font-size: 15px;
		}
		#retirement-planner-form .field .full-label{
			width: 100%;
		}
	#retirement-planner-form #submit{
		vertical-align: bottom;
		/* width: 130px; */
		float: right;
		margin-top: 30px;
		color: #fff;
		background-color: #E36F1E;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
		padding: 12px 40px;
		border: none;
		font-size: 16px;
	}
	#retirement-planner-form #submit:hover {
		color: #E36F1E;
		background-color: #fff;
	}
	#retirement-planner-form .error{
		color: #ff0000;
		margin-top: 5px;
		display: none;
	}
		#retirement-planner-form .error.show{
			display: block;
			margin-bottom: 10px;
		}

/* Retirement planner text */
.retirement-planner-text{
	margin-top: 30px;
}
	.retirement-planner-text .failure{
		display: none;
	}
		.retirement-planner-text .failure p:first-child{
			color: #D9745C;
		}
			.retirement-planner-text .failure p:first-child span{
				color: #D9745C;
			}
	.retirement-planner-text p{
		font-size: 14px;
	}
		.retirement-planner-text p > i{
			font-style: normal;
			color: #8B7A75;
		}
	.retirement-planner-text span{
		font-weight: 700;
		color: #08819F;
		margin:auto 5px;
	}
		.retirement-planner-text span.dark{
			color: #8B7A75;
		}

/* Buttons and modals */
.retirement-planner .link{
	width: 50%;
	float: left;
	margin-bottom: 40px;
    margin-top: 15px;
}
	.retirement-planner .link.link-full{
		width: 100%;
		float: left;
	}
	.retirement-planner .find-out-more,
	.retirement-planner .join-in-minutes,
	.retirement-planner .pdf-download-action{
		overflow: hidden;
		width: 90%;
		border-radius: 5px;
	    height: auto;
	    margin: auto;
	    display: table;
	    padding: 15px 0;
	    text-align: center;
	    color: white;
	    font: 18px;
	    line-height: 20px;
	    font-weight: normal;
	    border: none;
	    cursor: pointer;
	    background-color: #E36F1E;
	    text-decoration: none;
	    -webkit-box-sizing: border-box;
  		-moz-box-sizing: border-box;
  		box-sizing: border-box;
	}
		.retirement-planner .find-out-more:hover,
		.retirement-planner .pdf-download-action:hover{
			background-color: #ab4c36;
		}
		.retirement-planner .pdf-download-action{
			max-width: 350px;
		}
	.retirement-planner .find-out-more,
	.retirement-planner .join-in-minutes{
		width: 50%;
		font-size: 24px;
		font-weight: bold;
		line-height: initial;
	}
	.retirement-planner .join-in-minutes{
		background-color: #129DC0;
		width: 100%;
	}
		.retirement-planner .join-in-minutes:hover{
			background-color: #0f7e9a;
		}


	.retirement-planner .modalBG {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.8);
		z-index: 40000;
		display: none;
	}
	.retirement-planner .modalDialog{
		width: 600px;
	    height: auto;
	    position: fixed;
	    left: 50%;
	    top: 50%;
	    margin-left: -315px;
	    margin-top: -215px;
	    z-index: 41000;
	    background: #fff;
	    display: none;
	    padding: 30px;
	    color: #fff;
	}
		.retirement-planner .closeModal{
			color: #333333;
			position: absolute;
			right: 0;
			top: 0;
			width: 40px;
			text-align: center;
			text-decoration: none;
			font-size: 28px;
			cursor: pointer;
		}
		#increase-contributions ul{
			padding-left: 20px;
		}
		.retirement-planner .modalDialog li{
			margin-bottom: 15px;
			list-style-type: disc;
			list-style-position: outside;
		}
		.retirement-planner .modalDialog h5{
			font-size: 26px;
			line-height: 30px;
		    margin-bottom: 25px;
		    line-height: 27px;
		}
		.retirement-planner .modalDialog h6{
			font-size: 21px;
		}
		.retirement-planner .modalDialog p{
			font-size: 14px;
    		padding-left: 40px;
    		margin-bottom: 3px;
		}
		.retirement-planner .modalDialog p.mb{
			margin-bottom: 15px;
		}
		.retirement-planner .modalDialog p a{
			color: #e6723f;
		}

.weekly-chart-container{ 
	margin-top: 30px;
}
.weekly-chart{
	display: flex;
	margin-top: 20px;;
}
	.weekly-chart h3{
		font-size: 20px;
		margin-bottom: 0;
	}
	.weekly-chart .wc-curr-salary{
		font-size: 30px;
		color: #129DC0 !important;
		font-weight: bold;
	}
	.weekly-chart .wc-first-col{
		flex-basis: 30%;
		align-self: flex-end;
		padding-bottom: 25px;
	}
	.weekly-chart .wc-second-col{
		flex-basis: 70%;
	}
	.weekly-chart table{ 
		margin-bottom: 15px;
	}
	.weekly-chart table thead th{
		font-size: 14px;
		font-weight: bold;
		border-bottom: 1px solid #00ABC4;
		padding: 4px 0;
	}
	.weekly-chart table tbody td{
		font-size: 13px;
		text-align: center;
		padding: 10px;
	}

.page.kiwisaver-retirement h1,
.page.kiwisaver-retirement h2.title,
.page.kiwisaver-retirement .text-wrapper p{
	text-shadow: 1px 1px #000000;
}
.view-assumptions,
.page.kiwisaver-retirement .text-wrapper p a{
	color: #129DC0;
}
	.view-assumptions:hover{
		color: #0f7e9a;
	}
.view-assumptions{
	font-style: normal;
    text-decoration: underline;
}
.page.kiwisaver-retirement .text-wrapper p a,
.page.kiwisaver-retirement .text-wrapper p a:hover{
	color: #fff;
	text-decoration: underline;
}

#retirement-planner-contributions-chart .highcharts-legend-item.highcharts-line-series span{
	overflow: initial !important;
}

[data-tooltip] {
	position: relative;
	z-index: 2;
	cursor: pointer;
  }
  
  /* Hide the tooltip content by default */
  [data-tooltip]:before,
  [data-tooltip]:after {
	visibility: visible;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 1;
  }
  
  /* Position tooltip above the element */
  [data-tooltip]:before {
	position: absolute;
	bottom: 150%;
	left: 50%;
	margin-bottom: 5px;
	margin-left: -80px;
	padding: 7px;
	width: 160px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #fff;
	/* background-color: hsla(0, 0%, 20%, 0.9); */
	color: #000;
	content: attr(data-tooltip);
	text-align: center;
	border: 1px solid #000;
	border-radius: 5px;
	font-size: 14px;
	line-height: 1.2;
  }
  
  /* Triangle hack to make tooltip look like a speech bubble */
  [data-tooltip]:after {
	position: absolute;
	bottom: 150%;
	left: 50%;
	margin-left: -5px;
	width: 0;
	border-top: 5px solid #000;
	border-top: 5px solid hsla(0, 0%, 20%, 0.9);
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	content: " ";
	font-size: 0;
	line-height: 0;
  }

.assumptions-table{
	width: 100%;
}
.assumptions-table thead th,
.assumptions-table tbody td{
	font-size: 13px;
	border-right: 1px solid #00ABC4;
	padding: 4px 0;
	text-align: center;
	font-weight: 500;
}
	.assumptions-table thead th:first-child,
	.assumptions-table tbody td:first-child{
		text-align: left;
	}
	.assumptions-table thead th:last-child,
	.assumptions-table tbody td:last-child{
		border-right: none;
	}
.assumptions-table thead th b,
.assumptions-table tbody td b{
	font-size: 14px;
	font-weight: bold;
	text-align: left;
}

/* Summary table */
#summary-table,
#weekly-contributions-table{
	width: 100%;
	margin-bottom: 30px;
}
	#summary-table thead th{
		width: 35%;
		padding: 5px 10px;
		background: #303c42;
		text-align: center;
		font-size: 14px;
	}
	#summary-table thead th,
	#summary-table thead th label {
		color: #ffffff !important;
	}
		#summary-table thead th:first-child {
			background: none;
			border: none;
			width: 36%;
		}
		#summary-table tbody tr th{
			padding: 10px;
			font-size: 14px;
			background: #303c42;
			color: #fff !important;
			text-align: center;
		}
		#summary-table tbody tr td{
			color: #08819F;
			text-align: center;
			border: 1px solid #303c42;
		}
		#summary-table thead img{
			position: relative;
			top: 3px;
		}
		#summary-table .lump-sum-after-inflation,
		#summary-table .starting-bold{
			font-weight: bold;
		}
		#summary-table .per-annum{
			line-height: 1.2;
			padding-top: 8px;
			padding-bottom: 8px;
		}

#retirement-planner-contributions-chart-PDF{
	display: none;
}

#weekly-contributions-table th,
#weekly-contributions-table td{
	background-color: #b4afae;
	color: #404040;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	padding: 15px 0;
}
#weekly-contributions-table th:first-child,
#weekly-contributions-table td:first-child{
	background-color: #eae9e5;
	font-size: 18px;
}

/* Retirement planner chart */
#retirement-planner-chart {
	width: 100%;
	margin-top: 10px;
	padding: 20px 0;
}

#retirement-planner-assumptions p{
	margin-bottom: 10px;
}

/* DISCLAIMER */
#retirement-planner #calculator-form{
	float: left;
	display: none;
}
#retirement-planner.accepted #calculator-form{
	display: block;
	float: inherit;
}
#retirement-planner .disclaimer{
	float: left;
}
#retirement-planner.accepted .disclaimer{
	display: none;
}
	#retirement-planner .disclaimer .accept{
		background-color: #EAE9E5;
	    padding: 20px;
	    margin-top: 30px;
	}
		#retirement-planner .disclaimer .accept p{
			color: #69615f;
    		margin-bottom: 15px;
		}
		#retirement-planner .disclaimer .accept .understand label {
		    font-weight: 700;
		    padding: 20px 15px;
		    cursor: pointer;
		}
		#retirement-planner .disclaimer .button.next {
		    float: right;
		}
		#retirement-planner .disclaimer .button.disabled {
		    opacity: .2;
		    cursor: default;
		}
		#retirement-planner .disclaimer .button {
		    background: #E36F1E;
		    border: none;
		    padding: 10px 15px 10px 40px;
		    color: #fff;
		    float: left;
		    cursor: pointer;
		    margin-top: 30px;
		}
		#retirement-planner .disclaimer .button::after{
			content: '>';
			margin-left: 15px;
		}

/* Helper classes */
.clear{
	clear:both;
}
.hidden{
	display: none;
}
#content .pie .center{
	text-align: center;
}
.page.kiwisaver-retirement #top.zindex {
	position: relative;
	z-index: 9999;
}

/* Media queries*/
@media only screen and (max-width : 768px) {
	.page.kiwisaver-retirement #top{
		background-size: auto;
	}
	#retirement-planner-form label{
		display: inline;
	}
	.page.kiwisaver-retirement .plugin .tool #retirement-planner #retirement-planner-form .half-col{
		padding: 0;
		margin-bottom: 0;
	}
	#retirement-planner-form .half-col.right h2{
		display: none;
	}
	#retirement-planner-form input[type=text],
	#retirement-planner-form input[type=number]{
		padding: 0 20px;
		font-size: 16px;
	}
	#retirement-planner-form #submit{
		font-size: 18px;
	}
}
@media only screen and (max-width : 650px) {
#retirement-planner{
	padding-right: 0;
}
	#retirement-planner-form .half-col{
		width: 98%;
		margin-bottom: 20px;
	}
	#retirement-planner a.tooltip-forms.right span{
		margin-left: -160px;
	}
	.retirement-planner .link{
		width: 50%;
		margin-bottom: 25px;
    	margin-top: 0px;
	}
		.retirement-planner .link.link-full{
			width: 100%;
		}
	.page.kiwisaver-retirement .plugin .tool #retirement-planner .retirement-planner h2, 
	.page.kiwisaver-retirement .plugin .tool #retirement-planner .retirement-planner p, 
	.page.kiwisaver-retirement .plugin .tool #retirement-planner .retirement-planner .text-wrapper.normal, 
	.page.kiwisaver-retirement .plugin .tool #retirement-planner .retirement-planner td, 
	.page.kiwisaver-retirement .plugin .tool #retirement-planner .retirement-planner th, 
	.page.kiwisaver-retirement .plugin .tool #retirement-planner .retirement-planner label{
		font-size: 13px;
	}
	.retirement-planner .modalDialog{
		width: 100%;
		transform: translate(-50%, -50%);
		margin: 0;
		padding: 20px;
	}
	.retirement-planner .modalDialog h5{
		font-size: 22px;
		margin: 0;
	}
	.retirement-planner .modalDialog h6{
		font-size: 16px;
	}
	#increase-contributions ul{
		padding-left: 0;
	}
	.retirement-planner .modalDialog p{
		padding-left: 15px;
	}
	#retirement-planner .user-pdf{
		display: block;
		margin-bottom: 20px;
	}
	#retirement-planner .user-pdf input[type=text],
	#retirement-planner .user-pdf input[type=text]:last-child{
		width: 100%;
		margin-bottom: 10px;
	}
	.retirement-planner .pdf-download-action{
		max-width: 100%;
		width: 100%;
	}
}
/*@media (max-width: 500px) {
	
}*/

.highcharts-exporting-group {
	display: none;
}

@media (max-width: 1024px) {
	#retirement-planner a.tooltip-forms span {
		margin-top: -280px;
		margin-left: auto;
		left: 10px;
	}
}