/* LAST MODIFIED: 10-21-2021 */
/* below is the internal CSS taken from (and adapted from) https://mytest.apa.org/apa/idm/trial-register.jsf?MCODE=ASC_14_DAY_TRIAL */
body{background-color:#fff;color:#4a4b51;font-family:"Open Sans", sans-serif;font-size:14px;}
.blue-bar{background-color:#007ac5;height:10px;}
.apaStyleHeader{height:60px;margin-left:35px;background-color:#fff;}/* 3-29-19 added the white background color to header for toggling form reasons */
.apaStyleHeader img{padding-top:7px;margin:0 35px;}
.apaStyleHeader .img-responsive{display:inline;}/* this will override the default Bootstrap display:block for the img-responsive class, which was making entire header be the anchor */
.form-control{height:40px;} /* Bootstrap override: Making the input fields bigger than the Bootstrap 34px height default, since input text was chopped off */
@media only screen and (max-width: 600px){
    .apaStyleHeader img{margin: 0 auto;padding-right:27px;}
}
@media only screen and (max-width: 330px){
    .apaStyleHeader img{padding-top:10px;}
}
@media only screen and (max-width: 290px){
    .apaStyleHeader img{padding-top:18px;}
}
/* TRIAL REGISTRATION STYLES ADAPTED TO BS3 */
.middleContainer{margin:0 auto;max-width:1100px;padding:30px 40px 0;}
/* FOOTER - MODIFIED STYLE FROM APASTYLECENTRAL.APA.ORG */
.no-outline{outline:0 !important}
footer{background-color:#fff;padding:30px 50px;}
@media only screen and (max-width: 768px){
    .footer-contactinfo{margin-bottom:14px;}
}
.footer-privacy{border-top:10px solid #c1c1c1;padding:2px 0 0;text-align:center;}
@media only screen and (max-width: 768px){
    .footer-privacy{border-top:none;text-align:left;margin-bottom:10px;}
    .footer-privacy div{padding-bottom:10px;}
}
.footer-socialicons{text-align:right;}
@media only screen and (max-width: 768px){
    .footer-socialicons{text-align:center;margin-bottom:10px;}
}
@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;}  
}
@media only screen and (max-width: 350px){
    .footer-contactinfo{font-size:11px;}  
}
.social-apastyle{background:transparent url(../../img/social/apastyle.png) center center no-repeat}
.social-apastyleblog{background:transparent url(../../img/social/apastyleblog.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-googleplus{background:transparent url(../../img/social/gplus.png) center center no-repeat}
.social-apastyle a,.social-apastyleblog a,.social-facebook a,.social-twitter a,.social-googleplus a{display:block;width:35px;height:35px}
/* CSS ADAPTED FROM APASTYLECENTRAL.APA.ORG */
.welcome-container{padding:10px;}
.welcome-container .welcome-heading p i{font-size:32px;font-weight:500;}
.welcome-container .welcome-heading p, .modal-title{line-height:1.15;font-size:30px;font-weight:600;margin-bottom:0;color:#0077C0;}
.welcome-container .intro-text{line-height:170%;font-size:15px;margin-top:10px;margin-bottom:20px;}
.welcome-container .intro-text ul{padding-top:10px;}
/* 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 #c54b00;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;}
#formContainer input[type="submit"]:hover, .customButton1:hover{background:none repeat scroll 0 0 #ac4100;color:#fff;border:1px solid #c54b00;}
#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; 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: scale(0.95);-moz-transform: scale(0.95);-ms-transform: scale(0.95);-o-transform: scale(0.95);transform: scale(0.95);}
.googleButton{border-radius:2px;}
.socialButtons .googleButton{background:#c32f10;}
.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:bold;} /* bolding the jValidate error messages to make them stand out more, which are using the BS help-block style/location */
/* responsive styles for form screen */
@media only screen and (max-width: 991px){
    #formContainer .helpText{padding-top:4px;}
}
@media only screen and (max-width: 767px){
    .middleContainer{margin:0 10px;}
    #formContainer #formSection{padding:10px;}
}
@media only screen and (max-width: 500px){
    .middleContainer{margin:0 5px}
    .formContainerHeading{padding:0;font-size:24px;}
    #formContainer input[type="submit"]{width:100%;}
}
/* 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:normal;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;}
::-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 */
/* 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;}
/* making text area taller on small devices for easier scrolling */
@media only screen and (max-width: 500px){
    #rules{height:180px;}
}
/* custom alert styling - warning/error - used for emailOnFile section */
.customAlert1{width:100%;margin:15px auto;padding:10px;border:1px solid #ebcccc;border-left-width:5px;border-radius:3px;margin:0 auto;font-size:16px;font-weight:500;color:#a94442;background-color:#f7ecec;border-left-color:#a94442;}
.customAlert1 a, .alertLink{color:#014884;text-decoration:underline;}
.customAlert1 a:hover, .alertLink:hover{text-decoration:none;}
/* modal styling, note the modal-title is the same as .welcome-container .welcome-heading p */
.modal-body{font-size:16px;}
/* custom responsive classes */
/* 350px breakpoint responsive switch - being used for LTIregistrationComplete modal "continue" button */
.screen-only350{display:block;}
.mobile-only350{display:none;}
@media screen and (max-width: 350px){
    .screen-only350{display:none;}
    .mobile-only350{display:block;}
}
/* *************** NEW CSS ADDED FOR LOGIN, REGISTER, LOOK UP ACCOUNT, and EDIT PROFILE SCREENS *************** */
#backgroundContainer{background-color:#f5f5f5;}
/* 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:140px 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;}
.socialButtons a{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:left;}
.socialButtons a:hover{color:#fff;opacity:1.0;-webkit-transform: scale(1.03);-moz-transform: scale(1.03);-ms-transform: scale(1.03);-o-transform: scale(1.03);transform: scale(1.03);}
.socialButtons a:active{color:#fff;-webkit-transform: scale(0.95);-moz-transform: scale(0.95);-ms-transform: scale(0.95);-o-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;}
@media only screen and (max-width: 767px){
    .customButton4, input.customButton4{width:100%;}
}
/* "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: scale(1.03);-moz-transform: scale(1.03);-ms-transform: scale(1.03);-o-transform: scale(1.03);transform: scale(1.03);}
.customButton5:active{color:#fff;-webkit-transform: scale(0.95);-moz-transform: scale(0.95);-ms-transform: scale(0.95);-o-transform: scale(0.95);transform: scale(0.95);}
@media only screen and (max-width: 767px){
    .customButton5, input.customButton5{width:100%;}
}
.sectionSpacerVertical span{background:none repeat scroll 0 0 #666;color:#fff;display:block;font-style:italic;font-weight:700;margin-left:-60px;margin-top:-2.0em;padding:0;position:absolute;text-align:center;top:50%;width:40px;height:40px;line-height:40px;border-radius:50%;}
.sectionSpacerHorizontal span{background: none repeat scroll 0 0 #666;color:#fff;display:block;font-style:italic;font-weight:700;margin-left:150px;margin-top:-3.0em;padding:0;position:absolute;text-align:center;right:50%;width:40px;height:40px;line-height:40px;border-radius:50%;}
/* styles specific to Create an Account screen */
form#createAccountForm .helpText{margin-left:-20px;} /* moving over help text on Create an Account form so that it's one line on desktop */
section.createAccountForm .sectionSpacerVertical span{margin-top:-39.0em;} /* moving "or" circle up on Create an Account form desktop display */
/* styles specific to Look Up Account screen */
#topButtons{height:40px;margin-bottom:30px;}
#topButtons #leftButtons{width:50%;float:left;text-align:left;}
#topButtons #rightButtons{width:50%;float:right;text-align:right;}
/* adding padding to boxes with mostly text, like the Look Up Account screen and Edit Profile screen */
.textDisplayBox{padding:22px !important;}
.textDisplayBox h1{font-size:33px;}
.textDisplayBox h2{font-size:24px;}
.separatorLine{border-bottom:3px solid #eee;margin-top:30px;margin-bottom:20px;margin-left:0px;}
.containerFooter{margin:0 auto 50px;max-width:960px;position:relative;text-align:center;}

/* styles specific to Edit Profile screen */
h3.subheading{font-size:20px;}
.largeMiddleContainer{margin:0 auto;max-width:1200px;padding:30px 40px 0;}
.formContainerLargest{max-width:1200px !important;}
.form-indent{margin-left:30px;}
@media screen and (max-width: 767px){
    .form-indent{margin-left:20px;}
}
.headingBox{background-color:#ebf4fb;border-radius:3px;padding:5px;margin-bottom:14px;margin-top:24px;}
.headingBox h2{font-size:23px;margin:2px 0 2px 10px;}
.requiredAsterisk{color:#f00;font-size:10px;opacity:0.6;padding-left:4px;}
/* custom breakpoint text swap for Edit Profile "Professional Suffix" to "Prof. Suffix" in between 1200px and 992px, for layout reasons */
.screen-only1200to992{display:block;}
.mobile-only1200to992{display:none;}
@media screen and (max-width: 1200px) and (min-width:992px){
    .screen-only1200to992{display:none;}
    .mobile-only1200to992{display:block;}
}
/* custom breakpoint text swap for Edit Profile "Extension" to "Office Phone Extension" at 991px breakpoint, to give this field better context when form stacked */
.screen-only991{display:block;}
.mobile-only991{display:none;}
@media screen and (max-width: 991px){
    .screen-only991{display:none;}
    .mobile-only991{display:block;}
}
/* 430px breakpoint responsive switch - being used for "LINK APA ACCOUNT WITH GOOGLE" > "LINK WITH GOOGLE" button */
.screen-only430{display:block;}
.mobile-only430{display:none;}
@media screen and (max-width: 430px){
    .screen-only430{display:none;}
    .mobile-only430{display:block;}
}
/* *********** CTA ************ */
.bs-calltoaction{position:relative;width:auto;padding:15px 25px;border:1px solid #222;margin-top:10px;margin-bottom:50px;border-radius:5px;}
.bs-calltoaction > .row{display:table;width: calc(100% + 30px);}
.bs-calltoaction > .row > [class^="col-"], .bs-calltoaction > .row > [class*=" col-"]{float:none;display:table-cell;vertical-align:middle;}
.cta-contents{padding-top:10px;padding-bottom:10px;}
.cta-title{margin:0 auto 15px;padding:0;font-size:22px;}
.cta-desc{padding:0;}
.cta-desc p:last-child{margin-bottom:0;}
.cta-button{padding-top:10px;padding-bottom:10px;}
@media (max-width: 991px){
    .bs-calltoaction > .row{
        display:block;
        width: auto;
    }
    .bs-calltoaction > .row > [class^="col-"], .bs-calltoaction > .row > [class*=" col-"]{float:none;display:block;vertical-align:middle;position:relative;}
    .cta-contents{text-align:center;}
}
.bs-calltoaction.bs-calltoaction-default{color:#333;background-color:#fff;border-color:#ccc;}
/* *********** Responsive Form Styles ************ */
@media only screen and (max-width: 991px){
    #sideBySideFormSection{padding:40px 370px 40px 30px;}
    section.createAccountForm .sectionSpacerVertical span{margin-top:-49.0em;} /* specific to Create an Account form */
}
/* the big stack breakpoint */
@media only screen and (max-width: 767px){
    .sectionSpacerVertical span{right:46%;margin-top:-9.4em;}
    section.createAccountForm .sectionSpacerVertical span{margin-top:-8.8em;} /* specific to Create an Account form */
    #sideBySideFormSection{padding:30px;}
    #formContainer{padding:0;margin-top:0;}
    #formContainer{margin-top:0;}
    #formContainer #formSection{padding:30px;}
    #formContainer #openIDSection{padding:34px;position:relative;width:100%;}
    #formContainer input[type="text"], #formContainer input[type="password"]{min-width:100%;width:100%;}
    .socialButtons{padding-top:16px;}
    .socialButtons a, #fullWidthContainer .socialButtons a{width:100%;text-align:center;}
    #openIDSection{margin-top:10px;}
    #topButtons{text-align:center;}
    #topButtons #leftButtons{display:none;width:0%;}
    #topButtons #rightButtons{width:100%;text-align:center;}
    #topButtons #rightButtons #createAnAccountButton{margin-bottom:6px;}
    #topButtons #rightButtons #loginButton{margin-bottom:6px;}
    #topButtons #rightButtons #loginButton a{width:50%;}
    #topButtons #rightButtons #createAnAccountButton a{width:50%;}
}
@media only screen and (max-width: 596px){
    #openIDSection{margin-top:10px;padding:30px;}
    .middleContainer{padding:30px 20px 0;}
}
@media only screen and (max-width: 516px){
    .sectionSpacerVertical span{right:44%;margin-top:-10.0em;}
    section.createAccountForm .sectionSpacerVertical span{margin-top:-9.5em;} /* specific to Create an Account form */
}
@media only screen and (max-width: 378px){
    .sectionSpacerVertical span{margin-top:-10.8em;}
}
@media only screen and (max-width: 360px){
    .sectionSpacerVertical span{margin-top:-10em;}
    .socialButtons a{padding:0;}
    #formContainer #openIDSection{padding:34px 14px;}
}
@media only screen and (max-width: 338px){
    .sectionSpacerVertical span{margin-top:-10.9em;}
}
/* 270px breakpoint responsive switch - being used for "Create an Account" to "Create Account" button text switch on register forms */
.screen-only270{display:block;}
.mobile-only270{display:none;}
@media screen and (max-width: 270px){
    .screen-only270{display:none;}
    .mobile-only270{display:block;}
}
/* ********** added 3-28-19 ************* */
/* ********* BOOTSTRAP 3 MODAL STYLES ********** */
.modal .close{font-size:40px;}
.modal-title{margin-top:40px;}