/* Last Updated: 8-24-2023 */
/* *************** APA PUBLISHING BRANDING GUIDELINES - 4-7-2020 ******************** */
@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* 
/* ******** this will soon become part of the IUX PL ******** */
.modal .modal-body p {
    color: inherit;
}
.alert p, .card .card-body .alert p {
    color: inherit;
}
/* simple collapse svg rotate styles - possibly add to main PL - see https://stackoverflow.com/questions/52133291/rotate-svg-image-when-bootstrap-4-collapse-is-clicked */
.simple-collapse {
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: underline;
    background-color: inherit;
}
.simple-collapse-no-text-transform {
    font-size: 16px;
    text-transform: none !important;
}
.simple-collapse:hover {
    text-decoration: none;
}
.collapse-chevron .collapse-chevron-icon {
    transform: rotate(90deg);
    transition: .3s transform ease-in-out;
    display: inline-block;
}
.collapse-chevron .collapsed .collapse-chevron-icon {
    transform: rotate(0deg);
}
/* think of this styling for vertical button groups - being used on Topic Mapper panel designs */
.btn.btn-group-vertical .btn {
    border-radius: 0;
}
.btn-group-vertical .btn:first-child {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.btn-group-vertical .btn:last-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
/* *** some necessary overrides for the ITS UX Pattern Library to fit with APA Pubs Branding Guidelines *** */
*, body, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .citationText, .abstractText, .grid-striped div, .grid-striped ul li span, .list-group-item{
    font-family: 'Catamaran', sans-serif !important; /* Note: .btn, .btn-sm, .btn-group-sm > .btn is for the accordion panels, which are actually buttons */
}
/* *** for the cards on the Notification Center/Homepage, since they were running into each other *** */
.card.margin-bottom20 {
    margin-bottom: 20px;
}
/* *** buttons look strange with Catamaran, so defaulting back to Lato like in IUX PL - revisit later if a better way to do this - badges with numbers also look bad with Catamaran *** */
.btn, .badge {
    font-family: 'Lato', sans-serif !important;
}
/* increasing font-size of notificationFilters badges showing record counts for accessibility */
#notificationFilters .badge {
    font-size: 12px;
    font-weight: 700;
}
.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;
}
h1 {
    font-size: 2.3rem;
}
h2 {
    font-size: 1.7rem;
    font-weight: 400;
    margin: 25px 0 10px 0;
}
h2.background-header {
    font-size: 1.7rem;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    margin: 40px 0 30px;
    padding: 10px 0 5px 15px;
    background-color: #d6f2f7; /* APA Teal branding color */
}
h2.h1lookingh2 {
    font-size: 2.3rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    color: inherit;
}
h2.card-header {
    margin: 10px 0;
}
/* used for intro h2 on sign-up form */
h2.introh2 {
    color: #595959;
    font-size: 1.5rem;
    font-weight: 400;
    margin: 5px 0 10px 0;
}
h3 {
    font-size: 1.4rem; /* matches the "regular" h2 */
}
h4 {
    font-size: 1.2rem; /* used on Visual Search POC (V6) */
}
p.small {
    font-size: 14px !important; /* used for the simple footer */
}
/* styles to make a fieldset > legend look like a label, for forms such as the feedback form */
legend.looklikelabel {
    font-size: 16px !important;
    font-weight: normal;
    margin-bottom: 0;
}
/* making the legend (form field names) bigger than the default 16px so that the single-field modals have some hierarchy with the field name and then the radio button choices - otherwise, with all being 16px, was hard to determine what the field name display was/meant - scoping this out just to modals (for now) - keeping labels the 16px (the radio button options, and field names on the email form modal */
.modal-body legend {
    font-size: 20px;
}
ul.dropdown-menu li {
    line-height: 25px; /* bigger height for dropdown items for better mobile clickable targets on languageSwitcher dropdown button */
}
/* styles used for the Cited By modal display */
.show-hide-abstract-button-row{
    margin-top: 10px;
    margin-bottom: -10px; /* definitely a bit hacky, but works with the Cited By reference list display padding */
}
.abstractText{
    text-indent: 0; /* have to define this, otherwise there is an anti-indent in the Cited By modal reference list */
}
/* BS4 collapse link - being used for show/hide Abstract toggles on Cited By modal */
[aria-expanded="true"] .showAbstract, 
[aria-expanded="false"] .hideAbstract {
    display: none;
}
/* styling the div with data-toggle="collapse" */
[data-toggle="collapse"] div{
    padding: 3px;
    cursor: pointer;
}
/* need this style for BS collapse buttons to be ok with the alternating li colors within the Cited By reference modals */
[data-toggle="collapse"] {
    display: inline;
}
/* Custom styles to reset some of the IUX PL conflicts, such as with pagination styles, so scoping that out here - this is for the Cited By modal and tweaked colors from the ACW bottom pane mockups to fit APA Pubs styles */
ul.pagination a{
    border: 1px solid #003A70;
}
ul.pagination a:hover {
    background-color: #d5e8f9 !important;
    border-color: #003A70 !important;
    color: #003A70 !important;
    z-index: 2 !important;
}
ul.pagination .active a {
    background-color: #004c97 !important;
    border-color: #004c97 !important;
    color: #fff !important;
    z-index: 2 !important;
}
ul.pagination .active a:hover {
    background-color: #003a70 !important;
    border-color: #003a70 !important;
    color: #fff !important;
    z-index: 2 !important;
}
ul.pagination .page-item.disabled .page-link {
    color: #6c757d !important;
    pointer-events: none !important;
    cursor: auto !important;
    background-color: #fff !important;
    z-index: 2 !important;
}
/* to control the font-weight of the "results per page" buttons to match the 500 font-weight of the pagination buttons */
.btn-500fontweight {
    font-weight: 500 !important;
}
/* utility class for vertical space betweeen horizontal buttons that stack on mobile (col-md-6) - used on the POC for the "Explore" buttons on Record Display */
@media screen and (max-width: 767px) {
    .margin-top15at767 {
        margin-top: 15px;
    }
}
/* utility class for vertical space betweeen horizontal buttons that stack on mobile (col-lg-6) - used on the POC for the Explore Journals V3 */
@media screen and (max-width: 991px) {
    .margin-top15at991 {
        margin-top: 15px;
    }
}
/* changing the default z-index for .modal from 1050 to 9999 so the modals go above all elements, especially the hamburger menu */
.modal {
    z-index: 9999;
}
/* altering the modal backdrop overlay so that it's even with the hamburger menu to cover it up */
.modal-backdrop {
    z-index: 9998;
  }
/* defining the .modal-title font size here, since it varies, and using h3's for the modal titles to keep heading hierarchy going, might be good for accessibility? */
.modal-title {
    font-size: 30px;
}
/* adding an XL modal size - used on the Record Views modal via the Record Display page */
.modal-xl {
    max-width: 1140px;
}
/* fullscreen modal override for BS4 - see https://stackoverflow.com/questions/55344930/how-to-make-a-modal-fullscreen */
.modal-dialog-fullscreen {
    max-width: 100%;
    margin: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto; /* was 100vh but changed to "auto" since responsive table code was getting cut off with redrawn table - this will essentially make the modal full widescreen but height dependent on the modal content */
    display: flex;
}
/* light gray background box used in Verify Identity modal - to consider adding to IUX PL */
.lightGrayBox {
    background-color: #f1f1f1;
    margin: 15px 0;
    padding: 10px;
}
/* APA Teal color box used in Visual Search POC (V6) - to consider adding to IUX PL */
.apaTealBox {
    background-color: #D6F2F7;
    margin: 15px 0;
    padding: 15px;
}
/* Light Blue - Alert Primary - color box used in Browse Journals (V1) Pub Date field section - to consider adding to IUX PL */
.apaLightBlueBox {
    background-color: #F0F8FF;
    margin: 15px 0;
    padding: 15px;
}
/* this is used on the MyAPA Create an Account screen as .miniValidationNote - consider adding smaller note styles to the IUX PL */
.alert-note.smaller {
    margin: 10px 0;
    padding: 10px 8px; /* was 10px 15px; - but needed less padding to fit GDPR box in Verify Identity modal at desktop without awkward break */
}
/* If we are using jQuery Validation, we might consider using this styling used for specifying the form field validation colors for the form validation example - should we incorporate these styles into the PL, at least for reference? They will only work with how jQuery Validate works with setting .has-error and .has-success states */
.help-block{
    color: #990000;
}
.has-error input, .has-error select, .has-error textarea{
    border-color: #a94442 !important;
}
.has-error input:focus, .has-error select:focus, .has-error textarea:focus{
    border-color: #a94442 !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ff0000 !important;
}
.has-success input, .has-success select, .has-success textarea{
    border-color: #2a8c3a;
}
.has-success input:focus, .has-success select:focus, .has-success textarea:focus{
    border-color: #2a8c3a;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #51cb65;
}
/* *** BS4 overrides *** */
/* so that the article tool tooltips don't show on top of the modals - default of .tooltip is z-index: 1070; */
.tooltip {
    z-index: 999;
}
/* styling the .grid-striped container */
.grid-striped .row:nth-of-type(odd) {
    background-color: #f1f1f1;
}
.grid-striped .row{
    padding: 0.5rem 0;
}
.grid-striped .field-label{
    font-weight: 700;
}
.grid-striped .field-label-main{
    letter-spacing: 1px; /* since all caps, this helps with readability */
    font-weight: 700;
    text-transform: uppercase;
}
/* responsive styling for the .grid-striped container at the <767px stacking breakpoint */
@media screen and (max-width: 767px) {
    .grid-striped .field-label-main {
        font-size: 1.2em;
}}
/* styling the lists in the .grid-striped container */
.grid-striped ul{
    list-style: none;
    margin-bottom: 0;
    margin-left: -40px;
}
/* styling the Book Record Display TOC ul so that bullets show on Desktop size also, for readability */
.grid-striped ul.grid-striped-alwaysshowbullets{
    list-style: disc;
    margin-left: -25px;
}
/* giving some vertical space for list items to improve readability */
.grid-striped ul li{
    padding-bottom: 4px;
}
/* no need for extra bottom padding for last list item */
.grid-striped ul > li:last-of-type {
    padding-bottom: 0;
}
/* responsive .grid-striped container list */
@media screen and (max-width: 767px) {
    .grid-striped ul{
        list-style: disc;
        margin-left: -25px;
}}
/* styling the #reference-list */
.list-striped .list-group {
    list-style-position: inside;
}
.list-striped .list-group-item {
    display: list-item;
    margin-left: 0px;
    padding: 1.25rem; /* there's already a style for .card .list-group-item, but making this section within the Cited By modal having padding as well */
    padding-left: 30px; /* so ol li numbers don't run into left side of list group box */
}
/* scoping this out to format reference list padding within Cited By modal */
.modal .list-striped .list-group-item {
    padding-left: 1.25rem;
}
.list-group-item ol li {
    padding: 1.25rem;
}
/* the next two styles make the indention stick with the reference-number against the reference-text */
.list-striped ol {
    margin-bottom: 20px;
    counter-reset:oli; /* method to bold the numbers in an ol - see https://codepen.io/gc-nomade/pen/fdbEm */
    list-style-type: none; /* part of counter-reset method */
}
.list-striped ol li {
    margin: 0px;
    padding: 0px;
    text-indent: -1em;
    margin-left: 1em;
    counter-increment:oli; /* part of counter-reset method */
}
.modal .list-striped ol li {
    text-indent: 0; /* this style was making the badge display within the Cited By reference list difficult - so resetting it within the modals to affect the Cited By modal */
}
.list-striped li:before {
  content: counter(oli) ". "; /* part of counter-reset method */
  font-weight: 700; /* styles for the ol go here */
}
/* alternating li background colors - used for Cited By modal reference list */
.list-striped li:nth-of-type(odd){
    background-color: #f1f1f1;
}
.reference-text {
    display: inline;
}
.reference-button-row {
    margin: 15px 0 0;
}
.reference-citedby-row {
    margin: 15px 0 0;
}
/* to override the .accordion .btn width: 100% for the reference buttons */
.reference-button-row button, .reference-citedby-row button {
    width: auto !important;
}
/* styling the accordion panel headings with h2's for the best heading hierarchy - Note the IUX PL has styles for h5's with the panels - Update from 5-13-2021: Making this style fit for all heading styles needed for the accordion so no skipped headings for better accessibility */
.accordion h1, .accordion h2, .accordion h3, .accordion h4, .accordion h5, .accordion h6 {
    margin: 0 !important;
}
.accordion h1 .btn-link, .accordion h2 .btn-link, .accordion h3 .btn-link, .accordion h4 .btn-link, .accordion h5 .btn-link, .accordion h6 .btn-link {
    color: #333333;
    font-size: 1.3rem;
    font-weight: 500;
}
/* revisit if the below responsive styles are needed or wanted */
@media screen and (max-width: 767px) {
    .card {
        border-radius: 0;
    }
    .card-body {
        padding: 0.5rem;
    }
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.5rem;
}}
/* a way to prevent the card-body from changing padding - no responsive padding change is needed for the Topic Mapper card design screen */
@media screen and (max-width: 767px) {
    .card-body-no-responsive-padding-change {
        padding: 1.25rem !important;
}}
/* *** APA Publishing Branding Styles *** */
/* *** colors used on site *** */
.apa-teal{color: #33bfd5;} /* used on triband top */
.apa-cerulean{color: #3e52a3;} /* used on triband middle */
.apa-pubs-purple{color: #39207c;} /* used on triband bottom and for purple buttons - the "primary" button used throughout the site */
.apa-pubs-red{color: #d22730;} /* used for select red button CTAs - such as buttons for signing up to the service and for PDFs, as well as back-to-top button, floating action button (FAB), and carousel pagination controls */
.apa-blue{color: #004c97;} /* used for blue buttons - such as sort buttons on isotope */
.body-default{color: #212529;} /* used for link override for NEL related card */
.title-gray{color: #949499;} /* used on NEL titles for distinction of translated title - make sure large font-size to pass accessibility */
.light-gray{color: #f8f8f8;} /* used for the .alertsBox, such as the container for the isotope controls */
.background-gray{color: #eeeeee;} /* used for the body background color against the white cards */
/* *** TriBand *** */
.apatriband-apateal-top{background-color: #33bfd5; height: 8px; width: 100%;}
.apatriband-apacerulean-middle{background-color: #3e52a3; height: 12px; width: 100%;}
.apatriband-apapubpurple-bottom{background-color: #39207c; height: 16px; width: 100%;}
/* *** 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;
}
/* truncating the button text for the GetFTR institution name within button - see https://stackoverflow.com/questions/9905409/is-it-possible-to-use-text-overflow-ellipsis-on-a-button-element */
.truncate-button-text {
    font-family: 'Lato', sans-serif !important;
    max-width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* responsive truncation button text styling using along with .fullWidthButton767 class */
@media screen and (max-width: 767px) {
    .truncate-button-text {
        max-width: 100%;
}}
/* styling accordion panels to fit into APA Publishing Branding Guidelines */
.accordion [data-toggle="collapse"]{
    background-color: #d6f2f7; /* APA Teal brand color */
}
.accordion .card-header .btn:hover{
    background-color: #c1ebf3; /* a shade darker than the APA Teal - default is #d8d8d8 */
}
/* styling the "section title" differently from the IUX PL to fit APA Pubs Branding Guidelines */
.section-title-2{
    font-size: 16px;
    letter-spacing: 1px;
    color: #494949;
    text-transform: uppercase;
    margin: 0 auto;
}
.section-title-2::after {
    content: '';
    display: block;
    width: 100px;
    height: 2px;
    background: #494949; /* APA Pubs dark gray */
    margin: 0 auto;
    margin-top: 15px;
    border-radius: 3px;

}
/* ************ GENERAL STYLES ************ */
body {
    font-family: 'Catamaran', sans-serif;
    display: flex; /* styles for sticky footer */
    min-height: 100vh;
    flex-direction: column;
    background-color: #eeeeee;
}
#mainBodyContainer {
    flex: 1 0 auto; /* style for sticky footer */
}
a.btn{
    text-decoration: none;
}
a {
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
hr {
    border: 0;
    height: 2px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
/* button group styles - used for "results per page" controls on Cited By modal */
.btn-group .btn {
    border-radius: 0;
    display: block; /* vertically aligns the text within the buttons */
}
.btn-group .btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
/* these button group styles in the mockups are being used along with JS for the button group styling for the "Record Views" chart modal time period buttons, same code as live CAS - this is using the Pubs .btn-pubs-8 blue squared outline button */
.btnGroup {
    border-color: #004c97
}

.btnDefault {
    background-color: #fff;
    color: #004c97;
}

.btnSelected {
    background-color: #004c97;
    color: #fff;
}
/* extra responsive utilities */
.screen-only500{display:block;}
.mobile-only500{display:none;}
@media screen and (max-width: 500px){
    .screen-only500{display:none;}
    .mobile-only500{display:block;}
}
.screen-only767{display:block;}
.mobile-only767{display:none;}
@media screen and (max-width: 767px){
    .screen-only767{display:none;}
    .mobile-only767{display:block;}
}
.screen-only991{display:block;}
.mobile-only991{display:none;}
@media screen and (max-width: 991px){
    .screen-only991{display:none;}
    .mobile-only991{display:block;}
}
/* .btn-textbutton = TEXT BUTTON - to be reviewed by UX Team - added with Edit Address screen  - took out ProximaNova font also */
.btn-textbutton{font-family: 'Lato', sans-serif; color: #005499 !important; font-weight: 500; font-size: 12px; text-align: center; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: underline; background-color: inherit;color: #333; border-radius: 3px; -webkit-transition: background 0.5s ease 0s; -moz-transition: background 0.5s ease 0s; -ms-transition: background 0.5s ease 0s; transition: background 0.5s ease 0s;}
.btn-textbutton:hover, .btn-textbutton:focus, .btn-textbutton:active, .btn-textbutton.active, .open .dropdown-toggle.btn-textbutton{background-color: #e0f6fd; color: #23527c; text-decoration: none;}
.btn-textbutton:active, .open .dropdown-toggle.btn-textbutton{background-image: none;}
/* specific styling to get rid of text-decoration:underlines in language switcher button dropdown */
button#languageSwitcher, a.dropdown-item{
    text-decoration: none;
}
/* *** responsive class to add to buttons *** */
@media only screen and (max-width: 767px) {
    .fullWidthButton767 {
        width: 100%;
        margin-top: 10px;
}}
/* *** responsive class to add to buttons *** */
@media only screen and (max-width: 767px) {
    .fullWidthButton767NoMargin {
        width: 100%;
}}
/* *** responsive class to add to anchor buttons which are inline coded with display:inline due to CSS conflicts *** */
@media only screen and (max-width: 767px) {
    a.fullWidthButton767 {
        display: block !important;
}}
/* *** APA and PsycInfo top logo section *** */
.logo-container {
    padding: 5px 5px 8px 35px;
}
@media screen and (max-width: 991px) {
    .logo-container {
        margin-left: -30px;
}}
a.pn-logo {
    text-decoration: none !important;
    padding-top: 5px;
}
pnlogo svg {
    width: auto;
    height: 35px;
}  
@media screen and (max-width: 600px) {
    pnlogo svg {
        width: 94%;
}}
@media screen and (max-width: 520px) {
    pnlogo svg {
        width: 75%;
}}
@media screen and (max-width: 440px) {
    pnlogo svg {
        width: 62%;
}}
@media screen and (max-width: 380px) {
    pnlogo svg {
        width: 54%;
}}
@media screen and (max-width: 350px) {
    pnlogo svg {
        width: 50%;
}}
/* ******* THIN HEADER STYLES ADAPTED FROM APA.ORG - using as a foundation for the PsycInfo/APA logo header ******* */
header {
    font-size: 75%;
    font-family: Arial, Helvetica, Sans-serif;
    line-height: 1.3em;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    border-bottom: 2px solid #555;
    overflow: visible;
    width: 100%;
    padding: 0;
    z-index: 110;
    margin: 0 auto;
}
header .banner {
    background: #ffffff;
    /* margin-top: 10px; */
    padding-top: 3px; /* added */
    width: 100%;
    overflow: hidden;
}
@media screen and (max-width: 995px) {
    header {
        width: auto;
        border: 0;
        margin: 0;
        clear: both;
    }
    header .banner {
        margin-top: 0;
        overflow: visible;
        height: 57px;
        border-bottom: 2px solid #555;
}}
/* Top Bar SF Preference Center icon and Language Switcher locations */
.top-preference-center-icon {
    overflow: inherit;
    z-index: 9000;
    position: absolute;
    top: 12px;
    right: 20px;
}
.top-language-switcher {
    overflow: inherit;
    z-index: 9000;
    position: absolute;
    top: 10px;
    right: 50px;
}
/* Full Width Banner Header - Used on Notification Content Page, Homepage, etc. - Adapted from Salesforce forms */
.backgroundBanner {
    background: url(../img/Polaris__Header_Image1.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.headerTextBox {
    background: rgb(0, 76, 151);
    background: linear-gradient(90deg, rgba(0, 76, 151, 1) 0%, rgba(57, 32, 124, 1) 100%);
    padding: 40px 30px 10px;
    width: 500px;
    height: 100%;
    opacity: 0.8;
}
@media screen and (max-width: 767px) {
    .backgroundBanner {
        background: none;
    }
    .headerTextBox {
        opacity: 1.0;
        width: 100%;
        margin-top: 20px;
        margin-bottom: -20px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    #mainBodyContainer {
        margin-top: -5px;
    }
}
/* responsive styling targeting the email display on the .headerTextBox - have to use important here to override inline styling - consider moving that styling external later */
@media screen and (max-width: 480px) {
    .headerTextBox div.text-white {
        font-size: 18px !important;
    }
}
/* ************ FOOTER STYLES ************ */
footer {
    bottom: 0;
    margin-bottom: 0;
    flex-shrink: 0; /* style for sticky footer */
    border-top: 2px solid #555;
}
/* footer anchor overrides */
footer a {
    text-decoration: none;
}
footer a:hover {
    text-decoration:underline;
}
/* ******* FAB codes - See https://codepen.io/joaofnds/pen/aBMLXj ******* */
.round {
  border-radius: 50%;
}
.fab {
  transition: all 300ms ease-in-out;
  width: 56px;
  height: 56px;
  background-color: #d22730;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 16px;
  bottom: 16px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  color: white;
  font-size: 2em;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16), 0px 3px 10px rgba(0, 0, 0, 0.16);
}
.fab:hover{
    background-color: #93001c;
}
.fab i {
  transition: all 300ms ease-in-out;
  will-change: transform;
}
.inner-fabs .fab {
  width: 40px;
  height: 40px;
  right: 23px;
  bottom: 23px;
  font-size: 1.5em;
  will-change: bottom;
}
.inner-fabs.show .fab:nth-child(1) {
  bottom: 80px;
}
.inner-fabs.show .fab:nth-child(2) {
  bottom: 130px;
}
.inner-fabs.show .fab:nth-child(3) {
  bottom: 180px;
}
.inner-fabs.show .fab:nth-child(4) {
  bottom: 230px;
}
.inner-fabs.show .fab:nth-child(5) {
  bottom: 280px;
}
.inner-fabs.show .fab:nth-child(6) {
  bottom: 330px;
}
.inner-fabs.show + .fab i {
  transform: rotate(135deg);
}
.fab:before {
  content: attr(data-tooltip);
  transition: opacity 150ms cubic-bezier(0.4, 0, 1, 1);
  position: absolute;
  visibility: hidden;
  opacity: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  color: #ececec;
  right: 50px;
  top: 25%;
  background-color: rgba(70, 70, 70, 0.9);
  font-size: 0.5em;
  line-height: 1em;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  border-radius: 2px;
  padding: 6px 8px;
  max-width: 200px;
  font-weight: bold;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.inner-fabs.show .fab:hover:before {
  content: attr(data-tooltip);
  visibility: visible;
  opacity: 1;
}
/* ********** back-to-top button - See https://codepen.io/fathy_ar/pen/ZKqjRL ********** */
button.back-to-top{
  margin: 0 !important;
  padding: 0 !important;
  background: #fff;
  height: 0px;
  width: 0px;
  overflow: hidden;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  color: transparent;
  clear: both;
  visibility: hidden;
  position: fixed;
  cursor: pointer;
  display: block;
  border: none;
  right: 50px;
  bottom: 75px;
  font-size: 0px;
  outline: 0 !important;
  z-index: 99;
  transition: all .3s ease-in-out;
}
button.back-to-top:hover,
button.back-to-top:active,
button.back-to-top:focus{
  outline: 0 !important;
}
button.back-to-top::before {
  content: "\f077";
  font-family: "FontAwesome";
  display: block;
  /* vertical-align: middle; */
  margin: -5px 0 auto;
}
button.back-to-top.show {
  display: block;
  background: #fff;
  color: #d22730; /* was this cool green #00ab6c */
  font-size: 25px;
  right: 25px;
  bottom: 50px;
  height: 50px;
  width: 50px;
  visibility: visible;
  box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
}
button.back-to-top.show:active {
  box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
}
/* *************************************************************************** */
/* ************ NOT SURE IF WE NEED THESE STYLES AND/OR NEEDS INTEGRATION INTO MAIN PL CSS ************ */
/* *** not sure if we need these styles - they were used in the Polaris SF forms *** */
input[readonly] {
    cursor: not-allowed;
    pointer-events: all !important;
}
.grayText {
    color: #595959 !important;
}
.quotetext {
    color: #595959;
    font-size: 14px;
    font-style: italic;
    margin-bottom: 20px;
}
/* .error-format using addClass and removeClass with character count JS */
.help-block, .form-group .help-block, .form-group.has-error label.control-label, .form-group.has-error .help-block, #interests-error-message, .error-format {
    color:#a94442 !important;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 10px;
}
/* making sure placeholder text is accessible - but we probably just need to take out the light gray override in our Pattern Library */
::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #6c757d !important;
    opacity: 1;
    /* Firefox */
}
:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #6c757d !important;
}
::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #6c757d !important;
}
/* styling an accessible helper text- If no color is defined, then the helper text will take the color of the text within an alert */
.helper-text {
    color: #333333;
}

/* *** social follow icons (in footer) modified from #row-4 at https://codepen.io/bluesaltlabs/pen/YWWpQV *** */
.follow-icons .icon-container { font-size: 2em; }
.follow-icons .icon-container a {
  display: inline-block;
  width: 40px;
  height: 40px;
}
.follow-icons .icon-container a,
.follow-icons .icon-container a:hover,
.follow-icons .icon-container a:active { text-decoration: none; }
.follow-icons #facebook-link:hover, .follow-icons #facebook-link:active { color: #3b5998; }
.follow-icons #twitter-link:hover, .follow-icons #twitter-link:active { color: #55acee; }
.follow-icons #youtube-link:hover, .follow-icons #youtube-link:active { color: #ff0000; }
.follow-icons #linkedin-link:hover, .follow-icons #linkedin-link:active { color: #0077b5; }
/* *** social share icons modified from #row-3 at https://codepen.io/bluesaltlabs/pen/YWWpQV *** */
.share-icons .icon-container {
    text-align: center;
    padding: 10px 0;
  }
  .share-icons .icon-container a {
    font-family: 'Catamaran', sans-serif !important; /* need to define this, as Lato has alignment issues */
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition-property: all 150ms ease-in-out;
    -o-transition-property: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
    transition-property: all 150ms ease-in-out;
  }
  .share-icons .icon-container a,
  .share-icons .icon-container a:hover,
  .share-icons .icon-container a:active { text-decoration: none; }
  .share-icons .icon-container {  font-size: 2em; }
  .share-icons .icon-container a {
    display: inline-block;
    color: #fff;
    width: 40px;
    height: 40px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    margin: 10px; /* adding this to give some space between icons for mobile friendliness */
  }
  .share-icons #facebook-link { background: #3b5998; }
  .share-icons #twitter-link { background: #55acee; }
  .share-icons #linkedin-link { background: #0077b5; }
  .share-icons #facebook-link:hover, .share-icons #facebook-link:active { background: #5772ac; }
  .share-icons #twitter-link:hover, .share-icons #twitter-link:active { background: #7cc0f4; }
  .share-icons #linkedin-link:hover, .share-icons #linkedin-link:active { background: #01a6ff; }
  .share-icons .icon-container a:hover,
  .share-icons .icon-container a:active {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
/* *** adding in the BS3 justified button group styling, since it's gone in BS4 - see https://stackoverflow.com/questions/34450586/justify-buttons-with-bootstrap-v4 */
.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}
.btn-group-justified .btn, .btn-group-justified .btn-group {
   float: none;
   display: table-cell;
   width: 1%;
}
.btn-group-justified .btn .btn, .btn-group-justified .btn-group .btn {
   width: 100%;
}
.btn-group-justified .btn .dropdown-menu, .btn-group-justified .btn-group .dropdown-menu {
   left: auto;
}
/* adding an XS button style, which doesn't exist in 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;
}
/* *** related content styles */
/* *** Slick carousel *** */
.wrapper{
    width: 100%;
    padding-top: 20px;
    text-align: center;
}
/* *** need to revisit if we need the most-relevant and recommended styles now that discover-carousel might be used for all discover carousels *** */
.carousel, .carousel-favorites, .discover-carousel, .most-relevant-journals-carousel, .recommended-journals-carousel, .carousel-homepage-wide {
    width: 90%;
    margin: 0px auto;
    text-align: left;
}
.carousel h3, .carousel-favorites h3, .discover-carousel h3, .most-relevant-journals-carousel h3, .recommended-journals-carousel h3, .carousel-homepage-wide h3 {
    font-size: 1.2em;
}
.slick-slide{
    margin: 10px;
}
.slick-dots li button:before{
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    line-height: 20px;
}
.slick-prev, .slick-next {
    top: 30%; /* theme has 50% but that seemed to low, so overriding */
}
.slick-prev i, .slick-next i {
    color: #d22730;
    font-size: 50px;
    font-weight: 700;
}
.slick-prev i:hover, .slick-next i:hover {
    color: #39207c;
}
/* *** related reading section misc styles */
/* used for OA icon, free-to-read icon, etc. */
.related-content-info-icon, .notification-card-info-icon {
    margin-top: 10px;
}
.related-content-button, .notification-card-button {
    margin:  15px 0 0;
}
.card-bottom-button {
    margin:  10px 0 0;
}
@media screen and (max-width: 767px) {
    .card-bottom-button {
        margin:  10px 0;
}}
.related-content-entitlement-alert-row {
    margin: 15px 0;
}
.related-content-provided-by-apa-row {
    margin: 15px 0 20px;
}
.related-content-provided-by-apa-row .journal-book-name {
    font-size: 1.2rem;
}
/* "Free to read" circle icon */
.freeToReadCircle {
    background:green;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
    margin-bottom: 2px;
}
.freeToReadText {
    font-size: 17px;
}
.chorus-row {
    margin: 20px 0;
}
/*
.related-content-provided-by-apa-row .provided-by-statement {}
*/
/* *** CITED BY MODAL STYLES - For the Fullscreen modal design (V2) ** */
.citation-count, .results-count {
    font-size: 1.1rem;
}
.citation-count {
    margin: 20px 0; /* have to keep this style in here since it was delivered with the Round 2 mockup stylesheet */
}
/* scoping this out to get rid of top and bottom margin on .citation-count display within Cited By modal */
.modal .citation-count {
    margin-top: 0;
}
@media screen and (max-width: 767px) {
    .citation-count {
        text-align: right;
        margin-bottom: 15px;
    }
}
.results-count {
    color: #666666;
    font-weight: 700;
    margin-top: 4px;
    text-align: right;
}
@media screen and (max-width: 1200px) and (min-width: 991px) {
    .results-count{
        margin-right: 40px;
    }
}
/* giving the table tools inner rows a min-width for horizontal scrollbar to show up if needed for full mobile access if biggest pagination showing */
.table-tools-row {
    margin-top: 15px;
}
/* this forces the pagination controls to the right side of the row at desktop */
.pagination-row {
    display: flex;
    justify-content: flex-end;
}
/* byline on Record Display pages for authors list */
.authors-list {
    font-weight: 400; /* consider 700, although that competes with the title formatting for attention */
}
/* "results per page" - results count - pagination - Cited By modal - changing order for devices with "order" classes in HTML */
@media screen and (max-width: 991px) {
    .results-count {
        text-align: left;
    }
    .pagination-row {
        padding: 0 15px 0;
        justify-content: start; /* left align the pagination controls on mobile display */
        margin-bottom: -15px; /* for proximity reasons - to pull the pagination controls and the results count row closer to each other */
    }
    .results-count-row {
        padding: 0 15px 20px;
    }
    .results-per-page-row {
        padding:  0 15px 15px;
    }
}
.sort-controls {
    display: flex;
    justify-content: flex-end;
}
/* specific responsive styles for results-count-row and pagination-row on Explore Notifications isotope page */
.explore-pagination-row {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}
@media screen and (max-width: 991px) {
    .pagination-row-explore {
        padding: 0 15px 0;
        margin-bottom: -15px; /* for proximity reasons - to pull the pagination controls and the results count row closer to each other */
    }
    .results-count-row-explore {
        padding: 0 15px 20px;
    }
}
/* intro statement on Notification Content Page */
.intro-statement {
    text-align: center;
}
/* adding margin for the intro-statement and alerts when the image banner and maincontent merge together on mobile - revisit maybe taking out the whole merge code -5px totally */
@media screen and (max-width: 767px) {
    .intro-statement {
        margin: 10px 0;
}}
@media screen and (max-width: 767px) {
    #mainBodyContainer .alert:first-of-type{
        margin: 10px 0;
}}
/* highlighted text effect for topics on Notification Content Page - adapted from https://codepen.io/chriscoyier/pen/oqdAJ */
.highlight {
    display: inline;
    font-size: 20px;
    font-weight: 500;
    line-height: 35px;
    background: #ffe738; /* APA Pubs color - APA Yellow */
    color: #333333;
    padding: 0.5rem;
    padding-left: 0;
    padding-right: 0;
    -webkit-box-decoration-break: clone;
    -ms-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone;
    box-shadow: 0.5rem 0 0 #ffe738, -0.5rem 0 0 #ffe738;
}
/* highlighted text effect used for the Cited By modal titles */
.highlight-2 {
    display: inline;
    font-size: 22px;
    font-weight: 600;
    line-height: 40px;
    background: #d6f2f7; /* APA Pubs Teal 20% tint */
    color: #333333;
    padding: 0.1rem;
    padding-left: 0;
    padding-right: 0;
    -webkit-box-decoration-break: clone;
    -ms-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone;
    box-shadow: 0.3rem 0 0 #d6f2f7, -0.3rem 0 0 #d6f2f7;
    margin-right: 3px;
}
/* internal scroll anchors - used on Notification Content Page */
.internal-scroll {
    font-size: 18px;
}
/* title link anchors - used on Notification Content Page and Visual Search & Browse POC (V6) */
.title-link {
    font-size: 18px;
}
/* overriding active anchor styles for .title-link - to possibly take out if removing active importants from PL stylesheet */
a.title-link {
    color: #003A70 !important;
    background-color: transparent !important;
    text-decoration: underline;
}
a.title-link:hover {
    text-decoration: none;
}
/* overriding active anchor styles for for the same design as .btn-pubs-5 XS being used on Visual Search POC (V6) */
a.whitepillbutton {
    background-color: #fff !important;
    color: #004c97 !important;
    border: 2px solid #004c97 !important;
    border-radius: 50px !important;
}
a.whitepillbutton:hover {
    background-color: #004c97 !important;
    color: #fff !important;
}
/* adding a bottom margin to space out list items in the Notification Page TOC list, all but last li */
ul.internal-scroll-list li:not(:last-child) {   
    margin-bottom: 8px;
}
/* adding a bottom margin to space out list items in the Notification Page titles lists, all but last li */
.load-more-list li:not(:last-child) {
    margin-bottom: 15px;
}
/* %%%%%%%%%%%%%% STYLES SPECIFIC FOR THE "EXPLORE ALL NOTIFICATIONS" PAGE (ISOTOPE PAGE) - TO REVISIT/CLEAN-UP LATER %%%%%%%%%%%%%% */
/* specific to the explore-notifications-2.html page, maybe others? - revisit later */
.btn-group .btn {
    border-radius: 0;
    display: inline-block;
    /* was block */
}
/* override from apaiuxpubs.css */
.btn-group .btn:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/* not sure if we need this */
.searchInputGroupSizing {
    max-width: 500px;
}
@media screen and (max-width: 767px) {
    .searchInputGroupSizing {
        min-width: 100%;
    }
}
/* general isotope styles - cards */
.alertsBox {
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    margin: 15px 20px;
    /* was margin: 10px 20px; */
    background-color: #f8f8f8;
}
.card-citation {
    color: #595959 !important;
    font-size: 16px;
}
.card-badge-row {
    margin: 0 0 20px;
}
.card-notification-info {
    margin: 10px 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
/* giving some vertical space for list items to improve readability */
.card-notification-info ul li {
    padding-bottom: 4px;
}
/* no need for extra bottom padding for last list items */
.card-notification-info ul>li:last-of-type {
    padding-bottom: 0;
}
.card-heading-1 {
    font-size: 16px;
    margin-top: 5px;
}
.card-heading-1:last-of-type {
    margin-bottom: 10px;
}
@media only screen and (max-width: 767px) {
    .alertsBox {
        margin: 20px 10px !important;
    }
    .modal-body .alertsBox {
        margin: 10px 0 !important;
    }
}
/* general isotope styles */
/* clear fix */
.grid:after {
    content: '';
    display: block;
    clear: both;
}
/* isotope card widths - for Explore Your Notifications, Explore Journals, and Browse Journals isotope designs */
.notification-item {
    width: 18%;
    margin: 5px 5px 20px 5px;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
@media only screen and (max-width: 1700px) {
    .notification-item {
        width: 24%;
    }
}
@media only screen and (max-width: 1400px) {
    .notification-item {
        width: 30%;
    }
}
@media only screen and (max-width: 1050px) {
    .notification-item {
        width: 45%;
    }
}
@media only screen and (max-width: 700px) {
    .notification-item {
        width: 90%;
    }
}
/* *** Related styling for responsive button groups - to revisit and clean up later *** */
/* Filter Buttons: For purposes of the mockup, solidifying that the button group anchors have the right "outline" look as buttons do */
a.btn-outline {
    color: #003a70 !important;
    background-color: #fff !important;
    border-color: #003a70 !important;
}
a.btn-outline:hover {
    color: #003a70 !important;
    background-color: #d5e8f9 !important;
    border-color: #003A70 !important;
}
/* checked filter button styling - to possibly adjust later - using .btn-pubs-3 purple color now */
.btn-outline.is-checked {
    background-color: #39207c !important;
    color: #ffffff !important;
}
/* Sort Buttons (using .btn-pubs-2 styling as the basis): For purposes of the mockup, solidifying that the button group anchors have the right ".btn-pubs-2" look as buttons do */
a.btn-pubs-2 {
    background-color: #004c97 !important;
    color: #ffffff !important;
    border-radius: 0px;
}
a.btn-pubs-2:hover {
    background-color: #003a70 !important;
    color: #7fbbdd !important;
}
/* ************* Responsive Button Group > Dropdown code - see https://codepen.io/grgaortiz/pen/QNOGNp ****************** */
@media (min-width: 768px) {
    .dr-breakout-btn {
        display: none !important;
    }
    .dr-breakout {
        display: inline;
        background: transparent;
        box-shadow: none;
        border: none;
        position: relative;
        margin: 0;
    }
    .dr-breakout li {
        display: inline;
    }
    .dr-breakout li a {
        display: inline-block;
        margin-bottom: 10px; /* gives some vertical spacing when button rows happen above 768px when the button groups become dropdowns */
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border-radius: 4px;

    }
}
/* alignment of the sort button group */
.sortButtonGroup {
    text-align: right;
}
/* was 767px but changed to 768px due to no rendering on the live site with min and max media query conflict */
@media (max-width: 768px) {
    .sortButtonGroup {
        text-align: left;
    }
}
/* styles for once sort and filter buttons become dropdown button <768px */
/* was 767px but changed to 768px due to no rendering on the live site with min and max media query conflict */
@media (max-width: 768px) {
    .sortDropdownButton {
        margin-top: 15px;
    }
    .sortButton,
    .filterButton {
        width: 100%;
        text-align: left; /* for readability */
    }
    .sortButton {
        border: 1px solid #ffffff;
    }
    .dropdown-menu.dr-breakout {
        padding: 0;
    }
    .resetButtonPlacement {
        margin-top: 15px;
    }
}
/* ******** Reordering Search - Sort - Filter columns vertically - See https://stackoverflow.com/questions/47186788/how-to-reorder-bootstrap-columns-vertically and https://codepen.io/Washable/pen/zPoeqY?editors=1100 ********* */
@media screen and (min-width: 768px) {
    .flex-container {
        display: flex;
        flex-direction: row;
        flex-grow: 1;
        flex-wrap: wrap;
    }
    #search-section {
        order: 1;
    }
    #filter-section {
        order: 3;
    }
    #sort-section {
        order: 2;
        float: right;
    }
}
/* *** putting some space after the "View full title" link if that is shown with the readmore.js */
.view-full-title+[data-readmore-toggle],
.view-full-title[data-readmore] {
    margin-top: 10px;
    padding-bottom: 10px;
}

/* *** putting some space after the "View all authors" link if that is shown with the readmore.js */
.view-all-authors+[data-readmore-toggle],
.view-all-authors[data-readmore] {
    margin-top: 10px;
}
/* top border only as long as text - using for the divider between the title and authors list on the Record Display page - See https://stackoverflow.com/questions/16399232/restrict-border-width-to-text-width-in-a-block-element */
.top-border-1 {
    border-top: 1px solid #949499; /* the .title-gray color */
    display: table-cell;
    padding-top: 10px;
}
.top-border-1:after {
    content: "";
    display: table-cell;
    width: 100%;
}
/* ###### these styles are specific to the "View Past Notifications" accordion modal ###### */
/* styles to make h4 panel button styles similar to the h2 styles used in the Record Display accordion - consider adding override .accordion h# styles to the main IUX PL for consistent styles of the panel links, for maintaining proper heading hierarchy needed per specific page */
.accordion h4 .btn-link {
    color: #333333;
    font-size: 1.3rem;
    font-weight: 500;
}
/* regulating the padding for the ul.notifications-list list items to improve readability and to account for larger star icon */
ul.notifications-list li {
    padding-bottom: 12px;
}
/* no need for extra padding for last list item */
ul.notifications-list>li:last-of-type {
    padding-bottom: 0;
}
/* making all notification page anchors the same width for table-like readability on "view past notification" modal along with other styling */
ul.notifications-list li a {
    display: inline-block;
    min-width: 90px;
    background-color: #f8f8f8;
    padding: 2px 4px;
}
/* responsive styling for the ul.notifications-list list items at the <767px stacking breakpoint */
@media screen and (max-width: 767px) {
    ul.notifications-list li {
        border-bottom: 1px solid #e6e6e6;
        margin-top: 15px;
    }
    ul.notifications-list>li:last-of-type {
        border-bottom: none;
    }
}
/* **** custom popover styling - for both BS Tourist and "regular" BS popovers - see more specific styling for BS Tourist popovers, which have a slightly different template **** */
.popover {
    width: 100%;
    max-width: 400px;
    /* default is 276px */
    border-radius: 10px !important;
}
.popover-header {
    display: none;
}
.popover-body {
    font-family: 'Lato', sans-serif !important;
    font-size: 22px;
    color: #ffffff;
    background: linear-gradient(90deg, rgba(0, 76, 151, 1) 0%, rgba(57, 32, 124, 1) 100%);
    -webkit-border-radius: 10px; /* Note that this different border radius styling than the BS Tourist popovers */
    -moz-border-radius: 10px;
    border-radius: 10px;
}
/* responsive styling for Bootstrap Tourist popover - modified to include .introjs-tooltiptext which is the class used in production */
@media screen and (max-width: 767px) {
    .popover-body, .introjs-tooltiptext {
        font-size: 16px;
}}
/* for close icon on popover with the blue-purple styling and no title but just content section */
.popover .close {
    color: #ffffff !important;
    opacity: 0.9 !important;
    margin-left: 8px; /* so that the popover-body text doesn't run into the X close button */
}
/* *** top popover arrows *** */
.bs-popover-top .arrow::before,
.bs-popover-auto[x-placement^="top"] .arrow::before {
    border-top-color: #39207c;
}
.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^="top"] .arrow::after {
    border-top-color: #39207c;
}
/* *** bottom popover arrows *** */
.bs-popover-bottom .arrow::before,
.bs-popover-auto[x-placement^="bottom"] .arrow::before {
    color: #39207c;
    border-bottom-color: #39207c;
}
.bs-popover-bottom .arrow::after,
.bs-popover-auto[x-placement^="bottom"] .arrow::after {
    border-bottom-color: #39207c;
}
/* *** right popover arrows *** */
.bs-popover-right .arrow::before,
.bs-popover-auto[x-placement^="right"] .arrow::before {
    color: #39207c;
}
.bs-popover-right .arrow::after,
.bs-popover-auto[x-placement^="right"] .arrow::after {
    border-right-color: #39207c;
}
/* *** left popover arrows *** */
.bs-popover-left .arrow::before,
.bs-popover-auto[x-placement^="left"] .arrow::before {
    border-left-color: #39207c;
}
.bs-popover-left .arrow::after,
.bs-popover-auto[x-placement^="left"] .arrow::after {
    border-left-color: #39207c;
}
/* **** custom popover styling - popover-light styles **** */
.popover[class*="tour-"].popover-light {
    border: 4px solid #33bfd5;
}
.popover[class*="tour-"].popover-light .popover-body {
    background: #fff !important;
    color: #212529;
}
.popover[class*="tour-"].popover-light .popover-navigation {
    background: #fff !important;
}
.popover[class*="tour-"].popover-light .close {
    color: #212529 !important;
    opacity: 0.9 !important;
    margin-left: 8px;
}
/* *** .popover-light top popover arrows *** */
.bs-popover-top.popover-light .arrow.arrow-light::before,
.bs-popover-auto.popover-light[x-placement^="top"] .arrow.arrow-light::before {
    border-top-color: #33bfd5 !important;
}
.bs-popover-top.popover-light .arrow.arrow-light::after,
.bs-popover-auto.popover-light[x-placement^="top"] .arrow.arrow-light::after {
    border-top-color: #33bfd5 !important;
}
/* *** .popover-light bottom popover arrows *** */
.bs-popover-bottom.popover-light .arrow.arrow-light::before,
.bs-popover-auto.popover-light[x-placement^="bottom"] .arrow.arrow-light::before {
    color: #33bfd5 !important;
    border-bottom-color: #33bfd5 !important;
}
.bs-popover-bottom.popover-light .arrow.arrow-light::after,
.bs-popover-auto.popover-light[x-placement^="bottom"] .arrow.arrow-light::after {
    border-bottom-color: #33bfd5 !important;
}
/* *** .popover-light right popover arrows *** */
.bs-popover-right.popover-light .arrow.arrow-light::before,
.bs-popover-auto.popover-light[x-placement^="right"] .arrow.arrow-light::before {
    color: #33bfd5 !important;
}
.bs-popover-right.popover-light .arrow.arrow-light::after,
.bs-popover-auto.popover-light[x-placement^="right"] .arrow.arrow-light::after {
    border-right-color: #33bfd5 !important;
}
/* *** .popover-light left popover arrows *** */
.bs-popover-left.popover-light .arrow.arrow-light::before,
.bs-popover-auto.popover-light[x-placement^="left"] .arrow.arrow-light::before {
    border-left-color: #33bfd5 !important;
}
.bs-popover-left.popover-light .arrow.arrow-light::after,
.bs-popover-auto.popover-light[x-placement^="left"] .arrow.arrow-light::after {
    border-left-color: #33bfd5 !important;
}
/* ========================================================================
 * Bootstrap Tourist -- https://raw.githubusercontent.com/IGreatlyDislikeJavascript/bootstrap-tourist/master/bootstrap-tourist.css
 * Copyright FFS 2019
 * @ IGreatlyDislikeJavascript on Github
 *
 * z indexes:
 *				1110 - backdrop (black bg)
 *				1111 - highlight & tour element ()set by js)
 *				1112 - prevent
 *				1113 - popover
 */
.tour-backdrop {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    /* position: absolute; */
    /* note: this was the default position, not fixed, but absolute for the backdrop couldn't seem to extend the entire height of the viewport, so I went with fixed and that seems to work well */
    box-sizing: content-box;
    z-index: 1110;
    background-color: #000;
    opacity: 0.8;
    -ms-filter: "alpha(opacity=90)";
    filter: alpha(opacity=90);
    visibility: visible;
}
.tour-backdrop-animation {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.tour-prevent {
    position: absolute;
    z-index: 1112;
    opacity: 0.20;
    filter: alpha(opacity=20);
}
.tour-highlight {
    box-sizing: content-box;
    position: absolute;
    z-index: 1110;
    background-color: #FFF;
    background-color: rgba(255, 255, 255, .9);
}
.tour-highlight-animation {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.tour-highlight-element {
    position: relative;
    z-index: 1111 !important;
}
.popover[class*="tour-"] {
    z-index: 1113;
}
.popover[class*="tour-"] .popover-navigation {
    padding: 9px 14px;
    overflow: hidden;
}
.popover[class*="tour-"] .popover-navigation *[data-role="end"] {
    float: right;
}
.popover[class*="tour-"] .popover-navigation *[data-role="prev"],
.popover[class*="tour-"] .popover-navigation *[data-role="next"],
.popover[class*="tour-"] .popover-navigation *[data-role="end"] {
    cursor: pointer;
}
.popover[class*="tour-"] .popover-navigation *[data-role="prev"].disabled,
.popover[class*="tour-"] .popover-navigation *[data-role="next"].disabled,
.popover[class*="tour-"] .popover-navigation *[data-role="end"].disabled {
    cursor: default;
}
.popover[class*="tour-"].orphan {
    position: fixed;
    margin-top: 0;
}
.popover[class*="tour-"].orphan .arrow {
    display: none;
}
.tour-behind {
    z-index: -1;
}
.tour-zindexFix {
    z-index: 1029;
}
/* **** BS Tourist - custom page elements - restart tour icon **** */
#new-features-icon {
    position: absolute;
    top: 65px;
    right: 10px;
    z-index: 9000;
}
.tour-icon {
    color: #004c97;
    font-size: 20px;
    cursor: pointer;
    margin-left: 5px;
}
.tour-icon:hover {
    color: #003a70;
}
/* **** BS Tourist - modifying BS popover styles for the BS Tourist popover styling **** */
.popover[class*="tour-"] {
    width: 100%;
    max-width: 400px;
    /* default is 276px */
    border-radius: 10px !important;
}
/* **** BS Tourist - simplified popover style overrides **** */
.popover[class*="tour-"] .popover-header {
    display: none;
}
.popover[class*="tour-"] .popover-body {
    font-family: 'Lato', sans-serif !important;
    font-size: 22px;
    color: #ffffff;
    background: linear-gradient(90deg, rgba(0, 76, 151, 1) 0%, rgba(57, 32, 124, 1) 100%);
    /* background-color: #39207c; */
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
}
/* responsive styling for Bootstrap Tourist popover */
@media screen and (max-width: 767px) {
    .popover[class*="tour-"] .popover-body {
        font-size: 16px;
    }
    .popover[class*="tour-"] .popover-navigation {
        padding: 3px 14px 9px;  
}}
.popover-navigation {
    background: linear-gradient(90deg, rgba(0, 76, 151, 1) 0%, rgba(57, 32, 124, 1) 100%);
    /* background-color: #39207c; */
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}
/* ***************** HAMBURGER MENU - See https://codepen.io/breadz/pen/zrMRoo ***************** */
#menu {
    background: #39207c;
    height: 100%;
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: fixed;
    text-align: center;
    top: 0;
    transition: all 0.7s ease-in-out;
    visibility: hidden;
    width: 100%;
    z-index: 9001;
    /* so this goes above the header#topbanner z-index of 1 - I tried 2 but then went to 9000 to go over all the UI controls on the isotope screen */
    /* was 1100 */
}
#hamburger-nav {
    position: absolute;
    top: 56px;
}
#menu.open {
    opacity: 1;
    visibility: visible;
}
/* have to add this keyframes code since the SCSS to CSS compiling missed it */
@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
header#hamburgermenu {
    border-bottom: none;
    z-index: 9998; /* make sure close menu is above all others, but underneath .modal which is set in this stylesheet to 9999 */
    position: absolute;
}
#menu.open li:nth-child(1) {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}
#menu.open li:nth-child(2) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
#menu.open li:nth-child(3) {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
#menu.open li:nth-child(4) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}
#menu.open li:nth-child(5) {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
#menu.open li:nth-child(6) {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
#menu.open li:nth-child(7) {
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}
#menu.open li:nth-child(8) {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}
#menu.open li:nth-child(9) {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}
#menu.open li:nth-child(10) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
#menu.open li {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
#menu ul:hover a {
    opacity: 0.5;
}
#menu ul a {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: opacity 0.3s ease-in-out;
}
#menu ul a:hover {
    opacity: 1;
}
#menu .main-nav {
    position: relative;
    top: 40%;
    /* was 50% */
    transform: translateY(-50%);
}
#menu .main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu .main-nav a {
    color: #ffffff;
    display: block;
    font-size: 2.5rem;
    font-weight: bold;
    padding: 1rem 1rem;
    text-decoration: none;
    /* text-transform: uppercase; */ /* took this style out on 7-15-2021 */
}
#menu .main-nav a:first {
    padding-top: 0;
}
#menu .menu-footer {
    padding: 2rem;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    background-color: inherit;
    /* override from apaiuxpubs.css footer styling */
    border: none;
    /* override from apaiuxpubs.css footer styling */
}
#menu .menu-footer ul {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu .menu-footer ul li {
    display: inline;
    margin: 0 1rem;
}
#menu .menu-footer a {
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
}
.toggle-menu {
    background-color: #39207c;
    /* was transparent */
    border: none;
    cursor: pointer;
    display: inline-block;
    /* float: right; */
    height: 50px;
    outline: none;
    padding: 0;
    pointer-events: initial;
    position: relative;
    vertical-align: middle;
    width: 50px;
    z-index: 1110;
    /* was 1110 */
}
.toggle-menu span {
    background-color: #fff;
    content: "";
    display: block;
    height: 2px;
    left: calc(50% - 13px);
    position: absolute;
    top: calc(50% - 1px);
    transform-origin: 50% 50%;
    transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out, transform 0.2s linear;
    width: 26px;
}
.toggle-menu span:before,
.toggle-menu span:after {
    background-color: #fff;
    content: "";
    display: block;
    height: 2px;
    position: absolute;
    transform-origin: 50% 50%;
    transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out, transform 0.2s linear;
    width: 26px;
}
.toggle-menu span:before {
    top: 7px;
}
.toggle-menu span:after {
    top: -7px;
}
.toggle-menu.active span {
    background-color: transparent;
    transition: background 0.2s ease-out;
}
.toggle-menu.active span:before,
.toggle-menu.active span:after {
    transition: top 0.2s ease-out, transform 0.2s 0.2s ease-out;
}
.toggle-menu.active span:before {
    top: 0;
    transform: rotate3d(0, 0, 1, -45deg);
}
.toggle-menu.active span:after {
    top: 0;
    transform: rotate3d(0, 0, 1, 45deg);
}
@media screen and (max-width: 991px) {
    .toggle-menu {
        border: 2px solid #ffffff;
    }
    #hamburger-nav {
        top: 57px;
    }
    .hamburgerSpaceAt991, .hamburgerSpaceAt767 {
        padding-top: 2.5rem; /* using for Record Display pages that don't have image banner - to give space for hamburger menu with card-body - need to make sure that HTML has the correct 991 for this class, so keeping the 767 one here even though it's not "correct" */
}}
@media screen and (max-width: 1300px) {
    .marginLeft40pxat1300 {
        margin-left: 40px; /* using for Topic Mapper designs to move over "back to record" link at top */
}}
/* custom-toast styling for toast after feedback form submission */
.toast-success {
    border: solid 1px #00b996;
    background-color: #d4edda;
    color: #005344;
}
.toast-success .toast-header {
    background-color: #d4edda;
    color: #005344;
}
/* additional toast styles which may be used later */
.toast-warning {
    border: solid 1px #c9b392;
    background-color: #fff4d7;
    color: #865000;
}
.toast-warning .toast-header {
    background-color: #fff4d7;
    color: #865000;
}
.toast-danger {
    border: solid 1px #f9baba;
    background-color: #fde9e9;
    color: #770a0a;
}
.toast-danger .toast-header {
    background-color: #fde9e9;
    color: #770a0a;
}
.toast-primary {
    border: solid 1px #b8daff;
    background-color: aliceblue;
    color: #003a70;
}
.toast-primary .toast-header {
    background-color: aliceblue;
    color: #003a70;
}
.toast-secondary {
    border: solid 1px #b8daff;
    background-color: #ffffff;
    color: #003a70;
}
.toast-secondary .toast-header {
    background-color: #ffffff;
    color: #003a70;
}
.toast-light {
    border: solid 1px #c7C8c9;
    background-color: #f1f1f1;
    color: #212529;
}
.toast-light .toast-header {
    background-color: #f1f1f1;
    color: #212529;
}
.toast-dark {
    border: solid 1px #212529;
    background-color: #212529;
    color: #ffffff;
}
.toast-dark .toast-header {
    background-color: #212529;
    color: #ffffff;
}
.toast-dark .close {
    color: #ffffff;
    opacity: 0.9;
}
.toast-dark .close:not(:disabled):not(.disabled):hover, .toast-dark .close:not(:disabled):not(.disabled):focus {
    color: #ffffff;
}
/* *** custom toast placement styles - need to revisit this style with having it work with navigation bar dropdown and links and with toasts being visible on page load *** */
.toast-placement-top-right {
    position: fixed;
    z-index: 9998;
    top: 45px;
    right: 10px;
}
/* ************* image upload and preview - see https://codepen.io/ckato/pen/JQaPzO ************* */
.wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.box {
    display: block;
    min-width: 200px;
    height: 300px;
    margin: 10px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}
.upload-options {
    position: relative;
    height: 75px;
    background-color: #004c97;
    cursor: pointer;
    overflow: hidden;
    text-align: center;
    transition: background-color ease-in-out 150ms;
}
.upload-options:hover {
    background-color: #003a70;
}
.upload-options input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.upload-options label {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
}
.upload-options label::after {
    content: "\f067";
    font-family: "Fontawesome";
    position: absolute;
    font-size: 2.5rem;
    color: #e6e6e6;
    top: calc(50% - 1.8rem);
    left: calc(50% - 1.1rem);
    z-index: 0;
}
.upload-options label span {
    display: inline-block;
    width: 50%;
    height: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
}
.upload-options label span:hover i {
    color: lightgray;
}
.js--image-preview {
    height: 225px;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-image: none;
    background-color: white;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.js--image-preview::after {
    content: "\f03e";
    font-family: "Fontawesome";
    position: relative;
    font-size: 4.5em;
    color: #e6e6e6;
    top: calc(50% - 3rem);
    left: calc(50% - 6.25rem);
    z-index: 0;
}
.js--image-preview.js--no-default::after {
    display: none;
}
.js--image-preview:nth-child(2) {
    background-image: url("https://bastianandre.at/giphy.gif");
    /* note that this is not working */
}
.wrapper .box i.fa {
    transition: color 100ms ease-in-out;
    font-size: 2.25em;
    line-height: 55px;
    color: white;
    display: block;
}
.drop {
    display: block;
    position: absolute;
    background: rgba(95, 158, 160, 0.2);
    border-radius: 100%;
    transform: scale(0);
}
.animate {
    -webkit-animation: ripple 0.4s linear;
    animation: ripple 0.4s linear;
}
@-webkit-keyframes ripple {
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}
@keyframes ripple {
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}
/* right-middle fixed positioning for Feedback button */
.right-middle {
    position: fixed;
    right: -44px;
    top: 50%;
    z-index: 1;
    -ms-transform: rotate(270deg) translatez(0) scale(0.99);
    /* IE 9 */
    -moz-transform: rotate(270deg) translatez(0) scale(0.99);
    /* Firefox */
    -webkit-transform: rotate(270deg) translatez(0) scale(0.99);
    /* Safari and Chrome */
    -o-transform: rotate(270deg) translatez(0) scale(0.99);
    /* Opera */
    transform: rotate(270deg) translatez(0) scale(0.99);
    -webkit-transform-origin: 50% 52%;
    /* blurry button from rotate hack - see https://stackoverflow.com/questions/20326220/blurry-text-on-transformrotate-in-chrome */
    transform-origin: 50% 52%;
}
/* making the .container-fluid not 100% width to accommodate the .right-middle feedback button */
.container-fluid {
    width: 95%;
}
/* hiding tooltips on mobile - and using a body class to accomplish this effect on certain screens such as the Topic Mapper (v5 mockup) - see https://stackoverflow.com/questions/11903001/hiding-bootstrap-tooltips-on-mobile-using-media-queries */
 @media screen and (max-width: 767px) {
    .no-mobile-tooltips > .tooltip {
        display: none !important;
    }
}
 /* ************** TOPIC MAPPER STYLES - being used for topic-mapper-panel-designs-v5.html (the other versions have internal CSS for those specific designs) ************** */

 .nav-pills .nav-link {
    border-radius: 3px;
    background-color: inherit;
    margin-bottom: 40px;
    padding: 10px;
}

.nav-pills .nav-link:first-of-type {
    margin-top: 10px;
}

@media screen and (max-width: 767px) {
    .nav-pills .nav-link:first-of-type {
        margin-top: 0;
    }
}

/* svg icon styles for .nav-pills */
.nav-pills .nav-link.active {
    background-color: #003A70;
}

.nav-pills .nav-link svg {
    fill: #4D5154;
}

.nav-pills .nav-link svg:hover {
    fill: #003A70;
}

.nav-pills .nav-link.active svg {
    fill: #FFFFFF;
}

.nav-pills a {
    text-decoration: none;
}

/* styles if we want a vertical scrollbar for the panels - check mobile friendliness and adjust size as needed */
#menu-panels {
    padding-left: 0; /* overriding the default 15px to maximize space in the right panel on desktop, then returninig to 15px with a media query */
}

.tablist-menu {
    background-color: #F4F4F4;
    padding: 5px 3px;
    max-width: 51px;
}

h2.mapper-heading {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 20px;
    margin-top: 0;
    border-bottom: 1px solid #C7C8C9;
}

h2.mapper-heading div {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 14px;
    color: #4D5154;
    margin-bottom: 8px;
}

h3.mapper-title {
    line-height: 1.2 !important;
    font-size: 16px;
}

h3.panel-subheadings,
legend.mapper-legend {
    text-transform: uppercase;
    font-size: 16px;
    color: #4D5154;
    margin: 20px 0 6px;
}

.mapper-top-cited {
    border-bottom: 1px solid #C7C8C9;
}

.mapper-top-cited:first-of-type {
    border-top: 1px solid #C7C8C9;
}

.mapper-top-cited:last-of-type {
    border-bottom: none;
}

/* overrides from Explore All Notification card classes to fit new styling for Topic Mapper screens */

.mapper-top-cited>.card-citation {
    font-size: 14px;
    margin-bottom: 10px;
}

.mapper-top-cited>.card-badge-row {
    margin-top: 10px;
    margin-bottom: 10px;
}

.mapper-top-cited .show-hide-abstract-button-row {
    margin-top: 5px;
}

 /* ************** CITATION MAPPER SPECIFIC STYLES ************** */

 /* not sure if these 4 below styles are being used in final version screens */

.mapper-citation {
    background-color: aliceblue;
    border-top: 1px solid #C7C8C9;
    border-bottom: 1px solid #C7C8C9;
    margin-bottom: 15px;
    padding: 0 10px;
}

.mapper-citation>.card-citation {
    font-size: 14px;
    margin-bottom: 10px;
}

.mapper-citation>.card-badge-row {
    margin-top: 10px;
    margin-bottom: 10px;
}

.mapper-citation .show-hide-abstract-button-row {
    margin-top: 5px;
}

 /* these styles are being used in citation-mapper-panel-designs-v3.html and related pre-filtered results mockups */

.mapper-cards .card {
    border: 2px solid #3E52A3;
}

.mapper-cards .card:hover {
    background-color: #D6F2F7;
    border: 2px solid #39207C;
}

.mapper-cards a.anchor-card {
    background-color: #FFFFFF !important;
    border: none !important;
    color: #003A70 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    margin-bottom: 15px;
}

.mapper-cards .card-body {
    padding: 0.5rem;
}

/* ************ for the Citation Mapper legend ************** */
.circle {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 2px solid #0084FF;
}

.circle-size1 {
    width: 10px;
    height: 10px;
    line-height: 10px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    margin-top: 5px;
    border: 2px solid #0084FF;
}

.circle-size2 {
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    margin-top: 5px;
    border: 2px solid #0084FF;
}

.circle-size3 {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    margin-top: 5px;
    border: 1px solid #0084FF;
}

.circle-size4 {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    margin-top: 5px;
    border: 1px solid #0084FF;
}

.circle-size5 {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    margin-top: 5px;
    border: 2px solid #0084FF;
}

.circlecluster {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 2px dotted #000000;
}

.long-arrow-right,
.long-arrow-left {
    display: block;
    width: 15px;
    height: 15px;
    border-top: 2px solid #0084FF;
    border-left: 2px solid #0084FF;
}

.long-arrow-right {
    transform: rotate(135deg);
    margin-left: 26px;
}

.long-arrow-left {
    transform: rotate(-45deg);
    margin-right: 27px;
    margin-left: -20px;
}

.long-arrow-right::after,
.long-arrow-left::after {
    content: "";
    display: block;
    width: 2px;
    height: 45px;
    background-color: #0084FF;
    transform: rotate(-45deg) translate(15px, 4px);
}

/* *** tint color variations from Publishing Purple #39207C - .purple1 is darkest *** */

.purple1 {
    background-color: #39207C;
}

.purple2 {
    background-color: #5630BA;
}

.purple3 {
    background-color: #8262D7;
}

.purple4 {
    background-color: #BFA1E7;
}

.purple5 {
    background-color: #E6DFF7;
}

.targetdocument {
    background-color: #DBF6EF;
    border: 5px solid #D22730;
}

/* for the breadcrumbs */

.history-tl-container ul.tl li.targetDocumentBreadcrumb::before {
    background-color: #DBF6EF;
    border: 3px solid #D22730;
}

.history-tl-container ul.tl li.citedReferenceLegendCircle::before {
    background-color: #BFA1E7;
}

.history-tl-container ul.tl li.citedReferenceLegendCircle:hover::before {
    background-color: #39207C;
}

/* conflict with using legend colors for the breadcrumbs, so resetting the background color for .tl-items here */
.tl-item {
    background-color: inherit !important;
}

/* override type styles since .active a is being picked up from main PL */
h3.mapper-title>a,
.tl-item-term a {
    color: #003A70 !important;
    background-color: transparent !important;
    text-decoration: underline;
}

h3.mapper-title>a:hover,
.tl-item-term a:hover {
    color: #212529;
    text-decoration: none;
}

/* matching BS4 styles for .dropdown-item, but scoping it to override the applied .active a styles from the tabs */
.active a.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #212529 !important;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent !important;
    border: 0;
}

.active a.dropdown-item:hover {
    color: #16181B !important;
    text-decoration: none !important;
    background-color: #F8F9FA !important;
}

/* custom styling for kebab dropdown menu */
.dropdown-menu[aria-labelledby="topicMapperMenuKebab"] {
    background: #fff;
    border: 3px solid #33BFD5;
}

/* placing the toggle panel button in the graph container */
#toggle-panel-button-placement {
    position: absolute;
    top: 15px;
    right: 30px;
}

/* slideout panel - see https://codepen.io/krisgrove/pen/prPdov */
#slideout {
    background: #FFFFFF;
    position: absolute;
    top: 0;
    right: -315px;
    width: 295px;
    height: 100%;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    display: none;
    padding-left: 30px;
    height: 700px;
    overflow-y: auto;
    overflow-x: hidden;
}

#slideout.on {
    display: block;
    right: 5px;
}

/* changing position of toggle panel button when slideout is open - used along with JS */
.toggle-panel-button-placement-slideout-on {
    right: 315px !important;
    z-index: 1;
}

/* placing the visualization tools in the graph container for the desktop display >767px */
#visualization-tools {
    position: absolute;
    bottom: 0;
    left: 30px;
}

/* placing the visualization tools in the graph container for the horizontal display <767px */
#visualization-tools-horizontal {
    position: absolute;
    bottom: 0;
    left: 30px;
}

/* making sure the vertical tool buttons are all the same width, as it seems the "Reset View" text is affecting padding or width and changing default line-height from 1.5 to 1 so smaller height */
.tool-buttons button {
    width: 54px !important;
    line-height: 1;
}

/* consider adding kebab hover styles into PL or PUBS stylesheet - styles the same as .btn-textbutton which also isn't added into the PL yet */
button.kebab:hover {
    background-color: #e0f6fd;
    color: #23527c;
    text-decoration: none;
}

/* adding a cursor not-allowed style to the disabled Content Type checkbox to make it clearer to users it's not an option that would return any results - consider adding into PL */
.custom-control-input:disabled~.custom-control-label {
    cursor: not-allowed;
}

/* custom primary badge style for pubs, being used for the Content Types filters counts, as "regular" primary looks like the semantic Index Terms color from the Topic Mapper legend - consider adding into main PL */
.badge-primary-pubs {
    color: #FFFFFF;
    background-color: #004C97;
    border: solid 1px #212529;
}

/* datepicker */
/* overriding the selected date on the calendar with APA Brand Blue */
.bootstrap-datetimepicker-widget td span.active {
    background-color: #004C97;
}

/* overriding the active years that are able to be selected with APA Publishing Purple */
.bootstrap-datetimepicker-widget td span {
    color: #39207C;
}

/* overriding the inactive years that are not able to be selected with the first shade of gray that passes color contrast against white, for both years that are "disabled" and years that are "old" - was initially #777 */
.bootstrap-datetimepicker-widget td span.disabled,
.bootstrap-datetimepicker-widget td span.old {
    color: #737373;
}

/* setting the max-width for the date fields */
input#startDate,
input#endDate {
    max-width: 65px;
}

/* vertical timeline - see https://codepen.io/pranjal-goswami/pen/RNdpOP */
.history-tl-container {
    margin: auto;
    display: block;
    position: relative;
}

.history-tl-container ul.tl {
    margin: 20px 0;
    padding: 0;
    display: inline-block;
}

.history-tl-container ul.tl li {
    list-style: none;
    margin: auto;
    margin-left: 20px;
    min-height: 40px;
    border-left: 1px dashed #39207C;
    padding: 0 0 30px 15px;
    position: relative;
}

.history-tl-container ul.tl li:last-child {
    border-left: 0;
}

/* timeline bubbles - generic styles */
.history-tl-container ul.tl li::before {
    position: absolute;
    left: -10px;
    top: -5px;
    content: " ";
    border: 8px solid rgba(255, 255, 255, 0.74);
    border-radius: 500%;
    height: 20px;
    width: 20px;
    transition: all 500ms ease-in-out;
}

.history-tl-container ul.tl li:hover::before {
    transition: all 1000ms ease-in-out;
}

/* different term type and citation colors - used for Topic Mapper and Citation Mapper Legends */
.documentTerm {
    color: #002854;
    background-color: #002854;
}

.indexTerm, .citationColor {
    color: #E4F3F6;
    background-color: #E4F3F6;
}

.broaderTerm {
    color: #F7E4E8;
    background-color: #F7E4E8;
}

.narrowerTerm {
    color: #DBF6EF;
    background-color: #DBF6EF;
}

.relatedTerm {
    color: #FFF8E8;
    background-color: #FFF8E8;
}

/* timeline term type circles - used in Topic Mapper and Citation Mapper legends */

/* Document circle - "very dark blue" #002854 - using darkest tint of "moderate red" #C63E5A */
.history-tl-container ul.tl li.document::before {
    background: #002854;
}

.history-tl-container ul.tl li.document:hover::before {
    border-color: #002854;
}

/* Index Term circle and Citation circle -"light grayish cyan" #E4F3F6 - using darkest tint of "moderate cyan" #42ABC0 */
.history-tl-container ul.tl li.indexTerm::before, .history-tl-container ul.tl li.citationLegendCircle::before {
    background: #42ABC0;
}

.history-tl-container ul.tl li.indexTerm:hover::before, .history-tl-container ul.tl li.citationLegendCircle:hover::before {
    border-color: #42ABC0;
}

/* Broader Term circle - "light grayish red" #F7E4E8 - using darkest tint of "moderate red" #C63E5A */
.history-tl-container ul.tl li.broaderTerm::before {
    background: #C63E5A;
}

.history-tl-container ul.tl li.broaderTerm:hover::before {
    border-color: #C63E5A;
}

/* Narrower Term circle - "light grayish cyan - lime green" #DBF6EF - using darkest tint of "moderate cyan - lime greeen" #3ECFA9 */
.history-tl-container ul.tl li.narrowerTerm::before {
    background: #3ECFA9;
}

.history-tl-container ul.tl li.narrowerTerm:hover::before {
    border-color: #3ECFA9;
}

/* Related Term circle - "very pale - (mostly white) orange" #FFF8E8 - using darkest tint of "vivid orange" #FFB610 */
.history-tl-container ul.tl li.relatedTerm::before {
    background: #FFB610;
}

.history-tl-container ul.tl li.relatedTerm:hover::before {
    border-color: #FFB610;
}

.tl-item-term {
    color: #212529;
    /* fallback color if not a link */
    position: relative;
    top: -7px;
}

/* responsive styling for the Topic Mapper screen */
@media screen and (max-width: 767px) {

    #slideout {
        padding-left: 15px;
    }

    .tablist-menu {
        max-width: none;
        margin-top: 0;
        margin-left: 15px;
    }

    .nav-pills-horizontal {
        justify-content: space-between;
        margin: 0;
        padding: 5px 10px;
        height: 54px;
        background-color: #F4F4F4;
        flex-direction: row;
    }

    .flex-container {
        display: flex;
        flex-direction: row;
        flex-grow: 1;
        flex-wrap: wrap
    }

    #menu-pills {
        order: 1;
        flex-shrink: 1;
        max-width: 695px;
        width: 100%;
        margin-right: 30px;
    }

    #menu-panels {
        order: 2;
    }

    #menu-panels {
        padding-left: 15px;
        /* returning to the default 15px on mobile devices */
        padding-right: 32px;
        /* having to add additional right padding on mobile display for some reason */
    }

    h2.mapper-heading {
        margin-top: 10px;
    }

    #menu-text {
        display: none;
    }
}

@media screen and (max-width: 400px) {

    .toggle-panel-button-placement-slideout-on {
        right: 251px !important;
        top: -15px !important;
    }

    .tablist-menu {
        margin-top: 25px;
    }
}

 /* ************** EXPLORE JOURNALS V1 STYLES - note that if we end up using an alternative design, we may be able to delete some of these styles depending on how the other versions/design look ************** */
ul.explore-details li.list-group-item {
    font-size: 16px;
    padding: 0.5rem;
}
/* adding BS5 .list-group-numbered styles for BS4 - see https://getbootstrap.com/docs/5.0/components/list-group/ */
.list-group-numbered {
    list-style-type: none;
    counter-reset: section;
}
.list-group-numbered>li::before {
    content: counters(section, ".") ". ";
    counter-increment: section;
}
/* adding some margins for when buttons are within .list-group components */
.list-group-item>button {
    margin: 5px;
}
/* Pubs branding for .list-group-item-primary used on Explore Journals screen */
.list-group-item-primary {
    background-color: #D6F2F7;
}
/* Preference Center Management form - revisit this style */
.large-form-labels label {
    font-size: 22px;
    margin-top: 25px;
}
/* Preference Center Management form - skipping-resetting the larger form labels for the radio button component */
.large-form-labels .custom-radio > label {
    font-size: 16px;
    margin-top: 0;
}
/* not giving the margin-top to the jQuery validate error messages that also use label */
.large-form-labels label.help-block {
    margin-top: 0;
}
/* used in structure for the Preference Management Center form */
.large-form-heading {
    font-size: 22px;
    margin-top: 25px;
    font-weight: normal;
}
.exampleText {
    margin-top: 25px;
}
@media screen and (max-width: 767px) {
    .marginLeft20At767{
        margin-left: 20px;
    }
    .exampleText {
        margin-top: 10px;
    }
}
/* condensed style accordion - used in Explore Journals V3 POC */
.accordion-condensed .card-header .btn {
    padding: 5px 10px;
}
.accordion-condensed h4 .btn-link {
    font-size: 1rem;
}
.accordion-condensed button svg {
    height: 16px !important;
    width: 16px !important;
    margin-top: 3px;
}
.svg-button-currentcolor {
    fill: currentColor !important;
}
/* ******** NOT NEEDED YET BUT KEEPING IN FOR MOCKUP ACCESSIBILIY CHECKING REASONS ******** */
/* doing this styling just to pass color contrast accessibility on the "file upload" widget used in the (non-MVP) feedback forms, since WAVE was throwing 3 color contrast issue errors for the 3 uploads, even though they were .sr-only */
.upload-options span.sr-only {
    background-color: #FFFFFF !important;
    color: #000000 !important;
}