/* ==================================================
	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. */
.close { opacity: 1; text-shadow: none; color: #fff; }
.close:focus { outline: 1px dotted #000; }
.close:focus, .close:hover { color: #fff!important; }
/* 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; }
.breadcrumb-item br {display: none;}
.form-control:focus { border-color: #008391 /*cc*/; box-shadow: 0 0 0 .2rem rgba(113,90,214,.25) /*cc*/; }
.lead { font-size: 1.375rem; }
/* Linked table headers on dark theme */
.thead-dark a { color: #fff; }
.thead-dark a:hover, .thead-dark a:focus { color: #eee; }
/* forms */
.form-check input { margin-top: .45rem; }
legend { font-size: 1.125rem; }


/* ==================================================
	Smart Menus Overwrites
================================================== */
.sm { z-index: 999; }
.sm-clean { border-radius: 0; padding: 0; background: #494949; margin-top: 2px; }
.sm-clean a, .sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active { font-family: inherit; font-weight: 300; font-size: 1rem; color: #fff; }
.sm-clean a.current { color: #0000EE; }
.sm-clean a .sub-arrow { background: #fff; }
.sm-clean a .sub-arrow:before { color: #333; font-size: 1.3rem; }
@media (min-width: 768px) {
    .sm-clean { border-radius: 0; margin-top: 0px; }
    .sm-clean a { padding-top: 1.125rem; padding-bottom: 1.125rem; transition: background .1s linear; }
    .sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active, .sm-clean a.highlighted { color: #fff; background: #5b5b5b; padding-top: 1.125rem; padding-bottom: 1.125rem; transition: background .1s linear; }
    .sm-clean a.current { color: #fff; }
	.sm-clean ul { margin-top: 0!important; border-radius: 0 0 4px 4px!important; border-top: none; }
		.sm-clean > li > ul::before, .sm-clean > li > ul::after { display: none; }
    .sm-clean ul a { padding: 6px 20px 6px 30px; font-size: .875rem; font-weight: 400; }
    .sm-clean ul li:first-child a { padding-left: 20px; font-weight: 600; }
    .sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active, .sm-clean ul a.highlighted { background: #eee; color: #333; padding: 6px 20px 6px 30px; font-size: .875rem; font-weight: 400; }
    .sm-clean ul a.current { color: #fff; }
    .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 { border-top-color: #fff; margin-top: 0; right: 10px; background: transparent; }
}
.sm, .sm ul, .sm li {line-height: 1.5;}
/* ==================================================
	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; margin-bottom: 0; }
@media (max-width: 991px) {
	h1 { font-size: 1.5rem; }
}
h2, h3 { padding-top: 1.875rem; margin-top: 0; margin-bottom: 0.625rem; font-weight: 700; }
main .col-lg-9>h2 {padding-top: 0;}
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: 500; margin-top: 0.625rem; }

.card-gray h2, .card-gray h3 { padding-top: 0; }
.searchHeader { padding-top: 0; }
.btn-action {color: #fff; background: #146758;  vertical-align: baseline;}

.bg-darkprimary h2 {color: #fff;}
/* 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("../toolbox/images/dccps/icon-2x-webinar.png"); }
.icon-header-announce:before { background-image: url("../toolbox/images/dccps/icon-2x-announce.jpg"); }
.icon-header-application:before { background-image: url("../toolbox/images/dccps/icon-2x-application.png"); }
.icon-header-chat:before { background-image: url("../toolbox/images/dccps/icon-2x-chat.jpg"); }
.icon-header-export:before { background-image: url("../toolbox/images/dccps/icon-2x-export.jpg"); }
.icon-header-connect:before { background-image: url("../toolbox/images/dccps/icon-2x-connect.jpg"); }
.icon-header-news:before { background-image: url("../toolbox/images/dccps/icon-2x-news.png"); }
.icon-header-spotlight:before { background-image: url("../toolbox/images/dccps/icon-2x-spotlight.jpg"); }
.icon-header-web:before { background-image: url("../toolbox/images/dccps/icon-2x-web.jpg"); }
.icon-header-speaker:before { background-image: url("../toolbox/images/dccps/icon-2x-speaker.jpg"); }
.icon-header-book:before { background-image: url("../toolbox/images/dccps/icon-2x-book.jpg"); }
.icon-header-resources:before {background-image: url("../toolbox/images/dccps/icon-2x-interests.png");
}
.icon-header-funding:before {background-image: url("../toolbox/images/dccps/icon-2x-funding.png");
}
.icon-header-publications:before {background-image: url("../toolbox/images/dccps/icon-2x-publications.png");
}

.explore-box {
    background-color: #f2f2f2;
    padding: 20px 20px 20px 60px !important;
    margin-left: 35px;
    margin-bottom: 20px;
    position: relative;
}
.explore-box::before {
    content: '';
    position: absolute;
    background-image: url(../toolbox/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;
}
.explore-box h2 {
    font-size: 24px;
    line-height: 28px;
    margin-top: 0;
    text-align: left;
    letter-spacing: 0;
}

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

/* add shadow */
.box-shadow { box-shadow: 0 3px 3px rgba(0,0,0,0.18); }

/* helper class for long buttons that need to wrap */
.text-wrap { white-space: normal; }

/* 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*/; }
.searchForm svg { height: 23px; }
@media (max-width: 47.99em) {
    .searchForm { margin-top: 1rem; }
}


/* ==================================================
	Site Ribbon
================================================== */
.ribbon { background: #008391 /*cc*/; color: #fff; font-weight: 600; padding: .55rem 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: #4a4a4a; }
#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: 47.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, .research .research > a, .methods .methods > a, .funding .funding > a, .statistics .statistics > a, .publications .publications > a, .about .about > a { background-color: #5b5b5b; }


/* ==================================================
	Breadcrumbs
================================================== */
.breadcrumb { font-size: 0.875rem; position: relative; top: -17px; 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
================================================== */
p.heading a {color: #fff;}
p.heading a:hover, p.heading a:focus {text-decoration: underline !important;}
.subNav .heading { text-transform: uppercase; color: #fff; background: #4a4a4a; font-size: 1rem; font-weight: 700; padding: 8px 15px; margin: 0; }

.subNav ul { list-style: none; margin: 0; padding: 0; }
.subNav li { position: relative; }
.subNav li a, .subNav li .no-link { background: #f2f2f2; display: block; padding: 10px 35px 10px 10px; border-left: 5px solid #f2f2f2; line-height: 1.2; transition: all .1s linear; }
.subNav li a:hover, .subNav li a:focus, .subNav li.is-hover > a { background: #2f70a8; color: #fff; border-left-color: #2f70a8; text-decoration: none; transition: color .1s linear, background .1s linear, border .1s linear; }
.subNav li a.active { border-left-color: #2f70a8; background: #f9f9f9; color: #363636; }

.subNav ul ul li a, .subNav ul ul li .no-link { padding-left: 1.5rem; }
.subNav ul ul ul li a, .subNav ul ul ul li .no-link { padding-left: 2rem; }
.subNav ul ul ul ul li a, .subNav ul ul ul ul li .no-link {	padding-left: 2.5rem; }
.subNav ul ul ul ul ul li a, .subNav ul ul ul ul ul li .no-link { padding-left: 3rem; }

/*left nav mobile*/
#leftNav .modal-header a {color: #fff; text-decoration: none;}
#leftNav .modal-header a:hover, #leftNav .modal-header a:focus {color: #fff; text-decoration: none;}

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

.expand svg { padding: 4px; border-radius: 3px; height: 22px; width: 22px; }
.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 li.is-hover .no-link + .expand svg rect { fill: #333; }

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

/* External Links in Left Nav */
.subNav .extlink { background: none; display: inline-block; padding: 0; border: none; transition: none; }
.subNav .extlink:hover { background: none; }
.subNav-extlink { position: absolute; padding: .5rem; top: 7px; right: 0; display: inline-block; line-height: 0; }

/* toggle button to show on mobile */
.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 svg { fill: #fff; height: 20px; width: 26px; margin-right: .3rem; }
	.togSubNav:hover, .togSubNav:focus { cursor: pointer; background: #352d57 /*cc*/; }

@media (max-width: 991px) {
	/* 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; }
}


/* ==================================================
	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, .lastUpdate { font-size: 1rem; color: #fff; }
.footerGray { background: #363636; }
.lastUpdate { padding: 7px 0; }
footer { background: #272727; }

footer h2 { font-size: 1.125rem; padding-top: 0; text-transform: uppercase; font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,"sans-serif"; font-weight: 600; }
footer a, footer a:hover, footer a:focus { color: #fff; }
footer li { margin-bottom: 10px; line-height: 1; }
.links { padding: 0 0 60px 0; }
.govLinks { margin-top: 30px; }

.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 (max-width: 47.99em) {
    footer { padding-bottom: 50px; } /* add some room for the sticky section nav at bottom */
    footer .list-unstyled { margin: 0 0 1rem 0; padding: 0 0 1rem 0; border-bottom: 1px solid #5b5b5b; }
    footer .list-unstyled li { display: inline-block; padding: 4px 12px 4px 0; margin-right: 8px; border-right: 1px solid #5b5b5b; }
    footer .list-unstyled li:last-child { border: none; }
    
    .tagline-container { height: auto; }
    .tagline { font-size: 1.125em; padding: 1rem 0; }
}

/* 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 #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; }
@media (max-width: 991px) {
	.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; margin-top: 1rem; }
	.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: #008391; /*cc*/ border-color: #008391; /*cc*/ }
}


/* ==================================================
	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; }
/* 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, .card-white.static:hover { top: 0; box-shadow: 0 3px 3px rgba(0,0,0,0.18); cursor: inherit;}

/* 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: 4rem; 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; }

/* 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("../toolbox/images/dccps/icon-news.svg"); }
	.card-funding:before { background-image: url("../toolbox/images/dccps/icon-funding.svg") ; }
	.card-jobs:before { background-image: url("../toolbox/images/dccps/icon-jobs.png") ; }
.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; }

/* external links on cards */
.ext { position: relative; }
.card-extlink { position: absolute; padding: .5rem; bottom: 0; right: 0; background: rgba(0,0,0,.05); display: inline-block; line-height: 0; }


/* ==================================================
	Tables
================================================== */
table { line-height: 1.3; }
caption {caption-side: top; font-weight: bold;font-size: .8em;}

/* ==================================================
	Figures
================================================== */
figcaption {font-weight: bold;font-size: .8em;}
/* ==================================================
	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; }
.state { display: table-cell; background: #2f70a8; 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: #2f70a8; 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; }

/* improve nested toggles so colors/backgrounds work */
.tog-content .tog-control button { background: #fff; }
.tog-content .tog-control button:hover, .tog-content .tog-control button[aria-expanded="true"] { background: #2f70a8; }
.tog-content .tog-content { background: #fff; }
/* account for a nested toggle in a child element with a white background (expand agenda, table with white background, then a toggle again for example) */
.bg-white .tog-control button, .bg-white .tog-content { background: #f2f2f2; }
    

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

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

/* just hide to avoid FOC */
.modalItem-content { 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: #146758; 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 {
    margin-bottom: 10px;
    width: 100%;
    border-radius: 3px;
    background-color: #f2f2f2;
    position: relative;
    top: 0;
    transition: all .3s ease-in-out;
}
.bg-lightgray .nav-pills>li {background-color: #fff;}
.nav-pills>li>a:first-child {
    font-weight: 600;
    text-decoration: none;
    padding: 10px 15px;
    display: inline-block;
    margin-top: 0;
}
.nav-pills>li:hover, .nav-pills>li: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;
}
/* 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 #146758; 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: #146758; 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 #146758; 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: #146758; color: #fff;  }
    .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-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 #146758; 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: #146758; 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 #146758; 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: #146758; 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
================================================== */
.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; 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 { background: #041512; cursor: pointer; transition: all .3s ease-in-out;}
.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: 47%; 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; }