/*=========================================================================================================
	Fonts
  =========================================================================================================*/
@font-face {
    font-family: "PN-Regular";
    src: url('../fonts/ProximaNova-Regular.otf') format('opentype');
}

@font-face {
    font-family: "PN-Bold";
    src: url('../fonts/ProximaNova-Bold.otf') format('opentype');
}

@font-face {
    font-family: "PN-BoldIt";
    src: url('../fonts/ProximaNova-BoldIt.otf') format('opentype');
}

@font-face {
    font-family: "PN-Light";
    src: url('../fonts/ProximaNova-Light.otf') format('opentype');
}

@font-face {
    font-family: "PN-Semibold";
    src: url('../fonts/ProximaNova-Semibold.otf') format('opentype');
}

/* Deletion class during updates. [MS - 07/26/2018] */
.toBeDeleted {
	color: #999;
	text-decoration: line-through solid #000;
	display: none;
}
/* End of deletion class. */

/** DEBUGGING INFO WHEN USING ?DEBUG=1 **/
.debugging {display: none;}
.debugging2 {display: none;}
.debuggingMode .debugging {display: block;}
.debuggingMode span.debugging {display: inline;}
.debuggingMode .notDebugging {display: none;}
.dimmed {opacity: 0.75;}
.dimmed:hover {opacity: 1;}
.dimmed2 {opacity: 0.2;}
.dimmed2:hover {opacity: 1;}
.printOnly {display: none;}

#sampleUsersButton {background: #eee;color: #666;width: 10px;}
.IEDetected {}
.oldBrowserMessage{display: none;max-width: 800px !important;text-align: center;margin: auto;}
.IEDetected .oldBrowserMessage{ display: block; padding: 3rem 3rem 30rem 3rem; text-align:left;}
.IEDetected .newBrowserPanel {display: none !important;}
.IEDetected #pageBody #mainNavigation {display: none !important;}
.IEDetected #pageBody .tabs-content {display: none !important;}

/** ENGLISH AND FRENCH TRANSLATION **/
[data-lang=en], [data-lang=fr] {display: none !important; }
option[data-lang=en], option[data-lang=fr] {/*display: none !important; color: red; */}
[data-lang=en] { }
[data-lang=fr] {}
.en [data-lang=en] {display: block !important; }
.en span[data-lang=en], .en .inline[data-lang=en] {display: inline !important; opacity:1;  transition: all 0s;}
.fr [data-lang=fr] {display: block !important; }
.fr span[data-lang=fr], .fr .inline[data-lang=fr] {display: inline !important; opacity: 1;  transition: all 0s;}


/** DEBUGGING ALL CONTENT FOR TRANSLATION**/
.allContent > * {color:red !important; }
.allContent [data-lang=en], .allContent [data-lang=fr] {display: block !important; }
.allContent [data-lang=en] {background:#DFD; color: black !important;}
.allContent [data-lang=fr] {background: #DDF;  color: black !important;}
.allContent [data-lang=en]:hover {border: 1px solid green;}
.allContent [data-lang=fr]:hover {border: 1px solid blue;}
.allContent .tabs-panel {display: block !important;} /*Shows all the tab panels*/
.allContent .reveal-overlay {display: block;background: none;overflow-y: visible;position: relative;} /*Shows all the modals */
.allContent .reveal {display: block;background: none;overflow-y: visible;position: relative;width: 100%;}
.allContent .accordion-content {display: block;}

body.noContent {}
body.noContent [data-lang=en], .noContent [data-lang=fr]{display: none !important;}
.noContent .tabs-panel {display: block !important;} /*Shows all the tab panels*/
.noContent .reveal-overlay {display: block;background: none;overflow-y: visible;position: relative;} /*Shows all the modals */
.noContent .reveal {display: block;background: none;overflow-y: visible;position: relative;width: 100%;}
.noContent .accordion-content {display: block;}

/** HIGH LEVEL STYLES **/
html {height: 100%;}
body {
	font-family: "PN-Regular", Helvetica, Arial, sans-serif;
	background-color: #FFFFFF;
	color: #333333;
	border: none;
	padding: 0;
	margin: auto;
	width: 100%;
	height: 100%;
}
body {font-size: 14px;}
@media(max-width: 64rem) {body {font-size: 14px;}}
@media(max-width: 40rem) {body {font-size: 13px;}}

#pageDebugging {
	font-size: 0.85; border:1px solid grey;
	background-color: #EEE; padding-left: 1rem;
}

#pageHeader {
	border-radius: 0;
	margin: 0;
}

#pageFooter {
	box-shadow: none;
	padding: 0px 5px 0px 5px;
	margin-top: 12px;
	text-align: left;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "PN-Regular", Helvetica, Arial, sans-serif;
	color: #333;
}
b, strong {font-weight: normal; font-family: "PN-Bold"}

/**/
h1 {font-size: 1.75rem;}
h2 {font-size: 1.50rem;}
h3 {font-size: 1.25rem;}
h4 {font-size: 1.10rem;}
h5 {font-size: 1.00rem;}
h6 {font-size: 0.90rem;}

@media(max-width:40rem) {
	h1 {font-size: 1.40rem;}
	h2 {font-size: 1.30rem;}
	h3 {font-size: 1.20rem;}
	h4 {font-size: 1.10rem;}
	h5 {font-size: 1.00rem;}
	h6 {font-size: 0.90rem;}
}
.reveal h1 {line-height:1.7rem;}
.reveal h2 {line-height:1.5rem;}
.reveal h3 {line-height:1.7rem;}

#step0 h1 {margin-top: 1rem;}

/*MS - Adding styles to override Foundation for tables */
table {border-collapse: inherit; border:1px solid #ccc;}

/*=========================================================================================================
/* Overrides of some Bootstrap styles
	=========================================================================================================*/

.container, .container-fluid {
	margin-bottom: 10px;
	background-color: inherit;
	max-width: 1170px;
	margin: auto;
}


/*=========================================================================================================
Page header: Includes the logo, title, and top menu.
	=========================================================================================================*/

#pageHeader {
	background-position: right center;
}
@media(max-width: 40rem) {#pageHeader {background: none;}}

#logoAndToolName, #topMenu {
	height: 68px;
	display: table;
}

.reveal #logoAndToolName {display: none;}

#logoContainer {
	display: table-cell;
	vertical-align: middle;
	width: 100px;
	padding: 1rem 1rem 8px 6px;
	text-align: left;
}
@media(max-width: 40rem) {#logoContainer{display: table-row;/* width: 200px; */text-align: center;}}

#logo {
	max-width: 300px;
	padding-left: 1rem;
	/* border-right: 2px solid #0066a1; */
}
@media(max-width: 64rem) {#logo{max-width: 200px;}}
@media(max-width: 40rem) {#logo{max-width: 200px;border-right: none;}}
@media(max-width: 400px) {#logo{max-width: 300px; border-right: none;}}

/*MS - Added styles for first language select page. */
#logoContainerHome {
	display: table-cell;
	vertical-align: middle;
	/* width: 400px; */
	padding: 10px 16px 8px 6px;
	text-align: left;
}

#logoContainerHome #logoen {
	width: 400px;
	padding-right: 15px;
	border-right: 2px solid #0066a1;
}

#logoContainerHome #logofr {
	width: 400px;
	padding-left: 15px;
}

@media(max-width:40em) {
	#pageHeader {
		background-position: center center;
	}

	#logoAndToolName {
		/* padding: 10px 5px; */
	}

	#logoContainerHome {
		padding: 0;
		width: 100%;

	}
}


/* 420px and below */
@media(max-width:40em) {
	#pageHeader {
		background-position: center center;
	}

	#logoContainerHome #logoen {
		width: 49%;
		padding-right: 17px;
		border-right: 2px solid #0066a1;
	}

	#logoContainerHome #logofr {
		width: 49%;
		padding-left: 17px;
	}
}

#toolName {
	color: #0A6EAD;
	font-family: "PN-Light", Helvetica, Arial, sans-serif;
	padding: 0 0 2px;
	display: table-cell;
	vertical-align: middle;
	text-align: left;
	line-height: 1.2rem;
}
@media(max-width: 40rem) {#toolName{display: block;text-align: center;background: none !important;padding: 0.5rem 0rem 0.5rem .5rem;border-top: 0px solid #0366a0;background: none;}}

#toolName1 {
	color: #0365A2;
	font-size: 1.6rem;
	/* letter-spacing: 2px; */
	line-height: 1.3;
	font-family: "ProximaNova", Helvetica, Arial, sans-serif;
	font-weight: 700;
}

@media(max-width:64em) {
	#toolName1 {
		font-size: 1.1rem;
		color: #333;
		text-shadow: 1px 1px 5px #FFF;
	}
}
@media(max-width:40em) {
	#toolName1 {
		font-size: 1rem;
		color: #333;
		text-shadow: 1px 1px 5px #FFF;
		display: inline;
	}
}

#toolName2 {
	color: #0365A2;
	font-size: 1.2rem;
	line-height: 1.2rem;

}
@media(max-width:64em) {
	#toolName2 {
		font-size: 1.0rem;
		color: #333;
		text-shadow: 1px 1px 5px #FFF;
	}
}
@media(max-width:40em) {
	#toolName2 {
		font-size: 0.8rem;
		/*MS - Added below due to new banner image.*/
		display: block;
		}
}

#toolName2 { }
#toolName3 {display: none;}

#debugLinks {
	/* vertical-align: middle; */
	/* text-align: right; */
	padding: 0.3rem 0.3rem;
	margin-top: -30px;
	position: fixed;
	bottom: 1rem;
	/* right: 1rem; */
	left: 50%;
	opacity: 0%;
	width: 20px;
	height: 20px;
	overflow: hidden;
}
.debuggingMode #debugLinks:hover {opacity: 100%; background: #eee; width: inherit; overflow: inherit;}
@media(max-width: 64rem) {#debugLinks .printLink{
    display: none;
}}
#debugLinks .dropdown-pane {opacity: 0.5;background: white;width: 600px;}

#debugLinks a:link, #debugLinks a:visited, #debugLinks a:hover, #debugLinks a:active {
	color: inherit;
	margin: 0rem;
	padding: 0rem 0.25rem 0rem 0.5rem;
	border-left: 0px solid hsl(209, 88%, 29%);
}
@media(max-width: 64rem) {#debugLinks a:link {color: inherit; }}
#debugLinks a:hover, #debugLinks a:active {opacity: 0.8;}
#debugLinks .dropdown-pane a:link,
#debugLinks .dropdown-pane a:visited
{color: #258dad !important;/* display:block; *//* text-align: left; */padding: 0.2rem;/* border: 1px solid blue; *//* margin: 0.3rem; */text-align: left;float: left;}
#debugLinks .dropdown-pane a:hover,
#debugLinks .dropdown-pane a:active
{color: red !important;}
#example-dropdown-debug {width: 400px;}

#pageHeader #topMenu a {
	color: #0A6EAD;
	font-weight: 500;
	cursor: pointer;
}

#languagePicker2 {
}
@media(max-width: 40rem) {#languagePicker2 {background: none;padding: 0rem 1rem;}}

/*MS - Added this to space out the language selection copy on mobile. */
@media(max-width: 40rem) {
	#languagePicker2 .column {
		margin-bottom: 35px;
	}
}

.noWrap {white-space: nowrap;}

.button {
	border-radius: 4px;
	border: 1px solid rgba(255,255,255,0.5);
}
/*MS - Created .homeButton and the link state styles below to match new design. */
.homeButton {
	background-color: #00A460;
	border-radius: 4px;
	border: 3px solid #00A460;
	color: rgba(255,255,255,0.9);
	font-weight: bold;
	padding: 1rem 2rem;
	margin: auto;
	display: block;
	text-align: center;
}

a.homeButton:hover,
a.homeButton:active,
a.homeButton:focus {
	background-color: #FFF;
	color: #333;
}

.question-row{}
.question-row-striped{background-color: #F6F6F6;}


.aTable {border-spacing: 10px;}	/*border-collapse: seperate allows spacing between td cells*/

.printDivider {height: 5px;}

.buttonAlignment {
	text-align: right;
	margin-top: 1rem;
	border-top: 1px solid #CCC;
	padding-top: 1rem;
}

.buttonAlignment button {
	margin-left: 5px;
}

.bottomNavLinks {margin-top:0rem;padding-top: 0.2rem;/* border: 1px solid #C00; */}
.bottomNavLinks .bottomNavLinks_left {text-align:left; padding-left: 0px;}
.bottomNavLinks_left a{/* display: none; */}
@media(max-width:40rem) {.bottomNavLinks_left a {display: inline-block;} }
.bottomNavLinks .bottomNavLinks_right {text-align:right;}
@media(max-width:40rem) {.bottomNavLinks_right .button{margin:0rem 0rem 0rem 0.3rem}}
.text-center .bottomNavLinks_left {text-align:center;}

.bottomNavLinks .button {background-color: #2ba6cb; border:1px solid rgba(255,255,255,0.5);}
.bottomNavLinks .button-primary {background-color: rgba(114, 190, 68, 1);}
.bottomNavLinks a:hover {opacity: 0.9;}

.noMobile {}
@media(max-width: 40em) {.noMobile {display: none;}}
.mobileOnly {display: none;}
@media(max-width: 40em) {.mobileOnly {display: block;}}

.disclaimerBox{
	background: #F6f6f6;
	background: #FFFFCC;
	border:#CCCCCC 1px solid;
	border-image:none;
	height:150px;
	overflow-y:scroll;
	padding:0.5rem 1rem;
	margin-bottom: 1rem;
}
.disclaimerBox#disclaimerBox_onScreen:hover, 
.disclaimerBox#disclaimerBox_onScreen:focus {
	border:#2ba6cb 3px solid;
}
.disclaimerBox#disclaimerBox_onScreen h4 {
	display:none;
}
.disclaimerPanel {
	margin: 10px auto; width: 50%;min-width: 400px;
}

/* Custom checkbox to be bigger and bluer */
.checkboxWrapper {
	display: block;
	position: relative;
	padding-left: 35px;
	padding-left: 30px;
	margin-bottom: 12px;
	cursor: pointer;
	/* font-size: 22px; */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
  }
  
  /* Hide the browser's default checkbox */
  .checkboxWrapper input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
  }
  
  /* Create a custom checkbox */
  .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	height: 21px;
	width: 21px;
	background-color: #eee;
	border:1px solid #CCC;
	border-radius: 4px; 
  }
  
  /* On mouse-over, add a grey background color */
  .checkboxWrapper:hover input ~ .checkmark {
	background-color: #ccc;
	background: hsla(208, 100%, 92%, 1) !important;
	border: 1px solid #3399DD;
  }
  
  /* When the checkbox is checked, add a blue background */
  .checkboxWrapper input:checked ~ .checkmark {
	background-color: #2196F3;
	/* background: hsla(208, 100%, 92%, 1) !important;
	background: #0078b3 !important; */
	background: hsla(208, 100%, 92%, 1) !important;
    border: 1px solid #2ba6cb;
    border-color: #0078b3 !important;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
	content: "";
	position: absolute;
	display: none;
  }
  
  /* Show the checkmark when checked */
  .checkboxWrapper input:checked ~ .checkmark:after {
	display: block;
  }
  
  /* Style the checkmark/indicator */
  .checkboxWrapper .checkmark:after {
	left: 9px;
	left: 7px;
	top: 5px;
	top: 4px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
	border-color: #0078b3 !important;
  }

.resultDivWrapper {
	margin-left: 0px;
}

.resultsTable {
	border-collapse: collapse;
}

.resultsTable th {
	border: 1px solid #000;
	padding: 5px;
	text-align: center;
}

.resultsTable td {
	/* border: 1px solid #000; */
	padding: 5px;
}

.resultsRox {
	/* padding-left:15px; */
	border-bottom: 1px dotted #999;
	width: 100%;
}


/* ----- Hide the various section steps ----- */

.stepHide {
	display: none;
}

/* ----- The section map just below the page header. The section map has images, and titles. ----- */

.sectionMapRow {
	border-radius: 0;
	padding: 8px 0 10px 0;
	margin-left: 26px;
	margin-right: 26px;
}

.sectionMapTable {
	margin: -0rem 0.1rem 0rem 0rem;
	/*MS - Lowering the max-width to make the navigation smaller as per request.
	max-width: 600px;*/
	max-width: 450px;
	float: right;
}
@media(max-width:64rem) {.sectionMapTable {margin: 0.5rem 0.1rem 0.5rem 0rem; max-width: 500px}}
@media(max-width:40rem) {.sectionMapTable {max-width: 100%;}}
.sectionMapTable tbody{	border: none;}
.sectionMapTable tr td {	text-align: center;	vertical-align: middle;	padding: 0;}
.sectionMapTable tr.images td {padding: 0 0 8px 0;background-color: inherit;/* border: 1px solid red; */}
.sectionMapTable tr.images td.sectionIntro.track img {	width: 35px;}  /*first image*/

.sectionMapTable img {
  opacity: 0.2;
  /* filter: grayscale(100%); */
  text-align: center;
  display: inline;
}
.trackImg {max-height: 100px;display: none !important;}
@media(max-width: 64rem) {.trackImg { max-height: 70px; }}
.stepIconImg {width: 100%;}
.stepIconImg:hover {	opacity: 0.8; filter: none; cursor:pointer;}
.selected .stepIconImg {	opacity: 1.0; filter: none;}
@media(max-width: 40rem) {.track:nth-child(2n){display: none;}}



/* =======================================================================================================================
/* The slide area below the section map. Contains the potential summary panel, the slides, and the bottom buttons.
/* =======================================================================================================================*/
#wizardBody {margin-top: -10rem;}

.slideArea {
}
.step-accordion-content {margin-top: -1px; border: solid 10px #666; border-top-width: 20px; padding: 1rem 2rem 1rem 2rem;}
.step-accordion-content {
	border: solid 0px #fff;
	background-position: top center;
	background-size: 100%;
	background-repeat: no-repeat;
	background-origin: border-box;
	background-size: cover; /*contain*/
	padding: 0rem 0rem 0rem 0rem;
}
@media(max-width: 64rem) {.step-accordion-content {
	padding: 0rem;
}}
@media(max-width: 40rem) {.step-accordion-content {
	padding: 0rem;
}}


#step0 {
	background-position-x: left;
	background-position-y: bottom;
	/* background-image: none; */
	}
#step1 {
	background-image: url(../img/bg/bg_woman_1000px.jpg?v=1);
	background-position-x: right;
	background-position-y: bottom;
	background-image: none;
	}
#step2 {
	background-image: url(../img/bg/bg_man_1000px.jpg?v=1);
	background-position-x: right;
	background-position-y: bottom;
	background-image: none;
	}

@media(max-width: 40em) {
	#step0 {padding-bottom: inherit; }
#step0,
#step1,
#step2 {background-image:none;/* background-color: aliceblue; */}
}

#mainNavigation {margin: 0.5rem 0rem 0.5rem 0rem;border: 0px;margin: auto;/* text-align: center; */}
@media(max-width: 64rem) {#mainNavigation {margin: 1rem 0rem 0rem 0rem;}}

#mainNavigation li {
    text-align: left;
    /* float: none; */
    width: inherit;
}

.notReady #mainNavigation .step-label {opacity: 0;}
#mainNavigation .step-label {color: #FFF;margin: 0rem 1rem 0rem 0rem;font-size: 1rem;outline: 0px;opacity: 0.5;border-radius: 5px 5px 5px 5px;padding: 1rem 1rem;display: inline-block;min-width: 150px; transition: opacity 0.5s;}
#mainNavigation .step-label > span{padding: 1rem 2rem;}
#mainNavigation .step-label .step-label-1{padding: 0rem 0rem 0rem 3rem;display: block;}
#mainNavigation .step-label .step-label-2{padding: 0rem 0rem 0rem 3rem;display:block;}
@media(max-width: 64rem) {
	#mainNavigation .step-label {margin: 2px 0.1rem 0px 0.3rem;font-size: 0.9rem;min-width: 110px;}
	#mainNavigation .step-label > span{padding: 0.17rem 0.1rem;}
}
@media(max-width: 40rem) {
	#mainNavigation .step-label {border-radius: 0px 0px 0px 0px;margin: 2px 1rem 0px 0rem;opacity: 0.9;font-size:1rem;width: 100%;}
	#mainNavigation .step-label span {}
}
#mainNavigation .step-label:hover {opacity: 1;}
#mainNavigation .is-active .step-label {opacity: 1;}
#step0-label {background:  hsl(194, 65%, 48%); }
#step1-label {background: hsl(194, 65%, 48%);}
#step2-label {background:  hsl(194, 65%, 48%);}
#step3-label {background:  #aebd37; }
#step4-label {background:  #fdb71f; }

#mainNavigation .step-label .fa{font-size: 2rem;float: left;/* position: absolute; *//* top: 30px; *//* margin-left: 1rem; */}

.step-label.hidden {display: none;}

.tabs-panel {opacity: 0.1;transition: 0.3s all;min-height: 300px;}
.tabs-panel.is-active {opacity:1; transition: 0.3s all;}


/*=========================================================================================================
	Responsive adjustments for specific mobile screen resolutions (tablets, phones, etc.)
  =========================================================================================================*/

/*64rem = 1024px*/
/*40rem = 640px */

@media(max-width: 64rem) {

	#pageHeader {
		margin: 0;
		background-position: left center;
	}
	#pageFooter {margin: 1rem;}

	#logoAndToolName img {
		margin-bottom: 2px;
	}

	#logoAndToolName img {
		margin-bottom: 2px;
	}

	.sectionMapRow {
		padding: 5px 0 0 0;
		margin: 0 16px;
	}

	.slideArea {
		width: 100%;
		float: inherit;
		display: inherit;
		vertical-align: inherit;
		line-height: inherit;
	}

}


@media(max-width: 40rem) {
	#logoAndToolName img {
		margin-bottom: 1rem;
	}
}



/*******************************************************************************************************************/

label input[type="checkbox"] ~ i.fa.fa-square-o{
    color: #c8c8c8;    display: inline;
}
label input[type="checkbox"] ~ i.fa.fa-check-square-o{
    display: none;
}
label input[type="checkbox"]:checked ~ i.fa.fa-square-o{
    display: none;
}
label input[type="checkbox"]:checked ~ i.fa.fa-check-square-o{
    color: #7AA3CC;    display: inline;
}
label:hover input[type="checkbox"] ~ i.fa {
color: #7AA3CC;
}

div[data-toggle="buttons"] label:active, div[data-toggle="buttons"] label.active {
-webkit-box-shadow: none;
box-shadow: none;
}

/*******************************************************************************************************************/

.fieldset {/* margin-right: 1rem; */}
@media(max-width:40rem) {.fieldset { margin-right: 0rem;}}
.fieldset legend {font-size: 1.0rem; font-weight:normal; font-family: "PN-Bold"; color: #555; background-color: none;}
.step2Area .fieldset {margin-right: 2rem;}
@media(max-width: 64rem) {.step2Area .fieldset {margin-right: 1rem;}}
@media(max-width: 40rem) {.step2Area .fieldset {margin-right: 0rem;}}

.warningBox {
	border: 1px solid #00A8C8;
	background-color: #FFE;
	margin: 1rem 0rem 1rem 2rem;
	padding: 1rem;
}
@media(max-width: 64rem) {.warningBox {margin: 1rem 0rem;}}

.close {float:right; font-size: 2rem;}

.tooltip {/* min-width: 200px; */}


.disclaimerChoices {/* margin-left: 2rem; */margin: 2rem 2rem 1rem 2rem;/* width: 50%; */background-color: #f6f6f6 !important;}
@media(max-width: 64rem) {.disclaimerChoices {width: 90%; margin: 0rem 1rem 1rem 1rem;}}
.disclaimerChoice {padding: 1rem 0rem 0.1rem 1rem;/* margin-left: 1rem; */}

.disclaimerChoices:hover .magic-radio + label  {color:#000;}
.magic-radio + label  {margin-left: 0px; padding-left: 30px; color: #777;}
.disclaimerChoices:hover .magic-radio + label:hover {color: #3e97eb;}
.disclaimerChoices:hover .magic-radio + label.selected {color: #3e97eb;}

.errorMessage {color: #900;background: #FFC;padding:5px;font-weight:normal; font-family: "PN-Bold";border: 1px solid #900;font-variant: normal;}
.visibleErrorMessage {display: block !important;}



/**/
.ui-slider {
	float: left;
	display: inline-block;
	width:calc(100% - 7rem);
	margin: 0.5rem 1.0rem 0rem 0rem;
	box-shadow: inset 0 4px 4px rgba(0,0,0,.125);
	height: 0.4em !important;
}
.ui-slider .ui-slider-range {z-index: inherit;background: #16c3f7c2;} /*prevents sliders appearing above modal*/
.ui-slider .ui-slider-handle {z-index: inherit;height: 2.4rem;margin-top: -2px;width: 1.1em !important;}
.ui-slider .ui-slider-handle {background: #37bae2 !important;border:1px solid #19c !important;border-radius: 15px;}
.ui-slider .ui-state-active {background: #19c !important;}
.callout .ui-slider {margin-bottom: 1rem;}
:focus {
  outline: none;
}

/*minor UI improvements so that selectable date appears clickable and disabled date is greyed out*/
.ui-datepicker-calendar a.ui-state-hover{
    border: 1px solid #003eff;
    background: hsla(208, 100%, 92%, 1) !important;
    color: #003eff;
}
.ui-datepicker-calendar td.ui-datepicker-unselectable.ui-state-disabled span {
    border: 1px solid #999;
    background: #ccc;
    color: #999;
}

.callout.alert {
    background-image: url("../img/pink.png");
}
.callout.alert .calloutAlertBG {display: none;}

select, [type='text'] {border-radius: 4px; font-size:inherit;}
select {
	font-size: 1em;
	width: 5rem;
	margin: 0rem 0rem 0.8rem 0rem;
	padding: 4px 20px 4px 8px;
	height: 2.0rem;
	display: inline-block;
	font-family: sans-serif;
}

.noMarginBottom {margin-bottom: 0rem;}

label {font-size: inherit;line-height: 1.4rem;font-weight:normal;/* font-family: "PN-Bold"; */margin-right: 0.5rem;margin-bottom: 1rem;}
@media(max-width:40rem) {label {margin-bottom:0rem;}}
label.marginBottom0 {margin-bottom: 0rem;}
#step1 label {/* border-bottom: 1px solid #97b7f1; */}
.dropdown-pane {font-size: 0.9rem;background: #ffd;}
#dropdown-children {width: 500px; z-index: 999999; line-height: 1.25rem;}
@media(max-width:40rem) {#dropdown-children {width:inherit;}}

.labelForRadio {padding: 0.2rem 0.4rem;display: block;background:inherit;margin-bottom: 0rem;line-height: 1.2;font-weight: normal;min-width: 2re,}
.labelForRadio:hover {font-weight:normal; font-family: "PN-Bold"; cursor:pointer;}
.labelForRadio [type="radio"] {margin-bottom: 0rem;/* display: none; */}
input[type="radio"]+span{opacity: 0.8;}
input[type="radio"]:checked+span{font-weight: normal;font-family:"PN-Bold";opacity: 1;/* background: #ffc; */color: #0078b3;}

.labelForRadio input[type="text"] {color: #ccc;display:inline-block;margin-bottom: 0rem;visibility: hidden;padding-top: 0px;padding-bottom: 0px;height: 2rem;margin-left: 0.5rem;background: #fff !important;}
.labelForRadio input[type="text"].hasDatepicker {color: red; display:none !important;}
.labelForRadio input[type="radio"]:checked+span input[type="text"] {color: #444;display:inline-block;margin-bottom: 0rem;visibility:visible;/* font-family: "PN-Regular"; */}

.labelForRadio:hover input[type="text"] {opacity: 0.5; display:inline-block; visibility:visible;}
.labelForRadio:hover input[type="radio"]:checked+span input[type="text"] {opacity: 1; }

.radioButton {
	margin: 0px 0px;
	display: inline-block !important;
	padding: 0rem 0.65rem 0rem 0.65rem;
	border: 1px solid #CCC;
	border-radius: 3px;
	cursor: pointer;
	background: #f6f6f6;
	margin: 1px;
	min-height: 2rem;
	line-height: 2rem;
}
.radioButton:hover {border:1px solid #3399DD;background: #DEF;margin: 0px;color: #0078b3;}
.radioButton input {		display: none;}
.radioButton i {/* color: #666; */}
.radioButton:hover i {color: #0078b3;}
.radioButton.selected i {color: #0078b3;}




input {font-weight:normal;}
.subhead {display: block;font-weight: normal;}
.smallElement {width: 90px;}
.smallishElement {width: 110px;}
.mediumElement {width: 150px;}
.largeElement {width: 225px;}
.visitedElement, .retDateTypeUISelected .button {
	background: hsla(208, 100%, 92%, 1) !important;
	border: 1px solid #2ba6cb;
	color: #0078b3 !important;
}
.callout .visitedElement {/* background: white !important; */}

select:hover, input[type="text"]:hover, select:focus {
	border:1px solid #3399DD;
}

.contTypePanel input {margin-bottom: 0rem;}


.hiddenPanel {height:0; }
.hiddenPanel.is-active {height: inherit;  transition: all 0.3s;}

.errorMsg {}
.errorMsg label{color: red; }
.errorMsg label::after{content: ""; }


:not(:focus).textInputErrorMessage { background-color:#FDD; border:1px solid #900}
/*
@media(max-width: 64rem) {body {background: #FEE;}}
@media(max-width: 40rem) {body {background: #EEF;}}
*/

.results_leftCol {position:relative;}
.results_rightCol {/* background: #f6f6f6; *//* padding: 1rem; *//* border: 1px solid #2ba6cb; *//* background: aliceblue; */}
.contTypePanel {padding: 0.50rem 0.0rem 0.5rem 0.0rem;border-bottom: 1px solid #eee;border-top: 1px solid #eee;margin-bottom: 1rem;}

.personalities {/* border:1px solid #666; */padding: 1rem;background-color: #EFF;margin-bottom: 1rem;}
@media(max-width:64rem) {.personalities {padding:1rem}}
.personalities_block {}

.disabledAge {color: #999;cursor: not-allowed;/* display: none; */}
.disabledAge .dorWrapper {display: none;}

.personalities_options {}
.personalities_options tbody {background-color: transparent;border: 0px;}
.personalities_options td {vertical-align: top; padding: 1rem; width: 50%; background-color: #FFF; border:1px solid #CCC;}
@media(max-width: 40rem) {.personalities_options td {display: block; margin-bottom:1rem; width: 100%;}}
td.personalities_option1 {/*background-color: pink;*/}
td.personalities_option2 {background-color: #EFF; width: 0px; padding:15px;border:0px;}
@media(max-width: 40rem) {td.personalities_option2 {display: none;}}
td.personalities_option3 {/*background-color: pink;*/}

#results_room {}
#results_room td {padding: 0rem}
@media(max-width: 64rem) {#results_room td {display: block;}}
#results_room h3{font-size:2rem;}

.modalTable50Percent {vertical-align: top; width:50%;}

.bottomRightCorner {text-align:right;float: right;margin-right: -2rem;margin-bottom: -3rem;}

#results-tabs {border-bottom: 0px solid #CCC;border-right: 0px;border-top:0px;border-left: 0px;position:relative;margin-bottom: -1px;text-align: center;}
@media(max-width: 64rem) {#results-tabs {}}
@media(max-width: 40rem) {#results-tabs {display: none;}}
#results-tabs li {display:inline-block;float: none;/* border-bottom: 1px solid #CCC; */}
#results-tabs li.is-active {border-bottom: 0px solid #CCC;/* margin-bottom: -1px; */}
#results-tabs li a{
	font-size:1rem !important;
	margin-left: 1rem;
	background: #F6F6F6;
	border:1px solid #CCC;
	border-bottom: 0px;
	border-radius: 5px 5px 0px 0px;
	padding: 0.7rem 2rem;
}
@media(max-width: 64rem) {#results-tabs li a{padding: 0.5rem 1rem; font-size: 0.9rem !important; margin-left: 0.1rem}}
@media(max-width: 64rem) {#results-tabs li a .fa{}}
#results-tabs li a:hover{ }

.is-active #results-tabs-panel1-label, #results-tabs-panel1-label:hover {background-color: #ceeef7; border-bottom:1px solid #ceeef7; outline: 0px;}
.is-active #results-tabs-panel2-label, #results-tabs-panel2-label:hover {background-color: #e5eaf5; border-bottom:1px solid #e5eaf5; outline: 0px;}
.is-active #results-tabs-panel3-label, #results-tabs-panel3-label:hover {background-color: #eef1d6; border-bottom:1px solid #eef1d6;  outline: 0px;}

#results-tabs-content {}
.results-tabs-panel {padding: 1rem;border:1px solid #CCC;/* border-top: 0px; */}
@media(max-width: 40rem) {.results-tabs-panel {padding: 0rem;border:1px solid #CCC; display: block !important;}}
#results-tabs-panel1 {background-color: #ceeef7;}
#results-tabs-panel2 {background-color: #e5eaf5; border-top: 0px;}
#results-tabs-panel3 {background-color: #eef1d6; border-top: 0px;}

.results_savingsTipTable {}
@media(max-width: 320px) {.results_savingsTipTable {font-size: 0.8rem;} }
@media(max-width: 400px) {.results_savingsTipTable td {padding: 3px;} }

.fullWidth {max-width: 100%;}

.bigMoney {font-size: 2rem; font-weight:normal; font-family: "PN-Bold"; color: #444;}

.accordion-title {font-size: 1rem; background-color: #F6F6F6;}

.accordion-title::before {font-size: 1.3rem; font-weight:normal; font-family: "PN-Bold"; }
.results-tabs-panel .accordion-title {background:#2ba6cb; color: #FFF;}

table {border:1px solid #777;border-collapse:inherit;}
table tbody td  {padding: 0.3rem 0.5rem;}
table thead tr {background-color: #DDD;}
table thead tr td{border-bottom: 2px solid #777;}
table tfoot tr {background-color: #DDD;}
table tfoot tr td {border-top: 1px solid #999; }


.iconColumn {padding-left: 3rem;}
@media(max-width: 64rem) {.iconColumn {padding-left: 2.5rem;}}
@media(max-width: 40rem) {.iconColumn {padding-left: 2rem;}}
.iconColumn .fa {position:absolute; top: 1rem; left: 0.25rem; font-size: 2rem; color: #444}
@media(max-width: 64rem) {.iconColumn .fa { font-size: 1.6rem;}}
@media(max-width: 40rem) {.iconColumn .fa { font-size: 1.3rem;}}

.hasDatepicker {width: 110px;display: inline;/* background: #FFF; *//* border: 0px solid #FFF; *//* box-shadow: none; *//* margin-bottom: 0rem; */display: none;}
.ui-datepicker-trigger {cursor: pointer;padding: 0.0em 0.75em 0.0em 0.5em;border: 1px solid #999;cursor: pointer;}
.ui-datepicker-trigger img {margin: -4px 0px 0px 0px;padding: 0.75rem 0.2rem 0.75rem 0.2rem;}
.alternateDate {border:0px solid #FFF;background: #FFF !important;box-shadow: none;cursor: default !important;color: #777;}
.ui-datepicker-month {/* padding-top: 0.15em; *//* padding-bottom: 0.15em; */}
.ui-datepicker-unselectable {background: aliceblue !important;opacity: 1 !important;}

.bigAndBold {font-weight:normal; font-family: "PN-Bold"; text-transform: uppercase;}

.chunkyList li,
.callout .accordion li {margin-top: 0.65rem;margin-bottom: 0rem;line-height: 1.4;}

.fourAccountsSummaryTable {}
.fourAccountsSummaryTable .no {color: #900;}
.fourAccountsSummaryTable .yes {color: #090;}
.fourAccountsSummaryTable .noColor {color: initial;}

.slowReveal {}

.highcharts-container  {z-index:2 !important;}
.chartContainer { /*TODO: Not sure if this necessary or causes extra layout problems in print or mobile.*/
	min-width: 210px;
	height: 240px;
	margin: 0 auto;
	max-width: 500px;
}
@media(max-width: 40em) {.chartContainer {
	margin: 0px !important;
	/* border:1px solid purple; */
}
}

#bigNumberWrapper {
	z-index: 1;
	/* background: #eee !important; */
	display: block;
	height: 122px;
	width: 122px;
	position: absolute;
	top: 10px;
	right: 10px;
}
#bigNumber {}
    #bigNumberFrame {position: absolute;z-index: 100;display: none;}
    #bigNumberBuffer{
      position: absolute;
      z-index: 99;
      text-align:center;
      vertical-align:middle;
      height: 122px;
      width: 122px;
      border-radius: 100%;
    }
    #bigNumberExplaination {display:none; padding: 0.5em 1em;}
    /*#bigNumber:hover #bigNumberExplaination{display:block; font-size:.85em;}
    #bigNumber:hover .bigNumberText{display:none;}*/
    #bigNumberEnough {font-size: 14px;color: #fff;font-weight:normal;/* font-family: "PN"; */display: block;margin: -5px 10px 0px 10px;line-height: 0.98;}
    #bigNumberValue{font-size:1.5rem;color: #FFF;/* margin: 20px 0px 0px 0px; */text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);font-family: "PN-Bold";}
	.digits7 {font-size: 1.1rem;}
	.digits5 {font-size: 1.3rem;}
	.digits3 {font-size: 1.5rem;}

@media (max-width: 40rem) {
#bigNumberWrapper {display: inline-block;/* position: relative; *//* height: 100px; *//* width: 100px; */top: 0px;right: 0px;}
#bigNumber {}
    #bigNumberFrame {position: absolute; }
    #bigNumberFrame img {width: 100px; }
    #bigNumberBuffer{
      position: absolute;
      /* height: 100px; */
      /* width: 100px; */
      /* padding-top:20px; */
    }
    #bigNumberEnough {font-size: 13px;margin: 0px 10px 0px 10px;}
    #bigNumberValue{/* font-size: 25px; */line-height: 1;}
    .digits7 {/*font-size: 1.0rem;*/}
    .digits5 {/*font-size: 1.25rem;*/}
    .digits3 {/* font-size: 1.5rem; */}
}


#bigNumberBuffer {position:relative;}
#bigNumberBuffer .bigNumberBG{
	width: 122px;
	height:122px;
	border-radius: 50%;
	border: 1px solid rgba(10, 10, 10, 0.25);
}
#bigNumberBuffer #bigNumberTextWrapper{
    position: absolute;
    top: 20px;
    left: 0px;
    text-align:center;
    display: block;
    /* margin-top: 15px; */
}
#bigNumberBuffer #bigNumberTextWrapper *{color: #fff !important;}

.bigNumberBG {display: none !important;}
.color1 .bigNumberBG1 {display: block !important;}
.color2 .bigNumberBG2 {display: block !important;}
.color3 .bigNumberBG3 {display: block !important;}
.color4 .bigNumberBG4 {display: block !important;}
.color5 .bigNumberBG5 {display: block !important;}
.color6 .bigNumberBG6 {display: block !important;}



.contAdd_number {font-weight:normal; font-family: "PN-Bold";}

[data-reflector] {color: red;}

.radioWrapper {margin-bottom: 1rem;}
.callout .radioWrapper {margin-bottom:1rem;}

#results_chart {position:relative;}


/*
NEW LAYOUT
full bleed photo background
*/
#pageWrapper {
	max-width: 100%;
	padding: 0rem 0rem 0rem 0rem;
	min-height: calc(100vh - 58px);
	/* height: 100%; */
	/* margin-bottom: -60px; */
}
#pageHeader {max-width: 1100px; margin:auto;}
#pageBodyWrapper {}
#pageBody {
	max-width: 100%;
	margin:auto;
	position: relative;

/* 	margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border:1px dashed red;  padding: 3px;
  */
}
#pageWrapper {
	background-image: url(../img/bg/bg_boat_1000px.jpg?v=1);
	background-position: bottom right;
	background-size: 100%;
	background-repeat: no-repeat;
	background-origin: border-box;
	background-size: cover; /*contain*/
}
.step0page #pageWrapper {transition:all 0.05s; background-image: url(../img/bg/bg_boat_1000px.jpg?v=1);}
.step1page #pageWrapper {transition:all 0.05s;background-image: url(../img/bg/bg_womanWhite_1000px.jpg?v=1);/* background-size: 1600px 999px; */}
.step2page #pageWrapper {transition:all 0.05s; background-image: url(../img/bg/bg_man_1000px.jpg?v=1);}
@media(max-width: 40em) {#pageBody {background: none;}}


#mainNavigation {max-width: 1100px;margin: 0rem auto 0rem auto;/* transform: translate(-50%, -100%); *//* position: absolute; *//* left: 50%; */background: none;padding: 1rem 0rem 0rem 0rem;}
@media(max-width: 40rem) {
	#mainNavigation {position:relative;/* border:1px solid red; */left: initial;margin: 0rem 0.2rem 0rem 0.2rem;transform: translate(-14px, 0px);transform: none;/* display: none; */padding: 0;}
}

/*NOTE: provides animation when navigating from one page to another.*/
/*      this is especially helpful on the first visit to Step 2 */
/*      because it fades in tabs content after the page is ready to see*/
.tabs-content {margin-top: 0px; opacity: 1; transition: 100ms all;}
.fadeInAnimation .tabs-content {margin-top: 0px; opacity:0.0; transition: 0s all;}

.accordion-content-wrapper {max-width: 1100px;margin:auto;padding-top: 0.11rem;}

.footerPush, #pageFooter  {min-height: 20px;/* display: none; */}
#pageFooter {margin: auto;/* position: fixed; *//* bottom: 0px; */background: #EEE;width: 100%;border-top: 1px solid #CCC;}
#pageFooter > div {max-width: 1100px;margin: auto;/* padding: 5px 0px; */}

.tradeMark {color: #999;padding: 0.62rem 0.2rem;margin: 0px;line-height: 1rem;}
.companyLogo {padding: 0.82rem 0.2rem;margin: 0px;text-align:right;}


.transparentPanel {padding: 1rem 1rem;margin: 1rem 1rem 1rem 0rem;background-color:#fff;opacity: 0.9;border-radius: 10px;border: 1px solid hsl(0,10%,50%,0.3);box-shadow: 0px 0px 4px hsla(0,10%,50%,0.5);/* display: none; */}
@media(max-width:64em) {
  .transparentPanel {padding: 1rem 1rem 1rem 1rem;margin: 1rem 0.2rem;border-radius: 7px;}
}
@media(max-width:40em) {
  .transparentPanel {padding: 0.5rem 0.5rem 1rem 0.5rem;margin: 0.2rem;background-color: #f6f6f6;opacity: 1;border-radius: 0px;box-shadow: 0px 0px 0px;}
}

.accordion-content-wrapper > div > .grid-container{
	border:0px solid red;
	max-width: 100%;
}

.dorWrapper {
    /* margin: 0px 0px 0px 1rem; */
}


.fingerprint {color: white; display: none;}
.debuggingMode .fingerprint {/* color:red; *//* background: white; */display: initial;}
.fingerprintRange {color: #fff; background: #fff; padding: 0.1rem; display: none;}
.debuggingMode .fingerprintRange {background: #eee;display: initial;}

.indent {margin-left: 1rem;}

.retDateRow .button{margin-bottom: 0.3rem;text-align: left;/* cursor: default; *//* padding-top: 0.3rem; *//* padding-bottom: 0.3rem; */}
.retDateRow .button a:link{ opacity: 1; cursor: pointer;}
.retDateRow .button:hover a:link{opacity: 1; color: #fff !important; }

.retDateCell {display: inline-block;margin-left: 0.5rem;}
.retDateCell.retDateTypeUISelected {font-weight: bold;}
.retDateCell b {color: #000;/* font-weight:normal !important; */font-family: inherit;}
.retDateCell.retDateTypeUISelected b {color: #000;/* font-weight: bold; */font-family: "PN-Bold";}
.retDateCell .indent {margin: 0rem;}

.retDateCellNotEligible {max-width: 80px;max-height: 20px;line-height: 1;}
.retDateCellNotEligible .button{padding: .4em 0.5em;cursor: not-allowed;opacity: 0.58;}

.button {font-size: 0.9em; }

.ui-datepicker.ui-widget.ui-widget-content {border: 1px solid rgb(62, 173, 206) !important;background: aliceblue !important;}
.hideDatePickers .ui-datepicker {display: none !important;  opacity: 0 !important; transition:all 0s;}

.highcharts-data-label text {font-weight: normal !important;font-size: 12px !important;}
.highcharts-text-outline {display: none;}
.highcharts-stack-labels text{font-size: 12px !important;}

.callout.warning {padding: 2rem 3rem; margin: 4rem 2rem;}
@media(max-width: 40rem) {
.callout.warning {padding: 1rem 1rem; margin: 1rem 2rem 1rem 1rem;}
}

.callout.warning.hasWarningIcon {padding-left: 5rem;}
.callout.warning.hasWarningIcon .fa {margin-left: -2.5rem;/* padding-right: 1rem; */padding-bottom: 2rem;float: left;opacity: 1;color: #900;}

.callout.alert.hasWarningIcon {padding-left: 3.5rem;}
.callout.alert.hasWarningIcon .fa {
	margin-left: -2.5rem; 
	padding-bottom: 2rem;
	float: left;
	opacity: 1;
	color: #900;
}

#disclaimerError {
	display: grid;
	grid-template-columns: min-content auto;
	grid-gap: 0.5rem;
	padding: 1rem;
	align-items: center;
}
#disclaimerError .fa {
	color: #900;
}
#disclaimerError {
	margin: 2rem 2rem;
}
@media(max-width: 40rem) {
	#disclaimerError {
		margin: 1rem 0rem;
	}
}

#resultadosPanel {position:relative;  transition: all 500ms;}
.calculating.step2page #resultadosPanel {opacity: 0.25 !important; transition: all 0s;}
#bigNumberValue {opacity: 1 !important;transition: all 500ms 200ms;}
.calculating.step2page #bigNumberValue {opacity: 0.25 !important; transition: all 0s;}
#resultadosPanel {position:relative;}
/*#calculatingMsg {display: none;}*/

.results_leftCol {position:relative;}
#calculatingMsg {position: absolute; top:0px; left: 0px; background: #FFFF99; padding: 0.2rem 1rem; }
#calculatingMsg {opacity: 0;  transition: 300ms all;}
.calculating.slowBrowser #calculatingMsg {opacity: 1; transition: 0s all;}


.highcharts-tooltip {background:red !important;}
.tooltipTable {border: 0px solid #ccc;cellspacing: 0;cellpadding:0;margin: 0em 0rem;}
.tooltipTable td{border-bottom:1px solid #ccc; padding: 0.2rem 0.0rem; background: #eee;}
.tooltipTable td.colLeft{text-align:left; padding: 0.2rem 0.5rem !important; }
.tooltipTable td.colCenter{text-align:right;padding-left:1rem; }
.tooltipTable td.colRight{text-align:right; padding: 0.2rem 0.5rem;}
.tooltipTable .totalValueRow td {border-top: 1px solid #ccc !important; font-weight:bold;}


.showResultsErrorMsg {}
.showResultsErrorMsg #resultsRow{color:red !important; position: absolute;left:-9999px; top:10px; visibility:hidden;}


.showBusyCursor {cursor:wait;}

.printStep3Large {font-size: 1.2rem;margin: 0px;}
.printStep3Large .button{margin: 0px;}
.printStep3Small {/* font-size: 1.0rem; */}