/* ==================================================
	Bootstrap Overwrites/Additions/Fixes
================================================== */
[role="main"] a { text-decoration: underline; }
a.btn,  nav a { text-decoration: none!important; }
.container { width: 98%; max-width: 1200px; }
.modal-content { border-radius: .5rem; }
.modal-header { padding: .5rem 1rem; font-weight: 700; border-bottom: none; }
/* The close button has opacity that makes it fail a contrast check and it has no visual focus cue. Opacity turned off, focus style added. */
.close { opacity: 1; text-shadow: none; color: #000; }
.close:focus { outline: 1px dotted #000; }
.close:focus, .close:hover { color: #000!important; }
.breadcrumb { font-size: 1rem; padding: .25rem 1rem; }


/* ==================================================
	Smart Menus Overwrites
================================================== */
.sm { z-index: 999; }
.sm-clean { border-radius: 0; padding: 0; margin-top: 3px; }
.sm-clean a, .sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active { font-family: inherit; font-weight: 300; }
.sm-clean a.current { color: #0000EE; }
.sm-clean a .sub-arrow { font-size: 20px!important; color: #006ee4; background: rgba(255,255,255,.75); }
@media (min-width: 768px) {
	.sm-clean { border-radius: 0; }
	.sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active, .sm-clean a.highlighted { color: #0000EE; }
	.sm-clean a.current { color: #0000EE; }	
	.sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active, .sm-clean ul a.highlighted { background: #eeeeee; color: #0000EE; }
	.sm-clean ul a.current { color: #0000EE; }
	.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; }
	.sm-clean a .sub-arrow { background: none; }
}


/* ==================================================
	Misc
================================================== */
html { scroll-behavior: smooth; }
body { font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,"sans-serif"; font-size: 1.125rem; font-weight: 300; height: 100%; }
img, object, embed, video { max-width: 100%; height: auto; width: auto; } /* responsive media */

h1 { font-family: "Merriweather","Times New Roman",Times,Georgia,serif; font-size: 2.25rem; font-weight: 300; padding: 1.875rem 0; }
h2, h3 { padding-top: 1.875rem; margin-top: 0; margin-bottom: 0.625rem; font-weight: 700; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.15rem; margin-top: 1.25rem; font-weight: 700; }
h5 { font-size: 0.875rem; font-weight: 700; margin-top: 0.625rem; }

.extlink { display: inline-block; margin: -8px 0 0 3px; vertical-align: middle; }


/* ==================================================
	Header
================================================== */
/* NCI Logo has STRICT requirements for the logo. Do not edit this CSS. Contact Stephanie Schmitt or Brian Downey for help. */
.nciLogo img { max-height: 54px; max-width: 379px; margin: 23px 0; }

/* Search */
.searchForm { position: relative; }
.searchForm input { padding-right: 3em; }
.searchForm button { position: absolute; top: 3px; right: 3px; bottom: 3px; background: none; border: none; padding: 0 .65rem; margin: 0; border-radius: .25rem; box-shadow: none; }
.searchForm button:hover, .searchWrap button:focus { background: #DAEBFE; }
@media (max-width: 47.99em) {
    .searchForm { margin-top: 1rem; }
}

/* Mobile Navigation */
.navBar { position: relative; background: #eee; }
#menu-button, #search-tog { display: none; }
#search-tog { position: absolute; right: 0; top: 0; margin-right: 16px; }
.mobileState { display: block; }
@media (max-width: 47.99em) {
	.navBar { padding: .5rem 0; z-index: 999; }
	#menu-button, #search-tog { display: block; width: 46.5%; }
	#menu-button[aria-expanded="true"], #search-tog[aria-expanded="true"] { background: #005fc4; color: #fff; }
	#search-tog { top: .5rem; }
	.mobileState { display: none; }	
}


/* ==================================================
	Side Navigation
================================================== */
.subNav li { position: relative; border-top: 1px solid #eee; }
.subNav li a { background: #fff; display: block; padding: 10px 35px 10px 10px; line-height: 1.2; transition: all .1s linear; }
.subNav li a:hover, .subNav li a:focus, .subNav li.is-hover > a { background: #006adc; color: #fff; text-decoration: none; transition: color .1s linear, background .1s linear, border .1s linear; }
.subNav li a.active { background: #f9f9f9; color: #333; }
.subNav ul { list-style: none; margin: 0; padding: 0; }
.subNav ul ul { display: none; }
.subNav ul ul li a { padding-left: 1.5rem; }
.subNav ul ul ul li a { padding-left: 2rem; }
.subNav ul ul ul ul li a {	padding-left: 2.5rem; }
.subNav ul ul ul ul ul li a { padding-left: 3rem; }
.subNav a { padding-right: 2rem; }
/* toggle button to show side nav on mobile */
.togSubNav { display: none; position: fixed; z-index: 100; bottom: 0; padding: .5em 0; width: 100%; background: #006adc; color: #fff; border: none; font-size: 1rem; font-weight: 700; }
.togSubNav svg { fill: #fff; height: 20px; width: 26px; margin-right: .3rem; }
	.togSubNav:hover, .togSubNav:focus { cursor: pointer; background: #005fc4; }
@media (max-width: 61.99em) {
	/* JS recreates the left navigtaion in an overlay for mobile, so we can hide the original */
	.subNav-wrap .subNav { display: none; }
	.togSubNav { display: block; }
	.subNav { font-size: 1rem; }
	.subNav .heading { display: none; }
}

/* menu toggles for sub-sections +/- */
.subNav .expand { position: absolute; right: 5px; top: 11px; display: block; border: none; background: none; padding: 0; line-height: 0; cursor: pointer; z-index: 999; }
	.subNav .expand:focus { outline: 1px dotted #000; }

.subNav .expand svg { padding: 4px; border-radius: 3px; height: 22px; width: 22px; }
.subNav .expand svg rect { fill: #333; }
.subNav a:hover + .expand svg rect, .subNav li.is-hover > .expand svg rect { fill: #fff; }
.subNav a.active:hover + .expand svg rect, .subNav li.is-hover .active + .expand svg rect { fill: #333; }

.subNav .expand .vert { opacity: 1; transition: opacity .1s linear; }
.subNav .expand[aria-expanded="true"] .vert { opacity: 0; transition: opacity .1s linear; }


/* ==================================================
	Footer
================================================== */
/* List(s) of Required Links */
ul.inline-links { list-style: none; margin: 0 0 1em 0; padding: 0; }
ul.inline-links li { margin: 0 .5em; padding: 0; display: inline-block; }
@media (max-width: 37.49em) {
	ul.inline-links li { margin: 0 0 .3em 0; display: block; }
}

/* 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 #006adc; border-radius: 50%; margin-top: 8px; padding: 5px; height: 34px; width: 34px; }
.returntop svg path { fill: #006adc; }
.returntop:hover, .returntop:focus { background: #006adc; }
.returntop:hover svg, .returntop:focus svg { border-color: #fff; }
.returntop:hover svg path, .returntop:focus svg path { fill: #fff; }
@media (max-width: 768px) {
	.returntop { display: inline-block; position: relative; width: auto; background: none; padding: 0; height: auto; border-radius: 0; bottom: 0; right: 0; box-shadow: none; margin-left: 25px; }
	.returntop:hover, .returntop:focus { background: none; text-decoration: none; }
	.returntop span { display: inline-block; position: relative; width: auto; margin: 0 auto; height: auto; overflow: auto; clip: auto; white-space: normal; }
	.returntop svg { height: 28px; width: 28px; margin:-18px 5px 0 0; padding: 2px; vertical-align: middle; }
	.returntop:hover svg, .returntop:focus svg { background: #006adc; border-color: #006adc; }
}


/* ==================================================
	Toggles
================================================== */
.tog-control { padding: 0; margin: 0; }
.tog-control button { display: table; border: none; width: 100%; font-size: 1rem; margin: .5rem 0 0 0; padding: 0; border-radius: 4px; font-weight: 700; text-align: left; background: #f2f2f2; color: #006ADC; transition: all .2s ease-in-out; }
    /* account for toggle on gray background, give white background on elements instead */
    .bg-lightgray .tog-control button, .bg-lightgray .tog-content { background: #fff; }
.tog-control button:hover { cursor: pointer; background: #006ADC; color: #fff; transition: all .2s ease-in-out; }

.state { display: table-cell; background: #006ADC; border-radius: 3px 0 0 3px; padding: 13px; line-height: 0; width: 41px; }
.state svg { height: 15px; width: 15px; }
.state svg rect { fill: #fff; }

.tog-control button[aria-expanded="true"] { background: #006ADC; color: #fff; }
.tog-control button[aria-expanded="true"] .vert { display: none; }

.tog-control .tog-title { display: table-cell; vertical-align: middle; padding: .5rem 1rem; }
.tog-content { background: #f2f2f2; border: 1px solid #ddd; padding: 1rem; margin: .25rem 0 1rem 0; box-shadow: inset .25rem .25rem 0 #fff, inset -.25rem -.25rem 0 #fff; }
.tog-content > :last-child { padding-bottom: 0; margin-bottom: 0; }



/* ==================================================
	Tabs
================================================== */
.nav-tabs { margin-bottom: -8px; background: #f2f2f2; border: none; }
.nav-tabs .nav-item { margin: 0; }
.nav-tabs .nav-link { color: #006ADC;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: #006ADC; 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 #006ADC; 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: #006ADC; 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 #006ADC; 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: #006ADC; 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 #006ADC; 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: #006ADC; 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 #006ADC; font-weight: 700; 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: #006ADC; 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"); }
}


/* ==================================================
	Modal Window
================================================== */
.modalItem { display: inline-block; }

/* no JS? no modal trigger shown */
.modalItem-trigger { display: none; }

/* js class on body? we got JS, so show the modal trigger */
.js .modalItem-trigger { display: inline-block; }

/* js class on body? we got JS, so hide the provided content, it will go into a modal now */
.js .modalItem-content { display: none; }

/* style the provided content in case there is no JS */
.modalItem-content { padding: 1rem; border: 1px solid #ccc; background: #f2f2f2; }
.modalItem-title { font-size: 1.25rem; font-weight: bold; border-bottom: 1px dotted #ccc; margin-bottom: 1rem; }


/* ==================================================
	Print Styles
================================================== */
@media print {
	/* you get a dollar if you actually read this and do print CSS */
	@page { margin: 40px 20px 20px 20px; }
	
	/* print URLs from the main element only */
	main a[href]:after { content: " (" attr(href) ")"; }
	/* but don't print internal links */
	main a[href^="#"]:after { display: none; }

	/* stop flex columns in print since it can cause issues */
	[class*="col"] { flex-basis: 100%!important; max-width: 100%!important; width: 100%!important; }

	/* change flexbox to address Firefox printing */
	[class*="d-flex"], [class*="row"] { display: block!important; }
	
	/* show items that are hidden by default (toggled content, modals, etc.) */
	[aria-hidden="true"], .modalItem-content { display: block!important; }
	
	/* some things we can hide in print */
	.searchWrap, .navBar, .subNav-wrap, footer, [role="tablist"], .modalItem-trigger, .tog-control .state, .togSubNav { display: none!important; }
}