/* ==================================================
	NCI Font Families: Merriweather and Source Sans Pro
================================================== */
/* source-sans-pro-300 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local(''),
       url('../f/source-sans-pro-v21-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../f/source-sans-pro-v21-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-sans-pro-regular - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(''),
       url('../f/source-sans-pro-v21-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../f/source-sans-pro-v21-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-sans-pro-600 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local(''),
       url('../f/source-sans-pro-v21-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../f/source-sans-pro-v21-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-sans-pro-700 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(''),
       url('../f/source-sans-pro-v21-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../f/source-sans-pro-v21-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* merriweather-300 - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local(''),
       url('../f/merriweather-v30-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../f/merriweather-v30-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


/* ==================================================
	NCI Color Palette
================================================== */
:root {
    /* 'success' is redundant with 'info', commented out */
    --nci-error-lighter: #fde2ea;
    --nci-error-light: #f27da2;
    --nci-error: #e41154;
    --nci-error-dark: #b60d43;
    --nci-error-darker: #950b30;    
    --nci-warning-lighter: #fdf2bf;
    --nci-warning-light: #ffe369;
    --nci-warning: #ffbe2e; 
    --nci-warning-dark: #e5a000;
    --nci-warning-darker: #936f38;
    /*--nci-success-lighter: #dbf2f3;
    --nci-success-light: #67e4e8;
    --nci-success: #42979a;
    --nci-success-dark: #338084;
    --nci-success-darker: #206b6f;*/
    --nci-info-lighter: #dbf2f3;
    --nci-info-light: #67e4e8;  
    --nci-info: #42979a;
    --nci-info-dark: #338084;
    --nci-info-darker: #206b6f;
    --nci-disabled-lighter: #c9c9c9;
    --nci-disabled-light: #919191;
    --nci-disabled: #757575;
    --nci-disabled-dark: #454545;
    --nci-disabled-darker: #1b1b1b;
    --nci-emergency: #b60d43;
    --nci-emergency-dark: #700824;
    --nci-link-color: #01679d;
    --nci-base-lightest: #f0f0f0;
    --nci-base-lighter: #dfe1e2;
    --nci-base-light: #a9aeb1;
    --nci-base: #71767a;
    --nci-base-dark: #565c65;
    --nci-base-darker: #3d4551;
    --nci-base-darkest: #1b1b1b;
    --nci-primary-lighter: #99cae4;
    --nci-primary-light: #3395ca;
    --nci-primary: #007bbd;
    --nci-primary-vivid: #067cbc;
    --nci-primary-dark: #004971;
    --nci-primary-darker: #00314b;  
    --nci-secondary-lighter: #beebee;
    --nci-secondary-light: #4bbfc6;
    --nci-secondary: #298085;
    --nci-secondary-vivid: #338084;
    --nci-secondary-dark: #1e4c4f;
    --nci-secondary-darker: #17373a;
    --nci-accent-cool-lighter: #d7e5f4;
    --nci-accent-cool-light: #92a9c8;
    --nci-accent-cool: #5478ab;
    --nci-accent-cool-dark: #284976;
    --nci-accent-cool-darker: #06162d;
    --nci-accent-warm-lighter: #fdf2bf;
    --nci-accent-warm-light: #fee685;
    --nci-accent-warm: #face00;
    --nci-accent-warm-dark: #ddaa01;
    --nci-accent-warm-darker: #b38c00;
}


/* ==================================================
	Bootstrap Overwrites/Additions/Fixes
================================================== */
.container { width: 98%; max-width: 1400px; }
.modal-header { padding-bottom: 0; border-bottom: none; }
.breadcrumb { font-size: .875rem; }
.breadcrumb-item+.breadcrumb-item { padding-left: .2rem; }
.breadcrumb-item+.breadcrumb-item::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%2371767a'%3E%3Cpath d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
    padding-right: .2rem; margin-top: .2rem;
}

.breadcrumb li, .breadcrumb li:nth-last-child(2)::before { display: none; }
.breadcrumb li:nth-last-child(2) { display: inline-block; }
.breadcrumb li:nth-last-child(2) a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2371767a' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E"); background-position: left center; background-repeat: no-repeat; padding-left: 1.5rem; margin-left: -.5rem; }
@media (min-width: 576px) {
    .breadcrumb li:nth-last-child(2) a { margin-left: 0; padding-left: 0; background: none; }
    .breadcrumb li, .breadcrumb li:nth-last-child(2)::before { display: inline-block; } 
}

/* This is ugly I'm sorry */
/* I also added position: relative and z-index: 1 to the hover/focus of top and left nav anchors so focus indicator wasn't cropped */
*:focus { outline: 4px solid #2491ff!important; }


/* ==================================================
	Misc
================================================== */
body { font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif; font-weight: 300; height: 100%; }
img, object, embed, video { max-width: 100%; height: auto; width: auto; } /* responsive media */

h1, h2, h3, h4, h5, h6 { font-family: "Poppins", Verdana, serif; font-weight: 600; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.4375rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 1rem; font-style: italic; }

b, strong { font-weight: 600; }

/* NCI uses a color not in their palette for links, added to variables and used here to overwrite BS primary link color */
a {color: var(--nci-link-color); }
a:hover, a:focus { color: var(--nci-primary-dark); }

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


/* ==================================================
	Header
================================================== */
.skipnav { position: absolute; padding: .5rem .75rem; background: #fff; top: 4px; left: 4px; transition: all .15s ease-in-out; }

/*	USA Govt Header */
.usa-banner { margin-bottom: 0; background: var(--nci-base-lightest); }
.usa-banner__header-text { font-size: 11px; font-weight: 400; line-height: 1.2; margin: 0; }
.usa-banner__header-text img { vertical-align: baseline; }

/* NCI Logo (adjust max-width) */
.nciLogo img { max-height: 54px; max-width: 379px; margin: 23px 0; }

/* Search */
.searchForm input, .searchForm button { font-size: 1.125rem; }

/* Mobile Navigation */
@media (min-width: 768px) {
    #menu-button { display: none; }
}

/* Custom Main Nav styling for Bootstrap */
.navbar-nci .offcanvas.offcanvas-start { width: 80%; }
.navbar-nci .offcanvas-header { padding: 1.5rem 1rem 2.5rem; }
.navbar-nci .navbar-nav { border-bottom: 1px solid var(--nci-base-lighter); }
.navbar-nci .navbar-nav .nav-item { position: relative; border-top: 1px solid var(--nci-base-lighter); }
.navbar-nci .navbar-nav .nav-link { background: #fff; color: var(--nci-base-dark); display: block; padding: .65rem 1rem; line-height: 1.2; transition: all .1s linear; text-decoration: none; }

.navbar-nci .navbar-nav .nav-link:hover, .navbar-nci .navbar-nav .nav-link:focus, .navbar-nci .navbar-nav .nav-item.is-hover > a { background: #f9f9f7; text-decoration: none; transition: color .1s linear, background .1s linear, border .1s linear; position: relative; z-index: 1; }

.navbar-nci .navbar-nav .dropdown-toggle::after { position: absolute; right: 0; top: .575rem; border: none; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E"); }
    .navbar-nci .navbar-nav .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(90deg); top: .5rem; right: .2rem; }
.navbar-nci .navbar-nav .dropdown-menu { border: none; padding: 0; margin: 0; }
.navbar-nci .navbar-nav .dropdown-item { padding: .5rem .5rem .5rem 2rem; border-top: 1px solid var(--nci-base-lighter); color: var(--nci-base-dark); font-size: .9375rem; }
.navbar-nci .navbar-nav .dropdown-item:hover, .navbar-nci .navbar-nav .dropdown-item:focus { position: relative; z-index: 1; }

.navbar-nci .navbar-nav .nav-link.active { font-weight: 600; color: var(--nci-link-color); }
.navbar-nci .navbar-nav .nav-link.active::after { background-color: var(--nci-link-color); border-radius: 99rem; bottom: .25rem; content: ""; display: block; left: 0; position: absolute; top: .25rem; width: .25rem; }
/*.subNav ul { list-style: none; margin: 0; padding: 0; }*/

@media (min-width: 576px) {
    .navbar-nci .offcanvas.offcanvas-start { width: 320px; }
}
@media (min-width: 768px) {
    .navbar-nci { margin-left: -1rem; padding: 0; font-family: "Poppins", Verdana, serif;  }
    .navbar-nci .navbar-nav { border-bottom: none; }
    .navbar-nci .navbar-nav .nav-item { border-top: none; margin-right: 4px; margin-bottom: 0; }
    .navbar-nci .navbar-nav > .nav-item > .nav-link { font-weight: 700; /*padding: 1rem;*/ line-height: 1; }
    .navbar-nci .navbar-nav > .nav-item > .nav-link span { border-bottom: 4px solid transparent; padding-bottom: .5rem; }
    .navbar-nci .navbar-nav .nav-link:hover, .navbar-nci .navbar-nav .nav-link:focus, .navbar-nci .navbar-nav .nav-item.is-hover > a { background: none; transition: none; color: var(--nci-primary); }
    /*.navbar-nci .navbar-nav .nav-link:hover span, .navbar-nci .navbar-nav .nav-link:focus span, .navbar-nci .navbar-nav .nav-item.is-hover > a span { border-bottom: 4px solid var(--nci-primary); }*/
    .navbar-nci .navbar-nav .nav-link.dropdown-toggle span { padding-right: .8rem; }
    .navbar-nci .navbar-nav .dropdown-toggle::after { transform: rotate(90deg) scale(.7); top: .75rem; right: .6rem; }
    /* change carat color on toggle/hover/active */
    .navbar-nci .navbar-nav .dropdown-toggle:hover::after, .navbar-nci .navbar-nav .dropdown-toggle:focus::after, .navbar-nci .navbar-nav .dropdown-toggle[aria-expanded="true"]:hover::after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='%23004a71' d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E"); }
    .navbar-nci .navbar-nav .dropdown-toggle[aria-expanded="true"]::after, .navbar-nci .navbar-nav .dropdown-toggle[aria-expanded="true"]:hover::after  { transform: rotate(-90deg) scale(.7); top: .75rem; right: .4rem; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='%23ffffff' d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E"); }

    .navbar-nci .navbar-nav .dropdown-toggle { transition: none; }
    .navbar-nci .navbar-nav .dropdown-toggle[aria-expanded="true"] { background: var(--nci-primary-dark); color: #fff; transition: none; }
    .navbar-nci .navbar-nav .dropdown-toggle[aria-expanded="true"] span { border: none; }

    .navbar-nci .navbar-nav .dropdown-menu { background: var(--nci-primary-dark); border-radius: 0; }
    .navbar-nci .navbar-nav .dropdown-item { padding: .75rem 1rem .75rem 2rem; border-top: none; color: #fff; }
    .navbar-nci .navbar-nav .dropdown-item:hover, .navbar-nci .navbar-nav .dropdown-item:focus { background: none; text-decoration: underline; }
}

/* ==================================================
	Side Navigation
================================================== */
.subNav .heading { display: none; }
.subNav li { position: relative; border-top: 1px solid var(--nci-base-lighter); }
.subNav li a { background: #fff; color: var(--nci-base-dark); display: block; padding: .65rem 2rem; font-size: .938rem; line-height: 1.2; transition: all .1s linear; text-decoration: none; }
.subNav li a:hover, .subNav li a:focus, .subNav li.is-hover > a { background: var(--nci-base-lightest); color: var(--nci-link-color); text-decoration: none; transition: color .1s linear, background .1s linear, border .1s linear; position: relative; z-index: 1; }
.subNav li a.active { font-weight: 600; color: var(--nci-link-color); }
.subNav li a.active::after { background-color: var(--nci-link-color); border-radius: 99rem; bottom: .25rem; content: ""; display: block; left: 0; position: absolute; top: .25rem; width: .25rem; }
.subNav ul { list-style: none; margin: 0; padding: 0; }
.subNav > ul { border-bottom: 1px solid var(--nci-base-lighter); }
.subNav ul ul { display: none; }
.subNav ul ul li a { padding-left: 3.5rem; }
.subNav ul ul ul li a { padding-left: 4.5rem; }
.subNav ul ul ul ul li a {	padding-left: 5.5rem; }
.subNav ul ul ul ul ul li a { padding-left: 6.5rem; }
.subNav a { padding-right: 2rem; }

.subNav > ul > li:first-child a { padding-left: 1rem; color: var(--nci-link-color); font-size: 1.125rem; font-weight: 600; }

/* toggle button to show side nav on mobile */
.togSubNav { display: none; position: fixed; z-index: 5; bottom: 0; padding: .5em 0; width: 100%; background: #0568fd; color: #fff; border: none; font-size: 1rem; font-weight: 700; margin-left: -1.25rem; }
.togSubNav svg { fill: #fff; height: 20px; width: 26px; margin-right: .3rem; }
	.togSubNav:hover, .togSubNav:focus { cursor: pointer; background: #005fc4; }

@media (max-width: 991px) {
	/* JS recreates the left navigtaion in an overlay for mobile, so we can hide the original */
	.subNav-wrap .subNav { display: none; }
	.togSubNav { display: block; }
}

/* menu toggles for sub-sections +/- */
.subNav .expand { position: absolute; right: 3px; top: 8px; 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: 24px; width: 24px; }
.subNav .expand[aria-expanded="true"] svg { transform: rotate(90deg); }

/* ==================================================
	NCI Footer
================================================== 
footer a { color: #fff; text-decoration: none; }
footer a:hover, footer a:focus { color: #fff; text-decoration: underline; }

.footer-heading { font-size: 1.4375rem; font-family: "Poppins", Verdana, serif; }
.footer-logo-heading { font-size: 1.16rem; line-height: 1.25; }
.footer-logo-heading strong { font-size: 1.563rem; font-family: "Poppins", Verdana, serif; }

.footer-top { background-color: var(--nci-primary-dark); }
.footer-bottom { background-color: var(--nci-primary-darker); }

.ftr-list { border-bottom: 1px solid var(--nci-accent-cool-darker); }
.ftr-list_title { display: none; font-weight: 600; }
.ftr-list_tog { width: 100%; padding: 1rem 0 1rem .75rem; text-align: left; border: none; background: none; color: #fff; font-weight: 700; }
.ftr-list_tog svg { fill: #fff; height: .9rem; width: .9rem; }
    .ftr-list_tog[aria-expanded="true"] svg { transform: rotate(90deg); }
.ftr-list_reveal li { margin: 0 0 .75rem 2rem; }
@media (min-width: 576px) {
    .ftr-list { border: none; padding-left: 0; margin-bottom: 2rem; }
    .ftr-list_tog { display: none; }
    .ftr-list_reveal, .ftr-list_title { display: block !important; }
    .ftr-list_reveal li { margin: .75rem 0 0; }
}

.social-link { border-radius: 100%; display: inline-block; background: var(--nci-warning); margin-right: 1rem; }
.social-link svg { height: 34px; width: 34px; fill: var(--nci-primary-darker); padding: 5px; }

.returntop { position: fixed; right: 0; bottom: 0; z-index: 10; background: var(--nci-primary); height: 75px; width: 75px; border-radius: 100% 0 0 0; display: none; justify-content: flex-end; border-left: 1px solid rgba(255,255,255,.85); border-top: 1px solid rgba(255,255,255,.85); }
.returntop:hover, .returntop:focus { text-decoration: none; }
.returntop svg { fill: #fff; width: 2.35rem; align-self: flex-end; margin: 0 .65rem .65rem 0; }
.returntop span { display: none; }
@media (min-width: 992px) {
    .returntop { border: none; }
}
@media (min-width: 1024px) {
    .returntop span { display: inline-block; align-self: flex-end; text-transform: uppercase; font-size: .75rem; line-height: 1.1; text-align: center; margin: 0 0 .75rem .5rem; font-weight: 600; }
    .returntop svg { display: none; }
}
*/

/* ==================================================
	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: #f8f9fa; color: var(--nci-link-color); 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: var(--nci-link-color); color: #fff; transition: all .2s ease-in-out; }

.state { display: table-cell; background: var(--nci-link-color); 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: var(--nci-link-color); 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 { display: none; background: #f8f9fa; 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 { background: #f8f9fa; border: none; }
.nav-tabs .nav-item { margin: 0; }
.nav-tabs .nav-link { color: var(--nci-link-color); 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: var(--nci-link-color); 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; }
.tab-pane > :first-child { padding-top: 0; margin-top: 0; }




/* ==================================================
	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.) */
	.modalItem-content, .tog-content, .tab-pane { 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; }
}