/* Our Genes - PM UI Theme */


/* ----------------- PM Tile Visuals ----------------- */
/* Intro Tile */
.genes-intro {
	background:#FFF5ED !important;
}
/* Tile */
.pm-area, .pm-area2 {
	background:rgb(238,246,253);
	background:linear-gradient(180deg, rgba(238,246,253,1) 0%, rgba(248,249,251,1) 100%);
	border:0;
}
.area-content {
	padding:60px;
}
@media (max-width:768px){
	.area-content {
		padding:30px 40px 30px 30px;
	}
}

/* ----------------- Content Overrides ----------------- */
#s4-workspace .pmcp-content h2 {
	font-size:1.7rem !important;
	color:#1D2A57 !important;
	font-weight:700 !important;
	margin:0 0 30px 0 !important;
	/* padding:0 0 13px 0 !important; */
	/* border-bottom:2px solid #265DAA !important; */
	line-height:130% !important;
}
#s4-workspace .gene-inpage h2 {
	margin:0 0 40px 0 !important;
}

#s4-workspace .pmcp-content h3 {
	font-size:1.5rem !important;
	color:#265DAA !important;
	font-weight:700 !important;
	margin:0 0 20px;
	padding:0 !important;
	
}
p + #s4-workspace .pmcp-content h2, ul + #s4-workspace .pmcp-content h2 {
	margin-top:40px !important;
}
.gene-tagline {
	font-size: 1.5rem !important;
    color: #265DAA !important;
    font-weight: 700 !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
}
@media (max-width:768px){
	.gene-tagline {
		text-align:center;
		margin:10px auto 30px !important;
	}
	.area-content h2:first-child {
		text-align:center;
	}
}

/* ----------------- Hide/Show ----------------- */
.pmcp-show_trigger, .pmcp-Element-show_trigger {
	border:0 !important;
	background:none !important;
	color:#265DAA !important;
	margin:0 !Important;
	padding:0 0 10px 0 !important;
	border-bottom:2px solid #265DAA !important;
	justify-content:space-between !important;
	gap:15px;
}
.pmcp-show_trigger::after, .pmcp-Element-show_trigger::after {
    font-family:"Font Awesome 5 Pro";
    content:"";
    display:inline-block;
    color:#265DAA;
    font-size:1.5rem;
	background:url("/PrincessMargaret/Custom%20Code/Images/Our_Genes/plus.svg") no-repeat;
	width:18px;
	height:18px;
	margin:1px 2px 0 0;
	flex-shrink:0;
}
.active_trigger, .active_trigger:hover, .active_trigger:focus, .active_trigger:active, .active_trigger:visited {
	background:none !important;
	border:0 !important;
	border-bottom:1px solid #d1d1d1 !important;
}
.active_trigger::after {
	background:url("/PrincessMargaret/Custom%20Code/Images/Our_Genes/neg.svg") no-repeat;
}
.pmcp-show_trigger, .pmcp-Element-show_trigger {
	margin:0 0 20px 0 !important;
	padding:0 0 10px 0 !important;
	border-bottom:1px solid #d1d1d1;
}
.pmcp-show_trigger::before, .pmcp-Element-show_trigger::before {
	display:none !important;
}
.pmcp-show_content, .pmcp-Element-show_content {
	border:0;
	border-bottom:2px solid #265DAA;
	margin:0 0 20px 0;
	padding:0 0 30px 0;
}
.pmcp-show_trigger:hover, .pmcp-show_trigger:focus, .pmcp-show_trigger:active, .pmcp-Element-show_trigger:hover, .pmcp-Element-show_trigger:focus, .pmcp-Element-show_trigger:active {
	border-bottom:2px solid #bf243d !important;
	color:#000 !important;
}

/* ----------------- Info Box ----------------- */
.info-box2 {
	border-radius:20px;
	padding:32px 45px 20px 30px;
	margin:0 15px 40px;
	display:flex;
	gap:20px;
}

/* ----------------- Steps ----------------- */
.pm-num {
	background:#57853D;
}
.pm-num-content {
	margin:0;
	width:100%;
}
.pm-num-title {
	font-size:1.2rem;
	font-weight:700;
	margin:-1px 0 9px 0 !important;
	line-height:130% !important;
}
@media (max-width:768px){
	.info-box2 {
		flex-flow:column nowrap;
		justify-content:center;
		margin:0 0 40px;
	}
	.pm-num {
		margin:0 auto;
		height:45px;
		width:45px;
		line-height:42px;
		font-size:21px;
		border-radius:22px;
	}
}

/* ----------------- Button ----------------- */
.pmcp-btn {
	font-weight:700;
	padding:17px 17px 17px 26px;
	background:#265DAA;
	border-radius:20px;
}
.genes-intro .pmcp-btn {
	margin:25px 0 40px;
}
.info-box2 .showPrivacyNotice {
	padding:6px 13px 8px;
	margin-top:8px;
	border-radius:12px;
	display:inline-block;
	background:#265DAA;
	color:#fff;
	font-weight:700;
	text-decoration:none;
	font-size:0.9rem;
	margin-top:-10px;
	cursor:pointer;
}
.info-box2 .showPrivacyNotice:hover, .info-box2 .showPrivacyNotice:focus, .info-box2 .showPrivacyNotice:active {
	text-decoration:none;
}


/* ----------------- Flex Content Wrap ----------------- */
.gene-flex {
	display:flex;
	width:100%;
	flex-flow:row nowrap;
	justify-content:space-between;
	align-items:flex-start;
}


/* ----------------- Hide / Show ----------------- */
.mobile-visual {
	display:none;
	max-width:100%;
	height:auto;
	margin:0 auto 30px;
}
.desktop-visual {
	display:block;
	margin-left:40px;
}
@media (max-width:768px){
	.mobile-visual {
		display:block;
	}	
	.desktop-visual {
		display:none;
	}
}

/* ----------------- External Arrow ----------------- */
.home_btn::after, .pmcp-btn::after, .full_btn::after {
    content:"" !important;
	display:inline-block;
	width:12px;
	height:15px;
    background:url("/PrincessMargaret/Custom%20Code/Images/for-arrow.svg") no-repeat;
	margin:0 0 0 14px !important;
}

/* ----------------- Button List ----------------- */
.button_list {
	flex-flow:column nowrap;
	gap:20px;
	margin:30px 0 0;
}
.button_list > a, .button_list > div {
	display:flex;
	flex-flow:row nowrap;
	gap:20px;
	background:none !important;
	width:100%;
	padding:0;
	align-items:center;
	min-height:auto;
}
.button_list > a > img, .button_list > div > img {
	width:65px;
	height:auto;
}
@media (max-width:500px){
	.button_list {
		gap:20px;
	}
	.button_list > a, .button_list > div {
		flex-flow:column nowrap;
		gap:7px;
	}
}

/* ----------------- Conditional List ----------------- */
hr {
	margin:30px 0;
}
p + ul, p + ol {
	margin-top:-12px;
}
p + h3, ul + h3, ol + h3 {
	margin:40px 0 20px !important;
}
ul + p, ul + ul, ul + ol {
	margin-top:20px !important;
}

/* ----------------- Navigation ----------------- */
.gene-nav {
	display:flex;
	width:100%;
	flex-flow:row nowrap;
	gap:10px;
	align-items:center;
	justify-content:space-between;
	margin:5px 0 10px 0;
}
.gene-nav a {
	flex-grow:1;
	background:#e6eff5;
	color:#1D2A57;
	text-align:center;
	font-weight:700;
	font-size:1.0rem;
	padding:12px 0 15px;
	text-decoration:none;
}
.active-blue {
	background:#265DAA !important;
	color:#fff !important;
	cursor:default;
}
.active-blue:hover, .active-blue:focus, .active-blue:active {
	background:#265DAA !important;
	color:#fff !important;
}

@media (max-width:600px){
	.gene-nav  {
		flex-flow:column nowrap;
		margin:5px 0 0 0;
		gap:0;
	}
	.gene-nav a {
		width:100%;
		margin-bottom:10px;
	}
}

/* ----------------- Inpage Navigation ----------------- */
.gene-inpage {
	display:flex;
	width:100%;
	flex-flow:column nowrap;
	gap:10px;
}
.gene-inpage span {
	display:block;
	font-weight:700;
	font-size:16px;
	border-bottom:1px solid #D1D1D1;
	padding-bottom:7px;
	margin-bottom:7px;
	margin-right:40px;
}
#MSO_ContentTable .gene-inpage a, #MSO_ContentTable .gene-inpage a:visited {
	color:#000000;
	font-weight:400;
	text-decoration:none;
	display:flex;
	gap:12px;
	flex-flow:row nowrap;
	align-items:center;
	font-size:16px;
	line-height:130%;
}
#MSO_ContentTable .gene-inpage a:before {
	content:"";
	background:url("/PrincessMargaret/Custom%20Code/Images/object-blue.svg") no-repeat;
	display:inline-block;
	width:6px;
	height:15px;
	min-width:6px;
}

#MSO_ContentTable .gene-inpage a:hover, #MSO_ContentTable .gene-inpage a:focus, #MSO_ContentTable .gene-inpage a:active {
	/* outline:8px solid #0f2749; */
	color:#000000 !important;
	background-color:transparent !important;
	font-weight:700;
}
#MSO_ContentTable .gene-inpage a:hover:before, #MSO_ContentTable .gene-inpage a:focus:before, #MSO_ContentTable .gene-inpage a:active:before {
	content:"";
	background:url("/PrincessMargaret/Custom%20Code/Images/object-red.svg") no-repeat;
	display:inline-block;
	width:6px;
	height:15px;
}
@media (max-width:768px){
	.gene-inpage span {
		margin-right:0;
	}
}


/* ----------------- PMCP Content ----------------- */
.pmcp-content {
    padding-right:0;
    width:98%;
}
@media (max-width:768px){
	.pmcp-content {
		padding-right:0;
		width:100%;
	}
}


/* ----------------- Modal Updates ----------------- */
.modal-header {
	margin:0 45px;
	border-bottom:3px solid #265DAA !important;
}
.modal-title {
	font-weight:700;
}
.modal-body {
	padding:20px 45px !important;
}
.modal-body p {
	line-height:1.5;
}
.modal-content .btn-close {
	right:41px;
	top:27px;
}
.modal-body strong {
	font-size:1.1rem;
}
.modal-footer {
	background:#75af53;
}