/* LAST UPDATED: 6-25-2021 */

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

/* *********** Styling for top image section of the scratchpads and directory *********** */

.bg-img {
    background: url(../img/abstract-background-abstract-oil-painting-abstract-painting-1629236.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-img-dev {
    background: url(../img/abstract-architectural-art-artistic-532563.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-img h1, .bg-img ul, .bg-img p {
    text-shadow: 2px 2px 15px #000;;
}

.bg-img-dev h1, .bg-img ul, .bg-img p {
    text-shadow: 2px 2px 15px #000;;
}

/* *********** STYLES USED FOR THE PATTERY LIBRARY COMPONENTS SCRATCHPAD PAGES *********** */
.horizontallyCentered {
    display: flex;
    justify-content: center;
}

body {
    background-color: #f4f4f4;
}

.badge {
    margin-left: 4px;
}

/* 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 [aria-expanded="false"] .collapse-chevron-icon {
    transform: rotate(0deg);
    transition: .3s transform ease-in-out;
    display: inline-block;
}

.collapse-chevron [aria-expanded="true"] .collapse-chevron-icon {
    transform: rotate(90deg);
    transition: .3s transform ease-in-out;
    display: inline-block;
}

h2 {
    font-size: 1.5rem;
}
.toc, .toc .card-header {
    background-color: #F0F8FF;
}
h3 button.accordion-button:not(.collapsed) { font-weight:bold; }
h4 button { font-size: 1rem; }
h5 { font-size: 1rem; }
.current h4 { font-weight: bold; }

#main .card-body {
    padding: 0;
}

.accordion-button:not(.collapsed) {
    color: #003A70;
    background-color: #F0F8FF;
}

.accordion .accordion .accordion-button:not(.collapsed) {
    color: #212529;
    background-color: #F4F4F4;
}

h3 .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23212529'%3e%3cpath d='M240 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H176V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H384c17.7 0 32-14.3 32-32s-14.3-32-32-32H240V80z'/%3e%3c/svg%3e");
}
h3 .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23212529'%3e%3cpath d='M416 256c0 17.7-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3e%3c/svg%3e");
}

.banners {
    margin-bottom: 20px;
}
.banners h3 {
    font-size: 1.2rem;
    background-color: #003A70;
    color: #fff;
    padding: 15px 20px;
}
.banners .banner {
    border-bottom: 1px solid #DEDEDF;
    padding-top: 15px;
    margin-bottom: 10px;
}

/* *********** Removed to help with pattern library debugging *********** */

/*
.badge-small {
    font-size:10px;
    letter-spacing: .5px;
}
footer {
    border-top:1px solid #ccc;
}
footer p {
    margin-bottom:0;
}
.table-of-contents a {
    color:#fff;
}
span.highlight {
    background: #f1c40f;
}
.optionalText {
    font-style:italic;
    color:#767676;
    font-size:12px;
    padding-left: 2px;
}
form .required-asterisk {
    padding-left: 1px;
}
p.small {
    line-height: .5rem;
}*/

/* Last Updated: 5-27-2021 */
/* *************** APA PUBLISHING BRANDING GUIDELINES - 4-7-2020 ******************** */
@import url("https://fonts.googleapis.com/css?family=Catamaran:wght@400;700&display=swap");
/* 
/* ******** this will soon become part of the IUX PL ******** */
.modal .modal-body p {
    color: inherit;
}
/* *** 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 */
}
/* *** 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;
}
.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 */
}
h3 {
    font-size: 1.4rem; /* matches the "regular" h2 */
}
p.small {
    font-size: 14px !important; /* used for the simple footer */
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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 */
}
/* *** 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;
}
/* 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;
}}
/* *** 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%;}
/* *** BUTTONS *** */
/* 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 */
.btn-pubs-2 {
    background-color: #004c97;
    color: #fff;
    border-radius: 0px;
}
.btn-pubs-2:hover {
    background-color: #003a70;
    color: #7fbbdd;
}
/* outline rounded */
.btn-pubs-5 {
    background-color: #fff;
    color: #004c97;
    border: 2px solid #004c97;
    border-radius: 50px;
}
.btn-pubs-5:hover {
    background-color: #004c97;
    color: #fff;
}
/* *** PURPLE BUTTONS *** */
/* squared */
.btn-pubs-3 {
    background-color: #39207c;
    color: #fff;
    border-radius: 0px;
}
.btn-pubs-3:hover {
    background-color: #221e44;
    color: #a496c8;
}
/* outline rounded */
.btn-pubs-6 {
    background-color: #fff;
    color: #39207c;
    border: 2px solid #39207c;
    border-radius: 50px;
}
.btn-pubs-6:hover {
    background-color: #39207c;
    color: #fff;
}
/* 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 */
}
/* ************ 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;
}
/* extra responsive utilities */
.screen-only767{display:block;}
.mobile-only767{display:none;}
@media screen and (max-width: 767px){
    .screen-only767{display:none;}
    .mobile-only767{display:block;}
}
.screen-only500{display:block;}
.mobile-only500{display:none;}
@media screen and (max-width: 500px){
    .screen-only500{display:none;}
    .mobile-only500{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 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;
}}
/* ************ THIN HEADER FROM APA.ORG ************ */
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;
}
header .banner img {
    margin: 5px 0 8px 14px;
}
header .banner img.apaLogo {
    width: 155px;
}
header .banner .headLogo {
    float: left;
}
header .banner .headLogo img.large {
    max-width: 430px;
    height: auto;
}
header .banner .headLogo img.small,
header .banner .headLogo img.medium {
    display: none;
}
@media screen and (max-width: 995px) {
    header {
        width: auto;
        border: 0;
        margin: 0;
        clear: both;
    }
    header .header_top .header_left {
        display: none;
    }
    header .banner .headButton {
        display: block;
    }
    header .banner {
        margin-top: 0;
        overflow: visible;
        height: 57px;
        border-bottom: 2px solid #555;
    }
    header .banner .headLogo img {
        margin: 2px 0 0 20px;
        max-height: 55px;
    }
}
@media screen and (min-width: 768px) and (max-width: 995px) {
    header .banner .headLogo img.large {
        margin-top: 12px;
    }
}
@media screen and (max-width: 767px) {
    header .banner .headLogo img.large {
        max-width: 320px;
        height: auto;
        margin: 17px 0 0 10px;
    }
}
@media screen and (max-width: 480px) {
    header .banner .headLogo img.small {
        display: block;
        max-height: 40px;
        margin: 2px 0 0 10px;
        padding-top: 8px;
    }
    header .banner .headLogo img.large {
        display: none;
    }
}
/* ************ 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;
}
/* Full Width Banner Header - Used on Notification Content Page, Homepage, etc. - Adapted from Salesforce forms */
.backgroundBanner {
    background: url(../img/persona-people.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: 430px;
    height: 100%;
    opacity: 0.95;
}
@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;
    }
}
/* ************ 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;
}
/* ********** 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);
}
/* *** 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 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;
}
.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;
}
/* *** 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 */
}
/* %%%%%%%%%%%%%% 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;
    margin-top: 15px;
}
.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 */
.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;
}

/* ************* Responsive Button Group > Dropdown code - see https://codepen.io/grgaortiz/pen/QNOGNp ****************** */
@media (min-width: 767px) {
    .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 767px 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;

    }
}
/* styles for once sort and filter buttons become dropdown button <767px */
@media (max-width: 767px) {
    .dropdown-menu.dr-breakout {
        padding: 0;
    }
    .resetButtonPlacement {
        margin-top: 15px;
    }
    .topMargin20At767 {
        margin-top: 20px;
    }
    .topMargin30At767 {
        margin-top: 30px;
    }
}
/* *** 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;
    }
}
/* **** NEW **** */
.card-title-link {
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
}