/* LAST MODIFIED: 12-21-18 */

h2 {
    font-size: 20px;
    font-weight: 700
}

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

h1.login-header {
    color: #ffffff;
    font-weight: bold;
}

.login-small-header, .login-small-header a {
    font-size: 14px;
    color: #fff;
}

.login-small-header a {
    text-decoration: underline;
}

.login-small-header a:hover {
    text-decoration:none;
}

/* below is the internal CSS taken from (and then adapted from) https://mytest.apa.org/apa/idm/trial-register.jsf?MCODE=ASC_14_DAY_TRIAL used when making the APA Style Central login screen mockups */

body {
    background-color: #fff;
    color: #4a4b51;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.inner-right-padding {
    margin-right:15px;
}

.inner-left-padding {
    margin-left:15px;
}

.email-space-bottom {
    padding-bottom: 15px;
}

.email-space-top {
    padding-top: 5px;
}
/* the display:flex;min-height: 100vh;flex-direction: column; was added via the AW login screen project, along with flex styles on the #backgroundContainer, see AA-712 */

.blue-bar-pn {
    background-color: #008cd2;
    height: 10px;
    flex: none;
}

/* the flex:none; was added via the AW login screen project, so the .blue-bar-pn acted well with browser zoom in and out - see AA-712 */

/* HEADER LOGO SVG STYLES */

ul.header-inner {
    padding: 0;
    margin: 0;
    list-style: none;
}

.header-inner a:hover {
    text-decoration: none;;
}

svg {
    height: 37px;
    width: 265px;
    position: relative;
    left: 0;
    margin: 32px 0 0 43px;
}

img.apa-logo {
    width: 278px;
    height: 41px;
    display: inline-block;
    margin-top: 27px;
    float: left;
    vertical-align: middle;
}

/*.header-inner li:first-child .pull-left::after {
    content: "";
    display: inline-block;
    margin-left: 26px;
    height: 34px;
    width: 1px;
    background: #ececec;
}*/



.form-control {
    height: 40px;
}

/* TRIAL REGISTRATION STYLES ADAPTED TO BS3 */

.middleContainer {
    margin: 0 auto;
    max-width: 1100px;
    padding: 30px 40px 0;
}

/* GENERIC RESETS FOR loginCustomCSS.css WHICH IS THE PARENT CSS FILE USED FOR THE MYAPA LOGIN SCREEN */

a {
    font-size: 14px;
}

/* footer resets */

footer {
    width: 100%;
    float: none;
    padding: 30px 50px;
    margin: 0;
    background-color: #fff;
    border-top: none;
    font-size: 14px;
    color: #333;
    height: auto;
    flex-shrink: 0;
}



/* FOOTER */

.no-outline {
    outline: 0 !important;
}

.footer-privacy {
    border-top: 10px solid #c1c1c1;
    padding: 2px 0 0;
    text-align: center;
}

.social-apastyle {
    background: transparent url(../../img/social/apastyle.png) center center no-repeat;
}

.social-facebook {
    background: transparent url(../../img/social/facebook.png) center center no-repeat;
}

.social-twitter {
    background: transparent url(../../img/social/twitter.png) center center no-repeat
}

.social-apastyle a, .social-facebook a, .social-twitter a {
    display: block;
    width: 35px;
    height: 35px
}

/* CUSTOM CSS - ADAPTED FROM MYAPA CUSTOM CSS */

#formContainer {
    background-color: #fff;
    border: 1px solid #c1ddf3;
    margin: 0 auto 40px;
    max-width: 780px;
    min-height: 200px;
    position: relative;
    color: #666;
    font-size: 13px;
    padding: 10px 10px 0;
}

.formContainerHeading {
    color: #444;
    padding: 0 10px;
    text-align: center;
}

.formContainerHeading span {
    font-size: 14px;
}

#formSection {
    color: #666;
    font-size: 13px;
    min-height: 240px;
    padding: 0 50px 30px;
}

/* for the split form design, this is the left side of login and register screens - there, the padding is padding:40px 360px 40px 50px; to make room for the right "register/log in with Google" button side */

#formContainer form label {
    color: #333;
    display: block;
    padding: 16px 0 0;
}

/* Note: The original MyAPA Custom CSS had padding:10px 0 0; but it would be better to have the label closer to the relevant field, so increasing padding-top from 10 > 16px */

.form-control[disabled] {
    border: none;
    background-color: #fff;
    box-shadow: none;
}

#formContainer input[type="text"], #formContainer input[type="email"], #formContainer input[type="password"] {
    background: none repeat scroll 0 0 #fff;
    color: #666;
    font-size: 13px !important;
    line-height: 13px;
    padding: 10px;
    max-width: 600px;
}

/* NOTE: I took out this - :not(.form-control[disabled]) - and first replaced it with .form-control:not(.form-control[disabled]), but now taking it out all together - since the old code was breaking the layout with parsing errors - this is something to review in the MyAPA CSS to see if it's an issue there (on iphones at least) */

input[type="submit"] {
    font-family: FontAwesome, Arial, Helvetica, Sans-serif;
}

/* getting fontawesome next and previous icons inside form input "buttons" , then use http://fortawesome.github.io/Font-Awesome/cheatsheet/ for unicode inside input value */

#formContainer input[type="submit"], .customButton1 {
    background: none repeat scroll 0 0 #003A70;
    color: #fff;
    font-size: 1em;
    border-radius: 8px;
    font-weight: normal;
    text-transform: uppercase;
    margin-top: 12px;
    padding: 8px 24px;
    transition: all 0.1s ease 0s;
}

input[type="submit"], .customButton1 {
    background: none repeat scroll 0 0 #003A70;
    color: #fff;
    font-size: 1em;
    border-radius: 8px;
    font-weight: normal;
    text-transform: uppercase;
    margin-top: 12px;
    padding: 8px 24px;
    transition: all 0.1s ease 0s;
}

input[type="submit"], .customButton1 {
    background: none repeat scroll 0 0 #0077BF;
    color: #fff;
    border: 1px solid #0077BF;
}

input[type="submit"]:hover {
    background: none repeat scroll 0 0 #0069A8;
    color: #fff !important;
    border: 1px solid 0069A8;
}

#formContainer input[type="submit"]:hover, .customButton1:hover {
    background: none repeat scroll 0 0 #0077BF;
    color: #fff;
    border: 1px solid #0077BF;
}

#formContainer input[type=text], #formContainer textarea, #formContainer input[type=email], #formContainer input[type=password] {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    border: 2px solid #ccc;
}

#formContainer input[type="text"]:focus, #formContainer textarea:focus, #formContainer input[type="email"]:focus, #formContainer input[type="password"]:focus, #formContainer input[type="tel"]:focus {
    box-shadow: 0 0 5px rgba(0, 151, 214, 0.8);
    border: 2px solid rgba(0, 151, 214, 0.8);
}

#rememberMe {
    margin-top: 16px;
}

#formContainer label[for="rememberMe"] {
    color: #737373;
    font-size: 12px;
}

.socialButtons a:active {
    color: #fff;
    -webkit-transform: transform: scale(0.95);
    -moz-transform: transform: scale(0.95);
    -ms-transform: transform: scale(0.95);
    -o-transform: transform: scale(0.95);
    transform: scale(0.95);
}

.googleButton {
    border-radius: 2px;
}

.socialButtons .googleButton {
    background: #c32f10;
}

.socialButtons .openAthensButton {
    background: #5c325f;
}

/* color extracted from OpenAthens logo found at https://openathens.org/resources/media/ */

.socialButtons i {
    padding-right: 12px;
    vertical-align: middle;
}

.btn.focus, .btn:focus {
    color: #fff;
}

/* bootstrap override so isn't #333 */

.bottomFormLink {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px;
}

.bottomFormLinkSmall {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 12px;
}

#formContainer .registerText {
    color: #737373;
    font-size: 12px;
}

#formContainer .helpText {
    color: #737373;
    font-size: 12px;
    line-height: 16px;
    margin: 0;
    padding: 0 0 0 1px;
}

#formContainer #disabledButtonMessage {
    color: #900;
    font-size: 14px;
    padding-bottom: 6px;
}

.help-blockRegular {
    color: #737373;
    display: block;
    margin-bottom: 10px;
    margin-top: 5px;
    font-size: 12px;
}

/* defining this since help-block being used by validation messages */

.help-block {
    font-weight: 400;
}

/* 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: #888;
    cursor: pointer;
    font-size: 0.75em;
    font-weight: bold;
    margin-right: 0.5em;
    padding: 0.5em;
    text-transform: uppercase;
}

.my-toggle:hover, .my-toggle:focus {
    background-color: #eee;
    color: #555;
    outline: medium none transparent;
}

.hideShowPassword-toggle, .my-toggle {
    z-index: 3;
}

/* for the must read terms of service section */

#notice, .alert-info {
    width: 90%;
    margin: 15px auto;
    padding: 20px;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 500;
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-left-color: #8a6d3b;
}

.smallerAlertText {
    font-size: 14px !important;
}

#rules {
    height: 130px;
    padding: 5px;
}

.modal-body {
    font-size: 16px;
}

.screen-only350 {
    display: block;
}

.mobile-only350 {
    display: none;
}

.border-right {
    border-right: 1px solid #ccc;
}

.card-section {
    padding: 20px;
}

/* *************** NEW CSS ADDED FOR LOGIN, REGISTER, LOOK UP ACCOUNT, and EDIT PROFILE SCREENS *************** */

#backgroundContainer {
    background-color: #f5f5f5;
    flex: 1 0 auto;
}

/* the flex:1; was added via the AW login screen project, along with flex styles on the body, see AA-712 */

#backgroundContainer2 {
    background: url('../Gateway.png') no-repeat center center fixed;
    flex: 1 0 auto;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* styling the .formContainerHeading differently on these screens since there is no "welcome" message for the h1 */

h1.formContainerHeading {
    font-size: 25px;
    margin: 10px 0;
    padding: 0;
    text-align: left;
}

/* making max-width increase from 780px to 900px to account for larger headings on desktop, used with #formContainer */

.formContainerLarger {
    max-width: 900px !important;
}

/* different padding here compared to #formSection, for better formatting with OpenID button(s) */

#sideBySideFormSection {
    color: #666;
    font-size: 13px;
    min-height: 240px;
    padding: 40px 320px 40px 30px;
}

/* left side of login and register screens */

.rightSideBackground {
    background-color: #ebf4fb;
}

/* background color of right side where OpenID button(s) are */

#openIDSection {
    bottom: 0;
    padding: 60px 40px 40px;
    position: absolute;
    right: 0;
    top: 0;
    width: 320px;
}

/* right side of login and register screens */

.googleButton {
    border-radius: 8px;
}

.socialButtons .googleButton {
    background: #c32f10;
}

.socialButtons i {
    padding-right: 12px;
    vertical-align: middle;
    font-size: 1.4em;
}

/* added the font-size: 1.4em; here since I took out the fa-2x from the source code, now that the button text is not transformed to all caps */

.socialButtons a {
    color: #fff;
    opacity: 0.9;
    text-decoration: none !important;
    text-transform: none;
    transition: all 0.2s ease 0s;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 400;
    height: 44px;
    line-height: 44px;
    margin: 0 0.5% 20px;
    padding: 0 10px 0 18px;
    text-align: left;
}

/* overriding the text-transform:uppercase on this screen, since OpenAthens looked strange without it, since extra space then, changed font-size from 1em to 1.2em - also, changed the icons in these buttons from fa-2x in the source code (removed for now) to having font sizes to make the button look good */

.socialButtons a:hover {
    color: #fff;
    opacity: 1.0;
    -webkit-transform: transform: scale(1.03);
    -moz-transform: transform: scale(1.03);
    -ms-transform: transform: scale(1.03);
    -o-transform: transform: scale(1.03);
    transform: scale(1.03);
}

.socialButtons a:active {
    color: #fff;
    -webkit-transform: transform: scale(0.95);
    -moz-transform: transform: scale(0.95);
    -ms-transform: transform: scale(0.95);
    -o-transform: transform: scale(0.95);
    transform: scale(0.95);
}

/* different widths of Google button needed for "Log in with Google" button text, "Sig Up with Google" button text, and "Link with Google" button text ; Also, min-width's for the Login and Create Account buttons */

section.loginForm .socialButtons a {
    min-width: 190px;
}

section.loginForm #logInSubmit {
    min-width: 110px;
}

section.createAccountForm .socialButtons a {
    min-width: 220px;
}

section.createAccountForm #registerSubmit {
    min-width: 170px;
}

section.editProfileForm #changePasswordButton {
    min-width: 190px;
}

section.editProfileForm .socialButtons a {
    min-width: 190px;
}

/* secondary ghost-like buttons */

.customButton2 {
    background: none repeat scroll 0 0 #fff;
    color: #333;
    font-size: 16px;
    border-radius: 8px;
    font-weight: normal;
    border: 1px solid #777;
    margin-top: 12px;
    padding: 7px 10px 5px;
    transition: all 0.1s ease 0s;
}

.customButton2:hover {
    background: none repeat scroll 0 0 #e8e8e8;
    color: #333;
    border: 1px solid #333;
}

.customButton2-small {
    background: none repeat scroll 0 0 #fff;
    color: #333;
    font-size: 14px;
    border-radius: 8px;
    font-weight: normal;
    border: 1px solid #777;
    margin-top: 12px;
    padding: 5px 8px 3px;
    transition: all 0.1s ease 0s;
}

.customButton2-small:hover {
    background: none repeat scroll 0 0 #e8e8e8;
    color: #333;
    border: 1px solid #333;
}

/* input-group-btn style, used in Look Up Account screen */

.customButton3 {
    background: none repeat scroll 0 0 #c54b00;
    color: #fff;
    font-size: 16px;
    border-radius: 8px;
    font-weight: normal;
    margin: 0;
    height: 40px;
    padding: 6px 10px;
    transition: all 0.1s ease 0s;
}

/* Note: customButton3 height matches the 40px height of .form-control override of 34px */

.customButton3:hover {
    background: none repeat scroll 0 0 #ac4100;
    color: #fff;
    border: 1px solid #c54b00;
}

/* "SAVE CHANGES" button, used in well on edit-profile screen */

.customButton4, input.customButton4 {
    background: none repeat scroll 0 0 #c54b00;
    color: #fff;
    font-size: 1.3em !important;
    border-radius: 8px;
    font-weight: normal;
    text-transform: uppercase;
    margin-top: 0 !important;
    padding: 14px 24px !important;
    transition: all 0.1s ease 0s;
    border: none !important;
}

.customButton4:hover, input.customButton4:hover {
    background: none repeat scroll 0 0 #ac4100;
    color: #fff;
    border: none !important;
}

/* "Change Password" button - secondary CTA type button with hover expand effect, like openID buttons */

.customButton5 i {
    padding-right: 12px;
    vertical-align: middle;
}

.customButton5 {
    background: none repeat scroll 0 0 #005b93;
    color: #fff;
    opacity: 0.9;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: all 0.2s ease 0s;
    cursor: pointer;
    font-size: 1em;
    font-weight: 400;
    height: 44px;
    line-height: 44px;
    margin: 0 0.5% 20px;
    padding: 0 10px 0 18px;
    text-align: center;
    border-radius: 8px;
}

.customButton5:hover {
    background: none repeat scroll 0 0 #008adf;
    color: #fff;
    opacity: 1.0;
    -webkit-transform: transform: scale(1.03);
    -moz-transform: transform: scale(1.03);
    -ms-transform: transform: scale(1.03);
    -o-transform: transform: scale(1.03);
    transform: scale(1.03);
}

.customButton5:active {
    color: #fff;
    -webkit-transform: transform: scale(0.95);
    -moz-transform: transform: scale(0.95);
    -ms-transform: transform: scale(0.95);
    -o-transform: transform: scale(0.95);
    transform: scale(0.95);
}

/* styles specific to Create an Account screen */

form#createAccountForm .helpText {
    margin-left: -20px;
}


/* spans for launching BS modals - ex = the Appropriate Usage Statement in the footer of the PN login screen */

.spanLikeAnchor {
    cursor: pointer;
    color: #005499;
    text-decoration: none;
    font-size: 14px;
}

.spanLikeAnchor:hover {
    text-decoration: underline;
}

/* styles for BS modal */

/* matching the PN h2.searchHeading */

.pnHeading1, .modal-title {
    color: #0077bf;
    font-size: 21px;
}

/* .svg button styles */

.login-button {
    width: 100%;
    font-size: 16px;
    border-radius: 8px;
    color: #333;
    border: 1px solid #777;
    transition: all 0.2s ease 0s;
    background-color: #fff;
    display: flex;
    margin: 0 0 20px 0;
    padding: 14px 16px 9px;
    align-content: center;
    justify-content: center;
    min-width: 160px;
}

.login-button:hover, .btn-outline:hover {
    background: none repeat scroll 0 0 #e8e8e8;
    color: #333;
    border: 1px solid #333;
}

.login-button svg {
    width: 25px;
    height: 25px;
    margin: 0 1rem 0 0;
}

.btn-outline {
    font-size: 16px;
    border-radius: 8px;
    color: #333;
    border: 1px solid #777;
    transition: all 0.2s ease 0s;
    background-color: #fff;
}

.open-athens-login-button {
    color: #3B3B4C !important;
    /* color extracted from OpenAthens logo found at https://openathens.org/resources/media/ */
    border: 1px solid #3B3B4C !important;
}

.open-athens-login-button svg path {
    fill: #3B3B4C !important;
    /* color extracted from OpenAthens logo found at https://openathens.org/resources/media/ */
}

.card {
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    padding: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.alert {
    max-width: 900px;
    margin: 0 auto;
}

.alert-spacing-bottom {
    margin-bottom: 30px;
}

.or-divider {
    background-color: #444;
    color: #FFF;
    padding: 8px;
    border-radius: 50px;
    font-size: 14px;
    position: absolute;
    left: 0;
    top: 53%;
    margin-left: -18px;
}
.footer-socialicons {
    text-align: right;
}

/*Media Queries*/

@media only screen and (max-width: 991px) {
    .or-divider {
        margin-top: -17px !important;
        left: 50% !important;
        top: 0 !important;
    }
    .border-right {
        border-right: 0px !important;
        border-bottom: 1px solid #ccc !important;
    }
    /* hiding the APA logo and the gray separator border below 991px */
    img.apa-logo, .header-inner li:first-child .pull-left::after {
        display: none;
    }
    footer {
        width: 100%;
    }
    #formContainer .helpText {
        padding-top: 4px;
    }
    .inner-right-padding {
        margin-right:0px;
    }
    
    .inner-left-padding {
        margin-left:0px;
    }
    .alert {
        margin: 15px;
    }
}

@media only screen and (max-width: 767px) {
    .customButton4, input.customButton4 {
        width: 100%;
    }
    .customButton5, input.customButton5 {
        width: 100%;
    }
    footer {
        margin-bottom: 45px;
    }
    .footer-contactinfo {
        margin-bottom: 14px;
    }
    .footer-socialicons {
        text-align: center;
        margin-bottom: 10px;
    }
    .footer-privacy {
        border-top: none;
        text-align: left;
        margin-bottom: 10px;
    }
    .footer-privacy div {
        padding-bottom: 10px;
    }
    .middleContainer {
        margin: 0 10px;
    }
    #formContainer #formSection {
        padding: 10px;
    }
}

@media only screen and (max-width: 600px) {
    .apaStyleHeader img {
        margin: 0 auto;
        padding-right: 27px;
    }
}


@media only screen and (max-width: 596px) {
    #openIDSection {
        margin-top: 10px;
        padding: 30px;
    }
    .middleContainer {
        padding: 30px 20px 0;
    }
    .inner-right-padding {
        margin-right:0px;
    }
    
    .inner-left-padding {
        margin-left:0px;
    }
}

/* making checkboxes bigger size, such as the "Same As Shipping Address" one on Addresses screen */
input[type=checkbox] {transform: scale(1.5);}/* Note: Using custom checkboxes and radios now, with that special code, but here's a default checkbox make bigger code */

/* Customize the label (the container) */
.checkboxContainer {
    display: block;
    position: relative;
    padding-left: 35px;
    /* margin-bottom: 12px; */
    cursor: pointer;
    font-size: 16px;/* was 22px */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  /* Hide the browser's default checkbox */
  .checkboxContainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 13px;/* was 0 */
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;/* was #eee */
    border: 1px solid #333;/* added */
  }
  /* On mouse-over, add a grey background color */
  .checkboxContainer:hover input ~ .checkmark {
    background-color: #d1d1d1;/* was #ccc */
  }
  /* When the checkbox is checked, add a blue background */
  .checkboxContainer input:checked ~ .checkmark {
    background-color: #2196F3;
  }
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  /* Show the checkmark when checked */
  .checkboxContainer input:checked ~ .checkmark:after {
    display: block;
  }
  /* Style the checkmark/indicator */
  .checkboxContainer .checkmark:after {
    left: 10px;
    top: 6px;
    width: 6px;
    height: 11px;
    border: solid #ffffff;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .password-spacing-bottom {
      padding-bottom: 8px;
  }

  label {
      font-weight: 500;
  }

  h2 label {
      font-weight: 700;
  }

@media only screen and (max-width: 500px) {
    .footer-contactinfo {
        text-align: center;
    }
    .footer-privacy {
        text-align: center;
    }
}


@media only screen and (max-width: 420px) {
    .footer-contactinfo {
        font-size: 12px;
    }
    .card-section {
        padding: 0px;
    }
    .inner-right-padding {
        margin-bottom:40px;
    }
    
    .inner-left-padding {
        margin-top:40px;
    }
}

@media only screen and (max-width: 350px) {
    .login-button {
        font-size: 14px;
        padding: 10px 2px 5px;
    }
    .footer-contactinfo {
        font-size: 11px;
    }
}

@media only screen and (max-width: 330px) {
    .apaStyleHeader img {
        padding-top: 10px;
    }
}

@media only screen and (max-width: 290px) {
    .login-button {
        font-size: 12px;
    }
    .apaStyleHeader img {
        padding-top: 18px;
    }
}