/* ==================================================
	Color Variables (From CISNET Logo and NIH Logo)
================================================== */
  :root {
	--cisnet: #2e6ab3;
	--cisnet-dk: #1E4473;
	--cisnet-card-dk: #2b5485;
	--cisnet-bk: #030303;
	--cisnet-background: #F5F9FF;
	--cisnet-nav:#0C7D8C;
	--cisnet-nav-dk:#07535d;
	--cisnet-link: #3171BF;
	--cisnet-link-dk: #1e2b73;
	--cisnet-rule: #a6bad2;

	--nih: #BB0E3D;
	--nih-lt: #C72E04;
	--nih-med: #C70E3F;
	--nih-dk: #A10B33;
	--nih-dkst: #3B0413;

	--cisnet-yellow:#FFDE29;
	--cisnet-yellow-dk:#CCB221;
	--cisnet-aqua:#28BCBF;

	--bladder:#FBB03B;
	--breast:#FF7BAC;
	--cervical:#00A99D;
	--colorectal:#063280;
	--esophagus:#ADA1D7;
	--gastric:#8975D5;
	--lung:#ACACAC;
	--myeloma:#AC1F23;
	--prostate:#99C0E6;
	--uterine:#F5846F;

	/*NCI*/

	--nci-link:#2e6ab3;

	/*base*/
	--bg-grey-cool-5:#F0F0F0;
	--bg-grey-cool-10:#DFE1E2;
	--bg-grey-cool-30:#A9AEB1;
	--bg-grey-cool-50:#71767A;
	--bg-grey-cool-60:#565C65;
	--bg-grey-cool-70:#3D4551;
	--bg-grey-cool-90:#1B1B1B;

	/*primary*/
	--bg-cerulean-20:#99CAE4;
	--bg-cerulean-40:#3395CA;
	--bg-cerulean-50:#007BBD;
	--bg-cerulean-50v:#067CBC;
	--bg-cerulean-70:#004971;
	--bg-cerulean-80:#00314B;

	/*secondary*/
	--bg-teal-20:#BEEBEE;
	--bg-teal-30:#4BBFC6;
	--bg-teal-40:#3C989E;
	--bg-teal-50v:#338084;
	--bg-teal-60:#338084;
	--bg-teal-70:#1E4C4F;

	/*accent-cool*/
	--navy-10:#D7E5F4;
	--navy-10:#92A9C8;
	--navy-10:#5478AB;
	--navy-10:#284976;
	--navy-10:#06162D;

	/*accent-warm*/
	--golden-5:#FDF2BF;
	--golden-10:#FEE685;
	--golden-20:#FACE00;
	--golden-30:#DDAA01;
	--golden-40:#B38C00;

  }



/* ==================================================
	Bootstrap Overwrites/Additions/Fixes
================================================== */

body { text-wrap: pretty;}

.nciLogo svg{ max-height: 54px; margin: 23px 0; }
 nav a {cursor:pointer}
.container { width: 98%; max-width: 1200px; }
.modal-content { border-radius: .5rem; }
.modal-header { padding: .5rem 1rem; font-weight: 600; border-bottom: none; }
/* 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; } */
/* .breadcrumb { font-size: 1rem; padding: .25rem 1rem; } */

/* Active Section Highlight in Main Navigation - body class -> li class -> link */

@media (min-width: 990px) {
	
.home .home > a {
	border-bottom: solid 3px var(--bg-cerulean-40);
}

.about .about > button {
	border-bottom: solid 3px var(--bg-cerulean-40);
}

.modeling .modeling > button {
	border-bottom: solid 3px var(--bg-cerulean-40);
}

.sites .sites > button {
	border-bottom: solid 3px var(--bg-cerulean-40);
}

.impact .impact > button {
	border-bottom: solid 3px var(--bg-cerulean-40);
}

.resources .resources > button {
	border-bottom: solid 3px var(--bg-cerulean-50);
}

.publications .publications > button {
	border-bottom: solid 3px var(--bg-cerulean-40);
}

}

.navbar.site-nav {
	font-family:"Poppins", Verdana, serif; 
	font-weight: 600;
	background-color: #fff;
	}

.site-nav .nav-link {
	color:var(--bg-grey-cool-70);
	padding:.7rem 1.1rem!important;
	border-bottom: 3px solid transparent;
}


.site-nav .dropdown-toggle:after {
		border:0px;
		margin:0;
		content:"";
	}


.navbar .megamenu {
	padding: 1rem;
	transition: all .2s ease-out;
	font-weight: 400;
}

.nav-item .dropdown .has-megamenu {
	background-color: transparent;
}



.site-nav .navbar-toggler {
		background-color: transparent;
		color: transparent;
		cursor:pointer;
		border:0px;
	}

.site-nav .navbar-toggler-icon {
	display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image:url("../i/hamburger-menu.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
	color:#fff;
}

.site-nav button svg { 
	transform: rotate(90deg);
}

.site-nav button[aria-expanded="false"] svg { 
	transform: rotate(90deg);
}

.site-nav button[aria-expanded="true"] svg { 
	transform: rotate(-90deg);
}

#main_nav > ul > li > div {box-shadow: 0px 25px 20px -20px rgba(0,0,0,0.55);}

.mega-container ul>li {
	margin-bottom:.6em;
}

#cisnet-logo-svg {

	.cls-1 {
	  fill: #fff;
	}

	.cls-2 {
	  fill: #2e6ab3;
	}

}

/* ============ desktop view ============ */

@media all and (min-width:991px) {
  .navbar .has-megamenu{position:static!important;}
  .navbar .megamenu{left:0; right:0; width:100%; margin-top:0; background-color:var(--bg-cerulean-70); border-radius: 0%;border:0px;}
  .navbar .nav-link {transition: color .2s ease-out;}
  .navbar .nav-link:hover {border-bottom: solid 3px var(--bg-cerulean-40);}
  .navbar .nav-link:focus {border-bottom: solid 3px var(--bg-cerulean-70); background-color:var(--bg-cerulean-70); color:#fff;}
  .navbar .nav-link.active {border-bottom: solid 3px var(--bg-cerulean-70); background-color:var(--bg-cerulean-70);}
  .navbar.site-nav {padding-bottom: 0; padding-top:0;}
}	

/* ============ desktop view .end// ============ */

/* ============ mobile view ============ */

@media (max-width:991px) {


	.site-nav .nav-link {
		color:#fff;
		padding:.7rem 1.1rem!important;
		border-bottom: 0px solid transparent;
	}
	
	.navbar.site-nav {
		background-color:var(--bg-cerulean-70)!important;
		
		}

  .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
    overflow-y: auto;
      max-height: 90vh;
      margin-top: 10px;
  }

 
  .dropdown-menu {
	background-color:rgba(0,0,0,.2);
	border-radius:0;
  }

  #home-link {
	padding-top:1.5rem;
  }

  .togSubNav {
	background: var(--bg-cerulean-40)!important;
  }
}

/* ============ mobile view .end// ============ */

.fs-5 {
	font-size:1.16rem!important;
}


.sticky-top {
	z-index: auto!important;
}
/* ==================================================
	Print Styles
================================================== */
@media print {
	/* you get a dollar if you actually read this and do print CSS */
	@page { margin: 40px 20px 20px 20px; }
	
	/* print URLs from the main element only */
	main a[href]:after { content: " (" attr(href) ")"; }
	/* but don't print internal links */
	main a[href^="#"]:after { display: none; }

	/* stop flex columns in print since it can cause issues */
	[class*="col"] { flex-basis: 100%!important; max-width: 100%!important; width: 100%!important; }

	/* change flexbox to address Firefox printing */
	[class*="d-flex"], [class*="row"] { display: block!important; }
	
	/* show items that are hidden by default (toggled content, modals, etc.) */
	[aria-hidden="true"], .modalItem-content { display: block!important; }
	
	/* some things we can hide in print */
	.searchWrap, .navBar, .subNav-wrap, footer, [role="tablist"], .modalItem-trigger, .tog-control .state, .togSubNav { display: none!important; }
}

/* ==================================================
	CISNET General
================================================== */
	
/* NCI Logo 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: 100%; margin: 23px 0; } */


a {color: var(--cisnet-link); 
	text-decoration-style: dotted;
	text-underline-offset: .14rem;
	text-decoration-thickness: .05rem;
	text-decoration-skip-ink: auto;
	transition:all .2s;}
a:hover, a:focus { color: var(--cisnet-link-dk); }

h2 a {
	text-decoration: none;
}


h3 a {
	text-decoration: none;
}


.megamenu a {
	text-decoration-color: rgb(255, 255, 255,.0);
	transition:all .2s;
}

.megamenu a:hover { 
	text-underline-offset: .145rem;
	text-decoration-thickness: .065rem;
	text-decoration-skip-ink: auto;
	color:#fff;
	text-decoration-color:#fff;
}

.megamenu a:focus { 
	color:#fff;
	text-decoration-color:#fff;
}

thead a {text-decoration: none;}

/* ==================================================
	Typography
================================================== */

h1, h2, h3 { color:var(--cisnet-dk)}

.site-title {text-transform: uppercase;}

.footer-heading {color:#fff;}

ol {
	text-wrap:pretty;
}

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

#logo-text p {
	max-width:86ch;
}

.opNav {
	padding-top: .5rem;
	font-size: .8rem;
}

@media (max-width: 979px) {
	.opNav {
		padding-top: .5rem;
		font-size: 1rem;
	}
}

/*========================================
		Home Banner
==========================================*/

#Layer_1 {
min-width:110px;
max-width:105px;
}

#Layer_2 {
	min-width:125px;
	max-width:120px;
}

.home-header {
	background: rgb(46,106,179);
	background: linear-gradient(0deg, rgba(46,106,179,1) 60%, rgba(30,68,115,1) 40%);
	border-bottom-right-radius:.6rem;
	border-bottom-left-radius:.6rem;
	}

.home-hero {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}

.logo-area {
	grid-column: 1 / 1;
	grid-row: 1 / 6;
	align-self: center;
	justify-self: center;
	padding-bottom:2rem;
  }

.title-area {
	grid-column: 1 / 6;
	grid-row: 1 / 3;
	background-color: var(--cisnet-dk);
	border-top-right-radius:0rem;
	border-top-left-radius:0rem;
	display:flex;
	align-items: center;
	justify-content: center;
  }


.text-area {
	grid-column: 1 / 6;
	grid-row: 3 / 5;
	background-color: var(--cisnet);
	border-bottom-right-radius:.7rem;
	border-bottom-left-radius:.7rem;
	display:flex;
	align-items: center;
	justify-content: center;
  }



#hero > div > div.title-area > div > p {
	font-size: 1.75rem;
	font-family: 'Poppins', sans-serif;
	font-weight:700;
}
 
@media (max-width: 1199px)  {

.title-item {
	display:flex;
	flex-direction:row;
	align-items:self-start;
	gap:20px;
	}

	#hero > div > div.title-area > div > p {
		max-width: 19ch;
		font-size: 1.75rem;
		font-family: 'Poppins', sans-serif;
		font-weight:700;
		padding-top:0;
	}

.title-area {
		align-items: center;
	justify-content: start;
	}

.text-area {
		align-items: center;
	justify-content: start;
	}

}	

@media (max-width: 979px)  {

.title-item {
		display:flex;
		flex-direction:row;
		align-items:self-start;
		gap:20px;
		}
		
		#hero > div > div.title-area > div > p {
			max-width: 24ch;
			font-size: 1.45rem;
		}
	}	

	@media (max-width: 480px)  {
				
				#hero > div > div.title-area > div > p {
					max-width: 19ch;
					font-size: 1.25rem;
				}
			}
			
			
/*=============================================
Figures
===============================================*/

.cisnet-fig img {
	mix-blend-mode: multiply;
}

.fig-models {
	width:85%;
}



/*========================================
		Lists
==========================================*/
.bold-ol {
	list-style: none;
	counter-reset: numbers 0;
	margin:0;
	padding:0;
	padding-left:.5rem;
  }
  
.bold-ol li::before {
	counter-increment: numbers;
	content: counter(numbers)".";
	font-weight: 700;
	margin-right: .4rem;
  }


  .lh-list-lg li {
    margin-bottom: 1em;
}


/*========================================
		Home Highlights
==========================================*/

.cisnet-bg { background-color: var(--cisnet);}

.cisnet-bg-light {
	background-color: var(--cisnet-background);
}

.cisnet-bg-dk {background-color: var(--cisnet-dk)!important;}

.cisnet-text {
	color:var(--cisnet);
}

.cisnet-text-dk {
	color:var(--cisnet-dk);
}

.highlight-img {
	max-height:165px;
}

.highlight-page-img {
	max-height:340px;
}

.cisnet-border {
	border-color:var(--cisnet)!important;
}

.cisnet-border-light {
	border-color:var(--cisnet-background)!important;
}

.cisnet-border-dark {
	border-color:var(--cisnet-dk)!important;
}



.btn-cisnet {
		background-color: var(--bg-cerulean-40);
		color:#fff;
		font-weight:600!important;
		font-family:'Poppins', sans-serif;
		}
	
	.btn-cisnet:hover {
		background-color: var(--bg-cerulean-50);
		color:#fff;
	}

	.btn-cisnet:active {
		background-color: var(--bg-cerulean-50)!important;
		color:#fff!important;
	}

	.btn-cisnet:focus {
		background-color: var(--bg-cerulean-50)!important;
		color:#fff!important;
	}

	.btn-more {
		color:#fff;
	}



.btn-outline-cisnet {
	border-color: var(--cisnet);
	border-width: 2px;
	color:var(--cisnet);
	font-weight:600!important;
	font-family:'Poppins', sans-serif;
	transition: all 0.3s ease;
	margin-bottom:4px;
}


.btn-outline-cisnet:hover {
	background-color: var(--cisnet-background);
	color:var(--cisnet)!important;
	border-color: transparent!important;
	box-shadow: 0px 0px 12px rgb(46, 106, 178,.4)!important;
	border-bottom:4px solid var(--cisnet)!important;
	margin-bottom:1px;
}

.btn-outline-cisnet:active {
	border-color: transparent!important;
	box-shadow: 0px 0px 12px rgb(46, 106, 178,.4)!important;
	background-color: var(--cisnet-background);
	color:var(--cisnet)!important
}

.btn-outline-cisnet:focus {
	border-color: transparent!important;
	box-shadow: 0px 0px 12px rgb(46, 106, 178,.4)!important;
	background-color: var(--cisnet-background);
	color:var(--cisnet)!important;
}

.bladder-btn:hover {border-bottom:4px solid var(--bladder)!important;}
.breast-btn:hover {border-bottom:4px solid var(--breast)!important;}
.cervical-btn:hover {border-bottom:4px solid var(--cervical)!important;}
.colorectal-btn:hover {border-bottom:4px solid var(--colorectal)!important;}
.esophageal-btn:hover {border-bottom:4px solid var(--esophagus)!important;}
.gastric-btn:hover {border-bottom:4px solid var(--gastric)!important;}
.lung-btn:hover {border-bottom:4px solid var(--lung)!important;}
.myeloma-btn:hover {border-bottom:4px solid var(--myeloma)!important;}
.prostate-btn:hover {border-bottom:4px solid var(--prostate)!important;}
.uterine-btn:hover {border-bottom:4px solid var(--uterine)!important;}



.btn-outline-dropdown {
	border-color: var(--cisnet);
	color:var(--cisnet);
}

.btn-outline-dropdown:hover, .btn-outline-dropdown:active, .btn-outline-dropdown:focus {
	border-color: var(--cisnet);
	color:var(--cisnet);
}

.btn-dropdown-menu {
	background-color:#fff;
	border-radius: 0.375rem;
}

.btn-dropdown-menu li a { background: #fff; color: var(--nci-base-dark); display: block; padding: .65rem 2rem; font-size: .938rem; line-height: 1.2; transition: all .1s linear; text-decoration: none; white-space: wrap;}

.btn-dropdown-menu li a:hover, .btn-dropdown-menu li a:focus, .btn-dropdown-menu li.is-hover > a { background: var(--nci-base-lightest); color: var(--nci-link); text-decoration: none; transition: color .1s linear, background .1s linear, border .1s linear; }
	
 li a.active { font-weight: 600; color: var(--nci-link); }

 /* .btn-dropdown-menu .docinfo { display: inline-block; color:#fff; font-size: .5rem; font-weight:800; background-color:var(--cisnet);padding:4px 7px;border-radius:14px; border:1px solid #fff;transform:translate(30ch,-20px);} */

 .btn-dropdown-menu .docinfo {display:none;}

 .btn-circle {
	margin:0;
	padding:1px;
	border-radius:50%;
	
 }

.btn-circle:active {
	color:#fff!important;
	border-color:transparent!important;
	background-color: var(--cisnet)!important;
}


/*Hide border when 1-col homepage section headings*/
@media (max-width: 980px) {
	.border-end {
border-right: 0px!important;
	}
}

/*Add background color to homepage section headings on mobile*/
@media (max-width: 980px) {
	.bg-heading {
background-color: rgba(108, 117, 125, 0.3) ;
color:#00314b;
	}

	.bg-heading span {
		display:none;
	}
}



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

/*=============================================
Header Cards
===============================================*/


/*=============================================
Site Cards
===============================================*/
.cisnet-site-card {
	background-color: var(--cisnet);
	color:#fff;
	border-bottom-left-radius: .6rem!important;
	border-bottom-right-radius: .6rem!important;
	border-bottom:.6rem solid var(--cisnet-dk)!important;
}

.card-header-dk {
	background-color: var(--cisnet-dk)!important;
}

.cisnet-site-card-header {
	border-left:.55rem solid var(--cisnet-dk)!important;
	transform: translateY(0);
    transition: .175s ease-out;
}

.cisnet-site-card-header:hover {
	transform: translateY(-.2rem);
	/* border-left:.55rem solid var(--cisnet)!important; */
	background-color: var(--cisnet-dk)!important;
}

.cisnet-site-card-header h2 {
	text-transform: uppercase;
	line-height:1.85rem;
}

.cisnet-site-card-header-alt {
	border-left:.55rem solid var(--cisnet-dk)!important;
	background: var(--cisnet);
	padding-top:1rem;
	padding-bottom:1rem;
}


.cisnet-site-card-header-alt h2 {
	text-transform: uppercase;
	line-height:1.85rem;
}


.card-light {
	border-color: var(--cisnet-background)!important;
}

#additional-cards .card {
	transition: all .2s;
}

#additional-cards .card:hover {
	border-color: var(--cisnet-background)!important;
	box-shadow: 0px 0px 12px rgb(46, 106, 178,.4)!important;
}

#highlight-cards .card {
	transition: all .2s;
}

#highlight-cards .card:hover {
	border-color: transparent!important;
	box-shadow: 0px 0px 12px rgb(46, 106, 178,.4)!important;
}

#highlight-cards .card-header:hover {
	border-color: var(--cisnet-background)!important;
}

.bladder {
	border-color: var(--bladder)!important;
}

.breast {
	border-color: var(--breast)!important;
}

.cervical {
	border-color: var(--cervical)!important;
}

.colorectal {
	border-color: var(--colorectal)!important;
}

.esophageal {
	border-color: var(--esophageal)!important;
}

.gastric {
	border-color: var(--gastric)!important;
}

.lung {
	border-color: var(--lung)!important;
}


.myeloma {
	border-color: var(--myeloma)!important;
}

.prostate {
	border-color: var(--prostate)!important;
}

.uterine {
	border-color: var(--uterine)!important;
}


/*=============================================
Funding Table
===============================================*/
#grant-th th {background-color:var(--cisnet-nav); color:#fff;text-align:center;border-right-width:1px;border-right-color:#fff;transition: all .2s ease-out;}
#grant-th th:hover {background-color:var(--cisnet-nav-dk)}
#grant-th th:first-child {background-color:#fff;}
#grant-th th:last-child {border-right-width:0px;}
#grant-row > tr > th {background-color:var(--cisnet); color:#fff;text-align:center;font-weight:400;padding:1rem;}
#grant-row > tr > td {border-right-width:1px;border-right-color:#efefef;}
#grant-row > tr > td:last-child {border-right-width:0px;}

/*=============================================
PubSearch
===============================================*/
.p-card {
box-shadow:0px 0px 0px 0px;
}

.p-card-content .input-group-text {
	color:#fff;
	background-color:var(--cisnet-nav);
	border:2px solid var(--cisnet-nav);
}

.p-card-content .btn-outline-primary {
	color:#fff;
	background-color:var(--cisnet-nav);
	border:2px solid var(--cisnet-nav);
}

.p-card-footer .btn-primary {
	background-color:var(--cisnet-nav-dk);
	border:2px solid var(--cisnet-nav-dk);
}

/*=============================================
Search Results Styling
===============================================*/

.gmsl {margin-bottom:1rem;}

/*=============================================
Editing Callout
===============================================*/

.edit {
	background-color:yellow;
	padding:4px;
}

/*==================================
Model Links Visibility
====================================*/
.bladder-links, .breast-links, .cervical-links, .colorectal-links, .esophageal-links, .gastric-links, .lung-links, .myeloma-links, .prostate-links, .uterine-links {display:none;}

.bladder-pg .bladder-links{display:block;}
.breast-pg .breast-links{display:block;}
.cervical-pg .cervical-links{display:block;}
.colorectal-pg .colorectal-links{display:block;}
.esophageal-pg .esophageal-links{display:block;}
.gastric-pg .gastric-links{display:block;}
.lung-pg .lung-links{display:block;}
.myeloma-pg .myeloma-links{display:block;}
.prostate-pg .prostate-links{display:block;}
.uterine-pg .uterine-links{display:block;}