/* SEER*CSC STYLES
dark blue										#142c68
medium blue									#0065A8
light blue									#dce4ef
dark gray										#444444
disabled dark gray					#656565
table thead dark gray				#222222
table tbody th medium gray	#222222
light gray									#eeeeee
light gray									#cccccc
white												#ffffff
nih/nci red									#bb0e3d
error red										#721c24
error dark pink							#f5c6cb
error pink									#f8d7da
button green								#004600   */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ GENERAL ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* ==================================================
	NCI Govt Header
================================================== */
section#usa-banner .container {
    margin: 0 auto;
    padding: 1rem 0;
}
section#usa-banner {margin-bottom: 0; background: #f0f0f0;}
.usa-banner__header-text {font-size: 12px; line-height: 1.2; margin-bottom: 0; margin-top: 0;}
.usa-banner__header-text img {vertical-align: baseline;}
/***************************************************************/

.preload * { 
	transition: none !important;
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
}
html, body, #containerBorder, #container { height: 100%; }
body {	color: #444444;	font-family: Verdana, Geneva, sans-serif;	margin: 0;	font-size: 16px;}
#container {	display: flex;    flex-direction: column;}
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {    // IE9+ CSS
		#container {			display: block;		}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
		#container {			display: block;		}
}
.container {	
	margin: 0 auto;	
	width: 98%;	
	max-width: 1400px; 
}
main { flex: 1; }
h1, h2, h3, h4, h5, h6 {	font-family: 'Montserrat', sans-serif;}
h1 { font-size: 30px;}
h2 { font-size: 1.3em;}
h3 { font-size: 1.1em;}
h4 { font-size: 1em;}
h5 { font-size: .9em;}
h6, .smallfont { font-size: .8em;}
.normal { font-weight: normal;}
.hidden { display: none !important;}
.sr-only {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}
.noborder { border: none !important;}
a.ext-link { text-decoration: none;}
* { box-sizing: border-box;}
.red-highlight-text { 	color: #bb0e3d;}
.blue-highlight-text { 	color: #0065A8;}
.header-icon {
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    margin-right: 0.5em;
}
a, .ui-widget-content a {color: #0065A8;}
a:visited, a:hover, a:focus{	color: #884488;	cursor: pointer;}
img {	max-width: 100%;    width: auto;    height: auto;}
.clearFlt {	clear: both;	height: 0;	line-height: 0;}
@media only screen and (max-width: 1400px) {
	.container {		margin: 0 23px;		width: 96%;		width: calc(100% - 46px);	}
}
@media only screen and (max-width: 500px) {
	ol, ul { padding-left: 30px;}
}
@media only screen and (max-width: 400px) {
	body { word-break: break-word;	}
}
.fltlft, .floatleft, .fltleft {	float: left;}
.fltrgt, .floatright, .fltright {	float: right;}
blockquote { 	font-size: 1em; 	background: #eee; 	border-left: 5px solid #DCE4EF; 	padding: 1em;}
form blockquote { 	background: none; 	border: none; 	padding: 0;}
@media only screen and (max-width: 767px) {
blockquote { 	margin-left: 0;	margin-right: 0;}
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ALERTS~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.alert {    position: relative;    padding: 1rem 1rem;    margin-bottom: 1rem;    border: 1px solid transparent;    border-radius: .25rem;}
.alert-primary {    color: #084298;    background-color: #cfe2ff;    border-color: #b6d4fe;}
.alert-secondary {    color: #41464b;    background-color: #e2e3e5;    border-color: #d3d6d8;}
.alert-success {    color: #0f5132;    background-color: #d1e7dd;    border-color: #badbcc;}
.alert-danger {    color: #842029;    background-color: #f8d7da;    border-color: #f5c2c7;}
.alert-warning {    color: #664d03;    background-color: #fff3cd;    border-color: #ffecb5;}
.alert-info {    color: #055160;    background-color: #cff4fc;    border-color: #b6effb;}
.alert-light {    color: #636464;    background-color: #fefefe;    border-color: #fdfdfe;}
.alert-dark {    color: #141619;    background-color: #d3d3d4;    border-color: #bcbebf;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~SKIP NAV~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#skip a, #skip a:hover, #skip a:visited {
	position: absolute;
	background-color: #0065A8;
	padding: 10px 5%;
	color: #ffffff;
	top: -500px;
	left: 0;
	height: 1px;
	width: 1px;
	overflow: hidden;
}
#skip a:active, #skip a:focus {
	display: block;
	position: static;
	height: auto;
	width: auto;
	color: #ffffff;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ HEADER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#header * {	transition: .5s ease all;}
/*~~~~~ LOGO ~~~~~*/
#header .logo img {	width: 100%;}
#header .logo a {
	display: inline-block;
    line-height: 0;
    max-width: 641px;
    padding: 23px 0;
    max-height: 100px;
    width: 100%;
}
/*~~~~~ RIBBON ~~~~~*/
.navBar {
	background-color: #142c68;
	background: rgb(20,44,104);
	background: linear-gradient(90deg, rgba(20,44,104,1) 0%, rgba(20,44,104,1) 50%, rgba(220,228,239,1) 51%);
}
.navBar .container { display: flex;}
.navBar .container .sitename {	flex: 1;	background-color: #142c68;}
.navBar .container .sitename a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.2em;
    padding: 0.75em 0;
    display: block;
}
.navBar .container .sitename a:hover {    text-decoration: underline;}
.navBar .container nav { text-align: right;}
.navBar .container nav #main-menu {	background-color: #142c68;	border-radius: unset !important;	padding: 0;}
.navBar .container nav #main-menu li a { 	color: #ffffff;    font-size: 0.9em;	padding: 18px 18px;}
.navBar .container nav #main-menu li a:focus {    outline: 5px solid #008000;    z-index: 1;}
.navBar .container nav #main-menu li.oral a { 	padding: 16px 18px 17px;}
.navBar .container nav #main-menu li a:hover { 	background-color: #ffffff;	color: #142c68;	text-decoration: none;}
.about #main-menu .about a,.resources #main-menu .resources a,.oral #main-menu .oral a { 	text-decoration: underline;}
.navBar .container nav #main-menu .get-started-icon {
    background-color: #bb0e3d;
    display: inline-block;
    text-align: center;
    padding: 1px 5px 2px 6px;
    border-radius: 5px;
    margin-right: 5px;
    top: -1px;
    position: relative;
	color: #ffffff !important;
}
button#menu-button {
    border: none;
    background: none;
    color: #ffffff;
    font-weight: bold;
    padding: 10px;
	cursor: pointer;
	width: 100%;
}
button#menu-button:before {    content:'\2630';	padding-right: 10px;}
button#menu-button:hover {	background-color: #eeeeee;	color: #444444;}
@media only screen and (max-width: 1000px) {
.navBar {	background: linear-gradient(90deg, rgba(20,44,104,1) 0%, rgba(20,44,104,1) 50%, rgba(20,44,104,1) 51%);}
}
@media only screen and (max-width: 767px) {
.navBar .container {    display: block;}
.navBar .container nav #main-menu li a,.navBar .container nav #main-menu li.oral a{    padding: 10px;}
.navBar .container nav #main-menu li a:hover {    border-radius: 0px;}
.navBar .container nav #main-menu li.oral:before {    content: none;}
}
/*~~~~~~~~GET STARTED BTN~~~~~~~~*/
#header li.oral.get-started-menu a.launch, #header li.oral.get-started-menu a.reset {
	display: none;
}
body.cancer-sites.oral.Key.Things #header li.oral.get-started-menu a.default, body.cancer-sites.oral.Key.Things #header li.oral.get-started-menu a.launch, body.cancer-sites.oral.Characteristics #header li.oral.get-started-menu a.default, body.cancer-sites.oral.Characteristics #header li.oral.get-started-menu a.launch, body.cancer-sites.oral.Health.Status #header li.oral.get-started-menu a.default, body.cancer-sites.oral.Health.Status #header li.oral.get-started-menu a.launch, body.cancer-sites.oral.Results #header li.oral.get-started-menu a.default, body.cancer-sites.oral.Results #header li.oral.get-started-menu a.launch {
	display: none;
}
body.cancer-sites.oral.Key.Things #header li.oral.get-started-menu a.launch, body.cancer-sites.oral.Characteristics #header li.oral.get-started-menu a.reset, body.cancer-sites.oral.Health.Status #header li.oral.get-started-menu a.reset, body.cancer-sites.oral.Results #header li.oral.get-started-menu a.reset {
	display: block;
}
.navBar .container nav #main-menu li.oral {    background: #dce4ef;    padding-left: 35px;}
.navBar .container nav #main-menu li.oral:before {
    content:"\A";
    border-style: solid;
    border-width: 53px 0 0 35px;
    border-color: transparent transparent transparent #142c68;
    position: absolute;
    left: 0;
}
.navBar .container nav #main-menu li.oral * {    color: #3c3c3c;    font-weight: bold;    text-transform: uppercase;}
.navBar .container nav #main-menu li.oral a:hover {    background-color: #142c68;    color: #ffffff;}
@media only screen and (max-width: 767px) {
.navBar .container nav #main-menu li.oral:before {    content: none;}
.navBar .container nav #main-menu li.oral {    background: none;    padding-left: 0px;}
.navBar .container nav #main-menu li.oral * {    color: #ffffff;    font-weight: normal;    text-transform: uppercase;}
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MAIN CONTENT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~ BODY ~~~~~*/
.bodycontent {	padding-bottom: 3em;	float: right;	width: 100%;}
.bodycontent .container {
    background: #fff;
    padding: 30px;
    margin-top: -30px;
    box-shadow: 0 1px 6px -2px #999;
}
#mainContent {	width: 100%;	clear: both;}
#mainContent > * {    margin-top: 0;}
/*~~~~~ BODY LINK HOVERS ~~~~~*/

/*~~~~~ PAGE TITLE AND BREADCRUMBS ~~~~~*/
#breadcrumbs {    font-size: .9em;    padding: 10px 0;}
#breadcrumbs p {	margin: 0;}
#breadcrumbs a {	text-decoration: none;}
#breadcrumbs a:after {    padding: 0 0 0 9px;    color: #ccc;    content: "/\00a0";}
.title_and_breadcrumbs {    background: #dce4ef;    padding-bottom: 30px;}
/*~~~~~ CALLOUT ~~~~~*/
.callout {
    margin: 0 0 2em 2em;
    background: #eee;
    border: 5px solid #dce4ef;
    padding: 1em;
	min-width: 200px;
	width: 100%;
}
.normal.callout {	max-width: 35%;}
.wide.callout {	max-width: 50%;}
.narrow.callout {	max-width: 20%;	min-width: 35px}
@media only screen and (max-width: 900px) {
.page-with-sidebar .normal.callout, .page-with-sidebar .wide.callout, .page-with-sidebar .narrow.callout {	max-width: 100%;	float: none !important;	margin: 1em 0;}	
}
@media only screen and (max-width: 767px) {
.normal.callout, .wide.callout, .narrow.callout {	max-width: 100%;	float: none !important;	margin: 1em 0;}	
}
@media only screen and (max-width: 500px) {
.bodycontent .container {    padding: 15px; }
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SIDEBAR ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.page-with-sidebar .bodycontent .container {	display: flex;	flex-wrap: wrap;}
.page-with-sidebar .bodycontent .container {    padding: 30px 30px 30px 0;}
.page-with-sidebar #mainContent {	flex: 3;}
/*~~~~~ SIDEBAR BOX ~~~~~*/
.page-with-sidebar .sidebar {	flex: 1;	padding-right: 2em;	min-width: 300px; margin-bottom: 1em; }
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {    // IE9+ CSS
		.page-with-sidebar .sidebar {			width: 350px; max-width: 350px; 		}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
		.page-with-sidebar .sidebar {			width: 350px; max-width: 350px; 	}
}
.page-with-sidebar .HeaderLightBlue {	margin: 0;}
.page-with-sidebar .sidebar.right-sidebar {
	flex: 1;
	padding-right: 0;
	padding-left: 2em;
	min-width: 300px;
}
.page-with-sidebar .sidebar .sidebar-content ul {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-bottom: 1em;
}
.page-with-sidebar .sidebar .sidebar-content li a {
	text-decoration: none;
    display: block;
    color: #444444;
    transition: .5s ease all;
    padding: 8px 30px 8px 10px;
    border-bottom: 1px solid #d6d6d6;
    border-left: 3px solid transparent;
	background: #eee;
}
.methodology.page-with-sidebar .sidebar .methodology, 
.adjustment.page-with-sidebar .sidebar .adjustment, 
.risks.page-with-sidebar .sidebar .risks, 
.oral-limitations.page-with-sidebar .sidebar .oral-limitations, 
.oral-cancer.page-with-sidebar .sidebar .oral-cancer, 
.clinical-trials.page-with-sidebar .sidebar .clinical-trials, 
.treatment.page-with-sidebar .sidebar .treatment, 
.period-method.page-with-sidebar .sidebar .period-method, 
.screening.page-with-sidebar .sidebar .screening, 
.agreement.page-with-sidebar .sidebar .agreement, 
.contact.page-with-sidebar .sidebar .contact, 
.about-oral.page-with-sidebar .sidebar .about-oral, 
.patient.page-with-sidebar .sidebar .patient, 
.physician.page-with-sidebar .sidebar .physician, 
.page-with-sidebar .sidebar .sidebar-content li a:hover, 
.page-with-sidebar .sidebar .sidebar-content li a:focus {
	border-left: 3px solid #bb0e3d;
	background: #fff;
}
@media only screen and (max-width: 767px) {
.page-with-sidebar .bodycontent .container {	display: block; 	padding: 30px;}
.page-with-sidebar .sidebar,.page-with-sidebar .sidebar.right-sidebar {	padding: 0;	width: auto !important; min-width: auto !important;}
}
@media only screen and (max-width: 500px) {
.page-with-sidebar .bodycontent .container {	padding: 15px; }
}
/*~~~~~ SECOND SIDEBAR ~~~~~*/
.sidebar .sidebar-2 {	margin-top: 1em;	margin-bottom: 1em;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ HOMEPAGE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.home main {	padding-bottom: 0;}
.home main > .container {	max-width: none;}
.home main h2 {	font-size: 1.5em;}
.homeonly {	display: none;}
.home .homeonly {	display: inline-block;}
/*~~~~~ QUESTIONS ~~~~~*/
.questions a {
	border-bottom: 5px solid #bb0e3d;
	padding: 1em;
	text-decoration: none;
	color: #444444;
	transition: .5s ease all;
}
.questions a img {
	float: left;
	margin-right: 1em;
	-webkit-filter: invert(1);
	filter: invert(1);
}
.questions a p {	font-size: 1.5em;	margin: 0;}
.questions a:hover, .questions a:focus {
	background-color: #142c68;
	color: #ffffff;
	border-radius: 5px;
	box-shadow: 0 5px 5px #eeeeee;
}
.questions a:hover img, .questions a:focus img {	-webkit-filter: invert(0);	filter: invert(0);}
@media only screen and (max-width: 900px) {
.questions a {	text-align: center;}
.questions a img {	float: none;	margin-right: 0;	margin-bottom: 1em;}
}
@media only screen and (max-width: 767px) {
.questions {	display: none !important;}
}
/*~~~~~ WHY ~~~~~*/
.why ul {	padding-left: 1em;}
/*~~~~~ HOW ~~~~~*/
.how .flex-boxes-item {
	background-color: #142c68;
	color: #ffffff;
	padding: 1em;
	text-align: center;
}
.how .flex-boxes-item span {	font-family: 'Montserrat', sans-serif;	font-size: 3em;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ CANCER SITE PAGES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.cancer-sites .BGgreen h2 {	margin-top: 0;}
.cancer-sites .collapse-arrow {	width: 2em;	padding: 5px 0; float: left;}
.cancer-sites .collapse-arrow a {
	text-decoration: none;
	padding: 2px 0 2px 2em;
	background: url("/survivalcalculator/images/toggle-lg.png") 0 0 no-repeat;
}
.cancer-sites .collapse-arrow.open a {	background-position: left -82px;}
.cancer-sites .calcWrap.disabled .collapse-arrow {	padding: 0; margin-top: -3px;}
.cancer-sites .calcWrap.disabled .collapse-arrow a {
	background: none;
	padding: 0;
	font-weight: bold;
	font-size: 1.3em;
	color: #656565;
}
.cancer-sites .collapse-descrip h2 {	cursor: pointer;}
.cancer-sites.js .toggleReveal {	display: none;	border-top: 1px dashed #444444;}
.health_conditions p.BGwhite {	margin: 5px;}
.health_conditions p.BGwhite label {	padding: 5px;	margin: 0;	cursor: pointer;}
.health_conditions p.BGwhite.selected label {	background-color: #142c68;    color: #ffffff;}
.health_conditions .comorb_addtext {	font-weight: normal;	font-size: 0.9em;}
@media only screen and (max-width: 950px) {
	span#basicAdjAge + span:before,
	span#lifeExpAssessLbl:before,
	span[for="ageAdjustManual"]:before,
	span.hsa_age.margin-right-50:before,
	span.life_exp:before,
	span#lifeExpComorbLbl:before {
		content: '';
		display: block;
		margin-top: 0.5em;
	}
}
#subjectivCalc label { border-bottom: 1px solid #444444; padding-bottom: 1em; }
#subjectivCalc label:last-of-type { border-bottom: none; padding-bottom: 0; }
/*~~~~~ CHARACTERISTICS ~~~~~*/
#patient_toggle_wrap #collapsible-chart-button,#patient_toggle_wrap .collapsible-chart-content.mobileState{    display: block;}
#patient_toggle_wrap #collapsible-chart-button:before {    content: "\2630";    margin-right: 10px;}
#patient_toggle_wrap .collapsible-chart-content {	display: none;}
.input-borderstyle {
	padding: 0.5em 1em;
	margin-left: 2em;
	background-color: #dce4ef;
	font-weight: bold;
	display: inline-block;
}
.input-borderstyle:before, .input-borderstyle:after {	content: " - ";}
.single_patient h3,.original_patient_char h3,.multi_patient h3 {    margin-bottom: 0;    margin-top: .25em;}
.single_patient ul,.original_patient_char ul,.multi_patient ul {    margin: 0;}
.single_patient .characteristic,.original_patient_char .characteristic,.multi_patient .characteristic {    margin: 0;    margin-bottom: 0.5em;}
.red.characteristic, .red.characteristic li, .blue.characteristic, .blue.characteristic li, .caution-box {	color: #ffffff;}
.red.characteristic, .red.characteristic li {	background-color: #bb0e3d;}
.blue.characteristic, .blue.characteristic li {	background-color: #0065A8;}
.red.characteristic:before, .blue.characteristic:before {    filter: contrast(0%) brightness(0%) invert(100%);}
.caution-box, #copyLinkBox {
	color: #ffffff;
	background-color: #142c68;
	padding: 1em;
	position: relative;
}
.error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    padding: 0.5em;
    border-radius: .25rem;
    margin: 5px 1em 0;
    width: max-content;
    position: relative;
    max-width: 100%;
}
.error:before {
    content:"\A";
    position: absolute;
    top: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;  /* left arrow slant */
    border-right: 10px solid transparent; /* right arrow slant */
    border-bottom: 10px solid #f8d7da; /* bottom, add background color here */
}
#copyLinkBox a {
	position: absolute;
	top: 1em;
	right: 2%;
	display: block;
	color: #142c68;
	text-decoration: none;
	color: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 5px;
	text-transform: uppercase;
	width: 1.5em;
	height: 1.5em;
	text-align: center;
	font-weight: bold;
}
#copyLinkBox a:hover {	background-color: #ffffff;	color: #142c68;}
.compare_patient_char {    -webkit-columns: 300px 2;    -moz-columns: 300px 2;    columns: 300px 2;}
/*~~~~~ RESULTS ~~~~~*/
#mainContent2.page-with-sidebar #summary-results,#mainContent2.page-with-sidebar #details-results {	display: flex;	flex-wrap: wrap;}
#mainContent2.page-with-sidebar #summary-results .details-results,
#mainContent2.page-with-sidebar #summary-results .single_results,
#mainContent2.page-with-sidebar #details-results .trend_results {
	flex: 3;
}
.summary-legend .people img {    vertical-align: middle;}
.prognosis.flex-boxes-item {    max-width: 300px !important;    margin-right: 25px !important;}
.multi_patient_char:first-of-type, .patient_1_results {		margin-right: 1em;}
.multi-charac table thead th {    width: 33%;    width: calc(100% / 3);}
@media only screen and (max-width: 900px) {
	.multi_patient_char {		display: block !important;	}	
	.multi_year_chart.flex-boxes {    display: block; }
	.multi-patient .multi_year_chart .prognosis,	.multi-patient .multi_year_chart .summary-legend {		padding: 1em 1em 0;	}
	.multi-patient .patient_1_results,	.multi-patient .patient_2_results,	.multi_patient_char,		.multi_patient_char .flex-boxes-item,	.multi_year_chart .flex-boxes-item {		min-width: 150px !important;	}
	.summary-legend .people img {		width: 1.5em;		vertical-align: text-top;	}
}
@media only screen and (max-width: 767px) {
	#mainContent2.page-with-sidebar #summary-results,	#mainContent2.page-with-sidebar #details-results {		display: block;	}
	.multi-patient .patient_1_results { min-width: auto !important; }
}
@media only screen and (min-width: 730px) {
	h3.charac {margin-top: 0;}
}
@media only screen and (max-width: 400px) {
	.multi_patient_char:first-of-type,	.patient_1_results {		margin-right: 0;	}
}
/*~~~~~ LINE CHART ~~~~~*/
.trend_line_chart {
	border: 1px solid #9bb57f;
	border-radius: 15px;
	overflow: hidden;
	padding: 0 1em 1em;
	margin: 1.25rem 0;
}
.trend_line_chart h3 {    display: block;    width: 100%;}
.details-results-graph img[title*="Chart"] { min-width: 250px; }
.trend_results div.trend_line_chart:first-child {	margin-top: 0;}
.trend_results div.trend_line_chart:last-child {	margin-bottom: .25em;}
[class*="patient-chart-legend"] {    background: #E2E2E2;}
[class*="patient-chart-legend"] [class*="patient"] {    padding: 0.5em;    border: 1px solid #CCC;}
[class*="patient-chart-legend"] img {    margin-right: 0.5em;    margin-bottom: 0.25em;}
.details-results-table {    flex: 3 !important;    padding-left: 1em;}
.details-results-table td, .details-results-table th { padding: 4px 8px; white-space: nowrap; }
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.returntop {
	bottom: 3rem;
    position: fixed;
    right: 1rem;
    display: none;
    z-index: 99;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: url(/i/dccps/up-arrow.svg) center no-repeat;
    box-shadow: 0 0 8px rgba(0,0,0,.2);
}
.returntop span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.returntop:hover, .returntop:focus {    background: url(/i/dccps/up-arrow-hover.svg) center no-repeat;}
footer {	background: #142c68;	color: #ffffff;	clear: both;}
footer h2 {	font-size: 16px;	margin-top: 0;}
footer ul {	list-style: none;	padding: 0;}
footer a, footer a:visited, footer a:hover, footer a:focus {	color: #ffffff;	text-decoration: none;}
footer a:hover, footer a:focus {	text-decoration: underline;}
footer .social li {	display: inline-block;	padding: 0 20px 0 0;}
footer .social li a:hover, footer .social li a:focus {	opacity: .8;}
footer .linkList {	text-align: center;	margin: 0 0 20px 0;	padding-top: 30px;}
footer .linkList li {	display: inline-block;	margin: 0;}
footer .linkList li::after {	content: "|";	padding-left: 10px;}
footer .social .extlink, footer .linkList li.last:after {	display: none;}
@media only screen and (max-width: 500px) {
footer .linkList,  footer .text-center {	text-align: left;}
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ PAGE ELEMENTS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~ CALCULATOR FLOWCHART ~~~~~*/
.calc_flowchart {    display: flex;    margin: 4em 0 2em !important;}
.flowchart_title {
    width: 260px;
    height: 260px;
    padding: 10px;
    text-align: center;
    border-radius: 100%;
    overflow: hidden;
    border-right: 5px solid #000;
    border-top: 5px solid #000;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
    position: relative;
    transform: rotate(45deg);
    flex-shrink: 0;
}
.flowchart_title p {
    margin: 0;
    padding: 3em 1.25em 1.25em;
    height: 100%;
    width: 100%;
    font-weight: bold;
    font-size: 1.1em;
    border-radius: 100%;
    border: 20px solid #142c68;
    transform: rotate(315deg);
}
.flowchart_title p:before, .flowchart_title p:after {
    width: 5px;
    height: 13px;
    background: #000;
    content: "";
    position: absolute;
    top: -31px;
    right: calc(50% - 5px);
}
.flowchart_title p:after {    top: unset;    bottom: -31px;}
.flowchart_paths {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: -26px;
}
.flowchart_calc {
    display: flex;
    flex: 1;
    position: relative;
    align-items: flex-start;
}
.flowchart_calc:first-of-type:after, .flowchart_calc:last-of-type:after {
    width: 35px;
    content: "";
    display: block;
    background: #000;
    height: 2px;
    position: absolute;
    top: 71px;
    left: -31px;
    transform: rotate(-45deg);
}
.flowchart_calc:last-of-type:after {    transform: rotate(45deg);    top: 46px;}
.flowchart_num {
    font-size: 3em;
    font-weight: bold;
    white-space: nowrap;
    padding-left: 40px;
    margin-left: 0;
    border-bottom: 3px solid #000000;
}
.flowchart_calc .flowchart_num { color: #008000; }
.flowchart_calc:first-of-type .flowchart_num {color: #0879a1;}
.flowchart_calc:last-of-type .flowchart_num {color: #8147c3;}
.flowchart_text {    padding-left: 1.5em;    padding-top: .5em;}
.flowchart_calcname {
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.flowchart_calc .flowchart_calcname { color: #008000; }
.flowchart_calc:first-of-type .flowchart_calcname {color: #0879a1;}
.flowchart_calc:last-of-type .flowchart_calcname {color: #8147c3;}
@media (min-width: 953px) and (max-width: 1150px) {
	.flowchart_title {
    width: 200px;
    height: 200px;
    margin: 2em 0;
  }	
	.flowchart_title p {
	    padding: 1.25em;
	}
}
@media (max-width: 952px) {
	.calc_flowchart {flex-direction: column;margin: 0 !important;align-items: center;}
	.flowchart_title {transform: rotate(0deg);border-radius: 0;border: none;width: 100%;height: auto;padding: 0;}
	.flowchart_title p {transform: rotate(0deg);border-radius: 0;padding: 1em;}	
	.flowchart_title p:before, .flowchart_title p:after { content: none; }
	.flowchart_paths {flex-direction: row;margin-top: 0px;margin-bottom: 2em;}
	.flowchart_calc {flex-direction: column;border: 2px solid #142c68;}
	.flowchart_num {padding-left: 10px;width: 100%;border-bottom-color: #142c68;}
	.flowchart_calc:first-of-type:after, .flowchart_calc:last-of-type:after { content: none; }
	.flowchart_text {padding: 12px;height: 100%;}
}
@media (max-width: 550px) {
	.flowchart_paths {flex-direction: column;}
	.flowchart_calc {flex-direction: row;}
	.flowchart_num {padding-left: 12px;width: auto;border: none;}
}
/*~~~~~ DISCLAIMER MODAL & DIALOG BOX ~~~~~*/
#disclaim-over, .ui-widget-overlay {
	background: none;
	position: fixed;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;    
	opacity: 1;
	background-color: rgba(0,0,0,0.5);
	z-index: 99999;
}
#disclaim-over #disclaim-dialog, .ui-dialog {
	width: auto !important;
	max-width: 50%;
	left: 25% !important;
	max-height: 90%;
	width: 100%;
	overflow: auto;
	position: fixed;
	top: 5% !important;
	box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.36);
	background-color: #ffffff;
	z-index: 99999;
}
#disclaim-over #disclaim-dialog h2, .ui-dialog .ui-dialog-titlebar {
	background: none;
    background-color: #142c68;
    margin: 0;
    padding: 15px 20px;
    color: #ffffff;
    font-weight: normal;
    font-size: 1.5em;
}
#disclaim-over #disclaim-dialog h2, .ui-dialog .ui-dialog-titlebar .ui-dialog-title {    text-overflow: unset;    white-space: unset;}
#disclaim-over #disclaim-dialog #disclaimer-body, #disclaim-over #disclaim-dialog #disclaimer-body + form, .ui-dialog .ui-dialog-content {	padding: 1em 2em;}
@media only screen and (max-width: 1100px) {
#disclaim-over #disclaim-dialog, .ui-dialog {	max-width: 75%;	left: 12.5% !important;}
}
@media only screen and (max-width: 767px) {
#disclaim-over #disclaim-dialog, .ui-dialog {	max-width: 90%;	left: 5% !important;}
#disclaim-over #disclaim-dialog h2, .ui-dialog .ui-dialog-titlebar {	padding: 1em 2em;	font-size: 1.25em;}
}
@media only screen and (max-width: 500px) {
#disclaim-over #disclaim-dialog #disclaimer-body, #disclaim-over #disclaim-dialog #disclaimer-body + form, .ui-dialog .ui-dialog-content {    padding: 1em;}
}
/*~~~~~ TABLE ~~~~~*/
.rwd-table {	width: 100%;	overflow-x: auto;}
.rwd-table table {	min-width: 300px;}
table {
    margin-bottom: 1.2em;
	border-spacing: 0;
    border-collapse: collapse;
	background-color: transparent;
}
table.full-width {	width: 100%;}
th, thead td {
    background: #222222;
    color: #ffffff;
    font-weight: normal;
	word-break: keep-all;
}
th, td {    border: 1px solid #cccccc;    padding: 8px;}
table.text-center-td td {	text-align: center;}
th {    text-align: left;}
tbody th, tr.secondary th, tr.subhead td, tr.subhead th {    background: #555555;}
tbody tr:hover {    background-color: #dce4ef!important;}
/*~~~~~ FLEX BOXES ~~~~~*/
.flex-boxes, .mobileState.flex-boxes {	display: flex;	flex-wrap: wrap;}
.flex-boxes .flex-boxes-item {	flex: 1;}
.flex-boxes.extra-sp .flex-boxes-item {margin: 1em;}
.flex-boxes.extra-sp .flex-boxes-item:first-of-type {	margin-left: 0;}
.flex-boxes.extra-sp .flex-boxes-item:last-of-type {	margin-right: 0;}
.flex-boxes .flex-boxes-item.width-2 {	flex: 2;}
.flex-boxes .flex-boxes-item.width-3 {	flex: 3;}
.flex-boxes .flex-boxes .flex-boxes-item {	margin: 0;}
#chart_year_container {margin-left: .5em;}
/* Fixes for IE 11 line graph display. */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
	.flex-boxes .flex-boxes-item.details-results-graph {		flex: none;	}
	.flex-boxes .trend_results {		width: 100%;	}
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) and (max-width: 900px) {
	.page-with-sidebar#mainContent2 #summary-results, .page-with-sidebar#mainContent2 #details-results {display: block;}
}
@media only screen and (max-width: 767px) {
	#summary-results .flex-boxes, 	#summary-results .mobileState.flex-boxes {		display: flex;	}
	.flex-boxes .flex-boxes-item {		min-width: 300px !important;	}
	.flex-boxes.extra-sp .flex-boxes-item:first-of-type,  	.flex-boxes.extra-sp .flex-boxes-item:last-of-type {		margin: 1em;	}
	.flex-boxes .flex-boxes .flex-boxes-item:first-of-type,  	.flex-boxes .flex-boxes .flex-boxes-item:last-of-type {		margin: 0;	}
	.BGgreen div[class*="-content"] .flex-boxes.extra-sp .flex-boxes-item:first-of-type,  
	.BGgreen div[class*="-content"] .flex-boxes.extra-sp .flex-boxes-item:last-of-type {
		margin: 0;
	}
}
@media only screen and (min-width: 600px) {
	.flex-boxes .prognosis.flex-boxes-item {		min-width: 100px;	}
}
@media only screen and (max-width: 500px) {
	.flex-boxes .flex-boxes-item {		min-width: 98% !important;	}
	.flex-boxes.extra-sp .flex-boxes-item,  .flex-boxes.extra-sp .flex-boxes-item:first-of-type,  .flex-boxes.extra-sp .flex-boxes-item:last-of-type {		margin: 0 0 1em;	}
	.trend_results {		max-width: 100%;	}
	.health_container .flex-boxes, .mobileState.flex-boxes,
	#summary-results .flex-boxes, 
	#summary-results .mobileState.flex-boxes,
	.collapsible-chart-content .flex-boxes,
	.trend_line_chart.flex-boxes {
		display: block;
	}
	.health_container .flex-boxes .flex-boxes-item,
	.prognosis.flex-boxes-item,
	.summary-legend.flex-boxes-item,
	.collapsible-chart-content .flex-boxes-item,
	.details-results-graph.flex-boxes-item,
	.details-results-table.flex-boxes-item,
	.details-results-graph.flex-boxes-item {
		min-width: inherit;
	}
}
/*~~~~~ ALIGNMENT ~~~~~*/
.page-right-no-flt {	width: 100%;	text-align: right;}
.text-left {	text-align: left;}
.text-center {	text-align: center;}
.text-right {	text-align: right;}
/*~~~~~ BACKGROUNDS ~~~~~*/
.calcWrap.BGgreen, .BGltBlue {	background-color: #dce4ef;}
.BGgreen, .GrayBG, .calcWrap.BGgreen .BGgreen-content {	background-color: #eeeeee;}
.BGgreen.disabled {	background: #eaeaea;	color: #656565;}
.BGgreen.no-header {	padding: 1em;}
.BGgreen div[class*="-content"] {	padding: 1em;}
.BGwhite {	background: #ffffff;}
/*~~~~~ CLICKABLE CONTENT ~~~~~*/
.clickable { transition: all .2s ease-in-out; position: relative; }
.clickable * { text-decoration: none; color: inherit; }
.clickable u { color: #0065A8; }
.clickable a:focus { display: block; }
.clickable:hover, .clickable:focus { border-left: 5px solid #004600; transform: scale(1.02); }
.clickable:hover *, .clickable:focus * { text-decoration: none; color: inherit; }
.clickable:hover u, .clickable:focus u { color: #0065A8; }
.clickable u:hover, .clickable u:focus {     
	background: linear-gradient(to bottom, #e2e2e2 0%, #e2e2e2 100%);
	background-position: 0 100%;
	background-repeat: repeat-x;
	text-decoration: underline; 
	color: #0065A8; 
}
/*~~~~~ BORDERS ~~~~~*/
.greenborder { border-color: #008000; }
.lb-0 { border-left-width: 0px; border-left-style: solid; }
.lb-1 { border-left-width: 1px; border-left-style: solid; }
.lb-2 { border-left-width: 2px; border-left-style: solid; }
.lb-3 { border-left-width: 3px; border-left-style: solid; }
.lb-4 { border-left-width: 4px; border-left-style: solid; }
.lb-5 { border-left-width: 5px; border-left-style: solid; }
.greenborder.clickable:hover, .greenborder.clickable:focus { border-color: #004600; }
/*~~~~~ PADDING/MARGIN ~~~~~*/
.top-btm-150 {	padding-top: 150px;	padding-bottom: 150px;}
.top-btm-100 {	padding-top: 100px;	padding-bottom: 100px;}
.top-btm-50 {	padding-top: 50px;	padding-bottom: 50px;}
.margin-top-btm-25 {	margin-top: 25px;	margin-bottom: 25px;}
.margin-right-150 {	margin-right: 150px;}
.margin-right-50 {	margin-right: 50px;}
.no-margin, .m-0 {	margin: 0;}
.m-1 { margin: 1em !important; }
.m-2 { margin: 2em !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 1em !important; }
.mt-2 { margin-top: 2em !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 1em !important; }
.mb-2 { margin-bottom: 2em !important; }
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 1em !important; }
.ml-2 { margin-left: 2em !important; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 1em !important; }
.mr-2 { margin-right: 2em !important; }
.no-padding, .p-0 {	padding: 0;}
.p-1 { padding: 1em !important; }
.p-2 { padding: 2em !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 1em !important; }
.pt-2 { padding-top: 2em !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 1em !important; }
.pb-2 { padding-bottom: 2em !important; }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 1em !important; }
.pl-2 { padding-left: 2em !important; }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 1em !important; }
.pr-2 { padding-right: 2em !important; }
@media only screen and (max-width: 900px) {
.top-btm-150, .top-btm-100, .top-btm-50 {	padding: 15px 0;}
.margin-right-150 {	margin-right: 50px;}
}
/*~~~~~ FORM FIELDS ~~~~~*/
label, input[type="submit"] {	display: block;	margin-top: 1em;	margin-bottom: 5px; }
label {	font-weight: bold;	font-family: 'Montserrat', sans-serif; display: inline-block;}
input[type="text"], input[type="number"], input[type="url"], input[type="email"], textarea, select {
	display: block;
	padding: 5px;
	max-width: 100%;
}
input[type="checkbox"] {	width: auto;	display: inline-block;}
.field-help-text {	font-weight: normal;}
.required-field:after {	content: "*";	color: #bb0e3d;}
.inline-field {	display: inline-block;}
.short-field {	padding-right: 7px;}
.shorter-field {	width: 15%;	min-width: 150px;}
.disabled {	color: #cccccc;	pointer-events: none;}
input:disabled ~ span {	opacity: .5;}
@supports (-ms-ime-align: auto ){	[disabled] ~ span {}}
label.disabledInput input[type="radio"] {	display: none;}
label.disabledInput {
	background: #eaeaea;
	color: #656565;
	border: 1px solid #c7c7c7;
	padding: 5px !important;
	border-radius: 10px;
	pointer-events: none;
	margin-left: -3px;
}
@media only screen and (max-width: 767px) {
.short-field {	width: 100%;}
.inline-field {	display: block;}
}
@media only screen and (max-width: 500px) {
input, select { width: 100%; }
input[type="radio"] { width: auto; }
}
/*~~~~~ HEADER & BACKGROUND STYLES ~~~~~*/
.HeaderBlue {
	background-color: #142c68;
	color: #ffffff;
	padding: 1em;
	margin-top: 0;
	display: block;
	margin: 0;
	border: 0;
}
button.HeaderBlue:hover {	background-color: #eeeeee;	color: #444444;}
.HeaderLightBlue {
	background: #0065A8;
    color: #ffffff;
    padding: 10px 13px;
    font-size: 1.1em;
    display: block;
}
.HeaderLightBlue a { color: #ffffff; text-decoration: none; }
.HeaderLightBlue a:hover { text-decoration: underline; }
.GrayBG { background-color: #eeeeee;	margin: 0;}
.GrayBG .paddedBox { padding: 0 1em 3em;}
.HlgtGreen { background-color: #dce4ef;	padding: .75em;}
/*~-------------------~~~~~~~ BUTTONS ~~~-------------------~~~~~*/
/*~~~~~ Primary Button ~~~~~*/
#mainContent [class*="-btn"], #mainContent .ui-button, #mainContent button, #disclaim-over #disclaim-dialog input[type="button"] {
	cursor: pointer;
	position: relative;
	background: none;
	border: none;
	transition: .5s ease all;
	font-size: 1em;
    border-radius: 3px;
    padding: .5em 1em;
    margin-bottom: 20px;
	color: #ffffff;
	background-color: #008000;
    border-bottom: 3px solid #004600;
}
#mainContent [class*="-btn"]:after, #mainContent .ui-button:after, #mainContent button:after {
	content: "\25ba";
    font-size: 0.7em;
    padding-left: 8px;
    top: -1px;
    position: relative;
}
#mainContent [class*="-btn"].back-btn:after, #mainContent .ui-button.back-btn:after,
button#collapsible-chart-button:after,
button#sidebar-menu-button:after,
#mainContent [class*="-btn"].secondary:after, #mainContent .ui-button.secondary:after, #mainContent button.secondary:after {
	content: none;
}
#mainContent [class*="-btn"].back-btn:before, #mainContent .ui-button.back-btn:before {
	content: "\25c4";
    font-size: 0.7em;
    padding-right: 8px;
    top: -1px;
    position: relative;
}
#mainContent [class*="-btn"] + [class*="-btn"], #mainContent [class*="-btn"] + .ui-button, #mainContent [class*="-btn"] + button, 
#mainContent .ui-button + [class*="-btn"], #mainContent .ui-button + .ui-button, #mainContent .ui-button + button,
#mainContent button + [class*="-btn"], #mainContent button + .ui-button, #mainContent button + button {
	margin-left: 0.5em;
	margin-right: 0.5em;
}
#mainContent [class*="-btn"]:first-of-type, #mainContent .ui-button:first-of-type, #mainContent button:first-of-type {	margin-left: 0;}
#mainContent [class*="-btn"]:last-of-type, #mainContent .ui-button:last-of-type, #mainContent button:last-of-type {	margin-right: 0;}
#mainContent [class*="-btn"]:hover, #mainContent [class*="-btn"]:focus, #mainContent .ui-button:hover, #mainContent .ui-button:focus, #mainContent button:hover, #mainContent button:focus, #disclaim-over #disclaim-dialog input[type="button"]:hover, #disclaim-over #disclaim-dialog input[type="button"]:focus {
	background: none;
	border: none;
	background-color: #004600;
	color: #ffffff;
    border-bottom: 3px solid #004600;
}
/*~~~~~ Media Queries ~~~~~*/
@media only screen and (max-width: 650px) {
	#mainContent [class*="-btn"], #mainContent .ui-button, #mainContent button {		width: 100%;		margin: 1em 0 0 !important;	}
}
@media only screen and (max-width: 400px) {
	#mainContent [class*="-btn"], #mainContent .ui-button, #mainContent button {		min-width: auto !important;	}
}
/*~~~~~ Secondary Button ~~~~~*/
#mainContent [class*="-btn"].secondary, #mainContent .ui-button.secondary, #mainContent button.secondary {
    border-bottom: 3px solid #001900;
    background: #005200;
}
#mainContent [class*="-btn"].secondary:hover, #mainContent .ui-button.secondary:hover, #mainContent button.secondary:hover {    background: #001900;}
/*~~~~~ SPECIFIC BUTTONS ~~~~~*/
.ui-dialog-titlebar-close, .white-btn {
    background: #ffffff;
    color: #444444;
    border-bottom-color: #ffffff;
}
.ui-dialog-titlebar-close:hover, .white-btn:hover {    background-color: #cccccc;}
.full-width-btn {	width: 100%;	margin-left: 0 !important;	margin-right: 0 !important;}
.form_field [class*="-btn"] {	margin-bottom: 0;}
[class*="-btn"].print-icon:after, .ui-button.print-icon:after, button.print-icon:after,
[class*="-btn"].no-arrow:after, .ui-button.no-arrow:after, button.no-arrow:after,
[class*="-btn"].cancel-btn:after, .ui-button.cancel-btn:after, button.cancel-btn:after {
	/* uses inline SVG */
	content: none;
}
[class*="-btn"].print-icon svg, .ui-button.print-icon svg, button.print-icon svg {
	position: absolute;
    left: 1em;
    top: 0.35em;
}
[class*="-btn"].print-icon, .ui-button.print-icon, button.print-icon {    padding-left: 2.5em !important;}
/*~~~~~ 3 LINK OPTIONS ~~~~~*/
#tools {		text-align: right;	background-color: #142c68;	color: #ffffff;}
#tools a {
	display: inline-block;
	background-repeat: no-repeat;
	padding: 0.5em;
	color: #ffffff;
}
#tools a:hover {	background-color: #ffffff;	color: #142c68;}
#tools a:before {	margin-right: 0.5em;	top: 2px;	position: relative;}
@media only screen and (max-width: 767px) {
#tools {	width: 100%;}
}
/*~~~~~ 3 STEP PROCESS ~~~~~*/
aside.step {	background-color: #142c68;	padding: 0.5em;	color: #ffffff;}
@media only screen and (max-width: 767px) {
aside.step {	width: 100%;}
}
/*~~~~~-------------------~~~ TOOLTIPS ~~~~~-------------------~~~*/
.vis-hid { /*For tooltips*/
	position: absolute;
	clip: rect(1px 1px 1px 1px);
	clip: rect(1px, 1px, 1px, 1px);
	margin: -1px;
	border: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
a.tooltip {
	border-bottom: 1px dashed #2e2f31;
	cursor: help;
	text-decoration: none;
	color: #444444;
	margin-right: 5px;
}
label a.tooltip, h1 a.tooltip, h2 a.tooltip, h3 a.tooltip, h4 a.tooltip, h5 a.tooltip, h6 a.tooltip {	margin-left: 1em;}
.tooltip:after {
	content: "i";
	background-color: #bb0e3d;
	width: 16px;
	height: 14px;
	font-size: 14px;
	padding: 1px 1px 3px;
	font-weight: bold;
	position: relative;
	text-align: center;
	color: #ffffff;
	border-radius: 100px;
	margin-left: 5px;
	display: inline-block;
}
.tippy-box { background-color: #dce4ef; color: #444; box-shadow: 0px 4px 6px #343434c4; }
.tippy-content { padding: 10px 12px; }
.tippy-arrow { color: #dce4ef; box-shadow: 0px 10px 5px 0px #343434c4; }
/*~~~-------------------~~~~~ ACCORDION ~~-------------------~~~~~~*/
.ui-accordion a, .ui-accordion a:hover, .ui-accordion a:focus {	background: none!important; }
.ui-accordion .ui-accordion-header {
    width: 100%;
    margin: 0 0 10px 0;
    font-size: 1em;
    padding: 0;
    font-family: 'Source Sans Pro', Helvetica, sans-serif;
    display: block;
	  background: none;
    background-color: #eeeeee;
    border: 5px solid #dce4ef;
    border-radius: unset;
}
.ui-accordion .ui-accordion-header a {
    display: inline-block;
    text-align: left;
    color: #222222 !important;
    border-radius: 0;
    margin-bottom: 0;
	  padding: .5em 1em .5em 1.5em;
}
.ui-accordion .ui-accordion-header:hover, .ui-accordion .ui-accordion-header:focus {    background-color: #dce4ef;}
.ui-accordion .ui-accordion-header a:hover, .ui-accordion .ui-accordion-header a:focus {    text-decoration: none;}
.ui-accordion .ui-accordion-content {
    font-family: inherit;
    padding: 10px 20px;
    border: none;
    border-radius: unset;
    background: none;
    color: inherit;
    line-height: inherit;
    font-size: 16px;
}
.ui-accordion .ui-accordion-header .ui-icon {
    position: absolute;
    left: 0;
    top: 43%;
}
@media only screen and (max-width: 500px) {
	.ui-accordion .ui-accordion-content {	    padding: 0 15px;	}
}
/*~~----------------------~~~ SECONDARY MENUS ~~----------------------~~~*/
#sidebar-menu-button,
#collapsible-chart-button {
	width: 100%;
	padding: 10px;
	text-align: left;
	cursor: pointer;
}
#patient_toggle_wrap button#collapsible-chart-button { margin-bottom: 0; }
@media only screen and (max-width: 767px) {
#sidebar-menu-button:before,#collapsible-chart-button:before {	content: "\2630";	margin-right: 10px;}
#chart_options button#collapsible-chart-button, #results button#sidebar-menu-button { margin-bottom: 0; }
#chart_options button#collapsible-chart-button label[for="chartTypeSelect"], #results button#sidebar-menu-button label[for="chartTypeSelect"] { margin-top: 0; }
#chart_options button#changeCharts, #results .sidebar-content button { margin: 1em 0 0; }
}
/*~~----------------------~~~ SHOW/HIDE ON MOBILE ~~----------------------~~~*/
@media (min-width: 768px) {
.mobileState {	display: inherit; }
.mobileOnly {	display: none; }
}
@media (max-width: 767px) {
.mobileState:not(.no-hide) {	display: none; }
.mobileOnly {	display: inherit; }
}