/*** ==================================================
	Bootstrap Overwrites/Additions/Fixes
================================================== ***/
[role="main"] a { text-decoration: none; }
a.btn { text-decoration: none!important; }
.container { width: 98%; max-width: 1200px; }
/* The close button has opacity that makes it fail a contrast check and it has no visual focus cue. Opacity turned off, focus style added. */
.close { opacity: 1; text-shadow: none; color: #000; }
.close:focus { outline: 1px dotted #000; }
.close:focus, .close:hover { color: #000!important; }
/* BS removes vertical scrollbar and adds padding to account for that on modal. Stop that. */
body, .modal { padding-right: 0!important; } 
.ml-5-5 { margin-left: 38px; margin-left: calc(32px + 0.5rem);}

.btn-emblem, .btn-emblem:hover, .btn-emblem:focus, .btn-emblem:active {color:#5b5b5b; background-color: #F2F2F2;}   
/* ==================================================
	Smart Menus Overwrites
================================================== */
.sm { z-index: 999; }
.sm-clean { border-radius: 4px; padding: 0; background: white; }
.sm-clean a, .sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active { font-family: inherit; font-size: 1.2rem; color: #A90101; }
.sm-clean a.current { color: #A90101; }
.sm-clean a span.sub-arrow { background: #f8f8f8; border: 1px solid #ccc; }
.sm-clean a span.sub-arrow:before { color: #333; font-size: 1.3rem; }

.sm-clean ul { border-radius: 0!important; padding: 0;}
.sm-clean ul a { border-left: 8px solid transparent;}

.home .home .active, .study .study .active, .resources .resources .active, .studies .studies .active, .achievements .achievements .active { background: #f2f2f2; color: #A90101; }

@media (min-width: 768px) {
    .sm-clean { border-radius: 0; }
    .sm-clean a, .sm-clean.sm-vertical a { padding-top: .75rem; padding-bottom: .75rem; transition: background .1s linear; }
    .sm-clean.sm-vertical a:hover, .sm-clean.sm-vertical a:focus, .sm-clean.sm-vertical a:active, .sm-clean.sm-vertical a.highlighted { color: #fff; background: #5b5b5b;  }
    .sm-clean.sm-vertical a.current { color: #fff; }
    .sm-clean.sm-vertical ul a { padding-left: 30px; }
    .sm-clean.sm-vertical ul a:hover, .sm-clean.sm-vertical ul a:focus, .sm-clean.sm-vertical ul a:active, .sm-clean.sm-vertical ul a.highlighted { background: #eee; color: #333; padding-left: 30px; }
    .sm-clean.sm-vertical ul a.current { color: #fff; }
    .sm-clean.sm-vertical span.scroll-up:hover span.scroll-up-arrow, .sm-clean.sm-vertical span.scroll-up:hover span.scroll-down-arrow { border-color: transparent transparent #0000EE transparent; }
    .sm-clean.sm-vertical span.scroll-down:hover span.scroll-down-arrow { border-color: #0000EE transparent transparent transparent; }
    .sm-clean.sm-vertical a span.sub-arrow { border-left-color: #4d4d4d; margin-top: -3px; right: 10px; background: transparent; }
	.sm-clean.sm-vertical a:hover span.sub-arrow { border-left-color: #fff; }
	
	/* active nav styling */
	.home .home .active, .study .study .active, .resources .resources .active, .studies .studies .active, .achievements .achievements .active { background: #5b5b5b; color: #fff; }
	.sm-clean.sm-vertical a.active span.sub-arrow, .sm-clean.sm-vertical a:active span.sub-arrow,  .sm-clean.sm-vertical a[aria-expanded="true"] span.sub-arrow { border-left-color: #fff; }
}

/* ==================================================
	Structure
================================================== */
h1, h2, h3, h4 {color:#5b5b5b; font-weight: 600;}
h1 {font-size: 2rem; margin-bottom: 1rem; margin-top:.5rem;}
h2 {font-size: 1.7rem; margin-bottom: 1.rem;}
h3 {font-size: 1.5rem;}
.study h3 {font-size: 1.2rem;}
a, a:hover, a:active {color: #A90101; text-decoration:none;}
ul li {margin-bottom: .4rem;}
.home h1 { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}
/* ==================================================
	Misc
================================================== */
html { overflow-y: scroll; scroll-behavior: smooth; } /* Force scrollbar on right side to avoid viewport width change on short pages */
img, object, embed, video { max-width: 100%; height: auto; width: auto; } /* responsive media */
.extlink { display: inline-block; margin: -8px 0 0 3px; vertical-align: middle; }
/* 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: 561px; margin: 23px 0; }

.warning {background-color: yellow;}
.boxOutlineDouble {border:4px double #d7d7d7; }
.boxOutlineGreen {border:1px solid #02AB50;}
.learnMore a {color:#02AB50; font-weight:bold;}
.ltgrey {background-color: #f2f2f2;}
.sidebox {width: 50%; margin: 0 0 1rem 1rem;}
.underlined {     margin-bottom: 0.5em;}
.underlined p {margin: 0;}
.underlined p a {border-bottom: 1px solid #ccc;padding: 0.5em 0;display: block;}
/*.underlined p:first-of-type a {    margin-top: 0.5em;    border-top: 1px solid #ccc;} */
.underlined p a:hover { background-color: #e8e8e8; }

/* ==================================================
	Cards
================================================== */
.card { position: relative; top: 0; transition: top .3s linear; border: 1px solid rgba(129, 129, 129, 0.5); }
.card:hover, .card:focus { top: -5px; transition: top .3s linear; box-shadow: 0 12px 10px -6px rgba(218, 218, 218, 0.75); text-decoration: none;}
.card-heading, .card-heading:hover {background-color:#5b5b5b; color:#fff; padding: 7px;}
.card-head, .card-head h2, .card-head h3 {padding: 7px;}
.card-heading h2 {color: #fff; text-align: center;}
.design .card-text {text-align: center;}
.home .card a, .home .card a:active, .home .card a:hover, .home .card a:focus {color: #212529;}

.border-highlight {border-left: 6px solid #02AB50; padding-left: 5px}
.media-card {background: #f8f9fa; border: 1px solid rgba(129, 129, 129, 0.5); border-radius: .25rem; flex-direction: column;}
.media-child {width: 100%; margin-top: 1rem;}
.media-top {display:none;}
@media (max-width: 47.99em) {
	.media-sidebar {display:none;}
	.media-top {display: block;}
}
.videoContainer {display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
.videocard {background: #f8f9fa; padding: 1em; border: 1px solid rgba(129, 129, 129, 0.5); position: relative;
    top: 0; transition: top .3s linear; width: 48%; margin: 0 1% 1% 0;}
.videocard:hover, .videocard:focus { top: -5px; transition: top .3s linear; box-shadow: 0 12px 10px -6px rgba(218, 218, 218, 0.75); text-decoration: none;}
.videocard .extlink {
  position: absolute;
  bottom: 0;
  right: 0;
  border-top: 1px solid rgba(129, 129, 129, 0.5);
  padding: 5px;
  line-height: 0;
  border-left: 1px solid rgba(129, 129, 129, 0.5);
}

/*@media (min-width: 576px) and (max-width: 768px) {
	.video-card {flex-direction: row; justify-content: space-between;}
	.video-child {width: 48.5%;}
}
@media (min-width: 768px) and (max-width: 992px){
	.video-card {flex-direction: column; justify-content: flex-start;}
	.video-child {width: 100%;}
}
@media screen and (min-width: 992px) {
	.video-card {flex-direction: row; justify-content: space-between;}
	.video-child {width: 48.5%;}
} */


/* ==================================================
	Icons
================================================== */

.iconContainer {display: inline-block; margin-right: .5rem;}
.iconic-aperture-blade  {fill:#5b5b5b;} 
.iconic-aperture-blade-1 {fill:#02AB50;}
.iconic-book-md {fill:#5b5b5b;} 
.iconic-book-cover {fill:#02AB50;} 
.iconic-download  {fill: #A90101; stroke: #A90101;}
.iconic-download-bar {fill: #A90101; stroke: #A90101;}
.iconic-graph-md {fill:#5b5b5b;}
.iconic-graph-chart {stroke:#02AB50;}
.iconic-star {fill:#02AB50;}
.iconic-people-person-center {fill:#02AB50;}
.iconic-people-person-right {fill:#5b5b5b;}
.iconic-people-person-left {fill:#5b5b5b;}
.iconic-layers-layer-back {fill:#02AB50;}
.iconic-layers-layer-front {fill:#02AB50;}
.iconic-beaker-md {fill:#5b5b5b;}
.iconic-beaker-fluid {fill:#02AB50;}
.iconic-clipboard-board {fill:#02AB50;}
.iconic-image-portrait-mountain-front {fill:#02AB50;}
.iconic-document-page {fill:#02AB50;}
.iconic-video-body {fill:#02AB50;}

/* ==================================================
	buttons
================================================== */
.btn-green {color: #fff; background-color: #028940; border-color: #028940; height: 2.8rem; text-align: center; font-weight: 600; vertical-align: middle;}

/* ==================================================
	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: lightgreen; }
@media (max-width: 47.99em) {
    .searchForm { margin-top: 1rem; }
}
/* ==================================================
	Site Ribbon
================================================== */
.ribbon { background: #a90101; color: #fff; font-size: 1.5rem; padding: .5rem 0; line-height: 1.25; }
.ribbon a, .ribbon a:hover, .ribbon a:active, .ribbon a:focus {color: #fff;}

/* ==================================================
	Images on pages
================================================== */
.pagePhoto {float: right;}
@media (max-width: 37.49em) {.pagePhoto {float: none; display: block; margin: .5rem auto;}}
/* ==================================================
	Mobile 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: .75rem 0; }
	/* only show the toggle and hide the menu if JS is enabled */
	.js #menu-button, .js #search-tog { display: block; width: 46.5%; }
	.js #search-tog { top: .75rem; }
	.js .mobileState { display: none; }	
}

/* ==================================================
	Scroll to Top
================================================== */
p.totop {z-index: 500; position: fixed;	bottom: 10px;	right: 10px; text-align: center; padding: 0; margin: 0;	display: none; background: url("../i/return.to.top.png") center no-repeat;}
p.totop a {padding: 32px;	display: inline-block;}

/* ==================================================
	usa banner
================================================== */
.usa-banner {
    background: #f0f0f0;
}

.usa-banner__text {
    color: #000;
    font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.2;
    margin: 0 auto;
    max-width: 1200px;
    padding: 16px 0;
    width: 98%;
}

.usa-banner__text img {
    margin-right: 8px;
}

/* ==================================================
	Footer Links
================================================== */
footer { text-align: center; }
ul.inline-links { list-style: none; margin: 0 0 1em 0; padding: 0; }
ul.inline-links li { margin: 0 .5em; padding: 0; display: inline-block; }
footer a {color: #666666; text-decoration: none;}
footer a:hover {text-decoration: underline; color: #666666;}
@media (max-width: 37.49em) {
	footer { text-align: left; }
	ul.inline-links li { margin: 0 0 .3em 0; display: block; }
}


/* ==================================================
	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("../i/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; }

/* below added by JC */
.modal-title {margin: 0 auto; width: 100%;}
/* */
.modalItem {display: inline-block; height: 100%; background-color: #5b5b5b;} 



/* ==================================================
	Print CSS
================================================== */

@media print {
	body { margin:0; padding:0; font: 15px Arial, Helvetica,"Lucida Grande", sans-serif; color: #000; }
	a {color: #000; }
	nav, .sideNav, .card-img-top, .searchWrap { display: none; }
	div[role=main] { margin: 0 auto; }
}