/***
Theme colors 
#4c386d - purple ribbon
#8143ED - purple link
#386D66 - teal (could use on home cards with 4d4d4d as text)
#4c386d - dark teal
#68AAA1 - light teal, used on active nav and other lines
/***

/* ==================================================
	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 {padding-top: 1rem!important; padding-bottom: 1rem!important;}
.usa-banner__header-text img {vertical-align: baseline; margin-right: 0.5rem!important;}

/* ==================================================
	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; } 
.alert-secondary {background: #efeff0!important;}

/* ==================================================
	Smart Menus Overwrites
================================================== */
.sm { z-index: 999; }
.sm-clean { border-radius: 4px; padding: 0; background: white; margin-top: 1rem; }
.sm-clean a, .sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active { font-family: inherit; font-size: 1.1rem; color: #333333; font-weight: 600; }
.sm-clean a.current { color: #333333; }
.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.sm-vertical a span.sub-arrow {margin-right: 20px;}

.sm-clean ul { border-radius: 0!important; padding: 0;}
.sm-clean ul a { border-left: 8px solid transparent;}
/*.sm-clean ul li:first-child a, .sm-clean ul li:first-child a:hover, .sm-clean ul li:first-child a:active { padding-left: 20px; font-weight: 800; } */

.home .home .active, .about .about .active, .syndromes .syndromes .active, .participants .participants .active, .studyteam .studyteam .active, .resources .resources .active { border-left: 3px solid rgba(104,170,161,.7); } 

@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-right: 0px; margin-top: -3px; right: 0px; background: transparent; }
	  .sm-clean.sm-vertical a:hover span.sub-arrow { border-left-color: #fff; }
    
    .sm-clean.sm-vertical a {padding: 10px 0px 10px 8px;}
	
	/* active nav styling */
	/*.home .home .active, .about .about .active, .syndromes .syndromes .active, .research .reserach .active, .studyteam .studyteam .active, .resources .resources .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; }
	
	.sm-clean.sm-vertical a.has-submenu { padding-right: 20px; }
}

/* ==================================================
	Structure
================================================== */
body {color: #222222;}
h1, h2, h3, h4 {color:#5b5b5b; margin-bottom: 1rem;}
h1 {font-size:2rem; }
h2 {font-size: 1.5rem; }
h3 {font-size: 1.2rem;}
a, a:active {color: #017C4C; text-decoration:none;}
a:hover {color: #017C4C; text-decoration:underline;}
:focus {outline: 1px auto rgba(1,124,76,.5) !important;}
ul li {margin-bottom: .5rem;}

/* ==================================================
	Cards
================================================== */
.card {transform: scale(1,1); transition: transform .3s ease;}
.card:hover {transform: scale(1.03, 1.03); transition: transform .3s ease;}
.home .card, .researchPage .card {background-color:#386D66;}
.home a.card, .home  a.card:hover, .home  a.card:active ,  .home  a.card:focus  {color: #fff; text-decoration: none;}
.home .card p, .researchPage .card p {text-align: center; margin:10px 0 0;}
.home .card div.rounded, .researchPage .card div.rounded {text-align: left; margin: 10px 0 0;}
.newsletter {margin: 0 0 15px 15px; float: right;}
.card .newsletter .card-body {padding: 0;}
.syndromes .card {background-color:#386D66;}
.syndromes .card-title {border-bottom: 1px solid #213F3B;}
.syndromes a.card, .syndromes a.card:hover, .syndromes  a.card:active,  .syndromes  a.card:focus  {color: #213F3B; text-decoration: none;} 
.card-deck .card {justify-content: space-around; min-height: 48px; }
.card.newsletter-card {background-color: #f7f8f9;}
.card.newsletter-card p {background-color: #606060; border-radius: 0; padding: 0.375rem 0.75rem;}

/* ==================================================
	Icons
================================================== */
.iconic-book {fill:#4d4d4d; margin: 0 .5rem;} 
.iconic-book-cover {fill:#2274a5;} 
.iconic-link {margin-right: .5rem;}
.iconic-link-link {stroke:#2274a5;} 
/* ==================================================
	Join Us section
================================================== */
.callout {border-top: 1px solid #68AAA1; border-bottom: 1px solid #68AAA1; text-align: center;}
/* ==================================================
	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; }
.indent {text-indent: 4.6em;}
div.indent:first-of-type{margin-top: -1.25em;}

/* Pagination on syndromes pages updated */
#prevNext {height: 3rem; margin: 20px auto -20px;}
a.btn-next, a.btn-prev {background-color:#386D66; color: #fff !important; height: 4rem !important; padding: 7px !important; vertical-align: middle;}
a.btn-short {height: auto !important;}
.vert-center {line-height: 3em; vertical-align: middle;}
@media (max-width: 1078px) {
	a.btn-short {font-size: .85rem;}
}
@media (max-width: 992px) {
	a.btn-next, a.btn-prev {font-size: .85rem;}
	.vert-center {line-height: 3.5em;}
}
@media (max-width: 813px) {
	a.btn-short {font-size: .75rem;}
}
@media (max-width: 507px){
	a.btn-prev, a.btn-next{font-size: .75rem;}
}
@media (max-width: 485px) {
	#prevNext{height: 4rem;}
	a.btn-next, a.btn-prev {font-size: .75rem; height: 3rem !important; margin: 20px auto -20px; padding: 2px !important;}
}
@media (max-width: 433px){
	a.btn-next, a.btn-prev {height: 4rem !important;}
}
@media (max-width: 350px) {
	#prevNext{height: 6rem;}
}
@media (max-width: 331px) {
	.vert-center{line-height: 1em;}
}
@media (max-width: 324px){
	a.btn-next, a.btn-prev {height: 5rem !important;}
}

#prevNext {display: flex; width: 100%; margin: auto;}
#prevNext a {background-color:#386D66; color: #fff !important; margin: auto; padding: 7px; width: 48%}
#prevNext #pagePrev {text-align: left;}
#prevNext #pageNext {text-align: right;}
@media (max-width: 275px){
	#prevNext a {font-size: .9em;}
}

/* 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; }
.pagePhoto {float: right; margin: 0 0 15px 15px; width: 35%; border: 1px solid #ccc;}
.photoBorder {border: 1px solid #ccc;}

.photoCaption {font-size: .75em; margin: 0 0px -1em 15px;}

.researchPage .tog-title, .researchPage .date {font-weight: normal;}
.researchPage .date {color: #666; font-size: .9rem; display: block; text-align: right;}
/* fixed issue of width being smaller for pubs that were shorter than a line long */
.researchPage .tog-control button {width:100%;}
.researchPage .tog-control .tog-title {width:100%;}

.studyteamContainer {margin-top: 2rem;}
.studyteamContainer img {border: 4px solid #fff; box-shadow: 0 0 8px rgba(0,0,0,.3); max-height: 150px;}
.videoContainer {float: right; margin: 0 0 15px 15px; width:320px; border: 1px solid #ccc;}
.videoContainer p {font-weight:800; font-size:.7rem; text-align: center;}

.highlight { background-color: yellow; padding: 10px;}

/* ==================================================
	Homepage Flex
================================================== */
.flex-container {display: flex;}
.flex-links {flex: 0 0 25rem; margin-left: 1em;}

@media (max-width: 1080px){
	.flex-container { display: block; }
	.flex-links { margin-left: 0;}
}

@media (max-width: 576px) {
	.spacingFix {margin-bottom: 0 !important;}
}

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

/* ==================================================
	Mobile Navigtaion
================================================== */
.navBar { position: relative; background: #666666; }
#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) {
  #logo {display: none;}
  .ribbon {background: #4C386D;}
	.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%; background-color: white; }
	.js #search-tog { top: .75rem; }
	.js .mobileState { display: none; }	
}
/* ==================================================
	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, footer a:active, footer a:focus {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; }
}

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

/* ==================================================
	Toggles
================================================== */
.tog-control { padding: 0; margin: 0 0 15px 0; }
.tog-control button { display: table; border: none; font-size: 1rem; margin: .5rem 0 0 0; padding: 0; border-radius: 4px; font-weight: 600; text-align: left; background: #ffffff; color: #666666; }

.tog-control button:hover { cursor: pointer; transition: all .2s ease-in-out; }
.syndromes .tog-control {margin-bottom: 1.5rem;}
.syndromes .tog-control button {font-size: 1.2rem; line-height: 1.5; margin-top: 0;}
.syndromes .tog-control .state {font-size: 1.2rem;}

.tog-control .tog-title { display: table-cell; vertical-align: middle; padding: 0 .75rem;}
.tog-content { background: #fff; border-left: 1px solid #68AAA1; padding: .5rem 1rem; margin: .25rem 0 1rem 2.2rem; box-shadow: inset .25rem .25rem 0 #fff, inset -.25rem -.25rem 0 #fff; }
.tog-content > :last-child { padding-bottom: 0; margin-bottom: 0; }
.studyteam .tog-control, .studyteam .tog-control .tog-title, .studyteam .tog-content {font-size: .75rem;}

.state { display: table-cell; font-size: .25rem; }
.state svg { padding: 4px; border-radius: 3px; height: 22px; width: 22px; background: #386D66; }
.state svg rect { fill: #fff; }

.tog-control button[aria-expanded="true"] .vert { display: none; }

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

@media (min-width: 576px) {
	.modal-dialog {max-width: 90%;}
}
@media (min-width: 992px) {
	.modal-dialog {max-width: 900px;}
}

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

/* ==================================================
	Content Break Points
================================================== */
@media screen and (max-width: 565px) {
  .newsletter {float:none; margin: 0 auto 10px; display: block;}
  .pagePhoto {display:none;}
  .videoContainer {float:none; margin: 0 auto 10px;}
}



/* ==================================================
	Print
================================================== */
@media print {
  body {	margin:0; 	padding:0; font: 15px Arial, Helvetica,"Lucida Grande", sans-serif; 	color: #000;}
a {color: #000; }
.container {width:95%; margin:10px; line-height: 1.5em;}
.ribbon {background: none;}
.ribbon a {text-decoration: none; color: #000;}
.pagePhoto {display: none;}
/*expand toggles for printing */
.tog-content[aria-hidden="true"] {display:block !important;}
/* grid */
div[class*="col-"] { width: 100%!important; margin: 0!important; float: none!important; flex:100%; max-width: 100%}
	.row { display: block; }
	.studyteam .studyteamContainer img {display: none;}
	
/*#content {page-break-inside: avoid; page-break-after: avoid; page-break-before: avoid;}
h1 {page-break-inside: avoid; page-break-after: avoid; page-break-before: avoid;} */
}