/* ==================================================
	NCI Govt Header
================================================== */
section#usa-banner {margin-bottom: 0; background: #f0f0f0;}
.usa-banner__header-text {font-size: 12px; line-height: 1.2; margin-bottom: 0; margin-top: 0; font-weight: 400;}
.usa-banner__header-text img {vertical-align: baseline;}
/* ==================================================
	HDRP Fonts; Merriweather and Source Sans Pro
================================================== */
/* merriweather-300 - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local(''),
       url('../fonts/merriweather-v30-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/merriweather-v30-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* merriweather-300italic - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: local(''),
       url('../fonts/merriweather-v30-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/merriweather-v30-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-sans-pro-300italic - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: local(''),
       url('../fonts/source-sans-pro-v21-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/source-sans-pro-v21-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-sans-pro-300 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local(''),
       url('../fonts/source-sans-pro-v21-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/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('../fonts/source-sans-pro-v21-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/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('../fonts/source-sans-pro-v21-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/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('../fonts/source-sans-pro-v21-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/source-sans-pro-v21-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-300 - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: light;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/montserrat-v29-latin-300.woff2') format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */
  }
/* montserrat bold - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: bold;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/montserrat-v25-latin-700.woff2') format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */
  }

/* ==================================================
	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 { color: #fff; background: #00555e /*cc*/; padding: .5rem 1rem; font-size: 1rem; font-weight: 700; text-transform: uppercase; }
/* 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. */
.modal-header .close { opacity: 1; text-shadow: none; color: #fff; }
.close:focus { outline: 1px dotted #000; }
.modal-header .close:focus, .modal-header .close:hover { color: #fff!important; }
/* suppress native button styles on buttons that trigger modals */
button:not(.togSubNav)[data-bs-toggle="modal"] {border: none; text-align: unset; background-color: transparent; font-weight: 300;}
/* BS removes vertical scrollbar and adds padding to account for that on modal. Stop that. */
body, .modal { padding-right: 0!important; } 
.breadcrumb-item + .breadcrumb-item::before { color: #ccc; }
.form-control:focus { border-color: #008391 /*cc*/; box-shadow: 0 0 0 .2rem rgba(113,90,214,.25) /*cc*/; }
.lead { font-size: 1.375rem; }
.small {font-weight: 400;}

/* add back relative positioning and padding on columns */
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {position:relative;}

/*** Overriding new Bootstrap blue with old Bootstrap blue for consistency ***/
:root {--blue: #2f70a8; --primary: #2f70a8;}
a {color: #2f70a8;}
a:hover {color: #1e486c;}
:focus-visible {outline-color: rgb(229,151,0);}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before,.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before, .custom-control-input:checked~.custom-control-label::before, .custom-radio .custom-control-input:checked~.custom-control-label::before, .custom-range::-webkit-slider-thumb, .custom-range::-moz-range-thumb, .custom-range::-ms-thumb {background-color: #2f70a8;}
.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before,.custom-checkbox .custom-control-input:disabled:indeterminate~.custom-control-label::before, .custom-radio .custom-control-input:disabled:checked~.custom-control-label::before {background-color: rgba(47,112,168,.5);}
.custom-control-input:focus~.custom-control-label::before {box-shadow: 0 0 0 1px #fff,0 0 0 .2rem rgba(47,112,168,.25);}

/* Bootstrap 5 updates to lines 103-104 */
.form-check .custom-control-input:checked~.custom-control-label::before,.form-check .custom-control-input:indeterminate~.custom-control-label::before, .custom-control-input:checked~.custom-control-label::before, .custom-radio .custom-control-input:checked~.custom-control-label::before, .form-range::-webkit-slider-thumb, .form-range::-moz-range-thumb, .form-range::-ms-thumb {background-color: #2f70a8;}
.form-check .custom-control-input:disabled:checked~.custom-control-label::before,.form-check .custom-control-input:disabled:indeterminate~.custom-control-label::before, .custom-radio .custom-control-input:disabled:checked~.custom-control-label::before {background-color: rgba(47,112,168,.5);}

/* ==================================================
	Main Navigation Overwrites
================================================== */
.navbar-custom { padding: 0; font-size: 1.125rem; line-height: 1.1; }
.navbar-custom .navbar-nav .nav-link { color: #fff; padding: 1.125rem .75rem; transition: background-color .1s linear; }
.navbar-custom .navbar-nav .nav-link:hover, .navbar-custom .navbar-nav .nav-link:focus { background-color: #5b5b5b; transition: background-color .1s linear; }

.navbar-custom .dropdown-menu { margin: 0; padding: .25rem 0; border-radius: 0 0 .25rem .25rem; border-top: none; }
.navbar-custom .dropdown-item { font-weight: 400; padding: .5rem 2rem; color: #555; }
.navbar-custom .dropdown-item:first-of-type { font-weight: 600; padding-left: 1.25rem; }
.navbar-custom .dropdown-item.active, .navbar-custom .dropdown-item:active, .navbar-custom .dropdown-item:focus, .navbar-custom .dropdown-item:hover {background-color: #eee; color: #333;}

.navbar-custom .dropdown-toggle { position: relative; }
.navbar-custom .dropdown-toggle .toggle-icon { display: none; }

.navbar-custom .dropdown-toggle .toggle-icon::before { content:'+' }
.navbar-custom .dropdown-toggle[aria-expanded="true"] .toggle-icon::before { content:'-' }

.navbar-custom .dropdown-toggle .toggle-icon { background: #fff; }
.navbar-custom .dropdown-toggle .toggle-icon:before { color: #333; font-size: 1.3rem; }

@media (max-width: 61.99em) {
	.navbar-custom .navbar-nav { padding-top: .5rem; }
	.navbar-custom .navbar-nav .nav-link { padding: .875rem 40px .875rem .75rem; border-left: 3px solid transparent; width: 100%; text-align: left; white-space: pre-wrap; }
	.navbar-custom .navbar-nav .nav-link:hover, .navbar-custom .navbar-nav .nav-link:focus { background-color: rgba(0,0,0,.1); }
	 
	.navbar-custom .dropdown-toggle .toggle-icon { display: inline-block; position:absolute; top:50%; margin-top:-17px; left:auto; right:4px; width: 34px; height: 34px; overflow: hidden; font:bold 16px/34px monospace!important; text-align:center; text-shadow:none; background:#fff; border-radius: 5px; }

	.navbar-custom .dropdown-toggle::after { display: none; }

	.navbar-custom .nav-link.show + .dropdown-menu { max-height: 100vh; visibility: visible; }
	.navbar-custom .dropdown-menu { background: #535353; box-shadow: none; border-radius: 0; padding: 0; border: none;  max-height: 0; visibility: hidden; transition: all 0.4s ease-in-out; overflow: hidden; }
	.navbar-custom .dropdown-item { color: #fff; padding: .75rem 1.75rem; border-top: 1px solid rgba(0,0,0,.1); border-left: 3px solid #474747; white-space: pre-wrap;}
	.navbar-custom .dropdown-item:first-of-type { font-weight: 300; padding-left: 1.75rem; }
	.navbar-custom .dropdown-item:hover, .navbar-custom .dropdown-item:focus { background-color: rgba(255,255,255,.075); }
    .navbar-custom .dropdown-item:focus-visible {outline-offset: -2px;}
}
@media (max-width: 1065px) {
	li.about .dropdown-menu[data-bs-popper] {right: 0; left: auto;}
}

/* ==================================================
	Misc
================================================== */
html { overflow-y: scroll; scroll-behavior: smooth; } /* Force scrollbar on right side to avoid viewport width change on short pages */
body { font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,"sans-serif"; font-size: 1.125rem; font-weight: 300; }
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; padding-top: 0;}
h4 { font-size: 1.15rem; margin-top: 1.25rem; font-weight: 700; }
h5 { font-size: 0.875rem; font-weight: 500; margin-top: 0.625rem; }

/* header icons */
[class*="icon-header-"] { padding-left: 100px; position: relative; display: inline-block; margin: 1rem; }
[class*="icon-header-"]:before { position: absolute; content: ""; display: block; height: 80px; width: 80px; background-repeat: no-repeat; background-position: center; border-radius: 50%; left: 0; top: 50%; margin-top: -40px; background-size: cover; border: 5px solid #fff; box-shadow: 0 0 8px rgba(0,0,0,.2); }
.icon-header-webinar:before { background-image: url("/images/dccps/icon-2x-webinar.png"); }
.icon-header-announce:before { background-image: url("/images/dccps/icon-2x-announce.jpg"); }
.icon-header-application:before { background-image: url("/images/dccps/icon-2x-application.png"); }
.icon-header-chat:before { background-image: url("/images/dccps/icon-2x-chat.jpg"); }
.icon-header-export:before { background-image: url("/images/dccps/icon-2x-export.jpg"); }
.icon-header-connect:before { background-image: url("/images/dccps/icon-2x-connect.jpg"); }
.icon-header-news:before { background-image: url("/images/dccps/icon-2x-news.png"); }
.icon-header-spotlight:before { background-image: url("/images/dccps/icon-2x-spotlight.jpg"); }
@media (max-width: 576px) {
	[class*="icon-header-"] { padding-left: 0; margin: 0; }
	[class*="icon-header-"]:before { display: none; }
}

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

/* NCI Logo */
	/* NCI 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: 616px; margin: 23px 0; }

/* backgrounds */
.bg-lightgray { background-color: #f2f2f2; }
.bg-primary { background-color: #008390 /*cc*/; }
.bg-lightprimary { background-color: #59d1df /*cc*/; }
.bg-darkprimary { background-color: #01555f /*cc*/; }

/* modify 1-col template for homepage: hide breadcrumbs, accessibly hide h1 */
.home .tophat h1 { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.home .tophat nav { display: none; }


/* ==================================================
	Header Search
================================================== */
.searchForm { position: relative; }
.searchForm input { padding-right: 3em; }
.searchForm button { position: absolute; top: 2px; right: 2px; background: none; border: none; padding: 4px 8px; margin: 0; border-radius: .25rem;  }
.searchForm button:hover, .searchWrap button:focus { background: #e3ddfe /*cc*/; }
@media (max-width: 47.99em) {
    .searchForm { margin-top: 1rem; }
}


/* ==================================================
	Site Ribbon
================================================== */
.ribbon { background: #008391 /*cc*/; color: #fff; font-weight: 600; padding: .6rem 0; line-height: 1.25; }
.ribbon span { display: inline-block; padding-left: 38px; background: url("/images/icn-hex.png") left center no-repeat; }


/* ==================================================
	Mobile Main Navigtaion
================================================== */
.navBar { position: relative; background: #2e2e2e; }
#menu-button, #search-tog { display: none; }
#search-tog { position: absolute; right: 0; top: 0; margin-right: 1.275rem; }
.js .mobileState { display: block; }
@media (max-width: 61.99em) {
	.navBar { padding: 1rem 0; }
	/* only show the toggle and hide the menu if JS is enabled */
	.js #menu-button, .js #search-tog { display: block; width: 46.5%; font-weight: 600; background: #fff; box-shadow: inset 0 -1rem .5rem rgba(0,0,0,.12); border: 1px solid #999; color: #008391 /*cc*/; }
	.js #menu-button[aria-expanded="true"], .js #search-tog[aria-expanded="true"] { background: #008391 /*cc*/; color: #fff; border-color: #e1acfc /*cc*/; }
	.js #search-tog { top: 1rem; }
	.js .mobileState { display: none; }
}

/* Active Section Highlight in Main Navigation - body class -> li class -> link */
.home .home > a, .areas .areas > button.nav-link, .networks .networks > button.nav-link, .funding .funding > button.nav-link, .resources .resources > a, .data .data > button.nav-link, .about .about > button.nav-link, .seer-medicare .data > button.nav-link, .seer-mhos .data > button.nav-link, .seer-cahps .data > button.nav-link, .pro .data > button.nav-link { background-color: #5b5b5b; }


/* ==================================================
	Breadcrumbs
================================================== */
.breadcrumb { font-size: 0.875rem; position: relative; top: -25px; padding: 6px 12px; box-shadow: 0 0 4px rgba(0,0,0,0.15); background: #fff; font-weight: 400; }
@media (max-width: 47.99em) {
    .breadcrumb { display: none; }
}


/* ==================================================
	Side Navigation
================================================== */
.subNav ul { list-style: none; margin: 0; padding: 0; }
.subNav ul ul {display: none;}
.subNav li a { background: #f2f2f2; display: block; padding: 10px 15px 10px 10px; border-left: 5px solid #f2f2f2; line-height: 1.2; transition: all .1s linear; }
.subNav li a:hover, .subNav li a:focus { background: #2f70a8; color: #fff; border-left-color: #2f70a8; text-decoration: none; /*padding: 10px 10px 10px 15px; transition: padding .35s ease-in-out, color .1s linear, background .1s linear, border .1s linear;*/ }
.subNav li a.active { border-left-color: #2f70a8; background: #f9f9f9; color: #363636; }

.subNav .heading { text-transform: uppercase; color: #fff; background: #1f496f; font-size: 1rem; font-weight: 700; padding: 8px 15px; margin: 0; }
.togSubNav { display: none; position: fixed; z-index: 100; bottom: 0; padding: .5em 0; width: 100%; background: #008391 /*cc*/; color: #fff; border: none; font-size: 1rem; font-weight: 700; text-transform: uppercase; }
	.togSubNav:hover, .togSubNav:focus { cursor: pointer; background: #352d57 /*cc*/; }
	.togSubNav span { padding-left: 1.8rem; background: url("/images/dccps/icn-subnav.png") left -121px no-repeat; }
@media (max-width: 47.99em) {
	/* JS recreates the left navigtaion in an overlay for mobile, so we can hide the original only if JS is present */
	.js .subNav-wrap .subNav { display: none; }
	/* only show the subNav toggle if JS is present */
	.js .togSubNav { display: block; }
    .js .subNav { font-size: 1rem; }
    .js .subNav .heading { display: none; }
    .js .subNav li:first-child a { border-radius: 5px 5px 0 0; }
    .js .subNav li:last-child a { border-radius: 0 0 5px 5px; }
}


/* ==================================================
	On-page Navigation
================================================== */
.pageNav { font-size: 1.125rem; padding-top: 0; margin-bottom: .25rem; }
.pageNav + ul { font-size: 1.125rem; margin-bottom: 1rem; }


/* ==================================================
	Footer
================================================== */
footer { font-size: 1rem; color: #fff; }
footer { background: #14315c; }
.footerGray {background: #0F2443;}
.lastUpdate { padding: 7px 0; background:transparent;}

@media (max-width: 767px) {
	.footerGray.padding-override {padding-bottom: 45px!important;}
}

footer h2 { font-size: 1.325rem; padding-top: 0; text-transform: uppercase; font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,"sans-serif"; font-weight: 700; }
footer .footerGray h2 {
    line-height: 105%;
    margin-bottom: 0;
    text-transform: uppercase;
    font-size: 28px;
}
.footerGray p {
    font-size: 18px;
}
footer a { text-decoration: none;}
footer a:hover, footer a:focus { text-decoration: underline;}
footer a, footer a:hover, footer a:focus { color: #fff;}
footer li { margin-bottom: 10px;}
footer .connect {
    display: flex;
    align-items: center;
    margin-bottom: 2em;
}
footer .connect a.social-icon {
    width: 38px;
    height: 38px;
    display: inline-block;
    border-radius: 50%;
    border: 1px solid #FFFFFF;
    margin-right: 15px;
    transition: all .2s ease-in-out;
}
footer .icon-linkedin {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGlkPSJwcmVmaXhfX0xheWVyXzEiIHg9IjAiIHk9IjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTE4LjEuNUgxLjlDMS4xLjUuNSAxLjEuNSAxLjl2MTYuM2MwIC44LjYgMS40IDEuNCAxLjRoMTYuMmMuOCAwIDEuNC0uNiAxLjQtMS40VjEuOWMwLS44LS42LTEuNC0xLjQtMS40em0tMTIgMTYuMkgzLjNWNy42aDIuOHY5LjF6TTQuNyA2LjRjLS45IDAtMS42LS43LTEuNi0xLjYgMC0uOS43LTEuNiAxLjYtMS42LjkgMCAxLjYuNyAxLjYgMS42LjEuOS0uNyAxLjYtMS42IDEuNnptMTIgMTAuM2gtMi44di00LjRjMC0xLjEgMC0yLjQtMS41LTIuNHMtMS43IDEuMS0xLjcgMi4zdjQuNUg3LjlWNy42aDIuN3YxLjJjLjQtLjcgMS4zLTEuNSAyLjctMS41IDIuOSAwIDMuNCAxLjkgMy40IDQuM3Y1LjF6IiBzdHlsZT0iZmlsbDojZmZmIi8+PC9zdmc+);
    background-size: 20px 20px;
    height: 20px;
    width: 20px;
    margin: 8px;
    display: inline-block;
    border: none;
    border-radius: 0;
}

.livehelp { background: #fff; color: #333; text-align: center; padding-top: 10px; }
.livehelp a { padding: 0 0 10px 0; display: block; font-size: 20px; font-weight: 700; color: #333; }
.livehelp a:hover, .livehelp a:focus { color: #333; }
.livehelp img { width: 165px; height: 55px; display: block; margin: 0 auto; }
.livehelp a .livehelp-tel { font-size: 1rem; font-weight: 400; }
.tagline-container { display: table; height: 135px; }
.tagline { display: table-cell; vertical-align: middle; font-family: "Merriweather","Times New Roman",Times,Georgia,serif; font-size: 24px; font-weight: 300; padding: 0 15px; }
@media (min-width: 47.99em) {
    .govLinks { margin-top: 30px; }
}

/* return to top */
.returntop { position: fixed; bottom: 5rem; 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 #008391; /*cc*/ border-radius: 50%; margin-top: 8px; padding: 5px; height: 35px; width: 35px; display: inline-block; float: none;}
.returntop svg path { fill: #008391; /*cc*/ }
.returntop:hover, .returntop:focus { background: #008391; /*cc*/ }
.returntop:hover svg, .returntop:focus svg { border-color: #fff; }
.returntop:hover svg path, .returntop:focus svg path { fill: #fff; }


/* ==================================================
	Events
================================================== */
.eventList { list-style: none; margin: 0; padding: 0; }
.card-event { display: flex; width: 100%; background: #fff; box-shadow: 0 3px 3px rgba(0,0,0,0.18); padding: 1rem; color: #333; position: relative; top: 0; transition: all .3s ease-in-out; margin-bottom: 1rem; border-top: 3px solid #352d57 /*cc*/; }
.date { min-width: 125px; text-align: center; border-right: 1px solid #ccc; margin-right: 25px; padding: .5rem 0; text-transform: uppercase; line-height: 1.1; }
.date strong { font-size: 2rem; font-weight: 700; }
@media (max-width: 576px) {
    .card-event { display: block; }
    .date { border: none; margin: 0; padding: 0; font-weight: 700; }
}


/* ==================================================
	Cards
================================================== */
/* add class to enable flex */
.cardWrap { display: flex; flex-wrap: wrap; justify-content: left; }
/* target specific cards and set width */
.card-25 { display: flex; padding: 0 2rem 2rem 0; width: 25%; }
.card-33 { display: flex; padding: 0 2rem 2rem 0; width: 33.33%; }
.card-50 { display: flex; padding: 0 2rem 2rem 0; width: 50%; }
.card-50:nth-child(2n+2), .card-33:nth-child(3n+3), .card-25:nth-child(4n+4) { padding-right: 0; }
@media (max-width: 1200px) {
    .card-25 { width: 50%; }
    .card-25:nth-child(4n+4) { padding-right: 2rem; }
    .card-25:nth-child(2n+2) { padding-right: 0; }
}
@media (max-width: 992px) {
    .card-33 { width: 50%; }
    .card-33:nth-child(3n+3) { padding-right: 2rem; }
    .card-33:nth-child(2n+2) { padding-right: 0; }
}
@media (max-width: 768px) {
    .card-25, .card-33, .card-50 { width: 100%; padding: 0 0 1rem 0!important; }
}

/* white w/icon, title, desc. */
.card-white { display: block; width: 100%; background: #fff; box-shadow: 0 3px 3px rgba(0,0,0,0.18); padding: 1rem; color: #333; position: relative; top: 0; transition: all .3s ease-in-out; text-decoration: none!important; }
.card-white:hover, .card-white:focus { color: #333; text-decoration: none; top: -.35rem; box-shadow: 0 3px 6px rgba(0,85,94,.5) /*cc*/; transition: all .3s ease-in-out; }
.card-head { display: table; margin-bottom: 1rem; }
.card-head * { display: table-cell; vertical-align: middle; }
.card-head img { max-width: 60px; background: #008391 /*cc*/; border-radius: 50%; margin-right: .5rem; display: inline-block; }
.card-white .card-title { font-size: 1.0625rem; margin: 0; padding: 0; color: #00555e /*cc*/; font-weight: 700; }
.card-white .card-content { font-size: 1.0625rem; }

/* white with dark head */
.card-dark { display: block; width: 100%; background: #fff; box-shadow: 0 3px 3px rgba(0,0,0,0.18); color: #333; position: relative; top: 0; transition: all .3s ease-in-out; text-decoration: none!important; }
.card-dark:hover, .card-dark:focus { color: #333; text-decoration: none; top: -.35rem; box-shadow: 0 3px 6px rgba(0,85,94,.5) /*cc*/; transition: all .3s ease-in-out; }
.card-dark > .card-title { display: flex; align-items: center; background: #00555e /*cc*/; border-top: 3px solid #56cccc /*cc*/; font-size: 1.25rem; margin: 0; padding: .5rem 1rem; color: #fff; }
.card-dark > .card-content { font-size: 1.125rem; padding: 1rem; }

/* for when the whole card isn't a link but we need the styling (home, about) */
.card-dark.static { background: #f2f2f2; }
.card-dark.static:hover { position: static; top: 0; box-shadow: 0 3px 3px rgba(0,0,0,0.18); }

/* gray w/optional icon, title, desc, link button */
.card-gray { display: block; padding: 1rem; background: #f2f2f2; margin-bottom: 1rem; }
.card-gray > .card-title { font-size: 1.5rem; padding: 0; margin: 0 0 .5rem 0; }
.card-gray > .card-content { font-size: 1.125rem; }
.card-gray > .card-content > *:last-child { margin-bottom: 0; } /* remove margin from last item in card */
	
.card-icon { padding-left: 5rem; position: relative; }
.card-icon > img { position: absolute; top: 1rem; left: -50px; width: 100px; height: 100px; border-radius: 50%; }
.icon-border { border: 5px solid #fff; box-shadow: 0 0 8px rgba(0,0,0,.2); }
.icon-center > img { top: 50%; margin-top: -50px; }
@media (max-width: 576px) {
    .card-icon { padding-left: 1rem; padding-top: 4rem; margin-top: 5rem; }
    .card-icon > img, .icon-center > img { top: -50px; left: 50%; margin-left: -50px; margin-top: 0; width: 100px; height: 100px; }
}
/* clickable gray w/optional icon, title, desc */
a.card-gray { text-decoration: none; }
a.card-gray > .card-content * { color: #333; }

/*Announcement card*/
.news-box, .announcement-box, .factsheet-box, .explore-box, .webinar-box { background-color: #f2f2f2; padding: 20px 20px 20px 60px; margin-left: 35px; margin-bottom: 20px; position: relative;}
.announcement-box::before {
    content: '';
    position: absolute;
    background-image: url(/images/dccps/section-icons-2x.png);
    background-repeat: no-repeat;
    background-size: 70px 350px;
    background-position: 0 -210px;
    border: 5px solid #fff;
    background-color: #000;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    top: 15px;
    left: -35px;
}
.news-box::before {
    content: '';
    position: absolute;
    background-image: url(/images/dccps/news-icon-2x.png);
    background-repeat: no-repeat;
    background-size: 70px 70px;
    border: 5px solid #fff;
    background-color: #000;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    top: 15px;
    left: -35px;
}

.explore-box::before{
	content: '';
    position: absolute;
    background-image: url(/images/dccps/section-icons-2x.png);
    background-repeat: no-repeat;
    background-size: 70px 360px;
    background-position: 0 -73px;
    border: 5px solid #fff;
    background-color: #000;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    top: 15px;
    left: -35px;
}
.webinar-box::before{
	content: '';
    position: absolute;
    background-image: url(/images/dccps/icon-2x-webinar.png);
    background-repeat: no-repeat;
    background-size: 70px 70px;
    background-position: 0px;
    border: 5px solid #fff;
    background-color: #000;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    top: 15px;
    left: -35px;
}

.webinar-box-sparse::before{
	top: -5px;
}

.news-box h2, .announcement-box h2, .factsheet-box h2, .explore-box h2 {
    font-size: 24px;
    line-height: 28px;
    margin-top: 0;
    text-align: left;
    letter-spacing: 0;
}

/* news/funding cards */
.card-accent { display: block; width: 100%; background: #fff; box-shadow: 0 3px 3px rgba(0,0,0,0.18); padding: 1rem; color: #333; position: relative; transition: all .3s ease-in-out; border-left: 50px solid #00555e /*cc*/; }
.card-accent:before { display: block; width: 30px; height: 32px; position: absolute; top: 1rem; left: -40px; content:""; background-size: cover; background-repeat: no-repeat; background-position: center; }
	.card-news:before { background-image: url("/images/dccps/icon-news.svg"); }
	.card-funding:before { background-image: url("/images/dccps/icon-funding.svg") ; }
	.card-video:before { background-image: url("/images/home/video-icon.svg") ; }
.card-accent .card-title { font-size: 1.25rem; margin: 0; padding: 0; }
.card-accent > .card-content { font-size: 1.0625rem; }
/* clickable version */
a.card-accent { text-decoration: none; position: relative; top: 0; transition: all .3s ease-in-out; }
a.card-accent:hover, a.card-accent:focus { top: -.35rem; box-shadow: 0 3px 6px rgba(0,85,94,.5) /*cc*/; transition: all .3s ease-in-out; }
a.card-accent > .card-content { color: #333; }


/* ==================================================
	DataTables
================================================== */
table.dataTable thead th, table.dataTable thead td, table.dataTable.no-footer { border-bottom-color: #dee2e6!important; }


/* ==================================================
	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: 600; text-align: left; background: #f2f2f2; color: #2f70a8; 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: #2f70a8; color: #fff; transition: all .2s ease-in-out; }
.tog-control button[aria-expanded="true"] { background: #2f70a8; color: #fff; }
.tog-control button[aria-expanded="true"] .state { background-position: .75rem -5.875rem; }
.tog-control .state { display: table-cell; width: 2.5rem; height: 2.5rem; background: #2f70a8 url("/images/dccps/toggle.png") .75rem .75rem no-repeat; vertical-align: top; border-radius: 4px 0 0 4px; }
.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; }
    

/* ==================================================
	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; }

/* ==================================================
	Tabs
================================================== */
.nav-tabs { margin-bottom: -8px; border: none;}
.nav-tabs .nav-item { margin: 0; }
.nav-tabs .nav-link { color: #2f70a8; display: inline-block; overflow: hidden; padding: 0.75rem 2rem; text-decoration: none; position: relative; border: 1px solid transparent; border-radius: 4px 4px 0 0; font-weight: bold;}
.nav-tabs .nav-link::after { position: absolute; top: 0; left: 0; width: 100%; height: 5px; 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:hover { background: rgb(20, 49, 92); color: #fff; }
.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; padding: 1rem; background: #fff; border-top:1px solid #ccc; border-right:none; border-bottom:none; border-left:none; box-shadow: none;}

.tab-pane > :first-child { padding-top: 0; margin-top: 0; }

.nav-pills { margin-bottom: 1rem;}
.nav-pills + .tab-content .tab-pane { border-radius: 3px; background: #f8f8f8; box-shadow: inset 3px 3px 0 #fff, inset -3px -3px 0 #fff; }
.nav-pills .nav-link.active { text-decoration: none; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.nav-pills .nav-link.active:after { content:""; position: absolute; display: block; height: 0; width: 0; border: 6px solid transparent; border-top-color: #2f70a8; left: 50%; top: 100%; margin-left: -6px; }

.nav-pills>li {width: 100%; position: relative;}
.nav-pills>li .docinfo {display: none;}
.nav-pills>li>a:first-child {
    border-radius: 3px;
    background-color: #ffffff;
    color: #2f70a8;
    border: 1px solid #2f70a8;
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 10px;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    display: block;
    padding: 10px 15px;
}
.nav-pills>li>a:nth-child(2) {
    position: absolute;
    right: 1rem;
    top: 15%;
}

.nav-pills>li>a:hover, .nav-pills>li>a:focus, .read-more a:hover, .read-more a:focus {
    background-color: #2f70a8;
    color: #ffffff;
}
/* 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: 1px solid #ccc; background: #fff; padding: .5rem 1rem .5rem 3.5rem; box-shadow: inset 6rem 0 0 -3.5rem #1f496f; 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: 16px; height: 16px; content:""; position: absolute; top: .85rem; left: .75rem; background: url("/images/dccps/toggle.png") 0 0 no-repeat; }
	.nav-tabs.tabs-lg .nav-link.active, .nav-tabs.tabs-lg .nav-link:focus, .nav-tabs.tabs-lg .nav-link:hover { background: #1f496f; color: #fff;  }
    .nav-tabs.tabs-lg .nav-link.active::before { background-position: 0 -106px; }
	
	.nav-pills.pills-lg .nav-item { display: block; width: 100%; margin-bottom: .35rem; }
	.nav-pills.pills-lg .nav-link.active:after { border-top-color: #fff; left: 1rem; top: 50%; margin-left: 0; margin-top: -3px; }
	.nav-pills.pills-lg .nav-link { padding-left: 2rem; }
}

/* 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: 1px solid #ccc; background: #fff; padding: .5rem 1rem .5rem 3.5rem; box-shadow: inset 6rem 0 0 -3.5rem #1f496f; font-weight: 700; border-radius: 4px;  }
    .nav-tabs.tabs-md .nav-link::after, .nav-tabs.tabs-md .nav-link br { display: none; }
    .nav-tabs.tabs-md .nav-link::before { display: block; width: 16px; height: 16px; content:""; position: absolute; top: .85rem; left: .75rem; background: url("/images/dccps/toggle.png") 0 0 no-repeat; }
	.nav-tabs.tabs-md .nav-link.active, .nav-tabs.tabs-md .nav-link:focus, .nav-tabs.tabs-md .nav-link:hover { background: #1f496f; color: #fff;  }
    .nav-tabs.tabs-md .nav-link:focus {outline:  1px solid #006ADC;}
    .nav-tabs.tabs-md .nav-link.active::before { background-position: 0 -106px; }
	
	.nav-pills.pills-md .nav-item { display: block; width: 100%; margin-bottom: .35rem; }
	.nav-pills.pills-md .nav-link.active:after { border-top-color: #fff; left: 1rem; top: 50%; margin-left: 0; margin-top: -3px; }
	.nav-pills.pills-md.nav-link { padding-left: 2rem; }
}

/* tabs with tabs-sm class will go full width at this breakpoint */
@media screen and (max-width: 768px) {
    .nav-pills {padding-left: 15px;}
	.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: 1px solid #ccc; background: #fff; padding: .5rem 1rem .5rem 3.5rem; box-shadow: inset 6rem 0 0 -3.5rem #1f496f; 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: 16px; height: 16px; content:""; position: absolute; top: .85rem; left: .75rem; background: url("/images/dccps/toggle.png") 0 0 no-repeat; }
	.nav-tabs.tabs-sm .nav-link.active, .nav-tabs.tabs-sm .nav-link:focus, .nav-tabs.tabs-sm .nav-link:hover { background: #1f496f; color: #fff;  }
    .nav-tabs.tabs-sm .nav-link.active::before { background-position: 0 -106px; }
	
	.nav-pills.pills-sm .nav-item { display: block; width: 100%; margin-bottom: .35rem; }
	.nav-pills.pills-sm .nav-link.active:after { border-top-color: #fff; left: 1rem; top: 50%; margin-left: 0; margin-top: -3px; }
	.nav-pills.pills-sm .nav-link { padding-left: 2rem; }
}

/* 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: 1px solid #ccc; background: #fff; padding: .5rem 1rem .5rem 3.5rem; box-shadow: inset 6rem 0 0 -3.5rem #1f496f; font-weight: 700; border-radius: 4px;  }
    .nav-tabs .nav-link::after { display: none; }
    .nav-tabs .nav-link::before { display: block; width: 16px; height: 16px; content:""; position: absolute; top: .85rem; left: .75rem; background: url("/images/dccps/toggle.png") 0 0 no-repeat; }
	.nav-tabs .nav-link.active, .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { background: #1f496f; color: #fff;  }
    .nav-tabs .nav-link.active::before { background-position: 0 -106px; }
	
	.nav-pills .nav-item { display: block; width: 100%; margin-bottom: .35rem; }
	.nav-pills .nav-link.active:after { border-top-color: #fff; left: 1rem; top: 50%; margin-left: 0; margin-top: -3px; }
	.nav-pills .nav-link { padding-left: 2rem; }
}

@media (max-width: 1042px) and (min-width: 992px) {
	.nav-tabs { font-size: .9em; }	
}
/* ==================================================
	Flickity v2.1.2 (News Archives Slider)
================================================== */
.flickity-enabled { position: relative; }
.flickity-enabled:focus { outline: none; }
.flickity-viewport { overflow: hidden; position: relative; height: 100%; }
.flickity-slider { position: absolute; width: 100%; height: 100%; }

/* draggable */
.flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; }
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; }

/* flickity-button */
.flickity-button { position: absolute; background: #00555e /*cc*/; border: none; color: #fff; }
.flickity-button:hover { opacity: .75; cursor: pointer; }
.flickity-button:focus { outline: none; box-shadow: 0 0 0 5px #19F; }
.flickity-button:active { opacity: 0.6; }
.flickity-button:disabled { opacity: 0.3; cursor: auto; /* prevent disabled button from capturing pointer up event. #716 */ pointer-events: none; }
.flickity-button-icon { fill: #fff; }

/* previous/next buttons */
.flickity-prev-next-button { top: 50%; width: 44px; height: 44px; border-radius: 50%; /* vertically center */ transform: translateY(-50%); }
.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }

/* right to left */
.flickity-rtl .flickity-prev-next-button.previous { left: auto; right: 10px; }
.flickity-rtl .flickity-prev-next-button.next { right: auto; left: 10px; }
.flickity-prev-next-button .flickity-button-icon { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; }

/* page dots */
.flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; }
.flickity-rtl .flickity-page-dots { direction: rtl; }
.flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; background: #333; border-radius: 50%; opacity: 0.25; cursor: pointer; }
.flickity-page-dots .dot.is-selected { opacity: 1; }