/* ******** LAST UPDATED: 4-7-2022 ******** */
/* ************ GENERAL STYLES ************ */
body {
    background-color: #EEEEEE;
    /* styles for sticky footer */
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
#mainBodyContainer, #additionalInfoContainer {
    flex: 1 0 auto; /* style for sticky footer */
}
.height-100 {
    height: 100%;
}
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: 0em;
    width: 1em;
    height: 1em;
    left: 0.1em; /* added this so icon is not totally against the link on display */
}
h2.cardHeading {
    font-size: 35px;
}

/* ************ POSSIBLY ADD THESE STYLES TO THE MAIN PL ************ */
input[readonly] {
    cursor: not-allowed;
    pointer-events: all !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;
}
/* ************ 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);
}
/* 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 *** */
.toast-placement-top-right {
    position: fixed; /* so it's always on the top-right of the viewport */
    z-index: 9998;
    top: 50px;
    right: 10px;
}
/* .svg button styles for Google Open ID button */
.login-button{width: 100%;font-size: 14px;border-radius: 8px;color: #333333;border: 1px solid #777777; transition: all 0.2s ease 0s;background-color: #FFFFFF;display: flex;margin: 20px 0 0 0;padding: 14px 5px 9px;align-content: center;justify-content: center;min-width: 160px;}
.login-button:hover{background:none repeat scroll 0 0 #E8E8E8;color:#333;border:1px solid #333333;}
.login-button svg{width: 25px;height: 25px;margin: 0 1rem 0 0;}
/* OR divider */
.sectionSpacerHorizontal span {
    background: #666 none repeat scroll 0 0;
    border-radius: 50%;
    color: #FFFFFF;
    display: block;
    font-weight: 700;
    height: 40px;
    line-height: 40px;
    margin-top: -35px;
    padding: 0;
    position: absolute;
    z-index: 1;
    right: 48%;
    text-align: center;
    width: 40px;
}
/* button margin spacing at <575px stacking breakpoint */
@media screen and (max-width: 575px) {
    #registerForm-link {
        margin-top: 15px;
    }
}

/***** Login Screen CSS *****/
h1 {
    font-size: 2rem;
}
h1 small {
    font-size: 1rem;
}
h2 {
    font-size: 1.5rem;
}
h3 {
    font-size: 1.35rem;
}
.shipping {
    font-size: 1.2rem;
}
#loginCode, #googleLogin, #OpenAthens, #institutionEmailSubmit {
    text-transform: initial;
}
.separator {
    border-top: 1px solid #DEDEDF;
    position: relative;
}
.separator-text {
    background-color: #DEDEDF;
    border-radius: 200px;
    width: 35px;
    position: relative;
    top: -19px;
}
.separator.side {
    border-top: 1px solid #FFFFFF;
    position: relative;
}
.separator.accent {
    border-top: 1px solid #DEDEDF;
    position: relative;
}
.separator.accent .separator-text {
    background-color: #DEDEDF;
    border-radius: 200px;
    width: 35px;
    position: relative;
    top: -19px;
    /*color: #fff;*/
}
.additionalInfo {
    background-color: #FFFFFF;
}
.btn svg {
    max-width: 25px;
    margin-right: 10px;
    min-width: 18px;
}
#googleLogin:hover svg path.yellow {
    fill: #FBBC05;
}
#googleLogin:hover svg path.green {
    fill: #34A853;
}
#googleLogin:hover svg path.red {
    fill: #EA4335;
}
#googleLogin:hover svg path.blue {
    fill: #4285F4;
}
.top-text {
    border-bottom: 1px solid #E9E9EA;
}
input[type="number"] {
    width: 1.25em;
    line-height: 1;
    margin: 0.1rem;
    padding: .25em;
    font-size: 2rem;
    text-align: center;
    appearance: textfield;
    -webkit-appearance: textfield;
    border: 2px solid #C7C8C9;
    border-radius: 4px;
}
#togglePassword, .togglePassword {
    margin-left: -28px; 
    cursor: pointer;
    color: #4D5154;
    position: absolute;
    margin-top: -30px;
    right: 43px;
    background-color: #E9E9EA;
    border-radius: 5px;
    padding: 0px 4px 3px;
    font-size: 0.8rem;
}
#togglePassword:hover, .togglePassword:hover {
    color: #212529;
    background-color: #C7C8C9;
}
.has-error input, .has-error select, .has-error textarea {
    border-color: #A94442;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

/******* NMA Login-Specific CSS *******/
.modal {
    margin-top: 4%;
}

/******* Advertisement Login-Specific CSS *******/
#promo h2 {
    font-size: 2.25rem;
}
#promo h3 {
    font-size: 1.15rem;
    font-weight: bold;
    padding-bottom: 10px;
    border-bottom: 2px solid #003A70;
}
#promo p {
    font-size: 1.15rem;
}
#promo img {
    width: 100%;
    max-width: 530px;
    display: inline;
}
#promo a {
    display: inline;
}
.max-500 {
    max-width: 500px;
}
.img-label {
    max-width: 134px;
    display: inline;
}

/******* Two Column Layout Classes *******/
.img-responsive {
    max-width: 100%;
    display: inline;
}
.right {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 0;
    position: relative;
}
.left #togglePassword, .togglePassword {
    right: 47px;
}
.btn-outline-join {
    display: inline-block;
}
@media screen and (max-width: 767px) {
    .right {
        border-top-right-radius: 0;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
    }
}
@media (max-width: 991px) {
    .container {
        max-width: 750px;
    }
}

/******* ACW Classes *******/
body.acw {
    background: #FAFAFA;
    background: linear-gradient(45deg, #FAFAFA, #e6e6e3);
}
body.acw.direct {
    background: #135da6;
    background: linear-gradient(45deg, #135da6 0%, #0688ee 100%);
}
.acw img.lines {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 125%;
}
.acw img.circle {
    position: absolute;
    top: 65%;
    left: -180px;
    height: 249px;
    width: 249px;
}
.acw header .banner .headLogo img {
    max-height: 46px;
}
.white {
    color: #FFFFFF;
}
.acw .btn {
    font-weight: 600;
    font-size: 18px;
    padding: 12px 48px;
    border-radius: 8px;
    border-color: #000000;
    color: #000000;
}
.acw .btn-secondary {
    background-color: #c54b00;
    border-color: #c54b00;
    color: #FFFFFF;
}
.acw .btn-primary {
    background-color: rgba(250, 180, 12, 0.95);
    border-color: rgba(250, 180, 12, 0.95);
}
.acw .btn-primary:hover, .acw .btn-primary:focus, .acw .btn-secondary:hover, .acw .btn-secondary:focus {
    background-color: #000000;
    border-color: #000000;
    color: #FFFFFF;
}
.acw .btn-outline:hover {
    background-color: #d9d9d9;
}

/******* Psychology PAC Classes *******/
.pac header .banner .headLogo img {
    max-height: 52px;
}
@media screen and (min-width: 768px) and (max-width: 995px) {
    .pac header .banner .headLogo img.large {
        margin-top: 0;
        padding: 5px 0;
    }
}
@media screen and (max-width: 767px) {
    .pac header .banner .headLogo img.large {
        margin: 0 0 0 10px;
        padding: 5px 0;
    }
}
@media screen and (max-width: 480px) {
    .pac header .banner .headLogo img.small {
        margin: 0 0 0 10px;
        padding: 5px 0;
    }
}

@media screen and (max-width: 480px) {
    #googleRegister {
        font-size: 0.85rem;
        padding-top: 9px;
        padding-bottom: 9px;
    }
    #googleRegister svg {
        display: none;
    }
}