html {
    font-size: 16px;
}
/* ************ GENERAL STYLES ************ */
body {
    background-color: #FFF;
    /* styles for sticky footer */
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    font-size: 1rem;
}
h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.85rem;
}
h3 {
    font-size: 1.6rem;
}


#mainBodyContainer {
    flex: 1 0 auto; /* style for sticky footer */
}
a {
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
/* 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: 0.25em;
    width: 1em;
    height: 1em;
    left: 0.25em; /* added this so icon is not totally against the link on display */
}

/* ************ POSSIBLY ADD THESE STYLES TO THE MAIN PL ************ */
.modal .modal-body p {
    color: inherit;
}
.alert p, .card .card-body .alert p {
    color: inherit;
}
input[readonly] {
    cursor: not-allowed;
    pointer-events: all !important;
}

/* ************ THIN HEADER FROM APA.ORG ************ */
header {
    font-size: 1rem;
    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;
    }
}
.navbar-dark .navbar-nav .nav-link {
    color: #fff;
}
.nav-link.active, .nav-link:hover  {
    text-decoration: underline !important;
    color: #fff !important;
}
.nav-link.active:hover {
    text-decoration: none !important;
}
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
      padding-right: 1rem;
      padding-left: 1rem;
    }
}
/* ************ 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;
}
/* ************ MISC STYLES ************ */
@media only screen and (max-width: 767px) {
    .fullWidthButton767 {
        width: 100%;
        margin-top: 10px;
}}
/* ************ NOT SURE IF WE NEED THESE STYLES AND/OR NEEDS INTEGRATION INTO MAIN PL CSS ************ */
/* 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;
}
/* for the hide/show password toggle button - this might already be part of another CSS file being used, so no need to duplicate if that's the case */
.my-toggle{-moz-appearance:none;background:transparent none repeat scroll 0 0;border: 0 none;border-radius:0.25em;color:#757575;cursor:pointer;font-size:0.75em;font-weight:normal;margin-right:0.5em;padding:0.5em;text-transform:uppercase;} /* note the change of color from #888 to #757575 for color contrast accessibility */
.my-toggle:hover, .my-toggle:focus{background-color:#eee;color:#555;outline:medium none transparent;}
/* adding an additional class via JS for the SHOW/HIDE button alignment issue within the forgot pw collapse */
.my-toggle-higherup {top: 13% !important;}
.hideShowPassword-toggle, .my-toggle{z-index: 3;}
::-ms-reveal, ::-ms-clear {display: none !important;} /* hiding the default show/hide on IE10 and Edge since doing it with script instead for all browsers */
/* class added with JS so that hide/show button remains in input field when jQuery validate is triggered in the pw field */
.hideShowButtonMarginFix {margin-top: -25px !important;}
/* 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 - Note that specific styling used in the Polaris Explore Journals screen is not used here - this link will display as a "regular" instead */
.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);
}