
/*TODO: replace CSS with standardized across repos with needed mods here*/

/*********************
General overrides:
*********************/
@font-face{
	font-family: 'Noto Sans';
	src: url("../font/NotoSans-Regular.ttf") format("truetype"),
		url("../font/NotoSans-Bold.ttf") format("truetype"),
		url("../font/NotoSans-Medium.ttf") format("truetype"),
		url("../font/NotoSans-Italic.ttf") format("truetype");		
}

@font-face{
	font-family: 'Work Sans';
	src: url("../font/WorkSans-VariableFont_wght.ttf") format("truetype"),
		url("../font/WorkSans-Italic-VariableFont_wght.ttf") format("truetype");
}
@font-face {
	font-family: 'FontAwesome';
	src: url('../font/fontawesome-webfont.eot?v=4.2.0');
	src: url('../font/fontawesome-webfont.eot?#iefix&v=4.2.0')
		format('embedded-opentype'),
		url('../font/fontawesome-webfont.woff?v=4.2.0') format('woff'),
		url('../font/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),
		url('../font/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') 
		format('svg');
	font-weight: normal;
	font-style: normal;
}

.fa {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.fa-search:before {
	content: "\f002";
}

/*Remove number input buttons:*/
/*Chrome:*/
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/*Firefox:*/
input[type=number] {
	-moz-appearance: textfield;
}

html {
	height: 100%;
}

body {
	font-family: 'Noto Sans', sans-serif!Important;
	min-height: 100vh;
}

ul {
	list-style-type: none;
}

.select2 {
	background-color: #EDEFF5 !Important;
	font-size: 0.85rem !Important;
}

.select2 span {
	background-color: #EDEFF5 !Important;
	border-color: #D8D8D8 !Important;
}

.select2-results {
	font-size: 0.85rem !Important;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
	font-family: 'Noto Sans', sans-serif!Important;
}

.ph_m_neg_left{
	margin-left:-0.75rem;
}

/*********************
Colors and details:
*********************/

a {
	text-decoration: none !Important;
	color: #0059aa!Important;
}

/*Adjusts svg color*/
.arrow_blue{
	filter: invert(19%) sepia(99%) saturate(1998%) hue-rotate(193deg) brightness(96%) contrast(104%);
}

.ph_white_bg {
	background-color: #FFF;
}

.ph_white_text{
	color:#FFF!Important;
}

.ph_blue_pale01_bg {
	background-color: #08BAC826 !Important;
}

.ph_blue_pale02_bg {
	background-color: #08BAC827 !Important;
}

.ph_blue_dark01_bg {
	background-color: #0059aa !Important;
}

.ph_blue_dark01_text {
	color: #0059aa !Important;
}

.ph_green_bg {
	color: #3BE13B !Important;
}

.ph_gray_light_bg {
	background-color: #FAFAFA;
}

.ph_gray_form_bg {
	background-color: #EDEFF5 !Important;
}

.ph_gray_heading_text {
	color: #424242 !Important;
}

.ph_gray_footer_text {
	color: #6c6c6c !Important;
}

.ph_br_gray-top{
	border-top: 2px solid #EDEFF5;
}

.ph_pink_dark01_bg {
	background-color: #d82eab !Important;
}

.ph_pink_dark01_text {
	color: #d82eab !Important;
}


.ph_search_text {
	font-size: 0.85rem;
	color: #424242 !Important;
}

.ph_background_image {
	position: relative;
	align-items: center;
	justify-content: center;
}

.ph_background_image:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: -1;
	background: transparent url("../img/PHACS_Repo_Intro_Img.jpg") 60% 70% no-repeat padding-box;
	background-size: cover;
	min-height: 100vh;
}

.ph_fs_7 {
	font-size:0.8rem;
}

/*********************
General sectioning:
*********************/


@media ( max-width : 600px) {

	.title_subtitle{
		font-size:0.75rem;
	}
	
	#contactForm{
		font-size:0.75rem!Important;
	}
	#contactForm select{
		font-size:0.75rem!Important;
		padding-bottom: 0.1rem!Important;
	}
	.scaled_section{
		font-size:0.75rem!Important;
	}
	#filtersAppliedDiv{
		font-size:0.75rem!Important;
	}
	.phIndent{
		margin-left:1rem;
	}

	/*Title sizing for compressed space:*/
	.landingInfoText{
		font-size:0.75rem!Important;
	}
	.titleInfo{
		font-size:0.75rem!Important;
		max-width: 60%;
	}
	.landingTotalsBackground{
		background: rgb(14, 57, 93);
		min-height: 30rem;
		margin-top:-9rem!Important;
	}
	.landingTotalsBand{
		margin-top: -28.5rem!Important;
		text-align: center;
	}
	
	.footerSignIn{
	  margin-top: -16.5rem;
	  font-size:0.7rem;
	}
	
	.backgroundImage{
	  min-height:25rem;
	}
}

@media ( min-width : 601px) and (max-width: 960px){
	.title_subtitle{
		font-size: 1.1rem;
	}
	.landingInfoText{
	font-size:1rem!Important;
	width:50%;	
	}
	.landingStatsCol{
		border-left: 1px solid white;
	}
	.titleInfo{
		font-size:1rem!Important;
		max-width: 50%;
	}
	
	.landingTotalsBackground{
		background: rgba(14, 57, 93, 0.65);
		min-height:13rem;
		margin-top:-13rem!Important;
	}
	.landingTotalsBand{
		margin-top: -12.5rem!Important;
		text-align: center;
	}
	.footerSignIn{
	  margin-top:-16rem;
	  font-size: 0.8rem;
	}	
	.backgroundImage{
      min-height:22rem;
    }
}

@media ( min-width : 961px) {
	
	.title_subtitle{
		font-size: 1.1rem;
	}
	.landingInfoText{
	font-size:1.25rem!Important;
	width:50%;
	}
	.titleInfo{
		font-size:1rem!Important;
		max-width: 60%;
	}
	
	.landingTotalsBackground{
		background: rgba(14, 57, 93, 0.65);
		min-height:8rem;
		margin-top:-9rem!Important;
	}
	.landingTotalsBand{
		margin-top: -8.5rem!Important;
		text-align: center;
	}
	.footerSignIn{
	  margin-top:-9rem;
	  font-size: 0.8rem;
	}	
	.backgroundImage{
	  min-height:19rem;
	}
}

#mobileSearchDiv {
	margin-top:5rem;
}

.ph_body{
  display: flex;
  flex-direction: column;
  background-color: #FAFAFA;
}


.vizBody {
	background-color: #E0E3ED !Important;
}

.vizMinContainer{
	max-height:0px;
}

.viewport{
	margin:auto!Important;
	max-width:84rem;
}

.phacsBrand{
	margin-top: -0.4rem;
}
.defBrand{
	margin-left:0.75rem;
}


.topNav {
	white-space: nowrap;
	overflow: hidden;
}

.topNav .col {
	padding-right: 1.5rem;
	display: inline;
}

.topNav a {
	padding: 0rem 1rem;
}

#titleLinks{
	margin-bottom:-1rem!Important;
}

.mainDisplay {
	margin-top: 4rem;
	background-color: #E0E3ED !Important;
	z-index: 0;
	margin-inline: 0.75em;
}


.otherDisplay {
	padding: 2rem 0;
}

.phNav{
	z-index: 10;
	background-color: #FFF;
	box-shadow: 0px 3px 6px #00000029;
	margin: -1rem 0 !Important;
	padding-right:1rem;
}


.footerBand {
	flex: 0 0 50px;
	margin-top:auto;
	font-size: 0.8rem;
	color: #010101;
	padding-top: 0.75rem;
	background-color: #EDEFF5;
	text-align: center;
}

.footerSignIn {
	flex: 0 0 50px;
	color: #010101;
	padding-top: 0.75rem;
	text-align: center;
}

.signIn {
	padding-bottom:5rem;
}

.phTextArea {
	height: 7.5rem !Important;
}

.phIndent {
	padding-top: 1rem;
	padding-left: 1.5rem;
}

.phLeftSide {
	float: left;
}

.phNewLine {
	clear: both;
}

.errorDisplay {
	padding: 1.875rem 0.313rem;
	margin-top:2.5rem;
}

.trans {
	transition: all 0.25s ease;
}

/*********************
Page-specific deviations:
*********************/

.fixedHeight {
   height: 100%;
}

.landingBar{
	background-color: transparent;
}

.landingOpt {
    font-weight: 600;
	margin-right: 2rem;
}


.landingCur, .landingOpt:hover {
	border-top: 3px solid!Important;
}

.landingTotalsBand {
	color: #FFFFFF;
}

.landingStatsCol{
	border-right: 1px solid white;
}

.landingTotal{
	font-size:2rem;
}

.landingTotalLabel{
	font-size:0.75rem;
}

#decor {
  background-color: white;
  position: fixed;
  z-index: -1;
  height: 19rem;
  width: 12rem;
  top: -12rem;
  transition: all 0.25s ease;
}

.navLinksLg{
	font-size:1.1rem;
}

.navLinksSm {
	font-size:1rem;
}

.navBoxEdges {
	border-radius: 20px;
}

.navImgFull{
	max-width: 100%;
	height: auto;
	margin-top: -0.4rem;
}

.navImgScaled {
	max-width: 45%;
	height: auto;	
	margin-top: 0.25rem;
}

.navbar.scrolled #decor {
  transform: rotate(0deg);
  top: 0;
  left: 0;
  width: 100%;
  height: 3.5rem;
  box-shadow: 0 0 1rem #00000055;
}

.navbar.scrolled{
	margin-top: -0.75rem!Important;
}

.navbar-collapse.collapsing,
.navbar-collapse.show {
    background-color:#FFF;
}


.backgroundLandingImage{
	background: transparent url("../img/PHACS Repo Img_Home.jpg") 0% 0% no-repeat padding-box;
	background-color: #0E395D;
	opacity: 1;
	background-size:cover;
	background-position: right;
	height:100vh;
	display: flex;
}

.backgroundImage{
	background: transparent url("../img/PHACS Repo Img_Banner.jpg") 0% 14% no-repeat padding-box;
	background-color: #0E395D;
	opacity: 1;
	background-size: cover;
	background-position: left;
	display: flex;
}

.backgroundColor{
	opacity: 1;
	background-size:cover;
	display: flex;
	background-color: #0E395D;
}


.aboutCardDiv{
  height:16rem;
  border: 2px solid #EDEFF5!Important;
  border-radius: 0.5rem!Important;
  background-color:#EFEFEF!Important;
}

.aboutCardDiv:hover, .aboutCardDiv:hover .aboutCardFoot, .aboutCardDiv:hover .aboutLinkTxt{
	color:#FFF!Important;
	background-color:#085EA9!Important;
}
.aboutCardDiv:hover .arrow_blue {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(205deg) brightness(102%) contrast(101%);
}

.aboutCardFoot{
  font-weight:bold!Important;
  font-size: 0.75rem!Important;	
  border-top:none!Important;
  background-color:#EFEFEF!Important;
}

.card-text{
  font-size: 0.75rem;
}

.card-animated {
  overflow: hidden;
  width: 24rem;
}

.landing-CA{
  height: 18rem;
}

.card-animated .card-text{
  max-height: 0rem;
  transition: all 0.5s ease;
}

.card-animated .lCard{
  opacity: 0;
  transform: translate(0px, 4rem);
}

.card-animated .aCard{
  opacity: 1;
  transform: translate(0px, 0.5rem);
}

.img-container {
  overflow: hidden;
  height: 10rem;
  transition: all 0.5s ease;
}

.img-container-about{
  overflow: hidden;
  height: 4rem;
  transition: all 0.5s ease;
}

.card-animated img {
  transform: scale(1.5);
  transition: all 0.5s ease;
  object-fit: contain;
}

.card-animated:hover .img-container {
  height: 6rem;
}

.card-animated:hover .img-container-about {
  height: 2.5rem;
}

.card-animated:hover .aCLink{
	opacity:1;
}

.card-animated:hover {
  border: 2px solid #0059aa;
  box-shadow: 0 0 4px #0059aa;

}

.card-animated:hover img {
  transform: scale(1);
}

.card-animated:hover .lCard {
  transform: translate(0px, 0px);
  max-height: 4rem;
  opacity: 1;
}

.card-animated:hover .aCard{
  transform: translate(0px, 0px);
  max-height: 4rem;
}

.introText{
	color:#0059AA!Important;
	padding-top:3rem;
}

.icon_arrow{
	padding-left:1rem;
	padding-bottom:0.5rem;
}

.titleOpt {
	font-weight: 600;
	color: #6c6c6c;
	margin-right: 2rem;
}

.titleCur, .titleOpt:hover {
	border-top: 3px solid!Important;
	color: #0059aa !Important;
}

.contactSection{
	margin-top:3rem;
}

.contactForm label{
	font-size:0.8rem!Important;
	font-weight:bold!Important;
}	

.contactForm input, .contactForm textarea{
	font-size:0.8rem!Important;
}	

.title_subtitle {
	color: black;
	padding: 1rem;
}

.titleBoxRight {
	float: right;
	padding-right: 0.9rem;
	padding-top: 0.8rem;
}

.titleSignOut {
	text-decoration: none;
	color: black;
	padding-left: 1rem;
}


.titleCardLarge{
	color: #0059AA;
	font-size: 4.5rem;
}

.titleCard{
    color: #0059AA;
    font-size: 3rem;
}

.aboutImageOverlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 412px;
	height: 179px;
	background: var(- -unnamed-color-20b6c6) 0% 0% no-repeat padding-box;
	background: #20B6C6 0% 0% no-repeat padding-box;
	mix-blend-mode: hue;
	opacity: 1;
}

.about_subHeader {
	color: #0059AA;
	font-weight: bold;
}

.aboutBoxImage {
	display: block;
	margin: auto;
}

.aboutBox {
	height: min-content;
}

.aboutBoxBody {
	font: normal normal normal 16px/24px Noto Sans;
	/*background-color:#08BAC827;*/
	padding: 1rem;
	height: min-content;
	min-height: 19rem;
}

#signInForm input{
	background-color:#E9E9E9!Important;
}

.signInBox {
	border:none!Important;
	box-shadow: 0px 8px 20px #00000029;
	border-radius:2%!Important;
	width:25rem!Important;
}

.signInCardBody{
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	padding-bottom: 1.5rem;
	border-radius:2%!Important;
	border:none!Important;
}

ol[id^="studyObjectiveList_"] {
 list-style: none;
}

.no-number {
 list-style-type: none;
}

/*********************
Buttons:
*********************/
.btn-search {
	color: #ffffff!Important;
	background-color: #1AC460!Important;
	border-color: #a6a6a6!Important;
}
.btn-search:hover{
	background-color: #37C40A!Important;
}

/*********************
Utilities:
*********************/
.padTop {
	padding-top: 1rem !Important;
}

.hidden {
	display: none;
}

.disable-link {
	pointer-events: none;
}

/* line 5, /local/weblib/common/bootstrap/4.3.1/scss/utilities/_screenreaders.scss */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  background-color:#FFF;
}
/* line 24, /local/weblib/common/bootstrap/4.3.1/scss/mixins/_screen-reader.scss */
.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/*********************
Transitions:
*********************/
.fadeInFull {
	animation: dissolveInPageLoad ease 2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.fadeInFast {
	animation: dissolveInPageLoad ease 0.25s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.fadeOutMed{
	animation: dissolveOutPageLoad ease 0.55s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes dissolveInPageLoad { 0% {
	opacity: 0;}
	100%{
	opacity:1;}
}
@keyframes dissolveOutPageLoad { 0% {
	opacity: 1;
	}
	100%{opacity:0;}
}