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

/* magnifying glass search icon */
span.search-icon {
    display: inline-block;
    content: url('/vsr/resources/img/magnifying-glass-white.svg');
    width: 16px;
}

/*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;
    height: 100%;
    color: #ececec;
}

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.0rem;
}



/*********************
Colors and details:
*********************/



a {
	text-decoration: none !Important;
}

a.darker {
    color: #1F6BB7;
}

a.darker:hover {
	color: #104070;
}

/*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: -10;
    background: transparent url("../img/AdobeStock_300720762_purple_dark.jpg") 60% 70% no-repeat padding-box;
    background-size: cover;
    min-height: 100vh;
}

.ph_fs_7 {
    font-size:0.8rem;
}

.font-white{
    font-color: #ffffff
}

#vizPageWrapper {
	margin-left: 3%;
	margin-right: 3%;
	margin-bottom: 1.5rem;
}

#vizMenuButtons > button { /* The visualization's menu buttons */
	display: inline-block;
	margin: 0.5rem;
	padding: 0.5rem;
}

.vizDescription {
    margin-left: 1rem;
    margin-bottom: 0.5rem;
    font-size:1rem!Important;
}

#vizNoShowMessage {
	padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 4rem auto 6rem auto;
    text-align: center;	
}

.vizBody {
    background-color: #ececec !Important;
}

.vizMinContainer {
    max-height: 0px;
}


/*********************
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;
    }
    .landingTotalsBackground{
        min-height: 30rem;
    }
    .landingTotalsBand{
        margin-top: -28.5rem!Important;
    }
    
    .aboutCards{
     display: flex;
     overflow: auto;
     border-radius: 0.5rem!Important;
     border: 2px solid #EDEFF5!Important;
     background-color:#ececec!Important;
     flex-wrap: wrap;
    }

    .aboutCardLeft{
    padding:0px 20px 20px 30px;
    margin: 0px 2px 20px 2px;
    min-width: 330px;
}
.aboutCardMid{
    box-shadow: 0px 8px 20px #00000029;
    margin: 2px 2px 20px 2px;
    padding:30px 20px 20px 30px;
    min-width: 330px;
}
.aboutCardRight{
    box-shadow: 0px 8px 20px #00000029;
    padding:30px 20px 20px 30px;
    margin: 2px 2px 20px 2px;
    min-width: 330px;
}
}



@media ( max-width : 700px) {
 .title_subtitle{
        font-size: 1.1rem;
    }
    .landingInfoText{
    	font-size:1.25rem!Important;    
    }
    .titleInfo{
        font-size:1rem!Important;
    }
    
    .landingTotalsBackground{
        background: #e4e4e4;
        min-height:8rem;
    }
    .landingTotalsBand{
        margin-top: -8.5rem!Important;
    }
    
.aboutCards{
     display: flex;
     overflow: auto;
     border-radius: 0.5rem!Important;
     border: 2px solid #EDEFF5!Important;
     background-color:#ececec!Important;
     flex-wrap: wrap;
    }

    .aboutCardLeft{
    padding:0px 20px 20px 30px;
    margin: 0px 2px 20px 2px;
    min-width: 330px;
}
.aboutCardMid{
    box-shadow: 0px 8px 20px #00000029;
    margin: 2px 2px 20px 2px;
    padding:30px 20px 20px 30px;
    min-width: 330px;
}
.aboutCardRight{
    box-shadow: 0px 8px 20px #00000029;
    padding:30px 20px 20px 30px;
    margin: 2px 2px 20px 2px;
    min-width: 330px;
}
    
}
 

@media ( min-width : 701px) {
    
    .title_subtitle {
        font-size: 1.1rem;
    }
    
    .landingInfoText {
    	font-size:1.5rem!Important;
    	width: 90%; /* of containing element */
    }
    
    .titleInfo {
        font-size:1rem!Important;
    }
    
    .landingTotalsBackground {
        background: #e4e4e4;
        min-height:8rem;
    }
    
    .landingTotalsBand {
        margin-top: -8.5rem!Important;
    }
}

#mobileSearchDiv {
    margin-top:5rem;
}

.ph_body{
  display: flex;
  flex-direction: column;
  background-color: #ececec;
}

.viewport{
    margin:auto!Important;
    max-width:84rem;
}

#backgroundLandingImage {
    background: url("../img/AdobeStock_300720762_purple_dark.jpg") 0% 0% no-repeat padding-box;
    background-color: #002e7d; /* fallback color (displayed if image fails to load) */
    opacity: 1;
    background-size: cover;
    /* height: 100vh; */
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
}

#titleContainer {
	margin: 0;
	padding: 0;
}

.defBrand {
    /* margin-left: 0.75rem; */
    /* margin-top: -1.25rem; */
}

/* Styles for the top (minor) navigation bar */
#minorNavbar {
	z-index: 11;
    background-color: #ececec;
    height: 2.5rem;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
}

.mainDisplay {
    background-color: #ececec !Important;
    z-index: 0;
}

span.minorNote {
    color: #740;
    font-size: 0.85em;
    font-style: italic;
}


.otherDisplay {
    padding-top: 3.75rem !Important;
    padding: 2rem 0;
}

#mainNavbar {
    z-index: 10;
    background-color: #ececec;
    padding-left: 1rem;
    padding-right: 1rem;
    margin: -0.75rem 0 -0.75rem 0;
}

#titleLinks {

}

#titleLinks > ul {
	margin-top: 1em;
}

@media (max-width: 992px) { /* for screens at (Bootstrap's) "lg" breakpoint or smaller */
	#titleLinks > ul {
		margin-top: 0;
	}
}

.dmacclink, .dmasclink {
  background-color: #004c83;
  padding-right: 0.5rem;
  height: 2.5rem;
  width: 12rem;
  /* border-bottom-right-radius: 5px; */
  font-size: 1rem;
}

.pglink{
  background-color: #004c83;
  padding-left: 0.5rem;
  height: 2.5rem;
  width: 12rem;
  border-bottom-left-radius: 5px;
  font-size: 1rem;
}

.footerBand {
    margin-top:auto;
    font-size: 0.8rem;
    color: #FFF;
    padding-top: 2rem;
    background-color: #004c83;
}

hr {
  height: 0.1px;
  background-color: white;
  border: none;
  color: white;
}

hrEdge {
 border-top: -1.5px solid #004c83;
}

.footerCopyright:before {
  width: 82%;
  height: 1px;
  background-color: white;
  z-index: 20;
}

/* Common styles for left/middle/right footer sections */
.footerLeft, .footerMiddle, .footerRight {
	float: left;
    text-align: center;
    width: 33.3%;
    padding-left: 2.5%;
    padding-right: 2.5%;
    margin-bottom: 0.75rem;
}

/* styles specific to left footer section */
.footerLeft {
    
}

/* styles specific to middle footer section */
.footerMiddle {
    font-size: 1.1rem;
    top: 60%;
}

/* styles specific to right footer section */
.footerRight {
	
}

.footerCopyright {
    font-size: 0.9rem;
    color: #FFF;
    background-color: #004c83;
    text-align: center;
    padding-top: 0.5rem;
    padding-bottom: 1.5rem;
}

@media (max-width: 992px) { /* Footer style overrides for screens at (Bootstrap's) "lg" breakpoint and smaller */
	
	.footerMiddle {
		display: none;
	}
	
	.footerLeft, .footerMiddle, .footerRight {
		width: 49.75%;
	}
}

@media (max-width: 768px) { /* Footer style overrides for screens at (Bootstrap's) "md" breakpoint and smaller */
	
	.footerLeft, .footerMiddle, .footerRight {
		width: 99.75%;
	}
}

.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:
*********************/

.landingBar{
    background-color: transparent;
}

.landingOpt {
    font-weight: 600;
    margin-right: 2rem;
}


.landingCur, .landingOpt:hover {
    border-top: 3px solid!Important;
}

.landingTotalsBand {
    color: white;
    padding-top: 12rem;
	padding-bottom: 1.75rem;
}

#introTextContainer {
	/* Needs to be above .landingTotalsBand so its contents aren't covered by that element's padding. */
	/* Using a z-index of just "1" accomplishes this b/c .landingTotalsBand has no defined z-index. */
	z-index: 1;
}

.introText {
    color: #FFF!Important;
    padding-top: 4.5rem;
}

#landingTitle {
	font-size: 3rem;
	font-weight: bold;
}
@media (max-width: 992px) { /* #landingTitle overrides for screens at (Bootstrap's) "lg" breakpoint or smaller */
	#landingTitle {
		font-size: 2.5rem;
	}
}
@media (max-width: 576px) { /* #landingTitle overrides for screens at (Bootstrap's) "sm" breakpoint or smaller */
	#landingTitle {
		font-size: 2rem;
	}
}

.landingStatsCol {
    border-right: 1px solid white;
    border-left: 1px solid white;
}

.landingTotalsBackground{
    margin-top:10rem!Important;
}

.landingTotal {
    font-size: 2rem;
}

.landingTotalLabel {
    font-size: 1rem;
    font-weight: bold;
}


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

.navbar-collapse.collapsing,
.navbar-collapse.show {
    background-color:#FFF;
}

#navBarUserDropDownMenu {
	min-width: 8.25rem; /* overrides a larger min-width which was causing this element to extend off-screen */
}

.backgroundColor {
    opacity: 1;
    background-size:cover;
    display: flex;
    background-color: #0059aa;
}

.aboutSubheaderText{
	padding:0px 20px 20px 30px;
	margin: 0px 2px 2px 2px;
	width: 66%;
}

.aboutCardDiv{
  height:16rem;
  border: 2px solid #EDEFF5!Important;
  border-radius: 0.5rem!Important;
  background-color:#ececec!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:#ececec!Important;
  
}

.aboutCards{
     display: flex;
     overflow: auto;
     border-radius: 0.5rem!Important;
     border: 2px solid #EDEFF5!Important;
     background-color:#ececec;
    
}

.aboutCardLeft{
    padding:0px 20px 20px 30px;
    margin: 0px 2px 20px 2px;
    max-width: 33%;
}
.aboutCardMid{
    box-shadow: 0px 8px 20px #00000029;
    margin: 2px 2px 20px 2px;
    padding:30px 20px 20px 30px;
    max-width: 33%;
}
.aboutCardRight{
    box-shadow: 0px 8px 20px #00000029;
    padding:30px 20px 20px 30px;
    margin: 2px 2px 20px 2px;
    max-width: 33%;
}

.card-text{
  font-size: 0.75rem;
}

.card-animated {
  overflow: hidden;
  width: 22rem;
}

.landing-CA {
  height: 16.5rem; /* was: 14rem; */
  margin-left: auto;
  margin-right: auto;
}

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

.icon_arrow{
    padding-left:1rem;
    padding-bottom:0.5rem;
}

.titleOpt {
    font-weight: 600;
    color: #595959;
    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;
}

#contactEmailResults {
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

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


.titleCard {
    color: #0059AA;
    font-size: 1.5rem;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.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;
    font-size: 1.5rem;
}

.aboutColumn {
	margin-bottom: 0.65rem;
}

.aboutCard {
	padding: 1rem;
	background-color: #ffffff;
	border-radius: 0.5rem;
	box-shadow: 0px 8px 20px #00000049;
	height: 100%;
	overflow-x: hidden; /* added b/c an image was overflowing (on narrow screens) */
}

.aboutBoxImage {
    display: block;
    margin: auto;
    min-height: 8rem;
    max-height: 8rem;
    max-width: 18rem;
    margin-bottom: 1rem;
}

.aboutBox {
    height: min-content;
}

.aboutBoxBody {
    font: normal normal normal 16px/24px Noto Sans;
    /*background-color:#08BAC827;*/
    padding: 1rem;
    height: min-content;
    min-height: 19rem;
}

#signIn {
    padding-bottom:5rem;
}

#signInLogo {
	width: 19rem; /* Governs the normal width of the Sign In box. */
	max-width: 100%;
}

/* Error message container on Sign In form - only visible when sign-in fails with an error message present. */
#errorDiv {
}

#signInFormDiv {
	border-top: 1px solid #e8e8e8; /* #eff0f1 */
	padding-top: 2rem;
}

#signInHelpDiv {
	border-top: 1px solid #e8e8e8;
	padding-top: 1.25rem;
}

#signInForm {
	width: 22.5rem; /* Governs the width of #signInBox when the sign-in form is visible. */
}

#signInForm input {
    background-color:#E9E9E9!Important;
}

#signInBox {
    border: none;
    box-shadow: 0px 8px 20px #00000029;
    border-radius: 2%;
}

#signInBoxWrapper {}

#signInBoxOuterWrapper {
	margin-top: 5rem;
}

#signInCardBody {
    padding: 1rem 1.5rem 2rem 1.5rem; /* top right bottom left */
    /* border-radius: 2%!Important; */
    /* border: none!Important; */
}

#helpContentInnerDiv {
	margin-bottom: 1.25rem;
	max-width: 30rem; /* Governs the width of #signInBox when the help form is visible (use "40rem" if displaying #cookieHelp). */
}

#helpContentInnerDiv p,
#cookieHelp {
	color: #444;
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
}

#cookieHelp {
	display: none; /* hiding for now (considering removing this from the app altogether) */
	background-color: #EEE; /* #FFE0E0 pink - to indicate warning */
	padding: 0.5rem;
	margin-left: -0.5rem;
	margin-right: -0.5rem;
}

/*********************
Buttons:
*********************/

.btn-search {
    color: #ffffff!Important;
    background-color: #c01823!Important;
    border-color: #a6a6a6!Important;
}
.btn-search:hover {
    background-color: #e62f3d!Important;
}

#signInBackButton {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

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

.baseDisplay {
 padding-top: 3.5rem !Important;
}

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


/*****************************
**** General/Other styles ****
******************************/

@media (min-width: 33em) {
  .steps li:before {
    border-radius: 50%;
    font-size: 1.5em;
    height: 1.35em;
    margin-left: 2.5%;
    padding-left: 0;
    padding-top: 0;
    top: 0em;
    width: 1.35em;
    z-index: 0;
    color: white;
    background-color: #004c83;
  }
}

.requiredFieldsText {
	color: #555;
	font-size: small;
}