/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local(''),
       url('/toolbox/fonts/open-sans-v23-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/toolbox/fonts/open-sans-v23-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(''),
       url('/toolbox/fonts/open-sans-v23-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/toolbox/fonts/open-sans-v23-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(''),
       url('/toolbox/fonts/open-sans-v23-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/toolbox/fonts/open-sans-v23-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body { font-family: 'Open Sans', Arial, sans-serif; background: #eee url("/i/background.png") no-repeat; background-size: 100%; font-weight: 300; }
.container { width: 98%; max-width: 1480px; }

.whiteWrap { padding: 1.5rem 2rem; background: #fff; }
.purpWrap { padding: .5rem .5rem; background: #5b3e57; }
.well { padding: 1rem; background: #e7efe9; margin-bottom: 1rem; }
@media (max-width: 47.99em) {
	.whiteWrap { padding: 1rem; }
}

/* Rural urban tag for the top of the table */

.title-tag {
	background: #fee5d9;
	color: #a50f15;
	border: 1px solid #eed1c2;
  }
  


/* ==================================================
	Typography
================================================== */
h1, .h1 { font-size: 26px; padding: 0; margin: 0 0 1rem 0; font-weight: 700; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; margin-bottom: .25em; }
h1, h2, h3, h4, h4, h6 { color: #444; margin-top: 0; }
@media (max-width: 47.99em) {
	h1, .h1 { font-size: 24px; }
	h2 { font-size: 22px; }
	h3 { font-size: 18px; }
	h4 { font-size: 16px; }
}

label { margin-bottom: .25rem; font-weight: bold; }
label[for] { cursor: default; }

.lead { font-size: 1.125rem; }

.h-accent { border-bottom: 1px solid #ccc; position: relative; padding-bottom: .5rem; display: block; }
.h-accent:after { position: absolute; left: 0; bottom: -3px; content: ""; width: 33%; height: 6px; background: #b9d3bf/*f5db74*/; }
/* data viz titles */
.h-accent small { font-size: 1rem; }


.btn-pulse { background: #6e4f6a; border-color: #6e4f6a; }
.btn-pulse:active, .btn-pulse:hover, .btn-pulse:focus { background: #4c3645!important; border-color: #4c3645!important; }

a { color: #07458A /*305d83*/; }
a:hover, a:focus { color: #032141; }
main a { text-decoration: underline; }
a.btn { text-decoration: none; }
.extlink { margin-left: .2em; }

/* ==================================================
	Header
================================================== */
header { background: #fff; }
.grayBar { background: #545759; color: #aaa; font-size: .8125rem; }
.grayBar a { color: #fff; text-decoration: none; padding: .5rem; display: inline-block; margin-left: .5rem; }
.grayBar abbr { text-decoration: none; }
	.grayBar a:hover, .grayBar a:focus { text-decoration: underline; color: #fff; }
	.grayBar a:hover abbr, .grayBar a:focus abbr { cursor: pointer; text-decoration: underline; }
.grayBar abbr { display: none; }
a.hhs-logo { padding-left: 2.3em; background: url("/i/hhs-logo.png") left center no-repeat; }
a.nih-logo { padding-left: 3em; background: url("/i/nih-logo.png") left center no-repeat; }
@media (max-width: 640px) {
	.grayBar span { display: none; }
	.grayBar abbr { display: inline-block; }
}
.siteLogo img { max-height: 54px; max-width: 432px; margin: 23px 0; }

.socialMedia { position: relative; height: 77px; font-size: .875rem; }
.socialMedia a { text-decoration: none; background: #07458a; color: #fff; border-radius: 50%; height: 1.65rem; width: 1.65rem; text-align: center; display: inline-block; padding: 3px; }
.socialMedia a:hover, .socialMedia a:focus { text-decoration: underline; color: #fff; }
.socialMedia ul { position: absolute; bottom: 0; right: 15px; margin: 0; padding: 0; list-style: none; }
.socialMedia li { display: inline-block; margin: 0 .2em; }
@media (max-width: 47.99em) {
	.socialMedia { display: none; }
}

.ribbon-bar { background-color: #f1cc3f; background-attachment: fixed; background-size: cover; padding: 1rem 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23fdf5d8'/%3E%3Cstop offset='1' stop-color='%23f1cc3f'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%23f7e18c'/%3E%3Cstop offset='1' stop-color='%23f1cc3f'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='translate(280 0)'%3E%3Cg transform='translate(0 120)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(-126 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.59' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }

.logo { display: inline-block; margin-right: .75rem; }
.ribbon-bar p { margin: 0; padding: 1rem 0 0 .75rem; display: inline-block; font-size: 1.125rem; font-weight: 400; color: #333; vertical-align: bottom; line-height: 1; border-left: 1px solid #f0c003; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.75); letter-spacing: -.02rem; }


@media (max-width: 48.99em) {
	.ribbon-bar { display: table; width: 100%; }
	.logo a { display: table-cell; padding: 0; margin-left: 0; margin-bottom: .5rem; }
	.ribbon-bar p { display: table-cell; vertical-align: middle; line-height: 1.1; padding: .5rem 0 0 0; border-left: none; box-shadow: none; }
}
@media (max-width: 34.99em) {
	.ribbon-bar p { font-size: 1em; }
}


/* ==================================================
	Main Nav
================================================== */
/* Smart Menus Overwrites */
/* mobile first */
.sm-clean { border-radius: 0; padding: 1rem 0 0 0; background: #6e4f64; display: none; }
.sm-clean a, .sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active { font-family: inherit; color: #fff; font-size: 0.9375rem; border-radius: 0!important; }
/* desktop */

@media (min-width: 768px) {
	.sm-clean { display: flex!important; padding: 0; }
	.sm-clean > li { text-align: center; }
	.sm-clean > li > a { border-right: 1px solid rgba(255,255,255,.4); }
		.sm-clean > li:first-child > a { border-left: 1px solid rgba(255,255,255,.4); }
	.sm-clean > li > a:hover, .sm-clean > li > a:focus, .sm-clean > li > a:active, .sm-clean > li > a.highlighted { background: #4c3645; }
	
	.sm-clean ul { width: 100%!important; margin-top: 0!important; border: none!important; border-radius: 0!important; }
	.sm-clean ul:before, .sm-clean ul:after { display: none; }
	.sm-clean a span.sub-arrow { border-top-color: #fff; }
	.sm-clean a:focus span.sub-arrow, .sm-clean a:hover span.sub-arrow, .sm-clean .highlighted span.sub-arrow { border-top-color: #333; }
	.sm-clean ul a { color: #5b3e57; }
	.sm-clean ul a:hover, .sm-clean ul a:focus { background: #4c3645; }
	
	.sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active, .sm-clean ul a.highlighted { background: #4c3645; }
	.sm-clean span.scroll-up:hover span.scroll-up-arrow, .sm-clean span.scroll-up:hover span.scroll-down-arrow { border-color: transparent transparent #0000EE transparent; }
	.sm-clean span.scroll-down:hover span.scroll-down-arrow { border-color: #0000EE transparent transparent transparent; }
}
@media (min-width: 900px) {
	.sm-clean > li { width: 20%; }
}

/* active menu item */
.home #main-menu .home, .data #main-menu .data, .interventions #main-menu .interventions, .about #main-menu .about, .help #main-menu .help { background: #4c3645; }
@media (max-width: 47.99em) {
	.home #main-menu .home, .data #main-menu .data, .interventions #main-menu .interventions, .about #main-menu .about, .help #main-menu .help { background: #7d5e73; border-left: 1px solid #fff; }
}

/* more mobile CSS */
.navBar { position: relative; background: #6e4f64; }
#menu-button { display: none; }
.js .mobileState { display: block; }
@media (max-width: 47.99em) {
	.navBar { padding: .5em 0; margin-bottom: .5em; }
	/* only show the toggle and hide the menu if JS is enabled */
	.js #menu-button { display: block; width: 100%; text-align: left; padding: .5rem 1rem; font-size: 1.125rem; box-shadow: inset 0 -1em 10px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.45); text-shadow: 0 1px 0 rgba(0,0,0,.6); background: #3c0535; border-color: #3c0535; font-variant: all-small-caps; line-height: 1.25; }
	#menu-button:hover, #menu-button:focus, #menu-button:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
	.js .mobileState { display: none; }	
	
	.js #menu-button svg { float: right; }
	.line { fill: none; stroke: #fff; stroke-width: 6; transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1); }
	.line1 { stroke-dasharray: 60 207; stroke-width: 6; }
	.line2 { stroke-dasharray: 60 60; stroke-width: 6; }
	.line3 { stroke-dasharray: 60 207; stroke-width: 6; }
	.js #menu-button[aria-expanded="true"] .line1 { stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 6; }
	.js #menu-button[aria-expanded="true"] .line2 { stroke-dasharray: 1 60; stroke-dashoffset: -30; stroke-width: 6; }
	.js #menu-button[aria-expanded="true"] .line3 { stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 6; }
}

/* Breadcrumbs */
.crumbs { padding: 1rem 0; font-weight: 400; font-size: .875rem; }
.crumbs a { text-decoration: none; }
.default .crumbs { display: none; } /* body class for loner pagers to supress crumbing */ 
@media (max-width: 47.99em) {
	.crumbs { padding-top: .75em; }
}


/* ==================================================
	Footer
================================================== */
.stayConnected h2 { margin: 0 0 0 1rem; font-size: 1.35rem; }
.stayConnected ul { list-style: none; margin: 1rem 0 0 0; padding: 0; display: flex; flex-wrap: wrap; }
.stayConnected li { flex-basis: 33%; padding: 0; margin: .75rem 0; }
.stayConnected a { color: #07458a; display: flex; align-items: center; padding-right: .5rem; }
.stayConnected li svg { align-self: flex-start; background: #53585a; border-radius: 50%; padding: .4rem; height: .975rem; width: .975rem!important; margin-right: .2rem; }
.stayConnected a:hover, .stayConnected a:focus { color: #0670c9; }
@media (max-width: 1199px) {
	.stayConnected li { flex-basis: 50%; }
}
@media (max-width: 767px) {
	.stayConnected { padding: 1rem; }
	.stayConnected li { flex-basis: 33%; }
	.connected-img { width: 50px; }
}
@media (max-width: 459px) {
	.stayConnected li { flex-basis: 50%; }
}

footer { color: #fff; font-size: .875rem; }
footer a { color: #fff; text-decoration: none; }
	footer a:hover, footer a:focus { color: #fff; text-decoration: underline; }
ul.inline-links { list-style: none; margin: 0; padding: 0; }
ul.inline-links li { margin: 0; padding: 0; display: inline-block; }

.btm-nav ul { list-style: none; margin: 0 0 0 2rem ; padding: 1rem 0; }
.btm-nav ul a { background: url("../i/footer-arrow-right.png") right center no-repeat; padding-right: 1rem; }
@media (max-width: 47.99em) {
	.btm-nav ul { margin-left: 1rem; }
}

/* return to top */
.returntop { position: fixed; bottom: 1rem; right: 1rem; display: none; z-index: 99; width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 0 8px rgba(0,0,0,.2); text-align: center; background: #fff; }
.returntop span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.returntop svg { border: 1px solid #07458a; border-radius: 50%; margin-top: 8px; padding: 5px; height: 34px; width: 34px; }
.returntop svg path { fill: #07458a; }
.returntop:hover, .returntop:focus { background: #07458a; }
.returntop:hover svg, .returntop:focus svg { border-color: #fff; }
.returntop:hover svg path, .returntop:focus svg path { fill: #fff; }


/* ==================================================
	Toggles
================================================== */
.general-toggles { background: rgba(255,255,255,.85); font-size: 1rem; }
.general-toggles .toggleWrap { background: #e7efe9; }
.general-toggles .toggleWrap > [data-toggle="collapse"] { text-decoration: none; display: block; font-weight: 400; }

/* show icon depending on aria state of parent */
.toggleWrap [aria-expanded="true"] [class*="plus"], .toggleWrap [aria-expanded="true"] [class*="right"], .toggleWrap [aria-expanded="false"] [class*="minus"], .toggleWrap [aria-expanded="false"] [class*="down"] { display: none; }
.toggleWrap svg { margin-right: .5rem; }


/* ==================================================
	Home
================================================== */
/* Home Tiles */
.cards .whiteWrap { padding: .35rem; }
.portalCard { display: block; padding-top: 34%; text-decoration: none; }
.cardData { background: url("../i/dataportal-sm.jpg") top center no-repeat; background-size: contain; }
.cardInter { background: url("../i/dataportal2-sm.jpg") top center no-repeat; background-size: contain; position: relative; }
/*.cardReg { background: url("../i/dataportal3-sm.jpg") top center no-repeat; background-size: contain; position: relative; }*/
.portalCard h2 { background: #342431; color: #fff; font-size: 1.4rem; border: none; padding: .5rem 1rem; margin: 0; letter-spacing: .05rem; }
.portalCard .content { padding: .1rem 1rem 1rem 1rem; font-size: 1rem; background: #fff; }
.portalCard .content p { margin: .5rem 0; }
.soon { position: absolute; top: 7px; left: -9px; background: #f0cb3e; padding: 7px 25px 5px; border-radius: 0 3px 3px 0; color: #4c3645; font-size: 1rem; box-shadow: 2px 2px 4px rgba(0,0,0,.3); }
.soon:after { content: ""; position: absolute; bottom: -6px; left: 3px; height: 0; width: 0; border: 6px solid transparent; border-left-color: #ddb92f; transform: rotate(-45deg); }

/* Definition Area */
.people-bg { padding: 1em; background: #e6e6ee; }
@media (min-width: 1200px) {
	.people-bg { padding-right: 35%; }
}	
@media (min-width: 768px) {
	.people-bg { padding: 1em 45% 1em 1em; background: #e9e9f1 url("../i/def-bg.jpg") right top no-repeat; }
}


/* ==================================================
	Data Portal Landing
================================================== */
.topic-col { background: #f7f7f7; }
/*.topic-col .h-accent:after { background: #6e4f64; }*/

a.thumb { background: #fff; border: 6px solid #fff; display: flex; margin-bottom: 1rem; align-items: stretch; text-decoration: none; font-weight: 400; font-size: 1.125rem; }
					
a.thumb div { width: 90px; height: 45px; margin-right: 1px; filter: grayscale(100%); transition: all 0.3s ease; border: 1px solid #eee; position: relative; }
a.thumb.th-trend div { background: url("../i/thumb-trend.jpg"); background-position: center -20px; }
a.thumb.th-year div { background: url("../i/thumb-year.jpg"); background-position: -47px -36px; }
a.thumb.th-compare div { background: url("../i/thumb-compare.jpg"); background-position: center -15px; } 

a.thumb span { display: flex; align-items: center; padding: 0 1rem; flex: 1 1 auto; line-height: 1.1; transition: all 0.3s ease; }
a.thumb span+span { padding: 0 .75rem; flex: 0 0 auto; border-left: 1px solid #eee; transition: all 0.3s ease; }

a.thumb:hover, a.thumb:focus { text-decoration: none; }
a.thumb:hover div, a.thumb:focus div { filter: none; transition: all 0.3s ease; }
a.thumb:hover span, a.thumb:focus span { background: #eee8ef; transition: all 0.3s ease; }
a.thumb:hover span+span, a.thumb:focus span+span { transition: all 0.3s ease; padding: 0 .55rem; border-left: 1px solid #fff; }


/* ==================================================
	Quick Profiles
================================================== */
/* Map */
.mapWrap { position: relative; }
#map svg { width: 100%!important; }

.mapWrap .legend ul { list-style: none; padding: 0; margin: 0 0 4.5rem 0; display: flex; }
.mapWrap .legend li { margin: 0; padding: 0; height: 1rem; width: 20%; position: relative; }
.mapWrap .legend li:nth-of-type(1) { background: #fee5d9; }
.mapWrap .legend li:nth-of-type(2) { background: #fcae91; }
.mapWrap .legend li:nth-of-type(3) { background: #fb6a4a; }
.mapWrap .legend li:nth-of-type(4) { background: #de2d26; }
.mapWrap .legend li:nth-of-type(5) { background: #a50f15; }
.mapWrap .legend p { position: relative; top: 115%; font-size: .875rem; line-height: 1; }
.mapWrap .legend p em { font-variant: all-small-caps; }

#clicked-state { display: none; position: absolute; top: 2.5rem; left: 50%; margin: 0 0 0 -125px; width: 250px; text-align: center; background: #fff; padding: 0 1em; color: #333; font-weight: bold; font-size: 1.25rem; border-bottom: 2px solid #b9d3bf; }
	#clicked-state:after { content: ''; height: 0; position: absolute; width: 0; border: 7px solid transparent; border-top-color: #b9d3bf; top:100%; left: 50%; margin-left: -7px; }
/* hide the error initially */
.mapWrap .alert { display: none; }

/* QP landing page styles */
.profiles .mapWrap { background: #f7f7f7; border: 1px solid #ccc; border-radius: 3px; padding: 1em 1em 0 1em; }
.profiles #clicked-state { top: .5em; }

@media (max-width: 37.49em) {
	.statePicker select { margin-bottom: .5em; }
}


.qp-table { font-size: .875rem; margin-bottom: 3rem; }
.qp-table thead tr th:first-child { width: 35%; }
.qp-table td { vertical-align: middle; }
/* make sure the table dropdowns have enough z-index to get over the main nav @9999 */
.qp-table .dropdown-menu { font-size: .875rem; z-index: 10000; }
.qp-table .dropdown-header { color: #333; font-weight: 600; padding-top: .25rem; padding-bottom: .25rem; }
.qp-table .dropdown-item { padding-top: .2rem; padding-bottom: .2rem; }
.qp-table a { text-decoration: none; }
.qp-table.table-striped tbody tr:nth-of-type(2n+1) { background-color: rgba(0,0,0,.025); }
@media (max-width: 767px) {
	.qp-table tr *:nth-child(3), .qp-table .dropdown button span { display: none; }
}

/* ==================================================
	About
================================================== */
/* Pull Quote */
.pullQuote { margin: 1rem 5% 2rem; border-bottom: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5; padding: 1rem 0 1.5rem 0; position: relative; }
.pullQuote::before { content: "//"; background: #fff; color: #f5db74; display: inline-block; font-style: italic; font-weight: bold; font-size: 1em; height: 20px; padding: 0 0.25rem; position: absolute; bottom: -9px; width: 25px; left: 50%; margin-left: -18px; text-align: center; }
.pullQuote p { font-style: italic; margin: 0; }

hr.carat-divide { position: relative; margin-bottom: 2.5rem; }
hr.carat-divide::before { content: ""; height: 0; width: 0; border: 20px solid transparent; border-top-color: #ddd; left: 50%; position: absolute; margin-left: -40px; border-left-width: 40px; border-right-width: 40px; }
hr.carat-divide::after { content: ""; height: 0; width: 0; border: 20px solid transparent; border-top-color: #fff; left: 50%; position: absolute; margin-left: -40px; top: -1px; border-left-width: 40px; border-right-width: 40px; }

/* Revisions/Releases date items */
.dateItem { display: flex; margin-bottom: 2rem; }
.dateItem h3 { align-self: flex-start; text-align: right; flex: 0 0 150px; padding-right: 2rem; font-size: .875rem; font-variant: all-small-caps; }
.dateItem h3 span { display: block; font-size: 1.125rem; font-weight: 700; }
.dateItem .details { display: flex; align-items: center; border-left: 1px solid #ccc; padding: .25rem 0; }
.dateItem .details *:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
	.dateItem { flex-direction: column; }
	.dateItem h3 { flex: 1 1 auto; padding-right: 0; text-align: left; }
	.dateItem h3 span { display: inline-block; font-size: 1.4rem;}
	.dateItem .details { border-left: none; border-top: 1px solid #ccc; padding-top: 1rem; }
}

/* ==================================================
	Help Page
================================================== */
.tileWrap { display: flex; flex-wrap: wrap; }
.tile-item { flex: 1 1 23%; background: #fff; margin: .5rem; padding: 2rem; text-align: center; text-decoration: none; transition: all .2s linear; }
.tile-item:hover, .tile-item:focus { text-decoration: none; transition: all .2s linear; }
.tile-item:hover .tile-title, .tile-item:focus .tile-title { border-bottom-color: #f5db74; transition: all .2s linear; }
.tile-item:hover > *, .tile-item:focus > * { transform: translateY(-3px); transition: all .2s linear; }
.tile-icon { margin-bottom: .5rem; transition: all .2s linear; }
.tile-title { display: block; font-weight: 700; border-bottom: 2px solid #eee; margin-bottom: .5rem; transition: all .2s linear; }
.tile-text { display: block; color: #333; transition: all .2s linear; }
@media (max-width: 1199px) {
	.tile-item { flex: 1 1 47%; }
}
@media (max-width: 649px) {
	.tile-item { text-align: left; flex: 1 1 100%; position: relative; padding: 1rem 1rem 1rem 3rem; }
	.tile-icon {  position: absolute; top: 1.1rem; left: 1.1rem; line-height: 0; }
	.tile-icon svg { font-size: 1.25rem;  }
}

#resource-tabs { display: flex; }
#resource-tabs .tabWrap { flex: 0 0 300px; font-size: .9375rem; font-weight: 400; padding-right: 2rem; }
#resource-tabs .tab-pane { border: none; border-left: 1px solid #ccc; padding: 0 0 0 2rem; box-shadow: none; }
#resource-tabs .tab-pane h3 { color: #212529; font-weight: bold; font-size: 1.1875rem; }
#resource-tabs .nav-pills .nav-link.active { background-color: #117c96; }
#resource-tabs .cat-label { display: block; padding: .25rem 1rem; background: #e7efe9; position: relative; }
#resource-tabs .cat-label:after { position: absolute; top: 100%; left: 1rem; content: ""; width: 0; height: 0; border: 8px solid transparent; border-top-color: #e7efe9; }
@media (max-width: 1023px) {
	#resource-tabs { display: block; }
	#resource-tabs .tab-pane { border-left: none; border-top: 1px solid #ccc; padding: 1rem 0 0 0; margin-top: 1rem; }
	#resource-tabs .nav-link svg { display: none; }
}


/* ==================================================
	Data Registry Landing Page (dev only)
================================================== */
.widthReset { margin: 0 -2em 0 -2em; padding: 2em 1em; }
.bg-lightgray { background: #eff5f1 url("/i/bg-registry-2.jpg") -10% top no-repeat; }
.bg-lightprimary { background: #eee8ef url("/i/bg-registry-1.jpg") right center no-repeat; background-size: contain; }
@media (max-width: 992px) {
	.bg-lightgray { background-position: -50% 0 ;}
}
@media (max-width: 768px) {
	.widthReset { margin: 0 -7px 0 -7px; padding: 2em 1em; }
	.bg-lightprimary { background: #eee8ef; }
	.bg-lightgray { background: #eff5f1; }
}

.started { position: relative; border-top: 3px solid #f1cc3f; margin-top: 1em; margin-bottom: 2em; padding: .75em 1em 1em 3em; }
.offsetIcon { position: absolute; display: block; top: .75em; left: -1.5em; border-radius: 50%; background: #5d3f59; padding: .5em; }
.offsetIcon svg { width: 2em; height: 2em; fill: #fff; }
.started h2 { border-bottom: none; margin-bottom: .2em; font-size: 1.4em; }
.started p { margin: 0 0 .75em 0; font-size: 1.15em; }
.started .btn-primary { display: inline-block; background: #6e4f64; width: auto; padding: .5em 1em; text-decoration: none; border: 1px solid #5d3f59; }
.started .btn-primary:hover, .started .btn-primary:focus { background: #5d3f59; color: #fff; }
@media (max-width: 768px) {
	.started { margin-left: 2em; }
}
@media (max-width: 420px) {
	.started { margin-left: 0; padding-left: 1em; }
	.offsetIcon { display: none; }
}

.widthReset li { margin-bottom: .3em; }
.widthReset .question span { color: #333; }
.widthReset .question a:hover { text-decoration: none; }
.widthReset .question a:hover strong { text-decoration: underline; }
.widthReset .toggleReveal { padding: 1em 1.7em; }
.widthReset .criteria { font-size: 15px; border-top: 1px dotted #ccc; margin-bottom: .5em; margin-top: 0; padding-top: .5em; }


/* ==================================================
	Tabs
================================================== */
.nav-tabs { margin-bottom: -7px; background: #f2f2f2; border: none; }
.nav-tabs .nav-item { margin: 0; }
.nav-tabs .nav-link { color: #07458A; display: inline-block; overflow: hidden; padding: 0.75rem 2rem; text-decoration: none; font-weight: 400; position: relative; border: 1px solid transparent; border-radius: 0; }
.nav-tabs .nav-link::after { position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: #6e4f64; content: ''; transition: transform 0.3s; transform: translate3d(0,-150%,0); }
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { background: rgba(255,255,255,.5); color: #222; border-bottom-color: #ccc; }
.nav-tabs .nav-link.active { background: #fff; color: #222; border-color: #ccc; border-bottom-color: #fff; }
.nav-tabs .nav-link.active::after { transform: translate3d(0,0,0); }
.tab-pane { margin: 0 0 2rem 0; padding: 1rem; background: #fff; border: 1px solid #ccc; box-shadow: 0 1px 1px rgba(0,0,0,0.18); }
.tab-pane > :first-child { padding-top: 0; margin-top: 0; }

/* the SVG icons below are encoded so background image with an SVG works in IE 11 */
/* fill%3D%22%23fff is the string to change the color hex code, fff at the end is white, edit that for new color */
/* future encoding: http://pressbin.com/tools/urlencode_urldecode/, encodeURIComponent() */

/* tabs with tabs-lg class will go full width at the lg breakpoint */
@media screen and (max-width: 1200px) {
    .nav-tabs.tabs-lg { margin-bottom: 0; background: none; }
	.nav-tabs.tabs-lg .nav-item { display: block; width: 100%; margin-bottom: .35rem; }
	.nav-tabs.tabs-lg .nav-link { display: block; border: none; background: #f2f2f2; padding: .5rem 1rem .5rem 3.5rem; box-shadow: inset 6rem 0 0 -3.5rem #6e4f64; font-weight: 700; border-radius: 4px;  }
    .nav-tabs.tabs-lg .nav-link::after { display: none; }
    .nav-tabs.tabs-lg .nav-link::before { display: block; width: 1rem; height: 1rem; content:""; position: absolute; top: .85rem; left: .75rem; background-image: url("data:image/svg+xml,%3Csvg%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%23fff%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M4.646%201.646a.5.5%200%2001.708%200l6%206a.5.5%200%20010%20.708l-6%206a.5.5%200%2001-.708-.708L10.293%208%204.646%202.354a.5.5%200%20010-.708z%22%20clip-rule%3D%22evenodd%22%2F%3E%0A%09%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: 1rem 1rem; }
	.nav-tabs.tabs-lg .nav-link.active, .nav-tabs.tabs-lg .nav-link:focus, .nav-tabs.tabs-lg .nav-link:hover { background: #6e4f64; color: #fff; }
    .nav-tabs.tabs-lg .nav-link.active::before { background-image: url("data:image/svg+xml,%3Csvg%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%23fff%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1.646%204.646a.5.5%200%2001.708%200L8%2010.293l5.646-5.647a.5.5%200%2001.708.708l-6%206a.5.5%200%2001-.708%200l-6-6a.5.5%200%20010-.708z%22%20clip-rule%3D%22evenodd%22%2F%3E%0A%09%3C%2Fsvg%3E"); }
}

/* tabs with tabs-md class will go full width at this breakpoint */
@media screen and (max-width: 992px) {
	.nav-tabs.tabs-md { margin-bottom: 0; background: none; }
	.nav-tabs.tabs-md .nav-item { display: block; width: 100%; margin-bottom: .35rem; }
	.nav-tabs.tabs-md .nav-link { display: block; border: none; background: #f2f2f2; padding: .5rem 1rem .5rem 3.5rem; box-shadow: inset 6rem 0 0 -3.5rem #6e4f64; font-weight: 700; border-radius: 4px;  }
    .nav-tabs.tabs-md .nav-link::after { display: none; }
    .nav-tabs.tabs-md .nav-link::before { display: block; width: 1rem; height: 1rem; content:""; position: absolute; top: .85rem; left: .75rem; background-image: url("data:image/svg+xml,%3Csvg%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%23fff%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M4.646%201.646a.5.5%200%2001.708%200l6%206a.5.5%200%20010%20.708l-6%206a.5.5%200%2001-.708-.708L10.293%208%204.646%202.354a.5.5%200%20010-.708z%22%20clip-rule%3D%22evenodd%22%2F%3E%0A%09%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: 1rem 1rem; }
	.nav-tabs.tabs-md .nav-link.active, .nav-tabs.tabs-md .nav-link:focus, .nav-tabs.tabs-md .nav-link:hover { background: #6e4f64; color: #fff; }
    .nav-tabs.tabs-md .nav-link.active::before { background-image: url("data:image/svg+xml,%3Csvg%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%23fff%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1.646%204.646a.5.5%200%2001.708%200L8%2010.293l5.646-5.647a.5.5%200%2001.708.708l-6%206a.5.5%200%2001-.708%200l-6-6a.5.5%200%20010-.708z%22%20clip-rule%3D%22evenodd%22%2F%3E%0A%09%3C%2Fsvg%3E"); }
}

/* tabs with tabs-sm class will go full width at this breakpoint */
@media screen and (max-width: 768px) {
	.nav-tabs.tabs-sm { margin-bottom: 0; background: none; }
	.nav-tabs.tabs-sm .nav-item { display: block; width: 100%; margin-bottom: .35rem; }
	.nav-tabs.tabs-sm .nav-link { display: block; border: none; background: #f2f2f2; padding: .5rem 1rem .5rem 3.5rem; box-shadow: inset 6rem 0 0 -3.5rem #6e4f64; font-weight: 700; border-radius: 4px;  }
    .nav-tabs.tabs-sm .nav-link::after { display: none; }
    .nav-tabs.tabs-sm .nav-link::before { display: block; width: 1rem; height: 1rem; content:""; position: absolute; top: .85rem; left: .75rem; background-image: url("data:image/svg+xml,%3Csvg%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%23fff%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M4.646%201.646a.5.5%200%2001.708%200l6%206a.5.5%200%20010%20.708l-6%206a.5.5%200%2001-.708-.708L10.293%208%204.646%202.354a.5.5%200%20010-.708z%22%20clip-rule%3D%22evenodd%22%2F%3E%0A%09%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: 1rem 1rem; }
	.nav-tabs.tabs-sm .nav-link.active, .nav-tabs.tabs-sm .nav-link:focus, .nav-tabs.tabs-sm .nav-link:hover { background: #6e4f64; color: #fff; }
    .nav-tabs.tabs-sm .nav-link.active::before { background-image: url("data:image/svg+xml,%3Csvg%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%23fff%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1.646%204.646a.5.5%200%2001.708%200L8%2010.293l5.646-5.647a.5.5%200%2001.708.708l-6%206a.5.5%200%2001-.708%200l-6-6a.5.5%200%20010-.708z%22%20clip-rule%3D%22evenodd%22%2F%3E%0A%09%3C%2Fsvg%3E"); }
}

/* tabs will go full width at this breakpoint (default) */
@media screen and (max-width: 576px) {
	.nav-tabs { margin-bottom: 0; background: none; }
	.nav-tabs .nav-item { display: block; width: 100%; margin-bottom: .35rem; }
	.nav-tabs .nav-link { display: block; border: none; background: #f2f2f2; padding: .5rem 1rem .5rem 3.5rem; box-shadow: inset 6rem 0 0 -3.5rem #6e4f64; border-radius: 4px;  }
    .nav-tabs .nav-link::after { display: none; }
    .nav-tabs .nav-link::before { display: block; width: 1rem; height: 1rem; content:""; position: absolute; top: .85rem; left: .75rem; background-image: url("data:image/svg+xml,%3Csvg%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%23fff%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M4.646%201.646a.5.5%200%2001.708%200l6%206a.5.5%200%20010%20.708l-6%206a.5.5%200%2001-.708-.708L10.293%208%204.646%202.354a.5.5%200%20010-.708z%22%20clip-rule%3D%22evenodd%22%2F%3E%0A%09%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: 1rem 1rem; }
	.nav-tabs .nav-link.active, .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { background: #6e4f64; color: #fff; }
    .nav-tabs .nav-link.active::before { background-image: url("data:image/svg+xml,%3Csvg%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%23fff%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1.646%204.646a.5.5%200%2001.708%200L8%2010.293l5.646-5.647a.5.5%200%2001.708.708l-6%206a.5.5%200%2001-.708%200l-6-6a.5.5%200%20010-.708z%22%20clip-rule%3D%22evenodd%22%2F%3E%0A%09%3C%2Fsvg%3E"); }
}


/* ==================================================
	Old Tabs
================================================== */
.js-tablist { margin: 2em 0 0 0; padding: 0; border-bottom: 1px solid #ccc; line-height: 2.7; background-color: #e7efe9; border-radius: 3px 3px 0 0; }
	.about-tabs { line-height: 2.6; }
.js-tablist__item { display: inline-block; margin: 0; list-style: none; background-color: #e7efe9; }
.js-tablist__link { display: ineline-block; padding: .75em 1em; text-decoration: none; font-weight: bold; }
	.js-tablist__link:hover { cursor: pointer; }
.js-tablist__link[aria-selected=true] { color: #333; background-color: white; border-radius: 4px 4px 0 0; border: 1px solid #ccc; border-bottom: 1px solid #fff; margin-bottom: -1px; }

.js-tabcontent { background-color: white; border: 1px solid #ccc; border-top: none; border-radius: 0 0 4px 4px; padding: 15px; }
.js-tabcontent[aria-hidden=true] { display: none; }

@media (max-width: 43.99em) {
	.js-tablist { margin-top: 0; }
	.js-tablist__item { display: block; }	
	.js-tablist__link { display: block; padding: 0 1em; }
	.js-tablist__link[aria-selected=true] { background: #e7efe9; border-radius: 0; border: none; margin: 0; }
	.js-tablist__link[aria-selected=true] span { background: url("../i/toggle-rad.png") 6px 12px no-repeat; }
}


/* ==================================================
	Data Viz Page
================================================== */
/* overwrite vue stuff */
#app { text-align: inherit!important; font-family: inherit!important; }

.colWrap { display: flex; }
.viz .colWrap { overflow: hidden; } /* only for viz page left col hide */
.leftCol { flex: 0 0 300px; background: #f7f7f7; font-size: .875rem; transition: all .1s ease-in-out; visibility: visible; margin-right: 1rem; }
.rightCol { flex-grow: 1; }	
.slideHide { margin-left: -300px; transition: all .1s ease-in-out; visibility: hidden; margin-right: 0; }


/* data topic left nav */
.qpWrap { border-bottom: 5px solid #fff; }
.qpWrap a { box-shadow: 0 1px 2px rgba(0,0,0,.2); font-weight: bold; }

.btn-topic { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); font-weight: bold; }
.topicWrap a { text-decoration: none; }

.toggleWrap .topics-nav { box-shadow: 0 1px 2px rgba(0,0,0,.2); }

.topics-nav .nav { background: rgba(255,255,255,.8); padding: .25rem 0; }
.topics-nav .nav-link { position: relative; padding: .25rem .25rem .25rem 2rem; transition: background .2s ease-in-out; }
.topics-nav .nav-link:hover { background: #e9f0f7; transition: background .2s ease-in-out; }
.topics-nav .nav-link.active, .nav-link.router-link-exact-active:not(#topics-nav-list a) { background: #e9f0f7; }
.topics-nav .nav-link[data-toggle="collapse"]:after { position: absolute; left: .75rem; top: .25rem; content:"-"; color: #07458a; padding: .2rem; line-height: 1; font-family: monospace; font-weight: bold; width: 1.2rem; text-align: center; }
.topics-nav .nav-link.collapsed[data-toggle="collapse"]:after { content:"+"; }

/* pseudo header for the other 4 */
.topic-divide { position: relative; margin-top: 1.75rem;  }
.topic-divide:before { position: absolute; bottom: 100%; left: 1rem; right: 1rem; content: "Health Determinants"; font-size: 1rem; font-variant: all-small-caps; font-weight: bold; color: #444; border-bottom: 1px dashed #333; }

/* data topic left nav reused for data portal home topics right nav */
.topics-nav-large { font-size: 1.125rem; font-weight: 400; /*background: #e7efe9; padding: 1rem;*/ }
.topics-nav-large .nav { background: none; padding: 0; }
.topics-nav-large .nav-link { text-decoration: none; }

.topics-nav-large .topic-divide { margin-top: 2.5rem; }
.topics-nav-large .topic-divide:before { padding: 0 1.5rem .1rem; background-color: #e7efe9; font-size: 1.125rem; font-variant: all-small-caps; border-left: none; border-right: none; left: -1.5rem; border-bottom: none; right: 0; }
.topics-nav-large .topic-divide:after { position: absolute; left: -1.3rem; top: -.4rem; content: ""; width: 0; height: 0; border: 6px solid transparent; border-top-color: #d2dbd5; transform: rotate(-135deg); }

.topics-nav-large .nav-link:hover, .topics-nav-large .nav-link:focus { background: #eee8ef; }
.topics-nav-large > ul > li > .nav-link { margin-top: .5rem; background: #fff; border: 3px solid #fff; padding-left: 2.5rem; }
.topics-nav-large > ul ul { font-size: 1rem; background: rgba(255,255,255,.8); border: 3px solid #fff; border-top: none; }
.topics-nav-large > ul ul li .nav-link { margin-left: -.5rem; padding-left: 2.5rem; }

.topics-nav-large .nav-link.collapsed[data-toggle="collapse"] { background: #fff; }
.topics-nav-large .nav-link[data-toggle="collapse"] { background: #eee8ef; }
.topics-nav-large .nav-link.collapsed[data-toggle="collapse"]:after { background: #eee8ef; }
.topics-nav-large .nav-link[data-toggle="collapse"]:after { line-height: 1.1; top: 0; left: 0; bottom: 0; background: #eee8ef; padding: .5rem 1.35rem .5rem .65rem; border-right: 1px solid #fff; }


/* hover/focus of toggles and top level links (if present) */
.topics-nav-large > ul > li > .nav-link:hover, .topics-nav-large > ul > li > .nav-link:focus { background: #eee8ef!important; }
.topics-nav-large .nav-link[data-toggle="collapse"]:hover:after, .topics-nav-large .nav-link[data-toggle="collapse"]:focus:after { background: #eee8ef; }

.optionWrap { padding: 0 .5rem .5rem; border-top: 20px solid #fff; }
.optionWrap .form-group { margin-bottom: .5rem; }
.optionWrap label { margin-bottom: .1rem; }
.optionWrap .heading { font-size: 1.125rem; font-variant: all-small-caps; color: #643355; background: #f0ecee; padding: .5rem; margin: 1.5rem -.5rem .75rem; position: relative; font-weight: bold; border-bottom: 1px solid #ddc9d5; box-shadow: 0 2px 0 #fff; }
.optionWrap .heading:after { width: 0; height: 0; position: absolute; content: ""; bottom: -12px; right: .5rem; border: 6px solid transparent; border-top-color: #f0ecee; }
.optionWrap .heading:before { width: 0; height: 0; position: absolute; content: ""; bottom: -13px; right: .5rem; border: 6px solid transparent; border-top-color: #d0b0c5; }
.optionWrap .heading:first-child { margin-top: 0; }

.vizBar { background: #f7f7f7; }
.vizBar a { font-size: .875rem;  padding: .25rem 1rem!important; text-decoration: none; }

.vizBar .nav-link { color: #07458a; border-radius: 3px; margin-right: .25rem; margin-left: .25rem; }
.vizBar .nav-link:hover, .vizBar .nav-link:focus { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.vizBar .nav-link.active { background: #07458a; color: #fff!important; }
.vizBar .hideleftCol:focus { background: none; outline: 1px dotted #333; color: #07458a; }
.vizBar .hideleftCol[aria-expanded="false"] { background: #07458a; color: #fff; }


@media (max-width: 992px) {
	.btn-toggler { font-size: .875rem; color: #07458a; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
	.btn-toggler span { line-height: 1.75rem; }
	.btn-toggler .line { fill: none; stroke: #07458a; stroke-width: 6; transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1); }
	.btn-toggler .line1 { stroke-dasharray: 60 207; stroke-width: 6; }
	.btn-toggler .line2 { stroke-dasharray: 60 60; stroke-width: 6; }
	.btn-toggler .line3 { stroke-dasharray: 60 207; stroke-width: 6; }
	
	.js .btn-toggler[aria-expanded="true"] .line1 { stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 6; }
	.js .btn-toggler[aria-expanded="true"] .line2 { stroke-dasharray: 1 60; stroke-dashoffset: -30; stroke-width: 6; }
	.js .btn-toggler[aria-expanded="true"] .line3 { stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 6; }
}

.map-responsive { overflow-x: auto; }
#legend_disclaimer, #no_graph {	padding-bottom: 2rem; }

@media (max-width: 1399px) {
	/* data viz columns stack early */
	#data-app .colWrap { flex-direction: column; }
	#data-app .leftCol { flex-basis: auto; margin-right: 0; }
	#data-app .rightCol { margin-top: 1rem; }
	.hideleftCol { display: none; }
	.formWrap { display: flex; flex-wrap: wrap; }
	.formWrap > * { flex-basis: 30%; }
	#userInputForm .formWrap > .form-group { margin-right: 3.33%; }
	.optionWrap .heading:first-child { flex-basis: calc(100% + 1rem); }
	
}
@media (max-width: 1024px) {
	.colWrap { flex-direction: column; }
	.leftCol { flex-basis: auto; margin-right: 0; }
	.rightCol { margin-top: 1rem; }
	.formWrap > * { flex-basis: 45%; }
	#userInputForm .formWrap > .form-group { margin-right: 5%; }
}
@media (max-width: 767px) {
	.formWrap > * { flex-basis: 100%; }
	#userInputForm .formWrap > .form-group { margin-right: 0; }
}


/* ==================================================
	Repsonsive Table w/Scroll Shadow
	(save for now, maybe integrate later)
================================================== */
/*@media (max-width: 53.99em) {
	.respTable { display: inline-block; vertical-align: top; max-width: 100%; overflow-x: auto; margin: 0 0 2em 0; -webkit-overflow-scrolling: touch; background-attachment: scroll, scroll; background-image: radial-gradient(ellipse at left center , rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%), radial-gradient(ellipse at right center , rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%); background-position: 0 center, 100% center; background-repeat: no-repeat; background-size: 10px 100%, 10px 100%; }*/
	
	/* change these gradients from white to your background colour if it differs. Gradient on the first cells to hide the left shadow 
	.respTable td:first-child { background-image: linear-gradient(to right, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%); background-repeat: no-repeat; background-size: 20px 100%; }*/
	
	/* gradient on the last cells to hide the right shadow 
	.respTable td:last-child { background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%); background-repeat: no-repeat; background-position: 100% 0; background-size: 20px 100%; }*/
	
	/*.demoTable th { min-width: 190px; }
}
@media (max-width: 43.99em) {
	.demoTable th { min-width: 150px; }
}*/


/* ==================================================
	Tables
================================================== */
/* overwrite BS caption positioning */
.fs-14 { font-size: .875rem; }

caption { caption-side: top; color: #000; font-weight: 700; font-size: 1rem; text-align: center; }

.rtcomparison th { border: 1px solid #ccc; background-color: #E1E1E1;  font-weight: bold; text-align: center; }
.rtcomparison td { vertical-align: top; border: 1px solid #ccc; text-align: center; min-width: 200px; }

.table .thead-pulse th { background: #f0ecee; color: #333; border-color: #e6d8e0; line-height: 1.2; }
.sortWrap { display: flex; flex-direction: column; align-items: center; }
.sort-neutral { color: #ddc9d5; }
.sort-active { color: #643355; }

/* Tables */
table.revisions th, table.revisions td { text-align: left; }
div.tableFootnotes { background: #e7efe9; border: 1px solid #c8c8c8; }

/* Colors for the rising/stable/falling fonts */
.rising , .badcolor { color: #BD0026; }  /* Was 640000 but that wasn't passing contrast tests #CB181D; */
.stable { color: blue; } /* This is fine for contrast - against both white and #e7efe9 */
.falling , .goodcolor { color: #006D2C; } /* also was #006400; at one point and then green. Green didn't pass contrast tests */

.suppressed { color: gray;} 


/* ==================================================
	AMCharts
================================================== */
.amchart__footnotes { font-size: .875rem; }
#amchart-footnotes, #amchart-footnotes__html, .amchart__footnotes--inner-wrapper, #amchart-footnotes-export { overflow: hidden; }

/* Graph on Historical Trends */
#histTrendsChart { width: 97%; margin-left: 3%; margin-top: 1rem; min-height: 475px; height: 55vh; font-weight: 400; }

/* Loading Animation */
.loading { background: #fff; background: rgba(255,255,255,.8); text-align: center; font-size: 1.2em; letter-spacing: .05em; display: block; padding: 25vh 0; }
.loading span { display: inline-block; color: #333; margin-top: 1rem; }

.sk-cube-grid { width: 60px; height: 60px; margin: 0 auto; }

.sk-cube-grid .sk-cube { width: 33%; height: 33%; background-color: #07458a; float: left; animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; }
.sk-cube-grid .sk-cube1 { animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 { animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 { animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 { animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 { animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 { animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 { animation-delay: 0s; }
.sk-cube-grid .sk-cube8 { animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 { animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% { transform: scale3D(1, 1, 1); }
  35% { transform: scale3D(0, 0, 1); }
}
@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% { transform: scale3D(1, 1, 1); }
  35% { transform: scale3D(0, 0, 1); } 
}


/* old forms*/
/*.hid { display: none; }

.yearPoint { background: #FEFCDA; border: 1px solid #fff; box-shadow: inset 1px 1px 0 #e9e6b1, inset -1px -1px #e9e6b1; margin-top: 1em; padding: .5em; border-radius: 3px; }
.yearPoint label, .yearPoint input { display: inline-block; width: auto; margin: 0!important; }*/

/* What are these? */
/* Mobile Modal Window for Left Nav? */
/*#my_popup { transition: all 0.3s 0.3s; width: 80%; position: relative; }
#my_popup, #my_popup_wrapper { transition: all 0.3s ease-out; }
#my_popup { transform: translateX(0) translateY(-40%); }
.my_popup_close { position: absolute; right: 0; top: 0; width: 100%; font-size: .9em; border-bottom: 1px solid #ccc; padding: .35em 0; }
	.my_popup_close:hover, .my_popup_close:focus {  }
.popup_visible #my_popup { transform: translateX(0) translateY(0); }

.subOverlay { background: #fff; padding: 1.5em 1em 1em 1em; border-radius: 3px 0 3px 3px; }

.btnInfo { border: 1px solid #E4E4E4; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); text-align: center; background: #eef8da; text-shadow: 0 1px 0 rgba(255,255,255,.5); padding: .5em 0; text-decoration: none; color: #333; }
	.btnInfo span { background: url("../i/icn-info.png") left 3px no-repeat; padding-left: 1.4em; }*/

/* other old CSS */
/*.indent1 { margin-left: 2em; }
.indent2 { margin-left: 4em; }
em.required { color: #C03060; }
.hideMe { height: 1px; left: -9999px; position: absolute; width: 1px; }

.infoBlock { background: #f5fcfe; border: 1px solid #70b4d0; display: block; margin: 0 0 1em 1em; padding: 0.45em .5em 0.45em 1em; position: relative; }
.infoBlock::before { background: url("../i/icn-info-blue.jpg") center no-repeat; content: ""; height: 14px; left: -7px; position: absolute; top: 10px; width: 14px; }*/

/*.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }*/

/* I believe these have to come after the quick profile ones because th.number overwrites quickprofile's th text align */
/* Any Table */     
/*td.number, th.number { text-align: right; }*/
/*tr.row1 { background-color: #fff; }
tr.row2 { background-color: #f1f9e2; }*/

/* Moved over from 130 - Smarty stuff */
 /* NSL - using these in smarty templates as of 7/3/2013 */
/*.outlined {border: solid black 2px; }*/ /* this is technically correct, but that's not helping NN 4.78 recognize it */
/*.outlinedGray {border: solid #b3b3b3 2px; } 

td.topleft {border: solid #000000;  border-top-width: 2px; border-bottom-width: 1px; border-left-width: 2px; border-right-width: 1px ; }
td.middleleft {border: solid #000000; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 2px; border-right-width: 1px ;  }
td.bottomleft {border: solid #000000; border-top-width: 1px; border-bottom-width: 2px; border-left-width: 2px; border-right-width: 1px ; } 

td.topright {border: solid #000000; border-top-width: 2px; border-bottom-width: 1px; border-left-width:1px; border-right-width: 2px ; }
td.middleright {border: solid #000000; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 2px ; }
td.bottomright {border: solid #000000; border-top-width: 1px; border-bottom-width: 2px; border-left-width: 1px; border-right-width: 2px ;}      
  
td.thickbottomLeft {border: solid #b3b3b3; border-top-width: 1px; border-bottom-width: 3px; border-left-width: 2px; border-right-width: 1px ; }  
td.thickbottomRight {border: solid #b3b3b3; border-top-width: 1px; border-bottom-width: 3px; border-left-width: 1px; border-right-width: 2px ; }  
td.thickbottomMiddle {border: solid #b3b3b3; border-top-width: 1px; border-bottom-width: 3px; border-left-width: 1px; border-right-width: 1px ; }  

td.regularbottomLeft {border: solid #b3b3b3; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 2px; border-right-width: 1px ; }  
td.regularbottomRight {border: solid #b3b3b3; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 2px ; }  
td.regularbottomMiddle {border: solid #b3b3b3; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px ; }   

td.darkThickbottomLeft {border: solid #686868; border-top-width: 1px; border-bottom-width: 3px; border-left-width: 2px; border-right-width: 1px ; }  
td.darkThickbottomRight {border: solid #686868; border-top-width: 1px; border-bottom-width: 3px; border-left-width: 1px; border-right-width: 2px ; }  
td.darkThickbottomMiddle {border: solid #686868; border-top-width: 1px; border-bottom-width: 3px; border-left-width: 1px; border-right-width: 1px ; }  

td.darkRegularbottomLeft , th.darkRegularbottomLeft {border: solid #686868; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 2px; border-right-width: 1px ; }  
td.darkRegularbottomRight , th.darkRegularbottomRight {border: solid #686868; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 2px ; }  
td.darkRegularbottomMiddle , th.darkRegularbottomMiddle {border: solid #686868; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px ; }  

td.topLine {border: solid #000000; border-top-width: 2px; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px ; }

td.gray { border: 1px #777777 solid; border-collapse: collapse; background-color: #E6E6E2; }  
td.gray2 { border: 1px #777777 solid; border-collapse: collapse; background-color: #a6bddb; }   
td.grey { border: 0px #777777 solid; border-collapse: collapse; background-color: #E6E6E2; }  
    
td.outlines { border: #777777 solid; border-width: 0px 1px 1px 1px; border-collapse: collapse; background-color: #FFFFFF; }
td.outlines2 { border: #777777 solid; border-width: 0px 1px 1px 1px; border-collapse: collapse; background-color: #FCF1EF; }  
  
.repeaty { background-repeat: repeat-y }
.leftBuffer { margin: 20px;	border-width: 1px; }
.highlight { background-color: #FDE0DD; }
.highlightBeige { background-color: #e7efe9; }
.HL {background: #FDE0DD; color: #000000; }*//* Overrides for the production site. */