/* ============================================= */
/* ===== MICROSITE THEME COLOR OVERRIDES   ===== */
/* ============================================= */
 

:root {
    --site-primary: #1f8247;
    --site-secondary: #50b848;
    --white: #ffffff;
    --black: #000;
}
 
:root {
    --link-color: #4ca744;
    --link-hover: var(--site-primary);
    --link-visited: var(--site-secondary);
    --button-background-primary: var(--site-secondary);
    --button-background-secondary: var(--site-secondary);
    --button-text-primary: var(--black);
    --button-text-secondary: var(--black);
}
 
/* =========================== */
/* Microsite Header Navigation */
/* =========================== */
 
.journal-header.journal-bg {
    background-color: var(--site-secondary); /* Background Color */
    /* Gradient */
    background: linear-gradient(180deg, hsla(123, 47%, 29%, 1) 0%, hsla(115, 42%, 46%, 1) 50%, hsla(123, 47%, 29%, 1) 100%);
    background: -moz-linear-gradient(180deg, hsla(123, 47%, 29%, 1) 0%, hsla(115, 42%, 46%, 1) 50%, hsla(123, 47%, 29%, 1) 100%);
    background: -webkit-linear-gradient(180deg, hsla(123, 47%, 29%, 1) 0%, hsla(115, 42%, 46%, 1) 50%, hsla(123, 47%, 29%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#276B2A", endColorstr="#4CA744", GradientType=1 );
    border-bottom: 2px solid var(--white) !important; /* Bottom Border */
}
/* Add white border above desktop links */
@media (min-width: 900px) {
.journal-header .journal-header_content .navbar-menu_wrap {
    padding: 1rem 1rem 0 1rem;
    border-top: 2px solid white;
}
 
.journal-header .site-menu .site-menu-item.site-menu-lvl-0>.nav-link {
    color: var(--white) !important; /* Navigation Links Color */
}
 
.journal-header .site-menu .site-menu-item.site-menu-lvl-0>.nav-link i {
    color: var(--white) !important; /* Navigation Links Dropdown Icon Color */
    
}
}
 
.mobile-site-menu-toggle .icon-menu_hamburger:before {
    color: var(--white) !important;
}
 

/* ======================================== */
/* ======== JOURNAL SECTION STYLES  ======= */
/* ======================================== */
 
/* Makes Journal Section widgets 3-up per line instead of 4 + adds vertical spacing */
@media (min-width: 900px) {
.theme-homepage-layout div.home-row3>.widget-dynamic-inner-wrap, .theme-homepage-layout div[class*=sub-row]>.widget-dynamic-inner-wrap {
    grid-template-columns: repeat(auto-fit,minmax(400px,1fr));
    grid-row-gap: 2.5rem;
}
}
/* Removes top rounded corners on all Journal Section widgets */
.theme-homepage-layout .home-row3>.widget-dynamic-inner-wrap>div, .theme-homepage-layout div[class*=sub-row]>.widget-dynamic-inner-wrap>div {
    border-radius: 0 0 .25rem .25rem !important;
}
 
/* Makes room for borders on all Journal Section widgets */
div [class*='home-SelectableContent-'] {
    border-top: none;
    margin-top: .5rem;
 
}
 
/* Journal Section widget border colors - change hex code to change color */
div [class*='home-SelectableContent-01-MolecularCellular']      {box-shadow: 0 -.5rem 0 0 #0f5db9;}
div [class*='home-SelectableContent-02-TumorBiology']           {box-shadow: 0 -.5rem 0 0 #1f3742;}
div [class*='home-SelectableContent-03-ImmunoOncology']         {box-shadow: 0 -.5rem 0 0 #a6ce39;}
div [class*='home-SelectableContent-04-ComputationalBiology']   {box-shadow: 0 -.5rem 0 0 #403b65;}
div [class*='home-SelectableContent-05-TherapeuticResearch']    {box-shadow: 0 -.5rem 0 0 #91704e;}
div [class*='home-SelectableContent-06-PrecisionMedicine']      {box-shadow: 0 -.5rem 0 0 #1f3742;}
div [class*='home-SelectableContent-07-ClinicalResearch']       {box-shadow: 0 -.5rem 0 0 #c15627;}
div [class*='home-SelectableContent-08-Epidemiology']           {box-shadow: 0 -.5rem 0 0 #8683a4;}
div [class*='home-SelectableContent-09-HealthDisparities']      {box-shadow: 0 -.5rem 0 0 #0a751e;}
 

/* ============================================= */
/* ========== HOMEPAGE ISSUE CUSTOMIZATION ===== */
/* ============================================= */
 
/* HERO BACKGROUND IMAGE + COLOR GRADIENT OVERLAY
 
- How to Change Image: Upload Image through SiteBuilder Image Assets, ensure it has a different filename, update URL with below
- How to Change Color Gradient Overlay: use HEX to RGBA converter for the appropriate format, first rgba() value is top color, second value is bottom color, use last digit in each for opacity (.75 = 75%).
- Example (do not remove or edit):
    .pg_Index .hero-row {
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)), url('/data/SiteBuilderAssetsOriginals/Live/Images/cebp/journal-homepage-hero.jpg');
        background-position: center;
        background-repeat: no-repeat;
    }
*/
/* 
.pg_Index .hero-row {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('/data/SiteBuilderAssetsOriginals/Live/Images/cebp/journal-homepage-hero.jpg') !important;
    background-position: center;
    background-repeat: no-repeat;
} */
 

/* HERO ISSUE TEXT
 
- Change the below hex value to change "Current Issue" "Volume #, Issue #" and "Date" values in the left side of the hero.
- Ensure at least AA Accessibility is reached by examining contrast ratio between the below hex value and combined image + gradient overlay. Use tool here: https://www.brandwood.com/a11y/
- Example (do not remove or edit):
    .pg_Index .current-issue-title,
    .pg_Index .widget-IssueInfo .article-issue-info .issue,
    .pg_Index .widget-IssueInfo .article-issue-info .volume,
    .pg_Index .widget-IssueInfo .article-issue-info .ii-pub-date {
        color: #fff;
    }
*/
 
.pg_Index .current-issue-title,
.pg_Index .widget-IssueInfo .article-issue-info .issue,
.pg_Index .widget-IssueInfo .article-issue-info .volume,
.pg_Index .widget-IssueInfo .article-issue-info .ii-pub-date {
 color: var(--white) !important;
}

/* EIC SECTION */ 
.widget-instance-cancerrescommun_home-feature-panel-01-Editors{
	background-color: #cbeac8;
}

/* EDITORS CORNER WIDGET */ 
.widget-instance-Home_MainContentB0B0editors-corner-panel {
    background-color: rgb(232,232,232);
	line-height: 1.4rem;
}

 .widget-SelectableContentList .widget-dynamic-heading	{
	 color: #276d2b;
	 font-size: 1.4rem;
 }


/* SECTION HEADING LINES */

.widget-dynamic__header h3:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
 background: linear-gradient(to right, rgba(39,109,43,1) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 65%,rgba(39,109,43,1) 100%);

}

.widget-dynamic__header h3{
	color: rgba(39,109,43);
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

@media only screen and (max-width: 600px) {
.widget-dynamic__header h3:before {
     background: linear-gradient(to right, rgba(39,109,43,1) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 80%,rgba(39,109,43,1) 100%);
  }
}


/* HERO BUTTON COLOR
 
- Change the below hex value to change color of button.
- Ensure AA Accessibility is reached by entering below hex value into the left box here https://contrast-ratio.com/#white-on-#A41E22
- Example (do not remove or edit):
    .pg_Index .hero-row .button {
        background-color:#A41E22;
    }
*/
 
.pg_Index .content-main_content .hero-row .button {
    background: var(--button-background-primary) !important;
    color: var(--button-text-primary);
}
 
.pg_Index .content-main_content .hero-row .button:hover
 {
    background: var(--button-background-secondary) !important;
    color: var(--button-text-secondary);
    border: none;
}
 
 
 

/* ==================================================== */
/* ========== REMOVE RIGHT-RAIL FROM Custom Pages ===== */
/* ==================================================== */
.pg_SelfServePage #Sidebar {
    display: none;
}
.pg_SelfServePage #mainContent {
    width: 100% !important;
    margin-right: 0 !important;
}

 

/* ============================================= */
/* ========== ARTICLE FORMULA SIZING =========== */
/* ============================================= */

.disp-formula	{
	width: 100%;
	text-align: center;
}

.disp-formula .fig-graphic {
	width: 100%;
}

.disp-formula .fig-graphic .jumplink-placeholder {
	max-width: 100%;
}

.disp-formula .fig-graphic .content-image {
	max-width: 520px;
	max-height: 100%;
	margin-left: auto;
	margin-right: auto;
}



.widget-SelectableContentList .widget-dynamic-heading	{
	font-size: 18px;
}

.widget-SelectableContentList .widget-dynamic-content.advanced-view .widget-dynamic-entry-wrap .widget-dynamic-entry a	{
	font-size: 16px;
}



.widget-SelfServeContent .widget-instance-cancerrescommun_issue-self-serve	{
	border: 1px solid #dbdbdb;
	color: #1a1a1a;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	padding: 16px;
}


	

/* ================================== */
/* RIGHT RAIL WIDGETS */
/* ================================== */

.widget-SelectableContentList .widget-dynamic-heading
	{
		font-family: Montserat, Gotham, "Segoe UI", "Trebuchet MS", Tahoma, sans-seriff;
		font-size: 22px;
		font-weight: 300;
		line-height: 1.06em;
		text-decoration: none;
		color: rgb(76, 167, 68);
	}
	

	
	
.widget-dynamic-browse
	{
		font-size: 16px;
		font-weight: 300;
		font-style: italic;
		line-height: 1.06em;
		color: rgb(76, 167, 68);
	}	
	
	
.widget-dynamic-browse a
	{
		font-size: 16px;
		font-weight: 300;
		line-height: 1.06em;
		color: rgb(76, 167, 68);
		position: relative;
		bottom: 0px;
		margin-top: 20px;
		margin-bottom: 4px;
	}
	
	
.widget-dynamic-browse a:link
	{
		font-size: 16px;
		font-weight: 300;
		line-height: 1.06em;
		color: rgb(76, 167, 68);
	}
	
	
.widget-dynamic-browse a:visited
	{
		font-size: 16px;
		font-weight: 300;
		line-height: 1.06em;
		color: rgb(76, 167, 68);
	}
	
	
.widget-dynamic-browse a:hover
	{
		font-size: 16px;
		font-weight: 300;
		line-height: 1.06em;
		color: rgb(76, 167, 68);
	}
		
	

/* ============================================= */
/* =========== TWITTER WIDGET BORDER =========== */
/* ============================================= */


.widget-SelfServeContent.widget-instance-cancerrescommun_home-feature-panel-04-twitter.widget-instance-cancerrescommun_home-feature-panel-04-twitter {
    border: none !important;
}

/* ============================================= */
/* ================ FOOTER LOGO ================ */
/* ============================================= */



.widget-SitePageFooter .journal-footer .journal-footer_content .journal-footer-affiliations{
	width: 140px;
}

.widget-SitePageFooter .journal-footer .journal-footer_content .journal-footer-affiliations.aff-left{
	margin-right: 16px;
}

/* ANNOUNCEMENT WIDGET */
.widget-SelfServeContent .widget-instance-_home-announce-panel {
    width: 100%;
	padding: 16px;
}