/* LAST UPDATED: 2-5-2025 */

/* ***** BEGIN: Internal CSS from Kevin's Search Results mockup - putting here until we figure out what's "needed" where ***** */

body {
	font-size: 16px;
}

.container {
	max-width: 1400px;
}

.header {
	border-bottom: 0;
}

.bg-psn-blue {
	background-color: #2c72b7;
}

.bg-psn-blue a {
	color: #fff;
	text-decoration: none;
}

.bg-psn-blue a:hover,
.bg-psn-blue a:focus {
	color: #fff;
	text-decoration: underline;
}

.nav-tabs {
	border-bottom: 5px solid #2c72b7;
	color: #2c72b7;
}

.nav-tabs .nav-link {
	color: #2c72b7;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
	border-bottom: 0;
	border: 1px solid #2c72b7;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
	background-color: #2c72b7;
	color: #fff;
	border: 0;
}

/* for the sidebar cards on the SERP */
.card.no-border-no-radius-card {
	border: 0;
	border-radius: 0;
}

.card .card-header {
	font-size: 1rem;
	color: #fff;
	background-color: #2c72b7;
	border: 0;
	border-radius: 0;
}

.accordion button,
.accordion a,
.dropdown-toggle {
	font-size: 1rem;
}

.accordion a {
	color: #2c72b7;
	background-color: transparent;
}

.accordion-button,
.accordion-button:not(.collapsed) {
	background-color: #E9E9EA;
}

.accordion-item {
	border-bottom: 1px solid #ccc;
}

.dropdown-toggle::after {
	display: inline-block;
}

.dropdown-item {
	color: #2c72b7;
}

.dropdown-item:hover,
.dropdown-item:focus {
	background-color: #2c72b7;
	color: #fff;
}

#actions {
	font-size: 24px;
}

.input-group .btn svg {
	margin-right: 0;
}

#selectedActions button,
#actions button {
	width: 36px;
	height: 30px;
}

#actions .btn svg,
#selectedActions .btn svg {
	max-width: 100%;
	height: auto;
	margin-right: 0;
	min-height: 20px;
}

.tab-pane.active a {
	color: #003A70;
	background-color: #FFFFFF;
	border-color: #003A70;
}

li.active a {
	color: #FFFFFF;
	background-color: #003A70;
	border-color: #003A70;
}

.result .custom-control-label {
	top: -17px !important;
}

.custom-radio .custom-control-input:checked~.custom-control-label::before,
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
	background-color: #003A70;
}

/* ***** END: Internal CSS from Kevin's Search Results mockup - putting here until we figure out what's "needed" where ***** */

body.psycnet {
	background: rgb(255, 255, 255);
	background: linear-gradient(45deg, rgba(255, 255, 255, 1) 20%, rgba(44, 114, 183, 1) 100%);
}

/* using SVG for external link icon, for any target="_blank" anchors - modified from https://codepen.io/fathy_ar/pen/WNvZjgK */
a[target="_blank"]::after {
    content: '';
    -webkit-mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1536 1536' xmlns='http://www.w3.org/2000/svg'><path d='M1408 928v320c0 159-129 288-288 288H288c-159 0-288-129-288-288V416c0-159 129-288 288-288h704c18 0 32 14 32 32v64c0 18-14 32-32 32H288c-88 0-160 72-160 160v832c0 88 72 160 160 160h832c88 0 160-72 160-160V928c0-18 14-32 32-32h64c18 0 32 14 32 32zm384-864v512c0 35-29 64-64 64-17 0-33-7-45-19l-176-176-652 652c-6 6-15 10-23 10s-17-4-23-10L695 983c-6-6-10-15-10-23s4-17 10-23l652-652-176-176c-12-12-19-28-19-45 0-35 29-64 64-64h512c35 0 64 29 64 64z'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 1em 0.75em;
    -webkit-mask-position: center;
    mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1536 1536' xmlns='http://www.w3.org/2000/svg'><path d='M1408 928v320c0 159-129 288-288 288H288c-159 0-288-129-288-288V416c0-159 129-288 288-288h704c18 0 32 14 32 32v64c0 18-14 32-32 32H288c-88 0-160 72-160 160v832c0 88 72 160 160 160h832c88 0 160-72 160-160V928c0-18 14-32 32-32h64c18 0 32 14 32 32zm384-864v512c0 35-29 64-64 64-17 0-33-7-45-19l-176-176-652 652c-6 6-15 10-23 10s-17-4-23-10L695 983c-6-6-10-15-10-23s4-17 10-23l652-652-176-176c-12-12-19-28-19-45 0-35 29-64 64-64h512c35 0 64 29 64 64z'/></svg>");
    mask-repeat: no-repeat;
    mask-size: 1em 0.75em;
    mask-position: center;
    display: inline-block;
    background-color: currentcolor;
    position: relative;
    top: 0em;
    width: 1em;
    height: 1em;
    left: 0.1em;
    /* added this so icon is not totally against the link on display */
}

/* adding this so that the actual anchor and external link icon are never separated on different lines - revisit if this class is good for the mobile UX - horizontal scrollbars might show up for long links */
a.nowrap {
    white-space: nowrap;
}

/*.psycnet #mainBodyContainer {
	background: rgba(0,0,0,0.2);
}*/

header .banner .headLogo {
	display: inline-block;
}

header .banner .headLogo img.large {
	max-width: 250px;
}

.inline-block {
	display: inline-block;
}

form#openAthensForm,
form#institutionEmailForm {
	padding: 0 !important;
}

footer {
	font-size: 14px;
}

footer a {
	color: #2c72b7;
	text-decoration: none;
}

footer a:hover,
footer a:focus {
	color: #2c72b7;
	text-decoration: underline;
}

.footer-links {
	clear: both;
	float: left;
	/*margin: 0 0 0 -34px;*/
}

.footer-links li {
	border-right: 1px solid #5e5e5e;
	list-style: none;
	float: left;
}

.footer-links li:last-child {
	border-right-style: none;
}

.footer-links a {
	font-weight: 100;
	text-align: center;
	padding-top: 8px;
	cursor: pointer;
	font-size: 1.14em;
}

/*
.footer-links a[target="_blank"]::after {
	content: '';
	-webkit-mask: none;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 0;
	-webkit-mask-position: center;
	mask: none;
	  mask-repeat: repeat;
	  mask-position-x: 0%;
	  mask-position-y: 0%;
	  mask-size: auto;
	mask-repeat: no-repeat;
	mask-size: 0;
	mask-position: center;
	display: inline-block;
	background-color: currentcolor;
	position: relative;
	top: 0;
	width: 0;
	height: 0;
	left: 0;
}
*/
.footer-privacy {
	border-top: 10px solid #c1c1c1 !important;
	color: #2c72b7 !important;
}

.footer-socialicons {
	font-size: 2em;
}

.footer-socialicons a {
	display: inline-block;
	width: 60px;
	height: 40px;
}

.footer-socialicons a#facebook-link:hover,
.footer-socialicons a#facebook-link:focus {
	color: #3b5998;
}

.footer-socialicons a#twitter-link:hover,
.footer-socialicons a#twitter-link:focus {
	color: #0f1419;
}

.footer-socialicons a#youtube-link:hover,
.footer-socialicons a#youtube-link:focus {
	color: #ff0000;
}

.footer-socialicons a#linkedin-link:hover,
.footer-socialicons a#linkedin-link:focus {
	color: #0077b5;
}

.footer-privacy {
	max-width: 570px;
}

footer p a {
	text-decoration: underline;
}

@media screen and (max-width: 480px) {
	header .banner .headLogo img.small {
		display: inline-block;
		max-height: 40px;
		margin: 2px 0 0 10px;
		padding: 0 0 5px 0;

	}
}

@media screen and (max-width: 767px) {
	header .banner .headLogo img.large {
		height: auto;
		margin: 0 0 0 10px;
	}
}

@media screen and (min-width: 768px) and (max-width: 995px) {
	header .banner .headLogo img.large {
		margin-top: 0;
	}
}

@media screen and (max-width: 991px) {
	.footer-privacy {
		max-width: 100%;
	}
}

/* ***************** OVERRIDES FROM PL2.0 STYLESHEET ***************** */

.nav-link,
.standard-tabs .nav-tabs .nav-link:not(:disabled) {
	text-decoration-line: none;

}

.standard-tabs .nav-tabs .nav-link.active {
	background-color: #2c72b7;
	padding-bottom: 10px;
	color: #fff;
	border: 0;
}

.standard-tabs .nav-tabs .nav-link:not(:disabled):not(.active):hover {
	background-color: #F4F4F4;
	color: #212529;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
	background-color: #F4F4F4;
	color: #212529;
}

/* ******* BEGIN: Placeholder styling ******* */
/* WebKit, Edge */
input#searchInput::-webkit-input-placeholder {
	color: #333333;
	font-size: 16px !important;
	font-family: 'Lato', sans-serif !important;
}

/* Firefox 4-18 */
input#searchInput:-moz-placeholder {
	color: #333333;
	font-size: 16px !important;
	font-family: 'Lato', sans-serif !important;
	opacity: 1;
}

/* Firefox 19+ */
input#searchInput::-moz-placeholder {
	color: #333333;
	font-size: 16px !important;
	font-family: 'Lato', sans-serif !important;
	opacity: 1;
}

/* IE 10-11 */
input#searchInput:-ms-input-placeholder {
	color: #333333;
	font-size: 16px !important;
	font-family: 'Lato', sans-serif !important;
}

/* Edge */
input#searchInput::-ms-input-placeholder {
	color: #333333;
	font-size: 16px !important;
	font-family: 'Lato', sans-serif !important;
}

/* MODERN BROWSER */
input#searchInput::placeholder {
	color: #333333;
	font-size: 16px !important;
	font-family: 'Lato', sans-serif !important;
}

/* ******* END: Placeholder styling ******* */

/* *********************** adapted from psycinfo css stylesheet *********************** */

.fa {
	font-family: FontAwesome !important;
	display: inline !important;
	/* so that external link icons do not break onto new line in smaller viewports */
}

/* using SVG for external link icon, for any target="_blank" anchors - modified from https://codepen.io/fathy_ar/pen/WNvZjgK */
a[target="_blank"]::after {
	content: '';
	-webkit-mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1536 1536' xmlns='http://www.w3.org/2000/svg'><path d='M1408 928v320c0 159-129 288-288 288H288c-159 0-288-129-288-288V416c0-159 129-288 288-288h704c18 0 32 14 32 32v64c0 18-14 32-32 32H288c-88 0-160 72-160 160v832c0 88 72 160 160 160h832c88 0 160-72 160-160V928c0-18 14-32 32-32h64c18 0 32 14 32 32zm384-864v512c0 35-29 64-64 64-17 0-33-7-45-19l-176-176-652 652c-6 6-15 10-23 10s-17-4-23-10L695 983c-6-6-10-15-10-23s4-17 10-23l652-652-176-176c-12-12-19-28-19-45 0-35 29-64 64-64h512c35 0 64 29 64 64z'/></svg>");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 1em 0.75em;
	-webkit-mask-position: center;
	mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1536 1536' xmlns='http://www.w3.org/2000/svg'><path d='M1408 928v320c0 159-129 288-288 288H288c-159 0-288-129-288-288V416c0-159 129-288 288-288h704c18 0 32 14 32 32v64c0 18-14 32-32 32H288c-88 0-160 72-160 160v832c0 88 72 160 160 160h832c88 0 160-72 160-160V928c0-18 14-32 32-32h64c18 0 32 14 32 32zm384-864v512c0 35-29 64-64 64-17 0-33-7-45-19l-176-176-652 652c-6 6-15 10-23 10s-17-4-23-10L695 983c-6-6-10-15-10-23s4-17 10-23l652-652-176-176c-12-12-19-28-19-45 0-35 29-64 64-64h512c35 0 64 29 64 64z'/></svg>");
	mask-repeat: no-repeat;
	mask-size: 1em 0.75em;
	mask-position: center;
	display: inline-block;
	background-color: currentcolor;
	position: relative;
	top: 0em;
	width: 1em;
	height: 1em;
	left: 0.1em;
	/* added this so icon is not totally against the link on display */
}

/* adding this so that the actual anchor and external link icon are never separated on different lines - revisit if this class is good for the mobile UX - horizontal scrollbars might show up for long links */
a.nowrap {
	white-space: nowrap;
}

/* ************************************************* BEGIN: BUTTONS ************************************************* */

/* adding an XS button style, which doesn't exist in BS5 (nor BS4) - see https://stackoverflow.com/questions/33911049/btn-xs-no-longer-a-valid-option-in-bootstrap-4 - consider adding this to IUX PL */
.btn-group-xs>.btn,
.btn-xs {
	padding: .25rem .4rem;
	font-size: .875rem;
	line-height: .5;
	border-radius: 50px;
	/* was .2rem - but, matching apapubs branding styles */

}

.btn-xs {
	display: inline-block;
	border-width: 1px;
	/* default is 2px */
	margin: 5px 10px 10px 0;
	padding: .25rem .4rem;
	line-height: 1;
	font-weight: 500;
	/* default is 700 */
	box-sizing: border-box;
}

/* *** PUBS BRANDED BUTTONS - Note - might be able to remove these from this stylesheet as they are not added to the main PL stylesheet *** */
/* using this class in the modal "dismiss" button from IUX PL to align with APA Pubs branding guidelines */
.btn-apapub-squared-override {
	border-radius: 0px !important;
}

/* *** RED BUTTONS *** */
/* squared */
.btn-pubs-1 {
	background-color: #d22730;
	color: #fff;
	border-radius: 0px;
}

.btn-pubs-1:hover {
	background-color: #93001c;
	color: #efb1b6;
}

/* outline rounded */
.btn-pubs-4 {
	background-color: #fff;
	color: #d22730;
	border: 2px solid #d22730;
	border-radius: 50px;
}

.btn-pubs-4:hover {
	background-color: #d22730;
	color: #fff;
}

/* *** BLUE BUTTONS *** */
/* squared - solid blue */
.btn-pubs-2 {
	background-color: #004c97;
	color: #fff;
	border-radius: 0px;
}

.btn-pubs-2:hover {
	background-color: #003a70;
	color: #7fbbdd;
}

/* outline rounded - blue */
.btn-pubs-5 {
	background-color: #fff;
	color: #004c97;
	border: 2px solid #004c97;
	border-radius: 50px;
}

.btn-pubs-5:hover {
	background-color: #004c97;
	color: #fff;
}

/* squared - blue outline button */
.btn-pubs-8 {
	background-color: #fff;
	color: #004c97;
	border: 2px solid #004c97;
	border-radius: 0px;
}

.btn-pubs-8:hover {
	background-color: #004c97;
	color: #fff;
}

/* *** PURPLE BUTTONS *** */
/* squared - solid purple */
.btn-pubs-3 {
	background-color: #39207c;
	color: #fff;
	border-radius: 0px;
}

.btn-pubs-3:hover {
	background-color: #221e44;
	color: #a496c8;
}

/* squared - purple outline button */
.btn-pubs-7 {
	background-color: #fff;
	color: #39207c;
	border: 2px solid #39207c;
	border-radius: 0px;
}

.btn-pubs-7:hover {
	background-color: #39207c;
	color: #fff;
}

/* outline rounded - purple */
.btn-pubs-6 {
	background-color: #fff;
	color: #39207c;
	border: 2px solid #39207c;
	border-radius: 50px;
}

.btn-pubs-6:hover {
	background-color: #39207c;
	color: #fff;
}

/* GetFTR buttons */
/* outline */
.getftr-1 {
	background-color: #fff;
	color: #096a73;
	border: 2px solid #096a73;
	border-radius: 0;
	text-transform: none;
}

.getftr-1:hover {
	background-color: #d6f2f7;
}

/* green fill */
.getftr-2 {
	background-color: #096a73;
	color: #fff;
	border: 2px solid #096a73;
	border-radius: 0;
	text-transform: none;
}

.getftr-2:hover {
	background-color: #053e44;
	color: #fff;
	border: 2px solid #053e44;
}

/* updates button - added 6-2024 - updated 11-2024 */
.getftr-updates {
	background-color: #946F00;
	/* note that the #BB8C00 from their website is not color contract accessible, so going darker */
	color: #fff;
	border: 2px solid #946F00;
	border-radius: 0;
	text-transform: none;
}

.getftr-updates:hover {
	background-color: #614900;
	color: #fff;
	border: 2px solid #614900;
}

/* used in the updates popover with Fontawesome icon */
.getftrupdates-icon {
	color: #946F00;
	margin-right: 4px;
}

/* retraction button - added 6-2024 - updated 11-2024 */
.getftr-retraction {
	background-color: #861515;
	color: #fff;
	border: 2px solid #861515;
	border-radius: 0;
	text-transform: none;
}

.getftr-retraction:hover {
	background-color: #5a0e0e;
	color: #fff;
	border: 2px solid #5a0e0e;
}

/* used in the retraction popover with Fontawesome icon */
.getftrretraction-icon {
	color: #861515;
	margin-right: 4px;
}

/* overriding active anchor styles for for the same design as .btn-pubs-5 XS being used on Visual Search POC (V6) */
.whitepillbutton {
	background-color: #fff !important;
	color: #004c97 !important;
	border: 2px solid #004c97 !important;
	border-radius: 50px !important;
	line-height: 20px;
	text-transform: none;
	padding: .2rem 1.2rem .2rem;
	white-space: normal !important;
	/* to override .btn styles for fitting long strings in certain width modals */
}

.whitepillbutton:hover {
	background-color: #004c97 !important;
	color: #FFFFFF !important;
}

/* overriding active anchor styles for for the same design as .btn-pubs-5 XS - being used on Recent Searches pills with close X icons */
.whitepillbuttonclose {
	background-color: #fff !important;
	color: #004c97 !important;
	border: 2px solid #004c97 !important;
	border-radius: 50px !important;
	line-height: 20px;
	text-transform: none;
	/* following styles make room for close X on right side */
	padding: .2rem 1.2rem .2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: normal !important;
	/* to override .btn styles for fitting long strings in certain width modals */
}

.whitepillbuttonclose:hover {
	background-color: #004c97 !important;
	color: #FFFFFF !important;
}

.whitepillbuttonclose>.close {
	margin-left: 10px;
}

.whitepillbuttonclose:hover>.close,
.whitepillbuttonclose>.close:not(:disabled):not(.disabled):hover,
.whitepillbuttonclose>.close:not(:disabled):not(.disabled):focus {
	color: #FFFFFF;
	opacity: .9;
}

/* for the .whitepillbutton being used with the search icon in it for "Recent Searches" on the "No Results" search page */

.whitepillbutton.whitepillbuttonWithIcon {
	padding: 0.3rem 0.6rem 0.2rem;
}

/* ************ overrides from idembs5css.css - not sure why this file even needs to exist, look into that ************ */

.whitepillbuttonWithIcon svg {
	/* max-width: 25px; */
	margin-right: 5px;
	/* was 10px */
	/* min-width: 18px; */
}

/* for the search-type radio button group, making sure the Fontawesome icons (that render as SVGs) stay white when the button is "active" as has class .btnSelected and keeps the currentColor when just .btnDefault */
.btnSelected.btn-outline:hover svg path,
.btnSelected.btn-outline:active svg path,
.btnSelected.btn-outline:focus svg path {
	fill: #FFFFFF;
}

.btnDefault.btn-outline:hover svg path,
.btnDefault.btn-outline:active svg path,
.btnDefault.btn-outline:focus svg path {
	fill: currentColor;
}

/* 3-14-2024 from apaiuxpubs.css used on Polaris with PL1.0: Overriding Bootstrap 5 button (and anchor buttons using these classes) styles so that button text stacks for long text buttons - Remove media query 12-4-2024 to apply to all breakpoints */
.btn {
	white-space: normal !important;
}

/* ************************************************* END: BUTTONS ************************************************* */

/* for the search info icons on the Keyword Search and Semantic Search views on Basic Search */

.info-icon {
	color: #004c97;
	font-size: 20px;
	cursor: pointer;
	margin-left: 5px;
}

.info-icon:hover {
	color: #003a70;
}

.search-info-icon-placement {
	position: relative;
	top: -15px;
	left: 10px;
	z-index: 1;
}

/* **** custom popover styling - note that this is different than the popovers for the PA Full-Text HTML dictionary terms - so, I scoped out the styling with .popover-1 in the HTML and these custom styles - note the PA Full-Text popover has a color contrast issue with the link in the header **** */

.popover-1 {
	--bs-popover-max-width: 400px;
	/* default is 276px */
	--bs-popover-border-color: #33BFD5;
	--bs-popover-border-style: solid;
	--bs-popover-border-width: 3px;
	--bs-popover-border-radius: 10px;
	--bs-popover-border-width: 3px;
	--bs-popover-color: #212529;
	--bs-popover-header-bg: #D6F2F7;
	--bs-popover-arrow-width: 24px;
	--bs-popover-arrow-height: 10px;
}

/* these styles might be able to be CSS variables also */
.popover-1 .close {
	color: #212529;
	opacity: 0.9;
	margin-left: 8px;
	font-size: 30px;
}

.popover-1 .close:hover {
	color: #39207C;
}

/* this is different than what's in PL2.0 style.css, so see what works better */
.popover-1 .popover-header a.close {
	text-decoration: none;
	margin-top: -6px;
}