/* main.css

Type
Style Sheet
Size
15 KB (15,810 bytes)
Storage used
15 KB (15,810 bytes)
Location
styles
Owner
me
Modified
Jun 27, 2018 by me
Opened
12:18 PM by me
Created
Jun 27, 2018 with Google Drive Web
Add a description
Viewers can download */
.browsehappy {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

body {
  padding: 0;
  margin: 0;
  background-color: #dcdee2;
  font-family: "Source Sans Pro" !important; 
}

/* Custom page header */
.header {
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 10px;
}
/* Custom page footer */
.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}

.container-narrow > hr {
  margin: 30px 0;
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
}

.jumbotron .btn {
  font-size: 21px;
  padding: 14px 24px;
}

/*SPARKMILL STYLES */
.container {background-color: #dcdee2;width: 100%; margin: 0;}
.container-main {
  background-color: #ffffff;
  max-width: 960px;
  margin: auto;
}
.table-responsive {margin-bottom: 0;}
.table-responsive.ng-scope {background-color: #ffffff;padding: 20px 0 40px;}
.rangeslider__handle {
  background-image: none!important;
  /*background-repeat: no-repeat;*/
  background-color:#00a3e3;
  border:2px solid #ffffff;
  /*border-radius:50%;*/
  box-shadow:none;
  /*cursor:pointer;
  display:inline-block;
  height:40px;
  position:absolute;
  width:40px;*/
}

.rangeslider, .rangeslider__fill {
  /*border-radius:10px;
  display:block;*/
  box-shadow:none;
}
.rangeslider {
  background:#e9ebf0;
}

.rangeslider__fill {
  background:#00a3e3;
}

input[type=text] {
	border: 1px solid #DCDEE2;
	background: #FFFFFF;
	box-shadow:none;
	text-align: right;
	width: 40px;
}
.link a, #summary-table2 td:last-child a {
	color:#00a3e3;
	border: 1px solid #00a3e3;
	padding: 8px 16px;
	display: inline-block;
	width:auto;
	border-radius:2px;
	line-height:1em;
	text-align:center;
	text-decoration:none;
	white-space: nowrap;
}
.link a:hover, #summary-table2 td:last-child a:hover {
	text-decoration: none;
	color: #ffffff;
	background-color: #00a3e3;
}


.nav-tabs li a {
background-color: #f3f5f5;
border: none;
color: #0f456f !important;
text-decoration: none;
width: 142px;
border-bottom: 2px solid #dcdee2;
border: solid 1px #0f456f;
box-sizing: border-box;
font-size: 16px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.25;
letter-spacing: normal;
text-align: center;
border-radius: 6px;
}
.nav-tabs li.active a {
  background-color:  #0074d9 !important;
  color: #fff !important;
  border-bottom-color: transparent;
  cursor: pointer;
}
a#Women {margin-right: 12px;}

.btn-group a.btn-default {
	color: #ffffff;
	background-color: #00a3e3;
	border:none;
	border-radius: 3px!important;
	text-decoration:none;
}
.btn-group a.btn-default+a.btn-default {margin-left: 15px;}



#step1, .table-responsive {border: none;}

.sumary td, .table>tbody>tr>td {vertical-align: middle;}
.table>tbody+tbody {border-top:none!important;}

.fa-info-circle {height: 16px; width: 16px;display: inline-block;background: url(../images/info.svg) no-repeat 0 0;margin-bottom:-2px;}
.fa-info-circle:before {content: ""!important;}
.glyphicon-ok-sign:before{content:""!important;}
.glyphicon-exclamation-sign:before{content:""!important;}
.glyphicon-ok-sign {height: 16px; width: 16px;background: url(../images/strong_active.svg) no-repeat 0 0;}
.glyphicon-exclamation-sign {height: 16px; width: 16px;background: url(../images/poor_active.svg) no-repeat 0 0;}
.fa-circle-o {padding-left: 16px;line-height:28px;height: 16px; width: 16px;background: url(../images/radio.svg) no-repeat 0 0;margin-bottom:-4px;}
.fa-check-circle-o {padding-left: 16px;line-height:28px;margin-top: 4px;height: 16px; width: 16px;background: url(../images/radio_check.svg) no-repeat 0 0;margin-bottom:-4px;}
.fa-square-o:before {padding-left: 20px;height: 20px; width: 16px;background: url(../images/check_off.svg) no-repeat 0 0;padding-bottom: 2px;}
.fa-check-square-o:before {padding-left: 20px;height: 20px; width: 16px;background: url(../images/check_on.svg) no-repeat 0 0;padding-bottom: 2px;}

.checkbox-options label {width: 100%;}

.fa-circle-o:before{content:""!important;}
.fa-check-circle-o:before{content:""!important;}
.fa-square-o:before{content:""!important;}
.fa-check-square-o:before{content:""!important;}
.fa-arrow-left:before{content:""!important;}
.fa-arrow-right:before{content:""!important;}
.fa-arrow-circle-left:before{content:""!important;}
.fa-arrow-circle-right:before{content:""!important;}
.fa-arrow-left {height: 16px; width: 16px;background: url(../images/chart_left.svg) no-repeat 0 0;margin-bottom:-4px;}
.fa-arrow-right {height: 16px; width: 16px;background: url(../images/chart_right.svg) no-repeat 0 0;margin-bottom:-4px;}
.fa-arrow-circle-left {height: 16px; width: 16px;background: url(../images/arrow_back.svg) no-repeat 0 0;margin-bottom:-4px;}
.fa-arrow-circle-right {height: 16px; width: 16px;background: url(../images/arrow_forward.svg) no-repeat 0 0;margin-bottom:-4px;}
.fa-wpforms:before{content:""!important;}
.fa-file-pdf-o:before{content:""!important;}
.fa-wpforms {height: 16px; width: 16px;background: url(../images/summary.svg) no-repeat 0 0;margin-bottom:-2px;}
.fa-file-pdf-o {height: 16px; width: 16px;background: url(../images/pdf.svg) no-repeat 0 0;margin-bottom:-2px;}

.rangecell {
    width: 47%
}

.table .reaction {
    /*width: 30px; SPARKMILL*/
	width: 3%; /*SPARKMILL*/
    padding-left: 0!important;
    padding-right: 0!important
}
.link {
    /*width: 140px; SPARKMILL*/
	width: 15%;
    padding-left: 4px!important;
    padding-right: 2px!important
}
.item-label {
    width: 15%
}
.table-responsive .text {
    padding-right: 0;
	width: 20%; /*SPARKMILL*/
}


@media screen and (max-width:1023px) {
	.container-main {padding:0 7.5%;}
	#potential-tool .nav-tabs {margin-left: 7.5%;}
	.rangecell {width: 42%}
	.table-responsive .text {width: 25%;}
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {

  /* Remove the bottom border on the jumbotron for visual effect */
  .jumbotron {
    border-bottom: 0;
  }
}

.top-buffer {
  margin-top: 25px;
}

.small-text {
  width: 36px;
  height: 28px;
}

.rangeslider--horizontal {
  height: 12px;
}

.rangeslider--horizontal .rangeslider__handle {
  width: 20px;
  height: 20px;
  top: -4px;
}

.rangeslider__handle:after {
  width: 12px;
  height: 12px;
}

.row {
  display: table;
}

.no-padding-left-right {
  padding-left: 0;
  padding-right: 0;
}

[class*="col-"] {
  float: none;
  display: table-cell;
  vertical-align: middle;
}


.container table {
  width: 100%;
}

.table .glyphicon {
  font-size: 16px;
}

.glyphicon-exclamation-sign {
  cursor: pointer;
}

#table .bmi {
  margin: auto;
  min-height: 75px;
  text-align: center;
  margin-bottom: 15px;
}
bmi
{
  max-height: 150px;
}
#table .bmi-cell {

}

#table td {
  vertical-align: middle;
}

#additional-table td {
  vertical-align: middle;
}

.table tfoot td {
  text-align: center;
}

.table .reaction {
  width: 50px;
  text-align: center;
  padding-left: 0 !important;
    padding-right: 0 !important;
}

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

.btn .fa {
  font-size: 16px !important;
}

.table-responsive {
  overflow-x: hidden;
}

.table-responsive > .table .borderless {
  border: none;
}

.table-responsive .text {
  padding-right: 0;
}

.table-responsive .unit {
  padding-left: 4px;
}


.middle {
  text-align: center;
}
.popover{
  max-width:550px;
}

.disabled, .disabled td {
  color: #D1D0CE !important;
}

.table-responsive .table td {
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: none;
  /* border-bottom: solid 1px rgb(221, 221, 221); */
}


.table {
  margin-bottom: 5px;
}


.table .small-height {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  height: 30px !important;
}

#additional-table td.depends-on {
  padding-left: 25px;
}

.chart-cell {
  width: 76%;
}

#chart-container {
  margin: auto;
}

#previous-chart-container {
  margin: auto;
}

.step2-slider-grp .rangeslider{
  display: inline-block;
  width: 80%;
}

.step2-slider-grp input[type="tel"] {
  display: inline-block;
  width: 50px;
}

#step2 .rangecell {
  width: 48%;
}

.link {
    /*width: 77px;*/
    padding-left: 4px !important;
    padding-right: 2px !important;
}


.table-responsive td {
    white-space: normal !important;
}


.form-control {
    display: inline !important;
    padding: 5px 4px!important;
}

.item-label {
    width: 15%;
}

.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media screen and (max-width:840px) {
	.rangecell {
	  width: 40%;
	}
}

@media screen and (max-width:767px) {
	.container-main {padding:0 5%;}
	#potential-tool .nav-tabs {margin-left: 5%;}
  .table-responsive .table td {
    border-top: unset ;
    padding: 0;
  }
	/*.rangecell {width: 42%}*/
}
@media screen and (max-width: 767px) {
    .link {
        /*width: 42px;*/
    }

    .link a, .link div {
        /*width: 38px;
        display: block;*/
    }

	.logo-header-main .alert {
		display: block;
	}
}

/*@media screen and (max-width: 374px) {
		.rangecell {
		width: 35%;
	}
}

@media screen and (min-width: 375px) and (max-width: 500px) {
		.rangecell {
		width: 45%;
	}
}*/
/*SPARKMILL MOBILE*/
@media screen and (max-width:500px) {
	table {border-collapse: collapse;}
	td.item-label {width: 95%;display:block;border-bottom:none!important;min-height: 45px;padding:15px 0 10px 0!important;}
	td.rangecell {padding: 0 0 5px 0!important;width: 95%!important;display:block;border-bottom:none!important;}

	td.reaction, .table .reaction {width: 8%;display:inline-block;height: 50px; padding-top:10px!important;}
	td.link {width: 40%;display:inline-block;height: 50px;vertical-align:middle!important;padding-top:10px!important;}

	#step2 #additional-table tr td {width: 95%;display:block;border-bottom:none!important;height:auto!important;padding-left:0;}
	#step2 td.reaction {width: 20%!important;display:inline-block!important;}
	#step2 td.link, #step2 td:last-child {width: 70%!important;display:inline-block!important;text-align: right;margin-right:10%;}
	#step2 td.rangecell {padding:0!important;}

	td.item-label {border-top: 1px solid #dcdee2;}
	td.item-label:first-child {border-top: none;}


	.container-main .table-responsive:nth-of-type(4) table td {padding: 0!important;}
	#chart-container text {font-size: 12px!important;}
	#previous-chart-container text {font-size: 12px!important;}

	#step3 td.reaction, #step3 td.link, .container-main .table-responsive:last-child td.reaction, .container-main .table-responsive:last-child td.link {height: inherit;}
	#step3 table, .container-main .table-responsive:last-child table {border-collapse: separate;}
	#step3.table-responsive .table td, .container-main .table-responsive:last-child .table td  {border-bottom:none;}

	#step3 td:last-child, .container-main .table-responsive:last-child td:last-child {text-align: right;padding-right: 0;}
	#step3 td.link, .container-main .table-responsive:last-child td.link, .container-main .table-responsive:last-child td:last-child  {width:85%;vertical-align:middle;}
	#step3 .link a, .container-main .table-responsive:last-child .link a, .container-main .table-responsive:last-child td:last-child a, #summary-table2 td:last-child a {padding: 4px 6px;line-height: 1;white-space: nowrap;}

	.container-main .table-responsive:last-child td:last-child {}

	#step3 .table>tbody>tr>td, .container-main .table-responsive:last-child .table>tbody>tr>td, #step3 .table>thead>tr>th, .container-main .table-responsive:last-child .table>thead>tr>th {padding: 5px!important;}

	.table>thead>tr>th {font-size: 13px;}

	#step3 td.reaction, #step3 .table .reaction, .container-main .table-responsive:last-child td.reaction, .container-main .table-responsive:last-child .table .reaction {width: 15%;padding-left: 0!important;vertical-align:middle!important;}

	.popover {
    max-width: 300px
	}
	.container-main {padding:0 5%;}
	.nav-tabs>li {float:none;}
	.nav>li {display: inline-block;}
}


@media screen and (min-width: 501px) {

	.logo-header-main .alert {
		display: none;
	}

}


@media screen and (max-width: 1000px) {

	.rr-logo {
		display: none;
	}

	.rr-logo-top {
		display: inline;
	}

	.logo-header-main {
		text-align: center;
	}
}

@media screen and (min-width: 1001px) {
	.rr-logo {
		display: inline;
	}

	.rr-logo-top {
		display: none;
	}
}

@media screen and (max-width: 400px) {

	.btn-group a.btn-default span {display:none!important;}
}

#chart-container {padding-top: 40px;}
#previous-chart-container {padding-top: 40px;}

.legend-table {
    margin: 40px auto 30px;
    /* width: 250px !important; */
}

.legend-table td {
    width: 20%;
    border-bottom: none !important;
    text-align: right;
}

.rr-logo {
    width: 200px;
	margin-left: -115px;
}

.logo-header {
	vertical-align: top;
	padding-top: 10px;
}

 .checkbox-options span {
	 white-space: normal !important;
 }

input[type=radio]~i.fa.fa-circle-o{color:#999;display:inline}label input[type=radio]:checked~i.fa.fa-circle-o,label input[type=radio]~i.fa.fa-check-circle-o{display:none}label input[type=radio]:checked~i.fa.fa-check-circle-o{color:#7AA3CC;display:inline}label.disabled input[type=radio]~i.fa.fa-check-circle-o{display:none}label.disabled input[type=radio]~i.fa.fa-circle-o{display:inline;color:#c8c8c8}label:hover:not(.disabled) input[type=radio]~i.fa{color:#7AA3CC}label input[type=checkbox]~i.fa.fa-square-o{color:grey;display:inline}label input[type=checkbox]:checked~i.fa.fa-square-o,label input[type=checkbox]~i.fa.fa-check-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{display:inline-block;padding:6px 12px 6px 1px;margin-bottom:0;font-weight:400;line-height:2em;text-align:left;white-space:nowrap;vertical-align:top;cursor:pointer;background-color:none;border:0 solid #4d4d4d;border-radius:3px;color:#737373;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}div[data-toggle=buttons] label:not(.disabled):hover{color:#7AA3CC}div[data-toggle=buttons] label.active,div[data-toggle=buttons] label:active{box-shadow:none}.fa-2x{font-size:1.4em}


.set-width-35{
  width: 35%;
}
.set-width-25{
  width: 25%;
}
.set-width-40{
  width: 40%;
}

 td p  {
  text-align: left;
}
td div {
    text-align: left;
}
.evidence {
	text-align: center;
	padding: 20px;
}

a:hover {
	text-decoration: none;
	cursor: pointer;
}

.header-text {
	padding-top: 10px;
	padding-bottom: 20px;
}

.header-text h1, .header-text h2 {
  color: #0074d9;
  font-family: SourceSansPro-Semibold;
  font-size: 28px;
  font-weight: 600;
  line-height: 36px;
}

.your-gender {
	padding: 0 10%
}

.your-gender table {
	margin: 0 !important;
}

.your-gender td {
	padding: 0 8px !important
}


your-gender,.intro{
  padding:0 10%
}
.your-gender h4{
  margin: 0 0 10px;
  font-family: SourceSansPro;
  font-size: 18px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.28;
  letter-spacing: normal;
  text-align: left;
  color: #0f456f;
}
/* .your-gender h4:after{
  top:100%;left:50%;
  border: solid transparent;
  content:" ";
  height:0;
  width:0;
  position:absolute;
  pointer-events:none;
  border-color:rgba(0,163,227,0);
  border-top-color:#00a3e3;
  border-width:16px;margin-left:-16px;
} */

.navigation-holder {
  text-align: center;
  margin-bottom: 1em;
  padding: 0 5%;
}

.navigation-holder p {
  margin-bottom: 2em;
  text-align: center;
}

.navigation-holder h2 {
  display: inline-block;
  font-size: 1.25em;
  text-align: center;
  color:#00a3e3;
  border-radius: 4px;
  padding: 1em;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
}

.btn-fat {
  border: 1px solid #00a3e3;
  padding-top: 0.75em;
  padding-bottom: 0.75em;
  width: 100%;
  background-color: #0074d9;
  color: #FFFFFF;
}

.btn-cta {
  border: 1px solid #00a3e3;
  padding: 1em 2em;
  font-weight: bold;
  font-size: 1.5em;
  margin-bottom: 1.5em;
}

.btn-circle {
  border: 1px solid #00a3e3;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  padding: 0.75em;
}
.btn-circle.circle-active {
  background-color: #00a3e3;
  color: black;
}
.pagination-holder {
  text-align: center;
  margin-bottom: 1em;
}
.pagination-line-separator {
  display: inline-block;
  width: 1.5em;
  height: 0px;
  border-top: 1px solid #00a3e3;
}

.final-nav__info {
  font-size: 0.75em;
}

.final-nav__title-holder {
  font-family: SourceSansPro;
  font-size: 18px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.28;
  letter-spacing: normal;
  text-align: center;
  color: #0074d9;
  display: flex;
  width: 140px;
  flex-wrap: wrap;
  width: 100%;
  padding-top: 20px;
}
.final-nav__title-holder .btn-fat {
  width: 161px;
  margin: 5px !important;
  font-family: SourceSansPro;
  font-size: 16px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
  padding-top: 8px;
  padding-bottom: 6px;
}

.footer-tagline {
  max-width: 480px;
  font-size: 0.9em;
  margin: 0 auto;
  padding-top: 40px;
  margin-top: 40px;
  border-top: solid 1px #98b4c9;
  background-color: #fff;
}

.footer-tagline p {
  text-align: center;
}

.footer-tagline img {
  height: 50px;
}

.invisible {
  visibility: none;
}

/*GOACT MOBILE*/
@media screen and (max-width:500px) {
  .nav-tabs li a {
    background-color: #f3f5f5; 
    font-weight:normal; 
    border:none;
    color: #787684;
    text-decoration:none;
    font-size:10px;
    text-align:center;
    box-sizing: border-box;}
  .nav-tabs li.active a {
    background-color: #ffffff; 
    color: #585663;
    border-bottom: 2px solid #ffffff
  }
}

#choose-sex li:last-child {
  padding-left: 7px;
}
 .error-message {
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: left;
  color: #bb0505;
  padding-top: 5px;
}
.error-message-footer {
  padding: 0 5%;
}
.custom-check-box {
  display: flex;
}
#step1 .custom-check-box label button {
  margin-right: 20px;
  font-family: SourceSansPro-Semibold;
  font-size: 16px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 20px;
  letter-spacing: normal;
  text-align: center;
  color: #0f456f;
}
.buttontext {
  width: 161px;
  height: 40px;
  margin: 0 11px 0 0;
  padding: 8px 9px 10px 7px;
  border-radius: 6px;
  background-color: #0074d9;
  cursor: pointer;
}
.buttontext-restart-tool {
  width: 163px;
  height: 40px;
  margin: 0 0 0 11px;
  padding: 9px 21px 10.7px 23.8px;
  border-radius: 6px;
  background-color: #ffe07b;
  display: flex;
}
.buttontext-restart-tool img {
  margin-right: 7px;
  max-width: 25px;
}
.buttontext-restart-tool  p{
  font-family: SourceSansPro;
  font-size: 16px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: center;
  cursor: pointer;
}
.button-text-header {
  display: flex;
  align-items: center;
}
.button-text-header p {
  text-align: center;
}
.button-text-header .buttontext {
  font-family: SourceSansPro;
  font-size: 16px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
  display: flex;
  align-items: flex-start;
  width: 180px;
  padding-left: 15px;
}
.button-text-header .buttontext img {
  height: 18px;
  padding-right: 12px;
}
.button-text-header .buttontext-restart-tool {
  font-family: SourceSansPro;
  font-size: 16px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: center;
  color: #0f456f;
}
#step3 .data-color-example h4 {
  font-family: SourceSansPro;
  font-size: 16px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: left;
  color: #0f456f;
  text-transform: uppercase;
}
#step3 .data-color-example .item-color {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
}
#step3 .data-color-example .item-color .color-red {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  margin-right: 10px;
  background-color: #bb0505;
}

#step3 .data-color-example .item-color .color-yellow {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  margin-right: 10px;
  background-color: #b78c00;
}
#step3 .data-color-example .item-color .color-green {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  margin-right: 10px;
  background-color: #196d22;
}
#step3  .data-color-example {
  padding: 16px 161px 16px 24px;
  border-radius: 4px;
  background-color: #f1f1f1;
  margin-top: 20px;
  margin-bottom: 20px;
}
 /* handler toggle  */
 #step3 .item-toggle {
  padding-bottom: 37px;
  cursor: pointer;
 }
 #step3 .item-toggle .header-toggle {
  padding: 5px 10px;
  border-radius: 4px;
  min-height: 37px;
  display: flex;
  align-items: center;
  justify-content: space-between;
 }
 #step3 .item-toggle .header-toggle.bg-toggle-Red {
  background-color: #bb0505;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 }
 #step3 .item-toggle .header-toggle.bg-toggle-Red1 {
  background-color: #bb0505;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 }
 #step3 .item-toggle .header-toggle.bg-toggle-Green {
  background-color: #196d22;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 }
 #step3 .item-toggle .header-toggle.bg-toggle-Yellow {
  background-color: #b78c00;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 }
 #step3 .item-toggle .header-toggle.bg-toggle-Green1 {
  background-color: #196d22;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 }
 
 #step3 .item-toggle .header-toggle .title-toggle {
  font-size: 21px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: normal;
  text-align: left;
  color: #fff;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 }
 #step3 .item-toggle .header-toggle  .title-toggle-arrow {
  font-family: SourceSansPro;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: left;
  color: #fff;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-right: 5px;
 }
 #step3 .item-toggle .item-arrow {
  width: 11.7px;
  height: 7.9px;
  background-color: #fff;
  clip-path: polygon(49% 0, 0% 100%, 100% 100%);
  display: inline-block;
}
#step3 .item-toggle.hide-item .item-arrow {
  width: 11.7px;
  height: 7.9px;
  background-color: #fff;
  clip-path: polygon(50% 74%, 0 0, 100% 0);
  display: inline-block;
}
/* #step3 .item-toggle.hide-item .content-toggle {
  display: none;
} */
#step3 .item-toggle .content-toggle {
  padding-top: 10px;
}
#step3 .item-toggle .content-toggle i.anwser-user { 
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: italic;
  line-height: 1.29;
  letter-spacing: normal;
  text-align: left;
  color: #0f456f;
}
#step3 .item-toggle .content-toggle p.description {
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: left;
  color: #0f456f;
  padding-top: 10px;
}
#step3 .item-toggle .action-item  .header-action-item {
  border-radius: 4px;
  background-color: #f1f1f1;
  padding: 5px 6px 5px 8px;
  font-family: SourceSansPro;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  color: #0074d9;
}
#step3 .item-toggle .action-item .action-description{
  margin: 14px 0.4px 0 10px;
  font-family: SourceSansPro-Semibold;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 18px;
  letter-spacing: normal;
  text-align: left;
  color: #0f456f;
}
#step3 .item-toggle .action-item .list-link {
  margin: 14px 0.4px 0 10px;
}
#step3 .item-toggle .action-item .list-link a {
  display: block;
}
.table-responsive .final-nav {
  border-top: solid 1px #749fc1
}
.final-nav__title-holder.more-tool-option {
  font-size: 16px;
}
.btn:hover, .btn:focus, .btn.focus {
  color: #FFFFFF;
}
.button-text-bottom-final {
  padding-bottom: 55px;
}

.item-with-info {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
}
.span-title {
  font-size: 18px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.28;
  letter-spacing: normal;
  text-align: left;
  color: #0f456f;
}
.info-popover {
  background-color: #0074d9;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  text-align: center;
  margin-left: 10px;
}
.info-popover img  {
  width: 4px;
  vertical-align: text-top;
}
.popover.bottom,.popover.top {
  box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);
  background-color: #0f456f;
  color: white;
}
.popover-title {
  background-color: #0f456f !important;
  border-bottom: unset;
  padding-top: 0px;
}

.popover .popover-content {
  padding: 9px 20px;
  padding-top: 4px;
  font-family: SourceSansPro;
  font-size: 16px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: left;
  color: #fff;
}
.popover-title img {
    top: -11px;
    position: absolute;
    right: -13px;
    width: 30px;
    height: 30px;
    background-color: #0074d9;
    font-size: 25px;
    border-radius: 50%;
    text-align: center;
    line-height: 1.3;
    font-weight:normal;
    color: #FFFFFF;
    opacity: 1;
    text-shadow: unset;
}
.popover.bottom > .arrow:after {
  border-bottom-color: #0f456f;
}
.popover.top > .arrow:after {
  border-top-color: #0f456f;
}
.navigate-link-help {
  padding-left: 5px;
  text-decoration: underline;
  font-family: SourceSansPro-Semibold;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 18px;
  letter-spacing: normal;
  text-align: left;
  color: #0074d9;
}
.navigate-link-help:hover {
  color: #0074d9;
  text-decoration: underline;
}
.bottom-step-text {
  font-family: SourceSansPro;
  font-size: 16px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: center;
  color: #0074d9;
}
.back-link-step-2 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 17px 14px 16px 20.3px;
  background-color: #f5f9fc;
  padding-left: 0px;
}
.back-link-step-2 .arrow-button-text,.text-content {
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: normal;
    text-align: left;
    color: #0f456f;
}
.back-link-step-2 .arrow-button-text {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.back-link-step-2 .arrow-button-text img {
  height: 11px;
  padding-right: 10px;
}
/* // responsive */
@media screen and (min-width: 1024px) {
  .item-with-info { 
    width: 400px;
    margin-right: 40px;
  }
  ul.nav-tabs {
    border-bottom: unset;
  }
  .table-responsive .final-nav {
    border: unset;
    border-top: solid 1px #749fc1 ;
    padding: 0;
  }
  .footer-tagline {
    max-width: 100%;
  }
  .box-footer-item {
    display: flex;
    justify-content: space-between;
  }
  .box-footer-item .final-nav__title-holder.title-text {
    align-items: center;
    width: 386px;
  }
  .final-nav__title-holder .btn-fat {
    line-height: 1.5;
  }
  .navigation-holder h2 {
    padding: 0;
    text-align: left;
  }
  .navigation-holder {
    width: 100%;
    text-align: center;
    max-width: 960px;
    margin: 0 auto;
  }
  .btn-group.custom-line {
    display: block;
  }
  .button-text-bottom-final {
    padding-bottom: 0px;
  }
  .final-nav__title-holder.more-tool-option {
    padding-top: 0px;
    width: 270px;
  }
  .box-footer-item-more-tool {
    display: flex;
    align-items: center;
    padding-top: 30px;
  }
  #step1 #table tbody tr {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }
  .error-message-footer  p{
    text-align: center;
    /* padding-left: 130px; */
    padding-top: 10px;
  }
  #step2 #additional-table tbody tr {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
  }
  #step2 #additional-table tbody.item-check-box tr {
    border-top: none;
    border-bottom: none;
  }
  .table-responsive .table td.text-error {
    padding-top: 0;
    padding-bottom: 0;
    justify-content: end;
    margin-left: 129px;
    margin-top: -23px;
    }
  .button-bottom-step-1 {
    padding: 0;
    width: 200px;
  }
  #step2 .question-step2 {
    width: 500px;
    display: inline-block;
  }
  #step2 .span-title {
    width: 400px;
  }
  #step2 a.ng-scope:hover {
    color: #0074d9 ;
    text-decoration:underline ;
  }
  #step2 .question-check-box,#step2 .item-for-css {
    width: 460px;
  }
  #step2 #additional-table tbody.item-check-box tr:first-child {
    margin-top: 20px;
    height: 40px;
  }
  .item-color-flex {
    display: flex;
  }
  .item-color-flex .item-color {
    padding-right: 40px;
  }

}
.button-bottom-step-1 a {
  font-family: SourceSansPro;
  font-size: 16px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
}
#step2  .info-popover {
  display: inline-block;
}
#step2 #additional-table tbody.item-check-box tr .span-option {
  font-family: SourceSansPro;
  font-size: 16px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: left;
  color: #0f456f;
  padding-left: 10px;

}
#step2 #additional-table .answer-step2 .button-step2-answer {
  padding: 8px 12px 12px;
  border-radius: 6px;
  border: solid 1px #0f456f;
  background-color: #f5f9fc;
  width: 80px;
  height: 40px;
  margin: 0 20px 0 0;
  font-family: SourceSansPro-Semibold;
  font-size: 16px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 20px;
  letter-spacing: normal;
  text-align: center;
  color: #0f456f;
}
#step1 #table .error-button-shown input {
  border: solid 1px #bb0505;
}
#step1 .nav-tabs > li > a:hover {
  border-color: unset;
  cursor: pointer;
}
@media screen and (max-width:1023px) {
  .table-responsive .table td {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  #step1 #table .item-input-text {
    margin-bottom: 30px;
  }
  #step1 #table .error-button-shown {
    margin-bottom: 0 !important;
  }
  #step1 #table td.text.custom-check-box {
    margin-bottom: 30px;
  }
  #step2 #additional-table tr td.answer-step2 {
    margin-bottom: 35px;
    margin-top: 7px;
  }
  .final-nav__title-holder .btn-fat {
    padding-top: 10px;
    padding-bottom: 8px;
  }

}
@media screen and (max-width:370px) {
  .final-nav__title-holder .btn-fat {
    width: 100%;
  }
  .button-text-bottom-final {
    flex-direction: column;
  }
  .button-text-header .buttontext-restart-tool {
    width: 100%;
    margin-bottom: 10px;
    margin-left: 0px;
  }
  .button-text-header .buttontext-restart-tool {
    width: 100%;
    align-items: center;
    justify-content: center;
  }
  .button-text-header {
    flex-direction: column;
  }
  #step3 .button-text-header .buttontext img {
    padding-right: 10px;
  }
  #step3 .button-text-header .buttontext {
    width: 100%;
    padding: 8px 9px 10px 7px;
    margin-bottom: 10px;
    margin-right: 0;
    align-items: center;
    justify-content: center;
  }
  #step3 .button-text-header .buttontext-restart-tool {
    width: 100%;
    padding: 8px 9px 10px 7px;
    margin: 0;
  }
  #step3 .data-color-example {
    padding: 16px 14px 16px 24px;
  }
  #step3 .item-toggle .header-toggle .title-toggle {
    font-size: 15px;
  }
  .buttontext-restart-tool img {
    margin-right: 10px;
  }
}
 /* css for ipad  */
 @media only screen and (min-width:768px) and (max-width:1023px) {
  #step1 .your-gender {
    border-top: unset;
  }
  #step1 .your-gender .nav-tabs { 
    border-bottom : unset;
  } 
  #step1 #table .text-error {
    padding-top: 0px;
    padding-bottom: 0px;
    justify-content: end;
    margin-left: 248px;
    margin-top: -14px;
  }
  .item-with-info {
    width: 297px;
    margin-right: 40px;
  }
  #step1 #table td.item-label {
    width: 300px;
  }
  .table-responsive .text {
    width: 40% !important;
  }
 }
.item-infor-popover {
  display: inline-flex;
  align-items: center;
}
.error-answer {
  border: solid 1px #bb0505;
}
.text-result-content {
  padding-bottom: 20px;
  text-align: center;
}
.text-result-step3 {
  font-family: SourceSansPro;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.22;
  letter-spacing: normal;
  text-align: left;
  color: #0f456f;
  margin-bottom: 0;
}

#step3 .header-resukt-step3 .content-left {
  max-width: 480px;
}
@media only screen and (min-width:768px) {
  .image-result-step3 {
    display: none;
  }
  #step3 .header-resukt-step3 .content-left  .header-text{
    padding-top: 0;
  }
  #step3 .header-resukt-step3 .content-left  h1{
    margin-top: 0;
  }
  .header-resukt-step3 {
    padding-bottom: 20px;
  }
  .header-resukt-step3 {
    display: flex;
  }
}
@media only screen and (max-width:767px) {
  .image-result-desktop {
    display: none !important;
  }
}
.image-result-desktop {
  max-width: 450px;
  display: flex;
  justify-content: left;
  align-items: center;
  max-height: 236px;
}
.image-result-desktop img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  text-align: left;
}
.image-result-step3 {
  width: 100%;
  padding-top: 30px;
  max-width: 450px;
  text-align: center;
  width: 100%;
}
@media only screen and (max-width:1023px) {
  .buttontext-restart-tool {
    padding: 9px 7px 10.7px 10.8px
  }
  .button-text-header .buttontext {
    padding-left: 7px;
    width: 187px;
  }
  .button-text-header .buttontext img {
    padding-right: 5px;
  }
  .button-text-header p {
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: -webkit-box;
    margin-bottom: 0;
  }
  .navigation-holder {
    padding: 0 4%;
  }
  .final-nav__title-holder {
    justify-content: center;
  }
  .button-text-bottom-final {
    justify-content: center;
  }
}
.itemLink {
  display: flex;
  align-items: baseline;
}
.triangle-right {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #0f456f;
  padding-right: 10px;
}
.item-arrow-collap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.title-infor-step3 {
  font-family: SourceSansPro;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: left;
  color: #0f456f;
}
.popover-custom-step1 {
  width: 35px;
  height: 20px;
}